Ship browser sync as a built in web server

BREAKING-CHANGE: if you don't want file serving (previous behavior), you must pass a --watch-only flag.

README.md

@@ -25,10 +25,12 @@ Usage: siteup [options]
 
     --src, -s             path to source directory (default: "src")
     --dest, -d            path to build destination directory (default: "public")
-    --watch, -w           build and watch the src folder for additional changes
+    --ignore, -i          comma separated gitignore style ignore string
+    --watch, -w           build, watch and serve the site build
+    --watch-only          watch and build the src folder without serving
     --help, -h            show help
     --version, -v         show version information
-siteup (v0.0.11)
+siteup (v5.0.0)
 ```
 
 `siteup` builds a `src` directory into a `dest` directory (default: `public`).

bin.js

@@ -50,9 +50,14 @@ const clopts = cliclopts([
   {
     name: 'watch',
     abbr: 'w',
-    help: 'build and watch the src folder for additional changes',
+    help: 'build, watch and serve the site build',
     Boolean: true
   },
+  {
+    name: 'watch-only',
+    help: 'watch and build the src folder without serving',
+    Boolean: false
+  },
   {
     name: 'help',
     abbr: 'h',
@@ -104,11 +109,11 @@ async function run () {
       console.log(results)
       console.log('watching stopped')
     }
-    console.log('quitting cleanly')
+    console.log('\nquitting cleanly')
     process.exit(0)
   }
 
-  if (!argv['watch']) {
+  if (!argv['watch'] && !argv['watch-only']) {
     try {
       const results = await siteup.build()
       console.log(tree(generateTreeData(cwd, src, dest, results)))
@@ -139,7 +144,9 @@ async function run () {
       process.exit(1)
     }
   } else {
-    const initialResults = await siteup.watch()
+    const initialResults = await siteup.watch({
+      serve: !argv['watch-only']
+    })
     console.log(tree(generateTreeData(cwd, src, dest, initialResults)))
     if (initialResults?.warnings?.length > 0) {
       console.log(

index.js

@@ -8,6 +8,7 @@ import ignoreExport from 'ignore'
 // @ts-ignore
 import cpx from 'cpx2'
 import { inspect } from 'util'
+import browserSync from 'browser-sync'
 
 import { getCopyGlob } from './lib/build-static/index.js'
 import { builder } from './lib/builder.js'
@@ -55,6 +56,7 @@ export class Siteup {
   /** @type {SiteupOpts} */ opts = {}
   /** @type {chokidar.FSWatcher?} */ #watcher = null
   /** @type {any?} */ #cpxWatcher = null
+  /** @type {browserSync.BrowserSyncInstance?} */ #browserSyncServer = null
 
   /**
    *
@@ -84,7 +86,17 @@ export class Siteup {
     return builder(this.#src, this.#dest, { static: true, ...this.opts })
   }
 
-  async watch () {
+  /**
+   * Build and watch a siteup build
+   * @param  {object} [params]
+   * @param  {boolean} params.serve
+   * @return {Promise<Results>}
+   */
+  async watch ({
+    serve
+  } = {
+    serve: true
+  }) {
     if (this.watching) throw new Error('Already watching.')
 
     /** @type Results */
@@ -100,6 +112,14 @@ export class Siteup {
     }
 
     this.#cpxWatcher = cpx.watch(getCopyGlob(this.#src), this.#dest, { ignore: this.opts.ignore })
+    if (serve) {
+      const bs = browserSync.create()
+      this.#browserSyncServer = bs
+      bs.watch('*').on('change', bs.reload)
+      bs.init({
+        server: this.#dest
+      })
+    }
 
     this.#cpxWatcher.on('watch-ready', () => {
       console.log('Copy watcher ready')
@@ -161,6 +181,8 @@ export class Siteup {
     this.#cpxWatcher.close()
     this.#watcher = null
     this.#cpxWatcher = null
+    this.#browserSyncServer?.exit() // This will kill the process
+    this.#browserSyncServer = null
   }
 }
 

lib/helpers/ensure-dest.js

@@ -1,6 +1,9 @@
-import { mkdir } from 'fs/promises'
-import { join } from 'path'
+import { mkdir } from 'node:fs/promises'
+import { join } from 'node:path'
+import { cpus } from 'node:os'
+import pMap from 'p-map'
 
+const MAX_CONCURRENCY = Math.min(cpus().length, 24)
 /**
  * @typedef {import('../builder.js').SiteData} SiteData
  */
@@ -17,7 +20,11 @@ import { join } from 'path'
 export async function ensureDest (dest, siteData) {
   await mkdir(dest, { recursive: true })
 
-  for (const page of siteData.pages) {
+  await pMap(siteData.pages, async (page) => {
     await mkdir(join(dest, page.path), { recursive: true })
-  }
+  }, { concurrency: MAX_CONCURRENCY })
+
+  await pMap(siteData.templates, async (template) => {
+    await mkdir(join(dest, template.path), { recursive: true })
+  }, { concurrency: MAX_CONCURRENCY })
 }

lib/helpers/key-by.js

@@ -42,9 +42,7 @@ export function keyByFn (array, fn) {
 }
 
 /**
- * This is a merged JSDoc comment that provides hints about the possible
- * function signatures. The TypeScript checker will use this to infer
- * the appropriate type based on how the function is called.
+ * Key an array of objects by string key or key function. Similar to lodash.keyBy, but simpler
  *
  * @template T
  * @param {T[]} array

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "async-folder-walker": "^3.0.1",
+    "browser-sync": "^2.26.7",
     "cheerio": "^1.0.0-rc.10",
     "chokidar": "^3.5.2",
     "clean-deep": "^3.4.0",
@@ -48,6 +49,7 @@
     "uhtml-isomorphic": "^2.0.0"
   },
   "devDependencies": {
+    "@types/browser-sync": "^2.27.3",
     "@types/js-yaml": "^4.0.8",
     "@types/markdown-it": "^13.0.5",
     "@types/markdown-it-emoji": "^2.0.3",
@@ -56,7 +58,6 @@
     "@types/node": "^20.8.4",
     "@voxpelli/tsconfig": "^9.0.0",
     "auto-changelog": "^2.0.0",
-    "browser-sync": "^2.26.7",
     "dependency-cruiser": "^15.0.0",
     "gh-release": "^7.0.0",
     "jsonfeed-to-atom": "^1.2.4",
@@ -93,7 +94,6 @@
     "build:siteup": "./bin.js --src . --ignore examples,test-cases,coverage",
     "build:declaration": "tsc -p declaration.tsconfig.json",
     "watch": "npm run clean && run-p watch:*",
-    "watch:serve": "browser-sync start --server 'public' --files 'public'",
     "watch:siteup": "npm run build:siteup -- --watch",
     "example:basic": "cd examples/basic && npm i && npm run build",
     "example:string-layouts": "cd examples/string-layouts && npm i --production && npm run build",