introduce jsenv-type attribute on scripts

jsenv · Nov 27, 2024 · cc80031 · cc80031
1 parent 670eeda
commit cc80031
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "39.6.0",
+  "version": "39.7.0",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "author": {

diff --git a/...act/tests/script_module_jsx/_script_module_jsx_build.test.mjs/0_js_module/build/main.html b/...act/tests/script_module_jsx/_script_module_jsx_build.test.mjs/0_js_module/build/main.html
@@ -3,6 +3,7 @@
   <head>
     <title>Title</title>
     <meta charset="utf-8">
+    <link rel="icon" href="data:,">
     <script type="importmap">
       {
         "imports": {
@@ -21,7 +22,7 @@
         window.resolveResultPromise = resolve;
       });
     </script>
-    <script type="module">import { render } from "/js/preact.module.js";
+    <script type="module" jsenv-type="module/jsx">import { render } from "/js/preact.module.js";
 import { useEffect } from "/js/hooks.module.js";
 
 // eslint-disable-next-line no-unused-vars

diff --git a/.../script_module_jsx/_script_module_jsx_build.test.mjs/1_js_module_fallback/build/main.html b/.../script_module_jsx/_script_module_jsx_build.test.mjs/1_js_module_fallback/build/main.html
@@ -3,6 +3,7 @@
   <head>
     <title>Title</title>
     <meta charset="utf-8">
+    <link rel="icon" href="data:,">
     <script>
       ;(function() {
         var __versionMappings__ = {
@@ -475,7 +476,7 @@
         window.resolveResultPromise = resolve;
       });
     </script>
-    <script>System.register([__v__("/js/preact.module.nomodule.js"), __v__("/js/hooks.module.nomodule.js"), __v__("/js/jsxRuntime.module.nomodule.js")], function (_export, _context) {
+    <script jsenv-type="module/jsx">System.register([__v__("/js/preact.module.nomodule.js"), __v__("/js/hooks.module.nomodule.js"), __v__("/js/jsxRuntime.module.nomodule.js")], function (_export, _context) {
   "use strict";
 
   var render, useEffect, _jsx, App;

diff --git a/...ript_module_jsx/_script_module_jsx_dev.test.mjs/0_chromium/.jsenv/[email protected]/main.html b/...ript_module_jsx/_script_module_jsx_dev.test.mjs/0_chromium/.jsenv/[email protected]/main.html
@@ -3,6 +3,7 @@
   <head>
     <title>Title</title>
     <meta charset="utf-8">
+    <link rel="icon" href="data:,">
   </head>
   <body>
     <jsenv-scripts>
@@ -25,11 +26,11 @@
           "scriptInfos": [
             {
               "type": "js_classic",
-              "src": "/main.html@L10C5-L14C14.js"
+              "src": "/main.html@L11C5-L15C14.js"
             },
             {
               "type": "js_module",
-              "src": "/main.html@L15C5-L37C14.js"
+              "src": "/main.html@L16C5-L38C14.jsx"
             }
           ]
         });
@@ -53,11 +54,11 @@
 
 
     <div id="app"></div>
-    <script jsenv-cooked-by="jsenv:supervisor" content-indented="" inlined-from-src="/main.html@L10C5-L14C14.js">
-      window.__supervisor__.superviseScript("/main.html@L10C5-L14C14.js");
+    <script jsenv-cooked-by="jsenv:supervisor" content-indented="" inlined-from-src="/main.html@L11C5-L15C14.js">
+      window.__supervisor__.superviseScript("/main.html@L11C5-L15C14.js");
     </script>
-    <script type="module" jsenv-cooked-by="jsenv:supervisor" content-indented="" inlined-from-src="/main.html@L15C5-L37C14.js">
-      window.__supervisor__.superviseScriptTypeModule("/main.html@L15C5-L37C14.js", (url) => import(url));
+    <script type="module" jsenv-type="module/jsx" jsenv-cooked-by="jsenv:supervisor" content-indented="" inlined-from-src="/main.html@L16C5-L38C14.jsx">
+      window.__supervisor__.superviseScriptTypeModule("/main.html@L16C5-L38C14.jsx", (url) => import(url));
     </script>
   </body>
 </html>
diff --git a/...ests/script_module_jsx/_script_module_jsx_dev.test.mjs/0_chromium/0_chromium.md b/...ests/script_module_jsx/_script_module_jsx_dev.test.mjs/0_chromium/0_chromium.md
@@ -1,4 +1,4 @@
-# [0_chromium](../../script_module_jsx_dev.test.mjs#L20)
+# [0_chromium](../../script_module_jsx_dev.test.mjs#L24)
 
 ```js
 run({ browserLauncher: chromium })

diff --git a/packages/related/plugin-preact/tests/script_module_jsx/client/main.html b/packages/related/plugin-preact/tests/script_module_jsx/client/main.html
@@ -3,6 +3,7 @@
   <head>
     <title>Title</title>
     <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
   </head>
 
   <body>
@@ -12,28 +13,28 @@
         window.resolveResultPromise = resolve;
       });
     </script>
-    <script type="module/jsx">
-      import { render } from "preact"
-      import { useEffect } from "preact/hooks"
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useEffect } from "preact/hooks";
 
       // eslint-disable-next-line no-unused-vars
       const App = ({ onFirstRender }) => {
         useEffect(() => {
-          onFirstRender()
-        }, [])
-        return <span>Hello world</span>
-      }
+          onFirstRender();
+        }, []);
+        return <span>Hello world</span>;
+      };
 
       render(
         <App
           onFirstRender={() => {
             window.resolveResultPromise(
               document.querySelector("span").innerHTML,
-            )
+            );
           }}
         />,
         document.querySelector("#app"),
-      )
+      );
     </script>
   </body>
 </html>
diff --git a/packages/related/plugin-preact/tests/script_module_jsx/script_module_jsx.test_manual.js b/packages/related/plugin-preact/tests/script_module_jsx/script_module_jsx.test_manual.js
@@ -0,0 +1,13 @@
+import { startDevServer } from "@jsenv/core";
+import { jsenvPluginPreact } from "@jsenv/plugin-preact";
+
+await startDevServer({
+  sourceDirectoryUrl: new URL("./client/", import.meta.url),
+  port: 3457,
+  ribbon: false,
+  plugins: [
+    jsenvPluginPreact({
+      refreshInstrumentation: true,
+    }),
+  ],
+});
diff --git a/packages/related/plugin-preact/tests/script_module_jsx/script_module_jsx_dev.test.mjs b/packages/related/plugin-preact/tests/script_module_jsx/script_module_jsx_dev.test.mjs
@@ -9,7 +9,11 @@ const run = async ({ browserLauncher }) => {
     sourceDirectoryUrl: new URL("./client/", import.meta.url),
     keepProcessAlive: false,
     port: 0,
-    plugins: [jsenvPluginPreact()],
+    plugins: [
+      jsenvPluginPreact({
+        refreshInstrumentation: true,
+      }),
+    ],
   });
   return executeHtml(`${devServer.origin}/main.html`, {
     browserLauncher,

diff --git a/src/plugins/reference_analysis/html/jsenv_plugin_html_reference_analysis.js b/src/plugins/reference_analysis/html/jsenv_plugin_html_reference_analysis.js
@@ -280,6 +280,31 @@ export const jsenvPluginHtmlReferenceAnalysis = ({
             actions.push(async () => {
               const inlineUrlInfo = inlineReference.urlInfo;
               await inlineUrlInfo.cook();
+              const typeAttribute = getHtmlNodeAttribute(node, "type");
+              if (expectedType === "js_classic") {
+                if (
+                  typeAttribute !== undefined &&
+                  typeAttribute !== "text/javascript"
+                ) {
+                  // 1. <script type="jsx"> becomes <script>
+                  mutations.push(() => {
+                    setHtmlNodeAttributes(node, {
+                      "type": undefined,
+                      "original-type": typeAttribute,
+                    });
+                  });
+                }
+              } else if (expectedType === "js_module") {
+                // 2. <script type="module/jsx"> becomes <script type="module">
+                if (typeAttribute !== "module") {
+                  mutations.push(() => {
+                    setHtmlNodeAttributes(node, {
+                      "type": "module",
+                      "original-type": typeAttribute,
+                    });
+                  });
+                }
+              }
               mutations.push(() => {
                 if (hotAccept) {
                   removeHtmlNodeText(node);
@@ -344,7 +369,7 @@ export const jsenvPluginHtmlReferenceAnalysis = ({
                 }
               : null,
             script: (scriptNode) => {
-              const { type, subtype, contentType, extension } =
+              const { type, subtype, contentType } =
                 analyzeScriptNode(scriptNode);
               if (type === "text") {
                 // ignore <script type="whatever">foobar</script>
@@ -483,31 +508,12 @@ export const jsenvPluginHtmlReferenceAnalysis = ({
               ) {
                 return;
               }
-
-              const inlineRef = visitTextContent(scriptNode, {
+              visitTextContent(scriptNode, {
                 type: "script",
                 subtype,
                 expectedType: type,
                 contentType,
               });
-              if (inlineRef) {
-                // 1. <script type="jsx"> becomes <script>
-                if (type === "js_classic" && extension !== ".js") {
-                  mutations.push(() => {
-                    setHtmlNodeAttributes(scriptNode, {
-                      type: undefined,
-                    });
-                  });
-                }
-                // 2. <script type="module/jsx"> becomes <script type="module">
-                if (type === "js_module" && extension !== ".js") {
-                  mutations.push(() => {
-                    setHtmlNodeAttributes(scriptNode, {
-                      type: "module",
-                    });
-                  });
-                }
-              }
             },
             a: (aNode) => {
               visitHref(aNode, {