@unvt/charites 0.2.0 → 0.3.0

package/.devcontainer/README.md

@@ -2,7 +2,7 @@
 
 ## What is it?
 
-- DevContainer is a Dockerfike and configuration file for remote development in Visual Studio Code or GitHub Codespaces
+- 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
 

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -18,7 +18,7 @@ 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, 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/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}`);

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/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.2.0",
+  "version": "0.3.0",
   "description": "",
   "bin": {
     "charites": "dist/cli.js"
@@ -11,6 +11,7 @@
     "lint": "eslint --fix .",
     "test": "npm run build && mocha -r ts-node/register test/*.ts",
     "test:watch": "npm test -- --watch --watch-files src/**/*.ts --watch-files test/**/*.ts",
+    "test:e2e": "npx playwright test",
     "command": "./node_modules/.bin/ts-node ./src/cli.ts"
   },
   "author": "",
@@ -18,7 +19,7 @@
   "dependencies": {
     "@mapbox/mapbox-gl-style-spec": "^13.22.0",
     "@maplibre/maplibre-gl-style-spec": "^14.0.2",
-    "@unvt/sprite-one": "^0.0.6",
+    "@unvt/sprite-one": "^0.0.8",
     "@types/jsonminify": "^0.4.1",
     "axios": "^0.24.0",
     "commander": "^8.2.0",
@@ -31,7 +32,9 @@
     "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",
@@ -40,6 +43,7 @@
     "@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",

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

package/provider/default/app.js

@@ -1,50 +1,32 @@
-const map = new maplibregl.Map({
-  container: 'map',
-  hash: true,
-  style: `http://${window.location.host}/style.json`,
-})
+;(async () => {
+  const { style, center, zoom } = await window._charites.parseMapStyle()
+  const options = {
+    container: 'map',
+    hash: true,
+    style,
+  }
+  if (center) options.center = center
+  if (zoom) options.zoom = zoom
+  const map = new maplibregl.Map(options)
 
-const socket = new WebSocket('ws://localhost:___PORT___')
+  window._charites.initializeWebSocket((message) => {
+    map.setStyle(JSON.parse(message.data))
+  })
 
-socket.addEventListener('message', (message) => {
-  map.setStyle(JSON.parse(message.data))
-})
+  map.addControl(new maplibregl.NavigationControl(), 'top-right')
 
-map.addControl(new maplibregl.NavigationControl(), 'top-right')
+  map.addControl(
+    new MaplibreLegendControl(
+      {},
+      {
+        showDefault: true,
+        showCheckbox: true,
+        onlyRendered: true,
+        reverseOrder: true,
+      },
+    ),
+    'bottom-left',
+  )
 
-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
-  map.showTileBoundaries = checked
-}
-setShowTileBoundaries()
-showTileBoundaries.addEventListener('click', setShowTileBoundaries)
-
-const showCollisionBoxes = document.getElementById('showCollisionBoxes')
-const setShowCollisionBoxes = function () {
-  const checked = showCollisionBoxes.checked
-  map.showCollisionBoxes = checked
-}
-setShowCollisionBoxes()
-showCollisionBoxes.addEventListener('click', setShowCollisionBoxes)
-
-const showPadding = document.getElementById('showPadding')
-const setShowPadding = function () {
-  const checked = showPadding.checked
-  map.showPadding = checked
-}
-setShowPadding()
-showPadding.addEventListener('click', setShowPadding)
+  window._charites.setupDebugCheckboxes(map)
+})()

package/provider/default/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html id="charites-default">
   <head>
     <link rel="stylesheet" href="/app.css" />
     <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
@@ -17,6 +17,7 @@
       <label><input type="checkbox" id="showPadding">show Padding</label>
     </div>
     <div id="map"></div>
+    <script type="text/javascript" src="/shared.js"></script>
     <script type="text/javascript" src="/app.js"></script>
   </body>
 </html>

package/provider/default/shared.js

@@ -0,0 +1,67 @@
+;(async () => {
+  window._charites = {
+    initializeWebSocket: function (onmessage) {
+      const socket = new WebSocket(`ws://${window.location.host}`)
+
+      socket.addEventListener('message', onmessage)
+    },
+    parseMapStyle: async function () {
+      const mapStyleUrl = `http://${window.location.host}/style.json`
+      const mapStyleRes = await fetch(mapStyleUrl)
+      const mapStyleJson = await mapStyleRes.json()
+
+      // detect center & zoom from map style json
+      let center = mapStyleJson.hasOwnProperty('center')
+        ? mapStyleJson.center
+        : undefined
+      let zoom = mapStyleJson.hasOwnProperty('zoom')
+        ? mapStyleJson.zoom
+        : undefined
+
+      // detect center & zoom from tile json
+      if (center === undefined || zoom === undefined) {
+        for (const sourceName in mapStyleJson.sources) {
+          if (
+            mapStyleJson.sources[sourceName].type === 'vector' &&
+            mapStyleJson.sources[sourceName].hasOwnProperty('url')
+          ) {
+            const mapTileUrl = mapStyleJson.sources[sourceName].url
+            const mapTileRes = await fetch(mapTileUrl)
+            const mapTileJson = await mapTileRes.json()
+            if (center === undefined) {
+              const bounds = mapTileJson.bounds
+              center = mapTileJson.center
+                ? mapTileJson.center
+                : [(bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2]
+            }
+            if (zoom === undefined) {
+              zoom = (mapTileJson.minzoom + mapTileJson.maxzoom) / 2
+            }
+          }
+        }
+      }
+
+      return {
+        style: mapStyleUrl,
+        center,
+        zoom,
+      }
+    },
+    setupDebugCheckboxes: function (map) {
+      const properties = [
+        'showTileBoundaries',
+        'showCollisionBoxes',
+        'showPadding',
+      ]
+      for (const property of properties) {
+        const control = document.getElementById(property)
+        const clickHandler = function () {
+          const checked = control.checked
+          map[property] = checked
+        }
+        clickHandler()
+        control.addEventListener('click', clickHandler)
+      }
+    },
+  }
+})()

package/provider/geolonia/app.js

@@ -1,35 +1,30 @@
-const map = new geolonia.Map({
-  container: '#map',
-  hash: true,
-  style: `http://${window.location.host}/style.json`,
-})
+;(async () => {
+  const { style, center, zoom } = await window._charites.parseMapStyle()
+  const options = {
+    container: 'map',
+    hash: true,
+    style,
+  }
+  if (center) options.center = center
+  if (zoom) options.zoom = zoom
+  const map = new geolonia.Map(options)
 
-const socket = new WebSocket('ws://localhost:___PORT___')
+  window._charites.initializeWebSocket((message) => {
+    map.setStyle(JSON.parse(message.data))
+  })
 
-socket.addEventListener('message', (message) => {
-  map.setStyle(JSON.parse(message.data))
-})
+  map.addControl(
+    new MaplibreLegendControl(
+      {},
+      {
+        showDefault: true,
+        showCheckbox: true,
+        onlyRendered: true,
+        reverseOrder: true,
+      },
+    ),
+    'bottom-left',
+  )
 
-const showTileBoundaries = document.getElementById('showTileBoundaries')
-const setShowTileBoundaries = function () {
-  const checked = showTileBoundaries.checked
-  map.showTileBoundaries = checked
-}
-setShowTileBoundaries()
-showTileBoundaries.addEventListener('click', setShowTileBoundaries)
-
-const showCollisionBoxes = document.getElementById('showCollisionBoxes')
-const setShowCollisionBoxes = function () {
-  const checked = showCollisionBoxes.checked
-  map.showCollisionBoxes = checked
-}
-setShowCollisionBoxes()
-showCollisionBoxes.addEventListener('click', setShowCollisionBoxes)
-
-const showPadding = document.getElementById('showPadding')
-const setShowPadding = function () {
-  const checked = showPadding.checked
-  map.showPadding = checked
-}
-setShowPadding()
-showPadding.addEventListener('click', setShowPadding)
+  window._charites.setupDebugCheckboxes(map)
+})()

package/provider/geolonia/index.html

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html id="charites-geolonia">
   <head>
     <link rel="stylesheet" href="/app.css" />
     <title>Charites Live Preview</title>
+    <link href='https://watergis.github.io/maplibre-gl-legend/maplibre-gl-legend.css' rel='stylesheet' />
   </head>
   <body>
     <div class="overlay">
@@ -14,6 +15,8 @@
     </div>
     <div id="map"></div>
     <script type="text/javascript" src="https://cdn.geolonia.com/v1/embed?geolonia-api-key=YOUR-API-KEY"></script>
+    <script src="https://watergis.github.io/maplibre-gl-legend/maplibre-gl-legend.js"></script>
+    <script type="text/javascript" src="/shared.js"></script>
     <script type="text/javascript" src="/app.js"></script>
   </body>
 </html>

package/provider/mapbox/app.js

@@ -1,53 +1,35 @@
-mapboxgl.accessToken = '___MAPBOX_ACCESS_TOKEN___'
-
-const map = new mapboxgl.Map({
-  container: 'map',
-  hash: true,
-  style: `http://${window.location.host}/style.json`,
-})
-
-const socket = new WebSocket('ws://localhost:___PORT___')
-
-socket.addEventListener('message', (message) => {
-  map.setStyle(JSON.parse(message.data))
-})
-
-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
-  map.showTileBoundaries = checked
-}
-setShowTileBoundaries()
-showTileBoundaries.addEventListener('click', setShowTileBoundaries)
-
-const showCollisionBoxes = document.getElementById('showCollisionBoxes')
-const setShowCollisionBoxes = function () {
-  const checked = showCollisionBoxes.checked
-  map.showCollisionBoxes = checked
-}
-setShowCollisionBoxes()
-showCollisionBoxes.addEventListener('click', setShowCollisionBoxes)
-
-const showPadding = document.getElementById('showPadding')
-const setShowPadding = function () {
-  const checked = showPadding.checked
-  map.showPadding = checked
-}
-setShowPadding()
-showPadding.addEventListener('click', setShowPadding)
+;(async () => {
+  mapboxgl.accessToken = '___MAPBOX_ACCESS_TOKEN___'
+
+  const { style, center, zoom } = await window._charites.parseMapStyle()
+  const options = {
+    container: 'map',
+    hash: true,
+    style,
+  }
+  if (center) options.center = center
+  if (zoom) options.zoom = zoom
+  const map = new mapboxgl.Map(options)
+
+  window._charites.initializeWebSocket((message) => {
+    map.setStyle(JSON.parse(message.data))
+  })
+
+  map.addControl(new mapboxgl.NavigationControl(), 'top-right')
+
+  map.addControl(
+    new MapboxLegendControl(
+      {},
+      {
+        showDefault: true,
+        showCheckbox: true,
+        onlyRendered: true,
+        reverseOrder: true,
+        accesstoken: mapboxgl.accessToken,
+      },
+    ),
+    'bottom-left',
+  )
+
+  window._charites.setupDebugCheckboxes(map)
+})()

package/provider/mapbox/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html id="charites-mapbox">
   <head>
     <link rel="stylesheet" href="/app.css" />
     <link href='https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.css' rel='stylesheet' />
@@ -17,6 +17,7 @@
       <label><input type="checkbox" id="showPadding">show Padding</label>
     </div>
     <div id="map"></div>
+    <script type="text/javascript" src="/shared.js"></script>
     <script type="text/javascript" src="/app.js"></script>
   </body>
 </html>

package/src/cli/serve.ts

@@ -15,7 +15,7 @@ program
   )
   .option(
     '--mapbox-access-token [mapboxAccessToken]',
-    'Access Token for the Mapbox',
+    'Your Mapbox Access Token (required if using the `mapbox` provider)',
   )
   .option('--port [port]', 'Specify custom port')
   .action((source: string, serveOptions: serveOptions) => {

package/src/commands/serve.ts

@@ -36,15 +36,25 @@ export function serve(source: string, options: serveOptions) {
     throw `${sourcePath}: No such file or directory`
   }
 
+  const mapboxAccessToken =
+    options.mapboxAccessToken || 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.createServer((req, res) => {
     const url = (req.url || '').replace(/\?.*/, '')
-    const dir = path.join(defaultValues.providerDir, provider)
+    const defaultProviderDir = path.join(defaultValues.providerDir, 'default')
+    const providerDir = path.join(defaultValues.providerDir, provider)
 
     switch (url) {
       case '/':
         res.statusCode = 200
         res.setHeader('Content-Type', 'text/html; charset=UTF-8')
-        const content = fs.readFileSync(path.join(dir, 'index.html'), 'utf-8')
+        const content = fs.readFileSync(
+          path.join(providerDir, 'index.html'),
+          'utf-8',
+        )
         res.end(content)
         break
       case '/style.json':
@@ -62,14 +72,27 @@ export function serve(source: string, options: serveOptions) {
       case '/app.css':
         res.statusCode = 200
         res.setHeader('Content-Type', 'text/css; charset=UTF-8')
-        const css = fs.readFileSync(path.join(dir, 'app.css'), 'utf-8')
+        const css = fs.readFileSync(
+          path.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.readFileSync(
+          path.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.readFileSync(path.join(dir, 'app.js'), 'utf-8')
+          const app = fs.readFileSync(path.join(providerDir, 'app.js'), 'utf-8')
           const js = app
             .replace('___PORT___', `${port}`)
             .replace(

package/src/lib/yaml-writer.ts

@@ -47,11 +47,15 @@ const writeDecompositedYaml = (
     const layer = style.layers[i]
     const layerYml = YAML.dump(layer)
     const fileName = `${style.layers[i].id}.yml`
-    const dirName = path.join(path.dirname(destinationPath), 'layers')
-    fs.mkdirSync(dirName, { recursive: true })
-    fs.writeFileSync(path.join(dirName, fileName), layerYml)
+    const layersDirName = path.join(path.dirname(destinationPath), 'layers')
+    const filePath = path.join(layersDirName, fileName)
+    fs.mkdirSync(path.dirname(filePath), { recursive: true })
+    fs.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.join('layers', fileName)}`)
+    layers.push(`!!inc/file ${path.posix.join('layers', fileName)}`)
   }
 
   style.layers = layers

package/test/build.spec.ts

@@ -1,4 +1,5 @@
-import { assert } from 'chai'
+import chai from 'chai'
+import chaiAsPromised from 'chai-as-promised'
 import path from 'path'
 import fs from 'fs'
 import os from 'os'
@@ -6,6 +7,10 @@ import os from 'os'
 import { build, buildWatch } from '../src/commands/build'
 import { defaultValues } from '../src/lib/defaultValues'
 
+chai.use(chaiAsPromised)
+chai.should()
+const assert = chai.assert
+
 describe('Test for the `build.ts`.', () => {
   const styleYaml = path.join(__dirname, 'data/style.yml')
   const iconSource = path.join(__dirname, 'data/icons')
@@ -38,7 +43,12 @@ describe('Test for the `build.ts`.', () => {
 
     // The file should exists.
     assert.deepEqual(true, !!fs.statSync(styleJson))
-    assert.deepEqual(8, JSON.parse(fs.readFileSync(styleJson, 'utf-8')).version)
+
+    const fixtureStyleJson = path.join(__dirname, 'data/style.json')
+    assert.equal(
+      fs.readFileSync(styleJson, 'utf-8'),
+      fs.readFileSync(fixtureStyleJson, 'utf-8'),
+    )
   })
 
   it('Should minify `data/style.yml` to JSON.', async () => {
@@ -101,18 +111,18 @@ describe('Test for the `build.ts`.', () => {
     })
   })
 
-  it('Should not create sprite when input directory is not exist.', async () => {
+  it('Should not create sprite when input directory is not exist.', () => {
     const noExistInputDir = path.join(__dirname, 'data/hellooooo')
 
-    try {
-      await build(styleYaml, styleJson, {
-        provider: defaultValues.provider,
-        spriteInput: noExistInputDir,
-        spriteOutput: tmpdir,
-      })
-    } catch (error) {
-      assert.deepEqual(true, !!error) // It should have something error.
-    }
+    const promise = build(styleYaml, styleJson, {
+      provider: defaultValues.provider,
+      spriteInput: noExistInputDir,
+      spriteOutput: tmpdir,
+    })
+    return assert.isRejected(
+      promise,
+      /No such directory. Please specify valid icon input directory. For more help run charites build --help/,
+    )
   })
 
   it('Should watch `*.yml` and convert it to JSON', async () => {

package/test/command.build.spec.ts

@@ -1,4 +1,5 @@
-import { assert } from 'chai'
+import chai from 'chai'
+import chaiAsPromised from 'chai-as-promised'
 import path from 'path'
 import fs from 'fs'
 import { copyFixturesFile, copyFixturesDir } from './util/copyFixtures'
@@ -7,11 +8,15 @@ import { makeTempDir } from './util/makeTempDir'
 import charites from './util/charitesCmd'
 
 let tmpdir = ''
+chai.use(chaiAsPromised)
+chai.should()
+const assert = chai.assert
 
 describe('Test for the `charites build`', () => {
   beforeEach(async function () {
     tmpdir = makeTempDir()
     copyFixturesFile('style.yml', tmpdir)
+    copyFixturesFile('error.yml', tmpdir)
     copyFixturesDir('layers', tmpdir)
     copyFixturesDir('icons', tmpdir)
   })
@@ -62,39 +67,42 @@ describe('Test for the `charites build`', () => {
     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-url http://localhost:8080', () => {
+    const promise = exec(
+      `${charites} build style.yml style.json --sprite-url http://localhost:8080`,
+      tmpdir,
+    )
+    return assert.isRejected(promise, /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-input noExistDirname', () => {
+    const promise = exec(
+      `${charites} build style.yml style.json --sprite-input noExistDirname`,
+      tmpdir,
+    )
+    return assert.isRejected(
+      promise,
+      /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',
-      )
-    }
+  it('charites build style.yml style.json --sprite-output noExistDirname', (done) => {
+    const promise = exec(
+      `${charites} build style.yml style.json --sprite-output noExistDirname`,
+      tmpdir,
+    )
+    promise.should.be.rejected
+      .then(function () {
+        return assert.isRejected(
+          promise,
+          /noExistDirname: No such directory. Please specify valid icon output directory. For more help run charites build --help\n/,
+        )
+      })
+      .should.notify(done)
+  })
+
+  it('charites build print error message', () => {
+    const promise = exec(`${charites} build error.yml`, tmpdir)
+    return assert.isRejected(promise, /missing required property "sources"/)
   })
 })

package/test/data/style.json

@@ -14,8 +14,9 @@
     {
       "id": "background",
       "type": "background",
-      "paint": null,
-      "background-color": "rgba(19, 28, 54, 1)"
+      "paint": {
+        "background-color": "rgba(19, 28, 54, 1)"
+      }
     },
     {
       "id": "water",
@@ -30,4 +31,4 @@
       }
     }
   ]
-}
+}

package/test/playwright/provider/default/e2e.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('Charites Live Preview with maplibre', async ({ page }) => {
+  // collect errors on the page
+  const pageErrors: Error[] = []
+  page.on('pageerror', (exception) => pageErrors.push(exception))
+
+  await page.goto('http://localhost:8080/', { waitUntil: 'networkidle' })
+  await page.waitForTimeout(1000)
+  const title = await page.title()
+  expect(title).toBe('Charites Live Preview')
+  expect(pageErrors).toMatchObject([])
+})

package/test/playwright/provider/geolonia/e2e.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('Charites Live Preview with geolonia', async ({ page }) => {
+  // collect errors on the page
+  const pageErrors: Error[] = []
+  page.on('pageerror', (exception) => pageErrors.push(exception))
+
+  await page.goto('http://localhost:8088/', { waitUntil: 'networkidle' })
+  await page.waitForTimeout(1000)
+  const title = await page.title()
+  expect(title).toBe('Charites Live Preview')
+  expect(pageErrors).toMatchObject([])
+})

package/test/playwright/provider/mapbox/e2e.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('Charites Live Preview with mapbox', async ({ page }) => {
+  // collect errors on the page
+  const pageErrors: Error[] = []
+  page.on('pageerror', (exception) => pageErrors.push(exception))
+
+  await page.goto('http://localhost:8888/', { waitUntil: 'networkidle' })
+  await page.waitForTimeout(1000)
+  const title = await page.title()
+  expect(title).toBe('Charites Live Preview')
+  expect(pageErrors).toMatchObject([])
+})

package/provider/geolonia/app.css

@@ -1,17 +0,0 @@
-html, body, #map
-{
-  width: 100vw;
-  height: 100vh;
-  padding: 0;
-  margin: 0;
-}
-
-.overlay {
-  width: 200px;
-  position: absolute;
-  top: 10;
-  left: 10;
-  margin: 5px;
-  z-index: 90;
-  background-color: rgba(255, 255, 255, 0.6);
-}

package/provider/mapbox/app.css

@@ -1,17 +0,0 @@
-html, body, #map
-{
-  width: 100vw;
-  height: 100vh;
-  padding: 0;
-  margin: 0;
-}
-
-.overlay {
-  width: 200px;
-  position: absolute;
-  top: 10;
-  left: 10;
-  margin: 5px;
-  z-index: 90;
-  background-color: rgba(255, 255, 255, 0.6);
-}