essor 0.0.6-beta.8 → 0.0.6

package/dist/essor.dev.esm.js

@@ -15,9 +15,15 @@ var __spreadValues = (a, b) => {
   return a;
 };
 
+// src/version.ts
+var __essor_version = "0.0.6-beta.16";
+
 // ../shared/dist/essor-shared.js
 var isObject = (val) => val !== null && typeof val === "object";
 var isArray = Array.isArray;
+function isString(val) {
+  return typeof val === "string";
+}
 function isNull(val) {
   return val === null;
 }
@@ -29,14 +35,18 @@ function isFalsy(x) {
   return x === false || x === null || x === void 0 || x === "";
 }
 var isPrimitive = (val) => ["string", "number", "boolean", "symbol", "undefined"].includes(typeof val) || isNull(val);
+var isHtmlElement = (val) => {
+  return val instanceof HTMLElement || val instanceof SVGElement;
+};
 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) {
+  if (!isString(str)) {
+    return false;
+  }
   return str.indexOf(searchString) === 0;
 }
 function deepClone(obj, hash = /* @__PURE__ */ new WeakMap()) {
@@ -140,11 +150,17 @@ function deepEqual(a, b, seen = /* @__PURE__ */ new WeakMap()) {
   }
   return true;
 }
+function isExclude(key, exclude) {
+  return Array.isArray(exclude) ? exclude.includes(key) : isFunction(exclude) ? exclude(key) : false;
+}
 var kebabCase = (string) => {
   return string.replaceAll(/[A-Z]+/g, (match, offset) => {
     return `${offset > 0 ? "-" : ""}${match.toLocaleLowerCase()}`;
   });
 };
+var capitalizeFirstLetter = (inputString) => {
+  return inputString.charAt(0).toUpperCase() + inputString.slice(1);
+};
 
 // src/signal/signal.ts
 var activeEffect = null;
@@ -152,6 +168,7 @@ var activeComputed = null;
 var computedSet = /* @__PURE__ */ new Set();
 var targetMap = /* @__PURE__ */ new WeakMap();
 var EffectDeps = /* @__PURE__ */ new Set();
+var arrayMethods = ["push", "pop", "shift", "unshift", "splice", "sort", "reverse"];
 function track(target, key) {
   let depsMap = targetMap.get(target);
   if (!depsMap) {
@@ -163,8 +180,7 @@ function track(target, key) {
     dep = /* @__PURE__ */ new Set();
     depsMap.set(key, dep);
   }
-  if (activeEffect)
-    dep.add(activeEffect);
+  if (activeEffect) dep.add(activeEffect);
   if (activeComputed) {
     computedSet.add(activeComputed);
   }
@@ -184,14 +200,18 @@ function trigger(target, key) {
 }
 var Signal = class {
   constructor(value) {
+    // @ts-ignore
+    this.__activeEffect = null;
     this._value = value;
   }
   valueOf() {
     track(this, "value");
+    this.__triggerObject();
     return this._value;
   }
   toString() {
     track(this, "value");
+    this.__triggerObject();
     return String(this._value);
   }
   toJSON() {
@@ -199,11 +219,28 @@ var Signal = class {
   }
   get value() {
     track(this, "value");
+    this.__triggerObject();
     return this._value;
   }
+  // if the value is not a primitive or an HTML element, create a reactive proxy
+  __triggerObject() {
+    if (activeEffect) {
+      this.__activeEffect = activeEffect;
+    }
+    this._reactive = isPrimitive(this._value) || isHtmlElement(this._value) ? this._value : useReactive(this._value);
+  }
   set value(newValue) {
-    if (this._value !== newValue) {
+    if (isSignal(newValue)) {
+      console.warn("Signal cannot be set to another signal, use .peek() instead");
+      newValue = newValue.peek();
+    }
+    if (hasChanged(newValue, this._value)) {
       this._value = newValue;
+      if (!isPrimitive(this._value) && !isHtmlElement(this._value) && !activeEffect) {
+        activeEffect = this.__activeEffect;
+        this.__triggerObject();
+        activeEffect = null;
+      }
       trigger(this, "value");
     }
   }
@@ -237,7 +274,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());
     }
@@ -270,30 +307,32 @@ function useEffect(fn) {
     activeEffect = null;
   };
 }
-function shouldExclude(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;
 }
 function unSignal(signal, exclude) {
-  if (!signal)
-    return {};
+  if (!signal) return {};
   if (isSignal(signal)) {
     return signal.peek();
   }
-  return Object.entries(signal).reduce((acc, [key, value]) => {
-    if (shouldExclude(key, exclude)) {
-      acc[key] = value;
-    } else {
-      acc[key] = isSignal(value) ? value.peek() : value;
-    }
-    return acc;
-  }, {});
+  if (isArray(signal)) {
+    return signal.map((value) => unSignal(value, exclude));
+  }
+  if (isObject(signal)) {
+    return Object.entries(signal).reduce((acc, [key, value]) => {
+      if (isExclude(key, exclude)) {
+        acc[key] = value;
+      } else {
+        acc[key] = isSignal(value) ? value.peek() : value;
+      }
+      return acc;
+    }, {});
+  }
+  return signal;
 }
 var REACTIVE_MARKER = Symbol("useReactive");
 function isReactive(obj) {
@@ -306,7 +345,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;
   }
@@ -316,11 +355,32 @@ function useReactive(initialValue) {
   if (reactiveMap.has(initialValue)) {
     return reactiveMap.get(initialValue);
   }
+  if (Array.isArray(initialValue)) {
+    arrayMethods.forEach((method) => {
+      const originalMethod = initialValue[method];
+      track(initialValue, "length");
+      Object.defineProperties(initialValue, {
+        [method]: {
+          value(...args) {
+            const result = originalMethod.apply(this, args);
+            trigger(initialValue, "length");
+            return result;
+          },
+          enumerable: false,
+          configurable: true,
+          writable: true
+        }
+      });
+    });
+  }
   const handler = {
     get(target, key, receiver) {
-      if (key === REACTIVE_MARKER)
-        return true;
-      const value = Reflect.get(target, key, receiver);
+      if (key === REACTIVE_MARKER || startsWith(key, "_")) 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);
@@ -328,6 +388,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;
@@ -357,7 +421,7 @@ function useReactive(initialValue) {
 
 // src/warning.ts
 function warn(msg, ...args) {
-  console.warn.apply(console, [`[Essor Router warn]: ${msg}`].concat(args));
+  console.warn.apply(console, [`[Essor warn]: ${msg}`].concat(args));
 }
 
 // src/signal/watch.ts
@@ -373,12 +437,9 @@ function doWatch(source, cb, options) {
     getter = () => __spreadValues({}, source);
   } else if (isArray(source)) {
     getter = () => source.map((s) => {
-      if (isSignal(s) || isComputed(s))
-        return s.value;
-      if (isReactive(s))
-        return __spreadValues({}, s);
-      if (isFunction(s))
-        return s();
+      if (isSignal(s) || isComputed(s)) return s.value;
+      if (isReactive(s)) return __spreadValues({}, s);
+      if (isFunction(s)) return s();
       return warn("Invalid source", s);
     });
   } else if (isFunction(source)) {
@@ -406,8 +467,7 @@ function doWatch(source, cb, options) {
   return stop;
 }
 function traverse(value, seen = /* @__PURE__ */ new Set()) {
-  if (!isObject(value) || seen.has(value))
-    return value;
+  if (!isObject(value) || seen.has(value)) return value;
   seen.add(value);
   if (isArray(value)) {
     value.forEach((item) => traverse(item, seen));
@@ -503,7 +563,7 @@ var _ComponentNode = class _ComponentNode {
     this.trackMap = /* @__PURE__ */ new Map();
     this.proxyProps = signalObject(
       props,
-      (key2) => startsWith(key2, "on") || startsWith(key2, "update:")
+      (key2) => startsWith(key2, "on") || startsWith(key2, "update")
     );
   }
   addEventListener() {
@@ -558,7 +618,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(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 : [];
@@ -592,13 +652,13 @@ var _ComponentNode = class _ComponentNode {
         } else if (isFunction(prop)) {
           props[key]((_c = this.rootNode) == null ? void 0 : _c.nodes[0]);
         }
-      } else if (startsWith(key, "update:")) {
+      } else if (startsWith(key, "update")) {
         props[key] = isSignal(prop) ? prop.value : prop;
       } else {
         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;
         });
       }
     }
@@ -610,8 +670,17 @@ _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 (isString(_template)) {
+    if (isHtmlTagName(_template)) {
+      _template = convertToHtmlTag(_template);
+      props = {
+        1: props
+      };
+    }
+    _template = template(_template);
+  }
+  return isFunction(_template) ? new ComponentNode(_template, props, key) : new TemplateNode(_template, props, key);
 }
 function isJsxElement(node) {
   return node instanceof ComponentNode || node instanceof TemplateNode;
@@ -742,6 +811,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"
+];
+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);
+}
+function convertToHtmlTag(tag) {
+  if (selfClosingTags.includes(tag)) {
+    return `<${tag}/>`;
+  } else {
+    return `<${tag}></${tag}>`;
+  }
+}
 
 // src/template/patch.ts
 function patchChildren(parent, childrenMap, nextChildren, before) {
@@ -966,11 +1202,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}`;
@@ -989,16 +1222,17 @@ var TemplateNode = class _TemplateNode {
         const track2 = this.getNodeTrack(`${key}:${attr}`);
         const listener = props[attr];
         track2.cleanup = addEventListener(node, eventName, listener);
-      } else if (!startsWith(attr, "update:")) {
+      } else if (!startsWith(attr, "update")) {
         const track2 = this.getNodeTrack(`${key}:${attr}`);
         const val = props[attr];
         const triggerValue = isSignal(val) ? val : useSignal(val);
+        patchAttribute(track2, node, attr, triggerValue.value);
         const cleanup = useEffect(() => {
           triggerValue.value = isSignal(val) ? val.value : val;
           patchAttribute(track2, node, attr, triggerValue.value);
         });
         let cleanupBind;
-        const updateKey = `update:${attr}`;
+        const updateKey = `update${capitalizeFirstLetter(attr)}`;
         if (props[updateKey]) {
           cleanupBind = binNode(node, (value) => {
             props[updateKey](value);
@@ -1053,7 +1287,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.`
     );
@@ -1089,43 +1323,39 @@ function useRef() {
   });
 }
 
-// src/version.ts
-var __essor_version = "0.0.6-beta.7";
-
 // src/server/index.ts
-function ssrtmpl(templates = []) {
-  return templates.reduce((acc, template2, index) => {
-    acc[index + 1] = { template: template2 };
-    return acc;
-  }, {});
-}
 function jsonToAttrs(json) {
-  return Object.entries(json).map(([key, value]) => `${key}=${JSON.stringify(value)}`).join(" ");
+  return Object.entries(json).map(([key, value]) => `${key}=${JSON.stringify(escape(String(value)))}`).join(" ");
 }
-function ssr(template2, props) {
+function renderTemplate(template2, props) {
   if (isFunction(template2)) {
     return template2(props);
   }
+  const templates = Array.isArray(template2) ? template2.reduce((acc, tmpl, index) => {
+    acc[index + 1] = { template: tmpl };
+    return acc;
+  }, {}) : template2;
   const childrenMap = {};
   const newTemplate = {};
-  if (isObject(template2)) {
-    Object.entries(template2).forEach(([key, tmpl]) => {
+  if (isObject(templates)) {
+    for (const [key, tmpl] of Object.entries(templates)) {
       const prop = props[key];
       if (prop) {
-        Object.keys(prop).forEach((propKey) => {
+        for (const propKey in prop) {
           if (startsWith(propKey, "on") && isFunction(prop[propKey])) {
             delete prop[propKey];
           }
-        });
+        }
         if (prop.children) {
-          prop.children.forEach(([child, idx]) => {
-            childrenMap[idx] = [...childrenMap[idx] || [], child];
-          });
+          for (const [child, idx] of prop.children) {
+            if (!childrenMap[idx]) childrenMap[idx] = [];
+            childrenMap[idx].push(child);
+          }
           delete prop.children;
         }
       }
       newTemplate[key] = { template: tmpl.template, prop };
-    });
+    }
   }
   return Object.entries(newTemplate).map(([key, { template: tmpl, prop }]) => {
     let str = tmpl;
@@ -1133,17 +1363,21 @@ function ssr(template2, props) {
       str += ` ${jsonToAttrs(prop)}`;
     }
     if (childrenMap[key]) {
-      str += childrenMap[key].map((child) => ssr(child, prop)).join("");
+      str += childrenMap[key].map((child) => renderTemplate(child, prop)).join("");
     }
     return str;
   }).join("");
 }
 function renderToString(component, props) {
-  return ssr(component, props);
+  return renderTemplate(component, props);
+}
+function ssgRender(component, root, props = {}) {
+  root.innerHTML = renderTemplate(component, props);
 }
-function ssgRender(component, root) {
-  root.innerHTML = "";
-  component.mount(root);
+
+// src/index.ts
+if (globalThis) {
+  globalThis.__essor_version = __essor_version;
 }
 
-export { ComponentNode, Fragment, TemplateNode, __essor_version, createStore, h, isComputed, isJsxElement, isReactive, isSignal, nextTick, onDestroy, onMount, renderToString, signalObject, ssgRender, ssr, ssrtmpl, template, unReactive, unSignal, useComputed, useEffect, useInject, useProvide, useReactive, useRef, useSignal, useWatch };
+export { ComponentNode, Fragment, TemplateNode, __essor_version, createStore, h, isComputed, isJsxElement, isReactive, isSignal, nextTick, onDestroy, onMount, renderTemplate, renderToString, signalObject, ssgRender, template, unReactive, unSignal, useComputed, useEffect, useInject, useProvide, useReactive, useRef, useSignal, useWatch };