cajoa 0.2.0 → 0.3.0

package/README.md

@@ -1,13 +1,14 @@
 # Cajoa
 
-A small, beginner-friendly frontend framework built on **signals**.
+A small, beginner-friendly frontend framework built on **signals** and **JSX**.
 No virtual DOM, no hooks rules, no re-rendering components.
 
-> ⚠️ **v0.2 (early stage).** The API may still change. Not production-ready yet.
+> ⚠️ **v0.3 (early stage).** The API may still change. Not production-ready yet.
 
 ## Why Cajoa?
 
 - **Components run once.** A component is just a function that builds DOM. Only the parts that depend on a signal update.
+- **Plain JSX.** Write `<button onClick={...}>`, no special syntax to learn.
 - **Tiny and readable.** The whole core is small enough to read in one sitting.
 - **TypeScript-first**, ESM + CommonJS, zero runtime dependencies.
 
@@ -17,52 +18,66 @@ No virtual DOM, no hooks rules, no re-rendering components.
 npm install cajoa
 ```
 
+## Setup (JSX)
+
+In your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "cajoa"
+  }
+}
+```
+
+If you use Vite and your JSX is not transformed, 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).
+
 ## Quick start
 
-```ts
-import { createSignal, h, render } from "cajoa";
+```tsx
+import { createSignal, render } from "cajoa";
 
 function Counter() {
   const [count, setCount] = createSignal(0);
 
-  return h(
-    "button",
-    { onClick: () => setCount((c) => c + 1) },
-    "Clicked ",
-    count,
-    " times",
+  return (
+    <button onClick={() => setCount((c) => c + 1)}>
+      Clicked {count} times
+    </button>
   );
 }
 
 render(Counter, document.getElementById("app")!);
 ```
 
-Passing `count` (the function itself, not `count()`) is what makes that part of the DOM reactive.
+## Two rules to remember
+
+Cajoa has no compiler, so JSX expressions run exactly once. That gives two rules:
+
+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.
 
 ## Lists and conditions
 
-```ts
-import { createSignal, h, Show, For } from "cajoa";
+```tsx
+import { createSignal, Show, For } from "cajoa";
 
 const [todos, setTodos] = createSignal([{ id: 1, text: "Learn Cajoa" }]);
 
-h(
-  "div",
-  null,
-  Show({
-    when: () => todos().length > 0,
-    fallback: () => h("p", null, "Nothing to do."),
-    children: () =>
-      h(
-        "ul",
-        null,
-        For({
-          each: todos,
-          children: (todo) => h("li", null, todo.text),
-        }),
-      ),
-  }),
-);
+<Show when={() => todos().length > 0} fallback={() => <p>Nothing to do.</p>}>
+  {() => (
+    <ul>
+      <For each={todos}>{(todo) => <li>{todo.text}</li>}</For>
+    </ul>
+  )}
+</Show>;
 ```
 
 ## API
@@ -76,14 +91,19 @@ h(
 | `createMemo(fn)`      | Cached computed value. Only notifies when the result changes.                                                          |
 | `batch(fn)`           | Groups several `set` calls into one update.                                                                            |
 
-### DOM
+### Components
+
+| Component              | What it does                                                                                         |
+| ---------------------- | ---------------------------------------------------------------------------------------------------- |
+| `<Show when fallback>` | Conditional rendering. `children` and `fallback` are functions.                                      |
+| `<For each key?>`      | List rendering. Reuses DOM nodes for unchanged items. The child is a function that returns a `Node`. |
+
+### Rendering
 
-| Function                             | What it does                                                                           |
-| ------------------------------------ | -------------------------------------------------------------------------------------- |
-| `h(tag, props, ...children)`         | Creates a real DOM element. Function props/children are reactive.                      |
-| `render(component, container)`       | Mounts a component. Returns a `dispose` function.                                      |
-| `Show({ when, children, fallback })` | Conditional rendering.                                                                 |
-| `For({ each, children, key? })`      | List rendering. Reuses DOM nodes for unchanged items. `children` must return a `Node`. |
+| Function                       | What it does                                      |
+| ------------------------------ | ------------------------------------------------- |
+| `render(component, container)` | Mounts a component. Returns a `dispose` function. |
+| `h(tag, props, ...children)`   | Low-level element creator. JSX compiles to this.  |
 
 ### Lifecycle
 
@@ -109,7 +129,7 @@ h(
 
 ## Known limitations
 
-- No JSX support yet (`h()` only).
+- No Fragments (`<>...</>`) yet. Wrap siblings in an element.
 - No SSR.
 - `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()`.
@@ -117,13 +137,14 @@ h(
 ## Roadmap
 
 - [x] Signals and effects
-- [x] DOM bindings (`h`, `render`)
-- [x] `Show`, `For`
-- [x] Lifecycle (`onMount`, `onCleanup`) and disposal
+- [x] DOM bindings and `render`
+- [x] `Show`, `For` (keyed)
+- [x] Lifecycle and disposal
 - [x] `createMemo`, `batch`
-- [x] Keyed `For`
 - [x] Context
-- [ ] JSX support
+- [x] JSX support
+- [ ] Fragments
+- [ ] Vite plugin (removes the two rules above)
 - [ ] Router
 - [ ] SSR
 

package/dist/index.cjs

@@ -29,6 +29,9 @@ __export(index_exports, {
   createRoot: () => createRoot,
   createSignal: () => createSignal,
   h: () => h,
+  jsx: () => jsx,
+  jsxDEV: () => jsxDEV,
+  jsxs: () => jsxs,
   onCleanup: () => onCleanup,
   onMount: () => onMount,
   provide: () => provide,
@@ -293,6 +296,16 @@ function createMemo(fn) {
   createEffect(() => setValue(() => fn()));
   return value;
 }
+
+// src/jsx-runtime.ts
+function jsx(type, props) {
+  if (typeof type === "function") return type(props ?? {});
+  const { children, ...rest } = props ?? {};
+  const kids = children === void 0 ? [] : [children];
+  return h(type, rest, ...kids);
+}
+var jsxs = jsx;
+var jsxDEV = jsx;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   For,
@@ -304,6 +317,9 @@ function createMemo(fn) {
   createRoot,
   createSignal,
   h,
+  jsx,
+  jsxDEV,
+  jsxs,
   onCleanup,
   onMount,
   provide,

package/dist/index.d.cts

@@ -32,5 +32,18 @@ declare function For<T>(props: {
 
 declare function createMemo<T>(fn: () => T): () => T;
 
-export { For, Show, batch, createContext, createEffect, createMemo, createRoot, createSignal, h, onCleanup, onMount, provide, render, useContext };
+declare function jsx(type: any, props: Record<string, any> | null): any;
+declare const jsxs: typeof jsx;
+declare const jsxDEV: typeof jsx;
+declare namespace JSX {
+    type Element = any;
+    interface IntrinsicElements {
+        [tag: string]: any;
+    }
+    interface ElementChildrenAttribute {
+        children: {};
+    }
+}
+
+export { For, JSX, Show, batch, createContext, createEffect, createMemo, createRoot, createSignal, h, jsx, jsxDEV, jsxs, onCleanup, onMount, provide, render, useContext };
 export type { Child, Context };

package/dist/index.d.ts

@@ -32,5 +32,18 @@ declare function For<T>(props: {
 
 declare function createMemo<T>(fn: () => T): () => T;
 
-export { For, Show, batch, createContext, createEffect, createMemo, createRoot, createSignal, h, onCleanup, onMount, provide, render, useContext };
+declare function jsx(type: any, props: Record<string, any> | null): any;
+declare const jsxs: typeof jsx;
+declare const jsxDEV: typeof jsx;
+declare namespace JSX {
+    type Element = any;
+    interface IntrinsicElements {
+        [tag: string]: any;
+    }
+    interface ElementChildrenAttribute {
+        children: {};
+    }
+}
+
+export { For, JSX, Show, batch, createContext, createEffect, createMemo, createRoot, createSignal, h, jsx, jsxDEV, jsxs, onCleanup, onMount, provide, render, useContext };
 export type { Child, Context };

package/dist/index.js

@@ -254,6 +254,16 @@ function createMemo(fn) {
   createEffect(() => setValue(() => fn()));
   return value;
 }
+
+// src/jsx-runtime.ts
+function jsx(type, props) {
+  if (typeof type === "function") return type(props ?? {});
+  const { children, ...rest } = props ?? {};
+  const kids = children === void 0 ? [] : [children];
+  return h(type, rest, ...kids);
+}
+var jsxs = jsx;
+var jsxDEV = jsx;
 export {
   For,
   Show,
@@ -264,6 +274,9 @@ export {
   createRoot,
   createSignal,
   h,
+  jsx,
+  jsxDEV,
+  jsxs,
   onCleanup,
   onMount,
   provide,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cajoa",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A beginner-friendly, signals-based frontend framework.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -16,6 +16,26 @@
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
+    },
+    "./jsx-runtime": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./jsx-dev-runtime": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     }
   },
   "files": [
@@ -31,7 +51,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/cjmgrc/Cajoa.git"
+    "url": "git+https://github.com/CajoaTS/Cajoa.git"
   },
   "keywords": [
     "frontend",
@@ -44,10 +64,11 @@
   "author": "cjmgrc",
   "license": "Apache-2.0",
   "bugs": {
-    "url": "https://github.com/cjmgrc/Cajoa/issues"
+    "url": "https://github.com/CajoaTS/Cajoa/issues"
   },
-  "homepage": "https://github.com/cjmgrc/Cajoa#readme",
+  "homepage": "https://github.com/CajoaTS/Cajoa#readme",
   "devDependencies": {
+    "@types/node": "^26.6.5",
     "jsdom": "^29.1.1",
     "tsup": "^9.0.0",
     "typescript": "^5.9.3",