@granularjs/core 1.0.0

package/src/core/dom/error-boundary.js

@@ -0,0 +1,111 @@
+import { Renderable } from '../renderable/renderable.js';
+import { Renderer } from '../renderable/renderer.js';
+import { createComment, clearBetween } from './dom.js';
+
+export class ErrorBoundaryNode extends Renderable {
+  #fallback;
+  #onError;
+  #child;
+  #start = null;
+  #end = null;
+  #mounted = false;
+  #mountedValues = [];
+
+  constructor(options, child) {
+    super();
+    this.#fallback = options?.fallback ?? null;
+    this.#onError = options?.onError ?? null;
+    this.#child = child;
+  }
+
+  mountInto(parent, beforeNode) {
+    if (this.#mounted) return;
+    this.#mounted = true;
+    this.#start = createComment('zb:error:start', 'error');
+    this.#end = createComment('zb:error:end', 'error');
+    parent.insertBefore(this.#start, beforeNode);
+    parent.insertBefore(this.#end, beforeNode);
+    this.#renderSafe();
+  }
+
+  unmount() {
+    if (!this.#mounted) return;
+    this.#mounted = false;
+    this.#cleanup();
+    if (this.#start && this.#end) {
+      clearBetween(this.#start, this.#end);
+      this.#start.remove();
+      this.#end.remove();
+    }
+    this.#start = null;
+    this.#end = null;
+  }
+
+  #cleanup() {
+    for (const r of this.#mountedValues) Renderer.unmount(r);
+    this.#mountedValues = [];
+    if (this.#start && this.#end) clearBetween(this.#start, this.#end);
+  }
+
+  #renderValue(value) {
+    const values = Renderer.normalize(value);
+    this.#mountedValues = values;
+    for (const r of values) {
+      if (Renderer.isRenderable(r)) {
+        r.mountInto(this.#end.parentNode, this.#end);
+      } else if (Renderer.isDomNode(r)) {
+        this.#end.parentNode.insertBefore(r, this.#end);
+      }
+    }
+  }
+
+  #renderSafe() {
+    this.#cleanup();
+    try {
+      const value = typeof this.#child === 'function' ? this.#child() : this.#child;
+      this.#renderValue(value);
+    } catch (error) {
+      this.#handleError(error);
+    }
+  }
+
+  #handleError(error) {
+    try {
+      if (typeof this.#onError === 'function') {
+        this.#onError(error, { phase: 'render' });
+      }
+    } catch {
+      // ignore errors from onError
+    }
+    try {
+      if (this.#fallback) {
+        const value = typeof this.#fallback === 'function' ? this.#fallback(error) : this.#fallback;
+        this.#renderValue(value);
+      }
+    } catch {
+      // ignore errors from fallback
+    }
+  }
+
+  renderToString(render) {
+    try {
+      const value = typeof this.#child === 'function' ? this.#child() : this.#child;
+      return render(value);
+    } catch (error) {
+      if (typeof this.#onError === 'function') {
+        try {
+          this.#onError(error, { phase: 'render' });
+        } catch {}
+      }
+      if (this.#fallback) {
+        const fallback = typeof this.#fallback === 'function' ? this.#fallback(error) : this.#fallback;
+        return render(fallback);
+      }
+      return '';
+    }
+  }
+}
+
+export function ErrorBoundary(options, child) {
+  return new ErrorBoundaryNode(options, child);
+}

package/src/core/dom/input-format.js

@@ -0,0 +1,82 @@
+const tokenMatchers = {
+  d: (char) => /[0-9]/.test(char),
+  a: (char) => /[A-Za-z]/.test(char),
+  '*': (char) => /[A-Za-z0-9]/.test(char),
+  s: (char) => /[^A-Za-z0-9]/.test(char),
+};
+
+const isToken = (char) => Object.prototype.hasOwnProperty.call(tokenMatchers, char);
+
+function collectPatternValues(input, pattern) {
+  const values = [];
+  let patternIndex = 0;
+  for (const char of input) {
+    while (patternIndex < pattern.length && !isToken(pattern[patternIndex])) {
+      patternIndex += 1;
+    }
+    if (patternIndex >= pattern.length) break;
+    const token = pattern[patternIndex];
+    if (tokenMatchers[token]?.(char)) {
+      values.push(char);
+      patternIndex += 1;
+    }
+  }
+  return values;
+}
+
+function applyPattern(input, pattern) {
+  const values = collectPatternValues(input, pattern);
+  let visual = '';
+  let valueIndex = 0;
+  for (let i = 0; i < pattern.length; i += 1) {
+    const char = pattern[i];
+    if (isToken(char)) {
+      if (valueIndex >= values.length) break;
+      visual += values[valueIndex];
+      valueIndex += 1;
+      continue;
+    }
+    if (valueIndex === 0) continue;
+    if (valueIndex < values.length) visual += char;
+  }
+  return { raw: values.join(''), visual };
+}
+
+export function normalizeInputFormat(format) {
+  if (format == null) return null;
+  if (typeof format === 'function') return { format, mode: 'both' };
+  if (typeof format === 'string') return { pattern: format, mode: 'both' };
+  if (typeof format === 'object') return { mode: 'both', ...format };
+  return null;
+}
+
+export function applyInputFormat(inputValue, format) {
+  const normalized = normalizeInputFormat(format);
+  const rawInput = String(inputValue ?? '');
+  if (!normalized) {
+    return { value: rawInput, visual: rawInput, raw: rawInput };
+  }
+  if (typeof normalized.format === 'function') {
+    let formatted = rawInput;
+    try {
+      formatted = normalized.format(rawInput);
+    } catch {}
+    if (formatted && typeof formatted === 'object') {
+      const value = formatted.value ?? formatted.visual ?? '';
+      const visual = formatted.visual ?? formatted.value ?? '';
+      const raw = formatted.raw ?? value ?? '';
+      return { value: String(value), visual: String(visual), raw: String(raw) };
+    }
+    return { value: String(formatted ?? ''), visual: String(formatted ?? ''), raw: String(formatted ?? '') };
+  }
+  if (normalized.pattern) {
+    const { raw, visual } = applyPattern(rawInput, String(normalized.pattern));
+    return { value: visual, visual, raw };
+  }
+  if (normalized.regex) {
+    const match = rawInput.match(normalized.regex);
+    const formatted = match ? match[0] : '';
+    return { value: formatted, visual: formatted, raw: formatted };
+  }
+  return { value: rawInput, visual: rawInput, raw: rawInput };
+}

package/src/core/dom/list.js

@@ -0,0 +1,185 @@
+import { Renderable } from '../renderable/renderable.js';
+import { Renderer } from '../renderable/renderer.js';
+import { isObservableArray } from '../collections/observable-array.js';
+import { createComment, clearBetween } from './dom.js';
+import { signal, setSignal, isSignal, readSignal, subscribeSignal } from '../reactivity/signal.js';
+import { state, isState, isStatePath, readState, subscribeState } from '../reactivity/state.js';
+
+export class ListNode extends Renderable {
+  #items;
+  #renderItem;
+  #start = null;
+  #end = null;
+  #mounted = false;
+  #unsub = null;
+  #itemRefs = [];
+
+  constructor(items, renderItem) {
+    super();
+    this.#items = items;
+    this.#renderItem = renderItem;
+  }
+
+  mountInto(parent, beforeNode) {
+    if (this.#mounted) return;
+    this.#mounted = true;
+    this.#start = createComment('zb:list:start', 'list');
+    this.#end = createComment('zb:list:end', 'list');
+    parent.insertBefore(this.#start, beforeNode);
+    parent.insertBefore(this.#end, beforeNode);
+
+    const initial = this.#readItems();
+    this.#mountAll(initial);
+    this.#wire();
+  }
+
+  unmount() {
+    if (!this.#mounted) return;
+    this.#mounted = false;
+    if (this.#unsub) this.#unsub();
+    this.#unsub = null;
+    this.#cleanup();
+    if (this.#start && this.#end) {
+      clearBetween(this.#start, this.#end);
+      this.#start.remove();
+      this.#end.remove();
+    }
+    this.#start = null;
+    this.#end = null;
+  }
+
+  renderToString(render) {
+    const items = this.#readItems();
+    return items.map((item, index) => {
+      const itemState = state(item);
+      const indexSignal = signal(index);
+      return render(this.#renderItem(itemState, indexSignal));
+    }).join('');
+  }
+
+  #readItems() {
+    if (isObservableArray(this.#items)) return this.#items;
+    if (isSignal(this.#items)) return readSignal(this.#items) || [];
+    if (isState(this.#items) || isStatePath(this.#items)) return readState(this.#items) || [];
+    return Array.isArray(this.#items) ? this.#items : [];
+  }
+
+  #wire() {
+    if (isObservableArray(this.#items)) {
+      this.#unsub = this.#items.subscribe((patch) => {
+        if (!this.#mounted) return;
+        if (patch.type === 'reset') {
+          this.#reset(patch.items);
+          return;
+        }
+        if (patch.type === 'insert') {
+          for (let i = 0; i < patch.items.length; i++) {
+            this.#insert(patch.index + i, patch.items[i]);
+          }
+          this.#updateIndices(patch.index + patch.items.length);
+          return;
+        }
+        if (patch.type === 'remove') {
+          this.#remove(patch.index, patch.count);
+          this.#updateIndices(patch.index);
+          return;
+        }
+        if (patch.type === 'set') {
+          this.#set(patch.index, patch.value);
+        }
+      });
+      return;
+    }
+
+    if (isSignal(this.#items)) {
+      this.#unsub = subscribeSignal(this.#items, () => {
+        this.#reset(this.#readItems());
+      });
+      return;
+    }
+
+    if (isState(this.#items) || isStatePath(this.#items)) {
+      this.#unsub = subscribeState(this.#items, () => {
+        this.#reset(this.#readItems());
+      });
+    }
+  }
+
+  #mountAll(items) {
+    this.#itemRefs = [];
+    for (let i = 0; i < items.length; i++) {
+      this.#insert(i, items[i]);
+    }
+  }
+
+  #cleanup() {
+    for (const it of this.#itemRefs) {
+      for (const r of it.values) Renderer.unmount(r);
+      clearBetween(it.start, it.end);
+      it.start.remove();
+      it.end.remove();
+    }
+    this.#itemRefs = [];
+  }
+
+  #reset(items) {
+    this.#cleanup();
+    this.#mountAll(items);
+  }
+
+  #insert(index, item) {
+    const refNode = index < this.#itemRefs.length ? this.#itemRefs[index].start : this.#end;
+    const itemStart = createComment('zb:item:start', 'item');
+    const itemEnd = createComment('zb:item:end', 'item');
+    const parent = this.#end.parentNode;
+    parent.insertBefore(itemStart, refNode);
+    parent.insertBefore(itemEnd, refNode);
+    const itemState = state(item);
+    const indexSignal = signal(index);
+    const rendered = this.#renderItem ? this.#renderItem(itemState, indexSignal) : item;
+    const values = Renderer.normalize(rendered);
+    for (const r of values) this.#mountRenderable(parent, r, itemEnd);
+    this.#itemRefs.splice(index, 0, { start: itemStart, end: itemEnd, values, state: itemState, index: indexSignal });
+  }
+
+  #remove(index, count) {
+    const removed = this.#itemRefs.splice(index, count);
+    for (const it of removed) {
+      for (const r of it.values) Renderer.unmount(r);
+      clearBetween(it.start, it.end);
+      it.start.remove();
+      it.end.remove();
+    }
+  }
+
+  #set(index, item) {
+    const ref = this.#itemRefs[index];
+    if (ref && ref.state) {
+      ref.state.set(item);
+      return;
+    }
+    this.#remove(index, 1);
+    this.#insert(index, item);
+  }
+
+  #updateIndices(fromIndex) {
+    for (let i = fromIndex; i < this.#itemRefs.length; i++) {
+      const ref = this.#itemRefs[i];
+      if (ref.index) setSignal(ref.index, i);
+    }
+  }
+
+  #mountRenderable(parent, renderable, beforeNode) {
+    if (Renderer.isRenderable(renderable)) {
+      renderable.mountInto(parent, beforeNode);
+      return;
+    }
+    if (Renderer.isDomNode(renderable)) {
+      parent.insertBefore(renderable, beforeNode);
+    }
+  }
+}
+
+export function list(items, renderItem) {
+  return new ListNode(items, renderItem);
+}

package/src/core/dom/portal.js

@@ -0,0 +1,57 @@
+import { Renderable } from '../renderable/renderable.js';
+import { Renderer } from '../renderable/renderer.js';
+
+function resolveTarget(target) {
+  if (!target && typeof document !== 'undefined') return document.body;
+  if (typeof target === 'string') return document.querySelector(target);
+  return target;
+}
+
+export class PortalNode extends Renderable {
+  #target;
+  #content;
+  #mounted = false;
+  #mountedValues = [];
+
+  constructor(target, content) {
+    super();
+    this.#target = target;
+    this.#content = content;
+  }
+
+  mountInto(_parent, _beforeNode) {
+    if (this.#mounted) return;
+    this.#mounted = true;
+    const targetEl = resolveTarget(this.#target);
+    if (!targetEl) throw new Error('portal: target not found');
+    const value = typeof this.#content === 'function' ? this.#content() : this.#content;
+    const values = Renderer.normalize(value);
+    this.#mountedValues = values;
+    for (const r of values) {
+      if (Renderer.isRenderable(r)) {
+        r.mountInto(targetEl, null);
+      } else if (Renderer.isDomNode(r)) {
+        targetEl.appendChild(r);
+      }
+    }
+  }
+
+  unmount() {
+    if (!this.#mounted) return;
+    this.#mounted = false;
+    for (const r of this.#mountedValues) Renderer.unmount(r);
+    this.#mountedValues = [];
+  }
+
+  renderToString(render) {
+    const value = typeof this.#content === 'function' ? this.#content() : this.#content;
+    return render(value);
+  }
+}
+
+export function portal(target, content) {
+  if (content === undefined) {
+    return new PortalNode(null, target);
+  }
+  return new PortalNode(target, content);
+}

package/src/core/dom/tags.js

@@ -0,0 +1,182 @@
+import { ElementNode } from './element.js';
+import { Renderer } from '../renderable/renderer.js';
+import { isObservableArray } from '../collections/observable-array.js';
+import { isSignal } from '../reactivity/signal.js';
+import { isComputed, isState, isStatePath } from '../reactivity/state.js';
+
+const tags = [
+  'html', 'head', 'title', 'base', 'link', 'meta', 'style',
+  'body', 'article', 'section', 'nav', 'aside', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'hgroup', 'header', 'footer', 'address', 'main', 'search',
+  'p', 'hr', 'pre', 'blockquote', 'ol', 'ul', 'li', 'dl', 'dt', 'dd',
+  'figure', 'figcaption', 'div', 'menu',
+  'a', 'em', 'strong', 'small', 's', 'cite', 'q', 'dfn', 'abbr', 'ruby', 'rt', 'rp',
+  'data', 'time', 'code', 'var', 'samp', 'kbd', 'sub', 'sup', 'i', 'b', 'u',
+  'mark', 'bdi', 'bdo', 'span', 'br', 'wbr',
+  'ins', 'del',
+  'picture', 'source', 'img', 'iframe', 'embed', 'object', 'param', 'video', 'audio',
+  'track', 'map', 'area',
+  'table', 'caption', 'colgroup', 'col', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th',
+  'form', 'label', 'input', 'button', 'select', 'datalist', 'optgroup', 'option',
+  'textarea', 'output', 'progress', 'meter', 'fieldset', 'legend',
+  'details', 'summary', 'dialog',
+  'script', 'noscript', 'template', 'slot', 'canvas',
+];
+
+function toFactoryName(tag) {
+  let name = tag.charAt(0).toUpperCase() + tag.slice(1);
+  if (name in globalThis) name = `Html${name}`;
+  return name;
+}
+
+function createTag(tagName) {
+  return (...args) => {
+    const nextProps = {};
+    const nextChildren = [];
+
+    const isPropsObject = (value) =>
+      !!value &&
+      typeof value === 'object' &&
+      !Array.isArray(value) &&
+      !Renderer.isRenderable(value) &&
+      !Renderer.isDomNode(value) &&
+      !isObservableArray(value) &&
+      !isSignal(value) &&
+      !isState(value) &&
+      !isStatePath(value) &&
+      !isComputed(value);
+
+    for (const arg of args) {
+      if (isPropsObject(arg)) {
+        Object.assign(nextProps, arg);
+      } else {
+        nextChildren.push(arg);
+      }
+    }
+
+    return new ElementNode(tagName, nextProps, nextChildren);
+  };
+}
+
+const exported = {};
+for (const tag of tags) {
+  const name = toFactoryName(tag);
+  exported[name] = createTag(tag);
+}
+
+export const Elements = Object.freeze(exported);
+export const {
+  Html,
+  Head,
+  Title,
+  Base,
+  Link,
+  Meta,
+  Style,
+  Body,
+  Article,
+  Section,
+  Nav,
+  Aside,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Hgroup,
+  Header,
+  Footer,
+  Address,
+  Main,
+  Search,
+  P,
+  Hr,
+  Pre,
+  Blockquote,
+  Ol,
+  Ul,
+  Li,
+  Dl,
+  Dt,
+  Dd,
+  Figure,
+  Figcaption,
+  Div,
+  Menu,
+  A,
+  Em,
+  Strong,
+  Small,
+  S,
+  Cite,
+  Q,
+  Dfn,
+  Abbr,
+  Ruby,
+  Rt,
+  Rp,
+  Data,
+  Time,
+  Code,
+  Var,
+  Samp,
+  Kbd,
+  Sub,
+  Sup,
+  I,
+  B,
+  U,
+  Mark,
+  Bdi,
+  Bdo,
+  Span,
+  Br,
+  Wbr,
+  Ins,
+  Del,
+  Picture,
+  Source,
+  Img,
+  Iframe,
+  Embed,
+  HtmlObject,
+  Param,
+  Video,
+  Audio,
+  Track,
+  Map,
+  Area,
+  Table,
+  Caption,
+  Colgroup,
+  Col,
+  Tbody,
+  Thead,
+  Tfoot,
+  Tr,
+  Td,
+  Th,
+  Form,
+  Label,
+  Input,
+  Button,
+  Select,
+  Datalist,
+  Optgroup,
+  Option,
+  Textarea,
+  Output,
+  Progress,
+  Meter,
+  Fieldset,
+  Legend,
+  Details,
+  Summary,
+  Dialog,
+  Script,
+  Noscript,
+  Template,
+  Slot,
+  Canvas,
+} = exported;