@estjs/template 0.0.16-beta.1 → 0.0.16-beta.3

package/dist/template.d.cts

@@ -1,6 +1,6 @@
 import { Signal, Computed } from '@estjs/signals';
-import { S as Scope } from './internal-Bz6h0aPa.cjs';
-export { I as InjectionKey, i as inject, p as provide } from './internal-Bz6h0aPa.cjs';
+import { S as Scope } from './internal-DSKAj-zW.cjs';
+export { I as InjectionKey, i as inject, p as provide } from './internal-DSKAj-zW.cjs';
 import { normalizeClassName } from '@estjs/shared';
 
 declare enum COMPONENT_STATE {
@@ -168,11 +168,11 @@ declare function onUpdate(hook: LifecycleHook): void;
 declare function onDestroy(hook: LifecycleHook): void;
 
 /**
- * Modifiers supported by `bind:*` two-way bindings.
+ * Modifiers for `bind:*` two-way bindings.
  *
- * - `trim`   strip surrounding whitespace from string values
- * - `number` coerce numeric strings to numbers (no-op on `NaN`)
- * - `lazy`   commit on `change` instead of `input`
+ * - `trim`   — strip surrounding whitespace
+ * - `number` — coerce numeric strings to numbers (no-op on NaN)
+ * - `lazy`   — commit on `change` instead of `input`
  */
 interface BindModifiers {
     trim?: boolean;
@@ -181,15 +181,18 @@ interface BindModifiers {
     [key: string]: boolean | undefined;
 }
 /**
- * Synchronizes a DOM element property with a model getter and setter.
+ * Creates a two-way binding between a DOM element property and a reactive model.
  *
- * @param node      The element to bind. `null` is tolerated (no-op).
- * @param prop      Bound property: `value` / `checked` / `files` / arbitrary.
- * @param getter    Reactive getter or static initial value.
- * @param setter    Receives the new value when the user edits the DOM.
- * @param modifiers Optional `BindModifiers`.
+ * - **Model → DOM** — a reactive `effect()` pushes model changes to the element.
+ * - **DOM → Model** — an event listener reads user input and calls `setter`.
+ *
+ * @param node      Target element. `null` is tolerated (no-op).
+ * @param prop      Bound property (`value` / `checked` / `files` / custom).
+ * @param getter    Reactive getter, or a static initial value.
+ * @param setter    Called with the (optionally transformed) DOM value on user input.
+ * @param modifiers Optional `{ trim, number, lazy }`.
  */
-declare function bindElement(node: Element | null, prop: 'value' | 'checked' | 'files' | string, getter: (() => unknown) | unknown, setter: (value: unknown) => void, modifiers?: BindModifiers): void;
+declare function bindElement(node: Element | null, prop: 'value' | 'checked' | 'files' | string, getter: (() => unknown) | unknown, setter: (v: unknown) => void, modifiers?: BindModifiers): void;
 
 /**
  * Set up event delegation for specified event types.

package/dist/template.d.ts

@@ -1,6 +1,6 @@
 import { Signal, Computed } from '@estjs/signals';
-import { S as Scope } from './internal-Bz6h0aPa.js';
-export { I as InjectionKey, i as inject, p as provide } from './internal-Bz6h0aPa.js';
+import { S as Scope } from './internal-DSKAj-zW.js';
+export { I as InjectionKey, i as inject, p as provide } from './internal-DSKAj-zW.js';
 import { normalizeClassName } from '@estjs/shared';
 
 declare enum COMPONENT_STATE {
@@ -168,11 +168,11 @@ declare function onUpdate(hook: LifecycleHook): void;
 declare function onDestroy(hook: LifecycleHook): void;
 
 /**
- * Modifiers supported by `bind:*` two-way bindings.
+ * Modifiers for `bind:*` two-way bindings.
  *
- * - `trim`   strip surrounding whitespace from string values
- * - `number` coerce numeric strings to numbers (no-op on `NaN`)
- * - `lazy`   commit on `change` instead of `input`
+ * - `trim`   — strip surrounding whitespace
+ * - `number` — coerce numeric strings to numbers (no-op on NaN)
+ * - `lazy`   — commit on `change` instead of `input`
  */
 interface BindModifiers {
     trim?: boolean;
@@ -181,15 +181,18 @@ interface BindModifiers {
     [key: string]: boolean | undefined;
 }
 /**
- * Synchronizes a DOM element property with a model getter and setter.
+ * Creates a two-way binding between a DOM element property and a reactive model.
  *
- * @param node      The element to bind. `null` is tolerated (no-op).
- * @param prop      Bound property: `value` / `checked` / `files` / arbitrary.
- * @param getter    Reactive getter or static initial value.
- * @param setter    Receives the new value when the user edits the DOM.
- * @param modifiers Optional `BindModifiers`.
+ * - **Model → DOM** — a reactive `effect()` pushes model changes to the element.
+ * - **DOM → Model** — an event listener reads user input and calls `setter`.
+ *
+ * @param node      Target element. `null` is tolerated (no-op).
+ * @param prop      Bound property (`value` / `checked` / `files` / custom).
+ * @param getter    Reactive getter, or a static initial value.
+ * @param setter    Called with the (optionally transformed) DOM value on user input.
+ * @param modifiers Optional `{ trim, number, lazy }`.
  */
-declare function bindElement(node: Element | null, prop: 'value' | 'checked' | 'files' | string, getter: (() => unknown) | unknown, setter: (value: unknown) => void, modifiers?: BindModifiers): void;
+declare function bindElement(node: Element | null, prop: 'value' | 'checked' | 'files' | string, getter: (() => unknown) | unknown, setter: (v: unknown) => void, modifiers?: BindModifiers): void;
 
 /**
  * Set up event delegation for specified event types.

package/dist/template.dev.cjs.js

@@ -19,7 +19,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve2, reject) => {
     var fulfilled = (value) => {
       try {
         step(generator.next(value));
@@ -34,7 +34,7 @@ var __async = (__this, __arguments, generator) => {
         reject(e);
       }
     };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
@@ -56,8 +56,10 @@ function getActiveScope() {
   return activeScope;
 }
 function createScope(parent = activeScope) {
+  const reactiveScope = parent ? parent.effectScope.run(() => signals.effectScope()) : signals.effectScope(true);
   const scope = {
     id: ++scopeId,
+    effectScope: reactiveScope,
     parent,
     children: null,
     // Lazy initialized
@@ -86,7 +88,7 @@ function runWithScope(scope, fn) {
   const prevScope = activeScope;
   activeScope = scope;
   try {
-    return fn();
+    return scope.effectScope.run(fn);
   } finally {
     activeScope = prevScope;
   }
@@ -106,15 +108,13 @@ function disposeScope(scope) {
     }
     scope.children.clear();
   }
-  const prevScope = activeScope;
-  activeScope = scope;
-  try {
+  runWithScope(scope, () => {
     if (scope.onDestroy) {
       for (let i = 0; i < scope.onDestroy.length; i++) {
         try {
           scope.onDestroy[i]();
         } catch (error_) {
-          if (true) {
+          {
             shared.error(`Scope(${scope.id}): Error in destroy hook:`, error_);
           }
         }
@@ -126,16 +126,15 @@ function disposeScope(scope) {
         try {
           scope.cleanup[i]();
         } catch (error_) {
-          if (true) {
+          {
             shared.error(`Scope(${scope.id}): Error in cleanup:`, error_);
           }
         }
       }
       scope.cleanup = null;
     }
-  } finally {
-    activeScope = prevScope;
-  }
+  });
+  scope.effectScope.stop();
   if ((_a2 = scope.parent) == null ? void 0 : _a2.children) {
     scope.parent.children.delete(scope);
   }
@@ -207,7 +206,7 @@ function patchAttr(el, key, prev, next2) {
   const elementIsSVG = (el == null ? void 0 : el.namespaceURI) === SVG_NAMESPACE;
   const isXlink = elementIsSVG && key.startsWith("xlink:");
   const isXmlns = elementIsSVG && key.startsWith("xmlns:");
-  const isBoolean2 = shared.isSpecialBooleanAttr(key) || shared.isBooleanAttr(key);
+  const isBoolean = shared.isSpecialBooleanAttr(key) || shared.isBooleanAttr(key);
   if (prev === next2) {
     return;
   }
@@ -232,7 +231,7 @@ function patchAttr(el, key, prev, next2) {
     }
     return;
   }
-  if (isBoolean2) {
+  if (isBoolean) {
     if (shared.includeBooleanAttr(next2)) {
       el.setAttribute(key, "");
     } else {
@@ -676,22 +675,30 @@ function insertNode(parent, child2, before) {
   }
 }
 function normalizeNode(node) {
-  if (shared.isHTMLElement(node)) {
-    return node;
-  }
-  if (shared.isPrimitive(node)) {
-    return document.createTextNode(shared.isFalsy(node) ? "" : String(node));
+  if (node instanceof Node) return node;
+  if (isComponent(node)) return node;
+  const t = typeof node;
+  if (node == null || t === "string" || t === "number" || t === "boolean" || t === "symbol") {
+    return document.createTextNode(node === false || node == null ? "" : String(node));
+  }
+  if (shared.isObject(node)) {
+    shared.warn(
+      "Rendering a plain object as a node is not recommended. The object will be converted to its string representation.",
+      node
+    );
   }
-  return node;
+  return document.createTextNode(String(node));
 }
 function insert(parent, nodeFactory, before) {
   if (!parent) return;
-  const ownerScope = getActiveScope();
+  const parentScope = getActiveScope();
   let renderedNodes = [];
   let isFirstRun = true;
   const resolveNodes = (raw) => {
     if (raw instanceof Node) return [raw];
-    if (shared.isNull(raw) || shared.isUndefined(raw) || shared.isString(raw) || shared.isNumber(raw) || shared.isBoolean(raw)) {
+    if (isComponent(raw)) return [raw];
+    const t = typeof raw;
+    if (raw == null || t === "string" || t === "number" || t === "boolean") {
       return [normalizeNode(raw)];
     }
     return shared.coerceArray(raw).map((item) => shared.isFunction(item) ? item() : item).flatMap((i) => i).map(normalizeNode);
@@ -708,8 +715,8 @@ function insert(parent, nodeFactory, before) {
       renderedNodes = reconcileArrays(parent, renderedNodes, nodes, before);
       isFirstRun = false;
     };
-    if (ownerScope && !ownerScope.isDestroyed) {
-      runWithScope(ownerScope, executeUpdate);
+    if (parentScope && !parentScope.isDestroyed) {
+      runWithScope(parentScope, executeUpdate);
     } else {
       executeUpdate();
     }
@@ -910,7 +917,9 @@ var Component = class {
       if (shared.isFunction(result)) {
         result = result(this.reactiveProps);
       }
-      if (signals.isSignal(result) || signals.isComputed(result)) {
+      if (signals.isSignal(result)) {
+        result = result.value;
+      } else if (signals.isComputed(result)) {
         result = result.value;
       }
       return (_a3 = insert(parentNode, result, beforeNode)) != null ? _a3 : [];
@@ -1011,11 +1020,12 @@ var Component = class {
       return () => value(null);
     }
     if (signals.isSignal(value)) {
-      const previousValue = value.value;
-      value.value = root;
+      const ref = value;
+      const previousValue = ref.value;
+      ref.value = root;
       return () => {
-        if (value.value === root) {
-          value.value = previousValue;
+        if (ref.value === root) {
+          ref.value = previousValue;
         }
       };
     }
@@ -1230,154 +1240,144 @@ function addEventListener(element, event, handler, options) {
 }
 
 // src/binding.ts
-var INPUT_CHECKBOX_CHECKED = {
+function writeValue(el, v) {
+  const target = el;
+  const next2 = v == null ? "" : String(v);
+  if (target.value !== next2) target.value = next2;
+}
+var CHECKBOX = {
   event: "change",
-  forceChangeEvent: true,
-  read: (n) => n.checked,
-  write: (n, v) => {
-    const el = n;
+  forceChange: true,
+  read: (el) => el.checked,
+  write(el, v) {
+    const e = el;
     const next2 = Boolean(v);
-    if (el.checked !== next2) el.checked = next2;
+    if (e.checked !== next2) e.checked = next2;
   }
 };
-var INPUT_RADIO_CHECKED = {
+var RADIO = {
   event: "change",
-  forceChangeEvent: true,
-  read: (n) => {
-    const el = n;
-    return el.checked ? el.value : "";
+  forceChange: true,
+  read(el) {
+    const e = el;
+    return e.checked ? e.value : "";
   },
-  write: (n, v) => {
-    const el = n;
-    const next2 = String(v) === el.value;
-    if (el.checked !== next2) el.checked = next2;
+  write(el, v) {
+    const e = el;
+    const next2 = String(v) === e.value;
+    if (e.checked !== next2) e.checked = next2;
   }
 };
-var INPUT_FILE_FILES = {
+var FILE = {
   event: "change",
-  forceChangeEvent: true,
-  read: (n) => n.files,
-  // Browsers do not allow programmatic writes to <input type="file">.
-  write: () => {
+  forceChange: true,
+  read: (el) => el.files,
+  write() {
   }
+  // browsers forbid programmatic writes to file inputs
 };
-var INPUT_VALUE = {
+var TEXT = {
   event: "input",
-  needsComposition: true,
-  read: (n) => n.value,
-  write: (n, v) => {
-    const el = n;
-    const next2 = v == null ? "" : String(v);
-    if (el.value !== next2) el.value = next2;
-  }
+  ime: true,
+  read: (el) => el.value,
+  write: writeValue
+};
+var TEXTAREA = {
+  event: "input",
+  ime: true,
+  read: (el) => el.value,
+  write: writeValue
 };
-var SELECT_VALUE = {
+var SELECT = {
   event: "change",
-  forceChangeEvent: true,
-  read: (n) => {
-    const s = n;
+  forceChange: true,
+  read(el) {
+    const s = el;
     return s.multiple ? Array.from(s.selectedOptions, (o) => o.value) : s.value;
   },
-  write: (n, v) => {
-    const s = n;
+  write(el, v) {
+    const s = el;
     if (s.multiple) {
-      const set = new Set((Array.isArray(v) ? v : []).map(String));
-      for (const opt of Array.from(s.options)) opt.selected = set.has(opt.value);
+      const selected = new Set((Array.isArray(v) ? v : []).map(String));
+      for (const opt of Array.from(s.options)) opt.selected = selected.has(opt.value);
     } else {
-      const next2 = v == null ? "" : String(v);
-      if (s.value !== next2) s.value = next2;
+      writeValue(el, v);
     }
   }
 };
-var TEXTAREA_VALUE = {
-  event: "input",
-  needsComposition: true,
-  read: (n) => n.value,
-  write: (n, v) => {
-    const el = n;
-    const next2 = v == null ? "" : String(v);
-    if (el.value !== next2) el.value = next2;
+function resolve(node, prop) {
+  switch (node.nodeName) {
+    case "INPUT":
+      if (prop === "checked") return node.type === "radio" ? RADIO : CHECKBOX;
+      if (prop === "files") return FILE;
+      return TEXT;
+    case "SELECT":
+      return SELECT;
+    case "TEXTAREA":
+      return TEXTAREA;
+    default:
+      return {
+        event: "input",
+        read: (el) => el[prop],
+        write(el, v) {
+          el[prop] = v;
+        }
+      };
   }
-};
-function resolveStrategy(node, prop) {
-  const tag = node.nodeName;
-  if (tag === "INPUT") {
-    const type = node.type;
-    if (prop === "checked") {
-      return type === "radio" ? INPUT_RADIO_CHECKED : INPUT_CHECKBOX_CHECKED;
-    }
-    if (prop === "files") return INPUT_FILE_FILES;
-    return INPUT_VALUE;
-  }
-  if (tag === "SELECT") return SELECT_VALUE;
-  if (tag === "TEXTAREA") return TEXTAREA_VALUE;
-  return {
-    event: "input",
-    read: (n) => n[prop],
-    write: (n, v) => {
-      n[prop] = v;
-    }
-  };
 }
-function castValue(val, trim, number) {
-  if (!shared.isString(val)) return val;
-  if (trim) val = val.trim();
-  if (number && val !== "") {
-    const parsed = Number(val);
-    if (!Number.isNaN(parsed)) return parsed;
+function applyModifiers(v, trim, toNum) {
+  if (!shared.isString(v)) return v;
+  let s = v;
+  if (trim) s = s.trim();
+  if (toNum && s !== "") {
+    const n = Number(s);
+    if (!Number.isNaN(n)) return n;
   }
-  return val;
+  return s;
 }
-function isFocused(node) {
-  const root = node.getRootNode();
-  return (root instanceof Document || root instanceof ShadowRoot) && root.activeElement === node;
+function isFocused(el) {
+  const root = el.getRootNode();
+  return (root instanceof Document || root instanceof ShadowRoot) && root.activeElement === el;
 }
 function bindElement(node, prop, getter, setter, modifiers = {}) {
   if (!node) return;
-  const strategy = resolveStrategy(node, prop);
-  const { trim, number, lazy } = modifiers;
-  const isFiles = prop === "files";
-  const readModel = () => shared.isFunction(getter) ? getter() : getter;
-  const transform = (v) => isFiles ? v : castValue(v, trim, number);
-  const eventName = lazy || strategy.forceChangeEvent ? "change" : strategy.event;
+  const { event, read, write, forceChange, ime } = resolve(node, prop);
+  const trim = modifiers.trim === true;
+  const toNum = modifiers.number === true;
+  const lazy = modifiers.lazy === true;
+  const shouldCast = (trim || toNum) && prop !== "files";
+  const getModel = shared.isFunction(getter) ? getter : () => getter;
+  const cast = shouldCast ? (v) => applyModifiers(v, trim, toNum) : (v) => v;
   let composing = false;
-  const syncFromDom = () => {
+  const eventName = lazy || forceChange ? "change" : event;
+  const syncToModel = () => {
     if (composing) return;
-    const raw = strategy.read(node);
+    const raw = read(node);
     if (raw === void 0) return;
-    if (isFiles) {
-      setter(raw);
-      return;
-    }
-    const next2 = transform(raw);
-    if (!Object.is(readModel(), next2)) {
-      setter(next2);
-    }
+    const next2 = cast(raw);
+    if (!Object.is(getModel(), next2)) setter(next2);
   };
-  addEventListener(node, eventName, syncFromDom);
-  if (!lazy && !isFiles && (trim || number) && eventName !== "change") {
-    addEventListener(node, "change", () => {
-      strategy.write(node, transform(strategy.read(node)));
-    });
+  addEventListener(node, eventName, syncToModel);
+  if (!lazy && shouldCast && eventName !== "change") {
+    addEventListener(node, "change", () => write(node, cast(read(node))));
   }
-  if (strategy.needsComposition && !lazy) {
+  if (ime && !lazy) {
     addEventListener(node, "compositionstart", () => {
       composing = true;
     });
     addEventListener(node, "compositionend", () => {
       if (!composing) return;
       composing = false;
-      syncFromDom();
+      syncToModel();
     });
   }
   const runner = signals.effect(() => {
-    const value = readModel();
-    if (strategy.needsComposition && !lazy && isFocused(node)) {
+    const value = getModel();
+    if (ime && !lazy && isFocused(node)) {
       if (composing) return;
-      const current = transform(strategy.read(node));
-      if (Object.is(current, value)) return;
+      if (Object.is(cast(read(node)), value)) return;
     }
-    strategy.write(node, value);
+    write(node, value);
   });
   if (getActiveScope()) {
     onCleanup(() => runner.stop());
@@ -1451,10 +1451,10 @@ function Portal(props) {
   placeholder[PORTAL_COMPONENT] = true;
   const { children } = props;
   if (children == null) return placeholder;
-  const ownerScope = getActiveScope();
+  const parentScope = getActiveScope();
   let innerScope = null;
   const mountAt = (parent, before) => {
-    innerScope = createScope(ownerScope);
+    innerScope = createScope(parentScope);
     runWithScope(innerScope, () => {
       insert(parent, () => children, before);
     });