@unvt/charites 0.5.2 → 2.0.0

package/docs/source/install/installation_guide_for_windows.rst

@@ -15,13 +15,13 @@ Steps
 
 Step 1. Installation of nodejs (if it is not installed yet)
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-Check if nodejs is installed. If not, visit `nodejs <https://nodejs.org/en/>`_ to install them. Version 14 or later version is recommended. Installation will fail with the older version of nodejs than 12.20.0.
+Check if nodejs is installed. If not, visit `nodejs <https://nodejs.org/en/>`_ to install them. Version 18 or later version is recommended. Installation will fail with the older version of nodejs than 12.20.0.
 
 Step 2. Open Windows PowerShell
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 Open Windows PowerShell and confirm if nodejs and npm works.
 
-.. code-block:: 
+.. code-block::
 
     npm --version
     node --version
@@ -30,7 +30,7 @@ Step 3. Install @unvt/charites as a npm package
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 Just rung the following command to install the charites.
 
-.. code-block:: 
+.. code-block::
 
     npm install -g @unvt/charites
 
@@ -39,7 +39,7 @@ Step 4. Confirm if charites is properly installed
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 If you can see the charites version and command lits with the following command. It seems that your installation has done successfully.
 
-.. code-block:: 
+.. code-block::
 
     charites --version
     charites --help

package/docs/source/install/recommended_environment.rst

@@ -3,4 +3,4 @@ Recommended environment
 
 Chrities may work well on OSX, Ubuntu, Windows 10 and Raspberry Pi.
 
-Nodejs and npm are needed to install charites. Docker can also be a good environment in Windows while WSL might work well. For charites version 0.3.0 released in December 2022, nodejs ver 14. or later version is recommended.
+Nodejs and npm are needed to install charites. Docker can also be a good environment in Windows while WSL might work well. For charites version 0.3.0 released in December 2022, nodejs ver 18. or later version is recommended.

package/docs/source/usage/commandline_interface.rst

@@ -78,11 +78,8 @@ Build `style.json` from `style.yml`
     -u, --sprite-url [<sprite url>]                url to set as the sprite in style.json
     -i, --sprite-input [<icon input directory>]    directory path of icon source to build icons. The default <icon source> is `icons/`
     -o, --sprite-output [<icon output directory>]  directory path to output icon files. The default <icons destination> is the current directory
-    --provider [provider]                          your map service. e.g. `mapbox`, `geolonia`
     -h, --help                                     display help for command
 
-if you use mapbox v2 for your style, please use `--provider mapbox` to specify mapbox service rather than default. Please see `--provider` option at `serve` command section.
-
 Realtime editor on browser
 --------------------------
 
@@ -94,22 +91,16 @@ Realtime editor on browser
     serve your map locally
 
     Options:
-    --provider [provider]                        your map service. e.g. `mapbox`, `geolonia`
-    --mapbox-access-token [mapboxAccessToken]    Access Token for the Mapbox
     -i, --sprite-input [<icon input directory>]  directory path of icon source to build icons. The default <icon
                                                  source> is `icons/`
+    --sdf                                        Allows to use SDF sprite in charites
     --port [port]                                Specify custom port
     -h, --help                                   display help for command
 
 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.
-
-  - `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.
-
 - ``--sprite-input`` - If you are building icon spritesheets with Charites, you can specify the directory of SVG files to compile here. See the ``build`` command for more information.
 
+- ``--sdf`` - if this option is used together with ``--sprite-input``, the viewer will generate SDF sprite. If the option is not specified, non SDF sprite will be generated.
+
 - ``--port`` - Set http server's port number. When not specified, the default is 8080.

package/docs/source/usage/examples.rst

@@ -66,9 +66,3 @@ Launch a live preview of your map style in your local environment:
 
     charites serve style.yml
 
-
-For Mapbox users:
-
-.. code-block:: bash
-
-    charites serve style.yml --provider mapbox --mapbox-access-token xxxx

package/docs/source/usage/index.rst

@@ -6,6 +6,5 @@ Usage
   :maxdepth: 1
 
   commandline_interface
-  global_options
   examples
   example2

package/eslint.config.mjs

@@ -0,0 +1,46 @@
+import tsParser from '@typescript-eslint/parser'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default [
+  {
+    ignores: ['node_modules/', 'dist', 'mocha-register.cjs'],
+  },
+  ...compat.extends(
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'prettier',
+  ),
+  {
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 2020,
+      sourceType: 'module',
+    },
+
+    rules: {
+      '@typescript-eslint/explicit-module-boundary-types': 0,
+      '@typescript-eslint/ban-ts-comment': 0,
+      '@typescript-eslint/no-var-requires': 0,
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+]

package/mocha-register.cjs

@@ -0,0 +1,2 @@
+require('ts-node/register')
+require('tsconfig-paths/register')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unvt/charites",
-  "version": "0.5.2",
+  "version": "2.0.0",
   "description": "",
   "bin": {
     "charites": "dist/cli.js"
@@ -9,7 +9,7 @@
     "build": "tsc -p .",
     "watch": "tsc -w",
     "lint": "eslint --fix .",
-    "test": "npm run build && mocha --timeout 5000 -r ts-node/register test/*.ts",
+    "test": "npm run build && NODE_OPTIONS='--experimental-specifier-resolution=node' mocha --timeout 5000 '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"
@@ -17,43 +17,46 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@mapbox/mapbox-gl-style-spec": "^13.27.0",
-    "@maplibre/maplibre-gl-style-spec": "^17.0.2",
-    "@types/jsonminify": "^0.4.1",
-    "@unvt/sprite-one": "^0.0.9",
-    "axios": "^1.2.2",
-    "commander": "^9.4.1",
-    "glob": "^8.0.3",
-    "js-yaml": "^4.0.0",
+    "@maplibre/maplibre-gl-style-spec": "^20.3.1",
+    "@types/geojson": "^7946.0.14",
+    "@types/jsonminify": "^0.4.3",
+    "@unvt/sprite-one": "^0.1.1",
+    "axios": "^1.7.5",
+    "commander": "^12.1.0",
+    "glob": "^11.0.0",
+    "js-yaml": "^4.1.0",
     "jsonminify": "^0.4.2",
-    "node-watch": "^0.7.3",
-    "open": "^8.2.1",
-    "ws": "^8.11.0",
-    "yaml-include": "^1.2.1"
+    "node-watch": "^0.7.4",
+    "open": "^10.1.0",
+    "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.29.1",
-    "@types/chai": "^4.3.4",
-    "@types/chai-as-promised": "^7.1.5",
-    "@types/fs-extra": "^9.0.13",
-    "@types/js-yaml": "^4.0.5",
-    "@types/mapbox__point-geometry": "^0.1.2",
-    "@types/mocha": "^10.0.1",
-    "@types/node": "^18.11.18",
-    "@types/ws": "^8.5.4",
-    "@typescript-eslint/eslint-plugin": "^5.47.1",
-    "@typescript-eslint/parser": "^5.47.1",
-    "chai": "^4.3.7",
-    "chai-as-promised": "^7.1.1",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "fs-extra": "^11.1.0",
-    "kill-port-process": "^3.1.0",
-    "mocha": "^10.2.0",
-    "node-abort-controller": "^3.0.1",
-    "prettier": "^2.8.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.9.4"
-  }
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.9.1",
+    "@playwright/test": "^1.46.1",
+    "@types/chai": "^4.3.19",
+    "@types/chai-as-promised": "^7.1.8",
+    "@types/fs-extra": "^11.0.4",
+    "@types/js-yaml": "^4.0.9",
+    "@types/mapbox__point-geometry": "^0.1.4",
+    "@types/mocha": "^10.0.7",
+    "@types/node": "^22.5.0",
+    "@types/ws": "^8.5.12",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
+    "chai": "^5.1.1",
+    "chai-as-promised": "^8.0.0",
+    "eslint": "^9.9.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "fs-extra": "^11.2.0",
+    "kill-port-process": "^3.2.1",
+    "mocha": "^10.7.3",
+    "node-abort-controller": "^3.1.1",
+    "prettier": "^3.3.3",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.5.4"
+  },
+  "type": "module"
 }

package/playwright.config.ts

@@ -7,23 +7,12 @@ const config: PlaywrightTestConfig = {
     browserName: 'chromium',
     headless: true,
   },
-  workers: 3,
+  workers: 1,
   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/shared.js → app.js}

@@ -42,8 +42,12 @@
             if (center === undefined) {
               const bounds = mapTileJson.bounds
               center = mapTileJson.center
-                ? mapTileJson.center
-                : [(bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2]
+              if (!center && bounds) {
+                center = [
+                  (bounds[0] + bounds[2]) / 2,
+                  (bounds[1] + bounds[3]) / 2,
+                ]
+              }
             }
             if (zoom === undefined) {
               zoom = (mapTileJson.minzoom + mapTileJson.maxzoom) / 2
@@ -75,4 +79,34 @@
       }
     },
   }
+
+  const { style, center, zoom } = await window._charites.parseMapStyle()
+  const options = {
+    container: 'map',
+    hash: true,
+    maxPitch: 85,
+    style,
+  }
+  if (center) options.center = center
+  if (zoom) options.zoom = zoom
+  const map = new maplibregl.Map(options)
+
+  window._charites.initializeWebSocket(map)
+
+  map.addControl(new maplibregl.NavigationControl(), 'top-right')
+
+  map.addControl(
+    new MaplibreLegendControl.MaplibreLegendControl(
+      {},
+      {
+        showDefault: true,
+        showCheckbox: true,
+        onlyRendered: true,
+        reverseOrder: true,
+      },
+    ),
+    'bottom-left',
+  )
+
+  window._charites.setupDebugCheckboxes(map)
 })()

package/provider/{default/index.html → index.html}

@@ -2,12 +2,12 @@
 <html id="charites-default">
   <head>
     <link rel="stylesheet" href="/app.css" />
-    <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
+    <link href='https://unpkg.com/maplibre-gl/dist/maplibre-gl.css' rel='stylesheet' />
     <link href='https://unpkg.com/@watergis/maplibre-gl-legend@2.0.0/dist/maplibre-gl-legend.css' rel='stylesheet' />
     <title>Charites Live Preview</title>
-    <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
+    <script src='https://unpkg.com/maplibre-gl/dist/maplibre-gl.js'></script>
     <script src="https://unpkg.com/@watergis/maplibre-gl-legend@2.0.0/dist/maplibre-gl-legend.umd.js"></script>
-    <script src="https://unpkg.com/pmtiles@2.7.0/dist/index.js"></script>
+    <script src="https://unpkg.com/pmtiles@3.0.7/dist/pmtiles.js"></script>
   </head>
   <body>
     <div class="overlay">

package/src/cli/build.ts

@@ -1,7 +1,6 @@
 import { Command } from 'commander'
-import { build, buildOptions, buildWatch } from '../commands/build'
-import { error } from '../lib/error'
-import { defaultSettings } from '../lib/defaultValues'
+import { build, buildOptions, buildWatch } from '../commands/build.js'
+import { error } from '../lib/error.js'
 import fs from 'fs'
 import path from 'path'
 
@@ -24,14 +23,9 @@ program
     '-o, --sprite-output [<icon output directory>]',
     'directory path to output icon files. The default <icons destination> is the current directory',
   )
-  .option(
-    '--provider [provider]',
-    'your map service. e.g. `mapbox`, `geolonia`',
-  )
   .action(
     async (source: string, destination: string, buildOptions: buildOptions) => {
       const options = program.opts()
-      options.provider = buildOptions.provider
       options.compactOutput = buildOptions.compactOutput
       options.spriteUrl = buildOptions.spriteUrl
       options.spriteOutput = buildOptions.spriteOutput || process.cwd()
@@ -44,13 +38,6 @@ program
         options.spriteInput = spriteInputDefault
       }
 
-      if (!fs.existsSync(defaultSettings.configFile)) {
-        fs.writeFileSync(
-          defaultSettings.configFile,
-          `provider: ${options.provider || 'default'}`,
-        )
-      }
-
       if (buildOptions.watch) {
         try {
           console.log('Start watching...')

package/src/cli/convert.ts

@@ -1,6 +1,6 @@
 import { Command } from 'commander'
-import { convert } from '../commands/convert'
-import { error } from '../lib/error'
+import { convert } from '../commands/convert.js'
+import { error } from '../lib/error.js'
 
 const program = new Command()
 program

package/src/cli/init.ts

@@ -1,6 +1,6 @@
 import { Command } from 'commander'
-import { init, initOptions } from '../commands/init'
-import { error } from '../lib/error'
+import { init, initOptions } from '../commands/init.js'
+import { error } from '../lib/error.js'
 
 const program = new Command()
 program

package/src/cli/serve.ts

@@ -1,41 +1,25 @@
 import { Command } from 'commander'
-import { serve, serveOptions } from '../commands/serve'
-import { error } from '../lib/error'
-import { defaultSettings } from '../lib/defaultValues'
-import fs from 'fs'
+import { serve, serveOptions } from '../commands/serve.js'
+import { error } from '../lib/error.js'
 
 const program = new Command()
 program
   .name('serve')
   .arguments('<source>')
   .description('serve your map locally')
-  .option(
-    '--provider [provider]',
-    'your map service. e.g. `mapbox`, `geolonia`',
-  )
-  .option(
-    '--mapbox-access-token [mapboxAccessToken]',
-    'Your Mapbox Access Token (required if using the `mapbox` provider)',
-  )
   .option(
     '-i, --sprite-input [<icon input directory>]',
     'directory path of icon source to build icons. The default <icon source> is `icons/`',
   )
+  .option('--sdf', 'Allows to use SDF sprite in charites')
   .option('--port [port]', 'Specify custom port')
   .option('--no-open', "Don't open the preview in the default browser")
   .action(async (source: string, serveOptions: serveOptions) => {
     const options: serveOptions = program.opts()
-    options.provider = serveOptions.provider
-    options.mapboxAccessToken = serveOptions.mapboxAccessToken
     options.port = serveOptions.port
     options.spriteInput = serveOptions.spriteInput
     options.open = serveOptions.open
-    if (!fs.existsSync(defaultSettings.configFile)) {
-      fs.writeFileSync(
-        defaultSettings.configFile,
-        `provider: ${options.provider || 'default'}`,
-      )
-    }
+    options.sdf = serveOptions.sdf
     try {
       await serve(source, program.opts())
     } catch (e) {

package/src/cli.ts

@@ -2,13 +2,22 @@
 
 import { Command } from 'commander'
 
-import init from './cli/init'
-import convert from './cli/convert'
-import build from './cli/build'
-import serve from './cli/serve'
+import init from './cli/init.js'
+import convert from './cli/convert.js'
+import build from './cli/build.js'
+import serve from './cli/serve.js'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+import { readFileSync } from 'fs'
+
+// ESMの__dirnameの代わり
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 const program = new Command()
-const version = require('../package.json').version
+
+const packageJson = readFileSync(join(__dirname, '../package.json'), 'utf-8')
+const { version } = JSON.parse(packageJson)
 program
   .version(version, '-v, --version', 'output the version number')
   .addCommand(init)

package/src/commands/build.ts

@@ -1,16 +1,14 @@
 import path from 'path'
 import fs from 'fs'
-import { parser } from '../lib/yaml-parser'
-import { validateStyle } from '../lib/validate-style'
-import { buildSprite } from '../lib/build-sprite'
-import { getSpriteSlug } from '../lib/get-sprite-slug'
-import { defaultValues } from '../lib/defaultValues'
+import { parser } from '../lib/yaml-parser.js'
+import { validateStyle } from '../lib/validate-style.js'
+import { buildSprite } from '../lib/build-sprite.js'
+import { getSpriteSlug } from '../lib/get-sprite-slug.js'
 import jsonminify from 'jsonminify'
 import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec'
 import watch from 'node-watch'
 
 export interface buildOptions {
-  provider?: string
   compactOutput?: boolean
   watch?: boolean
   spriteUrl?: string
@@ -49,16 +47,11 @@ export async function build(
     )
   }
 
-  let provider = defaultValues.provider
-  if (options.provider) {
-    provider = options.provider
-  }
-
   let style = ''
 
   try {
     const _style: StyleSpecification = parser(sourcePath)
-    validateStyle(_style, provider)
+    validateStyle(_style)
 
     if (options.spriteUrl && 'sprite' in _style) {
       _style.sprite = options.spriteUrl

package/src/commands/convert.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import fs from 'fs'
 import readline from 'readline'
-import { writeYaml } from '../lib/yaml-writer'
+import { writeYaml } from '../lib/yaml-writer.js'
 
 const getDestinationPath = (destination: string, sourcePath = '') => {
   let destinationPath

package/src/commands/init.ts

@@ -1,9 +1,9 @@
 import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec'
-import { writeYaml } from '../lib/yaml-writer'
+import { writeYaml } from '../lib/yaml-writer.js'
 import {
   TileJSONImporter,
   MetadataJSONImporter,
-} from '../lib/tileinfo-importer'
+} from '../lib/tileinfo-importer/index.js'
 
 export interface initOptions {
   tilejsonUrls?: string