valyrian.js 7.2.1 → 7.2.3

package/dist/signal/index.js

@@ -24,54 +24,71 @@ __export(signal_exports, {
 module.exports = __toCommonJS(signal_exports);
 var import_valyrian = require("valyrian.js");
 function Signal(initialValue) {
-  const context = { ...import_valyrian.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];
+  const { vnode, component } = { ...import_valyrian.current };
+  if (vnode) {
+    if (!vnode.components) {
+      vnode.components = [];
     }
-    let signal2 = context.vnode.signals[++context.vnode.calls];
+    if (vnode.components.indexOf(component) === -1) {
+      vnode.signal_calls = -1;
+      vnode.components.push(component);
+      if (!component.signals) {
+        component.signals = [];
+        (0, import_valyrian.onUnmount)(() => Reflect.deleteProperty(component, "signals"));
+      }
+    }
+    let signal2 = component.signals[++vnode.signal_calls];
     if (signal2) {
+      signal2[3].length = 0;
       return signal2;
     }
   }
   let value = initialValue;
-  const subscribers = [];
+  const subscriptions = [];
   const subscribe = (callback) => {
-    if (subscribers.indexOf(callback) === -1) {
-      subscribers.push(callback);
+    if (subscriptions.indexOf(callback) === -1) {
+      subscriptions.push(callback);
+    }
+  };
+  let vnodesToUpdate = [];
+  const updateVnodes = () => {
+    let vnodesToUpdateCopy = vnodesToUpdate.filter((vnode2, index, self) => {
+      return self.findIndex((v2) => v2.dom === vnode2.dom) === index;
+    });
+    for (let i = 0, l = vnodesToUpdateCopy.length; i < l; i++) {
+      const vnode2 = vnodesToUpdateCopy[i];
+      let newVnode = (0, import_valyrian.v)(vnode2.tag, vnode2.props, ...vnode2.initialChildren);
+      newVnode.dom = vnode2.dom;
+      newVnode.isSVG = vnode2.isSVG;
+      (0, import_valyrian.updateVnode)(newVnode, vnode2);
     }
   };
   function get() {
+    const { vnode: vnode2 } = import_valyrian.current;
+    if (vnode2 && vnodesToUpdate.indexOf(vnode2) === -1) {
+      if (!vnode2.initialChildren) {
+        vnode2.initialChildren = [...vnode2.children];
+      }
+      vnodesToUpdate.push(vnode2);
+      subscribe(updateVnodes);
+    }
     return 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);
+    if (import_valyrian.current.event) {
+      import_valyrian.current.event.preventDefault();
+    }
+    if (newValue === value) {
+      return;
     }
-    if (context.vnode) {
-      let newVnode = (0, import_valyrian.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 (0, import_valyrian.updateVnode)(newVnode, context.vnode);
+    value = newValue;
+    for (let i = 0, l = subscriptions.length; i < l; i++) {
+      subscriptions[i](value);
     }
-    return (0, import_valyrian.update)();
   };
-  let signal = [get, set, subscribe];
-  if (context.vnode) {
-    context.vnode.signals.push(signal);
-    context.vnode.subscribers.push(subscribers);
+  let signal = [get, set, subscribe, subscriptions];
+  if (vnode) {
+    component.signals.push(signal);
   }
   return signal;
 }

package/dist/signal/index.mjs

@@ -1,54 +1,71 @@
 // lib/signal/index.ts
-import { current, update, updateVnode, v } from "valyrian.js";
+import { current, onUnmount, 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];
+  const { vnode, component } = { ...current };
+  if (vnode) {
+    if (!vnode.components) {
+      vnode.components = [];
+    }
+    if (vnode.components.indexOf(component) === -1) {
+      vnode.signal_calls = -1;
+      vnode.components.push(component);
+      if (!component.signals) {
+        component.signals = [];
+        onUnmount(() => Reflect.deleteProperty(component, "signals"));
+      }
+    }
+    let signal2 = component.signals[++vnode.signal_calls];
     if (signal2) {
+      signal2[3].length = 0;
       return signal2;
     }
   }
   let value = initialValue;
-  const subscribers = [];
+  const subscriptions = [];
   const subscribe = (callback) => {
-    if (subscribers.indexOf(callback) === -1) {
-      subscribers.push(callback);
+    if (subscriptions.indexOf(callback) === -1) {
+      subscriptions.push(callback);
+    }
+  };
+  let vnodesToUpdate = [];
+  const updateVnodes = () => {
+    let vnodesToUpdateCopy = vnodesToUpdate.filter((vnode2, index, self) => {
+      return self.findIndex((v2) => v2.dom === vnode2.dom) === index;
+    });
+    for (let i = 0, l = vnodesToUpdateCopy.length; i < l; i++) {
+      const vnode2 = vnodesToUpdateCopy[i];
+      let newVnode = v(vnode2.tag, vnode2.props, ...vnode2.initialChildren);
+      newVnode.dom = vnode2.dom;
+      newVnode.isSVG = vnode2.isSVG;
+      updateVnode(newVnode, vnode2);
     }
   };
   function get() {
+    const { vnode: vnode2 } = current;
+    if (vnode2 && vnodesToUpdate.indexOf(vnode2) === -1) {
+      if (!vnode2.initialChildren) {
+        vnode2.initialChildren = [...vnode2.children];
+      }
+      vnodesToUpdate.push(vnode2);
+      subscribe(updateVnodes);
+    }
     return value;
   }
-  get.value = value;
-  get.toJSON = get.valueOf = get;
-  get.toString = () => `${value}`;
   const set = (newValue) => {
+    if (current.event) {
+      current.event.preventDefault();
+    }
+    if (newValue === value) {
+      return;
+    }
     value = newValue;
-    get.value = value;
-    for (let i = 0, l = subscribers.length; i < l; i++) {
-      subscribers[i](value);
-    }
-    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();
+    for (let i = 0, l = subscriptions.length; i < l; i++) {
+      subscriptions[i](value);
+    }
   };
-  let signal = [get, set, subscribe];
-  if (context.vnode) {
-    context.vnode.signals.push(signal);
-    context.vnode.subscribers.push(subscribers);
+  let signal = [get, set, subscribe, subscriptions];
+  if (vnode) {
+    component.signals.push(signal);
   }
   return signal;
 }

package/lib/hooks/index.ts

@@ -34,35 +34,37 @@ export const createHook = function createHook({
   returnValue
 }: HookDefinition): Hook {
   return (...args: any[]) => {
-    let { component, vnode, oldVnode } = current as CurrentOnPatch;
+    let { component, vnode } = current as CurrentOnPatch;
 
-    // Init the components array for the current vnode
-    if (!vnode.components) {
-      vnode.components = [];
-      onUnmount(() => Reflect.deleteProperty(vnode, "components"));
-    }
+    let hook = null;
 
-    // Add the component to the components array if it's not already there
-    if (vnode.components.indexOf(component) === -1) {
-      vnode.components.push(component);
-    }
+    if (vnode) {
+      // Init the components array for the current vnode
+      if (!vnode.components) {
+        vnode.components = [];
+      }
 
-    // Init the component hooks array
-    if (!component.hooks) {
-      component.hooks = [];
-      onUnmount(() => Reflect.deleteProperty(component, "hooks"));
-    }
+      if (vnode.components.indexOf(component) === -1) {
+        vnode.hook_calls = -1;
+        vnode.components.push(component);
+        if (!component.hooks) {
+          component.hooks = [];
+          onUnmount(() => Reflect.deleteProperty(component, "hooks"));
+        }
+      }
 
-    let hook: Hook = undefined;
+      hook = component.hooks[++vnode.hook_calls];
+    }
 
-    // if no old vnode or old vnode has no components or old vnode's last component is not the current component
-    // we are mounting the component for the first time so we create a new hook
-    if (!oldVnode || !oldVnode.components || oldVnode.components[vnode.components.length - 1] !== component) {
+    // If the hook doesn't exist, create it
+    if (!hook) {
       // create a new hook
       hook = onCreate(...args);
 
-      // add the hook to the component's hooks array
-      component.hooks.push(hook);
+      if (vnode) {
+        // Add the hook to the component
+        component.hooks.push(hook);
+      }
 
       // if we have a onRemove hook, add it to the onUnmount set
       if (onRemove) {
@@ -70,24 +72,6 @@ export const createHook = function createHook({
         onUnmount(() => onRemove(hook));
       }
     } else {
-      // old vnode has components, we are updating the component
-
-      // Set the calls property to the current component if it's not already set
-      if ("calls" in component === false) {
-        component.calls = -1;
-        onUnmount(() => Reflect.deleteProperty(component, "calls"));
-      }
-
-      // Reset the calls property to -1 on cleanup so we can detect if the component is updated again
-      onCleanup(() => (component.calls = -1));
-
-      // Increment the calls property
-      component.calls++;
-
-      // Get the current hook from the component's hooks array
-      hook = component.hooks[component.calls];
-
-      // If we have an onUpdate hook, call it
       if (onUpdateHook) {
         onUpdateHook(hook, ...args);
       }
@@ -118,22 +102,27 @@ function delayedUpdate() {
 // Use state hook
 export const useState = createHook({
   onCreate: (value) => {
-    let stateObj = Object.create(null);
-    stateObj.value = value;
-    stateObj.toJSON =
-      stateObj.toString =
-      stateObj.valueOf =
-        () => (typeof stateObj.value === "function" ? stateObj.value() : stateObj.value);
-
-    return [
-      stateObj,
-      (value: any) => {
-        if (stateObj.value !== value) {
-          stateObj.value = value;
-          delayedUpdate();
-        }
+    function get() {
+      return value;
+    }
+    get.value = value;
+    get.toJSON = get.valueOf = get;
+    get.toString = () => `${value}`;
+
+    function set(newValue) {
+      // Prevent default event if it exists
+      if (current.event) {
+        current.event.preventDefault();
+      }
+
+      if (value !== newValue) {
+        value = newValue;
+        get.value = newValue;
+        delayedUpdate();
       }
-    ];
+    }
+
+    return [get, set];
   }
 });
 

package/lib/index.ts

@@ -113,6 +113,8 @@ export interface Current {
   vnode: VnodeWithDom | null;
   // The old virtual node. It must have a DOM element associated with it.
   oldVnode?: VnodeWithDom | null;
+  // The current event. It can be an event or null.
+  event: Event | null;
 }
 
 // The V function is the main function for creating virtual nodes.
@@ -178,7 +180,7 @@ function domToVnode(dom: any): VnodeWithDom {
     // Set the 'dom' property of the 'Vnode' instance to the child DOM node.
     // Push the 'Vnode' instance to the 'children' array.
     if (childDom.nodeType === 3) {
-      let vnode = new Vnode(textTag, {}, []);
+      let vnode = new Vnode(textTag, {}, [childDom.nodeValue]);
       vnode.dom = childDom;
       children.push(vnode as VnodeWithDom);
       continue;
@@ -233,7 +235,8 @@ let isMounted = false;
 export const current: Current = {
   vnode: null,
   oldVnode: null,
-  component: null
+  component: null,
+  event: null
 };
 
 /* Reserved props ----------------------------------------------------------- */
@@ -302,6 +305,9 @@ const eventListenerNames: Record<string, true> = {};
 
 // This function is called when an event occurs
 function eventListener(e: Event) {
+  // Set the current event to the event that occurred so that it can be prevented if necessary
+  current.event = e;
+
   // Convert the target of the event to a DOM element
   let dom = e.target as DomElement;
 
@@ -323,6 +329,8 @@ function eventListener(e: Event) {
     }
     dom = dom.parentNode as DomElement;
   }
+
+  current.event = null;
 }
 
 /* Directives --------------------------------------------------------------- */
@@ -574,15 +582,12 @@ 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 (lowercaseName in eventListenerNames === false) {
-      (mainVnode as VnodeWithDom).dom.addEventListener(lowercaseName.slice(2), eventListener);
-      eventListenerNames[lowercaseName] = true;
+    if (name in eventListenerNames === false) {
+      (mainVnode as VnodeWithDom).dom.addEventListener(name.slice(2), eventListener);
+      eventListenerNames[name] = true;
     }
-    newVnode.dom[`v-${lowercaseName}`] = value;
+    newVnode.dom[`v-${name}`] = value;
     return;
   }
 
@@ -660,6 +665,12 @@ export function updateAttributes(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom
 
 // Patch a DOM node with a new VNode tree
 export function patch(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void {
+  // If the new tree has no children, set the text content of the parent DOM element to an empty string
+  if (newVnode.children.length === 0) {
+    newVnode.dom.textContent = "";
+    return;
+  }
+
   // Get the children of the new and old virtual DOM nodes
   let newTree = newVnode.children;
   let oldTree = oldVnode?.children || [];
@@ -751,24 +762,22 @@ export function patch(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void {
     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 new child tag is a string just continue the loop
-      if (typeof newChild.tag === "string") {
-        continue;
+    if (newChild instanceof Vnode) {
+      // 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 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;
     }
 
@@ -785,38 +794,28 @@ export function patch(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void {
     }
 
     // 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) {
-      // Set the new child to the text content of its dom property
-      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]);
+    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 no old child exists at the same index
+      if (i >= oldTreeLength) {
+        // 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 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;
-        }
+      let oldChild = oldTree[i];
 
+      // If the old child is not a text node
+      if (oldChild.tag !== textTag) {
         // 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
@@ -824,10 +823,14 @@ export function patch(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void {
         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);
+      // If the old child is a text node
+      // 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;
     }
 
@@ -835,26 +838,24 @@ export function patch(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void {
     // 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;
-        }
+    // If there is no old child at the same index
+    if (i >= oldTreeLength) {
+      // 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);
+      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;
-      }
+    // If there is an old child at the same index
+    let oldChild = oldTree[i];
 
+    // If the tag of the new child is different from the tag of the old child
+    if (newChild.tag !== oldChild.tag) {
       // 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
@@ -866,14 +867,19 @@ export function patch(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void {
       continue;
     }
 
-    // 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);
+    // If the tag of the new child is the same as the tag of the old child
+    // 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);
   }
 
   // Remove any old children that are no longer present in the new tree
@@ -929,10 +935,13 @@ export function updateVnode(vnode: VnodeWithDom, oldVnode: VnodeWithDom): string
   // Recursively patch the new and old main Vnodes
   patch(vnode, oldVnode);
 
-  // Set the vnode properties to the old vnode
+  // Set the oldVnode's tag, props, children, dom, and isSVG properties to the newVnode's tag, props, children, dom, and isSVG properties
+  // This is necessary to allow for the oldVnode to be used as the newVnode in the next update with the normal update function
   oldVnode.tag = vnode.tag;
   oldVnode.props = { ...vnode.props };
   oldVnode.children = [...vnode.children];
+  oldVnode.dom = vnode.dom;
+  oldVnode.isSVG = vnode.isSVG;
 
   // Call any update or mount functions that are registered with the onUpdateSet or onMountSet set
   callSet(isMounted ? onUpdateSet : onMountSet);

package/lib/interfaces.ts

@@ -63,6 +63,7 @@ declare module "valyrian.js" {
     component: Component | POJOComponent | null;
     vnode: VnodeWithDom | null;
     oldVnode?: VnodeWithDom | null;
+    event: Event | null;
   }
   export interface V {
     (tagOrComponent: string | Component | POJOComponent, props: Props | null, ...children: Children):