use @babel/plugin-transform-react-jsx-sourc during dev

jsenv · Jan 8, 2025 · 93008f3 · 93008f3
1 parent dd64dcc
commit 93008f3
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 15 deletions.
diff --git a/packages/related/cli/package.json b/packages/related/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/cli",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "description": "Command Line Interface for jsenv",
   "license": "MIT",
   "repository": {

diff --git a/packages/related/cli/template-web-preact/package.json b/packages/related/cli/template-web-preact/package.json
@@ -22,7 +22,7 @@
     "@babel/plugin-transform-react-jsx": "7.25.9",
     "@jsenv/assert": "4.4.2",
     "@jsenv/core": "39.9.3",
-    "@jsenv/plugin-preact": "1.6.32",
+    "@jsenv/plugin-preact": "1.6.33",
     "@jsenv/plugin-bundling": "2.7.21",
     "@jsenv/plugin-minification": "1.5.12",
     "@jsenv/eslint-config-relax": "1.3.9",

diff --git a/packages/related/cli/template-web-react/package.json b/packages/related/cli/template-web-react/package.json
@@ -23,7 +23,7 @@
     "@babel/plugin-transform-react-jsx": "7.25.9",
     "@jsenv/assert": "4.4.2",
     "@jsenv/core": "39.9.3",
-    "@jsenv/plugin-react": "1.5.54",
+    "@jsenv/plugin-react": "1.5.55",
     "@jsenv/plugin-bundling": "2.7.21",
     "@jsenv/plugin-minification": "1.5.12",
     "@jsenv/eslint-config-relax": "1.3.9",

diff --git a/packages/related/plugin-preact/package.json b/packages/related/plugin-preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/plugin-preact",
-  "version": "1.6.32",
+  "version": "1.6.33",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -24,6 +24,7 @@
     "babel-plugin-transform-hook-names": "1.0.2",
     "@babel/plugin-transform-react-jsx": "7.25.9",
     "@babel/plugin-transform-react-jsx-development": "7.25.9",
+    "@babel/plugin-transform-react-jsx-source": "7.25.9",
     "@jsenv/ast": "6.4.1",
     "@jsenv/sourcemap": "1.2.29",
     "@jsenv/url-meta": "8.5.2",

diff --git a/packages/related/plugin-preact/src/jsenv_plugin_preact.js b/packages/related/plugin-preact/src/jsenv_plugin_preact.js
@@ -128,6 +128,9 @@ export const jsenvPluginPreact = ({
                   ],
                 ]
               : []),
+            ...(jsxEnabled && urlInfo.context.dev
+              ? ["@babel/plugin-transform-react-jsx-source"]
+              : []),
             ...(hookNamesEnabled ? ["babel-plugin-transform-hook-names"] : []),
             ...(refreshEnabled ? ["@prefresh/babel-plugin"] : []),
           ],
@@ -172,7 +175,7 @@ export const jsenvPluginPreact = ({
             source: "jsenv_preact",
           });
           code = afterJsxReplace.content;
-          // can't do this: ths resulting sourcemap is wrong by a few lines
+          // can't compose import maps: the resulting sourcemap is wrong by a few lines
           // (3-4) and would makes debugging experience close to horrible
           // map = await composeTwoSourcemaps(map, afterJsxReplace.sourcemap);
         }

diff --git a/packages/related/plugin-react/package.json b/packages/related/plugin-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/plugin-react",
-  "version": "1.5.54",
+  "version": "1.5.55",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,6 +23,7 @@
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "7.25.9",
     "@babel/plugin-transform-react-jsx-development": "7.25.9",
+    "@babel/plugin-transform-react-jsx-source": "7.25.9",
     "@jsenv/ast": "6.4.1",
     "@jsenv/plugin-commonjs": "2.9.11",
     "@jsenv/sourcemap": "1.2.29",

diff --git a/packages/related/plugin-react/src/jsenv_plugin_react.js b/packages/related/plugin-react/src/jsenv_plugin_react.js
@@ -99,11 +99,14 @@ const jsenvPluginJsxAndRefresh = ({
                 ],
               ]
             : []),
+          ...(jsxEnabled && urlInfo.context.dev
+            ? ["@babel/plugin-transform-react-jsx-source"]
+            : []),
           ...(refreshEnabled
             ? [["react-refresh/babel", { skipEnvCheck: true }]]
             : []),
         ];
-        const { code, map } = await applyBabelPlugins({
+        let { code, map } = await applyBabelPlugins({
           babelPlugins,
           input: urlInfo.content,
           inputIsJsModule: true,
@@ -141,6 +144,13 @@ const jsenvPluginJsxAndRefresh = ({
               index = code.indexOf(importSpecifier, index + 1);
             }
           }
+          const afterJsxReplace = magicSource.toContentAndSourcemap({
+            source: "jsenv_preact",
+          });
+          code = afterJsxReplace.content;
+          // can't compose import maps: the resulting sourcemap is wrong by a few lines
+          // (3-4) and would makes debugging experience close to horrible
+          // map = await composeTwoSourcemaps(map, afterJsxReplace.sourcemap);
         }
         if (refreshEnabled) {
           const hasReg = /\$RefreshReg\$\(/.test(code);
@@ -151,26 +161,27 @@ const jsenvPluginJsxAndRefresh = ({
               expectedType: "js_module",
               specifier: "@jsenv/plugin-react/src/client/react_refresh.js",
             });
-            magicSource.prepend(`import { installReactRefresh } from ${
+            const prelude = `import { installReactRefresh } from ${
               reactRefreshClientReference.generatedSpecifier
-            }
+            };
 const __react_refresh__ = installReactRefresh(${JSON.stringify(urlInfo.url)});
-`);
+`;
+            code = `${prelude.replace(/\n/g, "")}${code}`;
             if (hasReg) {
-              magicSource.append(`
+              code = `${code}
+
 __react_refresh__.end();
-import.meta.hot.accept(__react_refresh__.acceptCallback);`);
+import.meta.hot.accept(__react_refresh__.acceptCallback);`;
             }
           }
         }
-        const result = magicSource.toContentAndSourcemap();
         return {
-          content: result.content,
+          content: code,
           sourcemap: map,
           // "no sourcemap is better than wrong sourcemap":
           // I don't know exactly what is resulting in bad sourcemaps
           // but I suspect hooknames or prefresh to be responsible
-          sourcemapIsWrong: jsxEnabled && refreshEnabled,
+          // sourcemapIsWrong: jsxEnabled && refreshEnabled,
         };
       },
     },