tannijs 0.1.0 → 0.1.1

package/{src/reactivity.ts → dist/chunk-GQWZEFRY.js}

@@ -1,150 +1,113 @@
-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 {
+// src/reactivity.ts
+var Signal = class {
+  constructor(value) {
+    this.value = value;
+  }
+  subscribers = /* @__PURE__ */ new Set();
+  read() {
     trackDependency(this);
     return this.value;
   }
-
-  public peek(): T {
+  peek() {
     return this.value;
   }
-
-  public write(next: T): T {
+  write(next) {
     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) {
+};
+var Memo = class {
+  constructor(fn) {
+    this.fn = fn;
     this.execute();
   }
-
-  public read(): T {
+  subscribers = /* @__PURE__ */ new Set();
+  deps = /* @__PURE__ */ new Set();
+  cleanups = [];
+  value;
+  read() {
     trackDependency(this);
     return this.value;
   }
-
-  public execute(): void {
+  execute() {
     cleanupComputation(this);
     const previous = currentComputation;
     currentComputation = this;
-
-    let nextValue!: T;
+    let nextValue;
     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 {
+};
+var pendingComputations = /* @__PURE__ */ new Set();
+var batchDepth = 0;
+var currentComputation = null;
+function trackDependency(source) {
   if (!currentComputation) {
     return;
   }
-
   source.subscribers.add(currentComputation);
   currentComputation.deps.add(source);
 }
-
-function cleanupComputation(computation: Computation): void {
+function cleanupComputation(computation) {
   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 {
+function runComputation(computation) {
   if (batchDepth > 0) {
     pendingComputations.add(computation);
     return;
   }
-
   computation.execute();
 }
-
-function notifySubscribers(subscribers: Set<Computation>): void {
+function notifySubscribers(subscribers) {
   const queue = Array.from(subscribers);
   for (const subscriber of queue) {
     runComputation(subscriber);
   }
 }
-
-function flushPending(): void {
+function flushPending() {
   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>] {
+function createSignal(initialValue) {
   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;
+  const accessor = () => signal.read();
+  const setter = (value) => {
+    const nextValue = typeof value === "function" ? value(signal.peek()) : value;
     return signal.write(nextValue);
   };
-
   return [accessor, setter];
 }
-
-export function createEffect(fn: () => void): void {
-  const effect: Computation = {
-    deps: new Set<Source>(),
+function createEffect(fn) {
+  const effect = {
+    deps: /* @__PURE__ */ new Set(),
     cleanups: [],
     execute() {
       cleanupComputation(effect);
@@ -155,18 +118,15 @@ export function createEffect(fn: () => void): void {
       } finally {
         currentComputation = previous;
       }
-    },
+    }
   };
-
   effect.execute();
 }
-
-export function createMemo<T>(fn: () => T): Accessor<T> {
+function createMemo(fn) {
   const memo = new Memo(fn);
   return () => memo.read();
 }
-
-export function batch<T>(fn: () => T): T {
+function batch(fn) {
   batchDepth += 1;
   try {
     return fn();
@@ -177,8 +137,7 @@ export function batch<T>(fn: () => T): T {
     }
   }
 }
-
-export function untrack<T>(fn: () => T): T {
+function untrack(fn) {
   const previous = currentComputation;
   currentComputation = null;
   try {
@@ -187,13 +146,18 @@ export function untrack<T>(fn: () => T): T {
     currentComputation = previous;
   }
 }
-
-export function onCleanup(fn: CleanupFn): void {
+function onCleanup(fn) {
   if (!currentComputation) {
-    throw new Error('onCleanup must be called inside a tracked computation.');
+    throw new Error("onCleanup must be called inside a tracked computation.");
   }
-
   currentComputation.cleanups.push(fn);
 }
 
-export const effect = createEffect;
+export {
+  createSignal,
+  createEffect,
+  createMemo,
+  batch,
+  untrack,
+  onCleanup
+};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+type Accessor<T> = () => T;
+type Setter<T> = (value: T | ((prev: T) => T)) => T;
+type CleanupFn = () => void;
+declare function createSignal<T>(initialValue: T): [Accessor<T>, Setter<T>];
+declare function createEffect(fn: () => void): void;
+declare function createMemo<T>(fn: () => T): Accessor<T>;
+declare function batch<T>(fn: () => T): T;
+declare function untrack<T>(fn: () => T): T;
+declare function onCleanup(fn: CleanupFn): void;
+
+export { type Accessor, type Setter, batch, createEffect, createMemo, createSignal, onCleanup, untrack };

package/dist/index.js

@@ -0,0 +1,16 @@
+import {
+  batch,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  untrack
+} from "./chunk-GQWZEFRY.js";
+export {
+  batch,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  untrack
+};

package/dist/internals.d.ts

@@ -0,0 +1,9 @@
+export { createEffect } from './index.js';
+
+type InsertValue = Node | string | number | boolean | null | undefined | InsertValue[] | (() => InsertValue);
+declare function template(html: string): Node;
+declare function insert(parent: Node, value: InsertValue, marker?: Node | null): void;
+declare function spread(element: Element, props: Record<string, unknown>): void;
+declare function delegateEvents(eventNames: string[]): void;
+
+export { type InsertValue, delegateEvents, insert, spread, template };

package/{src/dom.ts → dist/internals.js}

@@ -1,90 +1,67 @@
-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');
+import {
+  createEffect
+} from "./chunk-GQWZEFRY.js";
+
+// src/dom.ts
+var delegatedEvents = /* @__PURE__ */ new Set();
+var listeningEvents = /* @__PURE__ */ new Set();
+var directListeners = /* @__PURE__ */ new WeakMap();
+function template(html) {
+  const tpl = document.createElement("template");
   tpl.innerHTML = html.trim();
-
   if (tpl.content.childNodes.length === 1) {
-    return tpl.content.firstChild as Node;
+    return tpl.content.firstChild;
   }
-
   return tpl.content;
 }
-
-export function insert(parent: Node, value: InsertValue, marker: Node | null = null): void {
-  if (typeof value === 'function') {
-    let currentNodes: Node[] = [];
+function insert(parent, value, marker = null) {
+  if (typeof value === "function") {
+    let currentNodes = [];
     createEffect(() => {
-      const resolved = (value as () => InsertValue)();
-      const nextNodes = normalizeNodes(resolved);
-      currentNodes = replaceNodes(parent, currentNodes, nextNodes, marker);
+      const resolved = value();
+      const nextNodes2 = normalizeNodes(resolved);
+      currentNodes = replaceNodes(parent, currentNodes, nextNodes2, marker);
     });
     return;
   }
-
   const nextNodes = normalizeNodes(value);
   replaceNodes(parent, [], nextNodes, marker);
 }
-
-export function spread(element: Element, props: Record<string, unknown>): void {
+function spread(element, props) {
   for (const [key, value] of Object.entries(props)) {
-    if (key === 'children') {
-      insert(element, value as InsertValue);
+    if (key === "children") {
+      insert(element, value);
       continue;
     }
-
-    if (key === 'style' && value && typeof value === 'object') {
-      Object.assign((element as HTMLElement).style, value as Record<string, string>);
+    if (key === "style" && value && typeof value === "object") {
+      Object.assign(element.style, value);
       continue;
     }
-
     const eventName = toEventName(key);
     if (eventName) {
       applyEventHandler(element, eventName, value);
       continue;
     }
-
     applyProperty(element, key, value);
   }
 }
-
-export function delegateEvents(eventNames: string[]): void {
+function delegateEvents(eventNames) {
   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 {
+function handleDelegatedEvent(event) {
   const type = event.type.toLowerCase();
-  let node: Node | null = event.target as Node | null;
-
+  let node = event.target;
   while (node && node !== document) {
     if (node instanceof Element) {
-      const handlers = (node as DelegatedElement).__tnDelegatedHandlers;
+      const handlers = node.__tnDelegatedHandlers;
       const handler = handlers?.[type];
       if (handler) {
         handler(event);
@@ -96,100 +73,83 @@ function handleDelegatedEvent(event: Event): void {
     node = node.parentNode;
   }
 }
-
-function applyEventHandler(element: Element, eventName: string, value: unknown): void {
-  if (typeof value !== 'function') {
+function applyEventHandler(element, eventName, value) {
+  if (typeof value !== "function") {
     return;
   }
-
-  const handler = value as EventHandler;
+  const handler = value;
   if (delegatedEvents.has(eventName)) {
-    const delegatedElement = element as DelegatedElement;
+    const delegatedElement = element;
     delegatedElement.__tnDelegatedHandlers ??= {};
     delegatedElement.__tnDelegatedHandlers[eventName] = handler;
     return;
   }
-
   let listenersForElement = directListeners.get(element);
   if (!listenersForElement) {
-    listenersForElement = new Map<string, EventHandler>();
+    listenersForElement = /* @__PURE__ */ new Map();
     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>;
-
+function applyProperty(element, key, value) {
+  const writableElement = element;
   if (value === false || value == null) {
     element.removeAttribute(key);
     if (key in element) {
-      writableElement[key] = '';
+      writableElement[key] = "";
     }
     return;
   }
-
-  if (key in element && !key.startsWith('aria-') && !key.startsWith('data-')) {
+  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:')) {
+function toEventName(key) {
+  if (key.startsWith("on:")) {
     return key.slice(3).toLowerCase();
   }
-
-  if (key.startsWith('@')) {
+  if (key.startsWith("@")) {
     return key.slice(1).toLowerCase();
   }
-
-  if (key.startsWith('on') && key.length > 2) {
+  if (key.startsWith("on") && key.length > 2) {
     return key.slice(2).toLowerCase();
   }
-
   return null;
 }
-
-function normalizeNodes(value: InsertValue): Node[] {
+function normalizeNodes(value) {
   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[] {
+function replaceNodes(parent, currentNodes, nextNodes, marker) {
   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>;
-}
+export {
+  createEffect,
+  delegateEvents,
+  insert,
+  spread,
+  template
+};

package/package.json

@@ -1,24 +1,31 @@
 {
   "name": "tannijs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./internals": {
-      "types": "./src/internals.ts",
-      "default": "./src/internals.ts"
+      "types": "./dist/internals.d.ts",
+      "default": "./dist/internals.js"
     }
   },
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "src",
     "dist"
-  ]
+  ],
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/internals.ts --format esm --dts --clean --out-dir dist",
+    "dev": "tsup src/index.ts src/internals.ts --format esm --dts --out-dir dist --watch"
+  }
 }

package/src/dom.test.ts

@@ -1,101 +0,0 @@
-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/index.ts

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

package/src/internals.ts

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

package/src/reactivity.test.ts

@@ -1,135 +0,0 @@
-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);
-  });
-});