@unvt/charites 0.1.4 → 0.2.0

package/.all-contributorsrc

@@ -13,6 +13,69 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "naogify",
+      "name": "Naoki Ohashi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8760841?v=4",
+      "profile": "https://naoki-is.me",
+      "contributions": [
+        "code"
+      ]      
+    },
+    {
+      "login": "ubukawa",
+      "name": "UBUKAWA Taro",
+      "avatar_url": "https://avatars.githubusercontent.com/u/59204379?v=4",
+      "profile": "https://github.com/ubukawa",
+      "contributions": [
+        "code"
+      ]      
+    },
+    {
+      "login": "miya0001",
+      "name": "Takayuki Miyauchi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/309946?v=4",
+      "profile": "https://geolonia.com/",
+      "contributions": [
+        "code"
+      ]      
+    },
+    {
+      "login": "JinIgarashi",
+      "name": "Jin Igarashi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/2639701?v=4",
+      "profile": "https://jin-igarashi.me",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "smellman",
+      "name": "Taro Matsuzawa aka. btm",
+      "avatar_url": "https://avatars.githubusercontent.com/u/135112?v=4",
+      "profile": "http://smellman.hatenablog.com/",
+      "contributions": [
+        "code"
+      ]    
+    },
+    {
+      "login": "ShinichiNishikawa",
+      "name": "Shinichi Nishikawa",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1124652?v=4",
+      "profile": "https://shinichi.blog",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "yuiseki",
+      "name": "yuiseki",
+      "avatar_url": "https://avatars.githubusercontent.com/u/25507?v=4",
+      "profile": "http://yuiseki.net/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

package/.devcontainer/Dockerfile

@@ -0,0 +1,29 @@
+FROM ubuntu:22.04
+
+ENV DEBIAN_FRONTEND=noninteractive
+RUN apt-get update && apt install -y --no-install-recommends \
+    git \
+    curl \
+    vim \
+    htop \
+    make \
+    jq
+
+ENV DEBIAN_FRONTEND=dialog
+
+RUN curl -Ls https://deb.nodesource.com/setup_18.x | bash
+RUN apt update && apt install -y nodejs npm
+RUN npm install npm@latest -g
+
+RUN useradd -m user
+USER user
+
+ENV NPM_CONFIG_DIR="/home/user/.npm-global"
+RUN mkdir -p "${NPM_CONFIG_DIR}"
+RUN mkdir -p "${NPM_CONFIG_DIR}/bin"
+RUN mkdir -p "${NPM_CONFIG_DIR}/lib"
+ENV PATH="/home/user/.npm-global/bin:${PATH}"
+
+EXPOSE 8080
+
+CMD [ "sleep", "infinity" ]

package/.devcontainer/README.md

@@ -0,0 +1,34 @@
+# Development Containers (DevContainer) for charites
+
+## What is it?
+
+- DevContainer is a Dockerfike and configuration file for remote development in Visual Studio Code or GitHub Codespaces
+- DevContainer allows development environments to be written and maintained as code
+- DevContainer allows everyone to develop in a common development environment
+
+## Requirements
+
+- Visual Studio Code
+- Docker
+
+## How to use it?
+
+- Fork `charites` repository (If not yet)
+- Sync your fork from upstream (If not yet)
+- Clone `charites` repository (If not yet)
+- Open cloned directory
+- At this time, you should see a message `Reopen in container`, then click `Open` button
+- DevContainer will be built...
+  - It take a while...
+
+### Once the DevContainer has been built and started...
+
+- Development can be done as usual
+
+```
+npm ci
+npm run build
+npm install -g .
+charites help
+charites serve test/data/style.yml
+```

package/.devcontainer/devcontainer.json

@@ -0,0 +1,36 @@
+{
+  "name": "Ubuntu 22.04 Node.js",
+  "dockerFile": "./Dockerfile",
+  "forwardPorts": [8080],
+  "remoteUser": "user",
+  "overrideCommand": false,
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "terminal.integrated.profiles.linux": {
+          "bash": {
+            "path": "/bin/bash"
+          }
+        },
+        "terminal.integrated.defaultProfile.linux": "bash",
+        "files.autoSave": "afterDelay",
+        "files.autoSaveDelay": 1000,
+        "editor.formatOnSave": true
+      },
+      "extensions": [
+        "ms-vscode-remote.vscode-remote-extensionpack",
+        "ms-vscode.vscode-typescript-next",
+        "ms-vsliveshare.vsliveshare",
+        "esbenp.prettier-vscode",
+        "usernamehw.errorlens",
+        "VisualStudioExptTeam.vscodeintellicode",
+        "VisualStudioExptTeam.intellicode-api-usage-examples",
+        "wraith13.bracket-lens",
+        "oderwat.indent-rainbow",
+        "mosapride.zenkaku",
+        "vscode-icons-team.vscode-icons",
+        "nickdemayo.vscode-json-editor"
+      ]
+    }
+  }
+}

package/.github/CONTRIBUTING.md

@@ -10,7 +10,9 @@ Submit a new issue only if you are sure it is a missing feature or a bug.
 
 4. Run unit tests to ensure all features work well. Run: `npm test`
 
-5. Make sure `charites` command work well after installing globally. Run:
+5. Please add at least one unit test if you are going to add new feature.
+
+6. Make sure `charites` command work well after installing globally. Run:
 
 ```bash
 npm uninstall -g .
@@ -19,11 +21,11 @@ npm install -g
 charites help
 ```
 
-6. Make sure you submit a change specific to exactly one issue. If you have ideas for multiple changes please create separate pull requests.
+7. Make sure you submit a change specific to exactly one issue. If you have ideas for multiple changes please create separate pull requests.
 
-7. Make sure update documentation under `docs` folder if your changes affect existing documents.
+8. Make sure update documentation under `docs` folder if your changes affect existing documents.
 
-8. Push to your fork and [submit a pull request](https://help.github.com/articles/using-pull-requests). A button should appear on your fork its github page afterwards.
+9. Push to your fork and [submit a pull request](https://help.github.com/articles/using-pull-requests). A button should appear on your fork its github page afterwards.
 
 ## Translation of charites documentation
 

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -19,6 +19,7 @@ Please describe what you changed briefly.
 - [ ] No lint errors after `npm run lint`
 - [ ] No errors on using `charites help` globally
 - [ ] Make sure all the exsiting features working well
+- [ ] Have you added at least one unit test if you are going to add new feature?
 - [ ] Have you updated documentation?
 <!-- ignore-task-list-end -->
 

package/.github/workflows/build.yml

@@ -18,7 +18,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [14.x, 16.x, 18.x]
 
     steps:
       - uses: actions/checkout@v2

package/README.md

@@ -1,6 +1,6 @@
 # Charites
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 An easy, intuitive, and efficient command-line tool for writing vector map styles compatible with the [Mapbox](https://docs.mapbox.com/mapbox-gl-js/style-spec/) and [MapLibre](https://maplibre.org/maplibre-gl-js-docs/style-spec/) Style Specification in YAML.
@@ -37,14 +37,19 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
-
 <table>
   <tr>
     <td align="center"><a href="https://geolonia.com/"><img src="https://avatars.githubusercontent.com/u/42296593?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Geolonia</b></sub></a><br /><a href="https://github.com/unvt/charites/commits?author=geolonia" title="Code">💻</a></td>
+    <td align="center"><a href="https://naoki-is.me"><img src="https://avatars.githubusercontent.com/u/8760841?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Naoki Ohashi</b></sub></a><br /><a href="https://github.com/unvt/charites/commits?author=naogify" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/ubukawa"><img src="https://avatars.githubusercontent.com/u/59204379?v=4?s=100" width="100px;" alt=""/><br /><sub><b>UBUKAWA Taro</b></sub></a><br /><a href="https://github.com/unvt/charites/commits?author=ubukawa" title="Code">💻</a></td>
+    <td align="center"><a href="https://geolonia.com/"><img src="https://avatars.githubusercontent.com/u/309946?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Takayuki Miyauchi</b></sub></a><br /><a href="https://github.com/unvt/charites/commits?author=miya0001" title="Code">💻</a></td>
+    <td align="center"><a href="https://jin-igarashi.me"><img src="https://avatars.githubusercontent.com/u/2639701?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jin Igarashi</b></sub></a><br /><a href="https://github.com/unvt/charites/commits?author=JinIgarashi" title="Code">💻</a></td>
+    <td align="center"><a href="http://smellman.hatenablog.com/"><img src="https://avatars.githubusercontent.com/u/135112?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Taro Matsuzawa aka. btm</b></sub></a><br /><a href="https://github.com/unvt/charites/commits?author=smellman" title="Code">💻</a></td>
+    <td align="center"><a href="https://shinichi.blog"><img src="https://avatars.githubusercontent.com/u/1124652?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shinichi Nishikawa</b></sub></a><br /><a href="https://github.com/unvt/charites/commits?author=ShinichiNishikawa" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://yuiseki.net/"><img src="https://avatars.githubusercontent.com/u/25507?v=4?s=100" width="100px;" alt=""/><br /><sub><b>yuiseki</b></sub></a><br /><a href="https://github.com/unvt/charites/commits?author=yuiseki" title="Code">💻</a></td>
   </tr>
 </table>
 
-
 <!-- markdownlint-restore -->
 <!-- prettier-ignore-end -->
 

package/dist/commands/serve.js

@@ -73,6 +73,11 @@ function serve(source, options) {
                     throw `Invalid provider: ${provider}`;
                 }
                 break;
+            default:
+                res.statusCode = 404;
+                res.setHeader('Content-Type', 'text/plain; charset=UTF-8');
+                res.end('Not found');
+                break;
         }
     });
     server.listen(port, () => {

package/dist/lib/build-sprite.js

@@ -1,71 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildSprite = void 0;
-const spritezero = require('@mapbox/spritezero');
-const fs = require('fs');
-const glob = require('glob');
+const sprite_one_1 = require("@unvt/sprite-one");
 const path = require('path');
-function generateLayoutAsync(option) {
-    return new Promise((resolve, reject) => {
-        spritezero.generateLayout(option, (err, result) => {
-            if (err)
-                reject(err);
-            else
-                resolve(result);
-        });
-    });
-}
-function generateImageAsync(option) {
-    return new Promise((resolve, reject) => {
-        spritezero.generateImage(option, (err, result) => {
-            if (err)
-                reject(err);
-            else
-                resolve(result);
-        });
-    });
-}
 async function buildSprite(svgPath, publicPath, iconSlug) {
     const pxRatios = [1, 2];
-    for (let i = 0; i < pxRatios.length; i++) {
-        const pxRatio = pxRatios[i];
-        const svgFiles = glob
-            .sync(path.join(svgPath, `*.svg`))
-            .map(function (iconPath) {
-            return {
-                svg: fs.readFileSync(iconPath),
-                id: path.basename(iconPath).replace('.svg', ''),
-            };
-        });
-        let file = '';
-        if (pxRatio > 1) {
-            file = `@${pxRatio}x`;
-        }
-        const pngPath = path.join(publicPath, `${iconSlug}${file}.png`);
-        const jsonPath = path.join(publicPath, `${iconSlug}${file}.json`);
-        try {
-            const dataLayout = await generateLayoutAsync({
-                imgs: svgFiles,
-                pixelRatio: pxRatio,
-                format: true,
-            });
-            fs.writeFileSync(jsonPath, JSON.stringify(dataLayout));
-        }
-        catch (error) {
-            throw `${publicPath}: No such file or directory`;
-        }
-        try {
-            const imageLayout = await generateLayoutAsync({
-                imgs: svgFiles,
-                pixelRatio: pxRatio,
-                format: false,
-            });
-            const image = await generateImageAsync(imageLayout);
-            fs.writeFileSync(pngPath, image);
-        }
-        catch (error) {
-            throw `${publicPath}: No such file or directory`;
-        }
+    const outPath = path.join(publicPath, iconSlug);
+    try {
+        await sprite_one_1.generateSprite(outPath, [svgPath], pxRatios);
+    }
+    catch (error) {
+        throw error;
     }
+    return;
 }
 exports.buildSprite = buildSprite;

package/dist/lib/error.js

@@ -2,8 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.error = void 0;
 exports.error = (e) => {
-    if (e instanceof TypeError) {
+    if (e instanceof Error) {
         console.error(e.message);
     }
+    else {
+        console.error(String(e));
+    }
     process.exit(1);
 };

package/docs/source/install/recommended_environment.rst

@@ -1,6 +1,6 @@
 Recommended environment
 =======================
 
-Chrities may work well on OSX, Ubuntu, but it might not work well in some envrionment such as arm64 (eg., M1 Mac) because some of NPM packages like sprite-zero uses mapnik.  
+Chrities may work well on OSX, Ubuntu, and Raspberry Pi.
 
 Docker can be the good environment in Windows while WSL might work well.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unvt/charites",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "",
   "bin": {
     "charites": "dist/cli.js"
@@ -9,16 +9,16 @@
     "build": "tsc -p .",
     "watch": "tsc -w",
     "lint": "eslint --fix .",
-    "test": "mocha -r ts-node/register test/*.ts",
+    "test": "npm run build && mocha -r ts-node/register test/*.ts",
     "test:watch": "npm test -- --watch --watch-files src/**/*.ts --watch-files test/**/*.ts",
-    "command": "./node_modules/.bin/ts-node ./src/cli"
+    "command": "./node_modules/.bin/ts-node ./src/cli.ts"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
     "@mapbox/mapbox-gl-style-spec": "^13.22.0",
-    "@mapbox/spritezero": "^8.0.0",
     "@maplibre/maplibre-gl-style-spec": "^14.0.2",
+    "@unvt/sprite-one": "^0.0.6",
     "@types/jsonminify": "^0.4.1",
     "axios": "^0.24.0",
     "commander": "^8.2.0",
@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@types/chai": "^4.2.11",
+    "@types/fs-extra": "^9.0.13",
     "@types/js-yaml": "^4.0.3",
     "@types/mocha": "^7.0.2",
     "@types/node": "^14.0.14",
@@ -42,6 +43,8 @@
     "eslint": "^7.21.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.3.1",
+    "fs-extra": "^10.0.0",
+    "kill-port-process": "^3.0.1",
     "mocha": "^8.0.1",
     "prettier": "^2.5.0",
     "ts-node": "^8.10.2",

package/provider/default/app.js

@@ -12,6 +12,19 @@ socket.addEventListener('message', (message) => {
 
 map.addControl(new maplibregl.NavigationControl(), 'top-right')
 
+map.addControl(
+  new watergis.MaplibreLegendControl(
+    {},
+    {
+      showDefault: true,
+      showCheckbox: true,
+      onlyRendered: true,
+      reverseOrder: true,
+    },
+  ),
+  'bottom-left',
+)
+
 const showTileBoundaries = document.getElementById('showTileBoundaries')
 const setShowTileBoundaries = function () {
   const checked = showTileBoundaries.checked

package/provider/default/index.html

@@ -3,8 +3,10 @@
   <head>
     <link rel="stylesheet" href="/app.css" />
     <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
+    <link href='https://watergis.github.io/maplibre-gl-legend/maplibre-gl-legend.css' rel='stylesheet' />
     <title>Charites Live Preview</title>
     <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
+    <script src="https://watergis.github.io/maplibre-gl-legend/maplibre-gl-legend.js"></script>
   </head>
   <body>
     <div class="overlay">

package/provider/mapbox/app.js

@@ -14,6 +14,20 @@ socket.addEventListener('message', (message) => {
 
 map.addControl(new mapboxgl.NavigationControl(), 'top-right')
 
+map.addControl(
+  new watergis.MapboxLegendControl(
+    {},
+    {
+      showDefault: true,
+      showCheckbox: true,
+      onlyRendered: true,
+      reverseOrder: true,
+      accesstoken: mapboxgl.accessToken,
+    },
+  ),
+  'bottom-left',
+)
+
 const showTileBoundaries = document.getElementById('showTileBoundaries')
 const setShowTileBoundaries = function () {
   const checked = showTileBoundaries.checked

package/provider/mapbox/index.html

@@ -3,8 +3,10 @@
   <head>
     <link rel="stylesheet" href="/app.css" />
     <link href='https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.css' rel='stylesheet' />
+    <link href='https://watergis.github.io/mapbox-gl-legend/mapbox-gl-legend.css' rel='stylesheet' />
     <title>Charites Live Preview</title>
     <script src='https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.js'></script>
+    <script src="https://watergis.github.io/mapbox-gl-legend/mapbox-gl-legend.js"></script>
   </head>
   <body>
     <div class="overlay">

package/src/commands/serve.ts

@@ -81,6 +81,11 @@ export function serve(source: string, options: serveOptions) {
           throw `Invalid provider: ${provider}`
         }
         break
+      default:
+        res.statusCode = 404
+        res.setHeader('Content-Type', 'text/plain; charset=UTF-8')
+        res.end('Not found')
+        break
     }
   })
 

package/src/lib/build-sprite.ts

@@ -1,80 +1,17 @@
-const spritezero = require('@mapbox/spritezero')
-const fs = require('fs')
-const glob = require('glob')
+import { generateSprite } from '@unvt/sprite-one'
 const path = require('path')
 
-type spriteOption = {
-  imgs: string
-  pixelRatio: number
-  format: boolean
-}
-
-function generateLayoutAsync(option: spriteOption): Promise<string> {
-  return new Promise((resolve, reject) => {
-    spritezero.generateLayout(option, (err: TypeError, result: string) => {
-      if (err) reject(err)
-      else resolve(result)
-    })
-  })
-}
-
-function generateImageAsync(option: string): Promise<string> {
-  return new Promise((resolve, reject) => {
-    spritezero.generateImage(option, (err: TypeError, result: string) => {
-      if (err) reject(err)
-      else resolve(result)
-    })
-  })
-}
-
 export async function buildSprite(
   svgPath: string,
   publicPath: string,
   iconSlug: string,
-) {
+): Promise<void> {
   const pxRatios = [1, 2]
-
-  for (let i = 0; i < pxRatios.length; i++) {
-    const pxRatio = pxRatios[i]
-
-    const svgFiles = glob
-      .sync(path.join(svgPath, `*.svg`))
-      .map(function (iconPath: string) {
-        return {
-          svg: fs.readFileSync(iconPath),
-          id: path.basename(iconPath).replace('.svg', ''),
-        }
-      })
-
-    let file = ''
-    if (pxRatio > 1) {
-      file = `@${pxRatio}x`
-    }
-
-    const pngPath = path.join(publicPath, `${iconSlug}${file}.png`)
-    const jsonPath = path.join(publicPath, `${iconSlug}${file}.json`)
-
-    try {
-      const dataLayout = await generateLayoutAsync({
-        imgs: svgFiles,
-        pixelRatio: pxRatio,
-        format: true,
-      })
-      fs.writeFileSync(jsonPath, JSON.stringify(dataLayout))
-    } catch (error) {
-      throw `${publicPath}: No such file or directory`
-    }
-
-    try {
-      const imageLayout = await generateLayoutAsync({
-        imgs: svgFiles,
-        pixelRatio: pxRatio,
-        format: false,
-      })
-      const image = await generateImageAsync(imageLayout)
-      fs.writeFileSync(pngPath, image)
-    } catch (error) {
-      throw `${publicPath}: No such file or directory`
-    }
+  const outPath = path.join(publicPath, iconSlug)
+  try {
+    await generateSprite(outPath, [svgPath], pxRatios)
+  } catch (error) {
+    throw error
   }
+  return
 }

package/src/lib/error.ts

@@ -1,6 +1,8 @@
 export const error = (e: unknown) => {
-  if (e instanceof TypeError) {
+  if (e instanceof Error) {
     console.error(e.message)
+  } else {
+    console.error(String(e))
   }
   process.exit(1)
 }

package/test/build-sprite.spec.ts

@@ -12,13 +12,13 @@ describe('Test for the `build-sprite.ts`.', () => {
     tmpdir = fs.mkdtempSync(path.join(os.tmpdir(), 'charites-'))
   })
 
-  it("should create icon's json/png at specified path and name ", async () => {
+  it("should create icon's json/png at specified path and name ", () => {
     const expectedJsonPath = path.join(tmpdir, 'basic.json')
     const expectedPngPath = path.join(tmpdir, 'basic.png')
 
-    await buildSprite(iconsPath, tmpdir, `basic`)
-
-    assert.deepEqual(true, !!fs.statSync(expectedJsonPath))
-    assert.deepEqual(true, !!fs.statSync(expectedPngPath))
+    buildSprite(iconsPath, tmpdir, `basic`).then(() => {
+      assert.deepEqual(true, !!fs.statSync(expectedJsonPath))
+      assert.deepEqual(true, !!fs.statSync(expectedPngPath))
+    })
   })
 })

package/test/build.spec.ts

@@ -69,36 +69,36 @@ describe('Test for the `build.ts`.', () => {
     )
   })
 
-  it('Should build icons with the option `--sprite-url`. Icon file name is set by spriteUrl', async () => {
+  it('Should build icons with the option `--sprite-url`. Icon file name is set by spriteUrl', () => {
     const expectedIconName = 'dark'
     const expectedPng = path.join(tmpdir, `${expectedIconName}.png`)
     const expectedJson = path.join(tmpdir, `${expectedIconName}.json`)
 
-    await build(styleYaml, styleJson, {
+    build(styleYaml, styleJson, {
       provider: defaultValues.provider,
       spriteUrl: `http://localhost:8080/${expectedIconName}`,
       spriteInput: iconSource,
       spriteOutput: tmpdir,
+    }).then(() => {
+      assert.deepEqual(true, !!fs.statSync(expectedPng))
+      assert.deepEqual(true, !!fs.statSync(expectedJson))
     })
-
-    assert.deepEqual(true, !!fs.statSync(expectedPng))
-    assert.deepEqual(true, !!fs.statSync(expectedJson))
   })
 
-  it('Use sprite name that specified in style.json with no --sprite-url option', async () => {
+  it('Use sprite name that specified in style.json with no --sprite-url option', () => {
     const expectedIconName = 'basic-white' // from test/data/style.yml
     const expectedPng = path.join(tmpdir, `${expectedIconName}.png`)
     const expectedJson = path.join(tmpdir, `${expectedIconName}.json`)
 
-    await build(styleYaml, styleJson, {
+    build(styleYaml, styleJson, {
       provider: defaultValues.provider,
       spriteInput: iconSource,
       spriteOutput: tmpdir,
+    }).then(() => {
+      // The file should exists.
+      assert.deepEqual(true, !!fs.statSync(expectedPng))
+      assert.deepEqual(true, !!fs.statSync(expectedJson))
     })
-
-    // The file should exists.
-    assert.deepEqual(true, !!fs.statSync(expectedPng))
-    assert.deepEqual(true, !!fs.statSync(expectedJson))
   })
 
   it('Should not create sprite when input directory is not exist.', async () => {

package/test/command.build.spec.ts

@@ -0,0 +1,100 @@
+import { assert } from 'chai'
+import path from 'path'
+import fs from 'fs'
+import { copyFixturesFile, copyFixturesDir } from './util/copyFixtures'
+import { exec } from './util/execPromise'
+import { makeTempDir } from './util/makeTempDir'
+import charites from './util/charitesCmd'
+
+let tmpdir = ''
+
+describe('Test for the `charites build`', () => {
+  beforeEach(async function () {
+    tmpdir = makeTempDir()
+    copyFixturesFile('style.yml', tmpdir)
+    copyFixturesDir('layers', tmpdir)
+    copyFixturesDir('icons', tmpdir)
+  })
+
+  it('charites build style.yml', async () => {
+    // prettier-ignore
+    const { stdout, stderr } = await exec(`${charites} build style.yml`, tmpdir)
+    assert.deepEqual(stdout, '')
+    assert.deepEqual(stderr, '')
+    assert.isTrue(fs.existsSync(path.join(tmpdir, 'style.json')))
+  })
+
+  it('charites build style.yml custom.json', async () => {
+    // prettier-ignore
+    const { stdout, stderr } = await exec(`${charites} build style.yml custom.json`, tmpdir)
+    assert.deepEqual(stdout, '')
+    assert.deepEqual(stderr, '')
+    assert.isTrue(fs.existsSync(path.join(tmpdir, 'custom.json')))
+  })
+
+  it('charites build style.yml --compact-output', async () => {
+    // prettier-ignore
+    const { stdout, stderr } = await exec(`${charites} build style.yml --compact-output`, tmpdir)
+    assert.deepEqual(stdout, '')
+    assert.deepEqual(stderr, '')
+
+    const contents = fs.readFileSync(path.join(tmpdir, 'style.json'), 'utf-8')
+    assert.isNull(contents.match(/\\n/))
+  })
+
+  it('charites build style.yml style.json --sprite-url http://localhost:8080/icons', async () => {
+    // prettier-ignore
+    const { stdout, stderr } = await exec(`${charites} build style.yml style.json --sprite-url http://localhost:8080/icons`, tmpdir)
+    assert.deepEqual(stdout, '')
+    assert.deepEqual(stderr, '')
+
+    const contents = fs.readFileSync(path.join(tmpdir, 'style.json'), 'utf-8')
+    assert.deepEqual('http://localhost:8080/icons', JSON.parse(contents).sprite)
+  })
+
+  it('charites build style.yml style.json --sprite-input icons --sprite-output .', async () => {
+    // prettier-ignore
+    const { stdout, stderr } = await exec(`${charites} build style.yml style.json --sprite-input icons --sprite-output .`, tmpdir)
+    assert.deepEqual(stdout, '')
+    assert.deepEqual(stderr, '')
+
+    assert.isTrue(fs.existsSync(path.join(tmpdir, 'basic-white.png')))
+    assert.isTrue(fs.existsSync(path.join(tmpdir, 'basic-white.json')))
+  })
+
+  it('charites build style.yml style.json --sprite-url http://localhost:8080', async () => {
+    try {
+      // prettier-ignore
+      await exec(`${charites} build style.yml style.json --sprite-url http://localhost:8080`, tmpdir)
+    } catch (error) {
+      assert.deepEqual(error.stdout, '')
+      assert.deepEqual(error.stderr, 'Invalid sprite url format.\n')
+    }
+  })
+
+  it('charites build style.yml style.json --sprite-input noExistDirname', async () => {
+    try {
+      // prettier-ignore
+      await exec(`${charites} build style.yml style.json --sprite-input noExistDirname`, tmpdir)
+    } catch (error) {
+      assert.deepEqual(error.stdout, '')
+      assert.deepEqual(
+        error.stderr,
+        'noExistDirname: No such directory. Please specify valid icon input directory. For more help run charites build --help\n',
+      )
+    }
+  })
+
+  it('charites build style.yml style.json --sprite-output noExistDirname', async () => {
+    try {
+      // prettier-ignore
+      await exec(`${charites} build style.yml style.json --sprite-output noExistDirname`, tmpdir)
+    } catch (error) {
+      assert.deepEqual(error.stdout, '')
+      assert.deepEqual(
+        error.stderr,
+        'noExistDirname: No such directory. Please specify valid icon output directory. For more help run charites build --help\n',
+      )
+    }
+  })
+})

package/test/command.convert.spec.ts

@@ -0,0 +1,24 @@
+import { assert } from 'chai'
+import path from 'path'
+import fs from 'fs'
+import { copyFixturesFile } from './util/copyFixtures'
+import { exec } from './util/execPromise'
+import { makeTempDir } from './util/makeTempDir'
+import charites from './util/charitesCmd'
+
+let tmpdir = ''
+
+describe('Test for the `charites convert`', () => {
+  beforeEach(async function () {
+    tmpdir = makeTempDir()
+    copyFixturesFile('style.json', tmpdir)
+  })
+
+  it('charites convert style.json style.yml', async () => {
+    // prettier-ignore
+    const { stdout, stderr } = await exec(`${charites} convert style.json style.yml`, tmpdir)
+    assert.deepEqual(stdout, '')
+    assert.deepEqual(stderr, '')
+    assert.isTrue(fs.existsSync(path.join(tmpdir, 'style.yml')))
+  })
+})

package/test/command.init.spec.ts

@@ -0,0 +1,45 @@
+import { assert } from 'chai'
+import path from 'path'
+import fs from 'fs'
+import { exec } from './util/execPromise'
+import { makeTempDir } from './util/makeTempDir'
+import charites from './util/charitesCmd'
+
+const tileJsonUrl =
+  'https://raw.githubusercontent.com/mapbox/tilejson-spec/master/3.0.0/example/osm.json'
+const metadataJsonUrl = 'https://optgeo.github.io/kokoromi-rw/zxy/metadata.json'
+
+let tmpdir = ''
+
+describe('Test for the `charites convert`', () => {
+  beforeEach(async function () {
+    tmpdir = makeTempDir()
+  })
+
+  it('charites init style.yml --tilejson-urls ${tileJsonUrl}', async () => {
+    // prettier-ignore
+    const { stdout, stderr } = await exec(`${charites} init style.yml --tilejson-urls ${tileJsonUrl}`, tmpdir)
+    assert.deepEqual(stdout, '')
+    assert.deepEqual(stderr, '')
+    assert.isTrue(fs.existsSync(path.join(tmpdir, 'style.yml')))
+    assert.isTrue(fs.existsSync(path.join(tmpdir, 'layers')))
+  })
+
+  it('charites init style.yml --metadatajson-urls ${metadataJsonUrl}', async () => {
+    // prettier-ignore
+    const { stdout, stderr } = await exec(`${charites} init style.yml --metadatajson-urls ${metadataJsonUrl}`, tmpdir)
+    assert.deepEqual(stdout, '')
+    assert.deepEqual(stderr, '')
+    assert.isTrue(fs.existsSync(path.join(tmpdir, 'style.yml')))
+    assert.isTrue(fs.existsSync(path.join(tmpdir, 'layers')))
+  })
+
+  it('charites init style.yml --tilejson-urls ${tileJsonUrl} --composite-layers', async () => {
+    // prettier-ignore
+    const { stdout, stderr } = await exec(`${charites} init style.yml --tilejson-urls ${tileJsonUrl} --composite-layers`, tmpdir)
+    assert.deepEqual(stdout, '')
+    assert.deepEqual(stderr, '')
+    assert.isTrue(fs.existsSync(path.join(tmpdir, 'style.yml')))
+    assert.isFalse(fs.existsSync(path.join(tmpdir, 'layers')))
+  })
+})

package/test/util/charitesCmd.ts

@@ -0,0 +1,3 @@
+import path from 'path'
+
+export default `node ${path.join(__dirname, '..', '..', 'dist', 'cli.js')}`

package/test/util/copyFixtures.ts

@@ -0,0 +1,14 @@
+import path from 'path'
+import fs from 'fs'
+import fse from 'fs-extra'
+
+export const copyFixturesFile = (file: string, destDir: string) => {
+  fs.copyFileSync(
+    path.join(__dirname, '..', 'data', file),
+    path.join(destDir, file),
+  )
+}
+
+export const copyFixturesDir = (dir: string, destDir: string) => {
+  fse.copySync(path.join(__dirname, '..', 'data', dir), path.join(destDir, dir))
+}

package/test/util/execPromise.ts

@@ -0,0 +1,14 @@
+import child_process from 'child_process'
+import util from 'util'
+import { makeTempDir } from './makeTempDir'
+const execSync = util.promisify(child_process.exec)
+
+export const exec = async (cmd: string, cwd?: string) => {
+  const temp = cwd ? cwd : makeTempDir()
+  const { stdout, stderr } = await execSync(cmd, {
+    encoding: 'utf8',
+    cwd: temp,
+  })
+
+  return { stdout, stderr, cwd: temp }
+}

package/test/util/makeTempDir.ts

@@ -0,0 +1,6 @@
+import path from 'path'
+import fs from 'fs'
+import os from 'os'
+
+export const makeTempDir = () =>
+  fs.mkdtempSync(path.join(os.tmpdir(), 'charites-'))