@epoch32/visage 0.0.0-stage → 0.0.0

package/src/dom/render.ts

@@ -0,0 +1,286 @@
+import {
+  createRoot,
+  effect,
+  getActiveScope,
+  isSignal,
+  onCleanup,
+  type ReadonlySignal,
+  runInScope,
+  Scope
+} from "../signals";
+import { hasReactiveClass, normalizeClass } from "../style/cx";
+import { formatStyleProp } from "../style/scale";
+
+export type ReactiveValue<T> = T | ReadonlySignal<T> | (() => T);
+export type Child =
+  | Node
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | ReadonlySignal<any>
+  | (() => any)
+  | Child[];
+
+/**
+ * Check if a property is a reactive getter or signal
+ */
+export function isReactive<T>(value: unknown): value is ReadonlySignal<T> | (() => T) {
+  return isSignal(value) || typeof value === "function";
+}
+
+/**
+ * Extract current value whether static, signal, or getter
+ */
+export function resolveValue<T>(val: ReactiveValue<T>): T {
+  if (typeof val === "function") {
+    return (val as () => T)();
+  }
+  return val;
+}
+
+/**
+ * Mount a Visage component or element to a DOM container
+ */
+export function render(fn: () => Child, container: HTMLElement | DocumentFragment): () => void {
+  return createRoot((dispose) => {
+    container.textContent = "";
+    const node = insertChild(container, fn());
+    onCleanup(() => {
+      if (node && node instanceof Node && node.parentNode === container) {
+        container.removeChild(node);
+      }
+    });
+    return dispose;
+  });
+}
+
+/**
+ * Bind dynamic or static attributes, properties, styles, and events to an Element
+ */
+export function setAttribute(el: HTMLElement | SVGElement, key: string, value: any): void {
+  // Event listeners (e.g. onClick, onInput, onclick)
+  if (key.startsWith("on") && typeof value === "function") {
+    const eventName = key.startsWith("onCapture")
+      ? key.slice(9).toLowerCase()
+      : key.slice(2).toLowerCase();
+    const useCapture = key.startsWith("onCapture");
+
+    el.addEventListener(eventName, value as EventListener, useCapture);
+    onCleanup(() => {
+      el.removeEventListener(eventName, value as EventListener, useCapture);
+    });
+    return;
+  }
+
+  // Ref callback
+  if (key === "ref" && typeof value === "function") {
+    value(el);
+    return;
+  }
+
+  // Reactive class / className with array or object support
+  if (key === "class" || key === "className") {
+    if (hasReactiveClass(value)) {
+      effect(() => {
+        const cls = normalizeClass(value);
+        if (cls) el.setAttribute("class", cls);
+        else el.removeAttribute("class");
+      });
+    } else {
+      const cls = normalizeClass(value);
+      if (cls) el.setAttribute("class", cls);
+      else el.removeAttribute("class");
+    }
+    return;
+  }
+
+  // Reactive attributes
+  if (isReactive(value)) {
+    effect(() => {
+      const resolved = resolveValue(value);
+      applyProp(el, key, resolved);
+    });
+  } else {
+    applyProp(el, key, value);
+  }
+}
+
+function setStyleProperty(el: HTMLElement | SVGElement, prop: string, val: any): void {
+  const formatted = formatStyleProp(prop, val);
+  if (prop.startsWith("--") || prop.includes("-")) {
+    if (formatted === "") {
+      el.style.removeProperty(prop);
+    } else {
+      el.style.setProperty(prop, formatted);
+    }
+  } else {
+    (el.style as any)[prop] = formatted;
+  }
+}
+
+function applyProp(el: HTMLElement | SVGElement, key: string, value: any) {
+  if (
+    value === null ||
+    value === undefined ||
+    (value === false && !key.startsWith("aria-") && !key.startsWith("data-"))
+  ) {
+    if (key === "className" || key === "class") {
+      el.removeAttribute("class");
+    } else if (key === "style" && typeof value === "string") {
+      el.removeAttribute("style");
+    } else if (key in el && !(el instanceof SVGElement)) {
+      try {
+        (el as any)[key] = typeof (el as any)[key] === "boolean" ? false : "";
+      } catch {
+        el.removeAttribute(key);
+      }
+    } else {
+      el.removeAttribute(key);
+    }
+    return;
+  }
+
+  if (key === "className" || key === "class") {
+    const cls = normalizeClass(value);
+    if (cls) {
+      el.setAttribute("class", cls);
+    } else {
+      el.removeAttribute("class");
+    }
+  } else if (key === "style") {
+    if (typeof value === "string") {
+      el.setAttribute("style", value);
+    } else if (typeof value === "object" && value !== null) {
+      for (const styleKey in value) {
+        const styleVal = value[styleKey];
+        if (isReactive(styleVal)) {
+          effect(() => {
+            setStyleProperty(el, styleKey, resolveValue(styleVal));
+          });
+        } else {
+          setStyleProperty(el, styleKey, styleVal);
+        }
+      }
+    }
+  } else if (key === "dangerouslySetInnerHTML" && value && typeof value.__html === "string") {
+    el.innerHTML = value.__html;
+  } else if (key in el && !(el instanceof SVGElement) && key !== "list" && key !== "form") {
+    try {
+      (el as any)[key] = value;
+    } catch {
+      el.setAttribute(key, String(value));
+    }
+  } else {
+    if (key.startsWith("aria-") || key.startsWith("data-")) {
+      el.setAttribute(key, String(value));
+    } else if (value === true) {
+      el.setAttribute(key, "");
+    } else {
+      el.setAttribute(key, String(value));
+    }
+  }
+}
+
+/**
+ * Insert a child node into a parent container with reactive fine-grained updates
+ */
+export function insertChild(parent: Node, child: Child, before: Node | null = null): Node | null {
+  if (child === null || child === undefined || child === false || child === true) {
+    return null;
+  }
+
+  if (child instanceof Node) {
+    parent.insertBefore(child, before);
+    return child;
+  }
+
+  if (Array.isArray(child)) {
+    const fragment = document.createDocumentFragment();
+    for (const item of child) {
+      insertChild(fragment, item);
+    }
+    parent.insertBefore(fragment, before);
+    return fragment;
+  }
+
+  if (isReactive(child)) {
+    // Fine-grained reactive binding
+    const marker = document.createTextNode("");
+    parent.insertBefore(marker, before);
+
+    let childScope: Scope | null = null;
+    let currentNodes: Node[] = [];
+
+    effect(() => {
+      const resolved = resolveValue(child as ReactiveValue<any>);
+
+      // Ultra-fast path: mutate existing single text node without recreating DOM
+      if (
+        (typeof resolved === "string" || typeof resolved === "number") &&
+        currentNodes.length === 1 &&
+        currentNodes[0]!.nodeType === Node.TEXT_NODE
+      ) {
+        (currentNodes[0] as Text).data = String(resolved);
+        return;
+      }
+
+      if (childScope) {
+        childScope.dispose();
+      }
+      childScope = new Scope(getActiveScope());
+
+      runInScope(childScope, () => {
+        // Clean up previous rendered nodes from DOM
+        for (const node of currentNodes) {
+          if (node.parentNode) {
+            node.parentNode.removeChild(node);
+          }
+        }
+        currentNodes = [];
+
+        if (resolved === null || resolved === undefined || resolved === false) {
+          return;
+        }
+
+        const frag = document.createDocumentFragment();
+        if (
+          typeof resolved === "string" ||
+          typeof resolved === "number" ||
+          typeof resolved === "boolean"
+        ) {
+          frag.appendChild(document.createTextNode(String(resolved)));
+        } else {
+          insertChild(frag, resolved);
+        }
+
+        currentNodes = Array.from(frag.childNodes);
+        if (marker.parentNode) {
+          marker.parentNode.insertBefore(frag, marker);
+        }
+      });
+    });
+
+    onCleanup(() => {
+      if (childScope) {
+        childScope.dispose();
+      }
+      for (const node of currentNodes) {
+        if (node.parentNode) {
+          node.parentNode.removeChild(node);
+        }
+      }
+      if (marker.parentNode) {
+        marker.parentNode.removeChild(marker);
+      }
+    });
+
+    return marker;
+  }
+
+  // Primitive static child
+  const textNode = document.createTextNode(String(child));
+  parent.insertBefore(textNode, before);
+  return textNode;
+}

package/src/dom/resource.ts

@@ -0,0 +1,120 @@
+import { effect, type ReadonlySignal, signal, type WritableSignal } from "../signals";
+import { createContext, useContext } from "../signals/context";
+import { type ReactiveValue, resolveValue } from "./render";
+
+// Suspense Context for tracking active async requests
+export interface SuspenseContextValue {
+  registerPromise(p: Promise<any>): void;
+}
+
+export const SuspenseContext = createContext<SuspenseContextValue | null>(null);
+
+export interface ResourceActions<T> {
+  mutate(value: T): void;
+  refetch(): Promise<T>;
+  readonly loading: ReadonlySignal<boolean>;
+  readonly error: ReadonlySignal<any>;
+}
+
+export type Resource<T> = ReadonlySignal<T | undefined> & ResourceActions<T>;
+
+/**
+ * Create an asynchronous resource tied to optional source signals and suspense boundaries.
+ *
+ * Automatically tracks async state, registers pending promises with `<Suspense>`,
+ * and supports manual mutation and refetching.
+ *
+ * @example
+ * ```tsx
+ * const [userId, setUserId] = createSignal("user-1");
+ * const user = createResource(userId, (id) => fetchUser(id));
+ *
+ * // Read data, loading state, error
+ * <div>{() => user()?.name}</div>
+ * ```
+ *
+ * @param sourceOrFetcher - A reactive source signal or direct async fetcher function
+ * @param maybeFetcher - Async fetcher taking the resolved source value
+ * @returns A reactive Resource accessor with `.loading`, `.error`, `.mutate`, and `.refetch`
+ */
+export function createResource<T>(fetcher: () => Promise<T>): Resource<T>;
+export function createResource<T, S>(
+  source: ReactiveValue<S>,
+  fetcher: (source: S) => Promise<T>
+): Resource<T>;
+export function createResource<T, S>(
+  sourceOrFetcher: ReactiveValue<S> | (() => Promise<T>),
+  maybeFetcher?: (source: S) => Promise<T>
+): Resource<T> {
+  const isDirect = typeof maybeFetcher !== "function";
+  const fetcher = isDirect ? (sourceOrFetcher as () => Promise<T>) : maybeFetcher!;
+  const source = isDirect ? null : (sourceOrFetcher as ReactiveValue<S>);
+
+  const data: WritableSignal<T | undefined> = signal<T | undefined>(undefined);
+  const loading = signal<boolean>(true);
+  const error = signal<any>(null);
+
+  let currentPromise: Promise<T> | null = null;
+  let requestId = 0;
+
+  const load = async (arg?: S): Promise<T> => {
+    const currentReq = ++requestId;
+    loading.set(true);
+    error.set(null);
+
+    const promise = isDirect ? (fetcher as () => Promise<T>)() : fetcher(arg!);
+    currentPromise = promise;
+
+    const suspense = useContext(SuspenseContext);
+    if (suspense) {
+      suspense.registerPromise(promise);
+    }
+
+    try {
+      const res = await promise;
+      if (currentReq === requestId) {
+        data.set(res);
+        loading.set(false);
+        currentPromise = null;
+      }
+      return res;
+    } catch (err) {
+      if (currentReq === requestId) {
+        error.set(err);
+        loading.set(false);
+        currentPromise = null;
+      }
+      throw err;
+    }
+  };
+
+  if (source) {
+    effect(() => {
+      const sourceVal = resolveValue(source);
+      if (sourceVal !== false && sourceVal !== null && sourceVal !== undefined) {
+        load(sourceVal).catch(() => {});
+      }
+    });
+  } else {
+    load().catch(() => {});
+  }
+
+  const accessor = ((): T | undefined => {
+    if (loading() && currentPromise) {
+      const suspense = useContext(SuspenseContext);
+      if (suspense) {
+        suspense.registerPromise(currentPromise);
+      }
+    }
+    return data();
+  }) as Resource<T>;
+
+  Object.defineProperties(accessor, {
+    loading: { get: () => loading },
+    error: { get: () => error },
+    mutate: { value: (val: T) => data.set(val) },
+    refetch: { value: () => (source ? load(resolveValue(source)) : load()) }
+  });
+
+  return accessor;
+}

package/src/form/form.ts

@@ -0,0 +1,218 @@
+import { batch, computed, type ReadonlySignal, signal, type WritableSignal } from "../signals";
+import { type SchemaLike, validateWithSchema } from "./schema";
+
+export interface FieldState<T> {
+  value: WritableSignal<T>;
+  error: ReadonlySignal<string | null>;
+  touched: WritableSignal<boolean>;
+  isDirty: ReadonlySignal<boolean>;
+}
+
+export type FormFields<T> = {
+  [K in keyof T]-?: FieldState<T[K]>;
+};
+
+export interface FormOptions<T extends Record<string, any> = Record<string, any>> {
+  initialValues: T;
+  schema?: SchemaLike<any>;
+  validateOn?: "change" | "blur" | "submit";
+  onSubmit?: (values: T) => void | Promise<void>;
+}
+
+export interface Form<T> {
+  fields: FormFields<T>;
+  values: () => T;
+  errors: ReadonlySignal<Partial<Record<keyof T, string>>>;
+  isValid: ReadonlySignal<boolean>;
+  isDirty: ReadonlySignal<boolean>;
+  isSubmitting: ReadonlySignal<boolean>;
+  submitCount: ReadonlySignal<number>;
+  bind: (name: keyof T) => {
+    name: string;
+    value: WritableSignal<any>;
+    onInput: (e: any) => void;
+    onBlur: () => void;
+  };
+  handleSubmit: (e?: Event) => Promise<boolean>;
+  reset: (values?: Partial<T>) => void;
+  setFieldValue: <K extends keyof T>(name: K, value: T[K]) => void;
+  setFieldError: (name: keyof T, error: string | null) => void;
+  validate: () => boolean;
+}
+
+/**
+ * Create a fine-grained reactive form with built-in schema validation (ArkType, Zod, Valibot, or native v)
+ */
+export function createForm<T extends Record<string, any> = Record<string, any>>(
+  options: FormOptions<T>
+): Form<T> {
+  const initialValues = { ...options.initialValues } as T;
+  const validateMode = options.validateOn ?? "change";
+
+  const fields = {} as FormFields<T>;
+  const isSubmitting = signal(false);
+  const submitCount = signal(0);
+  const customErrors = signal<Partial<Record<keyof T, string>>>({});
+
+  for (const key in initialValues) {
+    const initVal = initialValues[key];
+    const valSignal = signal(initVal);
+    const touchedSignal = signal(false);
+    const isDirty = computed(() => !Object.is(valSignal(), initialValues[key]));
+
+    (fields as any)[key] = {
+      value: valSignal,
+      touched: touchedSignal,
+      isDirty,
+      error: computed(() => {
+        const custom = customErrors()[key];
+        if (custom) return custom;
+
+        if (validateMode === "blur" && !touchedSignal() && submitCount() === 0) {
+          return null;
+        }
+
+        if (!options.schema) return null;
+
+        const currentValues = getValues();
+        const res = validateWithSchema(options.schema, currentValues);
+        if (!res.success && res.issues) {
+          const match = res.issues.find((i) => i.path === key || i.path === `${key}`);
+          return match ? match.message : null;
+        }
+        return null;
+      })
+    };
+  }
+
+  const getValues = (): T => {
+    const res: Record<string, any> = {};
+    for (const key in fields) {
+      res[key] = (fields as any)[key].value();
+    }
+    return res as T;
+  };
+
+  const errors = computed<Partial<Record<keyof T, string>>>(() => {
+    const errMap: Partial<Record<keyof T, string>> = {};
+    for (const key in fields) {
+      const err = (fields as any)[key].error();
+      if (err) {
+        errMap[key] = err;
+      }
+    }
+    return errMap;
+  });
+
+  const isValid = computed(() => {
+    const errs = errors();
+    return Object.keys(errs).length === 0;
+  });
+
+  const isDirty = computed(() => {
+    for (const key in fields) {
+      if ((fields as any)[key].isDirty()) return true;
+    }
+    return false;
+  });
+
+  const validate = (): boolean => {
+    if (!options.schema) return true;
+    const res = validateWithSchema(options.schema, getValues());
+    return res.success;
+  };
+
+  const handleSubmit = async (e?: Event): Promise<boolean> => {
+    if (e?.preventDefault) {
+      e.preventDefault();
+    }
+
+    submitCount.update((c) => c + 1);
+
+    batch(() => {
+      for (const key in fields) {
+        (fields as any)[key].touched.set(true);
+      }
+    });
+
+    const valid = validate();
+    if (!valid) {
+      return false;
+    }
+
+    if (options.onSubmit) {
+      isSubmitting.set(true);
+      try {
+        await options.onSubmit(getValues());
+      } finally {
+        isSubmitting.set(false);
+      }
+    }
+
+    return true;
+  };
+
+  const bind = (name: keyof T) => {
+    const field = (fields as any)[name];
+    if (!field) {
+      throw new Error(`Field '${String(name)}' not found in form`);
+    }
+
+    return {
+      name: String(name),
+      value: field.value,
+      onInput: (e: any) => {
+        const val =
+          e?.target?.type === "checkbox"
+            ? e.target.checked
+            : e?.target?.value !== undefined
+              ? e.target.value
+              : e;
+        field.value.set(val);
+      },
+      onBlur: () => {
+        field.touched.set(true);
+      }
+    };
+  };
+
+  const reset = (newValues?: Partial<T>) => {
+    const resetTarget = { ...initialValues, ...newValues } as Record<string, any>;
+    batch(() => {
+      for (const key in fields) {
+        (fields as any)[key].value.set(resetTarget[key]);
+        (fields as any)[key].touched.set(false);
+      }
+      customErrors.set({});
+      submitCount.set(0);
+      isSubmitting.set(false);
+    });
+  };
+
+  const setFieldValue = <K extends keyof T>(name: K, value: T[K]) => {
+    (fields as any)[name]?.value.set(value);
+  };
+
+  const setFieldError = (name: keyof T, error: string | null) => {
+    customErrors.update((prev) => ({
+      ...prev,
+      [name]: error ?? undefined
+    }));
+  };
+
+  return {
+    fields,
+    values: getValues,
+    errors,
+    isValid,
+    isDirty,
+    isSubmitting,
+    submitCount,
+    bind,
+    handleSubmit,
+    reset,
+    setFieldValue,
+    setFieldError,
+    validate
+  };
+}

package/src/form/index.ts

@@ -0,0 +1,17 @@
+export {
+  createForm,
+  type FieldState,
+  type Form,
+  type FormFields,
+  type FormOptions
+} from "./form";
+
+export {
+  Schema,
+  type SchemaLike,
+  type StandardSchemaV1,
+  type ValidationIssue,
+  type ValidationResult,
+  v,
+  validateWithSchema
+} from "./schema";