devjar 0.2.0 → 0.2.1

package/README.md

@@ -17,6 +17,8 @@ import { useLiveCode } from 'devjar'
 
 function Playground() {
   const { ref, error, load } = useLiveCode({
+    // The CDN url of each imported module path in your code
+    // e.g. `import React from 'react'` will load react from skypack.dev/react
     getModulePath(modPath) {
       return `https://cdn.skypack.dev/${modPath}`
     }
@@ -30,15 +32,18 @@ function Playground() {
   // 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
+      // `index.js` is the entry of every project
+      'index.js': `export default function App() { return 'hello world' }`,
+
+      // other relative modules can be used in the live coding
+      './mod': `export default function Mod() { return 'mod' }`,
     })
   }
 
   // Attach the ref to an iframe element for runtime of code execution
   return (
     <div>
-      <button onClick={run}>run</h3>
+      <button onClick={run}>run</button>
       <iframe ref={ref} />
     </div>
   )

package/lib/index.d.ts

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

package/lib/index.mjs

@@ -16,10 +16,11 @@ function transformCode(_code, getModulePath, externals) {
 }
 
 function replaceImports(_code, getModulePath, externals) {
-  const [imports] = parse(_code)
   let code = ''
   let lastIndex = 0
-  imports.forEach(({ ss, s, e, se, n }) => {
+  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)
@@ -27,22 +28,34 @@ function replaceImports(_code, getModulePath, externals) {
         : externals.has(n) ? n : getModulePath(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(_React0, _ReactDOM0, _createModule, _getModulePath) {
+function createRenderer(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 mod = await createModule_(files, { getModulePath })
+    const React_ = await self.importShim('react')
+    const ReactDOM_ = await self.importShim('react-dom')
 
-    const _jsx = _React.createElement
+    const _jsx = React_.createElement
     const root = document.getElementById('root')
-    class ErrorBoundary extends _React.Component {
+    class ErrorBoundary extends React_.Component {
       state = {
         error: null,
       }
@@ -57,16 +70,16 @@ function createRenderer(_React0, _ReactDOM0, _createModule, _getModulePath) {
       }
     }
 
-    const isReact18 = !!_ReactDOM.createRoot
+    const isReact18 = !!ReactDOM_.createRoot
     if (isReact18 && !reactRoot) {
-      reactRoot = _ReactDOM.createRoot(root)
+      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)
+      ReactDOM_.render(element, root)
     }
   }
 
@@ -76,11 +89,11 @@ function createRenderer(_React0, _ReactDOM0, _createModule, _getModulePath) {
 function createMainScript({ getModulePath }) {
   const code = (
 `'use strict';
-const createModule = ${createModule.toString()};
-const createRenderer = ${createRenderer.toString()};
-const getModulePath = ${getModulePath.toString()};
+const _createModule = ${createModule.toString()};
+const _createRenderer = ${createRenderer.toString()};
+const _getModulePath = ${getModulePath.toString()};
 
-globalThis.__render__ = createRenderer(0, 0, createModule, getModulePath);
+globalThis.__render__ = _createRenderer(_createModule, _getModulePath);
 `)
   return code
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devjar",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "exports": {
     ".": "./lib/index.mjs",
@@ -10,6 +10,7 @@
   "files": [
     "lib"
   ],
+  "types": "./lib/index.d.ts",
   "scripts": {
     "build": "next build ./docs",
     "start": "next start ./docs",