devjar 0.3.1 → 0.4.0

package/lib/core.mjs

@@ -15,33 +15,68 @@ function transformCode(_code, getModuleUrl, externals) {
   return replaceImports(code, getModuleUrl, externals)
 }
 
-function replaceImports(_code, getModuleUrl, externals) {
+function replaceImports(source, 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
+  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 = _code.slice(ss, se)
+      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++
+    })
   })
-  code += _code.substring(lastIndex)
+
+  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
 }
 
@@ -101,11 +136,31 @@ 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 scriptRef = useRef(typeof window !== 'undefined' ? document.createElement('script') : null)
+  const appScriptRef = useScript()
+  const esShimOptionsScript = useScript()
   const uid = useId()
 
   // Let getModuleUrl executed on parent window side since it might involve
@@ -127,27 +182,31 @@ function useLiveCode({ getModuleUrl }) {
 
   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 })
+    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)}`
 
-      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)
-    }
+    doc.body.appendChild(div)
+    doc.body.appendChild(esmShimOptionsScript)
+    doc.body.appendChild(appScript)
+    
     return () => {
-      if (iframe) {
-        doc.body.removeChild(doc.getElementById('root'))
-        doc.body.removeChild(doc.getElementById('main'))
-      }
+      if (!iframe || !iframe.contentDocument) return
+      doc.body.removeChild(div)
+      doc.body.removeChild(esmShimOptionsScript)
+      doc.body.removeChild(appScript)
     }
   }, [])
 
@@ -158,6 +217,7 @@ function useLiveCode({ getModuleUrl }) {
     }
 
     if (files) {
+      // { 'react', 'react-dom' }
       const overrideExternals =
         new Set(Object.keys(files).filter(name => !isRelative(name) && name !== 'index.js'))
 
@@ -166,14 +226,25 @@ function useLiveCode({ getModuleUrl }) {
       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
-          res[key] = transformCode(files[filename], getModuleUrl, overrideExternals)
+          if (filename.endsWith('.css')) {
+            res[key] = files[filename]
+          } else {
+            res[key] = transformCode(files[filename], getModuleUrl, overrideExternals)
+          }
           return res
         }, {})
 
         const iframe = iframeRef.current
-        const script = scriptRef.current
+        const script = appScriptRef.current
         if (iframe) {
           const render = iframe.contentWindow.__render__
           if (render) {
@@ -187,6 +258,7 @@ function useLiveCode({ getModuleUrl }) {
         }
         setError()
       } catch (e) {
+        console.error(e)
         setError(e)
       }
     }

package/lib/module.mjs

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devjar",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "exports": {
     ".": "./lib/index.mjs",
@@ -12,9 +12,9 @@
   ],
   "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"
@@ -28,7 +28,7 @@
     "codice": "latest",
     "devjar": "link:./",
     "lodash-es": "^4.17.21",
-    "next": "^13.1.6",
+    "next": "^13.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sugar-high": "^0.4.5"