@unvt/charites 0.1.2 → 0.1.3

package/src/commands/serve.ts

@@ -9,12 +9,12 @@ import { parser } from '../lib/yaml-parser'
 import { validateStyle } from '../lib/validate-style'
 import { defaultValues } from '../lib/defaultValues'
 
-interface options {
+export interface serveOptions {
   provider?: string
   mapboxAccessToken?: string
 }
 
-export function serve(source: string, options: options) {
+export function serve(source: string, options: serveOptions) {
   const port = process.env.PORT || 8080
   let sourcePath = path.resolve(process.cwd(), source)
 
@@ -28,52 +28,56 @@ export function serve(source: string, options: options) {
     sourcePath = source
   }
 
-  if (! fs.existsSync(sourcePath)) {
+  if (!fs.existsSync(sourcePath)) {
     throw `${sourcePath}: No such file or directory`
   }
 
   const server = http.createServer((req, res) => {
-      const url = (req.url || '').replace(/\?.*/, '')
-      const dir = path.join(defaultValues.providerDir, provider)
+    const url = (req.url || '').replace(/\?.*/, '')
+    const dir = 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')
-          res.end(content)
-          break;
-        case '/style.json':
-          let style
-          try {
-            style = parser(sourcePath)
-            validateStyle(style, provider)
-          } catch(error) {
-            console.log(error)
-          }
-          res.statusCode = 200
-          res.setHeader('Content-Type', 'application/json; charset=UTF-8')
-          res.end(JSON.stringify(style))
-          break;
-        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')
-          res.end(css)
-          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 js = app.replace('___PORT___', `${port}`)
-              .replace('___MAPBOX_ACCESS_TOKEN___', `${options.mapboxAccessToken || defaultValues.mapboxAccessToken}`)
-            res.end(js)
-          } catch(e) {
-            throw `Invalid provider: ${provider}`
-          }
-          break;
-      }
+    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')
+        res.end(content)
+        break
+      case '/style.json':
+        let style
+        try {
+          style = parser(sourcePath)
+          validateStyle(style, provider)
+        } catch (error) {
+          console.log(error)
+        }
+        res.statusCode = 200
+        res.setHeader('Content-Type', 'application/json; charset=UTF-8')
+        res.end(JSON.stringify(style))
+        break
+      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')
+        res.end(css)
+        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 js = app
+            .replace('___PORT___', `${port}`)
+            .replace(
+              '___MAPBOX_ACCESS_TOKEN___',
+              `${options.mapboxAccessToken || defaultValues.mapboxAccessToken}`,
+            )
+          res.end(js)
+        } catch (e) {
+          throw `Invalid provider: ${provider}`
+        }
+        break
+    }
   })
 
   server.listen(port, () => {
@@ -83,24 +87,28 @@ export function serve(source: string, options: options) {
     open(`http://localhost:${port}`)
   })
 
-  const wss = new WebSocketServer({ server });
+  const wss = new WebSocketServer({ server })
 
   wss.on('connection', (ws) => {
-    watch(path.dirname(sourcePath), { recursive: true, filter: /\.yml$/ }, (event, file) => {
-      console.log(`${(event || '').toUpperCase()}: ${file}`)
-      try {
-        const style = parser(sourcePath)
+    watch(
+      path.dirname(sourcePath),
+      { recursive: true, filter: /\.yml$/ },
+      (event, file) => {
+        console.log(`${(event || '').toUpperCase()}: ${file}`)
         try {
-          validateStyle(style, provider)
-        } catch(error) {
-          console.log(error)
+          const style = parser(sourcePath)
+          try {
+            validateStyle(style, provider)
+          } catch (error) {
+            console.log(error)
+          }
+          ws.send(JSON.stringify(style))
+        } catch (e) {
+          // Nothing to do
         }
-        ws.send(JSON.stringify(style))
-      } catch(e) {
-        // Nothing to do
-      }
-    })
-  });
+      },
+    )
+  })
 
   return server
 }

package/src/lib/build-sprite.ts

@@ -0,0 +1,80 @@
+const spritezero = require('@mapbox/spritezero')
+const fs = require('fs')
+const glob = require('glob')
+const path = require('path')
+
+type spriteOption = {
+  imgs: string
+  pixelRatio: number
+  format: boolean
+}
+
+function generateLayoutAsync(option: spriteOption): Promise<string> {
+  return new Promise((resolve, reject) => {
+    spritezero.generateLayout(option, (err: TypeError, result: string) => {
+      if (err) reject(err)
+      else resolve(result)
+    })
+  })
+}
+
+function generateImageAsync(option: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    spritezero.generateImage(option, (err: TypeError, result: string) => {
+      if (err) reject(err)
+      else resolve(result)
+    })
+  })
+}
+
+export async function buildSprite(
+  svgPath: string,
+  publicPath: string,
+  iconSlug: string,
+) {
+  const pxRatios = [1, 2]
+
+  for (let i = 0; i < pxRatios.length; i++) {
+    const pxRatio = pxRatios[i]
+
+    const svgFiles = glob
+      .sync(path.join(svgPath, `*.svg`))
+      .map(function (iconPath: string) {
+        return {
+          svg: fs.readFileSync(iconPath),
+          id: path.basename(iconPath).replace('.svg', ''),
+        }
+      })
+
+    let file = ''
+    if (pxRatio > 1) {
+      file = `@${pxRatio}x`
+    }
+
+    const pngPath = path.join(publicPath, `${iconSlug}${file}.png`)
+    const jsonPath = path.join(publicPath, `${iconSlug}${file}.json`)
+
+    try {
+      const dataLayout = await generateLayoutAsync({
+        imgs: svgFiles,
+        pixelRatio: pxRatio,
+        format: true,
+      })
+      fs.writeFileSync(jsonPath, JSON.stringify(dataLayout))
+    } catch (error) {
+      throw `${publicPath}: No such file or directory`
+    }
+
+    try {
+      const imageLayout = await generateLayoutAsync({
+        imgs: svgFiles,
+        pixelRatio: pxRatio,
+        format: false,
+      })
+      const image = await generateImageAsync(imageLayout)
+      fs.writeFileSync(pngPath, image)
+    } catch (error) {
+      throw `${publicPath}: No such file or directory`
+    }
+  }
+}

package/src/lib/defaultValues.ts

@@ -10,27 +10,27 @@ interface Config {
 }
 
 const homedir = os.homedir()
-const defaultProvider = "default"
+const defaultProvider = 'default'
 
 const configDir = path.join(homedir, '.charites')
-fs.mkdirSync(configDir, { recursive: true });
+fs.mkdirSync(configDir, { recursive: true })
 
 const configFile = path.join(configDir, 'config.yml')
-let config: Config = {provider: '', providerDir: '', mapboxAccessToken: ''}
+let config: Config = { provider: '', providerDir: '', mapboxAccessToken: '' }
 
 try {
   const yaml = fs.readFileSync(configFile, 'utf-8')
   config = YAML.load(yaml) as Config
-} catch(e) {
+} 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 || ''
+  mapboxAccessToken: config.mapboxAccessToken || '',
 }
 
 export const defaultSettings = {
-  configFile: configFile
+  configFile: configFile,
 }

package/src/lib/error.ts

@@ -0,0 +1,6 @@
+export const error = (e: unknown) => {
+  if (e instanceof TypeError) {
+    console.error(e.message)
+  }
+  process.exit(1)
+}

package/src/lib/get-sprite-slug.ts

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

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

@@ -0,0 +1,57 @@
+import { VectorLayer } from '../../types'
+import {
+  StyleSpecification,
+  SourceSpecification,
+  LayerSpecification,
+  VectorSourceSpecification,
+} from '@maplibre/maplibre-gl-style-spec/types'
+
+export type TileInfoJSONResponse = {
+  sources: { [key: string]: SourceSpecification | VectorSourceSpecification }
+  layers: LayerSpecification[]
+}
+
+export abstract class BaseImporter {
+  protected urls: string[]
+
+  constructor(original_urls: string) {
+    const temp_urls = original_urls + ''
+    this.urls = temp_urls.split(',')
+  }
+
+  abstract getJSON(url: string): Promise<TileInfoJSONResponse>
+
+  async import(style: StyleSpecification) {
+    if (this.urls.length === 0) return
+    const responses = await Promise.all(
+      this.urls.map((url) => this.getJSON(url)),
+    )
+    responses.forEach((res) => {
+      Object.keys(res.sources).forEach((sourceName) => {
+        style.sources[sourceName] = res.sources[sourceName]
+      })
+      if (res.layers.length > 0) {
+        style.layers = style.layers.concat(res.layers)
+      }
+    })
+    return style
+  }
+
+  protected getVectorLayers(name: string, vector_layers: VectorLayer[]) {
+    const layers: LayerSpecification[] = []
+    if (vector_layers) {
+      vector_layers.forEach((layer) => {
+        const layerStyle: LayerSpecification = {
+          id: layer.id,
+          type: 'fill',
+          source: name,
+          'source-layer': layer.id,
+          layout: {},
+          paint: {},
+        }
+        layers.push(layerStyle)
+      })
+    }
+    return layers
+  }
+}

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

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

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

@@ -0,0 +1,44 @@
+import axios from 'axios'
+import { MetadataJSON, VectorLayer } from '../../types'
+import {
+  LayerSpecification,
+  VectorSourceSpecification,
+} from '@maplibre/maplibre-gl-style-spec/types'
+import { BaseImporter, TileInfoJSONResponse } from './base-importer'
+
+export class MetadataJSONImporter extends BaseImporter {
+  async getJSON(url: string): Promise<TileInfoJSONResponse> {
+    const res = await axios.get(url)
+    const matadataJSON: MetadataJSON = res.data
+    const metadataName: string = matadataJSON.name
+      ? matadataJSON.name
+      : Math.random().toString(32).substring(2)
+
+    const sources: { [key: string]: VectorSourceSpecification } = {}
+    const urlSplited = url.split('/')
+    sources[metadataName] = {
+      type: 'vector',
+      tiles: [
+        url.replace(
+          new RegExp(urlSplited[urlSplited.length - 1], 'g'),
+          '{z}/{x}/{y}.pbf',
+        ),
+      ],
+    }
+    if (matadataJSON.minzoom) {
+      sources[metadataName].minzoom = matadataJSON.minzoom
+    }
+    if (matadataJSON.maxzoom) {
+      sources[metadataName].maxzoom = matadataJSON.maxzoom
+    }
+
+    let layers: LayerSpecification[] = []
+    if (matadataJSON.json) {
+      const vector_layers: VectorLayer[] = JSON.parse(
+        matadataJSON.json,
+      ).vector_layers
+      layers = this.getVectorLayers(metadataName, vector_layers)
+    }
+    return { sources, layers }
+  }
+}

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

@@ -0,0 +1,29 @@
+import axios from 'axios'
+import { TileJSON } from '../../types'
+import {
+  SourceSpecification,
+  LayerSpecification,
+} from '@maplibre/maplibre-gl-style-spec/types'
+import { BaseImporter, TileInfoJSONResponse } from './base-importer'
+
+export class TileJSONImporter extends BaseImporter {
+  async getJSON(url: string): Promise<TileInfoJSONResponse> {
+    const res = await axios.get(url)
+    const tilejson: TileJSON = res.data
+    const tilesetName: string = tilejson.name
+      ? tilejson.name
+      : Math.random().toString(32).substring(2)
+
+    const sources: { [key: string]: SourceSpecification } = {}
+    sources[tilesetName] = {
+      type: 'vector',
+      url: url,
+    }
+
+    const layers: LayerSpecification[] = this.getVectorLayers(
+      tilesetName,
+      tilejson.vector_layers,
+    )
+    return { sources, layers }
+  }
+}

package/src/lib/validate-style.ts

@@ -1,7 +1,11 @@
 const maplibreStyleSpec = require('@maplibre/maplibre-gl-style-spec')
 const mapboxStyleSpec = require('@mapbox/mapbox-gl-style-spec')
+import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec/types'
 
-export function validateStyle(style: object, provider: string = "default"): void {
+export function validateStyle(
+  style: StyleSpecification,
+  provider = 'default',
+): void {
   let result = []
   if ('mapbox' === provider) {
     result = mapboxStyleSpec.validate(style)
@@ -17,6 +21,8 @@ export function validateStyle(style: object, provider: string = "default"): void
   }
 
   if (errors.length) {
-    throw `\u001b[31mError:\u001b[0m ${errors.join("\n\u001b[31mError:\u001b[0m ")}`
+    throw `\u001b[31mError:\u001b[0m ${errors.join(
+      '\n\u001b[31mError:\u001b[0m ',
+    )}`
   }
 }

package/src/lib/yaml-parser.ts

@@ -1,26 +1,27 @@
 import fs from 'fs'
 import YAML from 'js-yaml'
+import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec/types'
 
 const yamlinc = require('yaml-include')
 
 interface StyleObject {
-  [key: string]: any;
+  [key: string]: string
 }
 
-export function parser(file: string): object {
+export function parser(file: string): StyleSpecification {
   yamlinc.setBaseFile(file)
   const yaml = fs.readFileSync(file, 'utf8')
 
   const obj: StyleObject = YAML.load(yaml, {
     schema: yamlinc.YAML_INCLUDE_SCHEMA,
     filename: file,
-    json: true
+    json: true,
   }) as StyleObject
 
   const styleObj: StyleObject = {}
-  let variables: StyleObject = {}
+  const variables: StyleObject = {}
 
-  for (const key in obj as any) {
+  for (const key in obj) {
     if (key.match(/^\$/)) {
       variables[key] = obj[key]
     } else {
@@ -29,8 +30,8 @@ export function parser(file: string): object {
   }
 
   // Handle all nested variables.
-  while(JSON.stringify(Object.values(variables)).match(/\$/)) {
-    for (const key in variables as any) {
+  while (JSON.stringify(Object.values(variables)).match(/\$/)) {
+    for (const key in variables) {
       for (const variable in variables) {
         let _value = JSON.stringify(variables[key])
         const regex = new RegExp(`\"\\${variable}\"`, 'g')
@@ -40,7 +41,7 @@ export function parser(file: string): object {
     }
   }
 
-  let style = JSON.stringify(styleObj)
+  let style: string = JSON.stringify(styleObj)
 
   for (const key in variables) {
     const regex = new RegExp(`\"\\${key}\"`, 'g')

package/src/lib/yaml-writer.ts

@@ -0,0 +1,68 @@
+import path from 'path'
+import fs from 'fs'
+import YAML from 'js-yaml'
+import {
+  StyleSpecification,
+  LayerSpecification,
+} from '@maplibre/maplibre-gl-style-spec/types'
+
+export const writeYaml = (
+  destinationPath: string,
+  style: StyleSpecification,
+  composite = false,
+) => {
+  if (composite === true) {
+    writeCompositedYaml(destinationPath, style)
+  } else {
+    writeDecompositedYaml(destinationPath, style)
+  }
+}
+
+const writeCompositedYaml = (
+  destinationPath: string,
+  style: StyleSpecification,
+) => {
+  const styleYAML = YAML.dump(style)
+  let stylePath = path.resolve(process.cwd(), destinationPath)
+
+  // The `source` is absolute path.
+  if (destinationPath.match(/^\//)) {
+    stylePath = destinationPath
+  }
+
+  try {
+    fs.writeFileSync(stylePath, styleYAML)
+  } catch (err) {
+    throw `${stylePath}: Permission denied`
+  }
+}
+
+const writeDecompositedYaml = (
+  destinationPath: string,
+  style: StyleSpecification,
+) => {
+  const layers: LayerSpecification[] = []
+
+  for (let i = 0; i < style.layers.length; i++) {
+    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)
+    // @ts-ignore
+    layers.push(`!!inc/file ${path.join('layers', fileName)}`)
+  }
+
+  style.layers = layers
+
+  fs.writeFileSync(
+    destinationPath,
+    YAML.dump(style).replace(
+      /'\!\!inc\/file layers\/.+\.yml'/g,
+      function (match) {
+        return match.replace(/'/g, '')
+      },
+    ),
+  )
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './tilejson'
+export * from './metadatajson'
+export * from './vector_layers'

package/src/types/metadatajson.ts

@@ -0,0 +1,16 @@
+/**
+ * Definition of metadata.json
+ */
+export type MetadataJSON = {
+  name?: string
+  description?: string
+  version?: string
+  minzoom?: number
+  maxzoom?: number
+  center?: number[]
+  bounds?: number[]
+  type?: string
+  format: string
+  generator?: string
+  json?: string
+}

package/src/types/tilejson.ts

@@ -0,0 +1,25 @@
+import { VectorLayer } from './vector_layers'
+
+/**
+ * Definition of TileJSON v3.0.0
+ * see https://github.com/mapbox/tilejson-spec/blob/master/3.0.0/schema.json
+ */
+export type TileJSON = {
+  tilejson: string
+  tiles: string[]
+  vector_layers: VectorLayer[]
+  attribution?: string
+  bounds?: number[]
+  center?: number[]
+  data?: string[]
+  description?: string
+  fillzoom?: number
+  grids?: string[]
+  legend?: string
+  maxzoom?: number
+  minzoom?: number
+  name?: string
+  scheme?: string
+  template?: string
+  version?: string
+}

package/src/types/vector_layers.ts

@@ -0,0 +1,11 @@
+/**
+ * Definition of vector_layers object
+ * see https://github.com/mapbox/tilejson-spec/blob/master/3.0.0/schema.json
+ */
+export type VectorLayer = {
+  id: string
+  fields: { [key: string]: string }
+  description: string
+  maxzoom: string
+  minzoom: string
+}

package/test/build-sprite.spec.ts

@@ -0,0 +1,24 @@
+import { assert } from 'chai'
+import path from 'path'
+import fs from 'fs'
+import os from 'os'
+
+import { buildSprite } from '../src/lib/build-sprite'
+const iconsPath = path.join(__dirname, 'data/icons')
+let tmpdir = ''
+
+describe('Test for the `build-sprite.ts`.', () => {
+  beforeEach(function () {
+    tmpdir = fs.mkdtempSync(path.join(os.tmpdir(), 'charites-'))
+  })
+
+  it("should create icon's json/png at specified path and name ", async () => {
+    const expectedJsonPath = path.join(tmpdir, 'basic.json')
+    const expectedPngPath = path.join(tmpdir, 'basic.png')
+
+    await buildSprite(iconsPath, tmpdir, `basic`)
+
+    assert.deepEqual(true, !!fs.statSync(expectedJsonPath))
+    assert.deepEqual(true, !!fs.statSync(expectedPngPath))
+  })
+})