@unvt/charites 0.5.4 → 2.0.2

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,8 +91,6 @@ 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
@@ -104,13 +99,6 @@ 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.
-
-  - `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.

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.4",
+  "version": "2.0.2",
   "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": "^19.3.0",
-    "@types/jsonminify": "^0.4.1",
+    "@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.2.2",
-    "commander": "^9.4.1",
-    "glob": "^8.0.3",
-    "js-yaml": "^4.0.0",
+    "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}

@@ -79,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/@watergis/maplibre-gl-legend@2.0.0/dist/maplibre-gl-legend.css' rel='stylesheet' />
+    <link href='https://cdn.jsdelivr.net/npm/maplibre-gl/dist/maplibre-gl.css' rel='stylesheet' />
+    <link href='https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-legend@2.0.5/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/@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://cdn.jsdelivr.net/npm/maplibre-gl/dist/maplibre-gl.js'></script>
+    <script src="https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-legend@2.0.5/dist/maplibre-gl-legend.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/pmtiles@4.3.0/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,22 +1,12 @@
 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/`',
@@ -26,18 +16,10 @@ program
   .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
     options.sdf = serveOptions.sdf
-    if (!fs.existsSync(defaultSettings.configFile)) {
-      fs.writeFileSync(
-        defaultSettings.configFile,
-        `provider: ${options.provider || 'default'}`,
-      )
-    }
     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

package/src/commands/serve.ts

@@ -6,14 +6,12 @@ import open from 'open'
 import { WebSocketServer } from 'ws'
 import watch from 'node-watch'
 
-import { parser } from '../lib/yaml-parser'
-import { validateStyle } from '../lib/validate-style'
-import { defaultValues } from '../lib/defaultValues'
-import { buildSprite } from '../lib/build-sprite'
+import { parser } from '../lib/yaml-parser.js'
+import { validateStyle } from '../lib/validate-style.js'
+import { providerDir } from '../lib/defaultValues.js'
+import { buildSprite } from '../lib/build-sprite.js'
 
 export interface serveOptions {
-  provider?: string
-  mapboxAccessToken?: string
   port?: string
   spriteInput?: string
   open?: boolean
@@ -27,11 +25,6 @@ export async function serve(source: string, options: serveOptions) {
   }
   let sourcePath = path.resolve(process.cwd(), source)
 
-  let provider = defaultValues.provider
-  if (options.provider) {
-    provider = options.provider
-  }
-
   // The `source` is absolute path.
   if (source.match(/^\//)) {
     sourcePath = source
@@ -41,12 +34,6 @@ export async 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)`
-  }
-
   let spriteOut: string | undefined = undefined
   let spriteRefresher: (() => Promise<void>) | undefined = undefined
   if (options.spriteInput) {
@@ -65,8 +52,6 @@ export async function serve(source: string, options: serveOptions) {
 
   const server = http.createServer(async (req, res) => {
     const url = (req.url || '').replace(/\?.*/, '')
-    const defaultProviderDir = path.join(defaultValues.providerDir, 'default')
-    const providerDir = path.join(defaultValues.providerDir, provider)
 
     if (
       typeof spriteOut !== 'undefined' &&
@@ -104,7 +89,7 @@ export async function serve(source: string, options: serveOptions) {
               req.headers.host || `localhost:${port}`
             }/sprite`
           }
-          validateStyle(style, provider)
+          validateStyle(style)
         } catch (error) {
           console.log(error)
         }
@@ -116,37 +101,15 @@ export async 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(defaultProviderDir, 'app.css'),
-          'utf-8',
-        )
+        const css = fs.readFileSync(path.join(providerDir, '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(providerDir, 'app.js'), 'utf-8')
-          const js = app
-            .replace('___PORT___', `${port}`)
-            .replace(
-              '___MAPBOX_ACCESS_TOKEN___',
-              `${options.mapboxAccessToken || defaultValues.mapboxAccessToken}`,
-            )
-          res.end(js)
-        } catch (e) {
-          throw `Invalid provider: ${provider}`
-        }
+        const app = fs.readFileSync(path.join(providerDir, 'app.js'), 'utf-8')
+        const js = app.replace('___PORT___', `${port}`)
+        res.end(js)
         break
       default:
         res.statusCode = 404
@@ -157,7 +120,6 @@ export async function serve(source: string, options: serveOptions) {
   })
 
   server.listen(port, () => {
-    console.log(`Provider: ${provider}`)
     console.log(`Loading your style: ${sourcePath}`)
     console.log(`Your map is running on http://localhost:${port}/\n`)
     if (options.open) {
@@ -192,7 +154,7 @@ export async function serve(source: string, options: serveOptions) {
               )
             })
           }
-        } catch (e) {
+        } catch (_) {
           // Nothing to do
         }
       },

package/src/lib/defaultValues.ts

@@ -1,36 +1,10 @@
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
 import path from 'path'
-import os from 'os'
-import fs from 'fs'
-import YAML from 'js-yaml'
 
-interface Config {
-  provider: string
-  providerDir: string
-  mapboxAccessToken?: string
-}
-
-const homedir = os.homedir()
-const defaultProvider = 'default'
-
-const configDir = path.join(homedir, '.charites')
-fs.mkdirSync(configDir, { recursive: true })
-
-const configFile = path.join(configDir, 'config.yml')
-let config: Config = { provider: '', providerDir: '', mapboxAccessToken: '' }
-
-try {
-  const yaml = fs.readFileSync(configFile, 'utf-8')
-  config = YAML.load(yaml) as Config
-} catch (e) {
-  // nothing to do
-}
-
-export const defaultValues: Config = {
-  provider: config.provider || defaultProvider,
-  providerDir: path.join(path.dirname(path.dirname(__dirname)), 'provider'),
-  mapboxAccessToken: config.mapboxAccessToken || '',
-}
-
-export const defaultSettings = {
-  configFile: configFile,
-}
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+export const providerDir = path.join(
+  path.dirname(path.dirname(__dirname)),
+  'provider',
+)

package/src/lib/tileinfo-importer/index.ts

@@ -1,2 +1,2 @@
-export { MetadataJSONImporter } from './metadata-importer'
-export { TileJSONImporter } from './tilejson-importer'
+export { MetadataJSONImporter } from './metadata-importer.js'
+export { TileJSONImporter } from './tilejson-importer.js'