devjar 0.3.1 → 0.5.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/lib/core.js

@@ -0,0 +1,278 @@
+import { useEffect, useCallback, useState, useId, useRef } from 'react'
+import { createModule } from './module.js'
+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 }) => {
+    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')
+
+    const _jsx = ReactMod.createElement
+    const root = document.getElementById('__reactRoot')
+    class ErrorBoundary extends ReactMod.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 = !!ReactDOMMod.createRoot
+    if (isReact18 && !reactRoot) {
+      reactRoot = ReactDOMMod.createRoot(root)
+    }
+    const Component = mod.default
+    const element = _jsx(ErrorBoundary, null, _jsx(Component))
+    if (isReact18) {
+      reactRoot.render(element)
+    } else {
+      ReactDOMMod.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 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()
+  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()
+      } catch (e) {
+        console.error(e)
+        setError(e)
+      }
+    }
+    rerender({})
+  }, [])
+
+  return { ref: iframeRef, error, load }
+}
+
+export { 
+  createModule,
+  useLiveCode,
+}

package/lib/index.js

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

package/lib/{module.mjs → module.js}

@@ -27,15 +27,17 @@ async function createModule(files, { getModuleUrl }) {
   }
 
 
-  function createInlinedModule(code) {
+  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(([key, code]) => [
-      key,
-      createInlinedModule(code),
+    Object.entries(files).map(([fileName, code]) => [
+      fileName,
+      createInlinedModule(code, fileName.endsWith('.css') ? 'css' : 'js'),
     ])
   )
 

package/lib/{render.mjs → render.js}

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { useLiveCode } from './core.mjs'
+import { useLiveCode } from './core.js'
 
 const defaultOnError = typeof window !== 'undefined' ? console.error : (() => {})
 

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "devjar",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "type": "module",
   "exports": {
-    ".": "./lib/index.mjs",
+    ".": "./lib/index.js",
     "./package.json": "./package.json"
   },
   "license": "MIT",
@@ -12,25 +12,25 @@
   ],
   "types": "./lib/index.d.ts",
   "scripts": {
-    "build": "next build ./docs",
-    "start": "next start ./docs",
-    "dev": "next dev ./docs"
+    "build:site": "next build ./site",
+    "start": "next start ./site",
+    "dev": "next dev ./site"
   },
   "peerDependencies": {
     "react": "^18.2.0"
   },
   "dependencies": {
-    "es-module-lexer": "0.10.5",
-    "es-module-shims": "1.5.9",
-    "sucrase": "3.23.0"
+    "es-module-lexer": "1.4.1",
+    "es-module-shims": "1.8.2",
+    "sucrase": "3.35.0"
   },
   "devDependencies": {
-    "codice": "latest",
+    "codice": "^0.2.0",
     "devjar": "link:./",
-    "lodash-es": "^4.17.21",
-    "next": "^13.1.6",
+    "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sugar-high": "^0.4.5"
-  }
+    "sugar-high": "^0.5.6"
+  },
+  "packageManager": "pnpm@7.33.5"
 }

package/lib/core.mjs

@@ -1,202 +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(_code, getModuleUrl, externals) {
-  let code = ''
-  let lastIndex = 0
-  let hasReactImports = false
-  const [imports] = parse(_code)
-  imports.forEach(({ s, e, ss, se, n }) => {
-    code += _code.slice(lastIndex, ss)
-    code += _code.substring(ss, s)
-    code += isRelative(n)
-        ? ('@' + n.slice(2))
-        : externals.has(n) ? n : getModuleUrl(n)
-    code += _code.substring(e, se)
-    lastIndex = se
-
-
-    if (n === 'react') {
-      const statement = _code.slice(ss, se)
-      if (statement.includes('React')) {
-        hasReactImports = true
-      }
-    }
-  })
-  code += _code.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 useLiveCode({ getModuleUrl }) {
-  const iframeRef = useRef()
-  const [error, setError] = useState()
-  const rerender = useState({})[1]
-  const scriptRef = useRef(typeof window !== 'undefined' ? document.createElement('script') : null)
-  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
-    const doc = iframe && iframe.contentDocument
-
-    if (iframe) {
-      const doc = iframe.contentDocument
-      const div = document.createElement('div')
-      const script = scriptRef.current
-      const scriptContent = createMainScript({ uid })
-
-      div.id = 'root'
-      script.type = 'module'
-      script.id = 'main'
-      script.src = `data:text/javascript;utf-8,${encodeURIComponent(scriptContent)}`
-
-      doc.body.appendChild(div)
-      doc.body.appendChild(script)
-    }
-    return () => {
-      if (iframe) {
-        doc.body.removeChild(doc.getElementById('root'))
-        doc.body.removeChild(doc.getElementById('main'))
-      }
-    }
-  }, [])
-
-  const load = useCallback(async (files) => {
-    if (!esModuleLexerInit) {
-      await init
-      esModuleLexerInit = true
-    }
-
-    if (files) {
-      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 {
-        const transformedFiles = Object.keys(files).reduce((res, filename) => {
-          const key = isRelative(filename) ? ('@' + filename.slice(2)) : filename
-          res[key] = transformCode(files[filename], getModuleUrl, overrideExternals)
-          return res
-        }, {})
-
-        const iframe = iframeRef.current
-        const script = scriptRef.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) {
-        setError(e)
-      }
-    }
-    rerender({})
-  }, [])
-
-  return { ref: iframeRef, error, load }
-}
-
-export { 
-  createModule,
-  useLiveCode,
-}

package/lib/index.mjs

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