essor 0.0.6-beta.2 → 0.0.6-beta.4

package/dist/essor.d.ts

@@ -1,7 +1,7 @@
 import * as csstype from 'csstype';
 
 type EffectFn = () => void;
-declare class Signal<T> {
+declare class Signal$1<T> {
     private _value;
     constructor(value: T);
     valueOf(): T;
@@ -12,8 +12,8 @@ declare class Signal<T> {
     peek(): T;
     update(): void;
 }
-declare function useSignal<T>(value?: T): Signal<T>;
-declare function isSignal<T>(value: any): value is Signal<T>;
+declare function useSignal<T>(value?: T): Signal$1<T>;
+declare function isSignal<T>(value: any): value is Signal$1<T>;
 declare class Computed<T> {
     private readonly fn;
     private _value;
@@ -26,9 +26,27 @@ 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 SignalObject<T> = {
-    [K in keyof T]: Signal<T[K]>;
+    [K in keyof T]: Signal$1<T[K]> | T[K];
 };
-declare function signalObject<T extends Object>(initialValues: T): SignalObject<T>;
+/**
+ * Creates a SignalObject from the given initialValues, excluding specified keys.
+ *
+ * @param {T extends Object} initialValues - The initial values for the SignalObject.
+ * @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>;
+/**
+ * Returns the current value of a signal, signal object, or plain object, excluding specified keys.
+ *
+ * @param {SignalObject<T> | T | Signal<T>} signal - The signal, signal object, or plain object to unwrap.
+ * @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 isReactive(obj: any): any;
+declare function unReactive(obj: any): any;
+declare function reactive(initialValue: any): any;
 
 type PatchPayload = Record<string, any>;
 type Callback = (value: any) => void;
@@ -40,13 +58,13 @@ interface StoreActions {
     reset$: () => void;
 }
 type Getters<S> = {
-    [K in keyof S]: S[K] extends (...args: any[]) => any ? Signal<ReturnType<S[K]>> : Signal<S[K]>;
+    [K in keyof S]: S[K] extends (...args: any[]) => any ? ReturnType<S[K]> : S[K];
 };
 declare function createStore<S, G, A>(options: {
     state: S;
     getters?: G;
     actions?: A;
-} & ThisType<SignalObject<S> & Getters<G> & A>): () => S & Getters<G> & A & StoreActions & {
+} & ThisType<S & Getters<G> & A>): () => S & Getters<G> & A & StoreActions & {
     state: S;
 };
 
@@ -226,7 +244,7 @@ declare global {
       ref?: unknown | ((e: unknown) => void);
     }
     interface CustomAttributes<T> {
-      ref?: T | ((el: T) => void);
+      ref?: Signal<T> | ((el: T) => void);
       classList?: {
         [k: string]: boolean | undefined;
       };
@@ -2287,13 +2305,13 @@ declare class TemplateNode implements JSX.Element {
 type Hook = 'mounted' | 'destroy';
 declare class ComponentNode$1 implements JSX.Element {
     template: EssorComponent;
-    props: Record<string, unknown>;
+    props: Record<string, any>;
     key?: string | undefined;
-    constructor(template: EssorComponent, props: Record<string, unknown>, key?: string | undefined);
+    constructor(template: EssorComponent, props: Record<string, any>, key?: string | undefined);
     addEventListener(): void;
     removeEventListener(): void;
     static ref: ComponentNode$1 | null;
-    static context: Record<symbol, Signal<any>>;
+    static context: Record<symbol, Signal$1<any>>;
     id?: string;
     private proxyProps;
     context: Record<symbol | string | number, any>;
@@ -2311,7 +2329,7 @@ declare class ComponentNode$1 implements JSX.Element {
     unmount(): void;
     mount(parent: Node, before?: Node | null): Node[];
     private getNodeTrack;
-    patchProps(props: Record<string, unknown>): void;
+    patchProps(props: Record<string, any>): void;
 }
 
 declare function h(template: EssorComponent | HTMLTemplateElement, props: Record<string, any>, key?: string): JSX.Element;
@@ -2340,7 +2358,7 @@ declare function useRef<T>(): {
     current: T | null;
 };
 
-declare const __essor_version = "0.0.6-beta.1";
+declare const __essor_version = "0.0.6-beta.3";
 
 interface TemplateMap {
     [key: number]: {
@@ -2356,4 +2374,4 @@ declare function hydrate(component: {
     mount: (root: HTMLElement) => void;
 }, root: HTMLElement): void;
 
-export { ComponentNode$1 as ComponentNode, Computed, type EssorComponent, type EssorNode, Fragment, type Hook$1 as Hook, type InjectionKey, type NodeTrack, type Output, Signal, type StoreActions, TemplateNode, __essor_version, createStore, h, hydrate, isComputed, isJsxElement, isSignal, nextTick, onDestroy, onMount, renderToString, signalObject, ssr, ssrtmpl, template, useComputed, useEffect, useInject, useProvide, useRef, useSignal };
+export { ComponentNode$1 as ComponentNode, Computed, type EssorComponent, type EssorNode, Fragment, type Hook$1 as Hook, type InjectionKey, type NodeTrack, type Output, Signal$1 as Signal, type StoreActions, TemplateNode, __essor_version, createStore, h, hydrate, isComputed, isJsxElement, isReactive, isSignal, nextTick, onDestroy, onMount, reactive, renderToString, signalObject, ssr, ssrtmpl, template, unReactive, unSignal, useComputed, useEffect, useInject, useProvide, useRef, useSignal };

package/dist/essor.dev.cjs.js

@@ -16,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var isFunction = (val) => typeof val === "function";
 
 // src/signal/signal.ts
 var activeEffect = null;
@@ -137,24 +138,67 @@ function useEffect(fn) {
     activeEffect = null;
   };
 }
-function signalObject(initialValues) {
+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] = isSignal(value) ? value : useSignal(value);
+    acc[key] = shouldExclude(key, exclude) || isSignal(value) ? value : useSignal(value);
     return acc;
   }, {});
   return signals;
 }
-function signalToObject(signal) {
+function unSignal(signal, exclude) {
   if (!signal)
     return {};
   if (isSignal(signal)) {
     return signal.peek();
   }
   return Object.entries(signal).reduce((acc, [key, value]) => {
-    acc[key] = isSignal(value) ? value.peek() : value;
+    if (shouldExclude(key, exclude)) {
+      acc[key] = value;
+    } else {
+      acc[key] = isSignal(value) ? value.peek() : value;
+    }
     return acc;
   }, {});
 }
+var REACTIVE_MARKER = Symbol("reactive");
+function isReactive(obj) {
+  return obj && obj[REACTIVE_MARKER] === true;
+}
+function unReactive(obj) {
+  if (!isReactive(obj)) {
+    return obj;
+  }
+  const copy = Object.assign({}, obj);
+  delete copy[REACTIVE_MARKER];
+  return copy;
+}
+function reactive(initialValue) {
+  if (isReactive(initialValue)) {
+    return initialValue;
+  }
+  const signalObj = signalObject(initialValue);
+  const handler = {
+    get(target, key, receiver) {
+      track(target, key);
+      const value = Reflect.get(target, key, receiver);
+      return isSignal(value) ? value.value : value;
+    },
+    set(target, key, value, receiver) {
+      const oldValue = Reflect.get(target, key, receiver);
+      if (oldValue !== value) {
+        Reflect.set(target, key, useSignal(value), receiver);
+        trigger(target, key);
+      }
+      return true;
+    }
+  };
+  const reactiveProxy = new Proxy(signalObj, handler);
+  reactiveProxy[REACTIVE_MARKER] = true;
+  return reactiveProxy;
+}
 
 // src/signal/store.ts
 var _id = 0;
@@ -162,14 +206,14 @@ var StoreMap = /* @__PURE__ */ new Map();
 function createOptionsStore(options) {
   const { state, getters, actions } = options;
   const initState = __spreadValues({}, state != null ? state : {});
-  const signalState = signalObject(state != null ? state : {});
+  const reactiveState = reactive(state != null ? state : {});
   const subscriptions = [];
   const actionCallbacks = [];
   const default_actions = {
     patch$(payload) {
-      Object.assign(signalState, signalObject(payload));
-      subscriptions.forEach((callback) => callback(signalToObject(signalState)));
-      actionCallbacks.forEach((callback) => callback(signalToObject(signalState)));
+      Object.assign(reactiveState, payload);
+      subscriptions.forEach((callback) => callback(reactiveState));
+      actionCallbacks.forEach((callback) => callback(reactiveState));
     },
     subscribe$(callback) {
       subscriptions.push(callback);
@@ -184,42 +228,44 @@ function createOptionsStore(options) {
       actionCallbacks.push(callback);
     },
     reset$() {
-      default_actions.patch$(initState);
+      Object.assign(reactiveState, initState);
     }
   };
-  const states = {
-    _id: `store_${_id}`
-  };
+  const gettersStates = {};
+  const actionStates = {};
   for (const key in getters) {
     const getter = getters[key];
     if (getter) {
-      states[key] = useComputed(() => {
-        return getter.call(signalState);
+      gettersStates[key] = useComputed(() => {
+        return getter.call(reactiveState, reactiveState);
       });
     }
   }
   for (const key in actions) {
     const action = actions[key];
     if (action) {
-      states[key] = action.bind(signalState);
+      actionStates[key] = action.bind(reactiveState);
     }
   }
-  StoreMap.set(_id, useSignal);
+  StoreMap.set(_id, reactiveState);
   ++_id;
   return new Proxy(
     {},
     {
       get(_, key) {
         if (key === "state") {
-          return signalToObject(signalState);
+          return reactiveState;
+        }
+        if (key in gettersStates) {
+          return gettersStates[key].value;
         }
-        if (key in states) {
-          return states[key];
+        if (key in actionStates) {
+          return actionStates[key];
         }
         if (key in default_actions) {
           return default_actions[key];
         }
-        return signalState[key].value;
+        return reactiveState[key];
       }
     }
   );
@@ -237,13 +283,16 @@ function createStore(options) {
 function coerceArray(data) {
   return Array.isArray(data) ? data.flat() : [data];
 }
-var isObject = (val) => val !== null && typeof val === "object";
-var isArray = Array.isArray;
-function isNil(x) {
+function startsWith(str, searchString) {
+  return str.indexOf(searchString) === 0;
+}
+var isObject2 = (val) => val !== null && typeof val === "object";
+var isArray2 = Array.isArray;
+function isNil2(x) {
   return x === null || x === void 0;
 }
-var isFunction = (val) => typeof val === "function";
-function isFalsy(x) {
+var isFunction2 = (val) => typeof val === "function";
+function isFalsy2(x) {
   return x === false || x === null || x === void 0 || x === "";
 }
 var kebabCase = (string) => {
@@ -268,7 +317,10 @@ var _ComponentNode = class _ComponentNode {
       destroy: /* @__PURE__ */ new Set()
     };
     this.trackMap = /* @__PURE__ */ new Map();
-    this.proxyProps = signalObject(props);
+    this.proxyProps = signalObject(
+      props,
+      (key2) => startsWith(key2, "on") || startsWith(key2, "update:")
+    );
   }
   addEventListener() {
   }
@@ -315,7 +367,7 @@ var _ComponentNode = class _ComponentNode {
   }
   mount(parent, before) {
     var _a, _b, _c, _d;
-    if (!isFunction(this.template)) {
+    if (!isFunction2(this.template)) {
       throw new Error("Template must be a function");
     }
     if (this.isConnected) {
@@ -345,19 +397,19 @@ var _ComponentNode = class _ComponentNode {
   patchProps(props) {
     var _a, _b, _c, _d, _e;
     for (const [key, prop] of Object.entries(props)) {
-      if (key.indexOf("on") === 0 && ((_a = this.rootNode) == null ? void 0 : _a.nodes)) {
+      if (startsWith(key, "on") && ((_a = this.rootNode) == null ? void 0 : _a.nodes)) {
         const event = key.slice(2).toLowerCase();
         const listener = prop;
         const cleanup = addEventListener(this.rootNode.nodes[0], event, listener);
         this.emitter.add(cleanup);
-      } else if (key.indexOf("bind:") === 0) {
-        this.proxyProps[key] = useSignal(prop);
       } else if (key === "ref") {
         if (isSignal(prop)) {
           props[key].value = (_b = this.rootNode) == null ? void 0 : _b.nodes[0];
-        } else {
-          props[key] = (_c = this.rootNode) == null ? void 0 : _c.nodes[0];
+        } else if (isFunction2(prop)) {
+          props[key]((_c = this.rootNode) == null ? void 0 : _c.nodes[0]);
         }
+      } 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);
@@ -375,7 +427,7 @@ 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);
+  return isFunction2(template2) ? new ComponentNode(template2, props, key) : new TemplateNode(template2, props, key);
 }
 function isJsxElement(node) {
   return node instanceof ComponentNode || node instanceof TemplateNode;
@@ -394,7 +446,7 @@ function coerceNode(data) {
   if (isJsxElement(data) || data instanceof Node) {
     return data;
   }
-  const text = isFalsy(data) ? "" : String(data);
+  const text = isFalsy2(data) ? "" : String(data);
   return document.createTextNode(text);
 }
 function insertChild(parent, child, before = null) {
@@ -443,7 +495,7 @@ function setAttribute(element, attr, value) {
     }
     return;
   }
-  if (isFalsy(value)) {
+  if (isFalsy2(value)) {
     element.removeAttribute(attr);
   } else if (value === true) {
     element.setAttribute(attr, "");
@@ -725,7 +777,7 @@ var TemplateNode = class _TemplateNode {
   patchNode(key, node, props, isRoot) {
     for (const attr in props) {
       if (attr === "children" && props.children) {
-        if (!isArray(props.children)) {
+        if (!isArray2(props.children)) {
           const trackKey = `${key}:${attr}:${0}`;
           const track2 = this.getNodeTrack(trackKey, true, isRoot);
           patchChild(track2, node, props.children, null);
@@ -735,8 +787,8 @@ var TemplateNode = class _TemplateNode {
             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 [child, path] = isArray2(item) ? item : [item, null];
+            const before = isNil2(path) ? null : (_a = this.treeMap.get(path)) != null ? _a : null;
             const trackKey = `${key}:${attr}:${index}`;
             const track2 = this.getNodeTrack(trackKey, true, isRoot);
             patchChild(track2, node, child, before);
@@ -745,31 +797,15 @@ var TemplateNode = class _TemplateNode {
       } else if (attr === "ref") {
         if (isSignal(props[attr])) {
           props[attr].value = node;
-        } else {
-          props[attr] = node;
+        } else if (isFunction2(props[attr])) {
+          props[attr](node);
         }
-      } else if (attr.indexOf("on") === 0) {
+      } else if (startsWith(attr, "on")) {
         const eventName = attr.slice(2).toLocaleLowerCase();
         const track2 = this.getNodeTrack(`${key}:${attr}`);
         const listener = props[attr];
         track2.cleanup = addEventListener(node, eventName, listener);
-      } else if (attr.indexOf("bind:") === 0) {
-        const bindKey = attr.slice(5).toLocaleLowerCase();
-        const val = props[attr];
-        const track2 = this.getNodeTrack(`${key}:${attr}`);
-        const triggerValue = isSignal(val) ? val : useSignal(val);
-        const cleanup = useEffect(() => {
-          triggerValue.value = isSignal(val) ? val.value : val;
-          node[bindKey] = triggerValue.value;
-        });
-        const cleanupBind = binNode(node, (value) => {
-          props[`update:${bindKey}`](value);
-        });
-        track2.cleanup = () => {
-          cleanup == null ? void 0 : cleanup();
-          cleanupBind == null ? void 0 : cleanupBind();
-        };
-      } else if (attr.indexOf("update:") !== 0) {
+      } else if (!startsWith(attr, "update:")) {
         const track2 = this.getNodeTrack(`${key}:${attr}`);
         const val = props[attr];
         const triggerValue = isSignal(val) ? val : useSignal(val);
@@ -777,8 +813,16 @@ var TemplateNode = class _TemplateNode {
           triggerValue.value = isSignal(val) ? val.value : val;
           patchAttribute(track2, node, attr, triggerValue.value);
         });
+        let cleanupBind;
+        const updateKey = `update:${attr}`;
+        if (props[updateKey]) {
+          cleanupBind = binNode(node, (value) => {
+            props[updateKey](value);
+          });
+        }
         track2.cleanup = () => {
-          cleanup == null ? void 0 : cleanup();
+          cleanup && cleanup();
+          cleanupBind && cleanupBind();
         };
       }
     }
@@ -789,7 +833,7 @@ function patchAttribute(track2, node, attr, data) {
   if (!element.setAttribute) {
     return;
   }
-  if (isFunction(data)) {
+  if (isFunction2(data)) {
     track2.cleanup = useEffect(() => {
       setAttribute(element, attr, data());
     });
@@ -798,7 +842,7 @@ function patchAttribute(track2, node, attr, data) {
   }
 }
 function patchChild(track2, parent, child, before) {
-  if (isFunction(child)) {
+  if (isFunction2(child)) {
     track2.cleanup = useEffect(() => {
       const nextNodes = coerceArray(child()).map(coerceNode);
       track2.lastNodes = patchChildren(parent, track2.lastNodes, nextNodes, before);
@@ -862,7 +906,7 @@ function useRef() {
 }
 
 // src/version.ts
-var __essor_version = "0.0.6-beta.1";
+var __essor_version = "0.0.6-beta.3";
 
 // src/server/index.ts
 function ssrtmpl(templates = []) {
@@ -875,17 +919,17 @@ function jsonToAttrs(json) {
   return Object.entries(json).map(([key, value]) => `${key}=${JSON.stringify(value)}`).join(" ");
 }
 function ssr(template2, props) {
-  if (isFunction(template2)) {
+  if (isFunction2(template2)) {
     return template2(props);
   }
   const childrenMap = {};
   const newTemplate = {};
-  if (isObject(template2)) {
+  if (isObject2(template2)) {
     Object.entries(template2).forEach(([key, tmpl]) => {
       const prop = props[key];
       if (prop) {
         Object.keys(prop).forEach((propKey) => {
-          if (propKey.startsWith("on") && isFunction(prop[propKey])) {
+          if (startsWith(propKey, "on") && isFunction2(prop[propKey])) {
             delete prop[propKey];
           }
         });
@@ -927,15 +971,19 @@ exports.h = h;
 exports.hydrate = hydrate;
 exports.isComputed = isComputed;
 exports.isJsxElement = isJsxElement;
+exports.isReactive = isReactive;
 exports.isSignal = isSignal;
 exports.nextTick = nextTick;
 exports.onDestroy = onDestroy;
 exports.onMount = onMount;
+exports.reactive = reactive;
 exports.renderToString = renderToString;
 exports.signalObject = signalObject;
 exports.ssr = ssr;
 exports.ssrtmpl = ssrtmpl;
 exports.template = template;
+exports.unReactive = unReactive;
+exports.unSignal = unSignal;
 exports.useComputed = useComputed;
 exports.useEffect = useEffect;
 exports.useInject = useInject;