@unvt/charites 0.5.2 → 2.0.0

package/src/commands/serve.ts

@@ -6,17 +6,16 @@ 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
+  sdf?: boolean
 }
 
 export async function serve(source: string, options: serveOptions) {
@@ -26,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
@@ -40,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) {
@@ -57,15 +45,13 @@ export async function serve(source: string, options: serveOptions) {
       ) {
         return
       }
-      await buildSprite(options.spriteInput, spriteOut, 'sprite')
+      await buildSprite(options.spriteInput, spriteOut, 'sprite', options.sdf)
     }
     await spriteRefresher()
   }
 
   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' &&
@@ -103,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)
         }
@@ -115,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
@@ -156,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) {
@@ -191,7 +154,7 @@ export async function serve(source: string, options: serveOptions) {
               )
             })
           }
-        } catch (e) {
+        } catch (_) {
           // Nothing to do
         }
       },

package/src/lib/build-sprite.ts

@@ -5,9 +5,10 @@ export async function buildSprite(
   svgPath: string,
   publicPath: string,
   iconSlug: string,
+  sdf = false,
 ): Promise<void> {
   const pxRatios = [1, 2]
   const outPath = path.join(publicPath, iconSlug)
-  await generateSprite(outPath, [svgPath], pxRatios)
+  await generateSprite(outPath, [svgPath], pxRatios, sdf)
   return
 }

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/get-sprite-slug.ts

@@ -1,11 +1,15 @@
 import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec'
 
 export function getSpriteSlug(style: StyleSpecification): string | false {
-  if (!style.hasOwnProperty('sprite')) {
+  if (!style.hasOwnProperty('sprite') || !style.sprite) {
     return false
   }
 
-  const matchedUrl = style.sprite?.match(
+  const firstUrl = Array.isArray(style.sprite)
+    ? style.sprite[0].url
+    : style.sprite
+
+  const matchedUrl = firstUrl.match(
     /^(?:[^:\/?#]+:)?(?:\/\/[^\/?#]*)?(?:([^?#]*\/)([^\/?#]*))?(\?[^#]*)?(?:#.*)?$/,
   )
 

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'

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

@@ -1,10 +1,10 @@
 import axios from 'axios'
-import { MetadataJSON, VectorLayer } from '../../types'
+import { MetadataJSON, VectorLayer } from '../../types/index.js'
 import {
   LayerSpecification,
   VectorSourceSpecification,
 } from '@maplibre/maplibre-gl-style-spec'
-import { BaseImporter, TileInfoJSONResponse } from './base-importer'
+import { BaseImporter, TileInfoJSONResponse } from './base-importer.js'
 
 export class MetadataJSONImporter extends BaseImporter {
   async getJSON(url: string): Promise<TileInfoJSONResponse> {

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

@@ -1,10 +1,10 @@
 import axios from 'axios'
-import { TileJSON } from '../../types'
+import { TileJSON } from '../../types/index.js'
 import {
   SourceSpecification,
   LayerSpecification,
 } from '@maplibre/maplibre-gl-style-spec'
-import { BaseImporter, TileInfoJSONResponse } from './base-importer'
+import { BaseImporter, TileInfoJSONResponse } from './base-importer.js'
 
 export class TileJSONImporter extends BaseImporter {
   async getJSON(url: string): Promise<TileInfoJSONResponse> {

package/src/lib/validate-style.ts

@@ -1,22 +1,22 @@
-const maplibreStyleSpec = require('@maplibre/maplibre-gl-style-spec')
-const mapboxStyleSpec = require('@mapbox/mapbox-gl-style-spec')
-import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec'
+import maplibreStyleSpec, {
+  StyleSpecification,
+} from '@maplibre/maplibre-gl-style-spec'
 
-export function validateStyle(
-  style: StyleSpecification,
-  provider = 'default',
-): void {
-  let result = []
-  if ('mapbox' === provider) {
-    result = mapboxStyleSpec.validate(style)
-  } else {
-    result = maplibreStyleSpec.validate(style)
-  }
+export function validateStyle(style: StyleSpecification): void {
+  const result = maplibreStyleSpec.validateStyleMin(style)
 
   const errors = []
   for (let i = 0; i < result.length; i++) {
-    if (result[i].message) {
-      errors.push(result[i].message)
+    const msg = result[i].message
+    if (msg) {
+      const layerMatch = msg.match(/^layers\[([0-9]+)\]/)
+      if (layerMatch) {
+        const layerIndex = Number(layerMatch[1])
+        const layerId = style.layers[layerIndex].id
+        errors.push(`Layer "${layerId}": ${msg}`)
+      } else {
+        errors.push(msg)
+      }
     }
   }
 

package/src/lib/yaml-include/file.ts

@@ -0,0 +1,29 @@
+import fs from 'fs'
+import path from 'path'
+import yaml from 'js-yaml'
+import * as yamlinc from './index.js'
+
+function construct(data: string): unknown {
+  const basepath = yamlinc.getBasePath()
+  const fullpath = path.join(basepath, data)
+
+  yamlinc.YAML_VISITED_FILES.push(fullpath.replace(basepath + path.sep, ''))
+
+  const src = fs.readFileSync(fullpath, 'utf8')
+  const included = yaml.load(src, {
+    schema: yamlinc.YAML_INCLUDE_SCHEMA,
+    filename: fullpath,
+  })
+
+  return included
+}
+
+function resolve(data: unknown): boolean {
+  return typeof data === 'string'
+}
+
+export default new yaml.Type('tag:yaml.org,2002:inc/file', {
+  kind: 'scalar',
+  resolve: resolve,
+  construct: construct,
+})

package/src/lib/yaml-include/index.ts

@@ -0,0 +1,28 @@
+import yaml from 'js-yaml'
+import path from 'path'
+
+// import YamlIncludeDirType from './lib/dir';
+import YamlIncludeFileType from './file.js'
+
+export const YAML_VISITED_FILES: string[] = []
+export const YAML_TYPES = [
+  // YamlIncludeDirType,
+  YamlIncludeFileType,
+]
+export const YAML_INCLUDE_SCHEMA = yaml.DEFAULT_SCHEMA.extend(YAML_TYPES)
+export let basefile = ''
+
+// so we know where to find files referenced relative to the base file
+export function setBaseFile(file: string): void {
+  YAML_VISITED_FILES.push(file)
+  basefile = file
+}
+
+export function getBasePath(): string {
+  return path.dirname(basefile)
+}
+
+export {
+  // YamlIncludeDirType,
+  YamlIncludeFileType,
+}

package/src/lib/yaml-parser.ts

@@ -1,8 +1,7 @@
 import fs from 'fs'
 import YAML from 'js-yaml'
 import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec'
-
-const yamlinc = require('yaml-include')
+import * as yamlinc from './yaml-include/index.js'
 
 interface StyleObject {
   [key: string]: string
@@ -10,10 +9,11 @@ interface StyleObject {
 
 export function parser(file: string): StyleSpecification {
   yamlinc.setBaseFile(file)
+  const schema = yamlinc.YAML_INCLUDE_SCHEMA
   const yaml = fs.readFileSync(file, 'utf8')
 
   const obj: StyleObject = YAML.load(yaml, {
-    schema: yamlinc.YAML_INCLUDE_SCHEMA,
+    schema,
     filename: file,
     json: true,
   }) as StyleObject

package/test/build-sprite.spec.ts

@@ -1,8 +1,13 @@
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
 import { assert } from 'chai'
 import path from 'path'
 import fs from 'fs'
 import os from 'os'
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
 import { buildSprite } from '../src/lib/build-sprite'
 const iconsPath = path.join(__dirname, 'data/icons')
 let tmpdir = ''

package/test/build.spec.ts

@@ -1,15 +1,19 @@
-import chai from 'chai'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+import * as chai from 'chai'
 import chaiAsPromised from 'chai-as-promised'
 import path from 'path'
 import fs from 'fs'
 import os from 'os'
 
 import { build, buildWatch } from '../src/commands/build'
-import { defaultValues } from '../src/lib/defaultValues'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 chai.use(chaiAsPromised)
 chai.should()
-const assert = chai.assert
+const assert: Chai.AssertStatic = chai.assert
 
 describe('Test for the `build.ts`.', () => {
   const styleYaml = path.join(__dirname, 'data/style.yml')
@@ -39,7 +43,7 @@ describe('Test for the `build.ts`.', () => {
   })
 
   it('Should convert `data/style.yml` to JSON.', async () => {
-    await build(styleYaml, styleJson, { provider: defaultValues.provider })
+    await build(styleYaml, styleJson, {})
 
     // The file should exists.
     assert.deepEqual(true, !!fs.statSync(styleJson))
@@ -53,7 +57,6 @@ describe('Test for the `build.ts`.', () => {
 
   it('Should minify `data/style.yml` to JSON.', async () => {
     await build(styleYaml, styleJson, {
-      provider: defaultValues.provider,
       compactOutput: true,
     })
 
@@ -67,7 +70,6 @@ describe('Test for the `build.ts`.', () => {
     const expectedUrl = 'http://localhost:8080/icons'
 
     await build(styleYaml, styleJson, {
-      provider: defaultValues.provider,
       spriteUrl: expectedUrl,
       spriteInput: iconSource,
       spriteOutput: tmpdir,
@@ -85,7 +87,6 @@ describe('Test for the `build.ts`.', () => {
     const expectedJson = path.join(tmpdir, `${expectedIconName}.json`)
 
     build(styleYaml, styleJson, {
-      provider: defaultValues.provider,
       spriteUrl: `http://localhost:8080/${expectedIconName}`,
       spriteInput: iconSource,
       spriteOutput: tmpdir,
@@ -101,7 +102,6 @@ describe('Test for the `build.ts`.', () => {
     const expectedJson = path.join(tmpdir, `${expectedIconName}.json`)
 
     build(styleYaml, styleJson, {
-      provider: defaultValues.provider,
       spriteInput: iconSource,
       spriteOutput: tmpdir,
     }).then(() => {
@@ -115,7 +115,6 @@ describe('Test for the `build.ts`.', () => {
     const noExistInputDir = path.join(__dirname, 'data/hellooooo')
 
     const promise = build(styleYaml, styleJson, {
-      provider: defaultValues.provider,
       spriteInput: noExistInputDir,
       spriteOutput: tmpdir,
     })
@@ -128,15 +127,13 @@ describe('Test for the `build.ts`.', () => {
   it('Should watch `*.yml` and convert it to JSON', async () => {
     const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms))
 
-    const watcher = buildWatch(styleYaml, styleJson, {
-      provider: defaultValues.provider,
-    })
+    const watcher = buildWatch(styleYaml, styleJson, {})
     await sleep(500)
     const yamlData1 = fs
       .readFileSync(styleYaml, 'utf-8')
       .replace('metadata: {}', 'metadata: aaa')
     fs.writeFileSync(styleYaml, yamlData1)
-    await sleep(500)
+    await sleep(1000)
     await watcher.close()
     assert.deepEqual(true, !!fs.statSync(styleJson))
     assert.deepEqual(

package/test/command.build.spec.ts

@@ -1,4 +1,4 @@
-import chai from 'chai'
+import * as chai from 'chai'
 import chaiAsPromised from 'chai-as-promised'
 import path from 'path'
 import fs from 'fs'
@@ -10,7 +10,7 @@ import charites from './util/charitesCmd'
 let tmpdir = ''
 chai.use(chaiAsPromised)
 chai.should()
-const assert = chai.assert
+const assert: Chai.AssertStatic = chai.assert
 
 describe('Test for the `charites build`', () => {
   beforeEach(async function () {

package/test/convert.spec.ts

@@ -6,6 +6,12 @@ import os from 'os'
 import { convert } from '../src/commands/convert'
 import { build } from '../src/commands/build'
 
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
 let tmp: string
 
 describe('Test for the `convert.ts`.', () => {
@@ -46,7 +52,7 @@ id: example
 
     const outJsonPath = path.join(tmp, 'converted-back.json')
     // This will throw an error if the outputted YAML was invalid
-    await build(yamlPath, outJsonPath, { provider: 'default' })
+    await build(yamlPath, outJsonPath, {})
     assert.isTrue(fs.existsSync(outJsonPath))
   })
 

package/test/get-sprite-slug.spec.ts

@@ -2,7 +2,11 @@ import { assert } from 'chai'
 import path from 'path'
 import fs from 'fs'
 import { getSpriteSlug } from '../src/lib/get-sprite-slug'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 const stylePath = path.join(__dirname, 'data/style.json')
 const styleJson = fs.readFileSync(stylePath, 'utf-8')
 

package/test/init.spec.ts

@@ -6,6 +6,11 @@ import YAML from 'js-yaml'
 
 import { init, initOptions } from '../src/commands/init'
 
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
 describe('Test for the `init.ts`.', () => {
   it('Should initialize default style.yml.', async () => {
     const tempStylePath = path.join(__dirname, 'data/init/init.yml')

package/test/playwright/provider/{default/e2e.spec.ts → e2e.spec.ts}

@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test'
+import { test, expect } from '@playwright/test/index.mjs'
 
-test('Charites Live Preview with maplibre', async ({ page }) => {
+test('Charites Live Preview', async ({ page }) => {
   // collect errors on the page
   const pageErrors: Error[] = []
   page.on('pageerror', (exception) => pageErrors.push(exception))

package/test/util/charitesCmd.ts

@@ -1,5 +1,10 @@
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
 import path from 'path'
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
 export const charitesCliJs = path.join(__dirname, '..', '..', 'dist', 'cli.js')
 
 export default `"${process.execPath}" "${charitesCliJs}"`

package/test/util/copyFixtures.ts

@@ -1,6 +1,11 @@
 import path from 'path'
 import fs from 'fs'
 import fse from 'fs-extra'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 export const copyFixturesFile = (file: string, destDir: string) => {
   fs.copyFileSync(

package/test/yaml-parser.spec.ts

@@ -2,7 +2,11 @@ import { assert } from 'chai'
 import path from 'path'
 
 import { parser } from '../src/lib/yaml-parser'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 describe('Test for the `yaml-parser.ts`.', () => {
   it('should parse `data/example.yml`.', () => {
     const yamlPath = path.join(__dirname, 'data/example.yml')

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2018",
+    "target": "ESNext",
     "declaration": false,
     "declarationMap": false,
     "sourceMap": false,
@@ -12,10 +12,15 @@
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
-    "module": "commonjs",
-    "outDir": "./dist"
+    "resolveJsonModule": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "baseUrl": ".",
+    "paths": {
+      "*": ["node_modules/*", "src/types/*"]
+    }
   },
-  "include": [
-    "src/cli.ts"
-  ]
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
 }

package/.eslintignore

@@ -1,2 +0,0 @@
-/node_modules/
-/dist

package/.eslintrc.js

@@ -1,17 +0,0 @@
-module.exports = {
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-  },
-  extends: [
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
-    'prettier',
-  ],
-  rules: {
-    '@typescript-eslint/explicit-module-boundary-types': 0,
-    '@typescript-eslint/ban-ts-comment': 0,
-    '@typescript-eslint/no-var-requires': 0,
-  },
-}

package/docs/source/usage/global_options.rst

@@ -1,21 +0,0 @@
-Global configuration
-====================
-
-Some options for Charites can be stored in a configuration file written in YAML.
-
-The config file will be automatically created to the following path the first time the charites command is executed.
-
-.. code-block:: bash
-
-    ~/.charites/config.yml
-
-
-Global options can be specified as follows:
-
-.. code-block:: bash
-
-    provider: mapbox
-    mapboxAccessToken: xxxx
-
-
-With the example above, you get the same result as `charites serve --provider mapbox --mapbox-access-token xxxx`.