@unvt/charites 0.1.4 → 0.3.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 Dockerfile and a 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

@@ -18,7 +18,8 @@ Please describe what you changed briefly.
 - [ ] No build errors after `npm run build`
 - [ ] No lint errors after `npm run lint`
 - [ ] No errors on using `charites help` globally
-- [ ] Make sure all the exsiting features working well
+- [ ] Make sure all the existing 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/release.yml

@@ -0,0 +1,14 @@
+changelog:
+  exclude:
+    labels:
+      - ignore-for-release
+  categories:
+    - title: Breaking Changes 🛠
+      labels:
+        - breaking-change
+    - title: Exciting New Features 🎉
+      labels:
+        - enhancement
+    - title: Other Changes
+      labels:
+        - '*'

package/.github/workflows/build.yml

@@ -15,11 +15,9 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
-
+        node-version: [14.x, 16.x, 18.x]
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
@@ -30,6 +28,33 @@ jobs:
       - run: npm run lint
       - run: npm test
 
+  e2e:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Check and restore cache of playwright
+        uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+      - run: npm install
+      - run: npx playwright install --with-deps chromium
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+      - run: npm run build
+      - run: chmod 777 dist/cli.js
+      - run: npm run test:e2e
+        env:
+          MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
+
   publish:
     name: 'Publish npm package'
     runs-on: ubuntu-latest

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2021 The United Nations Vector Tile Toolkit
+Copyright (c) 2022 The United Nations Vector Tile Toolkit
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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/cli/serve.js

@@ -14,7 +14,7 @@ program
     .arguments('<source>')
     .description('serve your map locally')
     .option('--provider [provider]', 'your map service. e.g. `mapbox`, `geolonia`')
-    .option('--mapbox-access-token [mapboxAccessToken]', 'Access Token for the Mapbox')
+    .option('--mapbox-access-token [mapboxAccessToken]', 'Your Mapbox Access Token (required if using the `mapbox` provider)')
     .option('--port [port]', 'Specify custom port')
     .action((source, serveOptions) => {
     const options = program.opts();

package/dist/commands/serve.js

@@ -30,14 +30,19 @@ function serve(source, options) {
     if (!fs_1.default.existsSync(sourcePath)) {
         throw `${sourcePath}: No such file or directory`;
     }
+    const mapboxAccessToken = options.mapboxAccessToken || defaultValues_1.defaultValues.mapboxAccessToken;
+    if (provider === 'mapbox' && !mapboxAccessToken) {
+        throw `Provider is mapbox, but the Mapbox Access Token is not set. Please provide it using --mapbox-access-token, or set it in \`~/.charites/config.yml\` (see the Global configuration section of the documentation for more information)`;
+    }
     const server = http_1.default.createServer((req, res) => {
         const url = (req.url || '').replace(/\?.*/, '');
-        const dir = path_1.default.join(defaultValues_1.defaultValues.providerDir, provider);
+        const defaultProviderDir = path_1.default.join(defaultValues_1.defaultValues.providerDir, 'default');
+        const providerDir = path_1.default.join(defaultValues_1.defaultValues.providerDir, provider);
         switch (url) {
             case '/':
                 res.statusCode = 200;
                 res.setHeader('Content-Type', 'text/html; charset=UTF-8');
-                const content = fs_1.default.readFileSync(path_1.default.join(dir, 'index.html'), 'utf-8');
+                const content = fs_1.default.readFileSync(path_1.default.join(providerDir, 'index.html'), 'utf-8');
                 res.end(content);
                 break;
             case '/style.json':
@@ -56,14 +61,21 @@ function serve(source, options) {
             case '/app.css':
                 res.statusCode = 200;
                 res.setHeader('Content-Type', 'text/css; charset=UTF-8');
-                const css = fs_1.default.readFileSync(path_1.default.join(dir, 'app.css'), 'utf-8');
+                const css = fs_1.default.readFileSync(path_1.default.join(defaultProviderDir, 'app.css'), 'utf-8');
                 res.end(css);
                 break;
+            case `/shared.js`:
+                res.statusCode = 200;
+                res.setHeader('Content-Type', 'application/javascript; charset=UTF-8');
+                const shared = fs_1.default.readFileSync(path_1.default.join(defaultProviderDir, 'shared.js'), 'utf-8');
+                const js = shared.replace('___PORT___', `${port}`);
+                res.end(js);
+                break;
             case `/app.js`:
                 res.statusCode = 200;
                 res.setHeader('Content-Type', 'application/javascript; charset=UTF-8');
                 try {
-                    const app = fs_1.default.readFileSync(path_1.default.join(dir, 'app.js'), 'utf-8');
+                    const app = fs_1.default.readFileSync(path_1.default.join(providerDir, 'app.js'), 'utf-8');
                     const js = app
                         .replace('___PORT___', `${port}`)
                         .replace('___MAPBOX_ACCESS_TOKEN___', `${options.mapboxAccessToken || defaultValues_1.defaultValues.mapboxAccessToken}`);
@@ -73,6 +85,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/dist/lib/yaml-writer.js

@@ -35,11 +35,14 @@ const writeDecompositedYaml = (destinationPath, style) => {
         const layer = style.layers[i];
         const layerYml = js_yaml_1.default.dump(layer);
         const fileName = `${style.layers[i].id}.yml`;
-        const dirName = path_1.default.join(path_1.default.dirname(destinationPath), 'layers');
-        fs_1.default.mkdirSync(dirName, { recursive: true });
-        fs_1.default.writeFileSync(path_1.default.join(dirName, fileName), layerYml);
+        const layersDirName = path_1.default.join(path_1.default.dirname(destinationPath), 'layers');
+        const filePath = path_1.default.join(layersDirName, fileName);
+        fs_1.default.mkdirSync(path_1.default.dirname(filePath), { recursive: true });
+        fs_1.default.writeFileSync(filePath, layerYml);
+        // ts-ignore is required here because !!inc/file string is not compatible with the Layer object type.
+        // We use path.posix.join to make sure the path uses / path separators, even when run on Windows.
         // @ts-ignore
-        layers.push(`!!inc/file ${path_1.default.join('layers', fileName)}`);
+        layers.push(`!!inc/file ${path_1.default.posix.join('layers', fileName)}`);
     }
     style.layers = layers;
     fs_1.default.writeFileSync(destinationPath, js_yaml_1.default.dump(style).replace(/'\!\!inc\/file layers\/.+\.yml'/g, function (match) {

package/docs/source/conf.py

@@ -18,11 +18,11 @@
 # -- Project information -----------------------------------------------------
 
 project = 'charites'
-copyright = '2021, The United Nations Vector Tile Toolkit'
+copyright = '2022, The United Nations Vector Tile Toolkit'
 author = 'Jin Igarashi'
 
 # The full version, including alpha/beta/rc tags
-release = '0.1.2'
+release = '0.2.0'
 
 
 # -- General configuration ---------------------------------------------------
@@ -66,4 +66,4 @@ html_context = {
     "github_repo": "charites", # Repo name
     "github_version": "main", # Version
     "conf_py_path": "/docs/source/", # Path in the checkout to the docs root
-}
+}

package/docs/source/index.rst

@@ -6,10 +6,10 @@
 Charites - Documentation
 ====================================
 
-:Date:   2021-12-08
+:Date:   2022-11-16
 :Copyright: CC-BY-SA
 :Organization: The United Nations Vector Tile Toolkit
-:Version: 0.1.2
+:Version: 0.2.0
 :Abstract: This document contains the complete documentation of Charites, an application to style vector tiles easily
 
 .. meta::

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/docs/source/usage/commandline_interface.rst

@@ -92,11 +92,11 @@ Realtime editor on browser
 
 Charites has three options for `serve` command.
 
-- `--provider` - `mapbox`, `geolonia`, or `default`. When not specified, default or the value in the configuration file will be used.
+- ``--provider`` - `mapbox`, `geolonia`, or `default`. When not specified, default or the value in the configuration file will be used.
 
   - `mapbox` - The format linter runs against the Mapbox GL JS v2.x compatible specification.
   - `geolonia` and `default` - the format linter runs against the MapLibre GL JS compatible specification.
 
-- `--mapbox-access-token` - Set your access-token when styling for Mapbox.
+- ``--mapbox-access-token`` - Set your access-token when styling for Mapbox.
 
-- `--port` - Set http server's port number. When not specified, use 8080 port.
+- ``--port`` - Set http server's port number. When not specified, use 8080 port.

package/docs/source/usage/examples.rst

@@ -29,14 +29,14 @@ Build `style.json` from `style.yml`:
 
     charites build style.yml style.json
 
-Add `-c` or `--compact-output` to minify the JSON
+Add ``-c`` or ``--compact-output`` to minify the JSON
 
 .. code-block:: bash
 
     charites build style.yml style.json -c
 
 
-Add `--sprite-input` and `--sprite-output` to build svg files for map icons.
+Add ``--sprite-input`` and ``--sprite-output`` to build svg files for map icons.
 
 .. code-block:: bash
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unvt/charites",
-  "version": "0.1.4",
+  "version": "0.3.0",
   "description": "",
   "bin": {
     "charites": "dist/cli.js"
@@ -9,16 +9,17 @@
     "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"
+    "test:e2e": "npx playwright test",
+    "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.8",
     "@types/jsonminify": "^0.4.1",
     "axios": "^0.24.0",
     "commander": "^8.2.0",
@@ -31,7 +32,10 @@
     "yaml-include": "^1.2.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.28.1",
     "@types/chai": "^4.2.11",
+    "@types/chai-as-promised": "^7.1.5",
+    "@types/fs-extra": "^9.0.13",
     "@types/js-yaml": "^4.0.3",
     "@types/mocha": "^7.0.2",
     "@types/node": "^14.0.14",
@@ -39,9 +43,12 @@
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
     "chai": "^4.2.0",
+    "chai-as-promised": "^7.1.1",
     "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/playwright.config.ts

@@ -0,0 +1,29 @@
+// playwright.config.ts
+import type { PlaywrightTestConfig } from '@playwright/test'
+
+const config: PlaywrightTestConfig = {
+  testDir: 'test/playwright',
+  use: {
+    browserName: 'chromium',
+    headless: true,
+  },
+  workers: 3,
+  webServer: [
+    {
+      command: 'dist/cli.js serve test/data/style.yml --port 8080',
+      port: 8080,
+    },
+    {
+      command:
+        'dist/cli.js serve test/data/style.yml --provider geolonia --port 8088',
+      port: 8088,
+    },
+    {
+      command:
+        'dist/cli.js serve test/data/style.yml --provider mapbox --port 8888 --mapbox-access-token ' +
+        process.env.MAPBOX_ACCESS_TOKEN,
+      port: 8888,
+    },
+  ],
+}
+export default config