devjar - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

lib/index.d.ts

+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

lib/index.mjs

@@ -19,6 +19,7 @@ import { useEffect, useCallback, useState, useRef } from 'react'
 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)
@@ -31,18 +32,30 @@ code += _code.substring(ss, s)
     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 = {
@@ -62,5 +75,5 @@ error: null,
 
-    const isReact18 = !!_ReactDOM.createRoot
+    const isReact18 = !!ReactDOM_.createRoot
     if (isReact18 && !reactRoot) {
-      reactRoot = _ReactDOM.createRoot(root)
+      reactRoot = ReactDOM_.createRoot(root)
     }
@@ -72,3 +85,3 @@ const Component = mod.default
     } else {
-      _ReactDOM.render(element, root)
+      ReactDOM_.render(element, root)
     }
@@ -83,7 +96,7 @@ }
 `'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);
 `)
@@ -90,0 +103,0 @@ return code

package.json

 {
   "name": "devjar",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
@@ -13,2 +13,3 @@ "exports": {
   ],
+  "types": "./lib/index.d.ts",
   "scripts": {
@@ -15,0 +16,0 @@ "build": "next build ./docs",

README.md

@@ -20,2 +20,4 @@ # devjar
   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) {
@@ -34,4 +36,7 @@ return `https://cdn.skypack.dev/${modPath}`
     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' }`,
     })
@@ -43,3 +48,3 @@ }
     <div>
-      <button onClick={run}>run</h3>
+      <button onClick={run}>run</button>
       <iframe ref={ref} />
@@ -46,0 +51,0 @@ </div>

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8229

10.71%

Number of package files

5

25%

Lines of code

199

11.17%

Number of lines in readme file

57

9.62%

Number of medium supply chain risk alerts

0

-100%

No dependency changes