devjar 0.8.0 → 0.9.0

package/README.md

@@ -1,13 +1,13 @@
 # devjar
-> live code runtime for your react project in browser
+> react live preview in browser
 
-![image](https://repository-images.githubusercontent.com/483779830/55bf67ee-fcc6-4a12-ad0c-5221a5f78c26)
+![image](https://repository-images.githubusercontent.com/483779830/318964f4-18ae-4dd4-9940-0fe51ccc5abc)
 
 ## 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.
 
-**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.
+**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.
 
 ## Install
 
@@ -24,8 +24,9 @@ pnpm add devjar
 **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**
 
@@ -42,8 +43,8 @@ function App() {
   return (
     <DevJar
       files={files}
-      getModuleUrl={(m) => {
-        return `${CDN_HOST}/${m}`
+      resolveModule={(specifier) => {
+        return `${CDN_HOST}/${specifier}`
       }}
     />
   )
@@ -57,7 +58,8 @@ A hook that provides lower-level control over the live code execution environmen
 **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**
 
@@ -75,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}`
     }
   })
 
@@ -106,77 +108,6 @@ function Playground() {
 }
 ```
 
-## GLSL Shader Runtime
-
-### `useGL(options)`
-
-A hook that renders GLSL fragment shaders using WebGL. Perfect for creating interactive shader playgrounds and visualizations.
-
-**Parameters**
-
-* `options`
-  * `fragment`: The GLSL fragment shader source code as a string.
-  * `canvasRef`: A React ref to an HTML canvas element where the shader will be rendered.
-  * `onError`: Optional callback function that receives error messages (prefixed with `devjar:gl`).
-
-**Available Uniforms**
-
-The hook automatically provides these uniforms to your fragment shader:
-
-* `u_time`: `float` - Elapsed time in seconds since the renderer started
-* `u_resolution`: `vec2` - Canvas dimensions (width, height)
-* `u_mouse`: `vec2` - Normalized mouse position (0.0 to 1.0)
-
-**Example**
-
-```jsx
-import { useGL } from 'devjar'
-import { useRef, useState } from 'react'
-
-function ShaderPlayground() {
-  const canvasRef = useRef(null)
-  const [shaderCode, setShaderCode] = useState(`
-    precision mediump float;
-    
-    uniform vec2 u_resolution;
-    uniform float u_time;
-    uniform vec2 u_mouse;
-    
-    void main() {
-      vec2 st = gl_FragCoord.xy / u_resolution.xy;
-      vec3 color = vec3(st.x, st.y, abs(sin(u_time)));
-      gl_FragColor = vec4(color, 1.0);
-    }
-  `)
-  const [error, setError] = useState(null)
-
-  useGL({
-    fragment: shaderCode,
-    canvasRef,
-    onError: setError
-  })
-
-  return (
-    <div>
-      <textarea
-        value={shaderCode}
-        onChange={(e) => setShaderCode(e.target.value)}
-        style={{ width: '100%', height: '200px' }}
-      />
-      <canvas ref={canvasRef} style={{ width: '100%', height: '300px' }} />
-      {error && <pre style={{ color: 'red' }}>{error}</pre>}
-    </div>
-  )
-}
-```
-
-**Error Handling**
-
-All errors are prefixed with `devjar:gl` for easy identification:
-- `devjar:gl Shader compilation error: ...`
-- `devjar:gl Program linking error: ...`
-- `devjar:gl WebGL is not supported in your browser`
-
 ## License
 
-The MIT License (MIT).
+MIT

package/dist/index.d.ts

@@ -1,29 +1,20 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-export { UseGlslRendererOptions, useGL } from './gl.tsx';
 
-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,83 +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';
-export { useGL } from './gl.js';
 
-// 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);
@@ -85,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;
 }
@@ -152,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);
 }
@@ -180,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;
@@ -213,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);
                             });
                         };
@@ -291,7 +478,10 @@ function useLiveCode({ getModuleUrl }) {
             }
         }
         rerender({});
-    }, []);
+    }, [
+        resolveModule,
+        transformFiles
+    ]);
     return {
         ref: iframeRef,
         error,
@@ -300,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,42 +1,50 @@
 {
   "name": "devjar",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "type": "module",
   "exports": {
-    ".": "./dist/index.js",
-    "./gl": "./dist/gl.js",
-    "./package.json": "./package.json"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   },
   "license": "MIT",
   "files": [
     "dist"
   ],
   "types": "./dist/index.d.ts",
+  "scripts": {
+    "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": "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": {
-    "dedent": "^1.7.0",
     "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.3",
-    "codice": "^1.5.4",
+    "bunchee": "^6.11.0",
+    "codice": "^1.6.0",
+    "dedent": "^1.7.0",
     "devjar": "link:",
-    "next": "^16.0.3",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "next": "16.3.0-canary.69",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "typescript": "^5.7.3"
   },
-  "scripts": {
-    "build": "bunchee",
-    "build:site": "pnpm run build && next build ./site",
-    "start": "next start ./site",
-    "dev": "next dev ./site"
-  }
-}
+  "packageManager": "pnpm@11.9.0"
+}

package/dist/gl.js

@@ -1,214 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-// Default vertex shader - simple fullscreen quad
-const DEFAULT_VERTEX_SHADER = `\
-attribute vec2 a_position;
-
-void main() {
-  gl_Position = vec4(a_position, 0.0, 1.0);
-}
-`;
-function createShader(gl, type, source) {
-    const shader = gl.createShader(type);
-    if (!shader) return null;
-    gl.shaderSource(shader, source);
-    gl.compileShader(shader);
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        const error = gl.getShaderInfoLog(shader);
-        gl.deleteShader(shader);
-        throw new Error(`devjar:gl Shader compilation error: ${error}`);
-    }
-    return shader;
-}
-function createProgram(gl, vertexShader, fragmentShader) {
-    const program = gl.createProgram();
-    if (!program) return null;
-    gl.attachShader(program, vertexShader);
-    gl.attachShader(program, fragmentShader);
-    gl.linkProgram(program);
-    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-        const error = gl.getProgramInfoLog(program);
-        gl.deleteProgram(program);
-        throw new Error(`devjar:gl Program linking error: ${error}`);
-    }
-    return program;
-}
-function createQuad(gl) {
-    const buffer = gl.createBuffer();
-    if (!buffer) return null;
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-    // Fullscreen quad: two triangles covering the entire screen
-    const positions = new Float32Array([
-        -1,
-        -1,
-        1,
-        -1,
-        -1,
-        1,
-        -1,
-        1,
-        1,
-        -1,
-        1,
-        1
-    ]);
-    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
-    return buffer;
-}
-function useGL({ fragment, canvasRef, onError }) {
-    const animationFrameRef = useRef(undefined);
-    const glRef = useRef(null);
-    const programRef = useRef(null);
-    const positionBufferRef = useRef(null);
-    const startTimeRef = useRef(performance.now());
-    const mouseRef = useRef({
-        x: 0,
-        y: 0
-    });
-    // Initialize WebGL
-    useEffect(()=>{
-        const canvas = canvasRef.current;
-        if (!canvas) return;
-        const gl = canvas.getContext('webgl');
-        if (!gl) {
-            onError?.('devjar:gl WebGL is not supported in your browser');
-            return;
-        }
-        glRef.current = gl;
-        // Create quad buffer once
-        const positionBuffer = createQuad(gl);
-        if (positionBuffer) {
-            positionBufferRef.current = positionBuffer;
-        }
-        // Set canvas size
-        const resizeCanvas = ()=>{
-            const rect = canvas.getBoundingClientRect();
-            const dpr = window.devicePixelRatio || 1;
-            const width = rect.width;
-            const height = rect.height;
-            canvas.width = width * dpr;
-            canvas.height = height * dpr;
-            canvas.style.width = `${width}px`;
-            canvas.style.height = `${height}px`;
-            gl.viewport(0, 0, canvas.width, canvas.height);
-        };
-        resizeCanvas();
-        window.addEventListener('resize', resizeCanvas);
-        // Use ResizeObserver for more accurate sizing
-        const resizeObserver = new ResizeObserver(()=>{
-            resizeCanvas();
-        });
-        resizeObserver.observe(canvas);
-        // Handle mouse movement
-        const handleMouseMove = (e)=>{
-            const rect = canvas.getBoundingClientRect();
-            mouseRef.current = {
-                x: (e.clientX - rect.left) / rect.width,
-                y: 1.0 - (e.clientY - rect.top) / rect.height
-            };
-        };
-        canvas.addEventListener('mousemove', handleMouseMove);
-        return ()=>{
-            window.removeEventListener('resize', resizeCanvas);
-            canvas.removeEventListener('mousemove', handleMouseMove);
-            resizeObserver.disconnect();
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
-            if (positionBufferRef.current && gl) {
-                gl.deleteBuffer(positionBufferRef.current);
-            }
-        };
-    }, [
-        canvasRef,
-        onError
-    ]);
-    // Compile and render shader
-    useEffect(()=>{
-        const gl = glRef.current;
-        const canvas = canvasRef.current;
-        if (!gl || !canvas) return;
-        onError?.(null);
-        try {
-            // Create shaders
-            const vertexShader = createShader(gl, gl.VERTEX_SHADER, DEFAULT_VERTEX_SHADER);
-            if (!vertexShader) throw new Error('devjar:gl Failed to create vertex shader');
-            const compiledFragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragment);
-            if (!compiledFragmentShader) throw new Error('devjar:gl Failed to create fragment shader');
-            // Create program
-            const program = createProgram(gl, vertexShader, compiledFragmentShader);
-            if (!program) throw new Error('devjar:gl Failed to create program');
-            // Clean up old program
-            if (programRef.current) {
-                gl.deleteProgram(programRef.current);
-            }
-            programRef.current = program;
-            // Clean up shaders (they're linked into the program)
-            gl.deleteShader(vertexShader);
-            gl.deleteShader(compiledFragmentShader);
-            // Render loop
-            const render = ()=>{
-                if (!gl || !canvas || !programRef.current || !positionBufferRef.current) return;
-                const program = programRef.current;
-                const positionBuffer = positionBufferRef.current;
-                // Clear
-                gl.clearColor(0, 0, 0, 1);
-                gl.clear(gl.COLOR_BUFFER_BIT);
-                // Use program
-                gl.useProgram(program);
-                // Set up position attribute
-                const positionLocation = gl.getAttribLocation(program, 'a_position');
-                if (positionLocation >= 0) {
-                    gl.enableVertexAttribArray(positionLocation);
-                    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-                    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
-                }
-                // Set uniforms
-                const time = (performance.now() - startTimeRef.current) / 1000;
-                const resolutionLocation = gl.getUniformLocation(program, 'u_resolution');
-                const timeLocation = gl.getUniformLocation(program, 'u_time');
-                const mouseLocation = gl.getUniformLocation(program, 'u_mouse');
-                if (resolutionLocation) {
-                    gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
-                }
-                if (timeLocation) {
-                    gl.uniform1f(timeLocation, time);
-                }
-                if (mouseLocation) {
-                    gl.uniform2f(mouseLocation, mouseRef.current.x, mouseRef.current.y);
-                }
-                // Draw
-                gl.drawArrays(gl.TRIANGLES, 0, 6);
-                animationFrameRef.current = requestAnimationFrame(render);
-            };
-            // Start render loop
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
-            render();
-            // Cleanup function
-            return ()=>{
-                if (animationFrameRef.current) {
-                    cancelAnimationFrame(animationFrameRef.current);
-                }
-                if (programRef.current && gl) {
-                    gl.deleteProgram(programRef.current);
-                    programRef.current = null;
-                }
-            };
-        } catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-            const prefixedMessage = errorMessage.startsWith('devjar:gl ') ? errorMessage : `devjar:gl ${errorMessage}`;
-            onError?.(prefixedMessage);
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
-        }
-    }, [
-        fragment,
-        canvasRef,
-        onError
-    ]);
-}
-
-export { useGL };