cajoa 0.8.0 → 0.10.0

package/README.md

@@ -30,22 +30,24 @@ Or add Cajoa to an existing project:
 npm install cajoa
 ```
 
-### Manual JSX setup
+### Manual setup
 
-In your `tsconfig.json`:
+Add the plugin to `vite.config.ts`:
+
+```ts
+import { defineConfig } from "vite";
+import { cajoa } from "cajoa/vite";
+
+export default defineConfig({ plugins: [cajoa()] });
+```
+
+And set the JSX types in `tsconfig.json`:
 
 ```json
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "cajoa"
-  }
-}
+{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "cajoa" } }
 ```
 
-With Vite, also set it in `vite.config.ts`
-(`oxc: { jsx: { runtime: "automatic", importSource: "cajoa" } }` on newer Vite,
-or `esbuild: { jsx: "automatic", jsxImportSource: "cajoa" }` on older ones).
+The plugin also sets Vite's JSX transform for you. Without the plugin, set `oxc: { jsx: { runtime: "automatic", importSource: "cajoa" } }` (Vite 8) or `esbuild: { jsx: "automatic", jsxImportSource: "cajoa" }` (older Vite) yourself.
 
 ## Quick start
 
@@ -65,16 +67,33 @@ function Counter() {
 render(Counter, document.getElementById("app")!);
 ```
 
-## Two rules to remember
+## Reactive JSX
+
+With the Vite plugin, write plain JSX. Calls to signals are reactive wherever they appear in a DOM element, and `Show` children are created lazily:
+
+```tsx
+<p>Double: {count() * 2}</p>
+<p class={count() % 2 ? "odd" : "even"} style={{ color: color() }}>…</p>
+
+<Show when={count() > 3} fallback={<p>Keep clicking</p>}>
+  <p>More than 3!</p>
+</Show>
+
+<For each={todos()}>{(todo) => <li>{todo.text}</li>}</For>
+```
+
+The plugin rewrites your JSX at build time. When an expression contains a function call, it wraps it in a function (`{count() * 2}` becomes `{() => (count() * 2)}`) for:
+
+- children and attributes of DOM elements (but not `ref`, `key` and `on*` props)
+- children of your own components
+- `when` and `each` of `Show` and `For`, and the `fallback` and children of `Show`
 
-Cajoa has no compiler yet, so JSX expressions run exactly once. That gives two rules:
+It does **not** change the props of your own components. They receive plain values. To pass a live value, pass the signal itself (`<Greeting name={name} />`) or a function.
 
-1. **Pass the signal, don't call it.**
-   `{count}` is reactive. `{count()}` is read once and never updates.
-   For computed values, pass a function: `{() => count() * 2}`.
-2. **`Show` children are a function.**
-   `<Show when={on}>{() => <p>Hello</p>}</Show>`
-   Otherwise the element is created even when it is hidden.
+Without the plugin, two rules apply:
+
+1. **Pass the signal, don't call it.** `{count}` is reactive, `{count()}` is read once. For computed values, pass a function: `{() => count() * 2}`.
+2. **`Show` children are a function:** `<Show when={on}>{() => <p>Hello</p>}</Show>`.
 
 ## Lists and conditions
 
@@ -96,7 +115,7 @@ const [todos, setTodos] = createSignal([{ id: 1, text: "Learn Cajoa" }]);
 
 ## Forms, styles and events
 
-```tsx
+````tsx
 const [name, setName] = createSignal("");
 const [agree, setAgree] = createSignal(false);
 
@@ -118,12 +137,29 @@ const [agree, setAgree] = createSignal(false);
     Hello, {() => name() || "stranger"}!
   </p>
 </form>;
-```
+
+## Refs and SVG
+
+```tsx
+function SearchBox() {
+  let input: HTMLInputElement | undefined;
+
+  return (
+    <div>
+      <input ref={(el: HTMLInputElement) => (input = el)} />
+      <button onClick={() => input?.focus()}>Focus</button>
+    </div>
+  );
+}
+
+````
 
 - `value`, `checked` and `selected` are set as DOM properties, so they stay in sync even after the user typed. Write `value` after `type`, `min` and `max`.
 - `style` takes a string or an object (camelCase keys, kebab-case keys, or custom properties like `--accent`). Numbers are not converted to `px`, so write `"12px"`. For a reactive style, pass a function: `style={() => ({ color: color() })}`. An object with signals inside, like `style={{ color: color() }}`, is read once.
 - Events are native DOM events. `onChange` fires when a field loses focus, so use `onInput` for every keystroke. `onDoubleClick` listens to `dblclick`.
 - `className` and `htmlFor` work. Inline string handlers like `onclick="..."` are ignored.
+- `ref` is a function that receives the element once it is created. Its props and children are ready, but it is not in the page yet, so use `onMount` if you need to measure it right away. Signals read inside `ref` are not tracked.
+- SVG works: `<svg>`, `<path>`, `<circle>`, gradients, filters and the other SVG tags are created in the SVG namespace. Write attributes as `stroke-width="2"` or `strokeWidth="2"`.
 
 ```tsx
 import { render, Router, Route, Link, useParams } from "cajoa";
@@ -233,12 +269,12 @@ Routes are matched in order, so put `path="*"` last.
 - Router: pathname only (no query/hash handling), no nested routes, no `base` path.
 - `<Show>` and `<Router>` return a function, so they must sit inside an element, not be the root returned by `render`.
 - Single-page apps need a server fallback to `index.html` for unknown paths.
-- SVG is not supported yet: `<svg>` is created as an HTML element, so it does not render.
-- No `ref` prop yet.
 - `<select value>` works only when the `<option>` elements are direct children of the `<select>`.
 - `createMemo` can show a brief inconsistent state when memos depend on each other.
 - `set` calls are not batched automatically inside event handlers. Wrap them in `batch()`.
 - Types in the core use a loose `HostNode` type for now.
+- Inside `<svg>`, the tags `<a>`, `<title>`, `<style>` and `<script>` are created as HTML elements (they share their names with HTML tags).
+- The compiler works on `.tsx` and `.jsx` files in Vite projects. `Show` and `For` are recognised only when imported from `cajoa` or `@cajoa/core`.
 
 ## Roadmap
 
@@ -250,8 +286,8 @@ Routes are matched in order, so put `path="*"` last.
 - [x] Renderer abstraction, split into packages
 - [x] Automated releases
 - [x] Form, style and event handling in the DOM renderer
-- [ ] SVG and `ref` support
-- [ ] Vite plugin (removes the two rules above)
+- [x] SVG and `ref` support
+- [x] Vite plugin (removes the two rules above)
 - [ ] Better form and style handling in the DOM renderer
 - [ ] Native renderers (mobile, desktop)
 - [ ] SSR

package/dist/vite.cjs

@@ -0,0 +1,219 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vite.ts
+var vite_exports = {};
+__export(vite_exports, {
+  cajoa: () => cajoa
+});
+module.exports = __toCommonJS(vite_exports);
+var import_vite = require("vite");
+
+// src/compiler.ts
+var import_parser = require("@babel/parser");
+var import_magic_string = __toESM(require("magic-string"), 1);
+var CORE_MODULES = /* @__PURE__ */ new Set(["cajoa", "@cajoa/core"]);
+var SKIP_KEYS = /* @__PURE__ */ new Set([
+  "loc",
+  "extra",
+  "leadingComments",
+  "trailingComments",
+  "innerComments"
+]);
+var CALL_TYPES = /* @__PURE__ */ new Set([
+  "CallExpression",
+  "OptionalCallExpression",
+  "TaggedTemplateExpression"
+]);
+var STOP_TYPES = /* @__PURE__ */ new Set([
+  "ArrowFunctionExpression",
+  "FunctionExpression",
+  "FunctionDeclaration",
+  "ObjectMethod",
+  "ClassMethod",
+  "ClassPrivateMethod",
+  "JSXElement",
+  "JSXFragment"
+]);
+var PASS_THROUGH = /* @__PURE__ */ new Set([
+  "ArrowFunctionExpression",
+  "FunctionExpression",
+  "Identifier",
+  "MemberExpression",
+  "OptionalMemberExpression"
+]);
+function isNode(value) {
+  return typeof value === "object" && value !== null && typeof value.type === "string";
+}
+function childNodes(node) {
+  const out = [];
+  for (const key of Object.keys(node)) {
+    if (SKIP_KEYS.has(key)) continue;
+    const value = node[key];
+    if (Array.isArray(value)) {
+      for (const item of value) if (isNode(item)) out.push(item);
+    } else if (isNode(value)) {
+      out.push(value);
+    }
+  }
+  return out;
+}
+function containsCall(node) {
+  if (CALL_TYPES.has(node.type)) return true;
+  if (STOP_TYPES.has(node.type)) return false;
+  return childNodes(node).some(containsCall);
+}
+function exprOf(node) {
+  if (!node || node.type !== "JSXExpressionContainer") return null;
+  return node.expression.type === "JSXEmptyExpression" ? null : node.expression;
+}
+function collectControls(program) {
+  const controls = /* @__PURE__ */ new Map();
+  for (const node of program.body) {
+    if (node.type !== "ImportDeclaration" || !CORE_MODULES.has(node.source.value))
+      continue;
+    for (const spec of node.specifiers) {
+      if (spec.type !== "ImportSpecifier") continue;
+      const imported = spec.imported.type === "Identifier" ? spec.imported.name : spec.imported.value;
+      if (imported === "Show" || imported === "For")
+        controls.set(spec.local.name, imported);
+    }
+  }
+  return controls;
+}
+function transformJsx(code, id) {
+  const file = id.split("?")[0];
+  if (!/\.[jt]sx$/.test(file) || /[\\/]node_modules[\\/]/.test(file))
+    return null;
+  if (!code.includes("<")) return null;
+  let ast;
+  try {
+    ast = (0, import_parser.parse)(code, {
+      sourceType: "module",
+      plugins: file.endsWith(".tsx") ? ["jsx", "typescript"] : ["jsx"]
+    });
+  } catch {
+    return null;
+  }
+  const controls = collectControls(ast.program);
+  const s = new import_magic_string.default(code);
+  let changed = false;
+  const wrap = (expr) => {
+    s.prependRight(expr.start, "() => (");
+    s.appendLeft(expr.end, ")");
+    changed = true;
+  };
+  const wrapChildren = (parent) => {
+    for (const kid of parent.children) {
+      const expr = exprOf(kid);
+      if (expr && containsCall(expr)) wrap(expr);
+    }
+  };
+  const wrapShowChildren = (el) => {
+    const kids = el.children.filter(
+      (k) => !(k.type === "JSXText" && k.value.trim() === "") && !(k.type === "JSXExpressionContainer" && k.expression.type === "JSXEmptyExpression")
+    );
+    if (kids.length === 0) return;
+    if (kids.length === 1) {
+      const only = kids[0];
+      if (only.type === "JSXElement" || only.type === "JSXFragment") {
+        s.prependRight(only.start, "{() => (");
+        s.appendLeft(only.end, ")}");
+        changed = true;
+        return;
+      }
+      const expr = exprOf(only);
+      if (expr) {
+        if (!PASS_THROUGH.has(expr.type)) wrap(expr);
+        return;
+      }
+    }
+    s.prependRight(kids[0].start, "{() => (<>");
+    s.appendLeft(kids[kids.length - 1].end, "</>)}");
+    changed = true;
+    wrapChildren(el);
+  };
+  const handleElement = (el) => {
+    const nameNode = el.openingElement.name;
+    const name = nameNode.type === "JSXIdentifier" ? nameNode.name : null;
+    const isHost = name !== null && /^[a-z]/.test(name);
+    const control = name !== null && !isHost ? controls.get(name) : void 0;
+    for (const attr of el.openingElement.attributes) {
+      if (attr.type !== "JSXAttribute" || attr.name.type !== "JSXIdentifier")
+        continue;
+      const expr = exprOf(attr.value);
+      if (!expr) continue;
+      const prop = attr.name.name;
+      if (isHost) {
+        if (prop === "ref" || prop === "key" || prop.startsWith("on")) continue;
+        if (containsCall(expr)) wrap(expr);
+      } else if (control === "Show") {
+        if (prop === "when" && containsCall(expr)) wrap(expr);
+        else if (prop === "fallback" && !PASS_THROUGH.has(expr.type))
+          wrap(expr);
+      } else if (control === "For") {
+        if (prop === "each" && containsCall(expr)) wrap(expr);
+      }
+    }
+    if (control === "Show") wrapShowChildren(el);
+    else if (control !== "For") wrapChildren(el);
+  };
+  const visit = (node) => {
+    if (node.type === "JSXElement") handleElement(node);
+    else if (node.type === "JSXFragment") wrapChildren(node);
+    for (const child of childNodes(node)) visit(child);
+  };
+  visit(ast.program);
+  if (!changed) return null;
+  return {
+    code: s.toString(),
+    map: s.generateMap({ hires: true, source: file, includeContent: true })
+  };
+}
+
+// src/vite.ts
+function cajoa(options = {}) {
+  const importSource = options.importSource ?? "cajoa";
+  return {
+    name: "cajoa",
+    enforce: "pre",
+    config() {
+      const major = Number.parseInt(import_vite.version, 10);
+      return major >= 8 ? { oxc: { jsx: { runtime: "automatic", importSource } } } : { esbuild: { jsx: "automatic", jsxImportSource: importSource } };
+    },
+    transform(code, id) {
+      const result = transformJsx(code, id);
+      return result ? { code: result.code, map: result.map } : null;
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  cajoa
+});

package/dist/vite.d.cts

@@ -0,0 +1,9 @@
+import { Plugin } from 'vite';
+
+interface CajoaPluginOptions {
+    importSource?: string;
+}
+declare function cajoa(options?: CajoaPluginOptions): Plugin;
+
+export { cajoa };
+export type { CajoaPluginOptions };

package/dist/vite.d.ts

@@ -0,0 +1,9 @@
+import { Plugin } from 'vite';
+
+interface CajoaPluginOptions {
+    importSource?: string;
+}
+declare function cajoa(options?: CajoaPluginOptions): Plugin;
+
+export { cajoa };
+export type { CajoaPluginOptions };

package/dist/vite.js

@@ -0,0 +1,184 @@
+// src/vite.ts
+import { version } from "vite";
+
+// src/compiler.ts
+import { parse } from "@babel/parser";
+import MagicString from "magic-string";
+var CORE_MODULES = /* @__PURE__ */ new Set(["cajoa", "@cajoa/core"]);
+var SKIP_KEYS = /* @__PURE__ */ new Set([
+  "loc",
+  "extra",
+  "leadingComments",
+  "trailingComments",
+  "innerComments"
+]);
+var CALL_TYPES = /* @__PURE__ */ new Set([
+  "CallExpression",
+  "OptionalCallExpression",
+  "TaggedTemplateExpression"
+]);
+var STOP_TYPES = /* @__PURE__ */ new Set([
+  "ArrowFunctionExpression",
+  "FunctionExpression",
+  "FunctionDeclaration",
+  "ObjectMethod",
+  "ClassMethod",
+  "ClassPrivateMethod",
+  "JSXElement",
+  "JSXFragment"
+]);
+var PASS_THROUGH = /* @__PURE__ */ new Set([
+  "ArrowFunctionExpression",
+  "FunctionExpression",
+  "Identifier",
+  "MemberExpression",
+  "OptionalMemberExpression"
+]);
+function isNode(value) {
+  return typeof value === "object" && value !== null && typeof value.type === "string";
+}
+function childNodes(node) {
+  const out = [];
+  for (const key of Object.keys(node)) {
+    if (SKIP_KEYS.has(key)) continue;
+    const value = node[key];
+    if (Array.isArray(value)) {
+      for (const item of value) if (isNode(item)) out.push(item);
+    } else if (isNode(value)) {
+      out.push(value);
+    }
+  }
+  return out;
+}
+function containsCall(node) {
+  if (CALL_TYPES.has(node.type)) return true;
+  if (STOP_TYPES.has(node.type)) return false;
+  return childNodes(node).some(containsCall);
+}
+function exprOf(node) {
+  if (!node || node.type !== "JSXExpressionContainer") return null;
+  return node.expression.type === "JSXEmptyExpression" ? null : node.expression;
+}
+function collectControls(program) {
+  const controls = /* @__PURE__ */ new Map();
+  for (const node of program.body) {
+    if (node.type !== "ImportDeclaration" || !CORE_MODULES.has(node.source.value))
+      continue;
+    for (const spec of node.specifiers) {
+      if (spec.type !== "ImportSpecifier") continue;
+      const imported = spec.imported.type === "Identifier" ? spec.imported.name : spec.imported.value;
+      if (imported === "Show" || imported === "For")
+        controls.set(spec.local.name, imported);
+    }
+  }
+  return controls;
+}
+function transformJsx(code, id) {
+  const file = id.split("?")[0];
+  if (!/\.[jt]sx$/.test(file) || /[\\/]node_modules[\\/]/.test(file))
+    return null;
+  if (!code.includes("<")) return null;
+  let ast;
+  try {
+    ast = parse(code, {
+      sourceType: "module",
+      plugins: file.endsWith(".tsx") ? ["jsx", "typescript"] : ["jsx"]
+    });
+  } catch {
+    return null;
+  }
+  const controls = collectControls(ast.program);
+  const s = new MagicString(code);
+  let changed = false;
+  const wrap = (expr) => {
+    s.prependRight(expr.start, "() => (");
+    s.appendLeft(expr.end, ")");
+    changed = true;
+  };
+  const wrapChildren = (parent) => {
+    for (const kid of parent.children) {
+      const expr = exprOf(kid);
+      if (expr && containsCall(expr)) wrap(expr);
+    }
+  };
+  const wrapShowChildren = (el) => {
+    const kids = el.children.filter(
+      (k) => !(k.type === "JSXText" && k.value.trim() === "") && !(k.type === "JSXExpressionContainer" && k.expression.type === "JSXEmptyExpression")
+    );
+    if (kids.length === 0) return;
+    if (kids.length === 1) {
+      const only = kids[0];
+      if (only.type === "JSXElement" || only.type === "JSXFragment") {
+        s.prependRight(only.start, "{() => (");
+        s.appendLeft(only.end, ")}");
+        changed = true;
+        return;
+      }
+      const expr = exprOf(only);
+      if (expr) {
+        if (!PASS_THROUGH.has(expr.type)) wrap(expr);
+        return;
+      }
+    }
+    s.prependRight(kids[0].start, "{() => (<>");
+    s.appendLeft(kids[kids.length - 1].end, "</>)}");
+    changed = true;
+    wrapChildren(el);
+  };
+  const handleElement = (el) => {
+    const nameNode = el.openingElement.name;
+    const name = nameNode.type === "JSXIdentifier" ? nameNode.name : null;
+    const isHost = name !== null && /^[a-z]/.test(name);
+    const control = name !== null && !isHost ? controls.get(name) : void 0;
+    for (const attr of el.openingElement.attributes) {
+      if (attr.type !== "JSXAttribute" || attr.name.type !== "JSXIdentifier")
+        continue;
+      const expr = exprOf(attr.value);
+      if (!expr) continue;
+      const prop = attr.name.name;
+      if (isHost) {
+        if (prop === "ref" || prop === "key" || prop.startsWith("on")) continue;
+        if (containsCall(expr)) wrap(expr);
+      } else if (control === "Show") {
+        if (prop === "when" && containsCall(expr)) wrap(expr);
+        else if (prop === "fallback" && !PASS_THROUGH.has(expr.type))
+          wrap(expr);
+      } else if (control === "For") {
+        if (prop === "each" && containsCall(expr)) wrap(expr);
+      }
+    }
+    if (control === "Show") wrapShowChildren(el);
+    else if (control !== "For") wrapChildren(el);
+  };
+  const visit = (node) => {
+    if (node.type === "JSXElement") handleElement(node);
+    else if (node.type === "JSXFragment") wrapChildren(node);
+    for (const child of childNodes(node)) visit(child);
+  };
+  visit(ast.program);
+  if (!changed) return null;
+  return {
+    code: s.toString(),
+    map: s.generateMap({ hires: true, source: file, includeContent: true })
+  };
+}
+
+// src/vite.ts
+function cajoa(options = {}) {
+  const importSource = options.importSource ?? "cajoa";
+  return {
+    name: "cajoa",
+    enforce: "pre",
+    config() {
+      const major = Number.parseInt(version, 10);
+      return major >= 8 ? { oxc: { jsx: { runtime: "automatic", importSource } } } : { esbuild: { jsx: "automatic", jsxImportSource: importSource } };
+    },
+    transform(code, id) {
+      const result = transformJsx(code, id);
+      return result ? { code: result.code, map: result.map } : null;
+    }
+  };
+}
+export {
+  cajoa
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cajoa",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "A small, beginner-friendly frontend framework built on signals and JSX.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -35,6 +35,16 @@
       "require": {
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
+      },
+      "./vite": {
+        "import": {
+          "types": "./dist/vite.d.ts",
+          "default": "./dist/vite.js"
+        },
+        "require": {
+          "types": "./dist/vite.d.cts",
+          "default": "./dist/vite.cjs"
+        }
       }
     }
   },
@@ -45,6 +55,9 @@
       ],
       "jsx-dev-runtime": [
         "./dist/index.d.ts"
+      ],
+      "vite": [
+        "./dist/vite.d.ts"
       ]
     }
   },
@@ -56,11 +69,21 @@
   ],
   "sideEffects": true,
   "dependencies": {
-    "@cajoa/core": "^0.8.0",
-    "@cajoa/dom": "^0.8.0"
+    "@babel/parser": "^8.0.7",
+    "@cajoa/core": "^0.10.0",
+    "@cajoa/dom": "^0.10.0",
+    "magic-string": "^0.30.21"
+  },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
+    "build": "tsup src/index.ts src/vite.ts --format esm,cjs --dts --clean",
     "check:package": "publint && attw --pack ."
   },
   "repository": {