devjar 0.6.0 → 0.8.0

package/README.md

@@ -1,25 +1,23 @@
 # devjar
 > live code runtime for your react project in browser
 
+![image](https://repository-images.githubusercontent.com/483779830/55bf67ee-fcc6-4a12-ad0c-5221a5f78c26)
 
-![image](https://repository-images.githubusercontent.com/483779830/28347c03-774a-4766-b113-54041fad1e72)
+## Introduction
 
-### Introduction
+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.
 
-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 only works for browser runtime at the moment. It will always render the default export component in `index.js` as the app entry.
-
-### Install
+## Install
 
 ```sh
 pnpm add devjar
 ```
 
+## React Code Runtime
 
-### Usage
-
-#### `<DevJar>`
+### `<DevJar>`
 
 `DevJar` is a react component that allows you to develop and test your code directly in the browser, using a CDN to load your dependencies.
 
@@ -29,6 +27,7 @@ pnpm add devjar
 * `getModuleUrl`: A function that maps module names to CDN URLs.
 * `onError`: Callback function of error event from the iframe sandbox. By default `console.log`.
 
+**Example**
 
 ```jsx
 import { DevJar } from 'devjar'
@@ -51,7 +50,9 @@ function App() {
 }
 ```
 
-#### `useLiveCode(options)`
+### `useLiveCode(options)`
+
+A hook that provides lower-level control over the live code execution environment.
 
 **Parameters**
 
@@ -65,6 +66,8 @@ function App() {
   * `error`: An error message in case the live coding encounters an issue.
   * `load(codeFiles)`: void: Loads code files and executes them as live code.
 
+**Example**
+
 ```jsx
 import { useLiveCode } from 'devjar'
 
@@ -103,7 +106,77 @@ function Playground() {
 }
 ```
 
-### License
+## GLSL Shader Runtime
 
-The MIT License (MIT).
+### `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/dist/gl.js

@@ -0,0 +1,214 @@
+import { useRef, useEffect } from 'react';
+
+// Default vertex shader - simple fullscreen quad
+const DEFAULT_VERTEX_SHADER = `\
+attribute vec2 a_position;
+
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`;
+function createShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (!shader) return null;
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const error = gl.getShaderInfoLog(shader);
+        gl.deleteShader(shader);
+        throw new Error(`devjar:gl Shader compilation error: ${error}`);
+    }
+    return shader;
+}
+function createProgram(gl, vertexShader, fragmentShader) {
+    const program = gl.createProgram();
+    if (!program) return null;
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        const error = gl.getProgramInfoLog(program);
+        gl.deleteProgram(program);
+        throw new Error(`devjar:gl Program linking error: ${error}`);
+    }
+    return program;
+}
+function createQuad(gl) {
+    const buffer = gl.createBuffer();
+    if (!buffer) return null;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    // Fullscreen quad: two triangles covering the entire screen
+    const positions = new Float32Array([
+        -1,
+        -1,
+        1,
+        -1,
+        -1,
+        1,
+        -1,
+        1,
+        1,
+        -1,
+        1,
+        1
+    ]);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+    return buffer;
+}
+function useGL({ fragment, canvasRef, onError }) {
+    const animationFrameRef = useRef(undefined);
+    const glRef = useRef(null);
+    const programRef = useRef(null);
+    const positionBufferRef = useRef(null);
+    const startTimeRef = useRef(performance.now());
+    const mouseRef = useRef({
+        x: 0,
+        y: 0
+    });
+    // Initialize WebGL
+    useEffect(()=>{
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const gl = canvas.getContext('webgl');
+        if (!gl) {
+            onError?.('devjar:gl WebGL is not supported in your browser');
+            return;
+        }
+        glRef.current = gl;
+        // Create quad buffer once
+        const positionBuffer = createQuad(gl);
+        if (positionBuffer) {
+            positionBufferRef.current = positionBuffer;
+        }
+        // Set canvas size
+        const resizeCanvas = ()=>{
+            const rect = canvas.getBoundingClientRect();
+            const dpr = window.devicePixelRatio || 1;
+            const width = rect.width;
+            const height = rect.height;
+            canvas.width = width * dpr;
+            canvas.height = height * dpr;
+            canvas.style.width = `${width}px`;
+            canvas.style.height = `${height}px`;
+            gl.viewport(0, 0, canvas.width, canvas.height);
+        };
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+        // Use ResizeObserver for more accurate sizing
+        const resizeObserver = new ResizeObserver(()=>{
+            resizeCanvas();
+        });
+        resizeObserver.observe(canvas);
+        // Handle mouse movement
+        const handleMouseMove = (e)=>{
+            const rect = canvas.getBoundingClientRect();
+            mouseRef.current = {
+                x: (e.clientX - rect.left) / rect.width,
+                y: 1.0 - (e.clientY - rect.top) / rect.height
+            };
+        };
+        canvas.addEventListener('mousemove', handleMouseMove);
+        return ()=>{
+            window.removeEventListener('resize', resizeCanvas);
+            canvas.removeEventListener('mousemove', handleMouseMove);
+            resizeObserver.disconnect();
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+            if (positionBufferRef.current && gl) {
+                gl.deleteBuffer(positionBufferRef.current);
+            }
+        };
+    }, [
+        canvasRef,
+        onError
+    ]);
+    // Compile and render shader
+    useEffect(()=>{
+        const gl = glRef.current;
+        const canvas = canvasRef.current;
+        if (!gl || !canvas) return;
+        onError?.(null);
+        try {
+            // Create shaders
+            const vertexShader = createShader(gl, gl.VERTEX_SHADER, DEFAULT_VERTEX_SHADER);
+            if (!vertexShader) throw new Error('devjar:gl Failed to create vertex shader');
+            const compiledFragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragment);
+            if (!compiledFragmentShader) throw new Error('devjar:gl Failed to create fragment shader');
+            // Create program
+            const program = createProgram(gl, vertexShader, compiledFragmentShader);
+            if (!program) throw new Error('devjar:gl Failed to create program');
+            // Clean up old program
+            if (programRef.current) {
+                gl.deleteProgram(programRef.current);
+            }
+            programRef.current = program;
+            // Clean up shaders (they're linked into the program)
+            gl.deleteShader(vertexShader);
+            gl.deleteShader(compiledFragmentShader);
+            // Render loop
+            const render = ()=>{
+                if (!gl || !canvas || !programRef.current || !positionBufferRef.current) return;
+                const program = programRef.current;
+                const positionBuffer = positionBufferRef.current;
+                // Clear
+                gl.clearColor(0, 0, 0, 1);
+                gl.clear(gl.COLOR_BUFFER_BIT);
+                // Use program
+                gl.useProgram(program);
+                // Set up position attribute
+                const positionLocation = gl.getAttribLocation(program, 'a_position');
+                if (positionLocation >= 0) {
+                    gl.enableVertexAttribArray(positionLocation);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+                    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+                }
+                // Set uniforms
+                const time = (performance.now() - startTimeRef.current) / 1000;
+                const resolutionLocation = gl.getUniformLocation(program, 'u_resolution');
+                const timeLocation = gl.getUniformLocation(program, 'u_time');
+                const mouseLocation = gl.getUniformLocation(program, 'u_mouse');
+                if (resolutionLocation) {
+                    gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
+                }
+                if (timeLocation) {
+                    gl.uniform1f(timeLocation, time);
+                }
+                if (mouseLocation) {
+                    gl.uniform2f(mouseLocation, mouseRef.current.x, mouseRef.current.y);
+                }
+                // Draw
+                gl.drawArrays(gl.TRIANGLES, 0, 6);
+                animationFrameRef.current = requestAnimationFrame(render);
+            };
+            // Start render loop
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+            render();
+            // Cleanup function
+            return ()=>{
+                if (animationFrameRef.current) {
+                    cancelAnimationFrame(animationFrameRef.current);
+                }
+                if (programRef.current && gl) {
+                    gl.deleteProgram(programRef.current);
+                    programRef.current = null;
+                }
+            };
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+            const prefixedMessage = errorMessage.startsWith('devjar:gl ') ? errorMessage : `devjar:gl ${errorMessage}`;
+            onError?.(prefixedMessage);
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        }
+    }, [
+        fragment,
+        canvasRef,
+        onError
+    ]);
+}
+
+export { useGL };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+export { UseGlslRendererOptions, useGL } from './gl.tsx';
 
 declare global {
     interface Window {

package/dist/index.js

@@ -2,6 +2,7 @@ import { useRef, useState, useId, useEffect, useCallback } from 'react';
 import { transform } from 'sucrase';
 import { init, parse } from 'es-module-lexer';
 import { jsx } from 'react/jsx-runtime';
+export { useGL } from './gl.js';
 
 // declare esmsInitOptions on global window
 async function createModule(files, { getModuleUrl }) {
@@ -41,11 +42,12 @@ async function createModule(files, { getModuleUrl }) {
             createInlinedModule(code, fileName.endsWith('.css') ? 'css' : 'js')
         ]));
     updateImportMap(imports);
-    return self.importShim('index.js');
+    return self.importShim('index');
 }
 
 let esModuleLexerInit;
 const isRelative = (s)=>s.startsWith('./');
+const removeExtension = (str)=>str.replace(/\.[^/.]+$/, '');
 function transformCode(_code, getModuleUrl, externals) {
     const code = transform(_code, {
         transforms: [
@@ -105,6 +107,7 @@ function replaceImports(source, getModuleUrl, externals) {
     }
     return code;
 }
+// createRenderer is going to be stringified and executed in the iframe
 function createRenderer(createModule_, getModuleUrl) {
     let reactRoot;
     async function render(files) {
@@ -160,7 +163,7 @@ function createEsShimOptionsScript() {
     return `\
 window.esmsInitOptions = {
   polyfillEnable: ['css-modules', 'json-modules'],
-  onerror: error => console.log(error),
+  onerror: console.error,
 }`;
 }
 function useScript() {
@@ -219,7 +222,7 @@ function useLiveCode({ getModuleUrl }) {
             type: 'module'
         });
         const tailwindScript = createScript(tailwindcssScriptRef, {
-            src: 'https://cdn.tailwindcss.com'
+            src: 'https://unpkg.com/@tailwindcss/browser@4'
         });
         body.appendChild(div);
         body.appendChild(esmShimOptionsScript);
@@ -252,11 +255,17 @@ function useLiveCode({ getModuleUrl }) {
          *  '@mod1': '...',
          *  '@mod2': '...',
          */ const transformedFiles = Object.keys(files).reduce((res, filename)=>{
-                    const key = isRelative(filename) ? '@' + filename.slice(2) : filename;
+                    // 1. Remove ./
+                    // 2. For non css files, remove extension
+                    // e.g. './styles.css' -> '@styles.css'
+                    // e.g. './foo.js' -> '@foo'
+                    const moduleKey = isRelative(filename) ? '@' + filename.slice(2) : filename;
                     if (filename.endsWith('.css')) {
-                        res[key] = files[filename];
+                        res[moduleKey] = files[filename];
                     } else {
-                        res[key] = transformCode(files[filename], getModuleUrl, overrideExternals);
+                        // JS or TS files
+                        const normalizedModuleKey = removeExtension(moduleKey);
+                        res[normalizedModuleKey] = transformCode(files[filename], getModuleUrl, overrideExternals);
                     }
                     return res;
                 }, {});
@@ -269,13 +278,15 @@ function useLiveCode({ getModuleUrl }) {
                     } else {
                         // if render is not loaded yet, wait until it's loaded
                         script.onload = ()=>{
-                            iframe.contentWindow.__render__(transformedFiles);
+                            iframe.contentWindow.__render__(transformedFiles).catch((err)=>{
+                                setError(err);
+                            });
                         };
                     }
                 }
                 setError(undefined);
             } catch (e) {
-                console.error(e);
+                console.warn(e);
                 setError(e);
             }
         }

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "devjar",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "type": "module",
   "exports": {
     ".": "./dist/index.js",
+    "./gl": "./dist/gl.js",
     "./package.json": "./package.json"
   },
   "license": "MIT",
@@ -11,17 +12,11 @@
     "dist"
   ],
   "types": "./dist/index.d.ts",
-  "scripts": {
-    "build": "bunchee",
-    "prepublishOnly": "pnpm run build",
-    "build:site": "pnpm run build && next build ./site",
-    "start": "next start ./site",
-    "dev": "next dev ./site"
-  },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
+    "dedent": "^1.7.0",
     "es-module-lexer": "1.6.0",
     "es-module-shims": "2.0.3",
     "sucrase": "3.35.0"
@@ -30,14 +25,18 @@
     "@types/node": "^22.10.7",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
-    "bunchee": "^6.3.2",
-    "codice": "^0.4.4",
-    "devjar": "link:./",
-    "next": "^15.1.5",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "sugar-high": "^0.8.2",
+    "bunchee": "^6.3.3",
+    "codice": "^1.5.4",
+    "devjar": "link:",
+    "next": "^16.0.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "typescript": "^5.7.3"
   },
-  "packageManager": "pnpm@9.15.4"
-}
+  "scripts": {
+    "build": "bunchee",
+    "build:site": "pnpm run build && next build ./site",
+    "start": "next start ./site",
+    "dev": "next dev ./site"
+  }
+}