@unvt/charites 0.1.1

package/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true

package/.github/workflows/build.yml

@@ -0,0 +1,50 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: build
+
+on:
+  push:
+    branches:
+      - main
+    tags: ['*']
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm test
+
+  publish:
+    name: 'Publish npm package'
+    runs-on: ubuntu-latest
+    needs: build
+    if: startsWith(github.ref, 'refs/tags/v')
+    steps:
+      - uses: actions/checkout@v2
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v1
+        with:
+          tag_name: 'v%s'
+          node-version: '14.x'
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@unvt'
+      - run: npm install
+      - run: npm run build
+      - run: npm publish --access=public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Geolonia Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,137 @@
+# Charites
+
+An easy, intuitive, and efficient command-line tool for writing vector map styles compatible with the [Mapbox](https://docs.mapbox.com/mapbox-gl-js/style-spec/) and [MapLibre](https://maplibre.org/maplibre-gl-js-docs/style-spec/) Style Specification in YAML.
+With YAML format's readability, JSON compiler, linter, and live style viewer on a local browser, you can simplify your map styling workflow.
+
+In Greek mythology, the [Charites](https://en.wikipedia.org/wiki/Charites) are the three goddesses of charm, beauty, and human creativity. They are believed to have been worshipped not only by artists but also by those who aspired to technology to infuse them with a creative spirit.
+
+## Features
+
+- Initiate a project from scratch, or convert an existing `style.json` file to generate YAML style files.
+- Write styles in a simple YAML format.
+- Divide groups of layers in to multiple files for better readability and mantainability. `!!inc/file <relative-path-to-the-file>`
+- Use variables like `$backgroundColor` and `$waterColor` to style effectively.
+- Compile YAML to a single style.json file, with a format linter.
+- Use `--provider mapbox` to validate your style against Mapbox GL JS v2.x
+- Run `charites serve <source>` to preview your style live while you make changes in a browser.
+
+Example: https://github.com/miya0001/style-template
+
+## Install
+
+```
+$ npm install -g @unvt/charites
+```
+
+Then try:
+
+```
+$ charites help
+```
+
+## Usage
+
+```
+$ charites help
+Usage: charites [options] [command]
+
+Options:
+  --provider [provider]                      your map service. e.g. `mapbox`, `geolonia`
+  --mapbox-access-token [mapboxAccessToken]  Access Token for the Mapbox
+  -h, --help                                 display help for command
+
+Commands:
+  init <file>                                initialize a style JSON
+  convert <source> [destination]             convert the style JSON to YAML
+  build [options] <source> [destination]     build a style JSON from the YAML
+  serve <source>                             serve your map locally
+  help [command]                             display help for command
+```
+
+## Global Options
+
+Charites has two global options that are common to all commands.
+
+- `--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.
+
+# Configuration
+
+The global 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.
+
+```
+~/.charites/config.yml
+```
+
+Global options can be specified as follows:
+
+
+```
+provider: mapbox
+mapboxAccessToken: xxxx
+```
+
+With the example above, you get the same result as `charites --provider mapbox --mapbox-access-token xxxx`.
+
+## Examples
+
+Build `style.json` from `style.yml`:
+
+```
+charites build style.yml style.json
+```
+
+Add `-c` or `--compact-output` to minify the JSON
+
+```
+charites build style.yml style.json -c
+```
+
+Convert `style.json` to `style.yml`:
+
+```
+charites convert style.json style.yml
+```
+
+Load JSON as a standard input to generate `style.yml`:
+
+```
+curl http://example.com/style.json | charites convert - style.yml
+```
+
+Launch a live preview of your map style in your local environment:
+
+```
+charites serve style.yml
+```
+
+For Mapbox users:
+
+```
+charites serve style.yml --provider mapbox --mapbox-access-token xxxx
+```
+
+## Contributing
+
+### Development
+
+```
+$ git clone https://github.com/geolonia/charites.git
+$ cd charites
+$ npm install
+$ npm run build
+$ npm install -g .
+```
+Then run:
+
+```
+$ charites help
+```
+
+## License
+
+MIT

package/dist/cli.js

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const fs_1 = __importDefault(require("fs"));
+const init_1 = require("./commands/init");
+const convert_1 = require("./commands/convert");
+const build_1 = require("./commands/build");
+const serve_1 = require("./commands/serve");
+const defaultValues_1 = require("./lib/defaultValues");
+const program = new commander_1.Command();
+const error = (message) => {
+    console.error(message.toString());
+    process.exit(1);
+};
+program
+    .option('--provider [provider]', 'your map service. e.g. `mapbox`, `geolonia`')
+    .option('--mapbox-access-token [mapboxAccessToken]', 'Access Token for the Mapbox');
+program
+    .command('init <file>')
+    .description('initialize a style JSON')
+    .action((file) => {
+    try {
+        init_1.init(file);
+    }
+    catch (e) {
+        error(e);
+    }
+});
+program
+    .command('convert <source> [destination]')
+    .description('convert the style JSON to YAML')
+    .action((source, destination) => {
+    try {
+        convert_1.convert(source, destination);
+    }
+    catch (e) {
+        error(e);
+    }
+});
+program
+    .command('build <source> [destination]')
+    .description('build a style JSON from the YAML')
+    .option('-c, --compact-output', 'build a minified style JSON')
+    .action((source, destination, buildOptions) => {
+    const options = program.opts();
+    options.compactOutput = buildOptions.compactOutput;
+    if (!fs_1.default.existsSync(defaultValues_1.defaultSettings.configFile)) {
+        fs_1.default.writeFileSync(defaultValues_1.defaultSettings.configFile, `provider: ${options.provider || 'default'}`);
+    }
+    try {
+        build_1.build(source, destination, options);
+    }
+    catch (e) {
+        error(e);
+    }
+});
+program
+    .command('serve <source>')
+    .description('serve your map locally')
+    .action((source) => {
+    const options = program.opts();
+    if (!fs_1.default.existsSync(defaultValues_1.defaultSettings.configFile)) {
+        fs_1.default.writeFileSync(defaultValues_1.defaultSettings.configFile, `provider: ${options.provider || 'default'}`);
+    }
+    try {
+        serve_1.serve(source, program.opts());
+    }
+    catch (e) {
+        error(e);
+    }
+});
+program.parse(process.argv);

package/dist/commands/build.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.build = void 0;
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const yaml_parser_1 = require("../lib/yaml-parser");
+const validate_style_1 = require("../lib/validate-style");
+const defaultValues_1 = require("../lib/defaultValues");
+const jsonminify_1 = __importDefault(require("jsonminify"));
+function build(source, destination, options) {
+    let sourcePath = path_1.default.resolve(process.cwd(), source);
+    // The `source` is absolute path.
+    if (source.match(/^\//)) {
+        sourcePath = source;
+    }
+    if (!fs_1.default.existsSync(sourcePath)) {
+        throw `${sourcePath}: No such file or directory`;
+    }
+    let destinationPath = "";
+    if (destination) {
+        if (destination.match(/^\//)) {
+            destinationPath = destination;
+        }
+        else {
+            destinationPath = path_1.default.resolve(process.cwd(), destination);
+        }
+    }
+    else {
+        destinationPath = path_1.default.join(path_1.default.dirname(sourcePath), `${path_1.default.basename(source, '.yml')}.json`);
+    }
+    let provider = defaultValues_1.defaultValues.provider;
+    if (options.provider) {
+        provider = options.provider;
+    }
+    let style = '';
+    try {
+        const _style = yaml_parser_1.parser(sourcePath);
+        validate_style_1.validateStyle(_style, provider);
+        style = JSON.stringify(_style, null, '  ');
+        if (options.compactOutput) {
+            style = jsonminify_1.default(style);
+        }
+    }
+    catch (err) {
+        if (err) {
+            throw err;
+        }
+        else {
+            throw `${sourcePath}: Invalid YAML syntax`;
+        }
+    }
+    try {
+        fs_1.default.writeFileSync(destinationPath, style);
+    }
+    catch (err) {
+        throw `${destinationPath}: Permission denied`;
+    }
+}
+exports.build = build;

package/dist/commands/convert.js

@@ -0,0 +1,89 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convert = void 0;
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const js_yaml_1 = __importDefault(require("js-yaml"));
+const readline_1 = __importDefault(require("readline"));
+// TODO: Type of style should be loaded from maplibre or mapbox style spec.
+const writeYaml = (destinationPath, style) => {
+    const layers = [];
+    for (let i = 0; i < style.layers.length; i++) {
+        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);
+        layers.push(`!!inc/file ${path_1.default.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) {
+        return match.replace(/'/g, '');
+    }));
+};
+const getDestinationPath = (destination, sourcePath = '') => {
+    let destinationPath;
+    if (destination) {
+        if (destination.match(/^\//)) {
+            destinationPath = destination;
+        }
+        else {
+            destinationPath = path_1.default.resolve(process.cwd(), destination);
+        }
+    }
+    else {
+        if (sourcePath) {
+            destinationPath = path_1.default.join(path_1.default.dirname(sourcePath), `${path_1.default.basename(sourcePath, '.json')}.yml`);
+        }
+        else {
+            destinationPath = path_1.default.join(process.cwd(), 'style.yml');
+        }
+    }
+    return destinationPath;
+};
+function convert(source, destination) {
+    let style, sourcePath;
+    if ('-' === source) {
+        const rl = readline_1.default.createInterface({
+            input: process.stdin,
+            terminal: false
+        });
+        const lines = [];
+        rl.on("line", (line) => {
+            lines.push(line);
+        });
+        rl.on("close", () => {
+            const style = JSON.parse(lines.join(''));
+            const destinationPath = getDestinationPath(destination);
+            try {
+                writeYaml(destinationPath, style);
+            }
+            catch (err) {
+                throw `${destinationPath}: Permission denied`;
+            }
+        });
+    }
+    else {
+        sourcePath = path_1.default.resolve(process.cwd(), source);
+        // The `source` is absolute path.
+        if (source.match(/^\//)) {
+            sourcePath = source;
+        }
+        if (!fs_1.default.existsSync(sourcePath)) {
+            throw `${sourcePath}: No such file or directory`;
+        }
+        style = JSON.parse(fs_1.default.readFileSync(sourcePath, 'utf-8'));
+        const destinationPath = getDestinationPath(destination, sourcePath);
+        try {
+            writeYaml(destinationPath, style);
+        }
+        catch (err) {
+            throw `${destinationPath}: Permission denied`;
+        }
+    }
+}
+exports.convert = convert;

package/dist/commands/init.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.init = void 0;
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const js_yaml_1 = __importDefault(require("js-yaml"));
+// TODO: We need type definition for style.
+const styleRoot = {
+    version: 8,
+    name: "My Style",
+    sprite: "",
+    glyphs: "",
+    sources: {},
+    layers: []
+};
+function init(file) {
+    const styleYAML = js_yaml_1.default.dump(styleRoot);
+    let stylePath = path_1.default.resolve(process.cwd(), file);
+    // The `source` is absolute path.
+    if (file.match(/^\//)) {
+        stylePath = file;
+    }
+    try {
+        fs_1.default.writeFileSync(stylePath, styleYAML);
+    }
+    catch (err) {
+        throw `${stylePath}: Permission denied`;
+    }
+}
+exports.init = init;

package/dist/commands/serve.js

@@ -0,0 +1,100 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serve = void 0;
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const http_1 = __importDefault(require("http"));
+const open_1 = __importDefault(require("open"));
+const ws_1 = require("ws");
+const node_watch_1 = __importDefault(require("node-watch"));
+const yaml_parser_1 = require("../lib/yaml-parser");
+const validate_style_1 = require("../lib/validate-style");
+const defaultValues_1 = require("../lib/defaultValues");
+function serve(source, options) {
+    const port = process.env.PORT || 8080;
+    let sourcePath = path_1.default.resolve(process.cwd(), source);
+    let provider = defaultValues_1.defaultValues.provider;
+    if (options.provider) {
+        provider = options.provider;
+    }
+    // The `source` is absolute path.
+    if (source.match(/^\//)) {
+        sourcePath = source;
+    }
+    if (!fs_1.default.existsSync(sourcePath)) {
+        throw `${sourcePath}: No such file or directory`;
+    }
+    const server = http_1.default.createServer((req, res) => {
+        const url = (req.url || '').replace(/\?.*/, '');
+        const dir = 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');
+                res.end(content);
+                break;
+            case '/style.json':
+                const style = yaml_parser_1.parser(sourcePath);
+                try {
+                    validate_style_1.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_1.default.readFileSync(path_1.default.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_1.default.readFileSync(path_1.default.join(dir, 'app.js'), 'utf-8');
+                    const js = app.replace('___PORT___', `${port}`)
+                        .replace('___MAPBOX_ACCESS_TOKEN___', `${options.mapboxAccessToken || defaultValues_1.defaultValues.mapboxAccessToken}`);
+                    res.end(js);
+                }
+                catch (e) {
+                    throw `Invalid provider: ${provider}`;
+                }
+                break;
+        }
+    });
+    server.listen(port, () => {
+        console.log(`Provider: ${provider}`);
+        console.log(`Loading your style: ${sourcePath}`);
+        console.log(`Your map is running on http://localhost:${port}/\n`);
+        open_1.default(`http://localhost:${port}`);
+    });
+    const wss = new ws_1.WebSocketServer({ server });
+    wss.on('connection', (ws) => {
+        node_watch_1.default(path_1.default.dirname(sourcePath), { recursive: true, filter: /\.yml$/ }, (event, file) => {
+            console.log(`${(event || '').toUpperCase()}: ${file}`);
+            try {
+                const style = yaml_parser_1.parser(sourcePath);
+                try {
+                    validate_style_1.validateStyle(style, provider);
+                }
+                catch (error) {
+                    console.log(error);
+                }
+                ws.send(JSON.stringify(style));
+            }
+            catch (e) {
+                // Nothing to do
+            }
+        });
+    });
+    return server;
+}
+exports.serve = serve;

package/dist/lib/defaultValues.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultSettings = exports.defaultValues = void 0;
+const path_1 = __importDefault(require("path"));
+const os_1 = __importDefault(require("os"));
+const fs_1 = __importDefault(require("fs"));
+const js_yaml_1 = __importDefault(require("js-yaml"));
+const homedir = os_1.default.homedir();
+const defaultProvider = "default";
+const configDir = path_1.default.join(homedir, '.charites');
+fs_1.default.mkdirSync(configDir, { recursive: true });
+const configFile = path_1.default.join(configDir, 'config.yml');
+let config = { provider: '', providerDir: '', mapboxAccessToken: '' };
+try {
+    const yaml = fs_1.default.readFileSync(configFile, 'utf-8');
+    config = js_yaml_1.default.load(yaml);
+}
+catch (e) {
+    // nothing to do
+}
+exports.defaultValues = {
+    provider: config.provider || defaultProvider,
+    providerDir: path_1.default.join(path_1.default.dirname(path_1.default.dirname(__dirname)), 'provider'),
+    mapboxAccessToken: config.mapboxAccessToken || ''
+};
+exports.defaultSettings = {
+    configFile: configFile
+};

package/dist/lib/validate-style.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateStyle = void 0;
+const maplibreStyleSpec = require('@maplibre/maplibre-gl-style-spec');
+const mapboxStyleSpec = require('@mapbox/mapbox-gl-style-spec');
+function validateStyle(style, provider = "default") {
+    let result = [];
+    if ('mapbox' === provider) {
+        result = mapboxStyleSpec.validate(style);
+    }
+    else {
+        result = maplibreStyleSpec.validate(style);
+    }
+    const errors = [];
+    for (let i = 0; i < result.length; i++) {
+        if (result[i].message) {
+            errors.push(result[i].message);
+        }
+    }
+    if (errors.length) {
+        throw `\u001b[31mError:\u001b[0m ${errors.join("\n\u001b[31mError:\u001b[0m ")}`;
+    }
+}
+exports.validateStyle = validateStyle;

package/dist/lib/yaml-parser.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parser = void 0;
+const fs_1 = __importDefault(require("fs"));
+const js_yaml_1 = __importDefault(require("js-yaml"));
+const yamlinc = require('yaml-include');
+function parser(file) {
+    yamlinc.setBaseFile(file);
+    const yaml = fs_1.default.readFileSync(file, 'utf8');
+    const obj = js_yaml_1.default.load(yaml, {
+        schema: yamlinc.YAML_INCLUDE_SCHEMA,
+        filename: file,
+        json: true
+    });
+    const styleObj = {};
+    let variables = {};
+    for (const key in obj) {
+        if (key.match(/^\$/)) {
+            variables[key] = obj[key];
+        }
+        else {
+            styleObj[key] = obj[key];
+        }
+    }
+    // Handle all nested variables.
+    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');
+                _value = _value.replace(regex, JSON.stringify(variables[variable]));
+                variables[key] = JSON.parse(_value);
+            }
+        }
+    }
+    let style = JSON.stringify(styleObj);
+    for (const key in variables) {
+        const regex = new RegExp(`\"\\${key}\"`, 'g');
+        style = style.replace(regex, JSON.stringify(variables[key]));
+    }
+    return JSON.parse(style);
+}
+exports.parser = parser;