using build tools for backoffice

packages/merchant-backoffice-ui/build.mjs

@@ -15,154 +15,6 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import esbuild from "esbuild";
-import path from "path";
-import fs from "fs";
-import sass from "sass";
+import { buildProd } from "@gnu-taler/web-util/lib/index.build"
 
-// eslint-disable-next-line no-undef
-const BASE = process.cwd();
-
-const preact = path.join(
-  BASE,
-  "node_modules",
-  "preact",
-  "compat",
-  "dist",
-  "compat.module.js",
-);
-
-const preactCompatPlugin = {
-  name: "preact-compat",
-  setup(build) {
-    build.onResolve({ filter: /^(react-dom|react)$/ }, (args) => {
-      //console.log("onresolve", JSON.stringify(args, undefined, 2));
-      return {
-        path: preact,
-      };
-    });
-  },
-};
-
-function getFilesInDirectory(startPath, regex) {
-  if (!fs.existsSync(startPath)) {
-    return;
-  }
-  const files = fs.readdirSync(startPath);
-  const result = files.flatMap(file => {
-    const filename = path.join(startPath, file);
-
-    const stat = fs.lstatSync(filename);
-    if (stat.isDirectory()) {
-      return getFilesInDirectory(filename, regex);
-    }
-    else if (regex.test(filename)) {
-      return filename
-    }
-  }).filter(x => !!x)
-
-  return result
-}
-
-const allTestFiles = getFilesInDirectory(path.join(BASE, 'src'), /.test.tsx?$/)
-const entryPoints = ["src/index.tsx", "src/stories.tsx", ...allTestFiles];
-
-let GIT_ROOT = BASE;
-while (!fs.existsSync(path.join(GIT_ROOT, ".git")) && GIT_ROOT !== "/") {
-  GIT_ROOT = path.join(GIT_ROOT, "../");
-}
-if (GIT_ROOT === "/") {
-  // eslint-disable-next-line no-undef
-  console.log("not found");
-  // eslint-disable-next-line no-undef
-  process.exit(1);
-}
-const GIT_HASH = GIT_ROOT === "/" ? undefined : git_hash();
-
-let _package = JSON.parse(fs.readFileSync(path.join(BASE, "package.json")));
-
-function git_hash() {
-  const rev = fs
-    .readFileSync(path.join(GIT_ROOT, ".git", "HEAD"))
-    .toString()
-    .trim()
-    .split(/.*[: ]/)
-    .slice(-1)[0];
-  if (rev.indexOf("/") === -1) {
-    return rev;
-  } else {
-    return fs.readFileSync(path.join(GIT_ROOT, ".git", rev)).toString().trim();
-  }
-}
-
-// FIXME: Put this into some helper library.
-function copyFilesPlugin(options) {
-  return {
-    name: "copy-files",
-    setup(build) {
-      build.onEnd(() => {
-        for (const fop of options) {
-          fs.copyFileSync(fop.src, fop.dest);
-        }
-      });
-    },
-  };
-}
-
-const DEFAULT_SASS_FILTER = /\.(s[ac]ss|css)$/
-
-const buildSassPlugin = {
-  name: "custom-build-sass",
-  setup(build) {
-
-    build.onLoad({ filter: DEFAULT_SASS_FILTER }, ({ path: file }) => {
-      const resolveDir = path.dirname(file)
-      const { css: contents } = sass.compile(file, { loadPaths: ["./"] })
-
-      return {
-        resolveDir,
-        loader: 'css',
-        contents
-      }
-    });
-
-  },
-};
-
-export const buildConfig = {
-  entryPoints: [...entryPoints],
-  bundle: true,
-  outdir: "dist",
-  minify: false,
-  loader: {
-    ".svg": "file",
-    ".png": "dataurl",
-    ".jpeg": "dataurl",
-    '.ttf': 'file',
-    '.woff': 'file',
-    '.woff2': 'file',
-    '.eot': 'file',
-  },
-  target: ["es6"],
-  format: "esm",
-  platform: "browser",
-  sourcemap: true,
-  jsxFactory: "h",
-  jsxFragment: "Fragment",
-  define: {
-    __VERSION__: `"${_package.version}"`,
-    __GIT_HASH__: `"${GIT_HASH}"`,
-  },
-  plugins: [
-    preactCompatPlugin,
-    copyFilesPlugin([
-      {
-        src: "./src/index.html",
-        dest: "./dist/index.html",
-      },
-    ]),
-    buildSassPlugin
-  ],
-};
-
-await esbuild.build(buildConfig)
+await buildProd(["src/index.tsx"])

packages/merchant-backoffice-ui/dev.mjs

@@ -16,16 +16,20 @@
  */
 
 import { serve } from "@gnu-taler/web-util/lib/index.node";
-import esbuild from "esbuild";
-import { buildConfig } from "./build.mjs";
+import { initializeDev, getFilesInSource } from "@gnu-taler/web-util/lib/index.build"
 
-buildConfig.inject = ['./node_modules/@gnu-taler/web-util/lib/live-reload.mjs']
+const allTestFiles = getFilesInSource(/.test.tsx?$/);
+const devEntryPoints = ["src/stories.tsx", "src/index.tsx", ...allTestFiles];
+
+const buildDev = initializeDev(devEntryPoints)
+
+await buildDev();
 
 serve({
-  folder: './dist',
+  folder: './dist/dev',
   port: 8080,
   source: './src',
   insecure: true,
   development: true,
-  onUpdate: async () => esbuild.build(buildConfig)
+  onUpdate: buildDev
 })