gorsee 0.2.4 → 0.2.5

package/{src/runtime/event-replay.ts → dist-pkg/runtime/event-replay.js}

@@ -1,9 +1,3 @@
-// Event Replay -- captures user interactions before hydration completes
-// Inspired by Angular's JSAction / Google Wiz
-//
-// This generates a small inline <script> (~400 bytes minified)
-// that should be placed before any app content in the HTML.
-
 export const EVENT_REPLAY_SCRIPT = `<script data-g-event-replay>
 (function(){
   var Q=[];
@@ -29,22 +23,13 @@ export const EVENT_REPLAY_SCRIPT = `<script data-g-event-replay>
     }
   };
 })();
-</script>`
-
-interface GorseeEventReplay {
-  queue: unknown[]
-  stop(): void
-  replay(root: Element): void
+</script>`;
+function getEventReplay() {
+  return globalThis.__gorsee_events;
 }
-
-function getEventReplay(): GorseeEventReplay | undefined {
-  return (globalThis as Record<string, unknown>).__gorsee_events as GorseeEventReplay | undefined
+export function replayEvents(root) {
+  getEventReplay()?.replay(root);
 }
-
-export function replayEvents(root: Element): void {
-  getEventReplay()?.replay(root)
-}
-
-export function stopEventCapture(): void {
-  getEventReplay()?.stop()
+export function stopEventCapture() {
+  getEventReplay()?.stop();
 }

package/dist-pkg/runtime/event-source.d.ts

@@ -0,0 +1,7 @@
+import { type SignalGetter } from "../reactive/signal.js";
+export interface EventSourceSignal<T> {
+    readonly value: SignalGetter<T>;
+    readonly connected: SignalGetter<boolean>;
+    close: () => void;
+}
+export declare function createEventSource<T>(url: string, event: string, initialValue: T): EventSourceSignal<T>;

package/dist-pkg/runtime/event-source.js

@@ -0,0 +1,24 @@
+import { createSignal } from "../reactive/signal.js";
+export function createEventSource(url, event, initialValue) {
+  const [value, setValue] = createSignal(initialValue), [connected, setConnected] = createSignal(!1);
+  if (typeof globalThis.EventSource > "u")
+    return { value, connected, close: () => {} };
+  const source = new EventSource(url);
+  source.addEventListener("open", () => {
+    setConnected(!0);
+  });
+  source.addEventListener(event, (e) => {
+    try {
+      const parsed = JSON.parse(String(e.data));
+      setValue(parsed);
+    } catch {}
+  });
+  source.addEventListener("error", () => {
+    setConnected(!1);
+  });
+  function close() {
+    source.close();
+    setConnected(!1);
+  }
+  return { value, connected, close };
+}

package/dist-pkg/runtime/form.d.ts

@@ -0,0 +1,24 @@
+import { type SignalGetter } from "../reactive/signal.js";
+export interface FormActionResult<T = unknown> {
+    ok?: boolean;
+    status?: number;
+    data?: T;
+    error?: string;
+    fieldErrors?: Record<string, string[]>;
+    formErrors?: string[];
+    values?: Record<string, string>;
+}
+export interface FormSubmitOptions<T = unknown> {
+    optimisticData?: T;
+}
+export interface FormState<T = unknown> {
+    submitting: SignalGetter<boolean>;
+    status: SignalGetter<"idle" | "submitting" | "success" | "error">;
+    error: SignalGetter<string | undefined>;
+    formErrors: SignalGetter<string[]>;
+    fieldErrors: SignalGetter<Record<string, string[]>>;
+    data: SignalGetter<T | undefined>;
+    submit: (formData: FormData | Record<string, string>, options?: FormSubmitOptions<T>) => Promise<FormActionResult<T>>;
+    reset: () => void;
+}
+export declare function useFormAction<T = unknown>(actionUrl?: string): FormState<T>;

package/dist-pkg/runtime/form.js

@@ -0,0 +1,59 @@
+import { createSignal } from "../reactive/signal.js";
+function normalizeFormInput(input) {
+  return input instanceof FormData ? input : new URLSearchParams(input);
+}
+export function useFormAction(actionUrl) {
+  const [submitting, setSubmitting] = createSignal(!1), [status, setStatus] = createSignal("idle"), [error, setError] = createSignal(void 0), [formErrors, setFormErrors] = createSignal([]), [fieldErrors, setFieldErrors] = createSignal({}), [data, setData] = createSignal(void 0);
+  function reset() {
+    setSubmitting(!1);
+    setStatus("idle");
+    setError(void 0);
+    setFormErrors([]);
+    setFieldErrors({});
+    setData(void 0);
+  }
+  async function submit(input, options = {}) {
+    setSubmitting(!0);
+    setStatus("submitting");
+    setError(void 0);
+    setFormErrors([]);
+    setFieldErrors({});
+    if (options.optimisticData !== void 0)
+      setData(() => options.optimisticData);
+    try {
+      const url = actionUrl ?? location.pathname, res = await fetch(url, {
+        method: "POST",
+        body: normalizeFormInput(input),
+        headers: {
+          Accept: "application/json"
+        }
+      }), rawResult = await res.json(), result = {
+        ok: rawResult.ok ?? res.ok,
+        status: rawResult.status ?? res.status,
+        data: rawResult.data,
+        error: rawResult.error,
+        fieldErrors: rawResult.fieldErrors,
+        formErrors: rawResult.formErrors,
+        values: rawResult.values
+      };
+      if (result.ok === !1 || result.error || result.formErrors && result.formErrors.length > 0 || result.fieldErrors && Object.keys(result.fieldErrors).length > 0) {
+        setStatus("error");
+        setError(result.error);
+        setFormErrors(result.formErrors ?? []);
+        setFieldErrors(result.fieldErrors ?? {});
+        return result;
+      }
+      setStatus("success");
+      setData(() => result.data);
+      return result;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setStatus("error");
+      setError(message);
+      return { ok: !1, status: 500, error: message };
+    } finally {
+      setSubmitting(!1);
+    }
+  }
+  return { submitting, status, error, formErrors, fieldErrors, data, submit, reset };
+}

package/dist-pkg/runtime/head.d.ts

@@ -0,0 +1,7 @@
+interface HeadProps {
+    children?: unknown;
+}
+export declare function resetServerHead(): void;
+export declare function getServerHead(): string[];
+export declare function Head(props: HeadProps): null;
+export {};

package/dist-pkg/runtime/head.js

@@ -0,0 +1,90 @@
+let serverHeadElements = [];
+export function resetServerHead() {
+  serverHeadElements = [];
+}
+export function getServerHead() {
+  return serverHeadElements;
+}
+export function Head(props) {
+  const children = props.children;
+  if (!children)
+    return null;
+  if (typeof document < "u")
+    applyClientHead(children);
+  else
+    collectServerHead(children);
+  return null;
+}
+function isVNode(v) {
+  return typeof v === "object" && v !== null && "type" in v && "props" in v;
+}
+function collectServerHead(children) {
+  if (Array.isArray(children)) {
+    for (const child of children)
+      collectServerHead(child);
+    return;
+  }
+  if (!isVNode(children))
+    return;
+  const { type, props } = children;
+  if (type === "title" && props.children) {
+    serverHeadElements.push(`<title>${String(props.children)}</title>`);
+    return;
+  }
+  let tag = `<${type}`;
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children")
+      continue;
+    if (value != null)
+      tag += ` ${key}="${String(value)}"`;
+  }
+  if (props.children)
+    tag += `>${String(props.children)}</${type}>`;
+  else
+    tag += " />";
+  serverHeadElements.push(tag);
+}
+function applyClientHead(children) {
+  if (Array.isArray(children)) {
+    for (const child of children)
+      applyClientHead(child);
+    return;
+  }
+  if (!isVNode(children))
+    return;
+  const { type, props } = children;
+  if (type === "title") {
+    document.title = String(props.children ?? "");
+    return;
+  }
+  if (type === "meta") {
+    const name = props.name ?? props.property;
+    if (name) {
+      const existing = document.querySelector(`meta[name="${name}"], meta[property="${name}"]`);
+      if (existing) {
+        existing.setAttribute("content", String(props.content ?? ""));
+        return;
+      }
+    }
+    const meta = document.createElement("meta");
+    for (const [key, value] of Object.entries(props)) {
+      if (key === "children")
+        continue;
+      if (value != null)
+        meta.setAttribute(key, String(value));
+    }
+    document.head.appendChild(meta);
+    return;
+  }
+  if (type === "link") {
+    const el = document.createElement("link");
+    for (const [key, value] of Object.entries(props)) {
+      if (key === "children")
+        continue;
+      if (value != null)
+        el.setAttribute(key, String(value));
+    }
+    el.dataset.gHead = "";
+    document.head.appendChild(el);
+  }
+}

package/dist-pkg/runtime/html-escape.d.ts

@@ -0,0 +1,7 @@
+export declare const GORSEE_SIGNAL_MARKER = "__gorseeSignal";
+export declare function escapeHTML(value: string): string;
+export declare function escapeAttr(value: string): string;
+export declare const VOID_ELEMENTS: Set<string>;
+export declare function isSignal(value: unknown): value is () => unknown;
+export declare function isRenderableThunk(value: unknown): value is () => unknown;
+export declare function resolveValue(value: unknown): unknown;

package/dist-pkg/runtime/html-escape.js

@@ -0,0 +1,39 @@
+const HTML_ESCAPE_RE = /[&<>"']/g, ATTR_ESCAPE_RE = /["&]/g, HTML_ESCAPES = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#x27;"
+};
+export const GORSEE_SIGNAL_MARKER = "__gorseeSignal";
+export function escapeHTML(value) {
+  return value.replace(HTML_ESCAPE_RE, (ch) => HTML_ESCAPES[ch] ?? ch);
+}
+export function escapeAttr(value) {
+  return value.replace(ATTR_ESCAPE_RE, (ch) => HTML_ESCAPES[ch] ?? ch);
+}
+export const VOID_ELEMENTS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+export function isSignal(value) {
+  return typeof value === "function" && value[GORSEE_SIGNAL_MARKER] === !0;
+}
+export function isRenderableThunk(value) {
+  return typeof value === "function" && value.length === 0 && !isSignal(value);
+}
+export function resolveValue(value) {
+  return isSignal(value) ? value() : value;
+}

package/dist-pkg/runtime/hydration.d.ts

@@ -0,0 +1,15 @@
+export interface HydrationDiagnostics {
+    active: boolean;
+    mismatches: number;
+    recoverableMismatch: boolean;
+}
+export declare function isHydrating(): boolean;
+export declare function getHydrationMismatches(): number;
+export declare function getHydrationDiagnostics(): HydrationDiagnostics;
+export declare function resetHydrationDiagnostics(): void;
+export declare function enterHydration(root: Element): void;
+export declare function exitHydration(): HydrationDiagnostics;
+export declare function claimElement(expectedTag?: string): Element | null;
+export declare function claimText(expectedText?: string): Text | null;
+export declare function pushCursor(parent: Node): void;
+export declare function popCursor(): void;

package/dist-pkg/runtime/hydration.js

@@ -0,0 +1,103 @@
+const stack = [];
+let active = !1, mismatches = 0;
+export function isHydrating() {
+  return active;
+}
+export function getHydrationMismatches() {
+  return mismatches;
+}
+export function getHydrationDiagnostics() {
+  return { active, mismatches, recoverableMismatch: mismatches > 0 };
+}
+export function resetHydrationDiagnostics() {
+  mismatches = 0;
+}
+export function enterHydration(root) {
+  active = !0;
+  mismatches = 0;
+  stack.length = 0;
+  stack.push({ parent: root, index: 0 });
+}
+export function exitHydration() {
+  for (const cursor of stack)
+    mismatches += countRemainingMeaningfulNodes(cursor);
+  active = !1;
+  stack.length = 0;
+  if (mismatches > 0 && typeof console < "u")
+    console.warn(`[gorsee] Hydration completed with ${mismatches} mismatch(es). Server and client HTML may differ.`);
+  return getHydrationDiagnostics();
+}
+export function claimElement(expectedTag) {
+  const cursor = stack[stack.length - 1];
+  if (!cursor)
+    return null;
+  while (cursor.index < cursor.parent.childNodes.length) {
+    const node = cursor.parent.childNodes[cursor.index];
+    if (node.nodeType === 1) {
+      if (expectedTag && node.tagName.toLowerCase() !== expectedTag.toLowerCase()) {
+        mismatches++;
+        return null;
+      }
+      cursor.index++;
+      return node;
+    }
+    if (node.nodeType === 3 && node.textContent?.trim() === "") {
+      cursor.index++;
+      continue;
+    }
+    if (node.nodeType === 8) {
+      cursor.index++;
+      continue;
+    }
+    break;
+  }
+  return null;
+}
+export function claimText(expectedText) {
+  const cursor = stack[stack.length - 1];
+  if (!cursor)
+    return null;
+  while (cursor.index < cursor.parent.childNodes.length) {
+    const node = cursor.parent.childNodes[cursor.index];
+    if (node.nodeType === 3) {
+      cursor.index++;
+      const textNode = node;
+      if (expectedText !== void 0) {
+        const currentText = textNode.textContent ?? "";
+        if (currentText !== expectedText)
+          if (currentText.startsWith(expectedText) && expectedText.length < currentText.length) {
+            textNode.splitText(expectedText.length);
+            textNode.textContent = expectedText;
+          } else {
+            textNode.textContent = expectedText;
+            mismatches++;
+          }
+      }
+      return textNode;
+    }
+    if (node.nodeType === 8) {
+      cursor.index++;
+      continue;
+    }
+    break;
+  }
+  return null;
+}
+export function pushCursor(parent) {
+  stack.push({ parent, index: 0 });
+}
+export function popCursor() {
+  stack.pop();
+}
+function countRemainingMeaningfulNodes(cursor) {
+  let count = 0;
+  for (let i = cursor.index;i < cursor.parent.childNodes.length; i++) {
+    const node = cursor.parent.childNodes[i];
+    if (node.nodeType === 8)
+      continue;
+    if (node.nodeType === 3 && node.textContent?.trim() === "")
+      continue;
+    count++;
+  }
+  return count;
+}

package/dist-pkg/runtime/image.d.ts

@@ -0,0 +1,49 @@
+import type { GorseeRenderable } from "./renderable.js";
+export type ImageFormat = "avif" | "webp" | "jpeg" | "png";
+export type ImageFit = "cover" | "contain" | "fill" | "inside" | "outside";
+export interface ImageRemotePattern {
+    protocol?: "http:" | "https:";
+    hostname: string;
+    pathname?: string;
+}
+export interface ImageLoaderParams {
+    src: string;
+    width: number;
+    quality: number;
+    format?: ImageFormat;
+}
+export type ImageLoader = (params: ImageLoaderParams) => string;
+export interface ImageRuntimeConfig {
+    widths?: number[];
+    formats?: ImageFormat[];
+    quality?: number;
+    fit?: ImageFit;
+    loader?: ImageLoader;
+    remotePatterns?: ImageRemotePattern[];
+}
+export interface ImageProps {
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    loading?: "lazy" | "eager";
+    priority?: boolean;
+    sizes?: string;
+    quality?: number;
+    fit?: ImageFit;
+    format?: ImageFormat;
+    formats?: ImageFormat[];
+    optimize?: boolean;
+    placeholder?: "empty" | "blur";
+    blurDataURL?: string;
+    class?: string;
+    className?: string;
+    config?: ImageRuntimeConfig;
+    [key: string]: unknown;
+}
+export declare function isAllowedRemoteImage(src: string, patterns?: ImageRemotePattern[]): boolean;
+export declare function defaultImageLoader(params: ImageLoaderParams): string;
+export declare function getImageCandidateWidths(width: number | undefined, widths?: number[]): number[];
+export declare function buildImageSrcSet(src: string, width: number | undefined, quality: number, loader: ImageLoader, format?: ImageFormat, widths?: number[]): string | undefined;
+export declare function getImageProps(props: ImageProps): Record<string, unknown>;
+export declare function Image(props: ImageProps): GorseeRenderable;

package/dist-pkg/runtime/image.js

@@ -0,0 +1,144 @@
+const DEFAULT_IMAGE_CONFIG = {
+  widths: [320, 640, 960, 1200, 1600, 2048],
+  formats: ["webp"],
+  quality: 75,
+  fit: "cover"
+};
+function isRemoteSource(src) {
+  return /^https?:\/\//.test(src);
+}
+function matchesRemotePattern(url, pattern) {
+  if (pattern.protocol && url.protocol !== pattern.protocol)
+    return !1;
+  if (pattern.hostname !== url.hostname)
+    return !1;
+  if (!pattern.pathname)
+    return !0;
+  if (pattern.pathname.endsWith("/**")) {
+    const prefix = pattern.pathname.slice(0, -3);
+    return url.pathname.startsWith(prefix);
+  }
+  if (pattern.pathname.endsWith("/*")) {
+    const prefix = pattern.pathname.slice(0, -1);
+    return url.pathname.startsWith(prefix) && !url.pathname.slice(prefix.length).includes("/");
+  }
+  return url.pathname === pattern.pathname;
+}
+export function isAllowedRemoteImage(src, patterns = []) {
+  if (!isRemoteSource(src))
+    return !0;
+  const url = new URL(src);
+  return patterns.some((pattern) => matchesRemotePattern(url, pattern));
+}
+export function defaultImageLoader(params) {
+  const search = new URLSearchParams({
+    src: params.src,
+    w: String(params.width),
+    q: String(params.quality)
+  });
+  if (params.format)
+    search.set("fm", params.format);
+  return `/_gorsee/image?${search.toString()}`;
+}
+export function getImageCandidateWidths(width, widths = DEFAULT_IMAGE_CONFIG.widths) {
+  if (!width)
+    return [...widths];
+  const candidates = widths.filter((candidate) => candidate <= width * 2);
+  if (!candidates.includes(width))
+    candidates.push(width);
+  return [...new Set(candidates)].sort((a, b) => a - b);
+}
+export function buildImageSrcSet(src, width, quality, loader, format, widths = DEFAULT_IMAGE_CONFIG.widths) {
+  const candidates = getImageCandidateWidths(width, widths);
+  if (candidates.length === 0)
+    return;
+  return candidates.map((candidate) => `${loader({ src, width: candidate, quality, format })} ${candidate}w`).join(", ");
+}
+function buildPlaceholderStyle(props) {
+  if (props.placeholder !== "blur" || !props.blurDataURL)
+    return;
+  return {
+    backgroundImage: `url("${props.blurDataURL}")`,
+    backgroundSize: "cover",
+    backgroundPosition: "center"
+  };
+}
+function resolveImageConfig(props) {
+  const config = props.config ?? {};
+  return {
+    widths: config.widths ?? DEFAULT_IMAGE_CONFIG.widths,
+    formats: config.formats ?? DEFAULT_IMAGE_CONFIG.formats,
+    quality: props.quality ?? config.quality ?? DEFAULT_IMAGE_CONFIG.quality,
+    fit: props.fit ?? config.fit ?? DEFAULT_IMAGE_CONFIG.fit,
+    loader: config.loader,
+    remotePatterns: config.remotePatterns
+  };
+}
+export function getImageProps(props) {
+  const {
+    src,
+    alt,
+    width,
+    height,
+    loading: loadingProp,
+    priority,
+    sizes,
+    format,
+    formats,
+    optimize = !0,
+    placeholder,
+    blurDataURL,
+    config,
+    style,
+    ...rest
+  } = props, resolved = resolveImageConfig(props), loading = priority ? "eager" : loadingProp ?? "lazy", fetchpriority = priority ? "high" : void 0, decoding = priority ? "sync" : "async", loader = resolved.loader ?? defaultImageLoader;
+  if (isRemoteSource(src) && !isAllowedRemoteImage(src, resolved.remotePatterns ?? []))
+    throw Error(`Remote image source is not allowed: ${src}`);
+  const shouldOptimize = optimize && Boolean(width), primaryFormat = format ?? formats?.[0] ?? resolved.formats[0], optimizedSrc = shouldOptimize ? loader({ src, width, quality: resolved.quality, format: primaryFormat }) : src, srcSet = shouldOptimize ? buildImageSrcSet(src, width, resolved.quality, loader, primaryFormat, resolved.widths) : void 0, imgProps = {
+    src: optimizedSrc,
+    alt,
+    loading,
+    decoding,
+    ...rest
+  };
+  if (width !== void 0)
+    imgProps.width = String(width);
+  if (height !== void 0)
+    imgProps.height = String(height);
+  if (sizes)
+    imgProps.sizes = sizes;
+  if (fetchpriority)
+    imgProps.fetchpriority = fetchpriority;
+  if (srcSet)
+    imgProps.srcset = srcSet;
+  const placeholderStyle = buildPlaceholderStyle({ ...props, placeholder, blurDataURL }), mergedStyle = {
+    ...typeof style === "object" && style !== null ? style : {},
+    ...placeholderStyle ?? {},
+    ...shouldOptimize ? { "object-fit": resolved.fit } : {}
+  };
+  if (Object.keys(mergedStyle).length > 0)
+    imgProps.style = mergedStyle;
+  return imgProps;
+}
+export function Image(props) {
+  const resolved = resolveImageConfig(props), requestedFormats = props.formats ?? resolved.formats, primaryFormat = props.format ?? requestedFormats[0];
+  if (props.optimize === !1 || !props.width || requestedFormats.length <= 1)
+    return { type: "img", props: getImageProps({ ...props, format: primaryFormat }) };
+  const loader = resolved.loader ?? defaultImageLoader;
+  return {
+    type: "picture",
+    props: {
+      children: [
+        ...requestedFormats.slice(0, -1).map((candidateFormat) => ({
+          type: "source",
+          props: {
+            type: `image/${candidateFormat}`,
+            srcset: buildImageSrcSet(props.src, props.width, resolved.quality, loader, candidateFormat, resolved.widths),
+            sizes: props.sizes
+          }
+        })),
+        { type: "img", props: getImageProps({ ...props, format: primaryFormat }) }
+      ]
+    }
+  };
+}

package/dist-pkg/runtime/index.d.ts

@@ -0,0 +1,17 @@
+export { Suspense } from "./suspense.js";
+export { render, hydrate } from "./client.js";
+export { enterHydration, exitHydration, isHydrating, getHydrationMismatches, getHydrationDiagnostics, resetHydrationDiagnostics, } from "./hydration.js";
+export { renderToString, ssrJsx, ssrJsxs } from "./server.js";
+export { renderToStream, StreamSuspense, streamJsx, streamJsxs } from "./stream.js";
+export { EVENT_REPLAY_SCRIPT, replayEvents, stopEventCapture } from "./event-replay.js";
+export { Link } from "./link.js";
+export { Head } from "./head.js";
+export { navigate, onNavigate, beforeNavigate, getCurrentPath, getRouterNavigationDiagnostics, prefetch, initRouter, setLoadingElement, } from "./router.js";
+export { RUNTIME_DEVTOOLS_SCHEMA_VERSION, createRuntimeDevtoolsSnapshot, renderRuntimeDevtoolsHTML, renderRuntimeDevtoolsOverlay, type RuntimeDevtoolsOptions, type RuntimeDevtoolsRouteEntry, type RuntimeDevtoolsRouteSummary, type RuntimeDevtoolsSnapshot, type RuntimeDevtoolsSummary, type RuntimeDevtoolsTopNode, } from "./devtools.js";
+export { useFormAction, type FormActionResult, type FormState, type FormSubmitOptions } from "./form.js";
+export { Image, getImageProps, buildImageSrcSet, getImageCandidateWidths, isAllowedRemoteImage, defaultImageLoader, type ImageProps, type ImageLoader, type ImageLoaderParams, type ImageRuntimeConfig, type ImageRemotePattern, type ImageFormat, } from "./image.js";
+export { typedLink, typedNavigate, typedPrefetch, buildSearchParams, buildTypedPath, createTypedRoute, extractRouteParamKeys, } from "./typed-routes.js";
+export { defineForm, validateForm, validateAction, toFieldErrors, fieldAttrs, type FormField, type FormSchema, type ValidationResult, type ActionValidationResult, type ValidationError, } from "./validated-form.js";
+export { island, isIsland } from "./island.js";
+export { hydrateIslands, registerIsland } from "./island-hydrator.js";
+export { createEventSource, type EventSourceSignal } from "./event-source.js";