refactor(uniquely/soffit-site-pwa): build with esbuild

uniquely/soffit-site-pwa/esbuild.mjs

@@ -0,0 +1,144 @@
+#!/usr/bin/env node
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+
+import {promises as fs, existsSync} from 'node:fs';
+
+import {createLogger} from '@alwatr/logger';
+import * as esbuild from 'esbuild';
+
+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 cleanMode = process.argv.includes('--clean');
+const watchMode = process.argv.includes('--watch');
+const debugMode = process.argv.includes('--debug');
+
+logger.logOther(banner);
+
+logger.logProperty('cleanMode', cleanMode);
+logger.logProperty('watchMode', watchMode);
+logger.logProperty('debugMode', debugMode);
+
+if (cleanMode) {
+  logger.logMethod('clean build');
+  await fs.rm(outDir, {recursive: true, force: true});
+}
+
+const copyPromise = fs.cp(resDir, outDir, {recursive: true, force: true, verbatimSymlinks: true});
+
+const esBuild = esbuild.build({
+  entryPoints: [`${srcDir}/${srcFilename}.ts`],
+
+  logLevel: 'info',
+  platform: 'browser',
+  target: 'es2018',
+  format: 'esm',
+  conditions: debugMode ? ['development'] : undefined,
+
+  minify: true,
+  treeShaking: true,
+  sourcemap: true,
+  sourcesContent: debugMode,
+  bundle: true,
+  splitting: true,
+  charset: 'ascii',
+  legalComments: 'none',
+  metafile: true,
+
+  define: {
+    _ALWATR_VERSION_: `'${packageJson.version}'`,
+  },
+  // drop: ['debugger'],
+
+  loader: {
+    '.png': 'copy',
+    '.jpg': 'copy',
+    '.woff': 'copy',
+    '.woff2': 'copy',
+  },
+
+  banner: {
+    js: banner,
+    css: banner,
+  },
+
+  outbase: srcDir,
+  outdir: outDir,
+  assetNames: 'asset/[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 esBuild).metafile;
+  const outFiles = Object.keys(metafile.outputs);
+
+  const jsFilename = outFiles
+      .find((filename) => filename.includes(srcFilename) && filename.endsWith('.js'))
+      .substring(outDir.length + 1);
+
+  const cssFilename = outFiles
+      .find((filename) => filename.includes(srcFilename) && filename.endsWith('.css'))
+      .substring(outDir.length + 1);
+
+  logger.logProperty('jsFilename', jsFilename);
+  logger.logProperty('cssFilename', cssFilename);
+
+  if (!existsSync(`${outDir}/${jsFilename}`)) {
+    logger.error('makeHtml', 'js_filename_not_found', {jsFilename});
+    throw new Error('js_filename_not_found');
+  }
+
+  if (!existsSync(`${outDir}/${cssFilename}`)) {
+    logger.error('makeHtml', 'css_filename_not_found', {cssFilename});
+    throw new Error('css_filename_not_found');
+  }
+
+  htmlContent = htmlContent
+      .replace('alwatr-pwa.css', cssFilename)
+      .replace('alwatr-pwa.js', jsFilename)
+  ;
+
+  await copyPromise; // wait to cp done
+  await fs.writeFile(`${outDir}/index.html`, htmlContent, {encoding: 'utf-8', flag: 'w'});
+}
+
+if (!watchMode) {
+  makeHtml();
+}
+
+if (debugMode) {
+  console.log(await esbuild.analyzeMetafile((await esBuild).metafile));
+}
+
+/*
+  TODO:
+  - Assets hash
+  - PostCSS css file
+  - lit css loader
+  - PostCSS lit internal styles
+  - Dynamic from @alwatr/build
+  - sideEffects
+    https://esbuild.github.io/api/#ignore-annotations
+    https://webpack.js.org/guides/tree-shaking/
+  - readme
+    https://esbuild.github.io/api/#write
+    https://github.com/fakundo/esbuild-plugin-replace-regex/blob/master/src/index.js#L30
+    https://github.com/zandaqo/esbuild-plugin-lit/blob/master/css-loader.ts
+    https://github.com/chialab/rna/tree/main/packages/esbuild-plugin-html
+*/

uniquely/soffit-site-pwa/package.json

@@ -20,40 +20,26 @@
     "directory": "ui/soffit-site-pwa"
   },
   "scripts": {
-    "b": "yarn build",
-    "cb": "run-s clean build",
+    "b": "yarn build --debug",
+    "cb": "yarn build --debug --clean",
     "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:es serve",
+    "watch:es": "yarn build --clean --watch --debug"
   },
   "devDependencies": {
     "@alwatr/element": "^0.27.0",
     "@alwatr/ui-kit": "^0.27.0",
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.3.0",
     "@web/dev-server": "^0.1.35",
-    "@web/dev-server-esbuild": "^0.3.3",
-    "@web/rollup-plugin-copy": "^0.3.0",
-    "@web/rollup-plugin-html": "^1.11.0",
-    "@web/rollup-plugin-polyfills-loader": "^1.3.1",
     "@webcomponents/webcomponentsjs": "^2.7.0",
     "lit-analyzer": "^1.2.1",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^4.0.4",
-    "rollup": "^3.10.0",
-    "rollup-plugin-minify-html-literals": "^1.2.6",
-    "rollup-plugin-summary": "^2.0.0",
-    "rollup-plugin-workbox": "^6.2.0",
+    "rimraf": "^4.1.0",
     "ts-lit-plugin": "^1.2.1",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4"

uniquely/soffit-site-pwa/index.html → uniquely/soffit-site-pwa/res/index.html

@@ -6,14 +6,8 @@
   <meta charset="utf-8" />
   <title>بازرگانی سافیت</title>
 
-  <link
-    crossorigin
-    media="print"
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/vazirmatn.min.css"
-    onload="this.media='all';this.onload=null;"
-  />
-  <link rel="stylesheet" href="style/index.css" />
+  <link rel="stylesheet" href="alwatr-pwa.css" />
+  <script type="module" src="alwatr-pwa.js"></script>
 
   <meta name="color-scheme" content="light dark" />
   <meta name="theme-color" media="(prefers-color-scheme: light)" content="#673ab7" />

uniquely/soffit-site-pwa/src/pwa-root.ts → uniquely/soffit-site-pwa/src/alwatr-pwa.ts

@@ -1,6 +1,11 @@
-import {AlwatrRootElement, html, customElement} from '@alwatr/element';
+import {html, customElement} from '@alwatr/element';
+import {AlwatrPwaElement} from '@alwatr/element/pwa-element.js';
 import {l10n} from '@alwatr/i18n';
 
+import '@alwatr/ui-kit/style/theme/palette-300.css';
+import '@alwatr/ui-kit/style/theme/color.css';
+import '@alwatr/font/vazirmatn.css';
+
 import './page-home.js';
 
 import type {PropertyValues} from '@alwatr/element';
@@ -16,7 +21,7 @@ declare global {
  * Alwatr PWA Root Element
  */
 @customElement('alwatr-pwa-root')
-export class AlwatrPwaRoot extends AlwatrRootElement {
+export class AlwatrPwaRoot extends AlwatrPwaElement {
   protected override _routes: RoutesConfig = {
     map: (route) => route.sectionList[0]?.toString(),
     list: {