blokd 0.1.0-beta.0

package/src/core.ts

@@ -0,0 +1,234 @@
+export type Accessor<T> = () => T;
+export type Setter<T> = {
+  (value: T): T;
+  (updater: (previous: T) => T): T;
+};
+
+export type SignalOptions<T> = {
+  /**
+   * Custom equality comparator. Set to false to always notify subscribers.
+   */
+  equals?: false | ((previous: T, next: T) => boolean);
+};
+
+type Source = Set<Computation>;
+type CleanupFn = () => void;
+
+type Owner = {
+  owner: Owner | null;
+  owned: Set<Computation | Owner>;
+  cleanups: CleanupFn[];
+  disposed: boolean;
+};
+
+type Computation = Owner & {
+  fn: () => void;
+  deps: Source[];
+  running: boolean;
+  stale: boolean;
+};
+
+let currentObserver: Computation | null = null;
+let currentOwner: Owner | null = null;
+let batchDepth = 0;
+let effectsEnabled = true;
+let flushing = false;
+const queue = new Set<Computation>();
+
+function createOwner(parent: Owner | null): Owner {
+  const owner: Owner = { owner: parent, owned: new Set(), cleanups: [], disposed: false };
+  parent?.owned.add(owner);
+  return owner;
+}
+
+function removeFromParent(owner: Owner): void {
+  owner.owner?.owned.delete(owner);
+}
+
+function cleanupDeps(comp: Computation): void {
+  for (const source of comp.deps) source.delete(comp);
+  comp.deps.length = 0;
+}
+
+function runCleanups(owner: Owner): void {
+  const cleanups = owner.cleanups.splice(0);
+  for (let i = cleanups.length - 1; i >= 0; i--) cleanups[i]!();
+}
+
+function disposeOwner(owner: Owner): void {
+  if (owner.disposed) return;
+  owner.disposed = true;
+  for (const child of Array.from(owner.owned)) disposeOwner(child);
+  owner.owned.clear();
+  if ('deps' in owner) cleanupDeps(owner as Computation);
+  runCleanups(owner);
+  queue.delete(owner as Computation);
+  removeFromParent(owner);
+}
+
+function createComputation(fn: () => void, parent: Owner | null): Computation {
+  const comp: Computation = {
+    owner: parent,
+    owned: new Set(),
+    cleanups: [],
+    disposed: false,
+    fn,
+    deps: [],
+    running: false,
+    stale: false
+  };
+  parent?.owned.add(comp);
+  return comp;
+}
+
+function runComputation(comp: Computation): void {
+  if (comp.disposed || comp.running) return;
+  comp.stale = false;
+  cleanupDeps(comp);
+  runCleanups(comp);
+  for (const child of Array.from(comp.owned)) disposeOwner(child);
+  comp.owned.clear();
+
+  const previousObserver = currentObserver;
+  const previousOwner = currentOwner;
+  currentObserver = comp;
+  currentOwner = comp;
+  comp.running = true;
+  try {
+    comp.fn();
+  } finally {
+    comp.running = false;
+    currentObserver = previousObserver;
+    currentOwner = previousOwner;
+  }
+}
+
+function schedule(comp: Computation): void {
+  if (comp.disposed) return;
+  comp.stale = true;
+  queue.add(comp);
+  if (batchDepth === 0) flush();
+}
+
+function flush(): void {
+  if (batchDepth > 0 || flushing) return;
+  flushing = true;
+  try {
+    let guard = 0;
+    while (queue.size > 0) {
+      if (++guard > 100000) throw new Error('Reactive update limit exceeded. Check for cyclic effects.');
+      const pending = Array.from(queue);
+      queue.clear();
+      for (const comp of pending) runComputation(comp);
+    }
+  } finally {
+    flushing = false;
+  }
+}
+
+function shouldNotify<T>(previous: T, next: T, options?: SignalOptions<T>): boolean {
+  if (options?.equals === false) return true;
+  const equals = options?.equals ?? Object.is;
+  return !equals(previous, next);
+}
+
+export function signal<T>(initial: T, options?: SignalOptions<T>): [Accessor<T>, Setter<T>] {
+  let value = initial;
+  const subscribers: Source = new Set();
+
+  const read: Accessor<T> = () => {
+    if (currentObserver && !subscribers.has(currentObserver)) {
+      subscribers.add(currentObserver);
+      currentObserver.deps.push(subscribers);
+    }
+    return value;
+  };
+
+  const write: Setter<T> = ((next: T | ((previous: T) => T)) => {
+    const nextValue = typeof next === 'function' ? (next as (previous: T) => T)(value) : next;
+    if (!shouldNotify(value, nextValue, options)) return value;
+    value = nextValue;
+    for (const comp of Array.from(subscribers)) schedule(comp);
+    return value;
+  }) as Setter<T>;
+
+  return [read, write];
+}
+
+export function effect(fn: () => void): () => void {
+  if (!effectsEnabled) return () => undefined;
+  const comp = createComputation(fn, currentOwner);
+  runComputation(comp);
+  return () => disposeOwner(comp);
+}
+
+export function cleanup(fn: CleanupFn): void {
+  if (!currentOwner) throw new Error('cleanup() must be called inside root(), effect(), render(), hydrate(), or a component render scope.');
+  currentOwner.cleanups.push(fn);
+}
+
+export function memo<T>(fn: () => T, options?: SignalOptions<T>): Accessor<T> {
+  if (!effectsEnabled) return () => fn();
+  const [value, setValue] = signal<T>(undefined as T, options);
+  effect(() => setValue(fn()));
+  return value;
+}
+
+export function batch<T>(fn: () => T): T {
+  batchDepth++;
+  try {
+    return fn();
+  } finally {
+    batchDepth--;
+    flush();
+  }
+}
+
+export function untrack<T>(fn: () => T): T {
+  const previous = currentObserver;
+  currentObserver = null;
+  try {
+    return fn();
+  } finally {
+    currentObserver = previous;
+  }
+}
+
+export function root<T>(fn: (dispose: () => void) => T): T {
+  const owner = createOwner(currentOwner);
+  const previousOwner = currentOwner;
+  currentOwner = owner;
+  try {
+    return fn(() => disposeOwner(owner));
+  } finally {
+    currentOwner = previousOwner;
+  }
+}
+
+export function getOwner(): unknown {
+  return currentOwner;
+}
+
+export function runWithOwner<T>(owner: unknown, fn: () => T): T {
+  const previousOwner = currentOwner;
+  currentOwner = owner as Owner | null;
+  try {
+    return fn();
+  } finally {
+    currentOwner = previousOwner;
+  }
+}
+
+export function runWithEffectsDisabled<T>(fn: () => T): T {
+  const previous = effectsEnabled;
+  effectsEnabled = false;
+  try {
+    return fn();
+  } finally {
+    effectsEnabled = previous;
+  }
+}
+
+export function dispose(owner: unknown): void {
+  if (owner && typeof owner === 'object' && 'owned' in owner) disposeOwner(owner as Owner);
+}

package/src/dom.ts

@@ -0,0 +1,142 @@
+import { cleanup, effect, root } from './core.js';
+import { dynamic, type Renderable } from './jsx-runtime.js';
+
+export { render, hydrate, dynamic } from './jsx-runtime.js';
+
+export type ShowProps<T> = {
+  when: T | false | null | undefined;
+  fallback?: Renderable;
+  children?: Renderable | ((value: NonNullable<T>) => Renderable);
+};
+
+export function Show<T>(props: ShowProps<T>): Renderable {
+  const resolve = () => {
+    const when = props.when;
+    if (when) return typeof props.children === 'function'
+      ? (props.children as (value: NonNullable<T>) => Renderable)(when as NonNullable<T>)
+      : props.children;
+    return props.fallback ?? null;
+  };
+  if (typeof document === 'undefined') return resolve();
+  return dynamic(resolve);
+}
+
+export type ForProps<T> = {
+  each: readonly T[] | null | undefined;
+  by?: (item: T, index: number) => string | number;
+  fallback?: Renderable;
+  children: (item: T, index: () => number) => Renderable;
+};
+
+export function For<T>(props: ForProps<T>): Renderable {
+  if (typeof document === 'undefined') {
+    const items = props.each ?? [];
+    if (items.length === 0) return props.fallback ?? null;
+    return items.map((item, index) => props.children(item, () => index));
+  }
+
+  if (!props.by) {
+    return dynamic(() => {
+      const items = props.each ?? [];
+      if (items.length === 0) return props.fallback ?? null;
+      return items.map((item, index) => props.children(item, () => index));
+    });
+  }
+
+  const start = document.createComment('bd-for');
+  const end = document.createComment('/bd-for');
+  const fragment = document.createDocumentFragment();
+  fragment.append(start, end);
+
+  type Row = { key: string | number; nodes: Node[]; dispose: () => void; item: T; index: () => number; setIndex: (value: number) => void };
+  const rows = new Map<string | number, Row>();
+
+  const normalizeNodes = (value: Renderable): Node[] => {
+    const host = document.createDocumentFragment();
+    // Dynamic child creation is delegated through the JSX runtime by appending into a disposable root.
+    root(dispose => {
+      rowsDisposers.push(dispose);
+      const append = (v: Renderable): void => {
+        if (v === null || v === undefined || v === false || v === true) return;
+        if (Array.isArray(v)) { for (const n of v) append(n); return; }
+        if (v instanceof Node) { host.appendChild(v); return; }
+        host.appendChild(document.createTextNode(String(v)));
+      };
+      append(value);
+    });
+    return Array.from(host.childNodes);
+  };
+
+  let rowsDisposers: Array<() => void> = [];
+
+  const clear = () => {
+    for (const row of rows.values()) row.dispose();
+    rows.clear();
+    let node = start.nextSibling;
+    while (node && node !== end) {
+      const next = node.nextSibling;
+      node.parentNode?.removeChild(node);
+      node = next;
+    }
+  };
+
+  effect(() => {
+    const items = props.each ?? [];
+    if (items.length === 0) {
+      clear();
+      if (props.fallback !== undefined) {
+        const fallbackNodes = normalizeNodes(props.fallback);
+        for (const node of fallbackNodes) end.parentNode?.insertBefore(node, end);
+      }
+      return;
+    }
+
+    const nextKeys = new Set<string | number>();
+    const orderedRows: Row[] = [];
+
+    items.forEach((item, index) => {
+      const key = props.by!(item, index);
+      nextKeys.add(key);
+      let row = rows.get(key);
+      if (!row || row.item !== item) {
+        row?.dispose();
+        for (const node of row?.nodes ?? []) node.parentNode?.removeChild(node);
+        let currentIndex = index;
+        let disposeRow: () => void = () => {};
+        const nodes = root(dispose => {
+          disposeRow = dispose;
+          const rendered = props.children(item, () => currentIndex);
+          const host = document.createDocumentFragment();
+          const append = (v: Renderable): void => {
+            if (v === null || v === undefined || v === false || v === true) return;
+            if (Array.isArray(v)) { for (const child of v) append(child); return; }
+            if (v instanceof Node) { host.appendChild(v); return; }
+            host.appendChild(document.createTextNode(String(v)));
+          };
+          append(rendered);
+          return Array.from(host.childNodes);
+        });
+        row = { key, item, nodes, dispose: disposeRow, index: () => currentIndex, setIndex: value => { currentIndex = value; } };
+        rows.set(key, row);
+      } else {
+        row.setIndex(index);
+      }
+      orderedRows.push(row);
+    });
+
+    for (const [key, row] of Array.from(rows.entries())) {
+      if (!nextKeys.has(key)) {
+        row.dispose();
+        for (const node of row.nodes) node.parentNode?.removeChild(node);
+        rows.delete(key);
+      }
+    }
+
+    for (const row of orderedRows) {
+      for (const node of row.nodes) end.parentNode?.insertBefore(node, end);
+    }
+  });
+
+  cleanup(clear);
+  return fragment;
+}