perf (#57)

* perf

* perf refresh

* perf

* rm gitignore

* redesign website

* fix compatibility

* editor highlighting

* separate worker

* update pnpm

* ci

* update pnpm configs

* update pnpm configs

* add core

* remove gl

Author: huozhi

.github/workflows/ci.yml

@@ -11,25 +11,31 @@ on:
 jobs:
   install:
     runs-on: ubuntu-latest
-    timeout-minutes: 5
+    timeout-minutes: 10
 
     name: Node
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
 
-      - name: Use Node 18 and pnpm
-        uses: actions/setup-node@v4
+      - name: Use Node 24 and pnpm
+        uses: actions/setup-node@v6
         with:
-          node-version: 20
+          node-version: 24
           cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'
 
+      - name: Use Bun
+        uses: oven-sh/setup-bun@v2
+
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Build Site
+        run: pnpm run build:site
+
   release:
     runs-on: ubuntu-latest
     needs: [install]
@@ -39,17 +45,26 @@ jobs:
 
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
 
-      - name: Use Node 18 and pnpm
-        uses: actions/setup-node@v4
+      - name: Use Node 24 and pnpm
+        uses: actions/setup-node@v6
         with:
-          node-version: 20
+          node-version: 24
           cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'
 
+      - name: Use Bun
+        uses: oven-sh/setup-bun@v2
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Package
+        run: pnpm run build
+
       - name: Determine tag
         id: determine_tag
         run: |
@@ -69,5 +84,4 @@ jobs:
         if: steps.determine_tag.outputs.tag == ''
         run: |
           echo "Publishing to latest"
-          pnpm install --frozen-lockfile
-          pnpm publish --no-git-check
+          pnpm publish --no-git-check

.gitignore

@@ -2,4 +2,8 @@
 node_modules
 dist
 .DS_Store
+next-env.d.ts
+tsconfig.tsbuildinfo
+.pnpm-store
+
 

API.md

@@ -0,0 +1,85 @@
+# Devjar API
+
+Devjar runs editable React code in a browser iframe. The runtime renders the default export from `index.js`.
+
+Devjar requires React 19.
+
+## Install
+
+```sh
+pnpm add devjar
+```
+
+## React Runtime
+
+### `<DevJar />`
+
+```tsx
+import { DevJar } from 'devjar'
+
+const files = {
+  'index.js': `export default function App() {
+    return <h1>Hello world</h1>
+  }`,
+}
+
+export function Preview() {
+  return (
+    <DevJar
+      files={files}
+      resolveModule={(specifier) => `https://esm.sh/${specifier}`}
+    />
+  )
+}
+```
+
+Props:
+
+- `files: Record<string, string>`: files available to the runtime. `index.js` is the entry file.
+- `resolveModule?: (specifier: string) => string`: maps bare imports such as `react` or `lucide-react` to browser-loadable module URLs.
+- `onError?: (...data: any[]) => void`: receives runtime or transform errors.
+- `tailwindSrc?: string | false`: Tailwind browser script URL injected into the iframe. Defaults to `https://unpkg.com/@tailwindcss/browser@4`; pass `false` to disable it.
+
+File keys can include relative modules and CSS:
+
+```ts
+const files = {
+  'index.js': `import './styles.css'
+export default function App() {
+  return <button className="button">Save</button>
+}`,
+  './styles.css': `.button { font: inherit; }`,
+}
+```
+
+### `useLiveCode(options)`
+
+Lower-level hook used by `<DevJar />`.
+
+```tsx
+import { useLiveCode } from 'devjar'
+import { useEffect } from 'react'
+
+export function Preview({ files }) {
+  const { ref, error, load } = useLiveCode({
+    resolveModule: (specifier) => `https://esm.sh/${specifier}`,
+  })
+
+  useEffect(() => {
+    load(files)
+  }, [files, load])
+
+  return <iframe ref={ref} />
+}
+```
+
+Options:
+
+- `resolveModule?: (specifier: string) => string`: maps bare imports to browser-loadable module URLs.
+- `tailwindSrc?: string | false`: Tailwind browser script URL injected into the iframe. Defaults to `https://unpkg.com/@tailwindcss/browser@4`; pass `false` to disable it.
+
+Returns:
+
+- `ref`: iframe ref for the runtime.
+- `error`: latest runtime error.
+- `load(files)`: loads and executes a file map.

README.md

@@ -7,7 +7,7 @@
 
 devjar is a library that enables you to live test and share your code snippets and examples with others. devjar will generate a live code editor where you can run your code snippets and view the results in real-time based on the provided code content of your React app.
 
-**Notice:** devjar only works for browser runtime at the moment. It will always render the default export component in `index.js` as the app entry.
+**Notice:** devjar requires React 19 and only works for browser runtime at the moment. It will always render the default export component in `index.js` as the app entry.
 
 ## Install
 
@@ -24,8 +24,9 @@ pnpm add devjar
 **Props**
 
 * `files`: An object that specifies the files you want to include in your development environment.
-* `getModuleUrl`: A function that maps module names to CDN URLs.
+* `resolveModule`: A function that maps module specifiers to browser-loadable module URLs.
 * `onError`: Callback function of error event from the iframe sandbox. By default `console.log`.
+* `tailwindSrc`: Optional Tailwind browser script URL. Pass `false` to disable Tailwind injection.
 
 **Example**
 
@@ -42,8 +43,8 @@ function App() {
   return (
     <DevJar
       files={files}
-      getModuleUrl={(m) => {
-        return `${CDN_HOST}/${m}`
+      resolveModule={(specifier) => {
+        return `${CDN_HOST}/${specifier}`
       }}
     />
   )
@@ -57,7 +58,8 @@ A hook that provides lower-level control over the live code execution environmen
 **Parameters**
 
 * `options`
-  * `getModulePath(module)`: A function that receives the module name and returns the CDN url of each imported module path. For example, import React from 'react' will load React from skypack.dev/react.
+  * `resolveModule(specifier)`: A function that receives a module specifier and returns the browser-loadable URL. For example, import React from 'react' will load React from skypack.dev/react.
+  * `tailwindSrc`: Optional Tailwind browser script URL. Pass `false` to disable Tailwind injection.
 
 **Returns**
 
@@ -75,8 +77,8 @@ 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}`
+    resolveModule(specifier) {
+      return `https://cdn.skypack.dev/${specifier}`
     }
   })
 
@@ -106,77 +108,6 @@ function Playground() {
 }
 ```
 
-## GLSL Shader Runtime
-
-### `useGL(options)`
-
-A hook that renders GLSL fragment shaders using WebGL. Perfect for creating interactive shader playgrounds and visualizations.
-
-**Parameters**
-
-* `options`
-  * `fragment`: The GLSL fragment shader source code as a string.
-  * `canvasRef`: A React ref to an HTML canvas element where the shader will be rendered.
-  * `onError`: Optional callback function that receives error messages (prefixed with `devjar:gl`).
-
-**Available Uniforms**
-
-The hook automatically provides these uniforms to your fragment shader:
-
-* `u_time`: `float` - Elapsed time in seconds since the renderer started
-* `u_resolution`: `vec2` - Canvas dimensions (width, height)
-* `u_mouse`: `vec2` - Normalized mouse position (0.0 to 1.0)
-
-**Example**
-
-```jsx
-import { useGL } from 'devjar'
-import { useRef, useState } from 'react'
-
-function ShaderPlayground() {
-  const canvasRef = useRef(null)
-  const [shaderCode, setShaderCode] = useState(`
-    precision mediump float;
-    
-    uniform vec2 u_resolution;
-    uniform float u_time;
-    uniform vec2 u_mouse;
-    
-    void main() {
-      vec2 st = gl_FragCoord.xy / u_resolution.xy;
-      vec3 color = vec3(st.x, st.y, abs(sin(u_time)));
-      gl_FragColor = vec4(color, 1.0);
-    }
-  `)
-  const [error, setError] = useState(null)
-
-  useGL({
-    fragment: shaderCode,
-    canvasRef,
-    onError: setError
-  })
-
-  return (
-    <div>
-      <textarea
-        value={shaderCode}
-        onChange={(e) => setShaderCode(e.target.value)}
-        style={{ width: '100%', height: '200px' }}
-      />
-      <canvas ref={canvasRef} style={{ width: '100%', height: '300px' }} />
-      {error && <pre style={{ color: 'red' }}>{error}</pre>}
-    </div>
-  )
-}
-```
-
-**Error Handling**
-
-All errors are prefixed with `devjar:gl` for easy identification:
-- `devjar:gl Shader compilation error: ...`
-- `devjar:gl Program linking error: ...`
-- `devjar:gl WebGL is not supported in your browser`
-
 ## License
 
 The MIT License (MIT).

package.json

@@ -3,45 +3,48 @@
   "version": "0.8.0",
   "type": "module",
   "exports": {
-    ".": "./dist/index.js",
-    "./gl": {
-      "types": "./dist/gl.d.ts",
-      "default": "./dist/gl.js"
-    },
-    "./package.json": "./package.json"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   },
   "license": "MIT",
   "files": [
     "dist"
   ],
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "bunchee",
+    "build": "pnpm run build:lib && pnpm run build:worker",
+    "build:lib": "bunchee",
+    "build:worker": "bun build src/transform-worker.ts --outfile dist/transform-worker.js --target browser --format esm",
     "prepublishOnly": "pnpm run build",
     "build:site": "pnpm run build && next build ./site",
     "start": "next start ./site",
-    "dev": "next dev ./site"
+    "dev": "pnpm run build && (pnpm run dev:lib & pnpm run dev:worker & pnpm run dev:site & wait)",
+    "dev:lib": "bunchee --watch",
+    "dev:worker": "bun build src/transform-worker.ts --outfile dist/transform-worker.js --target browser --format esm --watch",
+    "dev:site": "next dev ./site"
   },
   "peerDependencies": {
-    "react": "^18.2.0 || ^19.0.0"
+    "react": "^19.0.0"
   },
   "dependencies": {
-    "dedent": "^1.7.0",
     "es-module-lexer": "1.6.0",
-    "es-module-shims": "2.0.3",
-    "sucrase": "3.35.0"
+    "oxc-transform": "^0.137.0",
+    "react-refresh": "^0.18.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.7",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
-    "bunchee": "^6.3.3",
-    "codice": "^1.5.4",
+    "bunchee": "^6.11.0",
+    "codice": "^1.6.0",
+    "dedent": "^1.7.0",
     "devjar": "link:",
-    "next": "^16.0.7",
+    "next": "16.3.0-canary.69",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "typescript": "^5.7.3"
   },
-  "packageManager": "pnpm@9.15.4"
+  "packageManager": "pnpm@11.9.0"
 }