devjar 0.4.0 → 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.mjs → core.js}

@@ -1,10 +1,9 @@
 import { useEffect, useCallback, useState, useId, useRef } from 'react'
-import { createModule } from './module.mjs'
+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) {
@@ -25,13 +24,11 @@ function replaceImports(source, getModuleUrl, externals) {
   
   // 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)
@@ -85,12 +82,12 @@ function createRenderer(createModule_, getModuleUrl) {
 
   async function render(files) {
     const mod = await createModule_(files, { getModuleUrl })
-    const React_ = await self.importShim('react')
-    const ReactDOM_ = await self.importShim('react-dom')
+    const ReactMod = await self.importShim('react')
+    const ReactDOMMod = await self.importShim('react-dom')
 
-    const _jsx = React_.createElement
-    const root = document.getElementById('root')
-    class ErrorBoundary extends React_.Component {
+    const _jsx = ReactMod.createElement
+    const root = document.getElementById('__reactRoot')
+    class ErrorBoundary extends ReactMod.Component {
       constructor(props) {
         super(props)
         this.state = { error: null }
@@ -106,16 +103,16 @@ function createRenderer(createModule_, getModuleUrl) {
       }
     }
 
-    const isReact18 = !!ReactDOM_.createRoot
+    const isReact18 = !!ReactDOMMod.createRoot
     if (isReact18 && !reactRoot) {
-      reactRoot = ReactDOM_.createRoot(root)
+      reactRoot = ReactDOMMod.createRoot(root)
     }
     const Component = mod.default
     const element = _jsx(ErrorBoundary, null, _jsx(Component))
     if (isReact18) {
       reactRoot.render(element)
     } else {
-      ReactDOM_.render(element, root)
+      ReactDOMMod.render(element, root)
     }
   }
 
@@ -123,8 +120,8 @@ function createRenderer(createModule_, getModuleUrl) {
 }
 
 function createMainScript({ uid }) {
-  const code = (
-`'use strict';
+  const code = (`\
+'use strict';
 const _createModule = ${createModule.toString()};
 const _createRenderer = ${createRenderer.toString()};
 
@@ -137,21 +134,27 @@ globalThis.__render__ = _createRenderer(_createModule, getModuleUrl);
 }
 
 function createEsShimOptionsScript() {
-  return `window.esmsInitOptions = {
-    polyfillEnable: ['css-modules', 'json-modules'],
-    onerror: error => console.log(error),
-  }`
+  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 } = {}) {
+function createScript(scriptRef, { content, src, type } = {}) {
   const script = scriptRef.current
   if (type) script.type = type
   
-  script.src = `data:text/javascript;utf-8,${encodeURIComponent(scriptContent)}`
+  if (content) {
+    script.src = `data:text/javascript;utf-8,${encodeURIComponent(content)}`
+  }
+  if (src) {
+    script.src = src
+  }
   return script
 }
 
@@ -160,7 +163,8 @@ function useLiveCode({ getModuleUrl }) {
   const [error, setError] = useState()
   const rerender = useState({})[1]
   const appScriptRef = useScript()
-  const esShimOptionsScript = useScript()
+  const esShimOptionsScriptRef = useScript()
+  const tailwindcssScriptRef = useScript()
   const uid = useId()
 
   // Let getModuleUrl executed on parent window side since it might involve
@@ -185,28 +189,28 @@ function useLiveCode({ getModuleUrl }) {
     if (!iframe || !iframe.contentDocument) return
     
     const doc = iframe.contentDocument
+    const body = doc.body
     const div = document.createElement('div')
-    div.id = 'root'
+    div.id = '__reactRoot'
     
     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)
+    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
-      doc.body.removeChild(div)
-      doc.body.removeChild(esmShimOptionsScript)
-      doc.body.removeChild(appScript)
+      body.removeChild(div)
+      body.removeChild(esmShimOptionsScript)
+      body.removeChild(appScript)
+      body.removeChild(tailwindScript)
     }
   }, [])
 

package/lib/index.js

@@ -0,0 +1,2 @@
+export { DevJar } from './render.js'
+export { useLiveCode } from './core.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.4.0",
+  "version": "0.5.0",
   "type": "module",
   "exports": {
-    ".": "./lib/index.mjs",
+    ".": "./lib/index.js",
     "./package.json": "./package.json"
   },
   "license": "MIT",
@@ -20,17 +20,17 @@
     "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.2.0",
+    "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/index.mjs

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