cajoa 0.4.0 → 0.6.0

package/README.md

@@ -3,7 +3,7 @@
 A small, beginner-friendly frontend framework built on **signals** and **JSX**.
 No virtual DOM, no hooks rules, no re-rendering components.
 
-> ⚠️ **v0.4 (early stage).** The API may still change. Not production-ready yet.
+> ⚠️ **v0.6 (early stage).** The API may still change. Not production-ready yet.
 
 ## Why Cajoa?
 
@@ -15,7 +15,7 @@ No virtual DOM, no hooks rules, no re-rendering components.
 ## Install
 
 ```bash
-npm install cajoa
+npm create cajoa@latest my-app
 ```
 
 ## Setup (JSX)
@@ -159,6 +159,22 @@ Routes are matched in order, so put `path="*"` last.
 | `usePath()`                  | Returns a signal getter for the current pathname.          |
 | `untrack(fn)`                | Runs `fn` without subscribing to signals.                  |
 
+### Renderer
+
+| Function                | What it does                                                       |
+| ----------------------- | ------------------------------------------------------------------ |
+| `setRenderer(renderer)` | Swaps the renderer (default: DOM). Used to target other platforms. |
+| `getRenderer()`         | Returns the current renderer.                                      |
+| `domRenderer`           | The built-in DOM renderer.                                         |
+
+## Packages
+
+| Package       | What it is                                                           |
+| ------------- | -------------------------------------------------------------------- |
+| `cajoa`       | The package most apps install (core + DOM)                           |
+| `@cajoa/core` | Renderer-agnostic core: signals, JSX runtime, `Show`, `For`, context |
+| `@cajoa/dom`  | DOM renderer and router                                              |
+
 ## Good to know
 
 - `For` uses the item itself as the key by default. If you pass `key`, items with the same key are **not** re-rendered when their data changes, so keys must be unique and the item should hold its own signals if it needs to update.
@@ -174,6 +190,7 @@ Routes are matched in order, so put `path="*"` last.
 - Single-page apps need a server fallback to `index.html` for unknown paths.
 - `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()`.
+- The Router and event names (`onClick`) are still web-specific for now.
 
 ## Roadmap
 
@@ -185,8 +202,11 @@ Routes are matched in order, so put `path="*"` last.
 - [x] Context
 - [x] JSX support
 - [x] Fragments
-- [ ] Vite plugin (removes the two rules above)
 - [x] Router
+- [x] Renderer abstraction (core no longer depends on DOM)
+- [ ] Split into packages ('@cajoa/core', '@cajoa/dom')
+- [ ] Vite plugin (removes the two rules above)
+- [ ] Native renderer (mobile, desktop)
 - [ ] SSR
 
 ## Development

package/dist/index.cjs

@@ -3,10 +3,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 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))
@@ -15,415 +11,16 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
-__export(index_exports, {
-  For: () => For,
-  Fragment: () => Fragment,
-  Link: () => Link,
-  Route: () => Route,
-  Router: () => Router,
-  Show: () => Show,
-  batch: () => batch,
-  createContext: () => createContext,
-  createEffect: () => createEffect,
-  createMemo: () => createMemo,
-  createRoot: () => createRoot,
-  createSignal: () => createSignal,
-  h: () => h,
-  jsx: () => jsx,
-  jsxDEV: () => jsxDEV,
-  jsxs: () => jsxs,
-  navigate: () => navigate,
-  onCleanup: () => onCleanup,
-  onMount: () => onMount,
-  provide: () => provide,
-  render: () => render,
-  untrack: () => untrack,
-  useContext: () => useContext,
-  useParams: () => useParams,
-  usePath: () => usePath
-});
 module.exports = __toCommonJS(index_exports);
-
-// src/reactivity/signal.ts
-var currentOwner = null;
-var currentEffect = null;
-function clean(owner) {
-  const fns = owner.cleanups;
-  owner.cleanups = [];
-  for (const fn of fns) fn();
-}
-function cleanComputation(c) {
-  for (const subs of c.deps) subs.delete(c);
-  c.deps.clear();
-  clean(c);
-}
-var batchDepth = 0;
-var pending = /* @__PURE__ */ new Set();
-function flush() {
-  const effects = [...pending];
-  pending.clear();
-  effects.forEach((effect) => effect.run());
-}
-function batch(fn) {
-  batchDepth++;
-  try {
-    return fn();
-  } finally {
-    batchDepth--;
-    if (batchDepth === 0) flush();
-  }
-}
-function createSignal(value) {
-  const subs = /* @__PURE__ */ new Set();
-  const get = () => {
-    if (currentEffect) {
-      subs.add(currentEffect);
-      currentEffect.deps.add(subs);
-    }
-    return value;
-  };
-  const set = (next) => {
-    const v = typeof next === "function" ? next(value) : next;
-    if (Object.is(v, value)) return;
-    value = v;
-    for (const effect of [...subs]) {
-      if (batchDepth > 0)
-        pending.add(effect);
-      else effect.run();
-    }
-  };
-  return [get, set];
-}
-function createEffect(fn) {
-  const effect = {
-    cleanups: [],
-    parent: currentOwner,
-    deps: /* @__PURE__ */ new Set(),
-    disposed: false,
-    run() {
-      if (effect.disposed) return;
-      cleanComputation(effect);
-      const prevOwner = currentOwner;
-      const prevEffect = currentEffect;
-      currentOwner = effect;
-      currentEffect = effect;
-      try {
-        fn();
-      } finally {
-        currentOwner = prevOwner;
-        currentEffect = prevEffect;
-      }
-    }
-  };
-  onCleanup(() => {
-    effect.disposed = true;
-    cleanComputation(effect);
-  });
-  effect.run();
-}
-function onCleanup(fn) {
-  currentOwner?.cleanups.push(fn);
-}
-function createRoot(fn) {
-  const root = { cleanups: [], parent: currentOwner };
-  const prevOwner = currentOwner;
-  const prevEffect = currentEffect;
-  currentOwner = root;
-  currentEffect = null;
-  try {
-    return fn(() => clean(root));
-  } finally {
-    currentOwner = prevOwner;
-    currentEffect = prevEffect;
-  }
-}
-function onMount(fn) {
-  const owner = currentOwner;
-  queueMicrotask(() => {
-    const prevOwner = currentOwner;
-    const prevEffect = currentEffect;
-    currentOwner = owner;
-    currentEffect = null;
-    try {
-      fn();
-    } finally {
-      currentOwner = prevOwner;
-      currentEffect = prevEffect;
-    }
-  });
-}
-function createContext(defaultValue) {
-  return { id: /* @__PURE__ */ Symbol("cajoa-context"), defaultValue };
-}
-function provide(ctx, value, fn) {
-  const owner = {
-    cleanups: [],
-    parent: currentOwner,
-    context: /* @__PURE__ */ new Map([[ctx.id, value]])
-  };
-  onCleanup(() => clean(owner));
-  const prev = currentOwner;
-  currentOwner = owner;
-  try {
-    return fn();
-  } finally {
-    currentOwner = prev;
-  }
-}
-function useContext(ctx) {
-  for (let o = currentOwner; o; o = o.parent) {
-    if (o.context?.has(ctx.id)) return o.context.get(ctx.id);
-  }
-  return ctx.defaultValue;
-}
-function untrack(fn) {
-  const prev = currentEffect;
-  currentEffect = null;
-  try {
-    return fn();
-  } finally {
-    currentEffect = prev;
-  }
-}
-
-// src/dom/h.ts
-function h(tag, props, ...children) {
-  const el = document.createElement(tag);
-  for (const [key, value] of Object.entries(props ?? {})) {
-    setProp(el, key, value);
-  }
-  appendChildren(el, children);
-  return el;
-}
-function setProp(el, key, value) {
-  if (key.startsWith("on") && typeof value === "function") {
-    el.addEventListener(key.slice(2).toLowerCase(), value);
-  } else if (typeof value === "function") {
-    createEffect(() => applyAttr(el, key, value()));
-  } else {
-    applyAttr(el, key, value);
-  }
-}
-function applyAttr(el, key, value) {
-  const name = key === "className" ? "class" : key;
-  if (value == null || value === false) el.removeAttribute(name);
-  else el.setAttribute(name, value === true ? "" : String(value));
-}
-function toNodes(value) {
-  const out = [];
-  for (const v of [value].flat(Infinity)) {
-    if (v == null || typeof v === "boolean") continue;
-    out.push(v instanceof Node ? v : document.createTextNode(String(v)));
-  }
-  return out;
-}
-function appendChildren(parent, children) {
-  const pending2 = [...children].reverse();
-  while (pending2.length > 0) {
-    const child = pending2.pop();
-    if (Array.isArray(child)) {
-      for (let i = child.length - 1; i >= 0; i--) {
-        pending2.push(child[i]);
-      }
-      continue;
-    }
-    if (typeof child === "function") {
-      const start = document.createComment("");
-      const end = document.createComment("");
-      parent.append(start, end);
-      createEffect(() => {
-        reconcile(start, end, toNodes(child()));
-      });
-    } else {
-      parent.append(...toNodes(child));
-    }
-  }
-}
-function reconcile(start, end, next) {
-  const keep = new Set(next);
-  let cur = start.nextSibling;
-  while (cur && cur !== end) {
-    const after = cur.nextSibling;
-    if (!keep.has(cur)) cur.remove();
-    cur = after;
-  }
-  const parent = end.parentNode;
-  let ref = start.nextSibling;
-  for (const node of next) {
-    if (node === ref)
-      ref = ref.nextSibling;
-    else parent.insertBefore(node, ref);
-  }
-}
-
-// src/dom/render.ts
-function render(component, container) {
-  return createRoot((dispose) => {
-    container.replaceChildren(component());
-    return () => {
-      dispose();
-      container.replaceChildren();
-    };
-  });
-}
-
-// src/reactivity/memo.ts
-function createMemo(fn) {
-  const [value, setValue] = createSignal(void 0);
-  createEffect(() => setValue(() => fn()));
-  return value;
-}
-
-// src/components/show.ts
-function Show(props) {
-  const visible = createMemo(() => !!props.when());
-  return () => visible() ? untrack(() => props.children()) : untrack(() => props.fallback?.() ?? null);
-}
-
-// src/components/for.ts
-function For(props) {
-  let cache = /* @__PURE__ */ new Map();
-  onCleanup(() => {
-    cache.forEach((e) => e.dispose());
-    cache.clear();
-  });
-  return () => {
-    const items = props.each();
-    const next = /* @__PURE__ */ new Map();
-    const nodes = [];
-    items.forEach((item, i) => {
-      const k = props.key ? props.key(item, i) : item;
-      let entry = cache.get(k);
-      if (!entry) {
-        entry = createRoot((dispose) => ({
-          node: props.children(item, i),
-          dispose
-        }));
-      }
-      next.set(k, entry);
-      nodes.push(entry.node);
-    });
-    cache.forEach((entry, k) => {
-      if (!next.has(k)) entry.dispose();
-    });
-    cache = next;
-    return nodes;
-  };
-}
-
-// 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;
-function Fragment(props) {
-  const frag = document.createDocumentFragment();
-  appendChildren(frag, props.children === void 0 ? [] : [props.children]);
-  return frag;
-}
-
-// src/router.ts
-var read = () => typeof location === "undefined" ? "/" : location.pathname;
-var [path, setPath] = createSignal(read());
-var listening = false;
-function listen() {
-  if (listening || typeof window === "undefined") return;
-  listening = true;
-  window.addEventListener("popstate", () => setPath(read()));
-}
-function navigate(to, options = {}) {
-  if (new URL(to, location.href).href === location.href) return;
-  history[options.replace ? "replaceState" : "pushState"](null, "", to);
-  setPath(read());
-}
-var usePath = () => path;
-var Params = createContext({});
-function useParams() {
-  return useContext(Params);
-}
-var split = (s) => s.split("/").filter(Boolean);
-function decode(s) {
-  try {
-    return decodeURIComponent(s);
-  } catch {
-    return s;
-  }
-}
-function match(pattern, pathname) {
-  if (pattern === "*") return {};
-  const p = split(pattern);
-  const u = split(pathname);
-  if (p.length !== u.length) return null;
-  const params = {};
-  for (let i = 0; i < p.length; i++) {
-    if (p[i].startsWith(":")) params[p[i].slice(1)] = decode(u[i]);
-    else if (p[i] !== u[i]) return null;
-  }
-  return params;
-}
-function Route(props) {
-  return { __route: true, path: props.path, component: props.component };
-}
-function Router(props) {
-  listen();
-  const routes = [props.children].flat(Infinity).filter(
-    (r) => r?.__route === true
-  );
-  return () => {
-    const current = path();
-    for (const route of routes) {
-      const params = match(route.path, current);
-      if (params) {
-        return untrack(() => provide(Params, params, () => route.component()));
-      }
-    }
-    return null;
-  };
-}
-function Link(props) {
-  const { href, children, ...rest } = props;
-  const onClick = (e) => {
-    if (/^[a-z][a-z0-9+.-]*:|^\/\//i.test(href)) return;
-    if (e.defaultPrevented || e.button !== 0) return;
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-    e.preventDefault();
-    navigate(href);
-  };
-  return h("a", { ...rest, href, onClick }, children);
-}
+__reExport(index_exports, require("@cajoa/core"), module.exports);
+__reExport(index_exports, require("@cajoa/dom"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  For,
-  Fragment,
-  Link,
-  Route,
-  Router,
-  Show,
-  batch,
-  createContext,
-  createEffect,
-  createMemo,
-  createRoot,
-  createSignal,
-  h,
-  jsx,
-  jsxDEV,
-  jsxs,
-  navigate,
-  onCleanup,
-  onMount,
-  provide,
-  render,
-  untrack,
-  useContext,
-  useParams,
-  usePath
+  ...require("@cajoa/core"),
+  ...require("@cajoa/dom")
 });

package/dist/index.d.cts

@@ -1,76 +1,2 @@
-type Cleanup = () => void;
-declare function batch<T>(fn: () => T): T;
-declare function createSignal<T>(value: T): readonly [() => T, (next: T | ((prev: T) => T)) => void];
-declare function createEffect(fn: () => void): void;
-declare function onCleanup(fn: Cleanup): void;
-declare function createRoot<T>(fn: (dispose: () => void) => T): T;
-declare function onMount(fn: () => void): void;
-interface Context<T> {
-    readonly id: symbol;
-    readonly defaultValue: T;
-}
-declare function createContext<T>(defaultValue: T): Context<T>;
-declare function provide<T, R>(ctx: Context<T>, value: T, fn: () => R): R;
-declare function useContext<T>(ctx: Context<T>): T;
-declare function untrack<T>(fn: () => T): T;
-
-type Child = string | number | boolean | null | undefined | Node | (() => unknown) | Child[];
-declare function h(tag: string, props: Record<string, any> | null, ...children: Child[]): HTMLElement;
-
-declare function render(component: () => Node, container: Element): () => void;
-
-declare function Show<T>(props: {
-    when: () => T;
-    children: () => Child;
-    fallback?: () => Child;
-}): () => Child;
-
-declare function For<T>(props: {
-    each: () => T[];
-    children: (item: T, index: number) => Node;
-    key?: (item: T, index: number) => unknown;
-}): () => Node[];
-
-declare function createMemo<T>(fn: () => T): () => T;
-
-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: {};
-    }
-}
-declare function Fragment(props: {
-    children?: Child;
-}): DocumentFragment;
-
-declare function navigate(to: string, options?: {
-    replace?: boolean;
-}): void;
-declare const usePath: () => () => string;
-declare function useParams(): Record<string, string>;
-interface RouteDef {
-    __route: true;
-    path: string;
-    component: () => unknown;
-}
-declare function Route(props: {
-    path: string;
-    component: () => unknown;
-}): RouteDef;
-declare function Router(props: {
-    children?: unknown;
-}): () => unknown;
-declare function Link(props: {
-    href: string;
-    children?: unknown;
-    [key: string]: unknown;
-}): HTMLElement;
-
-export { For, Fragment, JSX, Link, Route, Router, Show, batch, createContext, createEffect, createMemo, createRoot, createSignal, h, jsx, jsxDEV, jsxs, navigate, onCleanup, onMount, provide, render, untrack, useContext, useParams, usePath };
-export type { Child, Context, RouteDef };
+export * from '@cajoa/core';
+export * from '@cajoa/dom';

package/dist/index.d.ts

@@ -1,76 +1,2 @@
-type Cleanup = () => void;
-declare function batch<T>(fn: () => T): T;
-declare function createSignal<T>(value: T): readonly [() => T, (next: T | ((prev: T) => T)) => void];
-declare function createEffect(fn: () => void): void;
-declare function onCleanup(fn: Cleanup): void;
-declare function createRoot<T>(fn: (dispose: () => void) => T): T;
-declare function onMount(fn: () => void): void;
-interface Context<T> {
-    readonly id: symbol;
-    readonly defaultValue: T;
-}
-declare function createContext<T>(defaultValue: T): Context<T>;
-declare function provide<T, R>(ctx: Context<T>, value: T, fn: () => R): R;
-declare function useContext<T>(ctx: Context<T>): T;
-declare function untrack<T>(fn: () => T): T;
-
-type Child = string | number | boolean | null | undefined | Node | (() => unknown) | Child[];
-declare function h(tag: string, props: Record<string, any> | null, ...children: Child[]): HTMLElement;
-
-declare function render(component: () => Node, container: Element): () => void;
-
-declare function Show<T>(props: {
-    when: () => T;
-    children: () => Child;
-    fallback?: () => Child;
-}): () => Child;
-
-declare function For<T>(props: {
-    each: () => T[];
-    children: (item: T, index: number) => Node;
-    key?: (item: T, index: number) => unknown;
-}): () => Node[];
-
-declare function createMemo<T>(fn: () => T): () => T;
-
-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: {};
-    }
-}
-declare function Fragment(props: {
-    children?: Child;
-}): DocumentFragment;
-
-declare function navigate(to: string, options?: {
-    replace?: boolean;
-}): void;
-declare const usePath: () => () => string;
-declare function useParams(): Record<string, string>;
-interface RouteDef {
-    __route: true;
-    path: string;
-    component: () => unknown;
-}
-declare function Route(props: {
-    path: string;
-    component: () => unknown;
-}): RouteDef;
-declare function Router(props: {
-    children?: unknown;
-}): () => unknown;
-declare function Link(props: {
-    href: string;
-    children?: unknown;
-    [key: string]: unknown;
-}): HTMLElement;
-
-export { For, Fragment, JSX, Link, Route, Router, Show, batch, createContext, createEffect, createMemo, createRoot, createSignal, h, jsx, jsxDEV, jsxs, navigate, onCleanup, onMount, provide, render, untrack, useContext, useParams, usePath };
-export type { Child, Context, RouteDef };
+export * from '@cajoa/core';
+export * from '@cajoa/dom';

package/dist/index.js

@@ -1,378 +1,3 @@
-// src/reactivity/signal.ts
-var currentOwner = null;
-var currentEffect = null;
-function clean(owner) {
-  const fns = owner.cleanups;
-  owner.cleanups = [];
-  for (const fn of fns) fn();
-}
-function cleanComputation(c) {
-  for (const subs of c.deps) subs.delete(c);
-  c.deps.clear();
-  clean(c);
-}
-var batchDepth = 0;
-var pending = /* @__PURE__ */ new Set();
-function flush() {
-  const effects = [...pending];
-  pending.clear();
-  effects.forEach((effect) => effect.run());
-}
-function batch(fn) {
-  batchDepth++;
-  try {
-    return fn();
-  } finally {
-    batchDepth--;
-    if (batchDepth === 0) flush();
-  }
-}
-function createSignal(value) {
-  const subs = /* @__PURE__ */ new Set();
-  const get = () => {
-    if (currentEffect) {
-      subs.add(currentEffect);
-      currentEffect.deps.add(subs);
-    }
-    return value;
-  };
-  const set = (next) => {
-    const v = typeof next === "function" ? next(value) : next;
-    if (Object.is(v, value)) return;
-    value = v;
-    for (const effect of [...subs]) {
-      if (batchDepth > 0)
-        pending.add(effect);
-      else effect.run();
-    }
-  };
-  return [get, set];
-}
-function createEffect(fn) {
-  const effect = {
-    cleanups: [],
-    parent: currentOwner,
-    deps: /* @__PURE__ */ new Set(),
-    disposed: false,
-    run() {
-      if (effect.disposed) return;
-      cleanComputation(effect);
-      const prevOwner = currentOwner;
-      const prevEffect = currentEffect;
-      currentOwner = effect;
-      currentEffect = effect;
-      try {
-        fn();
-      } finally {
-        currentOwner = prevOwner;
-        currentEffect = prevEffect;
-      }
-    }
-  };
-  onCleanup(() => {
-    effect.disposed = true;
-    cleanComputation(effect);
-  });
-  effect.run();
-}
-function onCleanup(fn) {
-  currentOwner?.cleanups.push(fn);
-}
-function createRoot(fn) {
-  const root = { cleanups: [], parent: currentOwner };
-  const prevOwner = currentOwner;
-  const prevEffect = currentEffect;
-  currentOwner = root;
-  currentEffect = null;
-  try {
-    return fn(() => clean(root));
-  } finally {
-    currentOwner = prevOwner;
-    currentEffect = prevEffect;
-  }
-}
-function onMount(fn) {
-  const owner = currentOwner;
-  queueMicrotask(() => {
-    const prevOwner = currentOwner;
-    const prevEffect = currentEffect;
-    currentOwner = owner;
-    currentEffect = null;
-    try {
-      fn();
-    } finally {
-      currentOwner = prevOwner;
-      currentEffect = prevEffect;
-    }
-  });
-}
-function createContext(defaultValue) {
-  return { id: /* @__PURE__ */ Symbol("cajoa-context"), defaultValue };
-}
-function provide(ctx, value, fn) {
-  const owner = {
-    cleanups: [],
-    parent: currentOwner,
-    context: /* @__PURE__ */ new Map([[ctx.id, value]])
-  };
-  onCleanup(() => clean(owner));
-  const prev = currentOwner;
-  currentOwner = owner;
-  try {
-    return fn();
-  } finally {
-    currentOwner = prev;
-  }
-}
-function useContext(ctx) {
-  for (let o = currentOwner; o; o = o.parent) {
-    if (o.context?.has(ctx.id)) return o.context.get(ctx.id);
-  }
-  return ctx.defaultValue;
-}
-function untrack(fn) {
-  const prev = currentEffect;
-  currentEffect = null;
-  try {
-    return fn();
-  } finally {
-    currentEffect = prev;
-  }
-}
-
-// src/dom/h.ts
-function h(tag, props, ...children) {
-  const el = document.createElement(tag);
-  for (const [key, value] of Object.entries(props ?? {})) {
-    setProp(el, key, value);
-  }
-  appendChildren(el, children);
-  return el;
-}
-function setProp(el, key, value) {
-  if (key.startsWith("on") && typeof value === "function") {
-    el.addEventListener(key.slice(2).toLowerCase(), value);
-  } else if (typeof value === "function") {
-    createEffect(() => applyAttr(el, key, value()));
-  } else {
-    applyAttr(el, key, value);
-  }
-}
-function applyAttr(el, key, value) {
-  const name = key === "className" ? "class" : key;
-  if (value == null || value === false) el.removeAttribute(name);
-  else el.setAttribute(name, value === true ? "" : String(value));
-}
-function toNodes(value) {
-  const out = [];
-  for (const v of [value].flat(Infinity)) {
-    if (v == null || typeof v === "boolean") continue;
-    out.push(v instanceof Node ? v : document.createTextNode(String(v)));
-  }
-  return out;
-}
-function appendChildren(parent, children) {
-  const pending2 = [...children].reverse();
-  while (pending2.length > 0) {
-    const child = pending2.pop();
-    if (Array.isArray(child)) {
-      for (let i = child.length - 1; i >= 0; i--) {
-        pending2.push(child[i]);
-      }
-      continue;
-    }
-    if (typeof child === "function") {
-      const start = document.createComment("");
-      const end = document.createComment("");
-      parent.append(start, end);
-      createEffect(() => {
-        reconcile(start, end, toNodes(child()));
-      });
-    } else {
-      parent.append(...toNodes(child));
-    }
-  }
-}
-function reconcile(start, end, next) {
-  const keep = new Set(next);
-  let cur = start.nextSibling;
-  while (cur && cur !== end) {
-    const after = cur.nextSibling;
-    if (!keep.has(cur)) cur.remove();
-    cur = after;
-  }
-  const parent = end.parentNode;
-  let ref = start.nextSibling;
-  for (const node of next) {
-    if (node === ref)
-      ref = ref.nextSibling;
-    else parent.insertBefore(node, ref);
-  }
-}
-
-// src/dom/render.ts
-function render(component, container) {
-  return createRoot((dispose) => {
-    container.replaceChildren(component());
-    return () => {
-      dispose();
-      container.replaceChildren();
-    };
-  });
-}
-
-// src/reactivity/memo.ts
-function createMemo(fn) {
-  const [value, setValue] = createSignal(void 0);
-  createEffect(() => setValue(() => fn()));
-  return value;
-}
-
-// src/components/show.ts
-function Show(props) {
-  const visible = createMemo(() => !!props.when());
-  return () => visible() ? untrack(() => props.children()) : untrack(() => props.fallback?.() ?? null);
-}
-
-// src/components/for.ts
-function For(props) {
-  let cache = /* @__PURE__ */ new Map();
-  onCleanup(() => {
-    cache.forEach((e) => e.dispose());
-    cache.clear();
-  });
-  return () => {
-    const items = props.each();
-    const next = /* @__PURE__ */ new Map();
-    const nodes = [];
-    items.forEach((item, i) => {
-      const k = props.key ? props.key(item, i) : item;
-      let entry = cache.get(k);
-      if (!entry) {
-        entry = createRoot((dispose) => ({
-          node: props.children(item, i),
-          dispose
-        }));
-      }
-      next.set(k, entry);
-      nodes.push(entry.node);
-    });
-    cache.forEach((entry, k) => {
-      if (!next.has(k)) entry.dispose();
-    });
-    cache = next;
-    return nodes;
-  };
-}
-
-// 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;
-function Fragment(props) {
-  const frag = document.createDocumentFragment();
-  appendChildren(frag, props.children === void 0 ? [] : [props.children]);
-  return frag;
-}
-
-// src/router.ts
-var read = () => typeof location === "undefined" ? "/" : location.pathname;
-var [path, setPath] = createSignal(read());
-var listening = false;
-function listen() {
-  if (listening || typeof window === "undefined") return;
-  listening = true;
-  window.addEventListener("popstate", () => setPath(read()));
-}
-function navigate(to, options = {}) {
-  if (new URL(to, location.href).href === location.href) return;
-  history[options.replace ? "replaceState" : "pushState"](null, "", to);
-  setPath(read());
-}
-var usePath = () => path;
-var Params = createContext({});
-function useParams() {
-  return useContext(Params);
-}
-var split = (s) => s.split("/").filter(Boolean);
-function decode(s) {
-  try {
-    return decodeURIComponent(s);
-  } catch {
-    return s;
-  }
-}
-function match(pattern, pathname) {
-  if (pattern === "*") return {};
-  const p = split(pattern);
-  const u = split(pathname);
-  if (p.length !== u.length) return null;
-  const params = {};
-  for (let i = 0; i < p.length; i++) {
-    if (p[i].startsWith(":")) params[p[i].slice(1)] = decode(u[i]);
-    else if (p[i] !== u[i]) return null;
-  }
-  return params;
-}
-function Route(props) {
-  return { __route: true, path: props.path, component: props.component };
-}
-function Router(props) {
-  listen();
-  const routes = [props.children].flat(Infinity).filter(
-    (r) => r?.__route === true
-  );
-  return () => {
-    const current = path();
-    for (const route of routes) {
-      const params = match(route.path, current);
-      if (params) {
-        return untrack(() => provide(Params, params, () => route.component()));
-      }
-    }
-    return null;
-  };
-}
-function Link(props) {
-  const { href, children, ...rest } = props;
-  const onClick = (e) => {
-    if (/^[a-z][a-z0-9+.-]*:|^\/\//i.test(href)) return;
-    if (e.defaultPrevented || e.button !== 0) return;
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-    e.preventDefault();
-    navigate(href);
-  };
-  return h("a", { ...rest, href, onClick }, children);
-}
-export {
-  For,
-  Fragment,
-  Link,
-  Route,
-  Router,
-  Show,
-  batch,
-  createContext,
-  createEffect,
-  createMemo,
-  createRoot,
-  createSignal,
-  h,
-  jsx,
-  jsxDEV,
-  jsxs,
-  navigate,
-  onCleanup,
-  onMount,
-  provide,
-  render,
-  untrack,
-  useContext,
-  useParams,
-  usePath
-};
+// src/index.ts
+export * from "@cajoa/core";
+export * from "@cajoa/dom";

package/package.json

@@ -1,78 +1,40 @@
 {
   "name": "cajoa",
-  "version": "0.4.0",
-  "description": "A beginner-friendly, signals-based frontend framework.",
+  "version": "0.6.0",
+  "description": "A small, beginner-friendly frontend framework built on signals and JSX.",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
+      "import": { "types": "./dist/index.d.ts", "default": "./dist/index.js" },
+      "require": { "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"
-      }
+      "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"
-      }
+      "import": { "types": "./dist/index.d.ts", "default": "./dist/index.js" },
+      "require": { "types": "./dist/index.d.cts", "default": "./dist/index.cjs" }
     }
   },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "dev": "vite --open /playground/",
-    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
-    "test": "vitest",
-    "prepublishOnly": "vitest run && npm run build"
+  "files": ["dist"],
+  "sideEffects": true,
+  "dependencies": {
+    "@cajoa/core": "^0.6.0",
+    "@cajoa/dom": "^0.6.0"
   },
+  "scripts": { "build": "tsup src/index.ts --format esm,cjs --dts --clean" },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/CajoaTS/Cajoa.git"
+    "url": "git+https://github.com/CajoaTS/Cajoa.git",
+    "directory": "packages/cajoa"
   },
-  "keywords": [
-    "frontend",
-    "framework",
-    "signals",
-    "reactive",
-    "ui",
-    "cajoa"
-  ],
+  "keywords": ["frontend", "framework", "signals", "reactive", "ui", "cajoa"],
   "author": "cjmgrc",
   "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/CajoaTS/Cajoa/issues"
-  },
-  "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",
-    "vite": "^8.3.4",
-    "vitest": "^5.0.5"
-  }
-}
+  "bugs": { "url": "https://github.com/CajoaTS/Cajoa/issues" },
+  "homepage": "https://github.com/CajoaTS/Cajoa#readme"
+}