feat: live-reload via CLI arg, CLI help, refactor

Author: jonaskuske

package.json

@@ -72,7 +72,7 @@
     "sass": "^1.54.1",
     "unconfig": "^0.3.5",
     "vite": "^3.0.4",
-    "vite-plugin-live-reload": "^3.0.0",
+    "vite-plugin-full-reload": "^1.0.3",
     "vue": "^2.7.8"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,56 +1,45 @@
 import { cac } from 'cac'
 import { name, version } from '../../package.json'
-import type { CliOptions } from './types'
 import { build, serve } from './index'
 
-export async function startCli(
-  cwd = process.cwd(),
-  argv = process.argv,
-  options: CliOptions = {},
-) {
+export async function startCli(cwd = process.cwd(), argv = process.argv) {
   const cli = cac(name)
 
   cli
-    .command('serve [file]', 'Panel input file', {
-      ignoreOptionDefaultValue: true,
-    })
-    .action(async (file, flags) => {
-      Object.assign(options, {
-        cwd,
-        ...flags,
-      })
-
-      if (file)
-        options.entry = file
-
-      const server = await serve(options)
-      process.on('SIGINT', () => server.close())
-    })
-
-  cli
-    .command('[file]', 'Panel input file', {
-      ignoreOptionDefaultValue: true,
-    })
-    .option('-d, --out-dir <dir>', 'Output directory', {
-      default: cwd,
-    })
+    .command('<file>', 'Compile the panel plugin to index.js and index.css')
+    .option('-d, --out-dir <dir>', 'Output directory', { default: cwd })
     .option(
       '-w, --watch [path]',
-      'Watch for file changes. If no path is specified, the folder of the input file will be watched. Repeat "--watch" for multiple paths.',
+      'Watch for file changes. If no path is specified, the folder of the input file will be watched',
+      { default: false },
     )
-    .action(async (file: string, flags) => {
-      Object.assign(options, {
-        cwd,
-        ...flags,
-      })
+    .example('kirbyup src/index.js')
+    .example('kirbyup src/index.js --out-dir ~/kirby-site/site/plugins/demo')
+    .example('kirbyup src/index.js --watch src/**/*.{js,css} --watch assets/*\n')
+    .action(async (file: string, options: { outDir: string; watch: boolean | string | string[] }) => {
+      await build({ cwd, entry: file, ...options })
+    })
 
-      if (file)
-        options.entry = file
+  cli
+    .command('serve <file>', 'Start development server with live reload')
+    .option('--no-watch', 'Don\'t watch .php files for changes', { default: '\0' })
+    .option('-w, --watch <path>', 'Watch additional files', { default: './**/*.php' })
+    .example('kirbyup serve src/index.js')
+    .example('kirbyup serve src/index.js --no-watch')
+    .example('kirbyup serve src/index.js --watch snippets/*.php --watch templates/*.php\n')
+    .action(async (file: string, options: { watch: false | string | string[] }) => {
+      const server = await serve({ cwd, entry: file, ...options })
 
-      await build(options)
+      process.on('SIGINT', () => server.close())
+      process.on('exit', () => server.close())
+      process.on('uncaughtException', () => {
+        process.exitCode = 1
+        server.close()
+      })
     })
 
-  cli.help()
+  // Filter out unnecessary "default" output for negated options (zerobyte acts as marker)
+  cli.help(s => s.map(msg => ({ ...msg, body: msg.body.replace(' (default: \0)', '') })))
   cli.version(version)
 
   // Parse CLI args without running the command to