devjar 0.4.0 → 0.6.0

package/README.md

@@ -13,7 +13,7 @@ Notice: devjar only works for browser runtime at the moment. It will always rend
 ### Install
 
 ```sh
-yarn add devjar
+pnpm add devjar
 ```
 
 

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+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;
+}): {
+    ref: react.RefObject<any>;
+    error: undefined;
+    load: (files: any) => Promise<void>;
+};
+
+declare function DevJar({ files, getModuleUrl, onError, ...props }: {
+    files: Record<string, string>;
+    getModuleUrl?: (name: string) => string;
+    onError?: (...data: any[]) => void;
+} & React.IframeHTMLAttributes<HTMLIFrameElement>): react_jsx_runtime.JSX.Element;
+
+export { DevJar, useLiveCode };

package/dist/index.js

@@ -0,0 +1,315 @@
+import { useRef, useState, useId, useEffect, useCallback } from 'react';
+import { transform } from 'sucrase';
+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;
+    }
+    function updateImportMap(imports) {
+        imports['react'] = getModuleUrl('react');
+        imports['react-dom'] = getModuleUrl('react-dom');
+        imports['react-dom/client'] = getModuleUrl('react-dom/client');
+        const script = document.createElement('script');
+        script.type = 'importmap-shim';
+        script.innerHTML = JSON.stringify({
+            imports
+        });
+        document.body.appendChild(script);
+        if (currentImportMap) {
+            currentImportMap.parentNode.removeChild(currentImportMap);
+        }
+        currentImportMap = script;
+    }
+    function createInlinedModule(code, type) {
+        if (type === 'css') return `data:text/css;utf-8,${encodeURIComponent(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.js');
+}
+
+let esModuleLexerInit;
+const isRelative = (s)=>s.startsWith('./');
+function transformCode(_code, getModuleUrl, externals) {
+    const code = transform(_code, {
+        transforms: [
+            'jsx',
+            'typescript'
+        ]
+    }).code;
+    return replaceImports(code, getModuleUrl, externals);
+}
+function replaceImports(source, getModuleUrl, externals) {
+    let code = '';
+    let lastIndex = 0;
+    let hasReactImports = false;
+    const [imports] = parse(source);
+    const cssImports = [];
+    let cssImportIndex = 0;
+    // 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 
+        ;
+        // handle imports
+        if (n.endsWith('.css')) {
+            // Map './styles.css' -> '@styles.css', and collect it
+            const cssPath = `${'@' + n.slice(2)}`;
+            cssImports.push(cssPath);
+        } else {
+            code += source.substring(ss, s);
+            code += isRelative(n) ? '@' + n.slice(2) : externals.has(n) ? n : getModuleUrl(n);
+            code += source.substring(e, se);
+        }
+        lastIndex = se;
+        if (n === 'react') {
+            const statement = source.slice(ss, se);
+            if (statement.includes('React')) {
+                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`;
+    }
+    code += source.substring(lastIndex);
+    if (!hasReactImports) {
+        code = `import React from 'react';\n${code}`;
+    }
+    return code;
+}
+function createRenderer(createModule_, getModuleUrl) {
+    let reactRoot;
+    async function render(files) {
+        const mod = await createModule_(files, {
+            getModuleUrl
+        });
+        const ReactMod = await self.importShim('react');
+        const ReactDOMMod = await self.importShim('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);
+                }
+                return this.props.children;
+            }
+            constructor(props){
+                super(props);
+                this.state = {
+                    error: null
+                };
+            }
+        }
+        if (!reactRoot) {
+            reactRoot = ReactDOMMod.createRoot(root);
+        }
+        const Component = mod.default;
+        const element = _jsx(ErrorBoundary, null, _jsx(Component));
+        reactRoot.render(element);
+    }
+    return render;
+}
+function createMainScript({ uid }) {
+    const code = `\
+'use strict';
+const _createModule = ${createModule.toString()};
+const _createRenderer = ${createRenderer.toString()};
+
+const getModuleUrl = (m) => window.parent.__devjar__[globalThis.uid].getModuleUrl(m)
+
+globalThis.uid = ${JSON.stringify(uid)};
+globalThis.__render__ = _createRenderer(_createModule, getModuleUrl);
+`;
+    return code;
+}
+function createEsShimOptionsScript() {
+    return `\
+window.esmsInitOptions = {
+  polyfillEnable: ['css-modules', 'json-modules'],
+  onerror: error => console.log(error),
+}`;
+}
+function useScript() {
+    return useRef(typeof window !== 'undefined' ? document.createElement('script') : null);
+}
+function createScript(scriptRef, { content, src, type } = {}) {
+    const script = scriptRef.current;
+    if (type) script.type = type;
+    if (content) {
+        script.src = `data:text/javascript;utf-8,${encodeURIComponent(content)}`;
+    }
+    if (src) {
+        script.src = src;
+    }
+    return script;
+}
+function useLiveCode({ getModuleUrl }) {
+    const iframeRef = useRef(null);
+    const [error, setError] = useState();
+    const rerender = useState({})[1];
+    const appScriptRef = useScript();
+    const esShimOptionsScriptRef = useScript();
+    const tailwindcssScriptRef = useScript();
+    const uid = useId();
+    // Let getModuleUrl executed on parent window side since it might involve
+    // variables that iframe cannot access.
+    useEffect(()=>{
+        if (!globalThis.__devjar__) {
+            globalThis.__devjar__ = {};
+        }
+        globalThis.__devjar__[uid] = {
+            getModuleUrl
+        };
+        return ()=>{
+            if (globalThis.__devjar__) {
+                delete globalThis.__devjar__[uid];
+            }
+        };
+    }, []);
+    useEffect(()=>{
+        const iframe = iframeRef.current;
+        if (!iframe || !iframe.contentDocument) return;
+        const doc = iframe.contentDocument;
+        const body = doc.body;
+        const div = document.createElement('div');
+        div.id = '__reactRoot';
+        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://cdn.tailwindcss.com'
+        });
+        body.appendChild(div);
+        body.appendChild(esmShimOptionsScript);
+        body.appendChild(appScript);
+        body.appendChild(tailwindScript);
+        return ()=>{
+            if (!iframe || !iframe.contentDocument) return;
+            body.removeChild(div);
+            body.removeChild(esmShimOptionsScript);
+            body.removeChild(appScript);
+            body.removeChild(tailwindScript);
+        };
+    }, []);
+    const load = useCallback(async (files)=>{
+        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');
+            try {
+                /**
+         * transformedFiles
+         * {
+         *  'index.js': '...',
+         *  '@mod1': '...',
+         *  '@mod2': '...',
+         */ const transformedFiles = Object.keys(files).reduce((res, filename)=>{
+                    const key = isRelative(filename) ? '@' + filename.slice(2) : filename;
+                    if (filename.endsWith('.css')) {
+                        res[key] = files[filename];
+                    } else {
+                        res[key] = transformCode(files[filename], getModuleUrl, overrideExternals);
+                    }
+                    return res;
+                }, {});
+                const iframe = iframeRef.current;
+                const script = appScriptRef.current;
+                if (iframe) {
+                    const render = iframe.contentWindow.__render__;
+                    if (render) {
+                        render(transformedFiles);
+                    } else {
+                        // if render is not loaded yet, wait until it's loaded
+                        script.onload = ()=>{
+                            iframe.contentWindow.__render__(transformedFiles);
+                        };
+                    }
+                }
+                setError(undefined);
+            } catch (e) {
+                console.error(e);
+                setError(e);
+            }
+        }
+        rerender({});
+    }, []);
+    return {
+        ref: iframeRef,
+        error,
+        load
+    };
+}
+
+const defaultOnError = typeof window !== 'undefined' ? console.error : ()=>{};
+function DevJar({ files, getModuleUrl, onError = defaultOnError, ...props }) {
+    const onErrorRef = useRef(onError);
+    const { ref, error, load } = useLiveCode({
+        getModuleUrl
+    });
+    useEffect(()=>{
+        onErrorRef.current(error);
+    }, [
+        error
+    ]);
+    // load code files and execute them as live code
+    useEffect(()=>{
+        load(files);
+    }, [
+        files
+    ]);
+    // Attach the ref to an iframe element for runtime of code execution
+    return /*#__PURE__*/ jsx("iframe", {
+        ...props,
+        ref: ref
+    });
+}
+
+export { DevJar, useLiveCode };

package/package.json

@@ -1,36 +1,43 @@
 {
   "name": "devjar",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "exports": {
-    ".": "./lib/index.mjs",
+    ".": "./dist/index.js",
     "./package.json": "./package.json"
   },
   "license": "MIT",
   "files": [
-    "lib"
+    "dist"
   ],
-  "types": "./lib/index.d.ts",
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "build:site": "next build ./site",
+    "build": "bunchee",
+    "prepublishOnly": "pnpm run build",
+    "build:site": "pnpm run build && next build ./site",
     "start": "next start ./site",
     "dev": "next dev ./site"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
-    "es-module-lexer": "0.10.5",
-    "es-module-shims": "1.5.9",
-    "sucrase": "3.23.0"
+    "es-module-lexer": "1.6.0",
+    "es-module-shims": "2.0.3",
+    "sucrase": "3.35.0"
   },
   "devDependencies": {
-    "codice": "latest",
+    "@types/node": "^22.10.7",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "bunchee": "^6.3.2",
+    "codice": "^0.4.4",
     "devjar": "link:./",
-    "lodash-es": "^4.17.21",
-    "next": "^13.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sugar-high": "^0.4.5"
-  }
+    "next": "^15.1.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sugar-high": "^0.8.2",
+    "typescript": "^5.7.3"
+  },
+  "packageManager": "pnpm@9.15.4"
 }

package/lib/core.mjs

@@ -1,274 +0,0 @@
-import { useEffect, useCallback, useState, useId, useRef } from 'react'
-import { createModule } from './module.mjs'
-import { transform } from 'sucrase'
-import { init, parse } from 'es-module-lexer'
-
-let esModuleLexerInit
-
-const isRelative = s => s.startsWith('./')
-
-function transformCode(_code, getModuleUrl, externals) {
-  const code = transform(_code, {
-    transforms: ['jsx', 'typescript'],
-  }).code
-
-  return replaceImports(code, getModuleUrl, externals)
-}
-
-function replaceImports(source, getModuleUrl, externals) {
-  let code = ''
-  let lastIndex = 0
-  let hasReactImports = false
-  const [imports] = parse(source)
-  const cssImports = []
-  let cssImportIndex = 0
-  
-  // start, end, statementStart, statementEnd, assertion, name
-  imports.forEach(({ s, e, ss, se, a, n }) => {
-    let isCss = false
-    code += source.slice(lastIndex, ss) // content from last import to beginning of this line 
-    
-
-    // handle imports
-    if (n.endsWith('.css')) {
-      isCss = true
-      // Map './styles.css' -> '@styles.css', and collect it
-      const cssPath = `${'@' + n.slice(2)}`
-      cssImports.push(cssPath)
-      
-    } else {
-      code += source.substring(ss, s)
-      code += isRelative(n)
-          ? ('@' + n.slice(2))
-          : externals.has(n) ? n : getModuleUrl(n)
-      code += source.substring(e, se)
-    }
-    
-    lastIndex = se
-
-    if (n === 'react') {
-      const statement = source.slice(ss, se)
-      if (statement.includes('React')) {
-        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`
-  }
-
-  code += source.substring(lastIndex)
-
-  if (!hasReactImports) {
-    code = `import React from 'react';\n${code}`
-  }
-
-  return code
-}
-
-function createRenderer(createModule_, getModuleUrl) {
-  let reactRoot
-
-  async function render(files) {
-    const mod = await createModule_(files, { getModuleUrl })
-    const React_ = await self.importShim('react')
-    const ReactDOM_ = await self.importShim('react-dom')
-
-    const _jsx = React_.createElement
-    const root = document.getElementById('root')
-    class ErrorBoundary extends React_.Component {
-      constructor(props) {
-        super(props)
-        this.state = { error: null }
-      }
-      componentDidCatch(error) {
-        this.setState({ error })
-      }
-      render() {
-        if (this.state.error) {
-          return _jsx('div', null, this.state.error.message)
-        }
-        return this.props.children
-      }
-    }
-
-    const isReact18 = !!ReactDOM_.createRoot
-    if (isReact18 && !reactRoot) {
-      reactRoot = ReactDOM_.createRoot(root)
-    }
-    const Component = mod.default
-    const element = _jsx(ErrorBoundary, null, _jsx(Component))
-    if (isReact18) {
-      reactRoot.render(element)
-    } else {
-      ReactDOM_.render(element, root)
-    }
-  }
-
-  return render
-}
-
-function createMainScript({ uid }) {
-  const code = (
-`'use strict';
-const _createModule = ${createModule.toString()};
-const _createRenderer = ${createRenderer.toString()};
-
-const getModuleUrl = (m) => window.parent.__devjar__[globalThis.uid].getModuleUrl(m)
-
-globalThis.uid = ${JSON.stringify(uid)};
-globalThis.__render__ = _createRenderer(_createModule, getModuleUrl);
-`)
-  return code
-}
-
-function createEsShimOptionsScript() {
-  return `window.esmsInitOptions = {
-    polyfillEnable: ['css-modules', 'json-modules'],
-    onerror: error => console.log(error),
-  }`
-}
-
-function useScript() {
-  return useRef(typeof window !== 'undefined' ? document.createElement('script') : null)
-}
-
-function setScript(scriptRef, scriptContent, { type } = {}) {
-  const script = scriptRef.current
-  if (type) script.type = type
-  
-  script.src = `data:text/javascript;utf-8,${encodeURIComponent(scriptContent)}`
-  return script
-}
-
-function useLiveCode({ getModuleUrl }) {
-  const iframeRef = useRef()
-  const [error, setError] = useState()
-  const rerender = useState({})[1]
-  const appScriptRef = useScript()
-  const esShimOptionsScript = useScript()
-  const uid = useId()
-
-  // Let getModuleUrl executed on parent window side since it might involve
-  // variables that iframe cannot access.
-  useEffect(() => {
-    if (!globalThis.__devjar__) {
-      globalThis.__devjar__ = {};
-    }
-    globalThis.__devjar__[uid] = {
-      getModuleUrl,
-    }
-
-    return () => {
-      if (globalThis.__devjar__) {
-        delete globalThis.__devjar__[uid]
-      }
-    }
-  }, [])
-
-  useEffect(() => {
-    const iframe = iframeRef.current
-    if (!iframe || !iframe.contentDocument) return
-    
-    const doc = iframe.contentDocument
-    const div = document.createElement('div')
-    div.id = 'root'
-    
-    const appScriptContent = createMainScript({ uid })
-    const scriptOptionsContent = createEsShimOptionsScript()
-    
-    const esmShimOptionsScript = setScript(esShimOptionsScript, scriptOptionsContent)
-    const appScript = setScript(appScriptRef, appScriptContent, { type: 'module' })
-    // const script = scriptRef.current
-    // script.type = 'module'
-    // script.id = 'main'
-    // script.src = `data:text/javascript;utf-8,${encodeURIComponent(scriptContent)}`
-
-    doc.body.appendChild(div)
-    doc.body.appendChild(esmShimOptionsScript)
-    doc.body.appendChild(appScript)
-    
-    return () => {
-      if (!iframe || !iframe.contentDocument) return
-      doc.body.removeChild(div)
-      doc.body.removeChild(esmShimOptionsScript)
-      doc.body.removeChild(appScript)
-    }
-  }, [])
-
-  const load = useCallback(async (files) => {
-    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')
-
-      try {
-        /**
-         * transformedFiles
-         * {
-         *  'index.js': '...',
-         *  '@mod1': '...',
-         *  '@mod2': '...',
-         */
-        const transformedFiles = Object.keys(files).reduce((res, filename) => {
-          const key = isRelative(filename) ? ('@' + filename.slice(2)) : filename
-          if (filename.endsWith('.css')) {
-            res[key] = files[filename]
-          } else {
-            res[key] = transformCode(files[filename], getModuleUrl, overrideExternals)
-          }
-          return res
-        }, {})
-
-        const iframe = iframeRef.current
-        const script = appScriptRef.current
-        if (iframe) {
-          const render = iframe.contentWindow.__render__
-          if (render) {
-            render(transformedFiles)
-          } else {
-            // if render is not loaded yet, wait until it's loaded
-            script.onload = () => {
-              iframe.contentWindow.__render__(transformedFiles)
-            }
-          }
-        }
-        setError()
-      } catch (e) {
-        console.error(e)
-        setError(e)
-      }
-    }
-    rerender({})
-  }, [])
-
-  return { ref: iframeRef, error, load }
-}
-
-export { 
-  createModule,
-  useLiveCode,
-}

package/lib/index.d.ts

@@ -1,13 +0,0 @@
-import React from 'react'
-
-type LiveCodeHandles = {
-  load(files: Record<string, string>): void
-  ref: React.Ref
-  error?: unknown
-}
-
-type Options = {
-  getModuleUrl(modulePath: string): string
-}
-
-export function useLiveCode(options: Options): LiveCodeHandles

package/lib/index.mjs

@@ -1,2 +0,0 @@
-export { DevJar } from './render.mjs'
-export { useLiveCode } from './core.mjs'

package/lib/module.mjs

@@ -1,48 +0,0 @@
-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
-  }
-
-  function updateImportMap(imports) {
-    imports['react'] = getModuleUrl('react')
-    imports['react-dom'] = getModuleUrl('react-dom')
-
-    const script = document.createElement('script')
-    script.type = 'importmap-shim'
-    script.innerHTML = JSON.stringify({ imports })
-    document.body.appendChild(script)
-    if (currentImportMap) {
-      currentImportMap.parentNode.removeChild(currentImportMap)
-    }
-    currentImportMap = script
-  }
-
-
-  function createInlinedModule(code, type) {
-    if (type === 'css') return `data:text/css;utf-8,${encodeURIComponent(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.js')
-}
-
-export { createModule }

package/lib/render.mjs

@@ -1,21 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { useLiveCode } from './core.mjs'
-
-const defaultOnError = typeof window !== 'undefined' ? console.error : (() => {})
-
-export function DevJar({ files, getModuleUrl, onError = defaultOnError, ...props }) {
-  const onErrorRef = useRef(onError)
-  const { ref, error, load } = useLiveCode({ getModuleUrl })
-
-  useEffect(() => {
-    onErrorRef.current(error)
-  }, [error])
-
-  // load code files and execute them as live code
-  useEffect(() => {
-    load(files)
-  }, [files])
-
-  // Attach the ref to an iframe element for runtime of code execution
-  return React.createElement('iframe', { ...props, ref })
-}