feat(pwa): watch mode

Alwatr · Jan 17, 2023 · a0a0d88 · a0a0d88
1 parent 9cf8f20
commit a0a0d88
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 19 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -26,6 +26,7 @@
     "esbuild",
     "Kubernetes",
     "mastmalize",
+    "metafile",
     "mihandoost",
     "nanoserver",
     "nanoservice",

diff --git a/ui/demo-pwa/esbuild.mjs b/ui/demo-pwa/esbuild.mjs
@@ -11,32 +11,38 @@ import packageJson from './package.json' assert {type: 'json'};
 
 const logger = createLogger('alwatr-pwa-build');
 const banner = '/* ..:: Alwatr UI Demo ::.. */\n';
+const srcDir = 'src';
 const resDir = 'res';
 const outDir = 'dist';
 const srcFilename = 'alwatr-pwa';
+const productionMode = process.env.NODE_ENV === 'production';
+const watchMode = process.argv.includes('--watch');
 
 logger.logOther(banner);
 
+logger.logProperty('watchMode', watchMode);
+logger.logProperty('productionMode', productionMode);
+
 if (process.argv.includes('--clean')) {
   logger.logMethod('clean build');
-  await fs.rmdir(outDir, {recursive: true, force: true});
+  await fs.rm(outDir, {recursive: true, force: true});
 }
 
 const copyPromise = fs.cp(resDir, outDir, {recursive: true, force: true, verbatimSymlinks: true});
 
-const buildPromise = esbuild.build({
-  entryPoints: [`src/${srcFilename}.ts`],
+const esBuild = esbuild.build({
+  entryPoints: [`${srcDir}/${srcFilename}.ts`],
 
   logLevel: 'info',
   platform: 'browser',
   target: 'es2018',
   format: 'esm',
-  conditions: ['development'], // dev-mode
+  conditions: productionMode ? undefined : ['development'],
 
-  minify: false, // dev-mode
+  minify: true,
   treeShaking: true,
   sourcemap: true,
-  sourcesContent: true, // dev-mode
+  sourcesContent: !productionMode,
   bundle: true,
   splitting: true,
   charset: 'ascii',
@@ -60,19 +66,22 @@ const buildPromise = esbuild.build({
     css: banner,
   },
 
-  outbase: 'src',
+  outbase: srcDir,
   outdir: outDir,
   assetNames: 'asset/[name]-[hash]',
-  entryNames: '[dir]/[name]-[hash]',
+  entryNames: watchMode ? '[name]' : '[dir]/[name]-[hash]',
   chunkNames: 'chunks/[name]-[hash]',
+
+  incremental: watchMode,
+  watch: watchMode,
 });
 
 async function makeHtml() {
   logger.logMethod('makeHtml');
 
   let htmlContent = await fs.readFile(`${resDir}/index.html`, {encoding: 'utf-8'});
 
-  const metafile = (await buildPromise).metafile;
+  const metafile = (await esBuild).metafile;
   const outFiles = Object.keys(metafile.outputs);
 
   const jsFilename = outFiles
@@ -105,9 +114,10 @@ async function makeHtml() {
   await fs.writeFile(`${outDir}/index.html`, htmlContent, {encoding: 'utf-8', flag: 'w'});
 }
 
-makeHtml();
-
-console.log(await esbuild.analyzeMetafile((await buildPromise).metafile));
+if (!watchMode) {
+  makeHtml();
+  console.log(await esbuild.analyzeMetafile((await esBuild).metafile));
+}
 
 /*
   TODO:

diff --git a/ui/demo-pwa/package.json b/ui/demo-pwa/package.json
@@ -25,13 +25,12 @@
     "s": "yarn start",
     "w": "yarn watch",
     "start": "NODE_OPTIONS=--enable-source-maps run-s clean build serve",
-    "clean": "rimraf dist build .tsbuildinfo **/*.{d.ts,map} src/**/*.{js,cjs,mjs}",
-    "build": "run-s build:ts build:es",
-    "build:ts": "tsc --build",
-    "build:es": "rimraf dist && rollup -c",
+    "clean": "rimraf dist build .tsbuildinfo",
+    "build": "./esbuild.mjs",
+    "build:tsc": "tsc --build",
     "serve": "wds",
-    "watch": "run-s clean build:ts && run-p watch:ts serve",
-    "watch:ts": "yarn build:ts --watch --preserveWatchOutput"
+    "watch": "run-p watch:ts serve",
+    "watch:ts": "yarn build --clean --watch"
   },
   "devDependencies": {
     "@alwatr/element": "^0.27.0",

diff --git a/ui/demo-pwa/web-dev-server.config.js b/ui/demo-pwa/web-dev-server.config.js
@@ -5,7 +5,7 @@ const config = {
   port: 8080,
   open: true,
   watch: true,
-  debug: true,
+  // debug: true,
   rootDir: 'dist',
   appIndex: 'index.html',
   plugins: [],