@jsenv/plugin-react 0.0.1

package/main.js

@@ -0,0 +1 @@
+export { jsenvPluginReact } from "./src/jsenv_plugin_react.js"

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@jsenv/plugin-react",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jsenv/jsenv-core",
+    "directory": "packages/jsenv-plugin-react"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./main.js"
+    },
+    "./*": "./*"
+  },
+  "scripts": {
+    "test": "node ./script/test/test.mjs"
+  },
+  "dependencies": {
+    "@jsenv/cjs-to-esm": "0.0.2",
+    "@babel/plugin-transform-react-jsx": "7.17.3",
+    "@jsenv/url-meta": "6.2.0",
+    "@jsenv/utils": "1.5.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-react-jsx-development": "7.16.7",
+    "@jsenv/assert": "2.5.4",
+    "@jsenv/core": "../../",
+    "playwright": "1.20.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-refresh": "0.13.0"
+  }
+}

package/script/test/test.mjs

@@ -0,0 +1,14 @@
+import { executeTestPlan, nodeProcess } from "@jsenv/core"
+
+await executeTestPlan({
+  rootDirectoryUrl: new URL("../../", import.meta.url),
+  testPlan: {
+    "test/**/*.test.mjs": {
+      node: {
+        runtime: nodeProcess,
+      },
+    },
+  },
+  completedExecutionLogMerging: true,
+  coverage: process.argv.includes("--coverage"),
+})

package/src/client/react_refresh.js

@@ -0,0 +1,33 @@
+/* globals self */
+
+import RefreshRuntime from "react-refresh"
+
+export const installReactRefresh = (url) => {
+  if (!self.__react_refresh_installed__) {
+    throw new Error("react refresh not installed")
+  }
+
+  let prevRefreshReg
+  let prevRefreshSig
+  prevRefreshReg = self.$RefreshReg$
+  prevRefreshSig = self.$RefreshSig$
+  self.$RefreshReg$ = (type, id) => {
+    RefreshRuntime.register(type, `${url} ${id}`)
+  }
+  self.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform
+
+  return {
+    end: () => {
+      self.$RefreshReg$ = prevRefreshReg
+      self.$RefreshSig$ = prevRefreshSig
+    },
+    acceptCallback: () => {
+      if (!self.__react_refresh_timeout__) {
+        self.__react_refresh_timeout__ = setTimeout(() => {
+          self.__react_refresh_timeout__ = 0
+          RefreshRuntime.performReactRefresh()
+        }, 30)
+      }
+    },
+  }
+}

package/src/client/react_refresh_preamble.js

@@ -0,0 +1,22 @@
+/* globals self */
+
+import RefreshRuntime from "react-refresh"
+
+// see https://github.com/vitejs/vite/blob/0858450b2a258b216ae9aa797cc02e9a0d4eb0af/packages/plugin-react/src/fast-refresh.ts#L29-L35
+RefreshRuntime.injectIntoGlobalHook(self)
+self.$RefreshReg$ = () => {}
+self.$RefreshSig$ = () => (type) => type
+const debounce = (fn, delay) => {
+  let handle
+  return () => {
+    clearTimeout(handle)
+    handle = setTimeout(fn, delay)
+  }
+}
+// see https://github.com/vitejs/vite/blob/0858450b2a258b216ae9aa797cc02e9a0d4eb0af/packages/plugin-react/src/fast-refresh.ts#L16-L26
+RefreshRuntime.performReactRefresh = debounce(
+  RefreshRuntime.performReactRefresh,
+  16,
+)
+
+self.__react_refresh_installed__ = true

package/src/jsenv_plugin_react.js

@@ -0,0 +1,190 @@
+/*
+ * - https://github.com/vitejs/vite/blob/main/packages/plugin-react/src/index.ts
+ */
+
+import { normalizeStructuredMetaMap, urlToMeta } from "@jsenv/url-meta"
+
+import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+import { composeTwoSourcemaps } from "@jsenv/utils/sourcemap/sourcemap_composition_v3.js"
+import { injectQueryParams } from "@jsenv/utils/urls/url_utils.js"
+import { commonJsToJsModule } from "@jsenv/cjs-to-esm"
+import { fetchOriginalUrlInfo } from "@jsenv/core/src/plugins/transpilation/fetch_original_url_info.js"
+
+import { jsenvPluginReactRefreshPreamble } from "./jsenv_plugin_react_refresh_preamble.js"
+
+export const jsenvPluginReact = ({ hotRefreshPatterns } = {}) => {
+  return [
+    jsenvPluginReactAsJsModule(),
+    jsenvPluginReactRefreshPreamble(),
+    jsenvPluginJsxAndRefresh({
+      hotRefreshPatterns,
+    }),
+  ]
+}
+
+const jsenvPluginReactAsJsModule = () => {
+  return {
+    name: "jsenv:react_as_js_module",
+    appliesDuring: "*",
+    normalizeUrl: {
+      js_import_export: (reference) => {
+        if (
+          [
+            "react",
+            "react-dom",
+            "react/jsx-runtime",
+            "react/jsx-dev-runtime",
+            "react-refresh",
+          ].includes(reference.specifier)
+        ) {
+          return injectQueryParams(reference.url, {
+            react_as_js_module: "",
+          })
+        }
+        return null
+      },
+    },
+    fetchUrlContent: async (urlInfo, context) => {
+      const originalUrlInfo = await fetchOriginalUrlInfo({
+        urlInfo,
+        context,
+        searchParam: "react_as_js_module",
+        // during this fetch we don't want to alter the original file
+        // so we consider it as text
+        expectedType: "text",
+      })
+      if (!originalUrlInfo) {
+        return null
+      }
+      const { content, sourcemap } = await commonJsToJsModule({
+        rootDirectoryUrl: context.rootDirectoryUrl,
+        sourceFileUrl: originalUrlInfo.url,
+        external: ["react"],
+      })
+      return {
+        type: "js_module",
+        contentType: "text/javascript",
+        content,
+        sourcemap,
+      }
+    },
+  }
+}
+
+const jsenvPluginJsxAndRefresh = ({
+  jsxPatterns = {
+    "./**/*.jsx": true,
+    "./**/*.tsx": true,
+    "./**/node_modules/": false,
+  },
+  refreshPatterns = {
+    "./**/*.jsx": true,
+    "./**/*.tsx": true,
+    "./**/node_modules/": false,
+  },
+}) => {
+  const structuredMetaMap = normalizeStructuredMetaMap(
+    {
+      jsx: jsxPatterns,
+      refresh: refreshPatterns,
+      hookNames: {
+        "./**/*": true,
+        "./**/node_modules": false,
+      },
+    },
+    "file://",
+  )
+
+  return {
+    name: "jsenv:jsx_and_refresh",
+    appliesDuring: "*",
+    transformUrlContent: {
+      js_module: async (urlInfo, { scenario, referenceUtils }) => {
+        const urlMeta = urlToMeta({ url: urlInfo.url, structuredMetaMap })
+        const jsxEnabled = urlMeta.jsx
+        const refreshEnabled = scenario === "dev" ? urlMeta.refresh : false
+        const babelPlugins = [
+          ...(jsxEnabled
+            ? [
+                [
+                  scenario === "dev"
+                    ? "@babel/plugin-transform-react-jsx-development"
+                    : "@babel/plugin-transform-react-jsx",
+                  {
+                    runtime: "automatic",
+                    importSource: "react",
+                  },
+                ],
+              ]
+            : []),
+          ...(refreshEnabled
+            ? [["react-refresh/babel", { skipEnvCheck: true }]]
+            : []),
+        ]
+        const { code, map } = await applyBabelPlugins({
+          babelPlugins,
+          urlInfo,
+        })
+        const magicSource = createMagicSource(code)
+        if (jsxEnabled) {
+          // "@babel/plugin-transform-react-jsx" is injecting some of these 3 imports into the code:
+          // 1. import { jsx } from "react/jsx-runtime"
+          // 2. import { jsxDev } from "react/jsx-dev-runtime"
+          // 3. import { createElement } from "react"
+          // 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
+          // but that's fine we can still replace these imports afterwards as done below
+          const injectedSpecifiers = [
+            `"react"`,
+            `"react/jsx-dev-runtime"`,
+            `"react/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,
+              })
+              magicSource.replace({
+                start: index,
+                end: index + importSpecifier.length,
+                replacement: injectedReference.generatedSpecifier,
+              })
+              index = code.indexOf(importSpecifier, index + 1)
+            }
+          }
+        }
+        if (refreshEnabled) {
+          const hasReg = /\$RefreshReg\$\(/.test(code)
+          const hasSig = /\$RefreshSig\$\(/.test(code)
+          if (hasReg || hasSig) {
+            const [reactRefreshClientReference] = referenceUtils.inject({
+              type: "js_import_export",
+              expectedType: "js_module",
+              specifier: "@jsenv/plugin-react/src/client/react_refresh.js",
+            })
+            magicSource.prepend(`import { installReactRefresh } from ${
+              reactRefreshClientReference.generatedSpecifier
+            }
+const __react_refresh__ = installReactRefresh(${JSON.stringify(urlInfo.url)})
+`)
+            if (hasReg) {
+              magicSource.append(`
+__react_refresh__.end()
+import.meta.hot.accept(__react_refresh__.acceptCallback)`)
+            }
+          }
+        }
+        const result = magicSource.toContentAndSourcemap()
+        return {
+          content: result.content,
+          sourcemap: await composeTwoSourcemaps(map, result.sourcemap),
+        }
+      },
+    },
+  }
+}

package/src/jsenv_plugin_react_refresh_preamble.js

@@ -0,0 +1,39 @@
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  injectScriptAsEarlyAsPossible,
+  createHtmlNode,
+} from "@jsenv/utils/html_ast/html_ast.js"
+
+export const jsenvPluginReactRefreshPreamble = () => {
+  const reactRefreshPreambleClientFileUrl = new URL(
+    "./client/react_refresh_preamble.js",
+    import.meta.url,
+  ).href
+
+  return {
+    name: "jsenv:react_refresh_preamble",
+    appliesDuring: { dev: true },
+    transformUrlContent: {
+      html: (urlInfo, context) => {
+        const htmlAst = parseHtmlString(urlInfo.content)
+        const [reactRefreshPreambleReference] = context.referenceUtils.inject({
+          type: "script_src",
+          expectedType: "js_module",
+          specifier: reactRefreshPreambleClientFileUrl,
+        })
+        injectScriptAsEarlyAsPossible(
+          htmlAst,
+          createHtmlNode({
+            "tagName": "script",
+            "type": "module",
+            "src": reactRefreshPreambleReference.generatedSpecifier,
+            "injected-by": "jsenv:react_refresh_preamble",
+          }),
+        )
+        const htmlModified = stringifyHtmlAst(htmlAst)
+        return htmlModified
+      },
+    },
+  }
+}