shopify-accelerate-app 1.0.32 → 1.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-accelerate-app",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "description": "Shopify App development with full Typescript Support",
   "author": "Felix Tellmann",
   "license": "MIT",

package/src/esbuild/esbuild.ts

@@ -114,6 +114,36 @@ export const transformContent = (input, final = false, cssOutput = "") => {
 
 const current = { timeout: null };
 
+import { Plugin } from "esbuild";
+
+export const aliasReactPlugin: Plugin = {
+  name: "alias-react",
+  setup(build) {
+    const resolvePath = (mod: string) => path.dirname(require.resolve(`${mod}/package.json`, { paths: [process.cwd()] }));
+
+    const compatDir = resolvePath("preact");
+
+    const createAlias = (from: string, to: string) => {
+      build.onResolve({ filter: new RegExp(`^${from}$`) }, () => ({
+        path: to,
+        namespace: "alias",
+      }));
+    };
+
+    createAlias("react", "preact/compat");
+    createAlias("react-dom", "preact/compat");
+    createAlias("react-dom/test-utils", "preact/test-utils");
+
+    build.onLoad({ filter: /.*/, namespace: "alias" }, async (args) => {
+      return {
+        contents: `export * from '${args.path}'; export { default } from '${args.path}';`,
+        resolveDir: compatDir,
+        loader: "js",
+      };
+    });
+  },
+};
+
 const runBlockJsEsbuild = async (entryFile, block: ShopifyAppBlock & { path: string; folder: string }) => {
   const startTime = Date.now();
   const folder = block.folder;
@@ -161,7 +191,9 @@ const runBlockJsEsbuild = async (entryFile, block: ShopifyAppBlock & { path: str
     jsxImportSource: "preact",
     jsxSideEffects: false,
     keepNames: false,
-    plugins: [
+    plugins: [aliasReactPlugin],
+    external: ["preact"], // ← VERY IMPORTANT
+    /*plugins: [
       {
         name: "alias-react",
         setup(build) {
@@ -182,7 +214,7 @@ const runBlockJsEsbuild = async (entryFile, block: ShopifyAppBlock & { path: str
             namespace: "alias",
           }));
 
-          build.onLoad({ filter: /.*/, namespace: "alias" }, async (args) => {
+          build.onLoad({ filter: /.*!/, namespace: "alias" }, async (args) => {
             const actualPath = require.resolve(args.path, {
               paths: [process.cwd()],
             });
@@ -195,7 +227,7 @@ const runBlockJsEsbuild = async (entryFile, block: ShopifyAppBlock & { path: str
           });
         },
       },
-    ],
+    ],*/
 
     // splitting: true,
   })