devjar 0.0.1 → 0.2.0

package/README.md

@@ -1 +1,51 @@
 # devjar
+> bundless runtime for your ESM JavaScript project in browser
+
+
+![image](https://repository-images.githubusercontent.com/483779830/23b4d7c8-dd8e-48b0-a3ea-c519e8236714)
+
+### Install
+
+```sh
+yarn add devjar
+```
+
+### Usage
+
+```js
+import { useLiveCode } from 'devjar'
+
+function Playground() {
+  const { ref, error, load } = useLiveCode({
+    getModulePath(modPath) {
+      return `https://cdn.skypack.dev/${modPath}`
+    }
+  })
+
+  // logging failures
+  if (error) {
+    console.error(error)
+  }
+
+  // load code files and execute them as live code
+  function run() {
+    load({
+      'index.js': `export default function Main() { return 'hello world' }`,
+      './mod': `...` // other relative modules
+    })
+  }
+
+  // Attach the ref to an iframe element for runtime of code execution
+  return (
+    <div>
+      <button onClick={run}>run</h3>
+      <iframe ref={ref} />
+    </div>
+  )
+}
+```
+
+### License
+
+The MIT License (MIT).
+

package/lib/core.mjs

@@ -0,0 +1,46 @@
+async function createModule(files, { getModulePath }) {
+  let currentImportMap
+  let shim
+
+  async function setupImportMap() {
+    if (shim) return shim
+    window.esmsInitOptions = {
+      shimMode: true,
+      mapOverrides: true,
+    }
+    shim = import(/* webpackIgnore: true */ getModulePath('es-module-shims'))
+    await shim
+  }
+
+  function updateImportMap(imports) {
+    imports['react'] = getModulePath('react')
+    imports['react-dom'] = getModulePath('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) {
+    return `data:text/javascript;utf-8,${encodeURIComponent(code)}`
+  }
+
+  await setupImportMap()
+  const imports = Object.fromEntries(
+    Object.entries(files).map(([key, code]) => [
+      key,
+      createInlinedModule(code),
+    ])
+  )
+
+  updateImportMap(imports)
+  return self.importShim('index.js')
+}
+
+export { createModule }

package/lib/index.mjs

@@ -1,39 +1,166 @@
+import { useEffect, useCallback, useState, useRef } from 'react'
+import { createModule } from './core.mjs'
 import { transform } from 'sucrase'
+import { init, parse } from 'es-module-lexer'
 
-const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
+let esModuleLexerInit
 
-async function createModuleImporter(code) {
-  const buildModule = new AsyncFunction(undefined, `return await import('data:text/javascript;base64,${btoa(code)}')`)
-  let mod
-  try {
-    mod = buildModule()
-  } catch (e) {
-    return {}
-  }
-  return mod
-}
+const isRelative = s => s.startsWith('./')
 
-function transformCode(code) {
-  return transform(code, {
+function transformCode(_code, getModulePath, externals) {
+  const code = transform(_code, {
     transforms: ['jsx', 'typescript'],
   }).code
+
+  return replaceImports(code, getModulePath, externals)
 }
 
-async function createModule(code) {
-  const transformed = transformCode(code)
-  return createModuleImporter(transformed)
+function replaceImports(_code, getModulePath, externals) {
+  const [imports] = parse(_code)
+  let code = ''
+  let lastIndex = 0
+  imports.forEach(({ ss, s, e, se, n }) => {
+    code += _code.slice(lastIndex, ss)
+    code += _code.substring(ss, s)
+    code += isRelative(n)
+        ? ('@' + n.slice(2))
+        : externals.has(n) ? n : getModulePath(n)
+    code += _code.substring(e, se)
+    lastIndex = se
+  })
+  code += _code.substring(lastIndex)
+  return code
 }
 
-async function loadModule(code) {
-  let mod = {}, error
-  try {
-    mod = await createModule(code)
-  } catch (e) {
-    error = e
+function createRenderer(_React0, _ReactDOM0, _createModule, _getModulePath) {
+  let reactRoot
+
+  async function render(files) {
+    const mod = await _createModule(files, { getModulePath: _getModulePath })
+    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 {
+      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 { mod, error }
+
+  return render
 }
 
-export {
-  loadModule,
+function createMainScript({ getModulePath }) {
+  const code = (
+`'use strict';
+const createModule = ${createModule.toString()};
+const createRenderer = ${createRenderer.toString()};
+const getModulePath = ${getModulePath.toString()};
+
+globalThis.__render__ = createRenderer(0, 0, createModule, getModulePath);
+`)
+  return code
+}
+
+
+export function useLiveCode({ getModulePath }) {
+  const iframeRef = useRef()
+  const [error, setError] = useState()
+  const rerender = useState({})[1]
+  const scriptRef = useRef(typeof window !== 'undefined' ? document.createElement('script') : null)
+
+  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({ getModulePath })
+
+      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], getModulePath, 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 }

package/package.json

@@ -1,22 +1,35 @@
 {
   "name": "devjar",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "type": "module",
-  "exports": "./lib/index.mjs",
+  "exports": {
+    ".": "./lib/index.mjs",
+    "./package.json": "./package.json"
+  },
   "license": "MIT",
   "files": [
     "lib"
   ],
   "scripts": {
+    "build": "next build ./docs",
+    "start": "next start ./docs",
     "dev": "next dev ./docs"
   },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0"
+  },
   "dependencies": {
+    "es-module-lexer": "^0.10.5",
+    "es-module-shims": "^1.5.4",
     "sucrase": "3.21.0"
   },
   "devDependencies": {
-    "next": "^12.1.6-canary.4",
+    "codice": "latest",
+    "devjar": "link:./",
+    "lodash-es": "^4.17.21",
+    "next": "canary",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "sugar-high": "^0.3.1"
+    "sugar-high": "^0.4.2"
   }
 }