@granularjs/core 1.0.0

package/src/core/reactivity/computed.js

@@ -0,0 +1,51 @@
+import { after } from './observe.js';
+import { isSignal, readSignal } from './signal.js';
+import { isState, isStatePath, isComputed, readState, state } from './state.js';
+
+function asComputed(value) {
+  if (isComputed(value)) return value;
+  if (isSignal(value)) {
+    const current = readSignal(value);
+    if (typeof current === 'function') {
+      return (...args) => {
+        const next = readSignal(value);
+        if (typeof next === 'function') return next(...args);
+        return undefined;
+      };
+    }
+    return after(value).compute((next) => next);
+  }
+  if (isState(value) || isStatePath(value)) {
+    const current = readState(value);
+    if (typeof current === 'function') {
+      return (...args) => {
+        const next = readState(value);
+        if (typeof next === 'function') return next(...args);
+        return undefined;
+      };
+    }
+    return after(value).compute((next) => next);
+  }
+  if (typeof value === 'function') return value;
+  return after(state(value)).compute((next) => next);
+}
+
+export function computed(input) {
+  if (isSignal(input) || isState(input) || isStatePath(input)) {
+    return asComputed(input);
+  }
+  if (!input || typeof input !== 'object') {
+    return asComputed(input);
+  }
+  const cache = new Map();
+  return new Proxy(input, {
+    get(target, prop) {
+      if (typeof prop === 'symbol') return target[prop];
+      if (cache.has(prop)) return cache.get(prop);
+      const value = target[prop];
+      const resolved = asComputed(value);
+      cache.set(prop, resolved);
+      return resolved;
+    },
+  });
+}

package/src/core/reactivity/concat.js

@@ -0,0 +1,89 @@
+import { after } from './observe.js';
+import { resolve } from './resolve.js';
+import { isSignal } from './signal.js';
+import { isState, isStatePath, isComputed } from './state.js';
+
+function isObject(value) {
+  return value !== null && typeof value === 'object';
+}
+
+function isReactive(value) {
+  return isSignal(value) || isState(value) || isStatePath(value) || isComputed(value);
+}
+
+function isTuple(value) {
+  if (!Array.isArray(value) || value.length !== 2) return false;
+  const source = value[0];
+  const mapper = value[1];
+  if (isReactive(source)) return typeof mapper === 'function' || typeof mapper === 'string';
+  return typeof mapper === 'function' || typeof mapper === 'string';
+}
+
+function normalizeParts(values, out = []) {
+  for (const value of values) {
+    if (isTuple(value)) {
+      out.push(value);
+      continue;
+    }
+    if (Array.isArray(value)) {
+      normalizeParts(value, out);
+      continue;
+    }
+    out.push(value);
+  }
+  return out;
+}
+
+function extractOptions(parts) {
+  if (!parts.length) return { parts, options: { separator: '', filterFalsy: false } };
+  const last = parts[parts.length - 1];
+  if (
+    isObject(last) &&
+    !Array.isArray(last) &&
+    !isReactive(last) &&
+    (Object.prototype.hasOwnProperty.call(last, 'separator') ||
+      Object.prototype.hasOwnProperty.call(last, 'filterFalsy'))
+  ) {
+    const options = {
+      separator: last.separator ?? '',
+      filterFalsy: last.filterFalsy ?? false,
+    };
+    return { parts: parts.slice(0, -1), options };
+  }
+  return { parts, options: { separator: '', filterFalsy: false } };
+}
+
+function collectTargets(value, targets) {
+  if (isReactive(value)) targets.push(value);
+  if (Array.isArray(value) && value.length) {
+    const source = value[0];
+    if (isReactive(source)) targets.push(source);
+  }
+}
+
+function resolvePart(part) {
+  if (Array.isArray(part)) {
+    const source = part[0];
+    const mapper = part[1];
+    const value = resolve(source);
+    if (typeof mapper === 'function') return mapper(value);
+    if (typeof mapper === 'string') return value ? mapper : '';
+    return value;
+  }
+  if (typeof part === 'function') return part();
+  return resolve(part);
+}
+
+export function concat(...input) {
+  const normalized = normalizeParts(input);
+  const { parts, options } = extractOptions(normalized);
+  const targets = [];
+  for (const part of parts) collectTargets(part, targets);
+  const build = () => {
+    const values = parts.map(resolvePart).map((value) => (value == null ? '' : String(value)));
+    const filtered = options.filterFalsy ? values.filter(Boolean) : values;
+    return filtered.join(options.separator);
+  };
+  if (!targets.length) return build();
+  return after(targets).compute(build);
+}

package/src/core/reactivity/dirty-host.js

@@ -0,0 +1,162 @@
+import { AfterFlush } from './after-flush.js';
+import { INTERNAL } from '../internal/symbols.js';
+import { Renderable } from '../renderable/renderable.js';
+import { isObservableArray } from '../collections/observable-array.js';
+import { EventHub } from '../events/event-hub.js';
+
+/**
+ * Base class that provides:
+ * - property instrumentation (dirty tracking)
+ * - microtask-batched flushing
+ * - subscription mechanism for template bindings
+ *
+ * This is part of the core runtime and is inherited by `Component`.
+ */
+export class DirtyHost extends Renderable {
+  #dirty = new Set();
+  #scheduled = false;
+  #subscribers = new Map();
+  #boundProps = new Set();
+  #values = new Map();
+  #observableUnsubs = new Map();
+  #events = new EventHub();
+
+  /**
+   * Registers BEFORE hooks. Handlers may return false to cancel.
+   * Example: `store.before().set(({ prop, next }) => next !== null)`
+   */
+  before() {
+    return this.#events.phase('before');
+  }
+
+  /**
+   * Registers AFTER hooks.
+   * Example: `store.after().flush(({ props }) => console.log(props))`
+   */
+  after() {
+    return this.#events.phase('after');
+  }
+
+  emitBefore(type, payload, ctx) {
+    return this.#events.emitBefore(type, payload, ctx);
+  }
+
+  emitAfter(type, payload, ctx) {
+    this.#events.emitAfter(type, payload, ctx);
+  }
+
+  /**
+   * Batches multiple assignments into a single flush.
+   *
+   * @param {() => void} cb
+   */
+  set(cb) {
+    const wasScheduled = this.#scheduled;
+    this.#scheduled = true;
+    try {
+      cb();
+    } finally {
+      this.#scheduled = wasScheduled;
+      this.update();
+    }
+  }
+
+  /**
+   * Flushes all dirty properties, notifying any subscribers registered by bindings.
+   * Usually you don't need to call this manually, because assignments trigger a microtask flush.
+   */
+  update() {
+    if (this.#dirty.size === 0) return;
+    const props = Array.from(this.#dirty);
+    this.#dirty.clear();
+    for (const prop of props) {
+      const subs = this.#subscribers.get(prop);
+      if (!subs) continue;
+      for (const fn of subs) fn();
+    }
+    this.#events.emitAfter('flush', { props }, { target: this });
+    AfterFlush.schedule();
+  }
+
+  /**
+   * Internal: subscribes to a property changes on this instance.
+   *
+   * @param {string} prop
+   * @param {() => void} fn
+   * @returns {() => void} unsubscribe
+   */
+  [INTERNAL.subscribeProp](prop, fn) {
+    let set = this.#subscribers.get(prop);
+    if (!set) {
+      set = new Set();
+      this.#subscribers.set(prop, set);
+    }
+    set.add(fn);
+    return () => set.delete(fn);
+  }
+
+  /**
+   * Internal: instruments a property by defining a getter/setter on the instance.
+   * The setter marks the property dirty and schedules a flush.
+   *
+   * @param {string} prop
+   */
+  [INTERNAL.instrumentBoundProp](prop) {
+    if (this.#boundProps.has(prop)) return;
+    this.#boundProps.add(prop);
+
+    const desc = Object.getOwnPropertyDescriptor(this, prop);
+    if (desc && desc.configurable === false) return;
+
+    this.#values.set(prop, this[prop]);
+    this.#wireObservable(prop, this.#values.get(prop));
+
+    Object.defineProperty(this, prop, {
+      get: () => this.#values.get(prop),
+      set: (v) => {
+        const prev = this.#values.get(prop);
+        if (prev === v) return;
+        const ok = this.#events.emitBefore('set', { prop, prev, next: v }, { target: this });
+        if (!ok) return;
+        this.#values.set(prop, v);
+        this.#wireObservable(prop, v);
+        this.#markDirty(prop);
+        this.#events.emitAfter('set', { prop, prev, next: v }, { target: this });
+      },
+      enumerable: true,
+      configurable: true,
+    });
+  }
+
+  #wireObservable(prop, value) {
+    const prevUnsub = this.#observableUnsubs.get(prop);
+    if (prevUnsub) {
+      prevUnsub();
+      this.#observableUnsubs.delete(prop);
+    }
+
+    if (!isObservableArray(value)) return;
+    if (typeof value.subscribe !== 'function') return;
+
+    const unsub = value.subscribe(() => {
+      // Array mutated without reassigning the prop; still notify.
+      this.#markDirty(prop);
+    });
+    this.#observableUnsubs.set(prop, unsub);
+  }
+
+  #markDirty(prop) {
+    this.#dirty.add(prop);
+    this.#scheduleFlush();
+  }
+
+  #scheduleFlush() {
+    if (this.#scheduled) return;
+    this.#scheduled = true;
+    queueMicrotask(() => {
+      this.#scheduled = false;
+      this.update();
+    });
+  }
+}
+