@rrjs/babel-plugin 0.1.1

package/README.md

@@ -0,0 +1,89 @@
+# babel-plugin-reactive-react
+
+Babel plugin that compiles JSX to `h()` calls compatible with `@rrjs/renderer`. Dynamic expressions inside JSX are wrapped in thunks so the renderer can establish reactive bindings.
+
+## Install
+
+```bash
+npm install -D babel-plugin-reactive-react @babel/core
+```
+
+## Setup
+
+### Vite
+
+```js
+// vite.config.ts
+import { defineConfig } from 'vite'
+import babel from '@babel/core'
+import reactiveReact from 'babel-plugin-reactive-react'
+
+export default defineConfig({
+  esbuild: { jsx: 'preserve' },
+  plugins: [
+    {
+      name: 'reactive-react-jsx',
+      enforce: 'pre',
+      async transform(code, id) {
+        if (!id.endsWith('.tsx') && !id.endsWith('.jsx')) return null
+        const result = await babel.transformAsync(code, {
+          filename: id,
+          plugins: [reactiveReact],
+          presets: ['@babel/preset-typescript'],
+          parserOpts: { plugins: ['jsx', 'typescript'] },
+        })
+        return { code: result?.code ?? code, map: result?.map }
+      },
+    },
+  ],
+})
+```
+
+In your entry file:
+
+```js
+import { h } from '@rrjs/renderer'
+;(globalThis as any).h = h
+```
+
+The plugin assumes `h` is in scope where JSX is used.
+
+## What it transforms
+
+| Input | Output |
+|---|---|
+| `<div>hello</div>` | `h('div', null, 'hello')` |
+| `<div>{count}</div>` | `h('div', null, () => count)` |
+| `<div className={cls}>` | `h('div', { className: () => cls })` |
+| `<button onClick={fn}>` | `h('button', { onClick: fn })` |
+| `<input disabled={true}>` | `h('input', { disabled: true })` |
+| `<Counter />` | `h(Counter, null)` |
+
+Static literals are not wrapped. Event handlers (anything matching `on[A-Z]`) are passed through directly.
+
+## Why thunks
+
+Inside the renderer, thunks run inside an `effect`. That effect subscribes to any signals read by the thunk. When those signals change, the thunk re-runs and the bound DOM node updates — without re-running the component function. This is what makes the "component runs once" property possible.
+
+## License
+MIT License
+
+Copyright (c) 2026 Saman Abaasi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import type { PluginObj, PluginPass } from '@babel/core';
+export default function reactiveReactPlugin(): PluginObj<PluginPass>;

package/dist/index.js

@@ -0,0 +1,254 @@
+import * as t from '@babel/types';
+import jsxSyntaxPlugin from '@babel/plugin-syntax-jsx';
+// ─── The Plugin ──────────────────────────────────────────────────────────────
+// Transforms JSX into h() calls.
+// Dynamic expressions (signals, computeds, variables that may change)
+// are wrapped in thunks so the renderer can subscribe them to signal changes.
+export default function reactiveReactPlugin() {
+    return {
+        name: 'babel-plugin-reactive-react',
+        inherits: jsxSyntaxPlugin.default ?? jsxSyntaxPlugin,
+        visitor: {
+            JSXElement(path) {
+                const replacement = transformElement(path.node);
+                path.replaceWith(replacement);
+            },
+            JSXFragment(path) {
+                // Fragments: <>...</> → [child, child, ...]
+                // We use an array because there's no h() call for fragments yet
+                const children = filterChildren(path.node.children).map(transformChild);
+                path.replaceWith(t.arrayExpression(children));
+            },
+        },
+    };
+}
+// ─── Transform a JSX element into an h() call ────────────────────────────────
+// ─── Transform the tag name ──────────────────────────────────────────────────
+// <div>  → 'div'   (string — lowercase, native HTML element)
+// <App>  → App     (identifier — a component function)
+function transformTag(name) {
+    if (t.isJSXIdentifier(name)) {
+        // Lowercase = native element, uppercase = component
+        if (/^[a-z]/.test(name.name)) {
+            return t.stringLiteral(name.name);
+        }
+        return t.identifier(name.name);
+    }
+    // <Module.Component>  → Module.Component
+    if (t.isJSXMemberExpression(name)) {
+        return convertMemberExpression(name);
+    }
+    // <namespace:tag> — not supported
+    throw new Error('JSXNamespacedName is not supported');
+}
+function convertMemberExpression(node) {
+    const object = t.isJSXMemberExpression(node.object)
+        ? convertMemberExpression(node.object)
+        : t.identifier(node.object.name);
+    return t.memberExpression(object, t.identifier(node.property.name));
+}
+// ─── Transform props/attributes ──────────────────────────────────────────────
+function getAttributeName(name) {
+    if (t.isJSXIdentifier(name))
+        return name.name;
+    throw new Error('Namespaced JSX attributes not supported');
+}
+function transformElement(element) {
+    const openingElement = element.openingElement;
+    const tag = transformTag(openingElement.name);
+    const isNativeElement = t.isStringLiteral(tag);
+    const props = transformProps(openingElement.attributes, isNativeElement);
+    const children = filterChildren(element.children).map(transformChild);
+    return t.callExpression(t.identifier('h'), [
+        tag,
+        props,
+        ...children,
+    ]);
+}
+function transformProps(attrs, isNativeElement) {
+    if (attrs.length === 0)
+        return t.nullLiteral();
+    const properties = [];
+    for (const attr of attrs) {
+        if (t.isJSXSpreadAttribute(attr)) {
+            properties.push(t.spreadElement(attr.argument));
+            continue;
+        }
+        const name = getAttributeName(attr.name);
+        const value = transformAttributeValue(name, attr.value, isNativeElement);
+        properties.push(t.objectProperty(t.stringLiteral(name), value));
+    }
+    return t.objectExpression(properties);
+}
+function transformAttributeValue(name, value, isNativeElement) {
+    if (value === null || value === undefined) {
+        return t.booleanLiteral(true);
+    }
+    if (t.isStringLiteral(value)) {
+        return value;
+    }
+    if (t.isJSXExpressionContainer(value)) {
+        const expr = value.expression;
+        if (t.isJSXEmptyExpression(expr)) {
+            return t.nullLiteral();
+        }
+        // ref is special: never wrap.
+        if (name === 'ref') {
+            return expr;
+        }
+        // Event handlers: never wrap.
+        if (isEventHandler(name)) {
+            return expr;
+        }
+        // Static literals: pass through.
+        if (isStaticExpression(expr)) {
+            return expr;
+        }
+        // The critical distinction:
+        // - On native HTML elements, dynamic prop values become reactive bindings.
+        //   The renderer wraps them in an effect to keep the DOM attribute in sync.
+        //   So we wrap them in thunks here.
+        // - On user-defined components (uppercase tag), props are passed through.
+        //   The component receives the plain value and uses it directly.
+        //   Wrapping in a thunk would corrupt the prop type.
+        if (!isNativeElement) {
+            return expr;
+        }
+        return wrapInThunk(expr);
+    }
+    if (t.isJSXElement(value) || t.isJSXFragment(value)) {
+        return isNativeElement ? wrapInThunk(value) : value;
+    }
+    return t.nullLiteral();
+}
+// ─── Transform a child of a JSX element ──────────────────────────────────────
+function transformChild(child) {
+    if (t.isJSXText(child)) {
+        return t.stringLiteral(child.value);
+    }
+    if (t.isJSXExpressionContainer(child)) {
+        const expr = child.expression;
+        if (t.isJSXEmptyExpression(expr)) {
+            return t.nullLiteral();
+        }
+        if (isStaticExpression(expr)) {
+            return expr;
+        }
+        // Try the list-as-JSX transform first.
+        // If the expression matches items.map((item) => <X key={...} />),
+        // rewrite it to a list() call for keyed reconciliation.
+        const listCall = tryTransformMapToList(expr);
+        if (listCall)
+            return listCall;
+        // Call expressions (like h(...) or list(...)) return Nodes directly
+        // and must NOT be wrapped in a thunk.
+        if (t.isCallExpression(expr)) {
+            return expr;
+        }
+        return wrapInThunk(expr);
+    }
+    if (t.isJSXElement(child) || t.isJSXFragment(child)) {
+        return t.isJSXElement(child)
+            ? transformElement(child)
+            : t.arrayExpression(filterChildren(child.children).map(transformChild));
+    }
+    if (t.isJSXSpreadChild(child)) {
+        return child.expression;
+    }
+    return t.nullLiteral();
+}
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function wrapInThunk(expr) {
+    // expr → () => expr
+    return t.arrowFunctionExpression([], expr);
+}
+// ─── List-as-JSX transform ──────────────────────────────────────────────────
+// Detects {items.map((item) => <Foo key={item.id} ... />)} and rewrites it
+// to list(() => items, (item) => item.id, (item) => h(Foo, ...)).
+// This wires standard JSX iteration into the keyed list reconciler
+// without requiring developers to call list() directly.
+function tryTransformMapToList(expr) {
+    // Must be a method call to .map
+    if (!t.isCallExpression(expr))
+        return null;
+    if (!t.isMemberExpression(expr.callee))
+        return null;
+    if (!t.isIdentifier(expr.callee.property, { name: 'map' }))
+        return null;
+    // Must have a single callback argument
+    if (expr.arguments.length !== 1)
+        return null;
+    const callback = expr.arguments[0];
+    if (!t.isArrowFunctionExpression(callback) && !t.isFunctionExpression(callback))
+        return null;
+    // Callback should have at least one parameter (the item)
+    if (callback.params.length === 0)
+        return null;
+    const itemParam = callback.params[0];
+    if (!t.isIdentifier(itemParam))
+        return null; // skip destructured params for safety
+    // Callback body must return a JSX element with a `key` prop.
+    // Support both expression-bodied and block-bodied arrows.
+    let returnedJsx = null;
+    if (t.isJSXElement(callback.body)) {
+        returnedJsx = callback.body;
+    }
+    else if (t.isBlockStatement(callback.body)) {
+        // Find a top-level return statement
+        for (const stmt of callback.body.body) {
+            if (t.isReturnStatement(stmt) && t.isJSXElement(stmt.argument)) {
+                returnedJsx = stmt.argument;
+                break;
+            }
+        }
+    }
+    if (!returnedJsx)
+        return null;
+    // Find the key attribute
+    const keyAttr = returnedJsx.openingElement.attributes.find((a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name, { name: 'key' }));
+    if (!keyAttr)
+        return null;
+    if (!keyAttr.value || !t.isJSXExpressionContainer(keyAttr.value))
+        return null;
+    const keyExpr = keyAttr.value.expression;
+    if (t.isJSXEmptyExpression(keyExpr))
+        return null;
+    // We have all the pieces. Build:
+    //   list(
+    //     () => <source>,
+    //     (item) => <keyExpr>,
+    //     (item) => <transformed JSX>
+    //   )
+    const sourceExpression = expr.callee.object;
+    const transformedRenderJsx = transformElement(returnedJsx);
+    return t.callExpression(t.identifier('list'), [
+        // getItems: () => items
+        t.arrowFunctionExpression([], sourceExpression),
+        // getKey: (item) => item.id
+        t.arrowFunctionExpression([t.identifier(itemParam.name)], keyExpr),
+        // render: (item) => h(...)
+        t.arrowFunctionExpression([t.identifier(itemParam.name)], transformedRenderJsx),
+    ]);
+}
+function isEventHandler(name) {
+    // onClick, onInput, onMouseDown, etc.
+    return /^on[A-Z]/.test(name);
+}
+function isStaticExpression(expr) {
+    // These can never change between renders, so no thunk needed
+    return (t.isStringLiteral(expr) ||
+        t.isNumericLiteral(expr) ||
+        t.isBooleanLiteral(expr) ||
+        t.isNullLiteral(expr) ||
+        t.isBigIntLiteral(expr));
+}
+function filterChildren(children) {
+    // Strip whitespace-only JSXText nodes (caused by JSX formatting)
+    return children.filter(child => {
+        if (t.isJSXText(child)) {
+            // Trim and check if anything remains
+            return child.value.trim().length > 0;
+        }
+        return true;
+    });
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@rrjs/babel-plugin",
+  "version": "0.1.1",
+  "description": "Babel plugin that compiles JSX to h() calls with reactive bindings for Reactive React",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build && npm test"
+  },
+  "dependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/plugin-syntax-jsx": "^7.24.0",
+    "@babel/types": "^7.24.0"
+  },
+  "devDependencies": {
+    "@babel/preset-typescript": "^7.24.0",
+    "@types/babel__core": "^7.20.5",
+    "vitest": "^1.0.0",
+    "typescript": "^5.0.0"
+  },
+  "license": "MIT",
+  "author": "Saman Abaasi <samabaasii@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SamAbaasi/reactive-react.git",
+    "directory": "packages/babel-plugin"
+  },
+  "keywords": ["babel", "babel-plugin", "jsx", "reactive-react", "signals"]
+}