valyrian.js 7.2.12 → 8.0.1

package/lib/index.ts

@@ -1,25 +1,25 @@
-/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable */
 declare global {
-  // eslint-disable-next-line vars-on-top, no-var, no-unused-vars
   var document: Document;
-  // eslint-disable-next-line no-unused-vars
   namespace JSX {
-    // eslint-disable-next-line no-unused-vars, no-use-before-define
     interface IntrinsicElements extends DefaultRecord {}
+    type Element = ReturnType<
+      typeof v | ((...args: any) => string | number | null | undefined | boolean | Promise<any>)
+    >;
+    type ComponentReturnType = string | number | null | undefined | boolean | Element | Element[];
   }
 }
 
 interface DefaultRecord extends Record<string | number | symbol, any> {}
 
-export interface VnodeProperties extends DefaultRecord {
+export interface Properties extends DefaultRecord {
   key?: string | number;
 }
 
 export interface DomElement extends Element, DefaultRecord {}
 
 export interface Component extends DefaultRecord {
-  // eslint-disable-next-line no-unused-vars, no-use-before-define
-  (props: VnodeProperties, children: any[]): Vnode | any;
+  (props: Properties, children: any[]): Vnode | any;
 }
 
 export interface POJOComponent extends DefaultRecord {
@@ -28,32 +28,24 @@ export interface POJOComponent extends DefaultRecord {
 
 export type ValyrianComponent = Component | POJOComponent;
 
-// eslint-disable-next-line no-use-before-define
 export interface VnodeComponentInterface extends Vnode {
   tag: ValyrianComponent;
 }
 
-// eslint-disable-next-line no-use-before-define
 export interface Children extends Array<Vnode | VnodeComponentInterface | ValyrianComponent | any> {}
 
 export interface Directive {
-  // eslint-disable-next-line no-unused-vars, no-use-before-define
-  (value: any, vnode: VnodeWithDom, oldProps: VnodeProperties | null): void | boolean;
+  (value: any, vnode: VnodeWithDom, oldProps: Properties | null): false | void | any;
 }
 
 export const isNodeJs = Boolean(typeof process !== "undefined" && process.versions && process.versions.node);
 
 export class Vnode {
   constructor(
-    // eslint-disable-next-line no-unused-vars
     public tag: string | Component | POJOComponent,
-    // eslint-disable-next-line no-unused-vars
-    public props: null | VnodeProperties,
-    // eslint-disable-next-line no-unused-vars
+    public props: null | Properties,
     public children: Children,
-    // eslint-disable-next-line no-unused-vars
     public dom?: DomElement,
-    // eslint-disable-next-line no-unused-vars
     public isSVG?: boolean
   ) {}
 }
@@ -61,31 +53,34 @@ export class Vnode {
 export interface VnodeWithDom extends Vnode {
   tag: string;
   dom: DomElement;
-  props: VnodeProperties;
+  props: Properties;
 }
 
+export const isPOJOComponent = (component: unknown): component is POJOComponent =>
+  Boolean(component && typeof component === "object" && "view" in component);
+
 export const isComponent = (component: unknown): component is Component =>
-  Boolean(typeof component === "function" || (component && typeof component === "object" && "view" in component));
+  Boolean(typeof component === "function" || isPOJOComponent(component));
 export const isVnode = (object?: unknown): object is Vnode => object instanceof Vnode;
 
 export const isVnodeComponent = (object?: unknown): object is VnodeComponentInterface => {
   return isVnode(object) && isComponent(object.tag);
 };
 
-export function v(tagOrComponent: string | Component, props: VnodeProperties, ...children: Children) {
+export function v(tagOrComponent: string | ValyrianComponent, props: Properties | null, ...children: Children) {
   return new Vnode(tagOrComponent, props, children);
 }
 
-v.fragment = (_: VnodeProperties, ...children: Children) => children;
+v.fragment = (_: Properties, ...children: Children) => children;
 
-export function domToVnode(dom: any): VnodeWithDom | void {
+export function hidrateDomToVnode(dom: any): VnodeWithDom | void {
   if (dom.nodeType === 3) {
     return dom.nodeValue;
   }
 
   if (dom.nodeType === 1) {
     const tag = dom.nodeName.toLowerCase();
-    const props = {} as VnodeProperties;
+    const props = {} as Properties;
     const children = [] as Children;
 
     for (let i = 0, l = dom.childNodes.length; i < l; i++) {
@@ -93,7 +88,7 @@ export function domToVnode(dom: any): VnodeWithDom | void {
       if (childDom.nodeType === 3) {
         children.push(childDom.nodeValue);
       } else if (childDom.nodeType === 1) {
-        const childVnode = domToVnode(childDom);
+        const childVnode = hidrateDomToVnode(childDom);
         children.push(childVnode);
       }
     }
@@ -104,14 +99,17 @@ export function domToVnode(dom: any): VnodeWithDom | void {
       props[attr.nodeName] = attr.nodeValue;
     }
 
-    return new Vnode(tag, props, children, dom, tag === "svg") as VnodeWithDom;
+    const vnode = new Vnode(tag, props, children);
+    vnode.dom = dom;
+    vnode.isSVG = tag === "svg";
+    return vnode as VnodeWithDom;
   }
 }
 
 export function trust(htmlString: string) {
   const div = document.createElement("div");
   div.innerHTML = htmlString.trim();
-  return Array.from(div.childNodes).map(domToVnode);
+  return Array.from(div.childNodes).map(hidrateDomToVnode);
 }
 
 let mainComponent: VnodeComponentInterface | null = null;
@@ -155,24 +153,17 @@ const callSet = (set: Set<Function>) => {
   set.clear();
 };
 
-const handleVIf = (shouldRender: boolean): Directive => {
-  return (value, vnode) => {
-    const bool = shouldRender !== Boolean(value);
-    if (bool) {
+export const directives: Record<string, Directive> = {
+  "v-if": (value, vnode) => {
+    if (!Boolean(value)) {
       const parentNode = vnode.dom?.parentNode;
       if (parentNode) {
-        const newdom = document.createTextNode("");
-        parentNode.replaceChild(newdom, vnode.dom);
+        parentNode.replaceChild(document.createTextNode(""), vnode.dom);
       }
 
       return false;
     }
-  };
-};
-
-export const directives: Record<string, Directive> = {
-  "v-if": handleVIf(true),
-  "v-unless": handleVIf(false),
+  },
 
   "v-show": (value, vnode) => {
     const bool = Boolean(value);
@@ -184,19 +175,23 @@ export const directives: Record<string, Directive> = {
   },
 
   "v-html": (value, vnode) => {
-    vnode.children = [trust(value as string)];
+    vnode.children = trust(value as string);
   },
 
   // The "v-model" directive binds the value of an input element to a model property
-  "v-model": (val, vnode) => {
+  "v-model": (model, vnode) => {
     // eslint-disable-next-line prefer-const
-    let [model, property, event]: any[] = val as any[];
+    if ("name" in vnode.props === false) {
+      return;
+    }
+
     let value;
+    const property = vnode.props.name;
+    let event = "oninput";
+
     // This function updates the model property when the input element's value changes
     let handler = (e: Event) => (model[property] = (e.target as DomElement & Record<string, any>).value);
     if (vnode.tag === "input") {
-      // If the element is an input, use the "input" event by default
-      event = event || "oninput";
       // Depending on the type of input element, use a different handler function
       switch (vnode.props.type) {
         case "checkbox": {
@@ -247,7 +242,7 @@ export const directives: Record<string, Directive> = {
       }
     } else if (vnode.tag === "select") {
       // If the element is a select element, use the "click" event by default
-      event = event || "onclick";
+      event = "onclick";
       if (vnode.props.multiple) {
         // If the select element allows multiple selections, update the model property with an array of selected values
         handler = (e: Event & Record<string, any>) => {
@@ -283,8 +278,6 @@ export const directives: Record<string, Directive> = {
         });
       }
     } else if (vnode.tag === "textarea") {
-      // If the element is a textarea, use the "input" event by default
-      event = event || "oninput";
       // Set the textarea's content to the value of the model property
       vnode.children = [model[property]];
     }
@@ -380,6 +373,10 @@ export function directive(name: string, directive: Directive) {
   reservedProps.add(directiveName);
 }
 
+export function setPropNameReserved(name: string) {
+  reservedProps.add(name);
+}
+
 const eventListenerNames = new Set<string>();
 
 function eventListener(e: Event) {
@@ -408,6 +405,7 @@ function sharedSetAttribute(name: string, value: any, newVnode: VnodeWithDom): v
   const newVnodeDom = newVnode.dom;
   if (typeof value === "function") {
     if (!eventListenerNames.has(name)) {
+      // We attach the delegated event listener to the main vnode dom element, which is the root of the component
       (mainVnode as VnodeWithDom).dom.addEventListener(name.slice(2), eventListener);
       eventListenerNames.add(name);
     }
@@ -433,87 +431,103 @@ export function setAttribute(name: string, value: any, newVnode: VnodeWithDom):
   }
 }
 
-function removeAttributes(vnode: VnodeWithDom, oldProps: VnodeProperties | null): void {
-  if (!oldProps) {
-    return;
-  }
-
-  const vnodeDom = vnode.dom;
-  const vnodeProps = vnode.props;
-
-  for (const name in oldProps) {
-    if (name in vnodeProps === false && !eventListenerNames.has(name) && !reservedProps.has(name)) {
-      if (name in vnodeDom) {
-        vnodeDom[name] = null;
-      } else {
-        vnodeDom.removeAttribute(name);
+export function updateAttributes(newVnode: VnodeWithDom, oldProps: Properties | null): void {
+  const vnodeDom = newVnode.dom;
+  const vnodeProps = newVnode.props;
+
+  if (oldProps) {
+    for (const name in oldProps) {
+      if (name in vnodeProps === false && !eventListenerNames.has(name) && !reservedProps.has(name)) {
+        if (name in vnodeDom) {
+          vnodeDom[name] = null;
+        } else {
+          vnodeDom.removeAttribute(name);
+        }
       }
     }
   }
-}
 
-function addProperties(vnode: VnodeWithDom, oldProps: VnodeProperties | null) {
-  const vnodeProps = vnode.props;
   for (const name in vnodeProps) {
     if (directives[name]) {
-      if (directives[name](vnodeProps[name], vnode, oldProps) === false) {
+      if (directives[name](vnodeProps[name], newVnode, oldProps) === false) {
         break;
       }
       continue;
     }
 
-    if (reservedProps.has(name)) {
-      continue;
+    if (!reservedProps.has(name)) {
+      sharedSetAttribute(name, vnodeProps[name], newVnode);
     }
-
-    sharedSetAttribute(name, vnodeProps[name], vnode);
   }
 }
 
-export function updateAttributes(newVnode: VnodeWithDom, oldProps: VnodeProperties | null): void {
-  removeAttributes(newVnode, oldProps);
-  addProperties(newVnode, oldProps);
-}
-
 export function createElement(tag: string, isSVG: boolean): DomElement {
   return isSVG
     ? document.createElementNS("http://www.w3.org/2000/svg", tag)
     : (document.createElement(tag) as DomElement);
 }
 
-function flatTree(newVnode: VnodeWithDom, children: Children) {
+function flatTree(newVnode: VnodeWithDom) {
   current.vnode = newVnode;
+
+  if ("v-for" in newVnode.props) {
+    const children = [];
+    const set = newVnode.props["v-for"];
+    const l = set.length;
+    const callback = newVnode.children[0];
+
+    for (let i = 0; i < l; i++) {
+      const newChild = callback(set[i], i);
+      if (newChild instanceof Vnode) {
+        newChild.props = newChild.props || {};
+        newChild.isSVG = newVnode.isSVG || newChild.tag === "svg";
+      }
+      children[i] = newChild;
+    }
+
+    return children;
+  }
+
   let i = 0;
+  const originalChildren = newVnode.children;
+  let children = originalChildren;
 
   while (i < children.length) {
     const newChild = children[i];
 
     if (newChild == null) {
+      if (children === originalChildren) {
+        children = [...originalChildren];
+      }
       children.splice(i, 1);
       continue;
     }
 
     if (Array.isArray(newChild)) {
+      if (children === originalChildren) {
+        children = [...originalChildren];
+      }
       children.splice(i, 1, ...newChild);
       continue;
     }
 
     if (newChild instanceof Vnode) {
-      if (newChild.props === null) {
-        newChild.props = {};
-      }
+      newChild.props = newChild.props || {};
+      newChild.isSVG = newVnode.isSVG || newChild.tag === "svg";
 
       if (typeof newChild.tag !== "string") {
-        const component = newChild.tag;
+        if (children === originalChildren) {
+          children = [...originalChildren];
+        }
 
-        current.component = newChild.tag;
-        children[i] = ("view" in component ? component.view : component).bind(component)(
+        const component = (current.component = newChild.tag);
+
+        children[i] = (isPOJOComponent(component) ? component.view : component).bind(component)(
           newChild.props,
           newChild.children
         );
+
         continue;
-      } else {
-        newChild.isSVG = newVnode.isSVG || newChild.tag === "svg";
       }
     }
 
@@ -523,22 +537,6 @@ function flatTree(newVnode: VnodeWithDom, children: Children) {
   return children;
 }
 
-function handleVFor(newVnode: VnodeWithDom) {
-  if ("v-for" in newVnode.props) {
-    const set = newVnode.props["v-for"];
-    const children = [];
-    const callback = newVnode.children[0];
-    children.length = set.length;
-
-    for (let i = 0, l = set.length; i < l; i++) {
-      children[i] = callback(set[i], i);
-    }
-
-    return children;
-  }
-  return [...newVnode.children];
-}
-
 function createNewElement(newChild: VnodeWithDom, newVnode: VnodeWithDom, oldChild: DomElement | null) {
   const dom = createElement(newChild.tag, newChild.isSVG as boolean);
   if (oldChild) {
@@ -547,14 +545,14 @@ function createNewElement(newChild: VnodeWithDom, newVnode: VnodeWithDom, oldChi
     newVnode.dom.appendChild(dom);
   }
   newChild.dom = dom;
-  addProperties(newChild, null);
+  updateAttributes(newChild, null);
   newChild.dom.props = newChild.props;
   if ("v-text" in newChild.props) {
     newChild.dom.textContent = newChild.props["v-text"];
     return;
   }
 
-  const children = flatTree(newChild, handleVFor(newChild));
+  const children = flatTree(newChild);
   if (children.length === 0) {
     newChild.dom.textContent = "";
     return;
@@ -625,8 +623,8 @@ function patchKeyed(newVnode: VnodeWithDom, children: Children) {
 }
 
 // eslint-disable-next-line complexity
-export function patch(newVnode: VnodeWithDom): void {
-  const children = flatTree(newVnode, handleVFor(newVnode));
+function patch(newVnode: VnodeWithDom): void {
+  const children = flatTree(newVnode);
 
   const dom = newVnode.dom;
 
@@ -661,23 +659,29 @@ export function patch(newVnode: VnodeWithDom): void {
   }
 
   for (let i = 0; i < childrenLength; i++) {
+    const newChild = children[i] as VnodeWithDom;
+    const isText = newChild instanceof Vnode === false;
     const oldChild = oldDomChildren[i];
-    const newChild = children[i];
 
     if (!oldChild) {
-      createNewElement(newChild, newVnode, null);
+      if (isText) {
+        newVnode.dom.appendChild(document.createTextNode(newChild as unknown as string));
+        continue;
+      }
+
+      createNewElement(newChild as VnodeWithDom, newVnode, null);
       continue;
     }
 
-    if (newChild instanceof Vnode === false) {
+    if (isText) {
       if (oldChild.nodeType !== 3) {
-        newVnode.dom.replaceChild(document.createTextNode(newChild), oldChild);
+        newVnode.dom.replaceChild(document.createTextNode(newChild as unknown as string), oldChild);
         continue;
       }
 
       // eslint-disable-next-line eqeqeq
-      if (oldChild.nodeValue != newChild) {
-        oldChild.nodeValue = newChild;
+      if (oldChild.nodeValue != (newChild as unknown as string)) {
+        oldChild.nodeValue = newChild as unknown as string;
       }
       continue;
     }
@@ -700,7 +704,7 @@ export function patch(newVnode: VnodeWithDom): void {
     }
 
     newChild.dom = oldChild;
-    updateAttributes(newChild as VnodeWithDom, oldChild.props || null);
+    updateAttributes(newChild, oldChild.props || null);
     oldChild.props = newChild.props;
     if ("v-text" in newChild.props) {
       // eslint-disable-next-line eqeqeq
@@ -725,16 +729,27 @@ export function updateVnode(vnode: VnodeWithDom): string | void {
   isMounted = true;
   current.vnode = null;
   current.component = null;
-  if (isNodeJs) {
-    return vnode.dom.innerHTML;
-  }
 }
 
-export function update(): void | string {
+export function update(): string {
   if (mainVnode) {
     mainVnode.children = [mainComponent];
-    return updateVnode(mainVnode);
+    updateVnode(mainVnode as VnodeWithDom);
+    if (isNodeJs) {
+      return mainVnode.dom.innerHTML;
+    }
   }
+  return "";
+}
+
+let debouncedUpdateTimeout: any;
+
+const clearDebouncedUpdateMethod = isNodeJs ? clearTimeout : cancelAnimationFrame;
+const setDebouncedUpdateMethod = isNodeJs ? () => setTimeout(update, 5) : () => requestAnimationFrame(update);
+
+export function debouncedUpdate() {
+  clearDebouncedUpdateMethod(debouncedUpdateTimeout);
+  debouncedUpdateTimeout = setDebouncedUpdateMethod();
 }
 
 export function unmount() {
@@ -755,20 +770,22 @@ export function unmount() {
     current.event = null;
     return result;
   }
+
+  return "";
 }
 
-export function mount(dom: string | DomElement, component: any) {
+export function mount(dom: string | DomElement, component: ValyrianComponent | VnodeComponentInterface | any) {
   const container =
     typeof dom === "string" ? (isNodeJs ? createElement(dom, dom === "svg") : document.querySelector(dom)) : dom;
 
   if (isComponent(component)) {
-    mainComponent = new Vnode(component, {}, []) as VnodeComponentInterface;
+    mainComponent = v(component, {}, []) as VnodeComponentInterface;
   } else if (isVnodeComponent(component)) {
     mainComponent = component;
   } else {
-    mainComponent = new Vnode(() => component, {}, []) as VnodeComponentInterface;
+    mainComponent = v(() => component, {}, []) as VnodeComponentInterface;
   }
 
-  mainVnode = domToVnode(container) as VnodeWithDom;
+  mainVnode = hidrateDomToVnode(container) as VnodeWithDom;
   return update();
 }

package/lib/native-store/index.ts

@@ -0,0 +1,106 @@
+import { isNodeJs } from "valyrian.js";
+
+/* eslint-disable no-console */
+export enum StorageType {
+  // eslint-disable-next-line no-unused-vars
+  Session = "session",
+  // eslint-disable-next-line no-unused-vars
+  Local = "local"
+}
+
+export interface NativeStorageInterface {
+  state: Record<string, any>;
+  // eslint-disable-next-line no-unused-vars
+  set(key: string, value: any): void;
+  // eslint-disable-next-line no-unused-vars
+  get(key: string): any;
+  // eslint-disable-next-line no-unused-vars
+  delete(key: string): void;
+  load(): void;
+  clear(): void;
+}
+
+const ids = new Set<string>();
+
+function getStorage(storageType: StorageType) {
+  if (isNodeJs && typeof localStorage === "undefined") {
+    throw new Error(
+      `localStorage and sessionStorage are not available in Node.js, to use it in your project, you need to "import "valyrian.js/node"`
+    );
+  }
+  return storageType === StorageType.Session ? sessionStorage : localStorage;
+}
+
+export function createNativeStore<T>(
+  key: string,
+  definition: Record<string, any> = {},
+  storageType: StorageType = StorageType.Local,
+  reuseIfExist = false
+): NativeStorageInterface & T {
+  const nativeStore = getStorage(storageType);
+
+  if (ids.has(key)) {
+    if (reuseIfExist) {
+      // eslint-disable-next-line no-console
+      console.warn(`Store with key ${key} already exists and will be reused`);
+    } else {
+      throw new Error(`Store with key ${key} already exists`);
+    }
+  }
+  ids.add(key);
+
+  const id = key;
+
+  const Store: NativeStorageInterface = {
+    state: {},
+    set(key, value) {
+      try {
+        this.state[key] = value;
+        nativeStore.setItem(id, JSON.stringify(this.state));
+      } catch (e) {
+        console.error("Error setting item in storage:", e);
+      }
+    },
+    get(key) {
+      if (Object.keys(this.state).length === 0) {
+        this.load();
+      }
+      return this.state[key];
+    },
+    delete(key) {
+      try {
+        Reflect.deleteProperty(this.state, key);
+        nativeStore.setItem(id, JSON.stringify(this.state));
+      } catch (e) {
+        console.error("Error deleting item in storage:", e);
+      }
+    },
+    load() {
+      try {
+        const state = nativeStore.getItem(id);
+        if (!state) {
+          this.state = {};
+          nativeStore.setItem(id, JSON.stringify(this.state));
+          return;
+        }
+        this.state = JSON.parse(state);
+      } catch (e) {
+        console.error("Error loading state from storage:", e);
+        this.state = {};
+      }
+    },
+    clear() {
+      try {
+        this.state = {};
+        nativeStore.removeItem(id);
+      } catch (e) {
+        console.error("Error clearing storage:", e);
+      }
+    },
+    ...definition
+  };
+
+  Store.load();
+
+  return Store as NativeStorageInterface & T;
+}

package/lib/node/index.ts

@@ -2,13 +2,15 @@ import { document, domToHtml, domToHyperscript, htmlToDom, htmlToHyperscript } f
 import { mount, unmount } from "valyrian.js";
 
 import FormData from "form-data";
-// import fetch from "node-fetch";
 import { icons } from "./utils/icons";
 import { inline } from "./utils/inline";
 import { sw } from "./utils/sw";
+import { SessionStorage } from "./utils/session-storage";
 
 global.FormData = FormData as any;
 global.document = document as any;
+global.sessionStorage = new SessionStorage();
+global.localStorage = new SessionStorage();
 
 function render(...args: any[]) {
   const Component = () => args;

package/lib/node/utils/icons.ts

@@ -1,7 +1,7 @@
 import fs from "fs";
 import { htmlToHyperscript } from "./tree-adapter";
 
-interface IconsOptions {
+export interface IconsOptions {
   iconsPath: string | null;
   linksViewPath: string | null;
   logging: boolean;
@@ -12,12 +12,12 @@ interface IconsOptions {
   appDescription?: string;
   developerName?: string;
   developerURL?: string;
-  dir?: "auto" | "ltr" | "rtl";
+  dir?: "auto" | "ltr" | "rtl" | string;
   lang?: string;
   background?: string;
   theme_color?: string;
-  display?: "browser" | "standalone";
-  orientation?: "any" | "portrait" | "landscape";
+  display?: "browser" | "standalone" | string;
+  orientation?: "any" | "portrait" | "landscape" | string;
   start_url?: string;
   version?: string;
   icons: {

package/lib/node/utils/inline.ts

@@ -126,6 +126,8 @@ export async function inline(
   } else if (typeof file === "object" && "raw" in file) {
     return { map: null, ...file };
   }
+
+  throw new Error(`Unknown file type: ${file}`);
 }
 
 inline.uncss = async function (