devjar 0.7.0 → 0.9.0

package/README.md

@@ -1,34 +1,34 @@
 # devjar
-> live code runtime for your react project in browser
+> react live preview in browser
 
+![image](https://repository-images.githubusercontent.com/483779830/318964f4-18ae-4dd4-9940-0fe51ccc5abc)
 
-![image](https://repository-images.githubusercontent.com/483779830/28347c03-774a-4766-b113-54041fad1e72)
+## Introduction
 
-### Introduction
+devjar is a library that enables you to live test and share your code snippets and examples with others. devjar will generate a live code editor where you can run your code snippets and view the results in real-time based on the provided code content of your React app.
 
-devjar is a library that enables you to live test and share your code snippets and examples with others. devjar will generate a live code editor where you can run your code snippets and view the results in real-time based on the provided code content of your React app. 
+**Notice:** devjar requires React 19 and only works for browser runtime at the moment. It will always render the default export component in `index.js` as the app entry.
 
-Notice: devjar only works for browser runtime at the moment. It will always render the default export component in `index.js` as the app entry.
-
-### Install
+## Install
 
 ```sh
 pnpm add devjar
 ```
 
+## React Code Runtime
 
-### Usage
-
-#### `<DevJar>`
+### `<DevJar>`
 
 `DevJar` is a react component that allows you to develop and test your code directly in the browser, using a CDN to load your dependencies.
 
 **Props**
 
 * `files`: An object that specifies the files you want to include in your development environment.
-* `getModuleUrl`: A function that maps module names to CDN URLs.
+* `resolveModule`: A function that maps module specifiers to browser-loadable module URLs.
 * `onError`: Callback function of error event from the iframe sandbox. By default `console.log`.
+* `tailwindSrc`: Optional Tailwind browser script URL. Pass `false` to disable Tailwind injection.
 
+**Example**
 
 ```jsx
 import { DevJar } from 'devjar'
@@ -43,20 +43,23 @@ function App() {
   return (
     <DevJar
       files={files}
-      getModuleUrl={(m) => {
-        return `${CDN_HOST}/${m}`
+      resolveModule={(specifier) => {
+        return `${CDN_HOST}/${specifier}`
       }}
     />
   )
 }
 ```
 
-#### `useLiveCode(options)`
+### `useLiveCode(options)`
+
+A hook that provides lower-level control over the live code execution environment.
 
 **Parameters**
 
 * `options`
-  * `getModulePath(module)`: A function that receives the module name and returns the CDN url of each imported module path. For example, import React from 'react' will load React from skypack.dev/react.
+  * `resolveModule(specifier)`: A function that receives a module specifier and returns the browser-loadable URL. For example, import React from 'react' will load React from skypack.dev/react.
+  * `tailwindSrc`: Optional Tailwind browser script URL. Pass `false` to disable Tailwind injection.
 
 **Returns**
 
@@ -65,6 +68,8 @@ function App() {
   * `error`: An error message in case the live coding encounters an issue.
   * `load(codeFiles)`: void: Loads code files and executes them as live code.
 
+**Example**
+
 ```jsx
 import { useLiveCode } from 'devjar'
 
@@ -72,8 +77,8 @@ function Playground() {
   const { ref, error, load } = useLiveCode({
     // The CDN url of each imported module path in your code
     // e.g. `import React from 'react'` will load react from skypack.dev/react
-    getModulePath(modPath) {
-      return `https://cdn.skypack.dev/${modPath}`
+    resolveModule(specifier) {
+      return `https://cdn.skypack.dev/${specifier}`
     }
   })
 
@@ -103,7 +108,6 @@ function Playground() {
 }
 ```
 
-### License
-
-The MIT License (MIT).
+## License
 
+MIT

package/dist/index.d.ts

@@ -1,28 +1,20 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare global {
-    interface Window {
-        esmsInitOptions: {
-            shimMode: boolean;
-            mapOverrides: boolean;
-        };
-    }
-    function importShim(url: string): Promise<any>;
-}
-
-declare function useLiveCode({ getModuleUrl }: {
-    getModuleUrl?: (name: string) => string;
+declare function useLiveCode({ resolveModule, tailwindSrc, }: {
+    resolveModule?: (specifier: string) => string;
+    tailwindSrc?: string | false;
 }): {
     ref: react.RefObject<any>;
     error: undefined;
-    load: (files: any) => Promise<void>;
+    load: (files: Record<string, string>) => Promise<void>;
 };
 
-declare function DevJar({ files, getModuleUrl, onError, ...props }: {
+declare function DevJar({ files, resolveModule, onError, tailwindSrc, ref: forwardedRef, ...props }: {
     files: Record<string, string>;
-    getModuleUrl?: (name: string) => string;
+    resolveModule?: (specifier: string) => string;
     onError?: (...data: any[]) => void;
-} & React.IframeHTMLAttributes<HTMLIFrameElement>): react_jsx_runtime.JSX.Element;
+    tailwindSrc?: string | false;
+    ref?: React.Ref<HTMLIFrameElement>;
+} & React.IframeHTMLAttributes<HTMLIFrameElement>): react.JSX.Element;
 
 export { DevJar, useLiveCode };

package/dist/index.js

@@ -1,82 +1,166 @@
-import { useRef, useState, useId, useEffect, useCallback } from 'react';
-import { transform } from 'sucrase';
+import { useRef, useState, useId, useEffect, useCallback, useImperativeHandle } from 'react';
 import { init, parse } from 'es-module-lexer';
 import { jsx } from 'react/jsx-runtime';
 
-// declare esmsInitOptions on global window
-async function createModule(files, { getModuleUrl }) {
-    let currentImportMap;
-    let shim;
-    async function setupImportMap() {
-        if (shim) return shim;
-        window.esmsInitOptions = {
-            shimMode: true,
-            mapOverrides: true
-        };
-        shim = import(/* webpackIgnore: true */ getModuleUrl('es-module-shims'));
-        await shim;
+async function createModule(files, { resolveModule, dependencies = {}, runtime = {} }) {
+    var _runtime, _runtime1;
+    const localImportPrefix = '__DEVJAR_LOCAL_IMPORT__';
+    function createLocalImportPlaceholder(moduleKey) {
+        return `${localImportPrefix}${encodeURIComponent(moduleKey)}__`;
+    }
+    function createScopedSpecifier(moduleKey) {
+        return `devjar-internal/${runtime.revision}/${encodeURIComponent(moduleKey)}`;
     }
-    function updateImportMap(imports) {
-        imports['react'] = getModuleUrl('react');
-        imports['react-dom'] = getModuleUrl('react-dom');
-        imports['react-dom/client'] = getModuleUrl('react-dom/client');
+    function registerImportMap(imports) {
+        var _runtime;
         const script = document.createElement('script');
-        script.type = 'importmap-shim';
-        script.innerHTML = JSON.stringify({
+        script.type = 'importmap';
+        script.textContent = JSON.stringify({
             imports
         });
-        document.body.appendChild(script);
-        if (currentImportMap) {
-            currentImportMap.parentNode.removeChild(currentImportMap);
-        }
-        currentImportMap = script;
+        document.head.appendChild(script);
+        ((_runtime = runtime).importMaps || (_runtime.importMaps = [])).push(script);
     }
-    function createInlinedModule(code, type) {
-        if (type === 'css') return `data:text/css;utf-8,${encodeURIComponent(code)}`;
+    function createInlinedModule(code) {
         return `data:text/javascript;utf-8,${encodeURIComponent(code)}`;
     }
-    await setupImportMap();
-    const imports = Object.fromEntries(Object.entries(files).map(([fileName, code])=>[
-            fileName,
-            createInlinedModule(code, fileName.endsWith('.css') ? 'css' : 'js')
-        ]));
-    updateImportMap(imports);
-    return self.importShim('index');
+    function createCssModule(code, fileName) {
+        return `\
+const sheet = new CSSStyleSheet();
+sheet.replaceSync(${JSON.stringify(code)});
+export default sheet;
+//# sourceURL=devjar/${fileName}?v=${runtime.revision}`;
+    }
+    function rewriteLocalImports(code, specifiers) {
+        let rewritten = code;
+        for (const [moduleKey, specifier] of Object.entries(specifiers)){
+            rewritten = rewritten.split(createLocalImportPlaceholder(moduleKey)).join(specifier);
+        }
+        return rewritten;
+    }
+    (_runtime = runtime).files || (_runtime.files = {});
+    (_runtime1 = runtime).urls || (_runtime1.urls = {});
+    runtime.revision = (runtime.revision || 0) + 1;
+    const changedModules = new Set();
+    for (const [fileName, code] of Object.entries(files)){
+        if (runtime.files[fileName] !== code) changedModules.add(fileName);
+    }
+    for (const fileName of Object.keys(runtime.files)){
+        if (!(fileName in files)) changedModules.add(fileName);
+    }
+    const importers = {};
+    for (const [importer, importedModules] of Object.entries(dependencies)){
+        for (const imported of importedModules){
+            var _importers, _imported;
+            ((_importers = importers)[_imported = imported] || (_importers[_imported] = [])).push(importer);
+        }
+    }
+    const invalidated = new Set(changedModules);
+    const queue = [
+        ...changedModules
+    ];
+    while(queue.length){
+        const changed = queue.shift();
+        for (const importer of importers[changed] || []){
+            if (invalidated.has(importer)) continue;
+            invalidated.add(importer);
+            queue.push(importer);
+        }
+    }
+    const moduleKeys = new Set(Object.keys(files));
+    for (const importedModules of Object.values(dependencies)){
+        for (const moduleKey of importedModules)moduleKeys.add(moduleKey);
+    }
+    const scopedSpecifiers = {};
+    for (const moduleKey of moduleKeys){
+        scopedSpecifiers[moduleKey] = createScopedSpecifier(moduleKey);
+    }
+    const imports = {};
+    for (const moduleKey of moduleKeys){
+        if (!(moduleKey in files)) {
+            imports[scopedSpecifiers[moduleKey]] = createInlinedModule(`throw new Error(${JSON.stringify('devjar: Module not found: ' + moduleKey)})`);
+            delete runtime.urls[moduleKey];
+            continue;
+        }
+        if (!runtime.urls[moduleKey] || invalidated.has(moduleKey)) {
+            const moduleCode = moduleKey.endsWith('.css') ? createCssModule(files[moduleKey], moduleKey) : rewriteLocalImports(`${files[moduleKey]}\n//# sourceURL=devjar/${moduleKey}?v=${runtime.revision}`, scopedSpecifiers);
+            runtime.urls[moduleKey] = createInlinedModule(moduleCode);
+        }
+        imports[scopedSpecifiers[moduleKey]] = runtime.urls[moduleKey];
+    }
+    registerImportMap(imports);
+    if (!runtime.refreshRuntime) {
+        const refreshModule = await import(/* webpackIgnore: true */ /* @vite-ignore */ /* turbopackIgnore: true */ resolveModule('react-refresh/runtime'));
+        runtime.refreshRuntime = refreshModule.default || refreshModule;
+        runtime.refreshRuntime.injectIntoGlobalHook(self);
+        globalThis.__devjarRefreshRuntime = runtime.refreshRuntime;
+    }
+    const entrySpecifier = scopedSpecifiers['index'];
+    if (!entrySpecifier) {
+        throw new Error('devjar: Module not found: index');
+    }
+    const module = await import(/* webpackIgnore: true */ /* @vite-ignore */ /* turbopackIgnore: true */ entrySpecifier);
+    runtime.files = {
+        ...files
+    };
+    return {
+        module,
+        changed: changedModules.size > 0
+    };
 }
 
 let esModuleLexerInit;
 const isRelative = (s)=>s.startsWith('./');
 const removeExtension = (str)=>str.replace(/\.[^/.]+$/, '');
-function transformCode(_code, getModuleUrl, externals) {
-    const code = transform(_code, {
-        transforms: [
-            'jsx',
-            'typescript'
-        ]
-    }).code;
-    return replaceImports(code, getModuleUrl, externals);
+const localImportPrefix = '__DEVJAR_LOCAL_IMPORT__';
+const defaultTailwindSrc = 'https://unpkg.com/@tailwindcss/browser@4';
+function createLocalImportPlaceholder(moduleKey) {
+    return `${localImportPrefix}${encodeURIComponent(moduleKey)}__`;
 }
-function replaceImports(source, getModuleUrl, externals) {
+function createTransformWorker() {
+    return new Worker(new URL('./transform-worker.js', import.meta.url), {
+        type: 'module',
+        name: 'devjar-transform'
+    });
+}
+function getModuleKey(filename) {
+    const key = isRelative(filename) ? '@' + filename.slice(2) : filename;
+    return filename.endsWith('.css') ? key : removeExtension(key);
+}
+function resolveRelativeModule(importer, imported) {
+    const importerPath = importer.startsWith('./') ? importer.slice(2) : importer;
+    const parts = importerPath.split('/');
+    parts.pop();
+    for (const part of imported.split('/')){
+        if (!part || part === '.') continue;
+        if (part === '..') parts.pop();
+        else parts.push(part);
+    }
+    const path = parts.join('/');
+    return imported.endsWith('.css') ? '@' + path : removeExtension('@' + path);
+}
+function replaceImports(source, filename, moduleKey, resolveModule, localModules) {
     let code = '';
     let lastIndex = 0;
     let hasReactImports = false;
     const [imports] = parse(source);
     const cssImports = [];
-    let cssImportIndex = 0;
+    const dependencies = [];
     // start, end, statementStart, statementEnd, assertion, name
     imports.forEach(({ s, e, ss, se, a, n })=>{
-        code += source.slice(lastIndex, ss) // content from last import to beginning of this line 
-        ;
+        if (!n) return;
+        code += source.slice(lastIndex, ss); // content from last import to beginning of this line 
+        const localModuleKey = isRelative(n) ? resolveRelativeModule(filename, n) : localModules.has(n) ? n : undefined;
         // handle imports
-        if (n.endsWith('.css')) {
+        if (localModuleKey && localModuleKey.endsWith('.css')) {
             // Map './styles.css' -> '@styles.css', and collect it
-            const cssPath = `${'@' + n.slice(2)}`;
-            cssImports.push(cssPath);
+            cssImports.push(localModuleKey);
         } else {
             code += source.substring(ss, s);
-            code += isRelative(n) ? '@' + n.slice(2) : externals.has(n) ? n : getModuleUrl(n);
+            code += localModuleKey ? createLocalImportPlaceholder(localModuleKey) : resolveModule(n);
             code += source.substring(e, se);
         }
+        if (localModuleKey) dependencies.push(localModuleKey);
         lastIndex = se;
         if (n === 'react') {
             const statement = source.slice(ss, se);
@@ -84,64 +168,104 @@ function replaceImports(source, getModuleUrl, externals) {
                 hasReactImports = true;
             }
         }
-        cssImports.forEach((cssPath)=>{
-            code += `\nimport sheet${cssImportIndex} from "${cssPath}" assert { type: "css" };\n`;
-            cssImportIndex++;
-        });
     });
     if (cssImports.length) {
-        code += `const __customStyleSheets = [`;
-        for(let i = 0; i < cssImports.length; i++){
-            code += `sheet${i}`;
-            if (i < cssImports.length - 1) {
-                code += `, `;
-            }
-        }
-        code += `];\n`;
-        code += `document.adoptedStyleSheets = [...document.adoptedStyleSheets, ...__customStyleSheets];\n`;
+        cssImports.forEach((cssPath, index)=>{
+            code += `\nimport __devjarSheet${index} from "${createLocalImportPlaceholder(cssPath)}";\n`;
+        });
+        code += `globalThis.__devjarStyleSheets ||= new Map();\n`;
+        cssImports.forEach((cssPath, index)=>{
+            code += `{ const previous = globalThis.__devjarStyleSheets.get(${JSON.stringify(cssPath)});\n`;
+            code += `const sheets = [...document.adoptedStyleSheets];\n`;
+            code += `const sheetIndex = sheets.indexOf(previous);\n`;
+            code += `if (sheetIndex < 0) sheets.push(__devjarSheet${index}); else sheets[sheetIndex] = __devjarSheet${index};\n`;
+            code += `document.adoptedStyleSheets = sheets;\n`;
+            code += `globalThis.__devjarStyleSheets.set(${JSON.stringify(cssPath)}, __devjarSheet${index}); }\n`;
+        });
     }
     code += source.substring(lastIndex);
     if (!hasReactImports) {
-        code = `import React from 'react';\n${code}`;
+        code = `import React from ${JSON.stringify(resolveModule('react'))};\n${code}`;
     }
-    return code;
+    code = `const $RefreshReg$ = (type, id) => globalThis.__devjarRefreshRuntime.register(type, ${JSON.stringify(moduleKey + ' ')} + id);\n` + `const $RefreshSig$ = globalThis.__devjarRefreshRuntime.createSignatureFunctionForTransform;\n` + code;
+    return {
+        code,
+        dependencies
+    };
 }
 // createRenderer is going to be stringified and executed in the iframe
-function createRenderer(createModule_, getModuleUrl) {
+function createRenderer(createModule_, resolveModule) {
     let reactRoot;
-    async function render(files) {
-        const mod = await createModule_(files, {
-            getModuleUrl
+    let ErrorBoundary;
+    let errorBoundary;
+    let revision = 0;
+    const moduleRuntime = {};
+    async function render(files, dependencies) {
+        const result = await createModule_(files, {
+            resolveModule,
+            dependencies,
+            runtime: moduleRuntime
         });
-        const ReactMod = await self.importShim('react');
-        const ReactDOMMod = await self.importShim('react-dom/client');
+        const ReactMod = await import(/* webpackIgnore: true */ /* @vite-ignore */ /* turbopackIgnore: true */ resolveModule('react'));
+        const ReactDOMMod = await import(/* webpackIgnore: true */ /* @vite-ignore */ /* turbopackIgnore: true */ resolveModule('react-dom/client'));
         const _jsx = ReactMod.createElement;
         const root = document.getElementById('__reactRoot');
-        class ErrorBoundary extends ReactMod.Component {
-            componentDidCatch(error) {
-                this.setState({
-                    error
-                });
-            }
-            render() {
-                if (this.state.error) {
-                    return _jsx('div', null, this.state.error?.message);
+        if (!ErrorBoundary) {
+            ErrorBoundary = class extends ReactMod.Component {
+                static getDerivedStateFromError(error) {
+                    return {
+                        error
+                    };
                 }
-                return this.props.children;
-            }
-            constructor(props){
-                super(props);
-                this.state = {
-                    error: null
-                };
-            }
+                reset() {
+                    if (this.state.error) this.setState({
+                        error: null
+                    });
+                }
+                componentDidUpdate(previousProps) {
+                    if (previousProps.revision !== this.props.revision && this.state.error) {
+                        this.setState({
+                            error: null
+                        });
+                    }
+                }
+                render() {
+                    if (this.state.error) {
+                        return _jsx('div', null, this.state.error?.message);
+                    }
+                    return this.props.children;
+                }
+                constructor(props){
+                    super(props);
+                    this.state = {
+                        error: null
+                    };
+                }
+            };
         }
         if (!reactRoot) {
             reactRoot = ReactDOMMod.createRoot(root);
+            revision++;
+            reactRoot.render(_jsx(ErrorBoundary, {
+                revision,
+                ref: (value)=>errorBoundary = value
+            }, _jsx(result.module.default)));
+            moduleRuntime.hasRendered = true;
+            return;
+        }
+        if (result.changed) {
+            errorBoundary?.reset();
+            const refreshRuntime = moduleRuntime.refreshRuntime;
+            const refreshUpdate = refreshRuntime.performReactRefresh();
+            const mountedRootCount = typeof refreshRuntime._getMountedRootCount === 'function' ? refreshRuntime._getMountedRootCount() : 0;
+            if (!refreshUpdate || mountedRootCount === 0) {
+                revision++;
+                reactRoot.render(_jsx(ErrorBoundary, {
+                    revision,
+                    ref: (value)=>errorBoundary = value
+                }, _jsx(result.module.default)));
+            }
         }
-        const Component = mod.default;
-        const element = _jsx(ErrorBoundary, null, _jsx(Component));
-        reactRoot.render(element);
     }
     return render;
 }
@@ -151,20 +275,13 @@ function createMainScript({ uid }) {
 const _createModule = ${createModule.toString()};
 const _createRenderer = ${createRenderer.toString()};
 
-const getModuleUrl = (m) => window.parent.__devjar__[globalThis.uid].getModuleUrl(m)
+const resolveModule = (specifier) => window.parent.__devjar__[globalThis.uid].resolveModule(specifier)
 
 globalThis.uid = ${JSON.stringify(uid)};
-globalThis.__render__ = _createRenderer(_createModule, getModuleUrl);
+globalThis.__render__ = _createRenderer(_createModule, resolveModule);
 `;
     return code;
 }
-function createEsShimOptionsScript() {
-    return `\
-window.esmsInitOptions = {
-  polyfillEnable: ['css-modules', 'json-modules'],
-  onerror: console.error,
-}`;
-}
 function useScript() {
     return useRef(typeof window !== 'undefined' ? document.createElement('script') : null);
 }
@@ -179,28 +296,45 @@ function createScript(scriptRef, { content, src, type } = {}) {
     }
     return script;
 }
-function useLiveCode({ getModuleUrl }) {
+function useLiveCode({ resolveModule, tailwindSrc = defaultTailwindSrc }) {
     const iframeRef = useRef(null);
     const [error, setError] = useState();
     const rerender = useState({})[1];
     const appScriptRef = useScript();
-    const esShimOptionsScriptRef = useScript();
     const tailwindcssScriptRef = useScript();
+    const transformWorkerRef = useRef(undefined);
+    const transformCacheRef = useRef(new Map());
+    const transformRequestsRef = useRef(new Map());
+    const transformRequestIdRef = useRef(0);
+    const loadIdRef = useRef(0);
     const uid = useId();
-    // Let getModuleUrl executed on parent window side since it might involve
+    // Let resolveModule execute on parent window side since it might involve
     // variables that iframe cannot access.
     useEffect(()=>{
         if (!globalThis.__devjar__) {
             globalThis.__devjar__ = {};
         }
         globalThis.__devjar__[uid] = {
-            getModuleUrl
+            resolveModule
         };
         return ()=>{
             if (globalThis.__devjar__) {
                 delete globalThis.__devjar__[uid];
             }
         };
+    }, [
+        resolveModule,
+        uid
+    ]);
+    useEffect(()=>{
+        return ()=>{
+            transformWorkerRef.current?.terminate();
+            transformWorkerRef.current = undefined;
+            for (const { reject } of transformRequestsRef.current.values()){
+                reject(new Error('devjar: transform worker was terminated'));
+            }
+            transformRequestsRef.current.clear();
+        };
     }, []);
     useEffect(()=>{
         const iframe = iframeRef.current;
@@ -212,72 +346,126 @@ function useLiveCode({ getModuleUrl }) {
         const appScriptContent = createMainScript({
             uid
         });
-        const scriptOptionsContent = createEsShimOptionsScript();
-        const esmShimOptionsScript = createScript(esShimOptionsScriptRef, {
-            content: scriptOptionsContent
-        });
         const appScript = createScript(appScriptRef, {
-            content: appScriptContent,
-            type: 'module'
-        });
-        const tailwindScript = createScript(tailwindcssScriptRef, {
-            src: 'https://unpkg.com/@tailwindcss/browser@4'
+            content: appScriptContent
         });
+        const tailwindScript = tailwindSrc ? createScript(tailwindcssScriptRef, {
+            src: tailwindSrc
+        }) : null;
         body.appendChild(div);
-        body.appendChild(esmShimOptionsScript);
         body.appendChild(appScript);
-        body.appendChild(tailwindScript);
+        if (tailwindScript) body.appendChild(tailwindScript);
         return ()=>{
             if (!iframe || !iframe.contentDocument) return;
             body.removeChild(div);
-            body.removeChild(esmShimOptionsScript);
             body.removeChild(appScript);
-            body.removeChild(tailwindScript);
+            if (tailwindScript) body.removeChild(tailwindScript);
         };
     }, []);
+    const transformFiles = useCallback((files)=>{
+        if (!resolveModule) {
+            return Promise.reject(new Error('devjar: resolveModule is required for the browser transformer'));
+        }
+        if (!transformWorkerRef.current) {
+            const worker = createTransformWorker();
+            worker.onmessage = ({ data })=>{
+                const request = transformRequestsRef.current.get(data.id);
+                if (!request) return;
+                transformRequestsRef.current.delete(data.id);
+                if (data.error) {
+                    const error = new Error(data.error.message);
+                    if (data.error.stack) error.stack = data.error.stack;
+                    request.reject(error);
+                } else {
+                    request.resolve(data.transformed);
+                }
+            };
+            worker.onerror = (event)=>{
+                const error = new Error(event.message || 'devjar: transform worker failed');
+                for (const { reject } of transformRequestsRef.current.values())reject(error);
+                transformRequestsRef.current.clear();
+            };
+            transformWorkerRef.current = worker;
+        }
+        const id = ++transformRequestIdRef.current;
+        const worker = transformWorkerRef.current;
+        return new Promise((resolve, reject)=>{
+            transformRequestsRef.current.set(id, {
+                resolve,
+                reject
+            });
+            worker.postMessage({
+                id,
+                files,
+                moduleUrl: resolveModule('oxc-transform')
+            });
+        });
+    }, [
+        resolveModule
+    ]);
     const load = useCallback(async (files)=>{
+        const loadId = ++loadIdRef.current;
         if (!esModuleLexerInit) {
             await init;
             esModuleLexerInit = true;
         }
         if (files) {
-            // { 'react', 'react-dom' }
-            const overrideExternals = new Set(Object.keys(files).filter((name)=>!isRelative(name) && name !== 'index.js'));
-            // Always share react as externals
-            overrideExternals.add('react');
-            overrideExternals.add('react-dom');
+            const localModules = new Set(Object.keys(files).map(getModuleKey));
             try {
+                const filesToTransform = Object.fromEntries(Object.entries(files).filter(([filename, source])=>{
+                    return !filename.endsWith('.css') && transformCacheRef.current.get(filename)?.source !== source;
+                }));
+                const newTransforms = Object.keys(filesToTransform).length ? await transformFiles(filesToTransform) : {};
+                if (loadId !== loadIdRef.current) return;
+                for (const [filename, code] of Object.entries(newTransforms)){
+                    transformCacheRef.current.set(filename, {
+                        source: files[filename],
+                        code: code
+                    });
+                }
+                for (const filename of transformCacheRef.current.keys()){
+                    if (!(filename in files)) transformCacheRef.current.delete(filename);
+                }
                 /**
          * transformedFiles
          * {
          *  'index.js': '...',
          *  '@mod1': '...',
          *  '@mod2': '...',
-         */ const transformedFiles = Object.keys(files).reduce((res, filename)=>{
+         */ const dependencies = {};
+                const transformedFiles = Object.keys(files).reduce((res, filename)=>{
                     // 1. Remove ./
                     // 2. For non css files, remove extension
                     // e.g. './styles.css' -> '@styles.css'
                     // e.g. './foo.js' -> '@foo'
-                    const moduleKey = isRelative(filename) ? '@' + filename.slice(2) : filename;
+                    const moduleKey = getModuleKey(filename);
                     if (filename.endsWith('.css')) {
                         res[moduleKey] = files[filename];
+                        dependencies[moduleKey] = [];
                     } else {
                         // JS or TS files
-                        const normalizedModuleKey = removeExtension(moduleKey);
-                        res[normalizedModuleKey] = transformCode(files[filename], getModuleUrl, overrideExternals);
+                        const transformed = replaceImports(transformCacheRef.current.get(filename).code, filename, moduleKey, resolveModule, localModules);
+                        res[moduleKey] = transformed.code;
+                        dependencies[moduleKey] = transformed.dependencies;
                     }
                     return res;
                 }, {});
                 const iframe = iframeRef.current;
                 const script = appScriptRef.current;
                 if (iframe) {
+                    const renderFiles = async ()=>{
+                        await iframe.contentWindow.__render__(transformedFiles, dependencies);
+                        if (loadId === loadIdRef.current) {
+                            iframe.dispatchEvent(new CustomEvent('devjar:render'));
+                        }
+                    };
                     const render = iframe.contentWindow.__render__;
                     if (render) {
-                        render(transformedFiles);
+                        await renderFiles();
                     } else {
                         // if render is not loaded yet, wait until it's loaded
                         script.onload = ()=>{
-                            iframe.contentWindow.__render__(transformedFiles).catch((err)=>{
+                            renderFiles().catch((err)=>{
                                 setError(err);
                             });
                         };
@@ -290,7 +478,10 @@ function useLiveCode({ getModuleUrl }) {
             }
         }
         rerender({});
-    }, []);
+    }, [
+        resolveModule,
+        transformFiles
+    ]);
     return {
         ref: iframeRef,
         error,
@@ -299,11 +490,15 @@ function useLiveCode({ getModuleUrl }) {
 }
 
 const defaultOnError = typeof window !== 'undefined' ? console.error : ()=>{};
-function DevJar({ files, getModuleUrl, onError = defaultOnError, ...props }) {
+function DevJar({ files, resolveModule, onError = defaultOnError, tailwindSrc, ref: forwardedRef, ...props }) {
     const onErrorRef = useRef(onError);
     const { ref, error, load } = useLiveCode({
-        getModuleUrl
+        resolveModule,
+        tailwindSrc
     });
+    useImperativeHandle(forwardedRef, ()=>ref.current, [
+        ref
+    ]);
     useEffect(()=>{
         onErrorRef.current(error);
     }, [

package/dist/transform-worker.js

@@ -0,0 +1,54 @@
+// src/transform-worker.ts
+var oxc;
+var importModule = new Function("specifier", "return import(specifier)");
+function getLang(filename) {
+  if (/\.[cm]?tsx?$/.test(filename))
+    return "tsx";
+  return "jsx";
+}
+function getTransformErrorMessage(errors) {
+  if (!errors?.length)
+    return "";
+  const error = errors.find((error2) => error2.severity === "Error");
+  if (!error)
+    return "";
+  return error.codeframe || error.message || "devjar: transform failed";
+}
+self.onmessage = async ({ data }) => {
+  const { id, moduleUrl, files } = data;
+  try {
+    if (!oxc) {
+      oxc = await importModule(moduleUrl);
+    }
+    const transformed = {};
+    for (const [filename, source] of Object.entries(files)) {
+      const output = oxc.transformSync(filename, source, {
+        lang: getLang(filename),
+        sourceType: "module",
+        target: "es2022",
+        decorator: {
+          legacy: true
+        },
+        jsx: {
+          runtime: "automatic",
+          development: true,
+          refresh: true
+        },
+        sourcemap: false
+      });
+      const errorMessage = getTransformErrorMessage(output.errors);
+      if (errorMessage)
+        throw new Error(errorMessage);
+      transformed[filename] = output.code;
+    }
+    self.postMessage({ id, transformed });
+  } catch (error) {
+    self.postMessage({
+      id,
+      error: {
+        message: error?.message || String(error),
+        stack: error?.stack
+      }
+    });
+  }
+};

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "devjar",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "type": "module",
   "exports": {
-    ".": "./dist/index.js",
-    "./package.json": "./package.json"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   },
   "license": "MIT",
   "files": [
@@ -12,31 +14,37 @@
   ],
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "bunchee",
+    "build": "pnpm run build:lib && pnpm run build:worker",
+    "build:lib": "bunchee",
+    "build:worker": "bun build src/transform-worker.ts --outfile dist/transform-worker.js --target browser --format esm",
     "prepublishOnly": "pnpm run build",
     "build:site": "pnpm run build && next build ./site",
     "start": "next start ./site",
-    "dev": "next dev ./site"
+    "dev": "pnpm run build && (pnpm run dev:lib & pnpm run dev:worker & pnpm run dev:site & wait)",
+    "dev:lib": "bunchee --watch",
+    "dev:worker": "bun build src/transform-worker.ts --outfile dist/transform-worker.js --target browser --format esm --watch",
+    "dev:site": "next dev ./site"
   },
   "peerDependencies": {
-    "react": "^18.2.0 || ^19.0.0"
+    "react": "^19.0.0"
   },
   "dependencies": {
     "es-module-lexer": "1.6.0",
-    "es-module-shims": "2.0.3",
-    "sucrase": "3.35.0"
+    "oxc-transform": "^0.137.0",
+    "react-refresh": "^0.18.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.7",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
-    "bunchee": "^6.3.2",
-    "codice": "1.0.0",
-    "devjar": "link:./",
-    "next": "^15.1.5",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "bunchee": "^6.11.0",
+    "codice": "^1.6.0",
+    "dedent": "^1.7.0",
+    "devjar": "link:",
+    "next": "16.3.0-canary.69",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "typescript": "^5.7.3"
   },
-  "packageManager": "pnpm@9.15.4"
+  "packageManager": "pnpm@11.9.0"
 }