using web-utils in merchant-backoffice (not yet completed)

packages/merchant-backoffice-ui/build.mjs

@@ -0,0 +1,147 @@
+#!/usr/bin/env node
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ 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";
+
+// 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,
+      };
+    });
+  },
+};
+
+const entryPoints = ["src/index.tsx", "src/stories.tsx"];
+
+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)

packages/merchant-backoffice-ui/dev.mjs

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { serve } from "@gnu-taler/web-util/lib/index.node";
+import esbuild from "esbuild";
+import { buildConfig } from "./build.mjs";
+
+buildConfig.inject = ['./node_modules/@gnu-taler/web-util/lib/live-reload.mjs']
+
+serve({
+  folder: './dist',
+  port: 8080,
+  source: './src',
+  development: true,
+  onUpdate: async () => esbuild.build(buildConfig)
+})

packages/merchant-backoffice-ui/package.json

@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@gnu-taler/taler-util": "workspace:*",
+    "@gnu-taler/web-util": "workspace:*",
     "axios": "^0.21.1",
     "date-fns": "2.29.3",
     "history": "4.10.1",

packages/merchant-backoffice-ui/src/paths/index.stories.ts

@@ -0,0 +1,2 @@
+export * as a1 from "./admin/create/Create.stories.js";
+export * as a2 from "./instance/details/Details.stories.js";

packages/merchant-backoffice-ui/src/stories.tsx

@@ -0,0 +1,46 @@
+/*
+ This file is part of GNU Anastasis
+ (C) 2021-2022 Anastasis SARL
+
+ GNU Anastasis is free software; you can redistribute it and/or modify it under the
+ terms of the GNU Affero General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Anastasis is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License along with
+ GNU Anastasis; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { strings } from "./i18n/strings.js";
+
+import * as pages from "./paths/index.stories.js";
+
+import { renderStories } from "@gnu-taler/web-util/lib/index.browser";
+
+import "./scss/main.scss";
+
+function SortStories(a: any, b: any): number {
+  return (a?.order ?? 0) - (b?.order ?? 0);
+}
+
+function main(): void {
+  renderStories(
+    { pages },
+    {
+      strings,
+    },
+  );
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", main);
+} else {
+  main();
+}