valyrian.js 7.2.11 → 8.0.0

package/lib/node/utils/tree-adapter.ts

@@ -53,6 +53,16 @@ export class Node implements Node {
     this.parent_node = node;
   }
 
+  #dataset: Record<string | number, any> = {};
+
+  get dataset() {
+    return this.#dataset;
+  }
+
+  set dataset(value) {
+    this.#dataset = value;
+  }
+
   constructor() {}
 
   appendChild<T extends Node>(node: T): T {
@@ -69,7 +79,7 @@ export class Node implements Node {
       node.parentNode && node.parentNode.removeChild(node as Node);
       node.parentNode = this;
       if (child) {
-        let idx = this.childNodes.indexOf(child);
+        const idx = this.childNodes.indexOf(child);
         this.childNodes.splice(idx, 0, node);
       } else {
         this.childNodes.push(node);
@@ -87,19 +97,24 @@ export class Node implements Node {
   }
   removeChild<T extends Node>(child: T): T {
     if (child && child.parentNode === this) {
-      let idx = (this.childNodes as unknown as Node[]).indexOf(child);
+      const idx = (this.childNodes as unknown as Node[]).indexOf(child);
       (this.childNodes as unknown as Node[]).splice(idx, 1);
       child.parentNode = null;
     }
     return child;
   }
+
+  remove(): Node {
+    return this.parentNode ? this.parentNode.removeChild(this) : this;
+  }
+
   cloneNode(deep?: boolean | undefined): Node {
     if (this.nodeType === 3) {
       return new Text(this.nodeValue);
     }
 
     if (this.nodeType === 1) {
-      let node = new Element();
+      const node = new Element();
       node.nodeType = this.nodeType;
       this.nodeName = this.nodeName;
       if (this.attributes) {
@@ -107,6 +122,11 @@ export class Node implements Node {
           node.setAttribute(this.attributes[i].nodeName, this.attributes[i].nodeValue);
         }
       }
+
+      for (const key in this.dataset) {
+        node.dataset[key] = this.dataset[key];
+      }
+
       if (deep) {
         for (let i = 0, l = this.childNodes.length; i < l; i++) {
           node.appendChild(this.childNodes[i].cloneNode(deep));
@@ -115,14 +135,14 @@ export class Node implements Node {
       return node;
     }
 
-    let node = new Node();
+    const node = new Node();
     node.nodeType = this.nodeType;
     node.nodeName = this.nodeName;
     return node;
   }
 
   setAttribute(name: string, value: any) {
-    let attr = {
+    const attr = {
       nodeName: name,
       nodeValue: value
     };
@@ -266,8 +286,8 @@ export class Text extends Node {
 
 function updateElementStyles(element: Element, state: Record<string, any>) {
   let str = "";
-  for (let key in state) {
-    let value = state[key];
+  for (const key in state) {
+    const value = state[key];
     if (typeof value !== "undefined" && value !== null && String(value).length > 0) {
       str += `${key}: ${state[key]};`;
     }
@@ -324,11 +344,23 @@ export class Element extends Node {
     throw new Error("Cannot set style");
   }
 
+  get className(): string {
+    return this.getAttribute("class") || "";
+  }
+
+  set className(value: string | boolean) {
+    if (value == null || value === false) {
+      this.removeAttribute("class");
+    } else {
+      this.setAttribute("class", String(value));
+    }
+  }
+
   classList = {
     toggle: (item: any, force: any) => {
       if (item) {
-        let classes = (this.getAttribute("class") || "").split(" ");
-        let itemIndex = classes.indexOf(item);
+        const classes = (this.className || "").split(" ");
+        const itemIndex = classes.indexOf(item);
         if (force && itemIndex === -1) {
           classes.push(item);
         }
@@ -337,16 +369,28 @@ export class Element extends Node {
           classes.splice(itemIndex, 1);
         }
 
-        let final = classes.join(" ").trim();
+        const final = classes.join(" ").trim();
         if (final.length) {
-          this.setAttribute("class", classes.join(" ").trim());
+          this.className = classes.join(" ").trim();
         } else {
-          this.removeAttribute("class");
+          this.className = false;
         }
       }
     }
   };
 
+  get id(): string {
+    return this.getAttribute("id") || "";
+  }
+
+  set id(value: string | boolean) {
+    if (value == null || value === false) {
+      this.removeAttribute("id");
+    } else {
+      this.setAttribute("id", String(value));
+    }
+  }
+
   set textContent(text) {
     this.nodeValue = String(text);
     this.childNodes = this.nodeValue ? [new Text(this.nodeValue)] : [];
@@ -374,7 +418,7 @@ export class Element extends Node {
 
   set innerHTML(html) {
     this.textContent = "";
-    let result = htmlToDom(html);
+    const result = htmlToDom(html);
     if (result instanceof DocumentFragment) {
       for (let i = 0, l = result.childNodes.length; i < l; i++) {
         this.appendChild(result.childNodes[i]);
@@ -402,20 +446,23 @@ export class Document extends Element {
     super();
     this.nodeType = 9;
     this.nodeName = "#document";
+    this.body = this.createElement("body");
   }
 
+  body: Element;
+
   createDocumentFragment(): DocumentFragment {
     return new DocumentFragment();
   }
 
   createElement(type: string) {
-    let element = new Element();
+    const element = new Element();
     element.nodeName = type.toUpperCase();
     return element;
   }
 
   createElementNS(ns: string, type: string) {
-    let element = this.createElement(type);
+    const element = this.createElement(type);
     element.baseURI = ns;
     return element;
   }
@@ -425,7 +472,7 @@ export class Document extends Element {
   }
 }
 
-let selfClosingTags = [
+const selfClosingTags = [
   "area",
   "base",
   "br",
@@ -449,7 +496,7 @@ export function domToHtml(dom: Element): string {
   }
 
   if (dom.nodeType === 1) {
-    let name = dom.nodeName.toLowerCase();
+    const name = dom.nodeName.toLowerCase();
     let str = "<" + name;
     for (let i = 0, l = dom.attributes.length; i < l; i++) {
       str += " " + dom.attributes[i].nodeName + '="' + dom.attributes[i].nodeValue + '"';
@@ -459,7 +506,7 @@ export function domToHtml(dom: Element): string {
       str += ">";
       if (dom.childNodes && dom.childNodes.length > 0) {
         for (let i = 0, l = dom.childNodes.length; i < l; i++) {
-          let child = domToHtml(dom.childNodes[i] as Element);
+          const child = domToHtml(dom.childNodes[i] as Element);
           if (child) {
             str += child;
           }
@@ -492,9 +539,9 @@ export function domToHyperscript(childNodes: ChildNodes, depth = 1) {
         let str = `\n${spaces}v("${item.nodeName}", `;
 
         if (item.attributes) {
-          let attrs: Record<string, any> = {};
+          const attrs: Record<string, any> = {};
           for (let i = 0, l = item.attributes.length; i < l; i++) {
-            let attr = item.attributes[i];
+            const attr = item.attributes[i];
             attrs[attr.nodeName] = attr.nodeValue;
           }
           str += JSON.stringify(attrs);
@@ -534,21 +581,21 @@ interface ObjectIndexItemWithContent extends ObjectIndexItem {
 interface ObjectIndexList extends Array<ObjectIndexItem> {}
 
 function findTexts(item: ObjectIndexItemWithContent, html: string) {
-  let newChildren: ObjectIndexItemWithContent[] = [];
+  const newChildren: ObjectIndexItemWithContent[] = [];
 
   // If the item has children
   if (item.children.length) {
     // Search for texts in the children.
     for (let i = 0; i < item.children.length; i++) {
-      let child = item.children[i];
-      let nextChild = item.children[i + 1];
+      const child = item.children[i];
+      const nextChild = item.children[i + 1];
 
       // If is the first child and the child startsAt is greater than the item contentStartsAt then
       // the content between the item contentStartsAt and the child startsAt is a text child of the item.
       if (i === 0 && child.startsAt > item.contentStartsAt) {
-        let childContent = html.substring(item.contentStartsAt, child.startsAt);
+        const childContent = html.substring(item.contentStartsAt, child.startsAt);
 
-        let childText: ObjectIndexItemWithContent = {
+        const childText: ObjectIndexItemWithContent = {
           tagName: "#text",
           startsAt: item.contentStartsAt,
           endsAt: item.contentStartsAt + childContent.length,
@@ -568,9 +615,9 @@ function findTexts(item: ObjectIndexItemWithContent, html: string) {
       // If there is a next child and the child endsAt is less than the next child startsAt then
       // the content between the child endsAt and the next child startsAt is a text child of the item.
       if (nextChild && child.endsAt < nextChild.startsAt) {
-        let childContent = html.substring(child.endsAt, nextChild.startsAt);
+        const childContent = html.substring(child.endsAt, nextChild.startsAt);
 
-        let childText: ObjectIndexItemWithContent = {
+        const childText: ObjectIndexItemWithContent = {
           tagName: "#text",
           startsAt: child.endsAt,
           endsAt: child.endsAt + childContent.length,
@@ -587,9 +634,9 @@ function findTexts(item: ObjectIndexItemWithContent, html: string) {
       // If there are no next child and the child endsAt is less than the item contentEndsAt then
       // the content between the child endsAt and the item contentEndsAt is a text child of the item.
       if (!nextChild && child.endsAt < item.contentEndsAt) {
-        let childContent = html.substring(child.endsAt, item.contentEndsAt);
+        const childContent = html.substring(child.endsAt, item.contentEndsAt);
 
-        let childText: ObjectIndexItemWithContent = {
+        const childText: ObjectIndexItemWithContent = {
           tagName: "#text",
           startsAt: child.endsAt,
           endsAt: child.endsAt + childContent.length,
@@ -611,10 +658,10 @@ function findTexts(item: ObjectIndexItemWithContent, html: string) {
   // If the item has no children then set the contents between the item contentStartsAt and the item contentEndsAt
   // as a text child of the item.
   if (!item.children.length) {
-    let childContent = html.substring(item.contentStartsAt, item.contentEndsAt);
+    const childContent = html.substring(item.contentStartsAt, item.contentEndsAt);
 
     if (childContent.length) {
-      let childText: ObjectIndexItemWithContent = {
+      const childText: ObjectIndexItemWithContent = {
         tagName: "#text",
         startsAt: item.contentStartsAt,
         endsAt: item.contentEndsAt,
@@ -642,12 +689,12 @@ function convertToDom<T extends Node>(item: ObjectIndexItemWithContent): T {
       ? document.createDocumentFragment()
       : document.createElement(item.tagName)) as unknown as T;
 
-    for (let key in item.attributes) {
+    for (const key in item.attributes) {
       node.setAttribute(key, item.attributes[key]);
     }
 
     for (let i = 0; i < item.children.length; i++) {
-      let child = convertToDom(item.children[i]);
+      const child = convertToDom(item.children[i]);
       node.appendChild(child);
     }
   }
@@ -658,23 +705,23 @@ function convertToDom<T extends Node>(item: ObjectIndexItemWithContent): T {
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function getObjectIndexTree(html: string): DocumentFragment {
   let item;
-  let regex = RegExp("<([^>|^!]+)>", "g");
-  let items: ObjectIndexList = [];
+  const regex = RegExp("<([^>|^!]+)>", "g");
+  const items: ObjectIndexList = [];
 
   // Make the initial list of items.
   while ((item = regex.exec(html))) {
     // If is a closing tag
     if (item[0].startsWith("</")) {
-      let lastOpenedItem = [...items].reverse().find((item) => item.endsAt === null);
+      const lastOpenedItem = [...items].reverse().find((item) => item.endsAt === null);
       if (lastOpenedItem) {
         lastOpenedItem.endsAt = item.index + item[0].length;
         lastOpenedItem.contentEndsAt = item.index;
 
         // Find the last opened item again, this will be the parent of the current item.
-        let parent = [...items].reverse().find((item) => item.endsAt === null);
+        const parent = [...items].reverse().find((item) => item.endsAt === null);
         if (parent) {
           // Find the index of the current item in the items array.
-          let index = items.indexOf(lastOpenedItem);
+          const index = items.indexOf(lastOpenedItem);
           // Remove the last opened item from the items array.
           items.splice(index, 1);
 
@@ -687,7 +734,7 @@ function getObjectIndexTree(html: string): DocumentFragment {
     }
 
     // If is an opening tag
-    let element: ObjectIndexItem = {
+    const element: ObjectIndexItem = {
       tagName: item[1].split(" ")[0],
       startsAt: item.index,
       endsAt: null,
@@ -700,10 +747,10 @@ function getObjectIndexTree(html: string): DocumentFragment {
 
     // Find the attributes of the tag.
     let string = (item[1] || "").substring(element.tagName.length + 1).replace(/\/$/g, "");
-    let attributesWithValues = string.match(/\S+="[^"]+"/g);
+    const attributesWithValues = string.match(/\S+="[^"]+"/g);
 
     if (attributesWithValues) {
-      for (let attribute of attributesWithValues) {
+      for (const attribute of attributesWithValues) {
         const [name, ...value] = attribute.trim().split("=");
         string = string.replace(attribute, "");
         if (value) {
@@ -712,9 +759,9 @@ function getObjectIndexTree(html: string): DocumentFragment {
       }
     }
 
-    let attributesWithBooleanValues = string.match(/\s\S+=[^"]+/g);
+    const attributesWithBooleanValues = string.match(/\s\S+=[^"]+/g);
     if (attributesWithBooleanValues) {
-      for (let attribute of attributesWithBooleanValues) {
+      for (const attribute of attributesWithBooleanValues) {
         const [name, ...value] = attribute.trim().split("=");
         string = string.replace(attribute, "");
         if (value) {
@@ -723,9 +770,9 @@ function getObjectIndexTree(html: string): DocumentFragment {
       }
     }
 
-    let attributesWithEmptyValues = string.match(/\s?\S+/g);
+    const attributesWithEmptyValues = string.match(/\s?\S+/g);
     if (attributesWithEmptyValues) {
-      for (let attribute of attributesWithEmptyValues) {
+      for (const attribute of attributesWithEmptyValues) {
         const name = attribute.trim();
         element.attributes[name] = true;
       }
@@ -737,7 +784,7 @@ function getObjectIndexTree(html: string): DocumentFragment {
       element.contentStartsAt = element.contentEndsAt = element.endsAt;
 
       // Find the last opened item, this will be the parent of the current item.
-      let parent = [...items].reverse().find((item) => item.endsAt === null);
+      const parent = [...items].reverse().find((item) => item.endsAt === null);
       if (parent) {
         // Add the last opened item as a child of the parent.
         parent.children.push(element);
@@ -748,7 +795,7 @@ function getObjectIndexTree(html: string): DocumentFragment {
     items.push(element);
   }
 
-  let fragmentItem: ObjectIndexItemWithContent = {
+  const fragmentItem: ObjectIndexItemWithContent = {
     tagName: "#document-fragment",
     startsAt: 0,
     endsAt: html.length,
@@ -777,16 +824,16 @@ export function htmlToDom(html: string): Element | Text | DocumentFragment {
   // search for the first opening tag.
   const openingTag = html.match(/<[^>]+>/g);
 
-  let document = new Document();
+  const document = new Document();
 
   // If the opening tag is not found, return a document fragment node with the html string as text content.
   if (!openingTag) {
-    let documentFragment = document.createDocumentFragment();
+    const documentFragment = document.createDocumentFragment();
     documentFragment.appendChild(document.createTextNode(html));
     return documentFragment;
   }
 
-  let fragment = getObjectIndexTree(html);
+  const fragment = getObjectIndexTree(html);
 
   if (fragment.childNodes.length > 1) {
     return fragment;
@@ -796,8 +843,8 @@ export function htmlToDom(html: string): Element | Text | DocumentFragment {
 }
 
 export function htmlToHyperscript(html: string) {
-  let domTree = htmlToDom(html);
-  let hyperscript = domToHyperscript(domTree instanceof DocumentFragment ? domTree.childNodes : [domTree]);
+  const domTree = htmlToDom(html);
+  const hyperscript = domToHyperscript(domTree instanceof DocumentFragment ? domTree.childNodes : [domTree]);
   return `[${hyperscript}\n]`;
 }
 

package/lib/pulse-store/index.ts

@@ -0,0 +1,181 @@
+/* eslint-disable no-console */
+import { updateVnode, Vnode, VnodeWithDom, current } from "valyrian.js";
+import { deepCloneUnfreeze, deepFreeze, hasChanged } from "valyrian.js/utils";
+
+type State = Record<string, any>;
+
+// An action or pulse type definition
+// eslint-disable-next-line no-unused-vars
+export type Pulse<StateType> = (state: StateType, ...args: any[]) => void | Promise<void>;
+
+// A collection of pulses
+export type Pulses<StateType> = {
+  [key: string]: Pulse<StateType>;
+};
+
+// A proxy state
+// This is a state that is proxied to automatically subscribe to changes
+// And is used internally to update the vnode when the state changes
+type ProxyState<StateType> = StateType & {
+  [key: string]: any;
+};
+
+// The effect stack
+const effectStack: Function[] = [];
+
+// Creates the store
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function createStore<StateType extends State, PulsesType extends Pulses<StateType>>(
+  initialState: StateType | (() => StateType),
+  pulses: PulsesType,
+  immutable = false
+): () => [ProxyState<StateType>, PulsesType] {
+  const subscribers = new Set<Function>();
+  const vnodesToUpdate = new WeakSet<Vnode>();
+
+  // Initialize the localState for this store
+  const localState = (typeof initialState === "function" ? initialState() : initialState) || {};
+
+  function isMutable() {
+    if (immutable) {
+      throw new Error("You need to call a pulse to modify the state");
+    }
+  }
+
+  // We create a proxy for the state
+  const proxyState = new Proxy(localState || {}, {
+    get: (state, prop: string) => {
+      const currentEffect = effectStack[effectStack.length - 1];
+      if (currentEffect && !subscribers.has(currentEffect)) {
+        subscribers.add(currentEffect);
+      }
+
+      const currentVnode = current.vnode as VnodeWithDom;
+      if (currentVnode && !vnodesToUpdate.has(currentVnode)) {
+        const subscription = () => {
+          if (!currentVnode.dom) {
+            subscribers.delete(subscription);
+            vnodesToUpdate.delete(currentVnode);
+            return;
+          }
+
+          updateVnode(currentVnode);
+        };
+
+        subscribers.add(subscription);
+        vnodesToUpdate.add(currentVnode);
+      }
+
+      return state[prop];
+    },
+    // If the user tries to set directly it will throw an error
+    set: (state, prop: string, value: any) => {
+      isMutable();
+      Reflect.set(state, prop, value);
+      return true;
+    },
+    // If the user tries to delete directly it will throw an error
+    deleteProperty: (state, prop: string) => {
+      isMutable();
+      Reflect.deleteProperty(state, prop);
+      return true;
+    }
+  });
+
+  function syncState(newState: StateType) {
+    for (const key in newState) {
+      localState[key] = immutable ? deepFreeze(newState[key]) : newState[key];
+    }
+
+    for (const key in localState) {
+      if (!(key in newState)) {
+        Reflect.deleteProperty(localState, key);
+      }
+    }
+  }
+
+  function setState(newState: StateType) {
+    if (!hasChanged(localState, newState)) {
+      return;
+    }
+
+    syncState(newState);
+
+    subscribers.forEach((subscriber) => subscriber());
+  }
+
+  function getPulseMethod(key: string) {
+    return (...args: any[]) => {
+      const currentState = deepCloneUnfreeze(localState);
+      const pulse = pulses[key](currentState, ...args);
+
+      if (pulse instanceof Promise) {
+        return pulse
+          .then(() => setState(currentState))
+          .catch((error) => {
+            console.error("Error in pulse:", error);
+          });
+      }
+
+      setState(currentState);
+    };
+  }
+
+  const boundPulses: Record<string, Pulse<StateType>> = {};
+  for (const key in pulses) {
+    if (typeof pulses[key] !== "function") {
+      throw new Error(`Pulse '${key}' must be a function`);
+    }
+    boundPulses[key] = getPulseMethod(key);
+  }
+
+  const pulsesProxy = new Proxy(boundPulses, {
+    get: (pulses, prop: string) => {
+      if (!(prop in pulses)) {
+        throw new Error(`Pulse '${prop}' does not exist`);
+      }
+      return pulses[prop];
+    }
+  });
+
+  function usePulseStore(): [ProxyState<StateType>, PulsesType] {
+    return [proxyState, pulsesProxy as PulsesType];
+  }
+
+  syncState(localState);
+
+  return usePulseStore;
+}
+
+// Creates a pulse store with an immutable state by default
+export function createPulseStore<StateType extends State, PulsesType extends Pulses<StateType>>(
+  initialState: StateType,
+  pulses: PulsesType
+): () => [ProxyState<StateType>, PulsesType] {
+  return createStore(initialState, pulses, true);
+}
+
+// Creates a mutable store, useful for performance, but not recommended
+export function createMutableStore<StateType extends State, PulsesType extends Pulses<StateType>>(
+  initialState: StateType,
+  pulses: PulsesType
+): () => [ProxyState<StateType>, PulsesType] {
+  console.warn(
+    "Warning: You are working with a mutable state. This can lead to unpredictable behavior. All state changes made outside of a pulse will not trigger a re-render."
+  );
+  return createStore(initialState, pulses, false);
+}
+
+// Creates an effect
+export function createEffect(effect: Function) {
+  const runEffect = () => {
+    try {
+      effectStack.push(runEffect);
+      effect();
+    } finally {
+      effectStack.pop();
+    }
+  };
+
+  runEffect();
+}