valyrian.js 7.1.2 → 7.2.0

package/dist/signal/index.mjs

@@ -1,114 +1,55 @@
 // lib/signal/index.ts
-import { update } from "valyrian.js";
-function makeUnsubscribe(subscriptions, computed, handler, cleanup) {
-  if (typeof cleanup === "function") {
-    computed.cleanup = cleanup;
+import { current, update, updateVnode, v } from "valyrian.js";
+function Signal(initialValue) {
+  const context = { ...current };
+  if (context.vnode) {
+    if (!context.vnode.signals) {
+      context.vnode.signals = context.oldVnode?.signals || [];
+      context.vnode.calls = -1;
+      context.vnode.subscribers = context.oldVnode?.subscribers || [];
+      context.vnode.initialChildren = [...context.vnode.children];
+    }
+    let signal2 = context.vnode.signals[++context.vnode.calls];
+    if (signal2) {
+      return signal2;
+    }
   }
-  computed.unsubscribe = () => {
-    subscriptions.delete(handler);
-    computed?.cleanup();
+  let value = initialValue;
+  const subscribers = [];
+  const subscribe = (callback) => {
+    if (subscribers.indexOf(callback) === -1) {
+      subscribers.push(callback);
+    }
   };
-}
-function createSubscription(signal, subscriptions, handler) {
-  if (subscriptions.has(handler) === false) {
-    let computed = Signal(() => handler(signal.value));
-    let cleanup = computed();
-    makeUnsubscribe(subscriptions, computed, handler, cleanup);
-    subscriptions.set(handler, computed);
+  function get() {
+    return value;
   }
-  return subscriptions.get(handler);
-}
-var updateTimeout;
-function delayedUpdate() {
-  clearTimeout(updateTimeout);
-  updateTimeout = setTimeout(update);
-}
-function Signal(value) {
-  let subscriptions = /* @__PURE__ */ new Map();
-  let getters = {};
-  let forceUpdate = false;
-  let signal = new Proxy(
-    function(valOrPath, handler) {
-      if (typeof valOrPath === "undefined") {
-        return signal.value;
-      }
-      if (typeof valOrPath === "function") {
-        return createSubscription(signal, subscriptions, valOrPath);
-      }
-      if (typeof valOrPath === "string" && typeof handler !== "undefined") {
-        let parsed = valOrPath.split(".");
-        let result = signal.value;
-        let next;
-        while (parsed.length) {
-          next = parsed.shift();
-          if (parsed.length > 0) {
-            if (typeof result[next] !== "object") {
-              result[next] = {};
-            }
-            result = result[next];
-          } else {
-            result[next] = typeof handler === "function" ? handler(result[next]) : handler;
-          }
-        }
-        forceUpdate = true;
-        signal.value = signal.value;
-        return signal.value;
-      }
-      signal.value = valOrPath;
-      return signal.value;
-    },
-    {
-      set(state, prop, val) {
-        if (prop === "value" || prop === "unsubscribe" || prop === "cleanup") {
-          let old = state[prop];
-          state[prop] = val;
-          if (prop === "value" && (forceUpdate || val !== old)) {
-            forceUpdate = false;
-            for (let [handler, computed] of subscriptions) {
-              computed.cleanup();
-              let cleanup = handler(val);
-              makeUnsubscribe(subscriptions, computed, handler, cleanup);
-            }
-            delayedUpdate();
-          }
-          return true;
-        }
-        return false;
-      },
-      get(state, prop) {
-        if (prop === "value") {
-          return typeof state.value === "function" ? state.value() : state.value;
-        }
-        if (prop === "cleanup" || prop === "unsubscribe" || prop === "getter") {
-          return state[prop];
-        }
-        if (prop in getters) {
-          return getters[prop](state.value);
-        }
-      }
+  get.value = value;
+  get.toJSON = get.valueOf = get;
+  get.toString = () => `${value}`;
+  const set = (newValue) => {
+    value = newValue;
+    get.value = value;
+    for (let i = 0, l = subscribers.length; i < l; i++) {
+      subscribers[i](value);
     }
-  );
-  Object.defineProperties(signal, {
-    value: { value, writable: true, enumerable: true },
-    cleanup: {
-      value() {
-        for (let [handler, computed] of subscriptions) {
-          computed.unsubscribe();
-        }
-      },
-      writable: true,
-      enumerable: true
-    },
-    getter: {
-      value(name, handler) {
-        if (name in getters) {
-          throw new Error("Named computed already exists.");
-        }
-        getters[name] = handler;
-      },
-      enumerable: true
+    if (context.vnode) {
+      let newVnode = v(context.vnode.tag, context.vnode.props, ...context.vnode.initialChildren);
+      newVnode.dom = context.vnode.dom;
+      newVnode.isSVG = context.vnode.isSVG;
+      context.vnode.subscribers.forEach(
+        (subscribers2) => subscribers2.length = 0
+      );
+      context.vnode.subscribers = [];
+      return updateVnode(newVnode, context.vnode);
     }
-  });
+    return update();
+  };
+  let signal = [get, set, subscribe];
+  if (context.vnode) {
+    context.vnode.signals.push(signal);
+    context.vnode.subscribers.push(subscribers);
+  }
   return signal;
 }
 export {

package/lib/index.ts

@@ -574,12 +574,15 @@ function sharedSetAttribute(name: string, value: any, newVnode: VnodeWithDom, ol
   // If the attribute value is a function, add an event listener for the attribute
   // name to the DOM element represented by mainVnode.
   if (typeof value === "function") {
+    // We change the name of the event to lowercase to avoid issues with case sensitivity.
+    // Ex "onClick" and "onclick" are the same event.
+    let lowercaseName = name.toLowerCase();
     // Only add the event listener if it hasn't been added yet.
-    if (name in eventListenerNames === false) {
-      (mainVnode as VnodeWithDom).dom.addEventListener(name.slice(2), eventListener);
-      eventListenerNames[name] = true;
+    if (lowercaseName in eventListenerNames === false) {
+      (mainVnode as VnodeWithDom).dom.addEventListener(lowercaseName.slice(2), eventListener);
+      eventListenerNames[lowercaseName] = true;
     }
-    newVnode.dom[`v-${name}`] = value;
+    newVnode.dom[`v-${lowercaseName}`] = value;
     return;
   }
 
@@ -742,69 +745,30 @@ export function patch(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void {
   current.oldVnode = oldVnode;
 
   // Flatten the new tree
+  // Take into account that is necessary to flatten the tree before the patch process
+  // to let the hooks and signals work properly
   for (let i = 0; i < newTree.length; i++) {
     let newChild = newTree[i];
 
     // If the new child is a Vnode and is not a text node
     if (newChild instanceof Vnode && newChild.tag !== textTag) {
-      // If the tag of the new child is not a string, it is a component
-      if (typeof newChild.tag !== "string") {
-        // Set the current component to the tag of the new child
-        current.component = newChild.tag;
-        // Replace the new child with the result of calling its view or bind method, passing in the props and children as arguments
-        newTree.splice(
-          i--,
-          1,
-          ("view" in newChild.tag ? newChild.tag.view.bind(newChild.tag) : newChild.tag.bind(newChild.tag))(
-            newChild.props,
-            ...newChild.children
-          )
-        );
+      // If the new child tag is a string just continue the loop
+      if (typeof newChild.tag === "string") {
         continue;
       }
 
-      // Set the isSVG flag for the new child if it is an SVG element or if the parent is an SVG element
-      newChild.isSVG = newVnode.isSVG || newChild.tag === "svg";
-
-      // If there is an old child at the same index
-      if (i < oldTreeLength) {
-        let oldChild = oldTree[i];
-        // If the tag of the new child is the same as the tag of the old child
-        if (newChild.tag === oldChild.tag) {
-          // Set the dom property of the new child to the dom property of the old child
-          newChild.dom = oldChild.dom;
-          // If the v-keep prop is the same for both the new and old child, set the children of the new child to the children of the old child
-          if ("v-keep" in newChild.props && newChild.props["v-keep"] === oldChild.props["v-keep"]) {
-            newChild.children = oldChild.children;
-            continue;
-          }
-
-          // Update the attributes of the new child based on the old child
-          updateAttributes(newChild as VnodeWithDom, oldChild);
-          // Recursively patch the new and old children
-          patch(newChild as VnodeWithDom, oldChild);
-          continue;
-        }
-
-        // Create a new dom element for the new child
-        newChild.dom = createDomElement(newChild.tag, newChild.isSVG);
-        // Update the attributes of the new child
-        updateAttributes(newChild as VnodeWithDom);
-        // Replace the old child in the dom with the new child
-        newVnode.dom.replaceChild(newChild.dom, oldChild.dom);
-        // Recursively patch the new child
-        patch(newChild as VnodeWithDom);
-        continue;
-      }
-
-      // Create a new dom element for the new child
-      newChild.dom = createDomElement(newChild.tag, newChild.isSVG);
-      // Update the attributes of the new child
-      updateAttributes(newChild as VnodeWithDom);
-      // Append the new child to the dom
-      newVnode.dom.appendChild(newChild.dom);
-      // Recursively patch the new child
-      patch(newChild as VnodeWithDom);
+      // If the tag of the new child is not a string, it is a component
+      // Set the current component to the tag of the new child
+      current.component = newChild.tag;
+      // Replace the new child with the result of calling its view or bind method, passing in the props and children as arguments
+      newTree.splice(
+        i--,
+        1,
+        ("view" in newChild.tag ? newChild.tag.view.bind(newChild.tag) : newChild.tag.bind(newChild.tag))(
+          newChild.props,
+          ...newChild.children
+        )
+      );
       continue;
     }
 
@@ -820,42 +784,96 @@ export function patch(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void {
       continue;
     }
 
-    // If the new child is not a Vnode, wrap it in a text Vnode
-    newTree[i] = new Vnode(textTag, {}, []);
-    // If the new child is a Vnode, set the dom property of the text Vnode to the dom property of the new child
+    // If the new child is a Vnode, set the text of the Vnode to the text content of its dom property
     if (newChild instanceof Vnode) {
-      newTree[i].dom = newChild.dom;
       // Set the new child to the text content of its dom property
-      newChild = (newChild as VnodeWithDom).dom.textContent;
+      newChild.children[0] = (newChild as VnodeWithDom).dom.textContent;
+      continue;
     }
 
+    // If the new child is not a Vnode, wrap it in a text Vnode
+    newChild = newTree[i] = new Vnode(textTag, {}, [newChild]);
+  }
+
+  // Patch the the old tree
+  for (let i = 0; i < newTree.length; i++) {
+    let newChild = newTree[i];
+
+    // If the new child is a text vnode
+    if (newChild.tag === textTag) {
+      // If there is an old child at the same index
+      if (i < oldTreeLength) {
+        let oldChild = oldTree[i];
+
+        // If the old child is a text node
+        if (oldChild.tag === textTag) {
+          // Set the dom property of the text Vnode to the dom property of the old child
+          newChild.dom = oldChild.dom;
+          // If the text content of the old child is different from the new child, update the text content of the old child
+          // eslint-disable-next-line eqeqeq
+          if (newChild.children[0] != oldChild.dom.textContent) {
+            oldChild.dom.textContent = newChild.children[0];
+          }
+          continue;
+        }
+
+        // Create a new text node for the new child
+        newChild.dom = document.createTextNode(newChild.children[0]);
+        // Replace the old child in the dom with the new text node
+        newVnode.dom.replaceChild(newChild.dom, oldChild.dom);
+        continue;
+      }
+
+      // Create a new text node for the new child
+      newChild.dom = document.createTextNode(newChild.children[0]);
+      // Append the new text node to the dom
+      newVnode.dom.appendChild(newChild.dom);
+      continue;
+    }
+
+    // If the new child is not a text node
+    // Set the isSVG flag for the new child if it is an SVG element or if the parent is an SVG element
+    newChild.isSVG = newVnode.isSVG || newChild.tag === "svg";
+
     // If there is an old child at the same index
     if (i < oldTreeLength) {
       let oldChild = oldTree[i];
-
-      // If the old child is a text node
-      if (oldChild.tag === textTag) {
-        // Set the dom property of the text Vnode to the dom property of the old child
-        newTree[i].dom = oldChild.dom;
-        // If the text content of the old child is different from the new child, update the text content of the old child
-        // eslint-disable-next-line eqeqeq
-        if (newChild != oldChild.dom.textContent) {
-          oldChild.dom.textContent = newChild;
+      // If the tag of the new child is the same as the tag of the old child
+      if (newChild.tag === oldChild.tag) {
+        // Set the dom property of the new child to the dom property of the old child
+        newChild.dom = oldChild.dom;
+        // If the v-keep prop is the same for both the new and old child, set the children of the new child to the children of the old child
+        if ("v-keep" in newChild.props && newChild.props["v-keep"] === oldChild.props["v-keep"]) {
+          newChild.children = oldChild.children;
+          continue;
         }
+
+        // Update the attributes of the new child based on the old child
+        updateAttributes(newChild as VnodeWithDom, oldChild);
+        // Recursively patch the new and old children
+        patch(newChild as VnodeWithDom, oldChild);
         continue;
       }
 
-      // Create a new text node for the new child
-      newTree[i].dom = document.createTextNode(newChild);
-      // Replace the old child in the dom with the new text node
-      newVnode.dom.replaceChild(newTree[i].dom, oldChild.dom);
+      // Create a new dom element for the new child
+      newChild.dom = createDomElement(newChild.tag as string, newChild.isSVG);
+      // Update the attributes of the new child
+      updateAttributes(newChild as VnodeWithDom);
+      // Replace the old child in the dom with the new child
+      newVnode.dom.replaceChild(newChild.dom, oldChild.dom);
+      // Recursively patch the new child
+      patch(newChild as VnodeWithDom);
       continue;
     }
 
-    // Create a new text node for the new child
-    newTree[i].dom = document.createTextNode(newChild);
-    // Append the new text node to the dom
-    newVnode.dom.appendChild(newTree[i].dom);
+    // Create a new dom element for the new child
+    newChild.dom = createDomElement(newChild.tag as string, newChild.isSVG);
+    // Update the attributes of the new child
+    updateAttributes(newChild as VnodeWithDom);
+    // Append the new child to the dom
+    newVnode.dom.appendChild(newChild.dom);
+    // Recursively patch the new child
+    patch(newChild as VnodeWithDom);
   }
 
   // Remove any old children that are no longer present in the new tree
@@ -898,6 +916,40 @@ export function update(): void | string {
   }
 }
 
+// Update custom Vnode
+// It is assumed that a first mount has already occurred, so,
+// the oldVnode is not null and the dom property of the oldVnode is not null
+// You need to set the dom property of the newVnode to the dom property of the oldVnode
+// The same with the isSVG property
+// Prefer this function over patch to allow for cleanup, onUpdate and onMount sets to be called
+export function updateVnode(vnode: VnodeWithDom, oldVnode: VnodeWithDom): string | void {
+  // Call any cleanup functions that are registered with the onCleanupSet set
+  callSet(onCleanupSet);
+
+  // Recursively patch the new and old main Vnodes
+  patch(vnode, oldVnode);
+
+  // Set the vnode properties to the old vnode
+  oldVnode.tag = vnode.tag;
+  oldVnode.props = { ...vnode.props };
+  oldVnode.children = [...vnode.children];
+
+  // Call any update or mount functions that are registered with the onUpdateSet or onMountSet set
+  callSet(isMounted ? onUpdateSet : onMountSet);
+
+  // Set the isMounted flag to true
+  isMounted = true;
+
+  // Reset the current vnode, oldVnode, and component properties
+  current.vnode = null;
+  current.oldVnode = null;
+  current.component = null;
+
+  if (isNodeJs) {
+    return vnode.dom.innerHTML;
+  }
+}
+
 // Unmount the main Vnode
 export function unmount() {
   // If the main Vnode exists

package/lib/interfaces.ts

@@ -89,6 +89,7 @@ declare module "valyrian.js" {
   export function updateAttributes(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void;
   export function patch(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void;
   export function update(): void | string;
+  export function updateVnode(vnode: VnodeWithDom, oldVnode: VnodeWithDom): string | void;
   export function unmount(): string | void;
   export function mount(dom: any, component: any): string | void;
   export const v: V;

package/lib/proxy-signal/index.ts

@@ -0,0 +1,187 @@
+import { update } from "valyrian.js";
+
+/* eslint-disable no-use-before-define */
+interface Cleanup {
+  (): void;
+}
+
+interface Subscription {
+  // eslint-disable-next-line no-unused-vars
+  (value: ProxySignal["value"]): void | Cleanup;
+}
+
+interface Subscriptions extends Map<Subscription, Cleanup> {}
+
+interface Getter {
+  // eslint-disable-next-line no-unused-vars
+  (value: ProxySignal["value"]): any;
+}
+
+interface Getters {
+  [key: string | symbol]: Getter;
+}
+
+interface ProxySignal {
+  // Works as a getter of the value
+  (): ProxySignal["value"];
+  // Works as a subscription to the value
+  // eslint-disable-next-line no-unused-vars
+  (value: Subscription): ProxySignal;
+  // Works as a setter with a path and a handler
+  // eslint-disable-next-line no-unused-vars
+  (path: string, handler: (valueAtPathPosition: any) => any): ProxySignal["value"];
+  // Works as a setter with a path and a value
+  // eslint-disable-next-line no-unused-vars
+  (path: string, value: any): ProxySignal["value"];
+  // Works as a setter with a value
+  // eslint-disable-next-line no-unused-vars
+  (value: any): ProxySignal["value"];
+  // Gets the current value of the signal.
+  value: any;
+  // Cleanup function to be called to remove all subscriptions.
+  cleanup: () => void;
+  // Creates a getter on the signal.
+  // eslint-disable-next-line no-unused-vars
+  getter: (name: string, handler: Getter) => any;
+  // To access the getters on the signal.
+  [key: string | number | symbol]: any;
+}
+
+function makeUnsubscribe(
+  subscriptions: Subscriptions,
+  computed: ProxySignal,
+  handler: Subscription,
+  cleanup?: Cleanup
+) {
+  if (typeof cleanup === "function") {
+    computed.cleanup = cleanup;
+  }
+  computed.unsubscribe = () => {
+    subscriptions.delete(handler);
+    computed?.cleanup();
+  };
+}
+
+function createSubscription(signal: ProxySignal, subscriptions: Subscriptions, handler: Subscription) {
+  if (subscriptions.has(handler) === false) {
+    // eslint-disable-next-line no-use-before-define
+    let computed = ProxySignal(() => handler(signal.value));
+    let cleanup = computed(); // Execute to register itself
+    makeUnsubscribe(subscriptions, computed, handler, cleanup);
+    subscriptions.set(handler, computed);
+  }
+
+  return subscriptions.get(handler);
+}
+
+let updateTimeout: any;
+function delayedUpdate() {
+  clearTimeout(updateTimeout);
+  updateTimeout = setTimeout(update);
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export function ProxySignal(value: any): ProxySignal {
+  let subscriptions = new Map();
+  let getters: Getters = {};
+
+  let forceUpdate = false;
+
+  let signal: ProxySignal = new Proxy(
+    // eslint-disable-next-line no-unused-vars
+    function (valOrPath?: any | Subscription, handler?: (valueAtPathPosition: any) => any) {
+      // Works as a getter
+      if (typeof valOrPath === "undefined") {
+        return signal.value;
+      }
+
+      // Works as a subscription
+      if (typeof valOrPath === "function") {
+        return createSubscription(signal, subscriptions, valOrPath);
+      }
+
+      // Works as a setter with a path
+      if (typeof valOrPath === "string" && typeof handler !== "undefined") {
+        let parsed = valOrPath.split(".");
+        let result = signal.value;
+        let next;
+        while (parsed.length) {
+          next = parsed.shift() as string;
+          if (parsed.length > 0) {
+            if (typeof result[next] !== "object") {
+              result[next] = {};
+            }
+            result = result[next];
+          } else {
+            result[next] = typeof handler === "function" ? handler(result[next]) : handler;
+          }
+        }
+        forceUpdate = true;
+        signal.value = signal.value;
+        return signal.value;
+      }
+
+      // Works as a setter with a value
+      signal.value = valOrPath;
+      return signal.value;
+    } as ProxySignal,
+    {
+      set(state, prop, val) {
+        if (prop === "value" || prop === "unsubscribe" || prop === "cleanup") {
+          let old = state[prop];
+          state[prop] = val;
+          if (prop === "value" && (forceUpdate || val !== old)) {
+            forceUpdate = false;
+            for (let [handler, computed] of subscriptions) {
+              computed.cleanup();
+              let cleanup = handler(val);
+              makeUnsubscribe(subscriptions, computed, handler, cleanup);
+            }
+            delayedUpdate();
+          }
+          return true;
+        }
+        return false;
+      },
+      get(state, prop) {
+        if (prop === "value") {
+          return typeof state.value === "function" ? state.value() : state.value;
+        }
+
+        if (prop === "cleanup" || prop === "unsubscribe" || prop === "getter") {
+          return state[prop];
+        }
+
+        if (prop in getters) {
+          return getters[prop](state.value);
+        }
+      }
+    }
+  );
+
+  Object.defineProperties(signal, {
+    value: { value, writable: true, enumerable: true },
+    cleanup: {
+      value() {
+        // eslint-disable-next-line no-unused-vars
+        for (let [handler, computed] of subscriptions) {
+          computed.unsubscribe();
+        }
+      },
+      writable: true,
+      enumerable: true
+    },
+    getter: {
+      value(name: string, handler: Getter) {
+        if (name in getters) {
+          throw new Error("Named computed already exists.");
+        }
+
+        getters[name] = handler;
+      },
+      enumerable: true
+    }
+  });
+
+  return signal;
+}