refactor cli

Dockerfile

@@ -0,0 +1,8 @@
+FROM node:18-slim
+# open this line in china
+# RUN echo "registry=https://registry.npmmirror.com/"> ~/.npmrc  
+RUN npm install -g @mapbox/spritezero glob minimist
+COPY bin/spritezero /usr/local/lib
+RUN ln -s /usr/local/lib/spritezero  /usr/local/bin/
+
+ENTRYPOINT [ "spritezero" ]

bin/spritezero

@@ -2,103 +2,74 @@
 
 var spritezero = require('@mapbox/spritezero');
 var fs = require('fs');
-var queue = require('queue-async');
-var multiline = require('multiline');
 var path = require('path');
-var stringify = require('json-stable-stringify');
+var glob = require('glob');
 var argv = require('minimist')(process.argv.slice(2), {
-    boolean: ['retina', 'unique', 'h', 'help']
+  default: { _: ['.', '.'] },
+  boolean: ['retina', 'unique', 'h', 'help']
 });
-
-function filepaths (dir) {
-    return fs.readdirSync(dir)
-        .filter(function (d) {
-            return !d.match(/^\./);
-        })
-        .map(function (d) {
-            return path.join(dir, d);
-        });
-}
-
-function showHelp () {
-  console.log(multiline(function () {
-  /*
-  spritezero
-
-  Generate sprite sheets for maps and the web using SVG files as input
-
-  Usage
-   <output> <inputdir>
-
-  Example
-  spritezero maki maki/
-  */ }));
+
+function showHelp() {
+  console.log(`
+    spritezero
+    Generate sprite sheets for maps and the web using SVG files as input
+    spritezero [output filename] [input directory]
+
+    --retina      shorthand for --ratio=2
+    --ratio=[n]   pixel ratio
+    --unique      map identical images to multiple names
+   `);
 }
 
 if (argv.help || argv._.length < 2) {
-    showHelp();
-    /* istanbul ignore next */
-    process.exit(1);
+  showHelp();
+  /* istanbul ignore next */
+  process.exit(1);
 }
 
 var ratio = 1;
 var unique = false;
 
 if (argv.retina) {
-    ratio = 2;
+  ratio = 2;
 } else if (argv.ratio) {
-    ratio = parseFloat(argv.ratio);
+  ratio = parseFloat(argv.ratio);
 }
 
 if (argv.unique) {
-    unique = true;
+  unique = true;
 }
 
 var outfile = argv._[0];
 var input = argv._[1];
 
-function loadFile (file, callback) {
-    fs.readFile(file, function (err, res) {
-        return callback(err, {
-            svg: res,
-            id: path.basename(file).replace('.svg', '')
-        });
-    });
+function sortById(a, b) {
+  return b.id < a.id;
 }
 
-function sortById (a, b) {
-    return b.id < a.id;
+const buffers = glob
+  .sync(input + '/*.svg')
+  .map((f) => ({
+    svg: fs.readFileSync(f),
+    id: path.basename(f).replace('.svg', '')
+  }))
+  .sort(sortById);
+
+var genLayout = unique ? spritezero.generateLayoutUnique : spritezero.generateLayout;
+genLayout({ imgs: buffers, pixelRatio: ratio, format: true }, saveLayout);
+genLayout({ imgs: buffers, pixelRatio: ratio, format: false }, saveImage);
+
+function saveLayout(err, formattedLayout) {
+  if (err) throw err;
+  fs.writeFileSync(outfile + '.json', JSON.stringify(formattedLayout, undefined, '  '));
 }
 
-var q = queue(16);
-
-filepaths(input).forEach(function (file) {
-    q.defer(loadFile, file);
-});
-
-q.awaitAll(function (err, buffers) {
+function saveImage(err, layout) {
+  if (err) throw err;
+  spritezero.generateImage(layout, function (err, image) {
     if (err) throw err;
-
-    buffers.sort(sortById);
-
-    function saveLayout (err, formattedLayout) {
-        if (err) throw err;
-        fs.writeFile(outfile + '.json', stringify(formattedLayout, {space: '  '}), 'utf8', function (err) {
-            if (err) throw err;
-        });
-    }
-
-    function saveImage (err, layout) {
-        if (err) throw err;
-        spritezero.generateImage(layout, function (err, image) {
-            if (err) throw err;
-            fs.writeFile(outfile + '.png', image, function (err) {
-                if (err) throw err;
-            });
-        });
-    }
-
-    var genLayout = unique ? spritezero.generateLayoutUnique : spritezero.generateLayout;
-    genLayout({ imgs: buffers, pixelRatio: ratio, format: true }, saveLayout);
-    genLayout({ imgs: buffers, pixelRatio: ratio, format: false }, saveImage);
-});
+    fs.writeFileSync(outfile + '.png', image, function (err) {
+      if (err) throw err;
+    });
+  });
+}

bin/spritezero_bak

@@ -0,0 +1,104 @@
+#!/usr/bin/env node
+
+var spritezero = require('@mapbox/spritezero');
+var fs = require('fs');
+var queue = require('queue-async');
+var multiline = require('multiline');
+var path = require('path');
+var stringify = require('json-stable-stringify');
+var argv = require('minimist')(process.argv.slice(2), {
+    boolean: ['retina', 'unique', 'h', 'help']
+});
+
+function filepaths (dir) {
+    return fs.readdirSync(dir)
+        .filter(function (d) {
+            return !d.match(/^\./);
+        })
+        .map(function (d) {
+            return path.join(dir, d);
+        });
+}
+
+function showHelp () {
+  console.log(multiline(function () {
+  /*
+  spritezero
+
+  Generate sprite sheets for maps and the web using SVG files as input
+
+  Usage
+   <output> <inputdir>
+
+  Example
+  spritezero maki maki/
+  */ }));
+}
+
+if (argv.help || argv._.length < 2) {
+    showHelp();
+    /* istanbul ignore next */
+    process.exit(1);
+}
+
+var ratio = 1;
+var unique = false;
+
+if (argv.retina) {
+    ratio = 2;
+} else if (argv.ratio) {
+    ratio = parseFloat(argv.ratio);
+}
+
+if (argv.unique) {
+    unique = true;
+}
+
+var outfile = argv._[0];
+var input = argv._[1];
+
+function loadFile (file, callback) {
+    fs.readFile(file, function (err, res) {
+        return callback(err, {
+            svg: res,
+            id: path.basename(file).replace('.svg', '')
+        });
+    });
+}
+
+function sortById (a, b) {
+    return b.id < a.id;
+}
+
+var q = queue(16);
+
+filepaths(input).forEach(function (file) {
+    q.defer(loadFile, file);
+});
+
+q.awaitAll(function (err, buffers) {
+    if (err) throw err;
+
+    buffers.sort(sortById);
+
+    function saveLayout (err, formattedLayout) {
+        if (err) throw err;
+        fs.writeFile(outfile + '.json', stringify(formattedLayout, {space: '  '}), 'utf8', function (err) {
+            if (err) throw err;
+        });
+    }
+
+    function saveImage (err, layout) {
+        if (err) throw err;
+        spritezero.generateImage(layout, function (err, image) {
+            if (err) throw err;
+            fs.writeFile(outfile + '.png', image, function (err) {
+                if (err) throw err;
+            });
+        });
+    }
+
+    var genLayout = unique ? spritezero.generateLayoutUnique : spritezero.generateLayout;
+    genLayout({ imgs: buffers, pixelRatio: ratio, format: true }, saveLayout);
+    genLayout({ imgs: buffers, pixelRatio: ratio, format: false }, saveImage);
+});

package.json

@@ -17,21 +17,16 @@
     "vector"
   ],
   "dependencies": {
-    "minimist": "^1.2.0",
-    "multiline": "^1.0.2",
-    "queue-async": "^1.2.1",
-    "json-stable-stringify": "^1.0.1",
-    "@mapbox/spritezero": "~5.0.0"
+    "@mapbox/spritezero": "^8.0.3",
+    "glob": "^10.2.6",
+    "minimist": "^1.2.8"
   },
   "devDependencies": {
-    "eslint": "^4.0.0",
-    "tap": "^10.1.0"
-  },
-  "engines": {
-    "node": ">=4.0.0"
+    "eslint": "^4.19.1",
+    "tap": "^10.7.3"
   },
   "scripts": {
     "lint": "eslint bin/spritezero test/",
     "test": "npm run lint && tap test/test.js"
   }
-}
+}

prettier.config.cjs

@@ -0,0 +1,44 @@
+module.exports = {
+  // 一行最多 200 字符..
+  printWidth: 200,
+  // 行尾需要有分号
+  semi: true,
+  // 使用单引号
+  singleQuote: true,
+  // 末尾需要有逗号
+  trailingComma: 'none',
+  // 大括号内的首尾需要空格
+  bracketSpacing: true,
+  // jsx 不使用单引号，而使用双引号
+  jsxSingleQuote: false,
+  // jsx 标签的反尖括号需要换行
+  jsxBracketSameLine: true,
+  // 箭头函数，只有一个参数的时候，也需要括号
+  arrowParens: 'always',
+  // arrowParens: 'avoid',
+
+  // 使用 2 个空格缩进
+  tabWidth: 2,
+
+  // 不使用缩进符，而使用空格
+  useTabs: false,
+
+  // 对象的 key 仅在必要时用引号
+  quoteProps: 'as-needed',
+  // 每个文件格式化的范围是文件的全部内容
+  rangeStart: 0,
+  rangeEnd: Infinity,
+
+  // 不需要写文件开头的 @prettier
+  requirePragma: false,
+  // 不需要自动在文件开头插入 @prettier
+  insertPragma: false,
+  // 使用默认的折行标准
+  proseWrap: 'preserve',
+  // 根据显示样式决定 html 要不要折行
+  htmlWhitespaceSensitivity: 'css',
+  // vue 文件中的 script 和 style 内不用缩进
+  vueIndentScriptAndStyle: false,
+  // 换行符使用 lf
+  endOfLine: 'lf'
+};