shopify-accelerate-app 1.0.33 → 1.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-accelerate-app",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "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;
@@ -141,6 +171,19 @@ const runBlockJsEsbuild = async (entryFile, block: ShopifyAppBlock & { path: str
       .at(-1)
       .replace(/\.(ts)x?$/gi, "")}.js`
   );
+
+  await build({
+    entryPoints: [path.resolve(process.env.SHOPIFY_ACCELERATE_ROOT, "preact-runtime.ts")],
+    outfile: path.join(config.extension_path, "assets", `preact-runtime.js`),
+    bundle: true,
+    format: "iife",
+    globalName: "preact",
+    jsx: "transform",
+    jsxFactory: "h",
+    jsxImportSource: "preact",
+    minify: true,
+  });
+
   await build({
     entryPoints: [entryFile],
     // bundle: true,
@@ -161,41 +204,8 @@ const runBlockJsEsbuild = async (entryFile, block: ShopifyAppBlock & { path: str
     jsxImportSource: "preact",
     jsxSideEffects: false,
     keepNames: false,
-    /*plugins: [
-      {
-        name: "alias-react",
-        setup(build) {
-          const resolveFromNodeModules = (mod: string) => path.dirname(require.resolve(`${mod}/package.json`, { paths: [process.cwd()] }));
-
-          build.onResolve({ filter: /^react$/ }, () => ({
-            path: "preact/compat",
-            namespace: "alias",
-          }));
-
-          build.onResolve({ filter: /^react-dom$/ }, () => ({
-            path: "preact/compat",
-            namespace: "alias",
-          }));
-
-          build.onResolve({ filter: /^react-dom\/test-utils$/ }, () => ({
-            path: "preact/test-utils",
-            namespace: "alias",
-          }));
-
-          build.onLoad({ filter: /.*!/, namespace: "alias" }, async (args) => {
-            const actualPath = require.resolve(args.path, {
-              paths: [process.cwd()],
-            });
-
-            return {
-              contents: `export * from '${args.path}'; export { default } from '${args.path}';`,
-              resolveDir: path.dirname(actualPath),
-              loader: "js",
-            };
-          });
-        },
-      },
-    ],*/
+    plugins: [aliasReactPlugin],
+    external: ["preact"], // ← VERY IMPORTANT
 
     // splitting: true,
   })