@vertz/ui 0.2.0 → 0.2.2

package/dist/shared/chunk-ryb49346.js

@@ -0,0 +1,374 @@
+import {
+  getAdapter,
+  isRenderNode
+} from "./chunk-g4rch80a.js";
+import {
+  domEffect
+} from "./chunk-hrd0mft1.js";
+import {
+  SVG_NS,
+  isSVGTag,
+  normalizeSVGAttr
+} from "./chunk-prj7nm08.js";
+
+// src/hydrate/hydration-context.ts
+var isHydrating = false;
+var currentNode = null;
+var cursorStack = [];
+var hydrationRoot = null;
+var claimedNodes = null;
+function isDebug() {
+  if (typeof process !== "undefined" && true) {
+    return true;
+  }
+  return typeof globalThis !== "undefined" && globalThis.__VERTZ_HYDRATION_DEBUG__ === true;
+}
+function startHydration(root) {
+  if (isHydrating) {
+    throw new Error("[hydrate] startHydration() called while hydration is already active. " + "Concurrent hydration is not supported.");
+  }
+  isHydrating = true;
+  currentNode = root.firstChild;
+  cursorStack.length = 0;
+  if (isDebug()) {
+    hydrationRoot = root;
+    claimedNodes = new WeakSet;
+  }
+}
+function endHydration() {
+  if (isDebug()) {
+    if (currentNode) {
+      console.debug("[hydrate] Hydration ended with unclaimed nodes remaining. " + "This may indicate SSR/client tree mismatch or browser extension nodes.");
+    }
+    if (cursorStack.length > 0) {
+      console.debug(`[hydrate] Hydration ended with unbalanced cursor stack (depth: ${cursorStack.length}). ` + "Check that __enterChildren/__exitChildren calls are paired.");
+    }
+  }
+  if (hydrationRoot && claimedNodes) {
+    const unclaimed = findUnclaimedNodes(hydrationRoot, claimedNodes);
+    if (unclaimed.length > 0) {
+      console.warn(`[hydrate] ${unclaimed.length} SSR node(s) not claimed during hydration:
+` + unclaimed.map((n) => `  - ${describeNode(n)}`).join(`
+`));
+    }
+  }
+  hydrationRoot = null;
+  claimedNodes = null;
+  isHydrating = false;
+  currentNode = null;
+  cursorStack.length = 0;
+}
+function getIsHydrating() {
+  return isHydrating;
+}
+function pauseHydration() {
+  isHydrating = false;
+}
+function resumeHydration() {
+  isHydrating = true;
+}
+function claimElement(tag) {
+  const upperTag = tag.toUpperCase();
+  while (currentNode) {
+    if (currentNode.nodeType === Node.ELEMENT_NODE) {
+      const el = currentNode;
+      if (el.tagName === upperTag) {
+        if (isDebug()) {
+          const id = el.id ? `#${el.id}` : "";
+          const cls = el.className ? `.${el.className.split(" ")[0]}` : "";
+          console.debug(`[hydrate] claimElement(<${tag}${id}${cls}>) ✓ depth=${cursorStack.length}`);
+        }
+        if (claimedNodes)
+          claimedNodes.add(el);
+        currentNode = el.nextSibling;
+        return el;
+      }
+      if (isDebug()) {
+        console.debug(`[hydrate] Skipping non-matching node: <${el.tagName.toLowerCase()}> (expected <${tag}>)`);
+      }
+    }
+    currentNode = currentNode.nextSibling;
+  }
+  if (isDebug()) {
+    console.warn(`[hydrate] Expected <${tag}> but no matching SSR node found. Creating new element.`);
+  }
+  return null;
+}
+function claimText() {
+  while (currentNode) {
+    if (currentNode.nodeType === Node.TEXT_NODE) {
+      const text = currentNode;
+      if (isDebug()) {
+        const preview = text.data.length > 30 ? text.data.slice(0, 30) + "..." : text.data;
+        console.debug(`[hydrate] claimText("${preview}") ✓ depth=${cursorStack.length}`);
+      }
+      if (claimedNodes)
+        claimedNodes.add(text);
+      currentNode = text.nextSibling;
+      return text;
+    }
+    if (currentNode.nodeType === Node.ELEMENT_NODE) {
+      break;
+    }
+    currentNode = currentNode.nextSibling;
+  }
+  if (isDebug()) {
+    console.warn("[hydrate] Expected text node but no matching SSR node found.");
+  }
+  return null;
+}
+function claimComment() {
+  while (currentNode) {
+    if (currentNode.nodeType === Node.COMMENT_NODE) {
+      const comment = currentNode;
+      if (claimedNodes)
+        claimedNodes.add(comment);
+      currentNode = comment.nextSibling;
+      return comment;
+    }
+    currentNode = currentNode.nextSibling;
+  }
+  if (isDebug()) {
+    console.warn("[hydrate] Expected comment node but no matching SSR node found.");
+  }
+  return null;
+}
+function enterChildren(el) {
+  cursorStack.push(currentNode);
+  currentNode = el.firstChild;
+}
+function exitChildren() {
+  if (cursorStack.length === 0) {
+    if (isDebug()) {
+      console.warn("[hydrate] exitChildren() called with empty stack. " + "This likely means __exitChildren was called without a matching __enterChildren.");
+    }
+    currentNode = null;
+    return;
+  }
+  currentNode = cursorStack.pop() ?? null;
+}
+function findUnclaimedNodes(root, claimed) {
+  const unclaimed = [];
+  function walk(node) {
+    let child = node.firstChild;
+    while (child) {
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        const el = child;
+        if (el.tagName.includes("-")) {
+          child = child.nextSibling;
+          continue;
+        }
+      }
+      if (child.nodeType === Node.ELEMENT_NODE && claimed.has(child) && child.tagName === "SPAN" && child.style.display === "contents") {
+        child = child.nextSibling;
+        continue;
+      }
+      if (!claimed.has(child)) {
+        if (child.nodeType === Node.ELEMENT_NODE || child.nodeType === Node.TEXT_NODE || child.nodeType === Node.COMMENT_NODE) {
+          unclaimed.push(child);
+        }
+      }
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        walk(child);
+      }
+      child = child.nextSibling;
+    }
+  }
+  walk(root);
+  return unclaimed;
+}
+function describeNode(node) {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const el = node;
+    const id = el.id ? `#${el.id}` : "";
+    const cls = el.className ? `.${String(el.className).split(" ")[0]}` : "";
+    return `<${el.tagName.toLowerCase()}${id}${cls}>`;
+  }
+  if (node.nodeType === Node.TEXT_NODE) {
+    const data = node.data;
+    const preview = data.length > 20 ? data.slice(0, 20) + "..." : data;
+    return `text("${preview}")`;
+  }
+  if (node.nodeType === Node.COMMENT_NODE) {
+    return `<!-- ${node.data} -->`;
+  }
+  return `[node type=${node.nodeType}]`;
+}
+
+// src/dom/element.ts
+var MAX_THUNK_DEPTH = 100;
+function resolveAndAppend(parent, value, depth = 0) {
+  if (depth >= MAX_THUNK_DEPTH) {
+    throw new Error("resolveAndAppend: max recursion depth exceeded — possible circular thunk");
+  }
+  if (value == null || typeof value === "boolean") {
+    return;
+  }
+  if (typeof value === "function") {
+    resolveAndAppend(parent, value(), depth + 1);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      resolveAndAppend(parent, item, depth);
+    }
+    return;
+  }
+  if (isRenderNode(value)) {
+    parent.appendChild(value);
+    return;
+  }
+  const text = typeof value === "string" ? value : String(value);
+  parent.appendChild(getAdapter().createTextNode(text));
+}
+function __text(fn) {
+  if (getIsHydrating()) {
+    const claimed = claimText();
+    if (claimed) {
+      const node2 = claimed;
+      node2.dispose = domEffect(() => {
+        node2.data = fn();
+      });
+      return node2;
+    }
+  }
+  const node = getAdapter().createTextNode("");
+  node.dispose = domEffect(() => {
+    node.data = fn();
+  });
+  return node;
+}
+function __child(fn) {
+  let wrapper;
+  if (getIsHydrating()) {
+    const claimed = claimElement("span");
+    if (claimed) {
+      wrapper = claimed;
+      while (wrapper.firstChild) {
+        wrapper.removeChild(wrapper.firstChild);
+      }
+      pauseHydration();
+      try {
+        wrapper.dispose = domEffect(() => {
+          const value = fn();
+          if (isRenderNode(value) && wrapper.childNodes.length === 1 && wrapper.firstChild === value) {
+            return;
+          }
+          while (wrapper.firstChild) {
+            wrapper.removeChild(wrapper.firstChild);
+          }
+          resolveAndAppend(wrapper, value);
+        });
+      } finally {
+        resumeHydration();
+      }
+      return wrapper;
+    }
+  }
+  wrapper = getAdapter().createElement("span");
+  wrapper.style.display = "contents";
+  wrapper.dispose = domEffect(() => {
+    const value = fn();
+    if (isRenderNode(value) && wrapper.childNodes.length === 1 && wrapper.firstChild === value) {
+      return;
+    }
+    while (wrapper.firstChild) {
+      wrapper.removeChild(wrapper.firstChild);
+    }
+    resolveAndAppend(wrapper, value);
+  });
+  return wrapper;
+}
+function resolveAndInsert(parent, value, depth = 0) {
+  if (depth >= MAX_THUNK_DEPTH) {
+    throw new Error("__insert: max recursion depth exceeded — possible circular thunk");
+  }
+  if (value == null || typeof value === "boolean") {
+    return;
+  }
+  if (typeof value === "function") {
+    resolveAndInsert(parent, value(), depth + 1);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      resolveAndInsert(parent, item, depth);
+    }
+    return;
+  }
+  insertLeaf(parent, value);
+}
+function insertLeaf(parent, value) {
+  if (getIsHydrating()) {
+    if (isRenderNode(value)) {
+      return;
+    }
+    claimText();
+    return;
+  }
+  if (isRenderNode(value)) {
+    parent.appendChild(value);
+    return;
+  }
+  const text = typeof value === "string" ? value : String(value);
+  parent.appendChild(getAdapter().createTextNode(text));
+}
+function __insert(parent, value) {
+  if (value == null || typeof value === "boolean") {
+    return;
+  }
+  resolveAndInsert(parent, value);
+}
+function __element(tag, props) {
+  if (getIsHydrating()) {
+    const claimed = claimElement(tag);
+    if (claimed) {
+      if (props && typeof process !== "undefined" && true) {
+        for (const [key, value] of Object.entries(props)) {
+          if (key === "role" || key.startsWith("aria-")) {
+            const actual = claimed.getAttribute(key);
+            if (actual !== value) {
+              console.warn(`[hydrate] ARIA mismatch on <${tag}>: ${key}="${actual}" (expected "${value}")`);
+            }
+          }
+        }
+      }
+      return claimed;
+    }
+  }
+  const adapter = getAdapter();
+  const svg = isSVGTag(tag);
+  const el = svg ? adapter.createElementNS(SVG_NS, tag) : adapter.createElement(tag);
+  if (props) {
+    for (const [key, value] of Object.entries(props)) {
+      const attrName = svg ? normalizeSVGAttr(key) : key;
+      el.setAttribute(attrName, value);
+    }
+  }
+  return el;
+}
+function __append(parent, child) {
+  if (getIsHydrating())
+    return;
+  parent.appendChild(child);
+}
+function __staticText(text) {
+  if (getIsHydrating()) {
+    const claimed = claimText();
+    if (claimed)
+      return claimed;
+  }
+  return getAdapter().createTextNode(text);
+}
+function __enterChildren(el) {
+  if (getIsHydrating()) {
+    enterChildren(el);
+  }
+}
+function __exitChildren() {
+  if (getIsHydrating()) {
+    exitChildren();
+  }
+}
+
+export { startHydration, endHydration, getIsHydrating, claimText, claimComment, __text, __child, __insert, __element, __append, __staticText, __enterChildren, __exitChildren };

package/dist/shared/chunk-v3yyf79g.js

@@ -0,0 +1,48 @@
+import {
+  domEffect
+} from "./chunk-hrd0mft1.js";
+
+// src/dom/attributes.ts
+function __attr(el, name, fn) {
+  return domEffect(() => {
+    const value = fn();
+    if (value == null || value === false) {
+      el.removeAttribute(name);
+    } else if (value === true) {
+      el.setAttribute(name, "");
+    } else {
+      el.setAttribute(name, value);
+    }
+  });
+}
+function __show(el, fn) {
+  const originalDisplay = el.style.display;
+  return domEffect(() => {
+    el.style.display = fn() ? originalDisplay : "none";
+  });
+}
+function __classList(el, classMap) {
+  const disposers = [];
+  for (const [className, fn] of Object.entries(classMap)) {
+    disposers.push(domEffect(() => {
+      if (fn()) {
+        el.classList.add(className);
+      } else {
+        el.classList.remove(className);
+      }
+    }));
+  }
+  return () => {
+    for (const dispose of disposers) {
+      dispose();
+    }
+  };
+}
+
+// src/dom/events.ts
+function __on(el, event, handler) {
+  el.addEventListener(event, handler);
+  return () => el.removeEventListener(event, handler);
+}
+
+export { __attr, __show, __classList, __on };

package/dist/test/index.d.ts

@@ -138,9 +138,34 @@ type ExtractParams<T extends string> = [ExtractParamsFromSegments<WithoutWildcar
 } : Record<string, never> : HasWildcard<T> extends true ? { [K in ExtractParamsFromSegments<WithoutWildcard<T>>] : string } & {
 	"*": string;
 } : { [K in ExtractParamsFromSegments<WithoutWildcard<T>>] : string };
+/**
+* Convert a route pattern to the union of URL shapes it accepts.
+* - Static: `'/'` → `'/'`
+* - Param: `'/tasks/:id'` → `` `/tasks/${string}` ``
+* - Wildcard: `'/files/*'` → `` `/files/${string}` ``
+* - Multi: `'/users/:id/posts/:postId'` → `` `/users/${string}/posts/${string}` ``
+* - Fallback: `string` → `string` (backward compat)
+*/
+type PathWithParams<T extends string> = T extends `${infer Before}*` ? `${PathWithParams<Before>}${string}` : T extends `${infer Before}:${string}/${infer After}` ? `${Before}${string}/${PathWithParams<`${After}`>}` : T extends `${infer Before}:${string}` ? `${Before}${string}` : T;
+/**
+* Union of all valid URL shapes for a route map.
+* Maps each route pattern key through `PathWithParams` to produce the accepted URL shapes.
+*
+* Example:
+* ```
+* RoutePaths<{ '/': ..., '/tasks/:id': ... }> = '/' | `/tasks/${string}`
+* ```
+*/
+type RoutePaths<TRouteMap extends Record<string, unknown>> = { [K in keyof TRouteMap & string] : PathWithParams<K> }[keyof TRouteMap & string];
 /** Simple schema interface for search param parsing. */
 interface SearchParamSchema<T> {
-	parse(data: unknown): T;
+	parse(data: unknown): {
+		ok: true;
+		data: T;
+	} | {
+		ok: false;
+		error: unknown;
+	};
 }
 /** A route configuration for a single path. */
 interface RouteConfig<
@@ -168,6 +193,30 @@ interface RouteConfig<
 interface RouteDefinitionMap {
 	[pattern: string]: RouteConfig;
 }
+/**
+* Loose route config used as the generic constraint for `defineRoutes`.
+* Uses `Record<string, string>` for loader params so any concrete loader
+* that accesses string params (e.g., `params.id`) satisfies the constraint.
+*/
+interface RouteConfigLike {
+	component: () => Node | Promise<{
+		default: () => Node;
+	}>;
+	/**
+	* Method syntax (`loader?(ctx): R`) is intentional — it enables **bivariant**
+	* parameter checking under `strictFunctionTypes`. Property syntax
+	* (`loader?: (ctx) => R`) would be contravariant, causing `RouteConfig<string>`
+	* (whose loader has `params: Record<string, never>`) to fail assignability
+	* against this constraint's `params: Record<string, string>`.
+	*/
+	loader?(ctx: {
+		params: Record<string, string>;
+		signal: AbortSignal;
+	}): unknown;
+	errorComponent?: (error: Error) => Node;
+	searchParams?: SearchParamSchema<unknown>;
+	children?: Record<string, RouteConfigLike>;
+}
 /** Internal compiled route. */
 interface CompiledRoute {
 	/** The original path pattern. */
@@ -219,8 +268,20 @@ interface NavigateOptions {
 	/** Use history.replaceState instead of pushState. */
 	replace?: boolean;
 }
-/** The router instance returned by createRouter. */
-interface Router {
+/**
+* The router instance returned by createRouter.
+*
+* Generic over the route map `T`. Defaults to `RouteDefinitionMap` (string
+* index signature) for backward compatibility — unparameterized `Router`
+* accepts any string in `navigate()`.
+*
+* Method syntax on `navigate`, `revalidate`, and `dispose` enables bivariant
+* parameter checking under `strictFunctionTypes`. This means `Router<T>` is
+* assignable to `Router` (the unparameterized default), which is required for
+* storing typed routers in the `RouterContext` without contravariance errors.
+* At call sites, TypeScript still enforces the `RoutePaths<T>` constraint.
+*/
+interface Router<T extends Record<string, RouteConfigLike> = RouteDefinitionMap> {
 	/** Current matched route (reactive signal). */
 	current: Signal<RouteMatch | null>;
 	/** Loader data from the current route's loaders (reactive signal). */
@@ -230,11 +291,11 @@ interface Router {
 	/** Parsed search params from the current route (reactive signal). */
 	searchParams: Signal<Record<string, unknown>>;
 	/** Navigate to a new URL path. */
-	navigate: (url: string, options?: NavigateOptions) => Promise<void>;
+	navigate(url: RoutePaths<T>, options?: NavigateOptions): Promise<void>;
 	/** Re-run all loaders for the current route. */
-	revalidate: () => Promise<void>;
+	revalidate(): Promise<void>;
 	/** Remove popstate listener and clean up the router. */
-	dispose: () => void;
+	dispose(): void;
 }
 /** Options for `createTestRouter`. */
 interface TestRouterOptions {

package/dist/test/index.js

@@ -1,10 +1,11 @@
 import {
   createRouter
-} from "../shared/chunk-xd9d7q5p.js";
+} from "../shared/chunk-ka5ked7n.js";
 import {
   defineRoutes
-} from "../shared/chunk-j8vzvne3.js";
-import"../shared/chunk-pgymxpn1.js";
+} from "../shared/chunk-9e92w0wt.js";
+import"../shared/chunk-jrtrk5z4.js";
+import"../shared/chunk-hrd0mft1.js";
 
 // src/test/interactions.ts
 async function click(el) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "license": "MIT",
   "description": "Vertz UI framework — signals, components, JSX runtime",
@@ -58,19 +58,24 @@
   ],
   "scripts": {
     "build": "bunup",
-    "test": "vitest run",
-    "test:watch": "vitest",
+    "test": "bun test",
+    "test:watch": "bun test --watch",
     "typecheck": "tsc --noEmit"
   },
+  "dependencies": {
+    "@vertz/fetch": "0.2.1"
+  },
   "devDependencies": {
-    "@vitest/coverage-v8": "^4.0.18",
-    "bunup": "latest",
-    "happy-dom": "^18.0.1",
-    "typescript": "^5.7.0",
-    "vitest": "^4.0.18"
+    "@happy-dom/global-registrator": "^20.7.0",
+    "@vertz/schema": "0.2.2",
+    "bunup": "^0.16.31",
+    "happy-dom": "^20.7.0",
+    "typescript": "^5.7.0"
   },
   "engines": {
     "node": ">=22"
   },
-  "sideEffects": false
+  "sideEffects": [
+    "dist/shared/*.js"
+  ]
 }

package/dist/shared/chunk-bp3v6s9j.js

@@ -1,62 +0,0 @@
-import {
-  effect,
-  useContext
-} from "./chunk-pgymxpn1.js";
-
-// src/router/link.ts
-function createLink(currentPath, navigate) {
-  return function Link(props) {
-    const el = document.createElement("a");
-    el.setAttribute("href", props.href);
-    el.textContent = props.children;
-    if (props.className) {
-      el.classList.add(props.className);
-    }
-    if (props.activeClass) {
-      const activeClass = props.activeClass;
-      effect(() => {
-        if (currentPath.value === props.href) {
-          el.classList.add(activeClass);
-        } else {
-          el.classList.remove(activeClass);
-        }
-      });
-    }
-    el.addEventListener("click", (event) => {
-      if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
-        return;
-      }
-      event.preventDefault();
-      navigate(props.href);
-    });
-    return el;
-  };
-}
-
-// src/router/outlet.ts
-function createOutlet(outletCtx) {
-  return function Outlet() {
-    const ctx = useContext(outletCtx);
-    if (!ctx || !ctx.childComponent) {
-      return document.createComment("outlet:empty");
-    }
-    return ctx.childComponent();
-  };
-}
-
-// src/router/search-params.ts
-function parseSearchParams(urlParams, schema) {
-  const raw = {};
-  for (const [key, value] of urlParams.entries()) {
-    raw[key] = value;
-  }
-  if (schema) {
-    return schema.parse(raw);
-  }
-  return raw;
-}
-function useSearchParams(searchSignal) {
-  return searchSignal.value;
-}
-
-export { createLink, createOutlet, parseSearchParams, useSearchParams };