better support for linaria and alias

packages/web-util/package.json

@@ -33,7 +33,13 @@
     "pretty": "prettier --write src"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.21.5",
     "@gnu-taler/taler-util": "workspace:*",
+    "@linaria/babel-preset": "4.4.5",
+    "@linaria/core": "4.2.10",
+    "@linaria/esbuild": "4.2.11",
+    "@linaria/react": "4.3.8",
     "@types/express": "^4.17.14",
     "@types/node": "^18.11.17",
     "@types/web": "^0.0.82",
@@ -58,10 +64,6 @@
   "dependencies": {
     "@babel/core": "7.18.9",
     "@babel/helper-compilation-targets": "7.18.9",
-    "@linaria/babel-preset": "3.0.0-beta.23",
-    "@linaria/core": "3.0.0-beta.22",
-    "@linaria/esbuild": "3.0.0-beta.22",
-    "@linaria/react": "3.0.0-beta.22",
     "@types/chrome": "0.0.197",
     "tailwindcss": "^3.3.2"
   }

packages/web-util/src/index.build.ts

@@ -1,5 +1,5 @@
 import esbuild, { PluginBuild } from "esbuild";
-// import linaria from "@linaria/esbuild";
+import linaria from "@linaria/esbuild";
 import fs from "fs";
 import path from "path";
 import postcss from "postcss";
@@ -10,27 +10,6 @@ import postcssrc from "postcss-load-config";
 // the project is being built
 const BASE = process.cwd();
 
-const preact = path.join(
-  BASE,
-  "node_modules",
-  "preact",
-  "compat",
-  "dist",
-  "compat.module.js",
-);
-
-// https://preactjs.com/guide/v8/switching-to-preact/#how-to-alias-preact-compat
-const preactCompatPlugin: esbuild.Plugin = {
-  name: "preact-compat",
-  setup(build) {
-    build.onResolve({ filter: /^(react-dom|react)$/ }, (args) => {
-      return {
-        path: preact,
-      };
-    });
-  },
-};
-
 export function getFilesInDirectory(
   startPath: string,
   regex?: RegExp,
@@ -146,15 +125,20 @@ const postCssPlugin: esbuild.Plugin = {
   },
 };
 
+/**
+ * This should be able to load the plugin but but some reason it does not work
+ *
+ *       text: "Cannot find module '../plugins/preeval'\n" +
+ *
+ */
 function linariaPlugin() {
-  // const linariaCssPlugin: esbuild.Plugin = linaria.default({
+  const linariaCssPlugin: esbuild.Plugin = (linaria as any)({
-  //   babelOptions: {
+    babelOptions: {
-  //     babelrc: false,
+      presets: ["@babel/preset-typescript", "@babel/preset-react", "@linaria"],
-  //     configFile: "./babel.config-linaria.json",
+    },
-  //   },
+    sourceMap: true,
-  //   sourceMap: true,
+  });
-  // });
+  return linariaCssPlugin;
-  // return linariaCssPlugin;
 }
 
 const defaultEsBuildConfig: esbuild.BuildOptions = {
@@ -162,6 +146,7 @@ const defaultEsBuildConfig: esbuild.BuildOptions = {
   minify: false,
   loader: {
     ".svg": "file",
+    ".inline.svg": "text",
     ".png": "dataurl",
     ".jpeg": "dataurl",
     ".ttf": "file",
@@ -175,6 +160,10 @@ const defaultEsBuildConfig: esbuild.BuildOptions = {
   sourcemap: true,
   jsxFactory: "h",
   jsxFragment: "Fragment",
+  alias: {
+    react: "preact/compat",
+    "react-dom": "preact/compat",
+  },
   define: {
     __VERSION__: `"${_package.version}"`,
     __GIT_HASH__: `"${GIT_HASH}"`,
@@ -186,13 +175,14 @@ export interface BuildParams {
     assets: string[];
     js: string[];
   };
+  public?: string;
   destination: string;
-  css: "sass" | "postcss"; // | "linaria";
+  css: "sass" | "postcss" | "linaria";
+  linariaPlugin?: () => esbuild.Plugin;
 }
 
-export function computeConfig(params: BuildParams) {
+export function computeConfig(params: BuildParams): esbuild.BuildOptions {
   const plugins: Array<esbuild.Plugin> = [
-    preactCompatPlugin,
     copyFilesPlugin(params.source.assets),
   ];
 
@@ -206,10 +196,12 @@ export function computeConfig(params: BuildParams) {
       break;
     }
 
-    // case "linaria": {
+    case "linaria": {
-    //   plugins.push(linariaPlugin());
+      if (params.linariaPlugin) {
-    //   break;
+        plugins.push(params.linariaPlugin());
-    // }
+      }
+      break;
+    }
 
     default: {
       const cssType: never = params.css;
@@ -219,6 +211,7 @@ export function computeConfig(params: BuildParams) {
   return {
     ...defaultEsBuildConfig,
     entryPoints: params.source.js,
+    publicPath: params.public,
     outdir: params.destination,
     plugins,
   };