tannijs 0.1.0

package/README.md

@@ -0,0 +1 @@
+# @tannijs/runtime

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "tannijs",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Signal-based reactive runtime for the Tanni framework",
+  "license": "MIT",
+  "author": "Sebastijan Zindl",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./internals": {
+      "types": "./src/internals.ts",
+      "default": "./src/internals.ts"
+    }
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src",
+    "dist"
+  ]
+}

package/src/dom.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { createSignal } from './reactivity';
+import { delegateEvents, insert, spread, template } from './dom';
+
+describe('dom helpers', () => {
+  it('creates cloneable template nodes', () => {
+    const node = template('<button class="btn">Click</button>');
+    const clone = node.cloneNode(true) as HTMLElement;
+
+    expect(clone.tagName).toBe('BUTTON');
+    expect(clone.className).toBe('btn');
+    expect(clone.textContent).toBe('Click');
+  });
+
+  it('inserts reactive text updates', () => {
+    const host = document.createElement('div');
+    const [count, setCount] = createSignal(0);
+
+    insert(host, () => `Count: ${count()}`);
+    expect(host.textContent).toBe('Count: 0');
+
+    setCount(2);
+    expect(host.textContent).toBe('Count: 2');
+  });
+
+  it('replaces only content before marker in reactive inserts', () => {
+    const host = document.createElement('div');
+    const marker = document.createComment('marker');
+    host.append(document.createTextNode('prefix-'));
+    host.append(marker);
+    host.append(document.createTextNode('-suffix'));
+
+    const [value, setValue] = createSignal('one');
+    insert(host, () => value(), marker);
+
+    expect(host.textContent).toBe('prefix-one-suffix');
+    setValue('two');
+    expect(host.textContent).toBe('prefix-two-suffix');
+    expect(host.lastChild).not.toBe(marker);
+    expect(host.childNodes[1]?.nodeType).toBe(Node.TEXT_NODE);
+  });
+
+  it('applies properties and delegated events via spread', () => {
+    delegateEvents(['click']);
+
+    const host = document.createElement('div');
+    const button = document.createElement('button');
+    const onClick = vi.fn();
+
+    spread(button, {
+      id: 'counter-btn',
+      '@click': onClick,
+      children: 'Tap',
+    });
+
+    host.append(button);
+    document.body.append(host);
+    button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    expect(button.id).toBe('counter-btn');
+    expect(button.textContent).toBe('Tap');
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('supports direct event listeners and replaces previous handlers', () => {
+    const button = document.createElement('button');
+    const first = vi.fn();
+    const second = vi.fn();
+
+    spread(button, { onMouseover: first });
+    button.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+
+    spread(button, { onMouseover: second });
+    button.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+
+    expect(first).toHaveBeenCalledTimes(1);
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+
+  it('supports delegated bubbling and stopPropagation semantics', () => {
+    delegateEvents(['click']);
+    const host = document.createElement('div');
+    const parent = document.createElement('div');
+    const button = document.createElement('button');
+    const parentHandler = vi.fn();
+    const childHandler = vi.fn((event: Event) => event.stopPropagation());
+
+    spread(parent, { '@click': parentHandler });
+    spread(button, { '@click': childHandler });
+
+    parent.append(button);
+    host.append(parent);
+    document.body.append(host);
+
+    button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    expect(childHandler).toHaveBeenCalledTimes(1);
+    expect(parentHandler).toHaveBeenCalledTimes(0);
+  });
+});

package/src/dom.ts

@@ -0,0 +1,195 @@
+import { createEffect } from './reactivity';
+
+export type InsertValue =
+  | Node
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | InsertValue[]
+  | (() => InsertValue);
+
+type EventHandler = (event: Event) => void;
+
+const delegatedEvents = new Set<string>();
+const listeningEvents = new Set<string>();
+const directListeners = new WeakMap<Element, Map<string, EventHandler>>();
+
+export function template(html: string): Node {
+  const tpl = document.createElement('template');
+  tpl.innerHTML = html.trim();
+
+  if (tpl.content.childNodes.length === 1) {
+    return tpl.content.firstChild as Node;
+  }
+
+  return tpl.content;
+}
+
+export function insert(parent: Node, value: InsertValue, marker: Node | null = null): void {
+  if (typeof value === 'function') {
+    let currentNodes: Node[] = [];
+    createEffect(() => {
+      const resolved = (value as () => InsertValue)();
+      const nextNodes = normalizeNodes(resolved);
+      currentNodes = replaceNodes(parent, currentNodes, nextNodes, marker);
+    });
+    return;
+  }
+
+  const nextNodes = normalizeNodes(value);
+  replaceNodes(parent, [], nextNodes, marker);
+}
+
+export function spread(element: Element, props: Record<string, unknown>): void {
+  for (const [key, value] of Object.entries(props)) {
+    if (key === 'children') {
+      insert(element, value as InsertValue);
+      continue;
+    }
+
+    if (key === 'style' && value && typeof value === 'object') {
+      Object.assign((element as HTMLElement).style, value as Record<string, string>);
+      continue;
+    }
+
+    const eventName = toEventName(key);
+    if (eventName) {
+      applyEventHandler(element, eventName, value);
+      continue;
+    }
+
+    applyProperty(element, key, value);
+  }
+}
+
+export function delegateEvents(eventNames: string[]): void {
+  for (const eventName of eventNames) {
+    const normalized = eventName.toLowerCase();
+    delegatedEvents.add(normalized);
+
+    if (listeningEvents.has(normalized)) {
+      continue;
+    }
+
+    listeningEvents.add(normalized);
+    document.addEventListener(normalized, handleDelegatedEvent);
+  }
+}
+
+function handleDelegatedEvent(event: Event): void {
+  const type = event.type.toLowerCase();
+  let node: Node | null = event.target as Node | null;
+
+  while (node && node !== document) {
+    if (node instanceof Element) {
+      const handlers = (node as DelegatedElement).__tnDelegatedHandlers;
+      const handler = handlers?.[type];
+      if (handler) {
+        handler(event);
+        if (event.cancelBubble) {
+          return;
+        }
+      }
+    }
+    node = node.parentNode;
+  }
+}
+
+function applyEventHandler(element: Element, eventName: string, value: unknown): void {
+  if (typeof value !== 'function') {
+    return;
+  }
+
+  const handler = value as EventHandler;
+  if (delegatedEvents.has(eventName)) {
+    const delegatedElement = element as DelegatedElement;
+    delegatedElement.__tnDelegatedHandlers ??= {};
+    delegatedElement.__tnDelegatedHandlers[eventName] = handler;
+    return;
+  }
+
+  let listenersForElement = directListeners.get(element);
+  if (!listenersForElement) {
+    listenersForElement = new Map<string, EventHandler>();
+    directListeners.set(element, listenersForElement);
+  }
+
+  const previous = listenersForElement.get(eventName);
+  if (previous) {
+    element.removeEventListener(eventName, previous);
+  }
+
+  listenersForElement.set(eventName, handler);
+  element.addEventListener(eventName, handler);
+}
+
+function applyProperty(element: Element, key: string, value: unknown): void {
+  const writableElement = element as unknown as Record<string, unknown>;
+
+  if (value === false || value == null) {
+    element.removeAttribute(key);
+    if (key in element) {
+      writableElement[key] = '';
+    }
+    return;
+  }
+
+  if (key in element && !key.startsWith('aria-') && !key.startsWith('data-')) {
+    writableElement[key] = value;
+    return;
+  }
+
+  element.setAttribute(key, String(value));
+}
+
+function toEventName(key: string): string | null {
+  if (key.startsWith('on:')) {
+    return key.slice(3).toLowerCase();
+  }
+
+  if (key.startsWith('@')) {
+    return key.slice(1).toLowerCase();
+  }
+
+  if (key.startsWith('on') && key.length > 2) {
+    return key.slice(2).toLowerCase();
+  }
+
+  return null;
+}
+
+function normalizeNodes(value: InsertValue): Node[] {
+  if (value == null || value === false || value === true) {
+    return [];
+  }
+
+  if (Array.isArray(value)) {
+    return value.flatMap((entry) => normalizeNodes(entry));
+  }
+
+  if (value instanceof Node) {
+    return [value];
+  }
+
+  return [document.createTextNode(String(value))];
+}
+
+function replaceNodes(parent: Node, currentNodes: Node[], nextNodes: Node[], marker: Node | null): Node[] {
+  for (const node of currentNodes) {
+    if (node.parentNode === parent) {
+      parent.removeChild(node);
+    }
+  }
+
+  for (const node of nextNodes) {
+    parent.insertBefore(node, marker);
+  }
+
+  return nextNodes;
+}
+
+interface DelegatedElement extends Element {
+  __tnDelegatedHandlers?: Record<string, EventHandler>;
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export {
+  batch,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  untrack,
+  type Accessor,
+  type Setter,
+} from './reactivity';

package/src/internals.ts

@@ -0,0 +1,3 @@
+export { createEffect } from './reactivity';
+export { delegateEvents, template, insert, spread } from './dom';
+export type { InsertValue } from './dom';

package/src/reactivity.test.ts

@@ -0,0 +1,135 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { batch, createEffect, createMemo, createSignal, onCleanup, untrack } from './reactivity';
+
+describe('reactivity core', () => {
+  it('tracks signal reads and reruns effects on updates', () => {
+    const [count, setCount] = createSignal(0);
+    const values: number[] = [];
+
+    createEffect(() => {
+      values.push(count());
+    });
+
+    setCount(1);
+    setCount((prev) => prev + 1);
+
+    expect(values).toEqual([0, 1, 2]);
+  });
+
+  it('batches updates and runs effects once', () => {
+    const [count, setCount] = createSignal(0);
+    const spy = vi.fn();
+
+    createEffect(() => {
+      count();
+      spy();
+    });
+
+    batch(() => {
+      setCount(1);
+      setCount(2);
+      setCount(3);
+    });
+
+    expect(spy).toHaveBeenCalledTimes(2);
+    expect(count()).toBe(3);
+  });
+
+  it('supports memoized derived values', () => {
+    const [count, setCount] = createSignal(2);
+    const doubled = createMemo(() => count() * 2);
+
+    expect(doubled()).toBe(4);
+    setCount(5);
+    expect(doubled()).toBe(10);
+  });
+
+  it('recomputes memo only when dependencies change', () => {
+    const [count, setCount] = createSignal(1);
+    const compute = vi.fn(() => count() * 10);
+    const value = createMemo(compute);
+    const effectSpy = vi.fn();
+
+    createEffect(() => {
+      value();
+      effectSpy();
+    });
+
+    expect(value()).toBe(10);
+    expect(compute).toHaveBeenCalledTimes(1);
+    expect(effectSpy).toHaveBeenCalledTimes(1);
+
+    setCount(1);
+    expect(compute).toHaveBeenCalledTimes(1);
+    expect(effectSpy).toHaveBeenCalledTimes(1);
+
+    setCount(2);
+    expect(value()).toBe(20);
+    expect(compute).toHaveBeenCalledTimes(2);
+    expect(effectSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('supports untrack and effect cleanups', () => {
+    const [count, setCount] = createSignal(0);
+    const sideEffect = vi.fn();
+    const cleanup = vi.fn();
+
+    createEffect(() => {
+      sideEffect(untrack(() => count()));
+      onCleanup(cleanup);
+      count();
+    });
+
+    setCount(1);
+
+    expect(sideEffect).toHaveBeenCalledTimes(2);
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+
+  it('runs previous cleanup before the next effect pass', () => {
+    const [value, setValue] = createSignal('a');
+    const callOrder: string[] = [];
+
+    createEffect(() => {
+      const current = value();
+      callOrder.push(`effect:${current}`);
+      onCleanup(() => {
+        callOrder.push(`cleanup:${current}`);
+      });
+    });
+
+    setValue('b');
+    setValue('c');
+
+    expect(callOrder).toEqual([
+      'effect:a',
+      'cleanup:a',
+      'effect:b',
+      'cleanup:b',
+      'effect:c',
+    ]);
+  });
+
+  it('supports nested batching with a single downstream rerun', () => {
+    const [count, setCount] = createSignal(0);
+    const spy = vi.fn();
+
+    createEffect(() => {
+      count();
+      spy();
+    });
+
+    batch(() => {
+      setCount(1);
+      batch(() => {
+        setCount(2);
+        setCount(3);
+      });
+      setCount(4);
+    });
+
+    expect(count()).toBe(4);
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+});

package/src/reactivity.ts

@@ -0,0 +1,199 @@
+export type Accessor<T> = () => T;
+export type Setter<T> = (value: T | ((prev: T) => T)) => T;
+
+type CleanupFn = () => void;
+
+interface Computation {
+  execute: () => void;
+  deps: Set<Source>;
+  cleanups: CleanupFn[];
+}
+
+interface Source {
+  subscribers: Set<Computation>;
+}
+
+class Signal<T> implements Source {
+  public readonly subscribers = new Set<Computation>();
+
+  public constructor(private value: T) {}
+
+  public read(): T {
+    trackDependency(this);
+    return this.value;
+  }
+
+  public peek(): T {
+    return this.value;
+  }
+
+  public write(next: T): T {
+    if (Object.is(this.value, next)) {
+      return this.value;
+    }
+
+    this.value = next;
+    notifySubscribers(this.subscribers);
+    return this.value;
+  }
+}
+
+class Memo<T> implements Source, Computation {
+  public readonly subscribers = new Set<Computation>();
+  public readonly deps = new Set<Source>();
+  public cleanups: CleanupFn[] = [];
+  public value!: T;
+
+  public constructor(private readonly fn: () => T) {
+    this.execute();
+  }
+
+  public read(): T {
+    trackDependency(this);
+    return this.value;
+  }
+
+  public execute(): void {
+    cleanupComputation(this);
+    const previous = currentComputation;
+    currentComputation = this;
+
+    let nextValue!: T;
+    try {
+      nextValue = this.fn();
+    } finally {
+      currentComputation = previous;
+    }
+
+    if (!Object.is(nextValue, this.value)) {
+      this.value = nextValue;
+      notifySubscribers(this.subscribers);
+    }
+  }
+}
+
+const pendingComputations = new Set<Computation>();
+let batchDepth = 0;
+let currentComputation: Computation | null = null;
+
+function trackDependency(source: Source): void {
+  if (!currentComputation) {
+    return;
+  }
+
+  source.subscribers.add(currentComputation);
+  currentComputation.deps.add(source);
+}
+
+function cleanupComputation(computation: Computation): void {
+  for (const source of computation.deps) {
+    source.subscribers.delete(computation);
+  }
+  computation.deps.clear();
+
+  const cleanups = computation.cleanups;
+  computation.cleanups = [];
+  for (const cleanup of cleanups) {
+    cleanup();
+  }
+}
+
+function runComputation(computation: Computation): void {
+  if (batchDepth > 0) {
+    pendingComputations.add(computation);
+    return;
+  }
+
+  computation.execute();
+}
+
+function notifySubscribers(subscribers: Set<Computation>): void {
+  const queue = Array.from(subscribers);
+  for (const subscriber of queue) {
+    runComputation(subscriber);
+  }
+}
+
+function flushPending(): void {
+  if (pendingComputations.size === 0) {
+    return;
+  }
+
+  const queue = Array.from(pendingComputations);
+  pendingComputations.clear();
+  for (const computation of queue) {
+    computation.execute();
+  }
+
+  if (pendingComputations.size > 0) {
+    flushPending();
+  }
+}
+
+export function createSignal<T>(initialValue: T): [Accessor<T>, Setter<T>] {
+  const signal = new Signal(initialValue);
+
+  const accessor: Accessor<T> = () => signal.read();
+  const setter: Setter<T> = (value) => {
+    const nextValue = typeof value === 'function' ? (value as (prev: T) => T)(signal.peek()) : value;
+    return signal.write(nextValue);
+  };
+
+  return [accessor, setter];
+}
+
+export function createEffect(fn: () => void): void {
+  const effect: Computation = {
+    deps: new Set<Source>(),
+    cleanups: [],
+    execute() {
+      cleanupComputation(effect);
+      const previous = currentComputation;
+      currentComputation = effect;
+      try {
+        fn();
+      } finally {
+        currentComputation = previous;
+      }
+    },
+  };
+
+  effect.execute();
+}
+
+export function createMemo<T>(fn: () => T): Accessor<T> {
+  const memo = new Memo(fn);
+  return () => memo.read();
+}
+
+export function batch<T>(fn: () => T): T {
+  batchDepth += 1;
+  try {
+    return fn();
+  } finally {
+    batchDepth -= 1;
+    if (batchDepth === 0) {
+      flushPending();
+    }
+  }
+}
+
+export function untrack<T>(fn: () => T): T {
+  const previous = currentComputation;
+  currentComputation = null;
+  try {
+    return fn();
+  } finally {
+    currentComputation = previous;
+  }
+}
+
+export function onCleanup(fn: CleanupFn): void {
+  if (!currentComputation) {
+    throw new Error('onCleanup must be called inside a tracked computation.');
+  }
+
+  currentComputation.cleanups.push(fn);
+}
+
+export const effect = createEffect;