essor 0.0.6-beta.10 → 0.0.6-beta.13

package/dist/essor.d.ts

@@ -1,6 +1,6 @@
 import * as csstype from 'csstype';
 
-declare const __essor_version = "0.0.6-beta.9";
+declare const __essor_version = "0.0.6-beta.12";
 
 type EffectFn = () => void;
 declare class Signal$1<T> {
@@ -28,6 +28,7 @@ declare class Computed<T> {
 declare function useComputed<T>(fn: () => T): Computed<T>;
 declare function isComputed<T>(value: any): value is Computed<T>;
 declare function useEffect(fn: EffectFn): () => void;
+type ExcludeType = ((key: string | symbol) => boolean) | (string | symbol)[];
 type SignalObject<T> = {
     [K in keyof T]: Signal$1<T[K]> | T[K];
 };
@@ -38,7 +39,7 @@ type SignalObject<T> = {
  * @param {(key: string) => boolean | string[]} exclude - A function that determines which keys to exclude from the SignalObject.
  * @return {SignalObject<T>} The created SignalObject.
  */
-declare function signalObject<T extends object>(initialValues: T, exclude?: ((key: string) => boolean) | string[]): SignalObject<T>;
+declare function signalObject<T extends object>(initialValues: T, exclude?: ExcludeType): SignalObject<T>;
 /**
  * Returns the current value of a signal, signal object, or plain object, excluding specified keys.
  *
@@ -46,10 +47,10 @@ declare function signalObject<T extends object>(initialValues: T, exclude?: ((ke
  * @param {(key: string) => boolean | string[]} [exclude] - A function that determines which keys to exclude from the unwrapped object.
  * @return {T} The unwrapped value of the signal, signal object, or plain object.
  */
-declare function unSignal<T>(signal: SignalObject<T> | T | Signal$1<T>, exclude?: ((key: string) => boolean) | string[]): T;
+declare function unSignal<T>(signal: SignalObject<T> | T | Signal$1<T>, exclude?: ExcludeType): T;
 declare function isReactive(obj: any): any;
 declare function unReactive(obj: any): any;
-declare function useReactive<T extends object>(initialValue: T): T;
+declare function useReactive<T extends object>(initialValue: T, exclude?: ExcludeType): T;
 
 type WatchSource<T = any> = Signal$1<T> | Computed<T> | (() => T);
 type WatchCallback<V = any, OV = any> = (value: V, oldValue: OV) => any;
@@ -2353,7 +2354,7 @@ declare class ComponentNode$1 implements JSX.Element {
     patchProps(props: Record<string, any>): void;
 }
 
-declare function h(template: EssorComponent | HTMLTemplateElement, props: Record<string, any>, key?: string): JSX.Element;
+declare function h<K extends keyof HTMLElementTagNameMap>(_template: EssorComponent | HTMLTemplateElement | K, props: Record<string, any>, key?: string): JSX.Element;
 declare function isJsxElement(node: unknown): node is EssorNode;
 declare function template(html: string): HTMLTemplateElement;
 declare function Fragment(props: {

package/dist/essor.dev.cjs.js

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 
 // src/version.ts
-var __essor_version = "0.0.6-beta.9";
+var __essor_version = "0.0.6-beta.12";
 
 // ../shared/dist/essor-shared.js
 var isObject = (val) => val !== null && typeof val === "object";
@@ -37,9 +37,7 @@ var isPrimitive = (val) => ["string", "number", "boolean", "symbol", "undefined"
 function coerceArray(data) {
   return Array.isArray(data) ? data.flat() : [data];
 }
-function hasChanged(value, oldValue) {
-  return !Object.is(value, oldValue);
-}
+var hasChanged = (value, oldValue) => value !== oldValue && (value === value || oldValue === oldValue);
 var noop = Function.prototype;
 function startsWith(str, searchString) {
   return str.indexOf(searchString) === 0;
@@ -212,7 +210,7 @@ var Signal = class {
     return this._value;
   }
   set value(newValue) {
-    if (this._value !== newValue) {
+    if (hasChanged(newValue, this._value)) {
       this._value = newValue;
       trigger(this, "value");
     }
@@ -247,7 +245,7 @@ var Computed = class {
   }
   run() {
     const newValue = this.fn();
-    if (newValue !== this._value) {
+    if (hasChanged(newValue, this._value)) {
       this._value = newValue;
       this._deps.forEach((effect) => effect());
     }
@@ -280,12 +278,12 @@ function useEffect(fn) {
     activeEffect = null;
   };
 }
-function shouldExclude(key, exclude) {
+function isExclude(key, exclude) {
   return Array.isArray(exclude) ? exclude.includes(key) : isFunction(exclude) ? exclude(key) : false;
 }
 function signalObject(initialValues, exclude) {
   const signals = Object.entries(initialValues).reduce((acc, [key, value]) => {
-    acc[key] = shouldExclude(key, exclude) || isSignal(value) ? value : useSignal(value);
+    acc[key] = isExclude(key, exclude) || isSignal(value) ? value : useSignal(value);
     return acc;
   }, {});
   return signals;
@@ -300,7 +298,7 @@ function unSignal(signal, exclude) {
   }
   if (isObject(signal)) {
     return Object.entries(signal).reduce((acc, [key, value]) => {
-      if (shouldExclude(key, exclude)) {
+      if (isExclude(key, exclude)) {
         acc[key] = value;
       } else {
         acc[key] = isSignal(value) ? value.peek() : value;
@@ -321,7 +319,7 @@ function unReactive(obj) {
   return Object.assign({}, obj);
 }
 var reactiveMap = /* @__PURE__ */ new WeakMap();
-function useReactive(initialValue) {
+function useReactive(initialValue, exclude) {
   if (!isObject(initialValue)) {
     return initialValue;
   }
@@ -336,6 +334,9 @@ function useReactive(initialValue) {
       if (key === REACTIVE_MARKER) return true;
       const getValue = Reflect.get(target, key, receiver);
       const value = isSignal(getValue) ? getValue.value : getValue;
+      if (isExclude(key, exclude)) {
+        return value;
+      }
       track(target, key);
       if (isObject(value)) {
         return useReactive(value);
@@ -343,6 +344,10 @@ function useReactive(initialValue) {
       return value;
     },
     set(target, key, value, receiver) {
+      if (isExclude(key, exclude)) {
+        Reflect.set(target, key, value, receiver);
+        return true;
+      }
       let oldValue = Reflect.get(target, key, receiver);
       if (isSignal(oldValue)) {
         oldValue = oldValue.value;
@@ -569,7 +574,7 @@ var _ComponentNode = class _ComponentNode {
       return (_b = (_a = this.rootNode) == null ? void 0 : _a.mount(parent, before)) != null ? _b : [];
     }
     _ComponentNode.ref = this;
-    this.rootNode = this.template(useReactive(this.proxyProps));
+    this.rootNode = this.template(useReactive(this.proxyProps, ["children"]));
     _ComponentNode.ref = null;
     this.mounted = true;
     const mountedNode = (_d = (_c = this.rootNode) == null ? void 0 : _c.mount(parent, before)) != null ? _d : [];
@@ -609,7 +614,7 @@ var _ComponentNode = class _ComponentNode {
         const newValue = (_e = (_d = this.proxyProps)[key]) != null ? _e : _d[key] = useSignal(prop);
         const track2 = this.getNodeTrack(key);
         track2.cleanup = useEffect(() => {
-          newValue.value = prop;
+          newValue.value = isFunction(prop) ? prop() : prop;
         });
       }
     }
@@ -621,8 +626,14 @@ _ComponentNode.context = {};
 var ComponentNode = _ComponentNode;
 
 // src/template/template.ts
-function h(template2, props, key) {
-  return isFunction(template2) ? new ComponentNode(template2, props, key) : new TemplateNode(template2, props, key);
+function h(_template, props, key) {
+  if (isHtmlTagName(_template)) {
+    _template = template(convertToHtmlTag(_template));
+    props = {
+      1: props
+    };
+  }
+  return isFunction(_template) ? new ComponentNode(_template, props, key) : new TemplateNode(_template, props, key);
 }
 function isJsxElement(node) {
   return node instanceof ComponentNode || node instanceof TemplateNode;
@@ -753,6 +764,173 @@ function addEventListener(node, eventName, handler) {
   node.addEventListener(eventName, handler);
   return () => node.removeEventListener(eventName, handler);
 }
+var selfClosingTags = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+function convertToHtmlTag(tag) {
+  if (selfClosingTags.includes(tag)) {
+    return `<${tag}/>`;
+  } else {
+    return `<${tag}></${tag}>`;
+  }
+}
+var htmlTags = [
+  "a",
+  "abbr",
+  "acronym",
+  "address",
+  "applet",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "basefont",
+  "bdi",
+  "bdo",
+  "bgsound",
+  "big",
+  "blink",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "center",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "command",
+  "content",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "dir",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "font",
+  "footer",
+  "form",
+  "frame",
+  "frameset",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "image",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "keygen",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "listing",
+  "main",
+  "map",
+  "mark",
+  "marquee",
+  "menu",
+  "menuitem",
+  "meta",
+  "meter",
+  "nav",
+  "nobr",
+  "noframes",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "plaintext",
+  "pre",
+  "progress",
+  "q",
+  "rb",
+  "rp",
+  "rt",
+  "rtc",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "shadow",
+  "small",
+  "source",
+  "spacer",
+  "span",
+  "strike",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "tt",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr",
+  "xmp"
+];
+function isHtmlTagName(str) {
+  return htmlTags.includes(str);
+}
 
 // src/template/patch.ts
 function patchChildren(parent, childrenMap, nextChildren, before) {
@@ -977,11 +1155,8 @@ var TemplateNode = class _TemplateNode {
           const track2 = this.getNodeTrack(trackKey, true, isRoot);
           patchChild(track2, node, props.children, null);
         } else {
-          props.children.forEach((item, index) => {
+          props.children.filter(Boolean).forEach((item, index) => {
             var _a;
-            if (!item) {
-              return;
-            }
             const [child, path] = isArray(item) ? item : [item, null];
             const before = isNil(path) ? null : (_a = this.treeMap.get(path)) != null ? _a : null;
             const trackKey = `${key}:${attr}:${index}`;
@@ -1004,10 +1179,7 @@ var TemplateNode = class _TemplateNode {
         const track2 = this.getNodeTrack(`${key}:${attr}`);
         const val = props[attr];
         const triggerValue = isSignal(val) ? val : useSignal(val);
-        const cleanup = useEffect(() => {
-          triggerValue.value = isSignal(val) ? val.value : val;
-          patchAttribute(track2, node, attr, triggerValue.value);
-        });
+        patchAttribute(track2, node, attr, triggerValue.value);
         let cleanupBind;
         const updateKey = `update${capitalizeFirstLetter(attr)}`;
         if (props[updateKey]) {
@@ -1016,7 +1188,6 @@ var TemplateNode = class _TemplateNode {
           });
         }
         track2.cleanup = () => {
-          cleanup && cleanup();
           cleanupBind && cleanupBind();
         };
       }
@@ -1064,7 +1235,7 @@ function onDestroy(cb) {
 }
 function throwIfOutsideComponent(hook) {
   if (!ComponentNode.ref) {
-    throw new Error(
+    console.error(
       `"${hook}" can only be called within the component function body
       and cannot be used in asynchronous or deferred calls.`
     );