@porotkin/vite-plugin-react-kotlinjs 0.0.4 → 0.0.6

package/README.md

@@ -10,7 +10,7 @@ This plugin is inspired by the original
 Add the following dependency to your `build.gradle.kts`:
 ```kotlin
 dependencies {
-    jsMainImplementation(devNpm("@porotkin/vite-plugin-react-kotlinjs", "^0.0.4"))
+    jsMainImplementation(devNpm("@porotkin/vite-plugin-react-kotlinjs", "^0.0.6"))
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porotkin/vite-plugin-react-kotlinjs",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Support React fast refresh in Kotlin/JS",
   "license": "MIT",
   "author": "Mikhail Porotkin",
@@ -21,10 +21,11 @@
     "postinstall": "node copyRefreshRuntime.js"
   },
   "dependencies": {
+    "@babel/core": "^7.28.4",
     "@rolldown/pluginutils": "1.0.0-beta.41",
     "react-refresh": "^0.17.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "5.0.4"
+    "@vitejs/plugin-react": "^5.0.4"
   }
 }

package/src/index.js

@@ -16,7 +16,7 @@ export default (options) => {
 
     const derivedOptions = {
         skipFastRefresh: true,
-        getComponentName: (code) => code.match(/function ([A-Za-z]+)\$lambda\(\$this\$FC(, props)?\) {/)?.[1],
+        detectComponent: (code) => code.includes('kotlin-react-core/react/ChildrenBuilder.mjs'),
         filter,
         ...options,
     };

package/src/refresh-wrapper.js

@@ -1,22 +1,20 @@
 export const runtimePublicPath = '/@react-refresh'
 
 // NOTE: this is exposed publicly via plugin-react
-export const preambleCode = `import { injectIntoGlobalHook } from "${runtimePublicPath.slice(1)}";
+export const preambleCode = `
+import { injectIntoGlobalHook } from "${runtimePublicPath.slice(1)}";
 injectIntoGlobalHook(window);
 window.$RefreshReg$ = () => {};
-window.$RefreshSig$ = () => (type) => type;`
+window.$RefreshSig$ = () => (type) => type;
+`
 
 export const getPreambleCode = () => preambleCode
 
-export function addRefreshWrapper(code, pluginName, id, getComponentName) {
-    const componentName = getComponentName?.(code)
-    if (!componentName) return code;
-
+export function addRefreshWrapper(code, pluginName, id) {
     const registerHmr = `   
 import * as RefreshRuntime from "${runtimePublicPath}";
 const inWebWorker = typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope;
 if (import.meta.hot && !inWebWorker) {
-  $RefreshReg$(get_${componentName}?.(), "${componentName}")
   RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
     RefreshRuntime.registerExportsForReactRefresh(${JSON.stringify(id)}, currentExports);
     import.meta.hot.accept((nextExports) => {
@@ -27,8 +25,10 @@ if (import.meta.hot && !inWebWorker) {
   });
 }
 function normalizeExports(value) {
-    if (!value) return undefined;
-    const [[key, type]] = Object.entries(value)
+    if (!value) return [];
+    const [entry] = Object.entries(value)
+    if (!entry) return [];
+    const [key, type] = entry
     const name = key.replace("get_", "");
     return {
         [name]: (...args) => type?.(...args),

package/src/vite-babel.js

@@ -1,24 +1,110 @@
 import {addRefreshWrapper} from "./refresh-wrapper.js";
 
+let babel;
+
+async function loadBabel() {
+    if (!babel) babel = await import("@babel/core");
+    return babel;
+}
+
+let isProduction = true;
+let projectRoot = process.cwd();
+let runPluginOverrides;
+
+function canSkipBabel(plugins, babelOptions) {
+    return !(plugins.length || babelOptions.presets.length || babelOptions.configFile || babelOptions.babelrc);
+}
+
+const loadedPlugin = /* @__PURE__ */ new Map();
+
+function loadPlugin(path) {
+    const cached = loadedPlugin.get(path);
+    if (cached) return cached;
+    const promise = import(path).then((module) => {
+        const value = module.default || module;
+        loadedPlugin.set(path, value);
+        return value;
+    });
+    loadedPlugin.set(path, promise);
+    return promise;
+}
+
+function createBabelOptions(rawOptions) {
+    const babelOptions = {
+        babelrc: false,
+        configFile: false,
+        ...rawOptions
+    };
+    babelOptions.plugins ||= [];
+    babelOptions.presets ||= [];
+    babelOptions.overrides ||= [];
+    babelOptions.parserOpts ||= {};
+    babelOptions.parserOpts.plugins ||= [];
+    return babelOptions;
+}
+
 export const viteBabelPlugin = (mainOptions) => ({
     name: "vite:react-plugin-kotlinjs",
     enforce: "pre",
     configResolved(config) {
-        mainOptions.skipFastRefresh = config.isProduction || config.command === "build" || config.server.hmr === false;
+        projectRoot = config.root;
+        isProduction = config.isProduction;
+        mainOptions.skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
+        const hooks = config.plugins.map((plugin) => plugin.api?.reactBabel).filter(function (value) {
+            return value !== void 0;
+        });
+        if (hooks.length > 0) runPluginOverrides = (babelOptions, context) => {
+            hooks.forEach((hook) => hook(babelOptions, context, config));
+        };
     },
     transform: {
-        async handler(code, id) {
+        async handler(code, id, options) {
             const [filepath] = id.split("?");
-            if (!mainOptions?.filter(filepath) || !mainOptions?.getComponentName(code)) return;
+            if (!mainOptions?.filter(filepath) || !mainOptions?.detectComponent(code)) return;
+            const ssr = options?.ssr === true;
+            const babelOptions = (() => {
+                const newBabelOptions = createBabelOptions({});
+                runPluginOverrides?.(newBabelOptions, {
+                    id,
+                    ssr
+                });
+                return newBabelOptions;
+            })();
+            const plugins = [...babelOptions.plugins];
             const useFastRefresh = !mainOptions.skipFastRefresh;
-            if (!useFastRefresh) return {
-                code: code,
-                map: null,
-            };
-            return {
-                code: addRefreshWrapper(code, "vite:react-plugin-kotlinjs", id, mainOptions?.getComponentName),
-                map: null,
-            };
+            if (useFastRefresh) plugins.push([await loadPlugin("react-refresh/babel"), {skipEnvCheck: true}]);
+            if (canSkipBabel(plugins, babelOptions)) return;
+            const parserPlugins = [...babelOptions.parserOpts.plugins];
+            const result = await (await loadBabel()).transformAsync(code, {
+                ...babelOptions,
+                root: projectRoot,
+                filename: id,
+                sourceFileName: filepath,
+                retainLines: !isProduction,
+                parserOpts: {
+                    ...babelOptions.parserOpts,
+                    sourceType: "module",
+                    allowAwaitOutsideFunction: true,
+                    plugins: parserPlugins
+                },
+                generatorOpts: {
+                    ...babelOptions.generatorOpts,
+                    importAttributesKeyword: "with",
+                    decoratorsBeforeExport: true
+                },
+                plugins,
+                sourceMaps: true
+            });
+            if (result) {
+                if (!useFastRefresh) return {
+                    code: result.code,
+                    map: result.map
+                };
+                return {
+                    code: addRefreshWrapper(result.code, "vite:react-plugin-kotlinjs", id),
+                    map: result.map
+                };
+            }
         }
     }
 })

package/src/vite-react-refresh.js

@@ -13,7 +13,7 @@ const dependencies = [
 ]
 
 export const viteReactRefreshPlugin = (options) => ({
-    name: 'vite:react-refresh',
+    name: 'vite:react-refresh-kotlinjs',
     enforce: 'pre',
     config: (userConfig) => ({
         build: silenceUseClientWarning(userConfig),