@flow.os/core 0.0.1-dev.1771665310

package/dom.ts

@@ -0,0 +1,43 @@
+/**
+ * Helper DOM per Show/For: normalizza children (getter, string, Node, array) e setContent.
+ */
+import { effect } from './state.js';
+
+function isGetter(fn: unknown): fn is () => unknown {
+  return typeof fn === 'function' && fn.length === 0;
+}
+
+export function normalizeChild(c: unknown): Node | string | null {
+  if (c == null) return null;
+  if (typeof c === 'string' || typeof c === 'number') return String(c);
+  if (c instanceof Node) return c;
+  if (isGetter(c)) {
+    const text = document.createTextNode('');
+    effect(() => {
+      text.textContent = String(c());
+    });
+    return text;
+  }
+  if (Array.isArray(c)) {
+    const frag = document.createDocumentFragment();
+    for (const x of c) {
+      const n = normalizeChild(x);
+      if (n !== null) frag.appendChild(typeof n === 'string' ? document.createTextNode(n) : n);
+    }
+    return frag;
+  }
+  return null;
+}
+
+export function setContent(el: HTMLElement, c: unknown): void {
+  const n = normalizeChild(c);
+  if (n === null) {
+    el.replaceChildren();
+    return;
+  }
+  if (typeof n === 'string') {
+    el.replaceChildren(document.createTextNode(n));
+    return;
+  }
+  el.replaceChildren(n);
+}

package/for.ts

@@ -0,0 +1,42 @@
+/**
+ * For: lista reattiva. each={() => T[]}, children (item, index) => content.
+ * Opzionale key (item, index) => string|number per reconciliation keyed.
+ */
+import { effect } from './state.js';
+import { normalizeChild } from './dom.js';
+
+function isGetter(fn: unknown): fn is () => unknown {
+  return typeof fn === 'function' && fn.length === 0;
+}
+
+function appendNormalized(parent: Node, c: unknown): void {
+  const n = normalizeChild(c);
+  if (n === null) return;
+  parent.appendChild(typeof n === 'string' ? document.createTextNode(n) : n);
+}
+
+/** For: rende una lista reattiva. each=getter array, children=(item, index)=>content, fallback=vuoto. */
+export function For<T>(props: {
+  each: (() => T[]) | T[];
+  fallback?: unknown;
+  children: (item: T, index: number) => unknown;
+}): HTMLElement {
+  const container = document.createElement('span');
+  container.style.display = 'contents';
+  const getList = isGetter(props.each) ? props.each : () => props.each as T[];
+  effect(() => {
+    const list = getList();
+    const len = Array.isArray(list) ? list.length : 0;
+    if (len === 0) {
+      appendNormalized(container, props.fallback);
+      return;
+    }
+    container.replaceChildren();
+    for (let i = 0; i < len; i++) {
+      const item = list[i];
+      if (item === undefined) continue;
+      appendNormalized(container, props.children(item, i));
+    }
+  });
+  return container;
+}

package/index.ts

@@ -0,0 +1,5 @@
+export { state, effect } from './state.js';
+export { onMount, onCleanup } from './lifecycle.js';
+export { Show, Switch, Match } from './show-switch.js';
+export { For } from './for.js';
+export { normalizeChild, setContent } from './dom.js';

package/lifecycle.ts

@@ -0,0 +1,6 @@
+/** Esegue il callback dopo il mount (microtask: subito dopo il sync corrente). */
+export function onMount(fn: () => void): void {
+  queueMicrotask(fn);
+}
+
+export { onCleanup } from './state.js';

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@flow.os/core",
+  "version": "0.0.1-dev.1771665310",
+  "type": "module",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "dependencies": {},
+  "exports": {
+    ".": {
+      "types": "./index.ts",
+      "import": "./index.ts",
+      "default": "./index.ts"
+    }
+  }
+}

package/show-switch.ts

@@ -0,0 +1,56 @@
+/**
+ * Show: rendering condizionale (when/fallback).
+ * Switch: primo branch con when() truthy, altrimenti fallback.
+ */
+import { effect } from './state.js';
+import { setContent } from './dom.js';
+
+function isGetter(fn: unknown): fn is () => unknown {
+  return typeof fn === 'function' && fn.length === 0;
+}
+
+/** Show: quando when() è truthy mostra children, altrimenti fallback. */
+export function Show(props: {
+  when: (() => unknown) | unknown;
+  fallback?: unknown;
+  children?: unknown;
+}): HTMLElement {
+  const wrapper = document.createElement('span');
+  wrapper.style.display = 'contents';
+  const getWhen = isGetter(props.when) ? props.when : () => props.when;
+  effect(() => {
+    setContent(wrapper, getWhen() ? props.children : props.fallback);
+  });
+  return wrapper;
+}
+
+export type MatchBranch = { when: () => boolean; children: unknown };
+
+/** Switch: primo branch con when() truthy, altrimenti fallback. branches = [{ when, children }, ...]. */
+export function Switch(props: {
+  fallback?: unknown;
+  branches: MatchBranch[];
+}): HTMLElement {
+  const wrapper = document.createElement('span');
+  wrapper.style.display = 'contents';
+  effect(() => {
+    const list = props.branches;
+    for (let i = 0; i < list.length; i++) {
+      const b = list[i];
+      if (b === undefined) continue;
+      const cond = isGetter(b.when) ? b.when() : b.when;
+      if (cond) {
+        setContent(wrapper, b.children);
+        return;
+      }
+    }
+    setContent(wrapper, props.fallback);
+  });
+  return wrapper;
+}
+
+/** Helper per costruire i branch di Switch: Match({ when: () => cond, children: <Node/> }) => branch. */
+export function Match(props: { when: (() => boolean) | boolean; children?: unknown }): MatchBranch {
+  const whenFn = isGetter(props.when) ? props.when : () => Boolean(props.when);
+  return { when: whenFn, children: props.children };
+}

package/state.ts

@@ -0,0 +1,56 @@
+type Subscriber = () => void;
+type SubscriberSet = Set<Subscriber>;
+
+interface EffectRecord {
+  run: () => void;
+  deps: Set<SubscriberSet>;
+  cleanups: Array<() => void>;
+}
+
+let currentEffect: EffectRecord | null = null;
+
+export function state<T>(initialValue: T): [() => T, (value: T | ((prev: T) => T)) => void] {
+  let value = initialValue;
+  const subscribers: SubscriberSet = new Set();
+
+  function get(): T {
+    if (currentEffect !== null) {
+      subscribers.add(currentEffect.run);
+      currentEffect.deps.add(subscribers);
+    }
+    return value;
+  }
+
+  function set(next: T | ((prev: T) => T)): void {
+    const nextValue = typeof next === 'function' ? (next as (prev: T) => T)(value) : next;
+    if (Object.is(value, nextValue)) return;
+    value = nextValue;
+    const copy = Array.from(subscribers);
+    copy.forEach((fn) => fn());
+  }
+
+  return [get, set];
+}
+
+export function effect(fn: Subscriber): void {
+  const deps = new Set<SubscriberSet>();
+  const cleanups: Array<() => void> = [];
+  const run: Subscriber = () => {
+    for (const fn of cleanups) fn();
+    cleanups.length = 0;
+    deps.forEach((subs) => subs.delete(run));
+    deps.clear();
+    const prev = currentEffect;
+    currentEffect = { run, deps, cleanups };
+    try {
+      fn();
+    } finally {
+      currentEffect = prev;
+    }
+  };
+  run();
+}
+
+export function onCleanup(fn: () => void): void {
+  if (currentEffect !== null) currentEffect.cleanups.push(fn);
+}