@jsenv/plugin-preact 0.0.9 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/plugin-preact",
-  "version": "0.0.9",
+  "version": "0.0.12",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -8,8 +8,7 @@
     "directory": "packages/jsenv-plugin-preact"
   },
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
+    "access": "public"
   },
   "type": "module",
   "exports": {
@@ -18,16 +17,28 @@
     },
     "./*": "./*"
   },
+  "files": [
+    "/src/",
+    "/main.js"
+  ],
+  "scripts": {
+    "test": "node ./script/test/test.mjs"
+  },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "7.17.3",
-    "@jsenv/utils": "1.4.4",
+    "@jsenv/utils": "1.6.2",
     "@jsenv/url-meta": "6.2.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-jsx-development": "7.16.7",
+    "@jsenv/assert": "2.5.4",
+    "@jsenv/core": "../../",
+    "@jsenv/filesystem": "3.1.0",
     "@prefresh/babel-plugin": "0.4.3",
     "@prefresh/core": "1.3.4",
     "@prefresh/utils": "1.1.3",
-    "babel-plugin-transform-hook-names": "1.0.2"
+    "babel-plugin-transform-hook-names": "1.0.2",
+    "playwright": "1.20.2",
+    "preact": "10.7.1"
   }
-}
+}

package/src/client/{prefresh.js → preact_refresh.js}

@@ -3,7 +3,7 @@
 import "@prefresh/core"
 import { flush } from "@prefresh/utils"
 
-export const installPrefresh = (url) => {
+export const installPreactRefresh = (url) => {
   let prevRefreshReg = self.$RefreshReg$ || (() => {})
   let prevRefreshSig = self.$RefreshSig$ || (() => (type) => type)
   self.$RefreshReg$ = (type, id) => {

package/src/jsenv_plugin_preact.js

@@ -16,7 +16,12 @@ import {
 } from "@jsenv/utils/html_ast/html_ast.js"
 
 export const jsenvPluginPreact = ({
-  hotRefreshPatterns = {
+  jsxPatterns = {
+    "./**/*.jsx": true,
+    "./**/*.tsx": true,
+    "./**/node_modules/": false,
+  },
+  refreshPatterns = {
     "./**/*.jsx": true,
     "./**/*.tsx": true,
     "./**/node_modules/": false,
@@ -25,13 +30,15 @@ export const jsenvPluginPreact = ({
 } = {}) => {
   const structuredMetaMap = normalizeStructuredMetaMap(
     {
-      hot: hotRefreshPatterns,
+      jsx: jsxPatterns,
+      refresh: refreshPatterns,
+      hookNames: {
+        "./**/*": true,
+        "./**/node_modules": false,
+      },
     },
     "file://",
   )
-  const shouldEnablePrefresh = (url) => {
-    return urlToMeta({ url, structuredMetaMap }).hot
-  }
 
   return {
     name: "jsenv:preact",
@@ -77,91 +84,94 @@ import ${preactDevtoolsReference.generatedSpecifier}
         return { content: htmlModified }
       },
       js_module: async (urlInfo, { scenario, referenceUtils }) => {
-        //   case "Fragment":
-        //   return `${source}/${development ? "jsx-dev-runtime" : "jsx-runtime"}`;
-        // case "jsxDEV":
-        //   return `${source}/jsx-dev-runtime`;
-        // case "jsx":
-        // case "jsxs":
-        //   return `${source}/jsx-runtime`;
-        // case "createElement":
-        //   return source;
-        const prefreshEnabled =
-          scenario === "dev" ? shouldEnablePrefresh(urlInfo.url) : false
-        const hookNamesEnabled = scenario === "dev"
+        const urlMeta = urlToMeta({ url: urlInfo.url, structuredMetaMap })
+        const jsxEnabled = urlMeta.jsx
+        const refreshEnabled = scenario === "dev" ? urlMeta.refresh : false
+        const hookNamesEnabled =
+          scenario === "dev" &&
+          urlMeta.hookNames &&
+          (urlInfo.content.includes("useState") ||
+            urlInfo.content.includes("useReducer") ||
+            urlInfo.content.includes("useRef") ||
+            urlInfo.content.includes("useMemo"))
+
         const { code, map } = await applyBabelPlugins({
           babelPlugins: [
-            [
-              scenario === "dev"
-                ? "@babel/plugin-transform-react-jsx-development"
-                : "@babel/plugin-transform-react-jsx",
-              {
-                runtime: "automatic",
-                importSource: "preact",
-              },
-            ],
+            ...(jsxEnabled
+              ? [
+                  [
+                    scenario === "dev"
+                      ? "@babel/plugin-transform-react-jsx-development"
+                      : "@babel/plugin-transform-react-jsx",
+                    {
+                      runtime: "automatic",
+                      importSource: "preact",
+                    },
+                  ],
+                ]
+              : []),
             ...(hookNamesEnabled ? ["babel-plugin-transform-hook-names"] : []),
-            ...(prefreshEnabled ? ["@prefresh/babel-plugin"] : []),
+            ...(refreshEnabled ? ["@prefresh/babel-plugin"] : []),
           ],
           urlInfo,
         })
         const magicSource = createMagicSource(code)
-        // When a plugin wants to inject import, it must use "generatedSpecifier" returned by "addReference":
-        // const preactJsxRuntimeReference = addReference({
-        //   type: "js_import_export",
-        //   specifier: "preact/jsx-runtime"
-        // })
-        // console.log(preactJsxRuntimeReference.generatedSpecifier)
-        // -> "/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js"
-        // Here "@babel/plugin-transform-react-jsx" is injecting some of these 3 imports into the code:
-        // 1. import { jsx } from "preact/jsx-runtime"
-        // 2. import { jsxDev } from "preact/jsx-dev-runtime"
-        // 3. import { createElement } from "preact"
-        // see https://github.com/babel/babel/blob/410c9acf1b9212cac69d50b5bb2015b9f372acc4/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts#L743-L755
-        // "@babel/plugin-transform-react-jsx" cannot be configured to inject
-        // "/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js" instead of "preact/jsx-runtime"
-        // But that's fine we can still replace these imports afterwards as done below
-        const injectedSpecifiers = [
-          `"preact"`,
-          `"preact/jsx-dev-runtime"`,
-          `"preact/jsx-runtime"`,
-        ]
-        for (const importSpecifier of injectedSpecifiers) {
-          const index = code.indexOf(importSpecifier)
-          if (index > -1) {
-            magicSource.replace({
-              start: index,
-              end: index + importSpecifier.length,
-              replacement: referenceUtils.inject({
+        if (jsxEnabled) {
+          // "@babel/plugin-transform-react-jsx" is injecting some of these 3 imports into the code:
+          // 1. import { jsx } from "preact/jsx-runtime"
+          // 2. import { jsxDev } from "preact/jsx-dev-runtime"
+          // 3. import { createElement } from "preact"
+          // see https://github.com/babel/babel/blob/410c9acf1b9212cac69d50b5bb2015b9f372acc4/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts#L743-L755
+          // "@babel/plugin-transform-react-jsx" cannot be configured to inject what we want
+          // ("/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js" instead of "preact/jsx-runtime")
+          // but that's fine we can still replace these imports afterwards as done below.
+          const injectedSpecifiers = [
+            `"preact"`,
+            `"preact/jsx-dev-runtime"`,
+            `"preact/jsx-runtime"`,
+          ]
+          for (const importSpecifier of injectedSpecifiers) {
+            let index = code.indexOf(importSpecifier)
+            while (index > -1) {
+              const specifier = importSpecifier.slice(1, -1)
+              const [injectedReference] = referenceUtils.inject({
                 type: "js_import_export",
                 expectedType: "js_module",
-                specifier: importSpecifier.slice(1, -1),
-              }).generatedSpecifier,
-            })
+                specifier,
+              })
+              magicSource.replace({
+                start: index,
+                end: index + importSpecifier.length,
+                replacement: injectedReference.generatedSpecifier,
+              })
+              index = code.indexOf(importSpecifier, index + 1)
+            }
           }
         }
-        if (prefreshEnabled) {
+        if (refreshEnabled) {
           const hasReg = /\$RefreshReg\$\(/.test(code)
           const hasSig = /\$RefreshSig\$\(/.test(code)
           if (hasReg || hasSig) {
-            const prefreshClientFileReference = referenceUtils.inject({
+            const [preactRefreshClientReference] = referenceUtils.inject({
               type: "js_import_export",
               expectedType: "js_module",
-              specifier: "@jsenv/plugin-preact/src/client/prefresh.js",
+              specifier: "@jsenv/plugin-preact/src/client/preact_refresh.js",
             })
-            magicSource.prepend(`import { installPrefresh } from ${
-              prefreshClientFileReference.generatedSpecifier
+            magicSource.prepend(`import { installPreactRefresh } from ${
+              preactRefreshClientReference.generatedSpecifier
             }
-            const __prefresh__ = installPrefresh(${JSON.stringify(urlInfo.url)})
-            `)
+const __preact_refresh__ = installPreactRefresh(${JSON.stringify(urlInfo.url)})
+`)
             if (hasReg) {
               magicSource.append(`
-            __prefresh__.end()
-            import.meta.hot.accept(__prefresh__.acceptCallback)`)
+__preact_refresh__.end()
+import.meta.hot.accept(__preact_refresh__.acceptCallback)`)
             }
           }
         }
-        const result = magicSource.toContentAndSourcemap()
+        const result = magicSource.toContentAndSourcemap({
+          source: "jsenv:plugin_preact",
+        })
         return {
           content: result.content,
           sourcemap: await composeTwoSourcemaps(map, result.sourcemap),