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

package/dist/template.dev.esm.js

@@ -1,5 +1,5 @@
-import { getActiveScope, runWithScope, onCleanup, __objRest, createScope, disposeScope, __async } from './chunk-3E4EK64L.dev.esm.js';
-import { normalizeClassName, isObject, warn, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isString, isArray, camelCase, capitalize, isBrowser, error, isPromise, isFunction, isOn, isNull, isUndefined, isNumber, isBoolean, coerceArray, isHTMLElement, isPrimitive, isFalsy } from '@estjs/shared';
+import { getActiveScope, runWithScope, onCleanup, __objRest, createScope, disposeScope, __async } from './chunk-JT6RSDKI.dev.esm.js';
+import { normalizeClassName, isObject, warn, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isString, isArray, camelCase, capitalize, isBrowser, error, isPromise, isFunction, isOn, coerceArray } from '@estjs/shared';
 import { effect, shallowReactive, isSignal, isComputed, signal } from '@estjs/signals';
 
 // src/constants.ts
@@ -59,7 +59,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 = isSpecialBooleanAttr(key) || isBooleanAttr(key);
+  const isBoolean = isSpecialBooleanAttr(key) || isBooleanAttr(key);
   if (prev === next2) {
     return;
   }
@@ -84,7 +84,7 @@ function patchAttr(el, key, prev, next2) {
     }
     return;
   }
-  if (isBoolean2) {
+  if (isBoolean) {
     if (includeBooleanAttr(next2)) {
       el.setAttribute(key, "");
     } else {
@@ -528,22 +528,30 @@ function insertNode(parent, child2, before) {
   }
 }
 function normalizeNode(node) {
-  if (isHTMLElement(node)) {
-    return node;
-  }
-  if (isPrimitive(node)) {
-    return document.createTextNode(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 (isObject(node)) {
+    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 (isNull(raw) || isUndefined(raw) || isString(raw) || isNumber(raw) || isBoolean(raw)) {
+    if (isComponent(raw)) return [raw];
+    const t = typeof raw;
+    if (raw == null || t === "string" || t === "number" || t === "boolean") {
       return [normalizeNode(raw)];
     }
     return coerceArray(raw).map((item) => isFunction(item) ? item() : item).flatMap((i) => i).map(normalizeNode);
@@ -560,8 +568,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();
     }
@@ -762,7 +770,9 @@ var Component = class {
       if (isFunction(result)) {
         result = result(this.reactiveProps);
       }
-      if (isSignal(result) || isComputed(result)) {
+      if (isSignal(result)) {
+        result = result.value;
+      } else if (isComputed(result)) {
         result = result.value;
       }
       return (_a3 = insert(parentNode, result, beforeNode)) != null ? _a3 : [];
@@ -863,11 +873,12 @@ var Component = class {
       return () => value(null);
     }
     if (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;
         }
       };
     }
@@ -1082,154 +1093,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 SELECT_VALUE = {
+var TEXTAREA = {
+  event: "input",
+  ime: true,
+  read: (el) => el.value,
+  write: writeValue
+};
+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 (!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 (!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 = () => 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 = 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 = 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());
@@ -1303,10 +1304,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);
     });