Add --watch option to charites build command (#91)

* Add `--watch` option to `charites build` command

* update docs

* add test for buildWatch

* remove console.log

* check metadata changed aaa

docs/source/usage/commandline_interface.rst

@@ -26,7 +26,7 @@ Inititalize `style.yml`
 
 .. code-block:: bash
 
-    $ charites init -h  
+    $ charites init -h
     Usage: charites init [options] <file>
 
     initialize a style JSON
@@ -65,6 +65,7 @@ Build `style.json` from `style.yml`
 
     Options:
     -c, --compact-output                           build a minified style JSON
+    -w, --watch                                    watch YAML and build when changed
     -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
@@ -77,7 +78,7 @@ Realtime editor on browser
 --------------------------
 
 .. code-block:: bash
-    
+
     charites serve -h
     Usage: charites serve [options] <source>
 
@@ -94,5 +95,5 @@ Charites has two options for `serve` command.
 
   - `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.

src/cli/build.ts

@@ -1,5 +1,5 @@
 import { Command } from 'commander'
-import { build, buildOptions } from '../commands/build'
+import { build, buildOptions, buildWatch } from '../commands/build'
 import { error } from '../lib/error'
 import { defaultSettings } from '../lib/defaultValues'
 import fs from 'fs'
@@ -11,6 +11,7 @@ program
   .arguments('<source> [destination]')
   .description('build a style JSON from the YAML')
   .option('-c, --compact-output', 'build a minified style JSON')
+  .option('-w, --watch', 'watch YAML and build when changed')
   .option(
     '-u, --sprite-url [<sprite url>]',
     'url to set as the sprite in style.json',
@@ -49,10 +50,26 @@ program
           `provider: ${options.provider || 'default'}`,
         )
       }
-      try {
-        await build(source, destination, options)
-      } catch (e) {
-        error(e)
+
+      if (buildOptions.watch) {
+        try {
+          console.log('Start watching...')
+          await new Promise((resolve) => {
+            const watcher = buildWatch(source, destination, options)
+            process.on('SIGINT', () => {
+              watcher.close()
+              resolve(undefined)
+            })
+          })
+        } catch (e) {
+          error(e)
+        }
+      } else {
+        try {
+          await build(source, destination, options)
+        } catch (e) {
+          error(e)
+        }
       }
     },
   )

src/commands/build.ts

@@ -7,10 +7,12 @@ import { getSpriteSlug } from '../lib/get-sprite-slug'
 import { defaultValues } from '../lib/defaultValues'
 import jsonminify from 'jsonminify'
 import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec/types'
+import watch from 'node-watch'
 
 export interface buildOptions {
   provider?: string
   compactOutput?: boolean
+  watch?: boolean
   spriteUrl?: string
   spriteInput?: string
   spriteOutput?: string
@@ -98,3 +100,27 @@ export async function build(
     throw `${destinationPath}: Permission denied`
   }
 }
+
+export function buildWatch(
+  source: string,
+  destination: string,
+  options: buildOptions,
+) {
+  let sourcePath = path.resolve(process.cwd(), source)
+  if (source.match(/^\//)) {
+    sourcePath = source
+  }
+  console.log(path.dirname(sourcePath))
+  return watch(
+    path.dirname(sourcePath),
+    { recursive: true, filter: /\.yml$/ },
+    (event, file) => {
+      console.log(`${(event || '').toUpperCase()}: ${file}`)
+      try {
+        build(source, destination, options)
+      } catch (e) {
+        // Nothing to do
+      }
+    },
+  )
+}

test/build.spec.ts

@@ -3,7 +3,7 @@ import path from 'path'
 import fs from 'fs'
 import os from 'os'
 
-import { build } from '../src/commands/build'
+import { build, buildWatch } from '../src/commands/build'
 import { defaultValues } from '../src/lib/defaultValues'
 
 describe('Test for the `build.ts`.', () => {
@@ -114,4 +114,28 @@ describe('Test for the `build.ts`.', () => {
       assert.deepEqual(true, !!error) // It should have something error.
     }
   })
+
+  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,
+    })
+    await sleep(500)
+    const yamlData1 = fs
+      .readFileSync(styleYaml, 'utf-8')
+      .replace('metadata: {}', 'metadata: aaa')
+    fs.writeFileSync(styleYaml, yamlData1)
+    await sleep(500)
+    await watcher.close()
+    assert.deepEqual(true, !!fs.statSync(styleJson))
+    assert.deepEqual(
+      'aaa',
+      JSON.parse(fs.readFileSync(styleJson, 'utf-8')).metadata,
+    )
+    const yamlData2 = fs
+      .readFileSync(styleYaml, 'utf-8')
+      .replace('metadata: aaa', 'metadata: {}')
+    fs.writeFileSync(styleYaml, yamlData2)
+  })
 })