valyrian.js 7.2.9 → 7.2.11

package/lib/dataset/index.ts

@@ -35,9 +35,9 @@ function deepFreeze(obj: any) {
 }
 
 export class DataSet<T> implements DataSetInterface<T> {
-  #vnode: VnodeWithDom;
+  #vnode: VnodeWithDom | null = null;
   // eslint-disable-next-line no-unused-vars
-  #handler: DataSetHandler<T>;
+  #handler: DataSetHandler<T> | null = null;
   #data: T[] = [];
   #isFrozen = false;
   #dataProxy: T[] | null = null;
@@ -64,7 +64,7 @@ export class DataSet<T> implements DataSetInterface<T> {
       set: () => {
         throw new Error("You need to use the add, update or delete methods to change the data");
       },
-      get(target, prop) {
+      get(target: any, prop: string) {
         return target[prop];
       },
       deleteProperty: () => {
@@ -86,6 +86,10 @@ export class DataSet<T> implements DataSetInterface<T> {
 
   reset(data: T[]) {
     this.#setData(data);
+    if (this.#vnode === null || this.#handler === null) {
+      return;
+    }
+
     let vnode = this.#vnode;
     let handler = this.#handler;
 
@@ -132,6 +136,10 @@ export class DataSet<T> implements DataSetInterface<T> {
         this.#data.push(...data);
       }
 
+      if (this.#vnode === null || this.#handler === null) {
+        return;
+      }
+
       let vnode = this.#vnode;
       let handler = this.#handler;
 
@@ -147,8 +155,8 @@ export class DataSet<T> implements DataSetInterface<T> {
     }
   }
 
-  delete(index) {
-    if (this.#data) {
+  delete(index: number) {
+    if (this.#data && this.#vnode) {
       let child = this.#vnode.children[index];
       if (this.#isFrozen) {
         this.#setData(this.data.filter((_, i) => i !== index));
@@ -161,8 +169,8 @@ export class DataSet<T> implements DataSetInterface<T> {
     }
   }
 
-  update(index, item: Partial<T>) {
-    if (this.#data) {
+  update(index: number, item: Partial<T>) {
+    if (this.#data && this.#vnode && this.#handler) {
       let child = this.#vnode.children[index];
       if (this.#isFrozen) {
         this.#setData(this.#data.map((d, i) => (i === index ? { ...d, ...item } : d)));

package/lib/hooks/index.ts

@@ -36,7 +36,7 @@ export const createHook = function createHook({
   return (...args: any[]) => {
     let { component, vnode } = current as CurrentOnPatch;
 
-    let hook = null;
+    let hook: any = null;
 
     if (vnode) {
       // Init the components array for the current vnode
@@ -109,7 +109,7 @@ export const useState = createHook({
     get.toJSON = get.valueOf = get;
     get.toString = () => `${value}`;
 
-    function set(newValue) {
+    function set(newValue: any) {
       // Prevent default event if it exists
       if (current.event) {
         current.event.preventDefault();

package/lib/index.ts

@@ -3,26 +3,24 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable complexity */
 
+interface DefaultRecord extends Record<string | number | symbol, any> {}
+
 // The VnodeProperties interface represents properties that can be passed to a virtual node.
-export interface VnodeProperties {
+export interface VnodeProperties extends DefaultRecord {
   // A unique key for the virtual node, which can be a string or a number.
   // This is useful for optimizing updates in a list of nodes.
   key?: string | number;
   // A state object that is associated with the virtual node.
   state?: any;
-  // An index signature that allows for any other properties to be added.
-  [key: string | number | symbol]: any;
 }
 
 // The DomElement interface extends the Element interface with an index signature.
 // This allows for any additional properties to be added to DOM elements.
-export interface DomElement extends Element {
-  [key: string]: any;
-}
+export interface DomElement extends Element, DefaultRecord {}
 
 // The VnodeInterface represents a virtual node. It has a number of optional fields,
 // including a tag, props, children, and a DOM element.
-export interface VnodeInterface {
+export interface VnodeInterface extends DefaultRecord {
   // The constructor for the virtual node. It takes a tag, props, and children as arguments.
   // The tag can be a string, a component, or a POJO component.
   // eslint-disable-next-line no-unused-vars
@@ -39,8 +37,6 @@ export interface VnodeInterface {
   dom?: DomElement;
   // A boolean indicating whether the virtual node has been processed in the keyed diffing algorithm.
   processed?: boolean;
-  // An index signature that allows for any additional properties to be added to the virtual node.
-  [key: string | number | symbol]: any;
 }
 
 // The VnodeWithDom interface represents a virtual node that has a DOM element associated with it.
@@ -50,28 +46,24 @@ export interface VnodeWithDom extends VnodeInterface {
 
 // The Component interface represents a function that returns a virtual node or a list of virtual nodes.
 // It can also have additional properties.
-export interface Component {
+export interface Component extends DefaultRecord {
   // The function that returns a virtual node or a list of virtual nodes.
   // It can take props and children as arguments.
   // eslint-disable-next-line no-unused-vars
   (props?: VnodeProperties | null, ...children: any[]): VnodeInterface | Children | any;
-  // An index signature that allows for any additional properties to be added to the component.
-  [key: string]: any;
 }
 
 // The POJOComponent interface represents a "plain old JavaScript object" (POJO) component.
 // It has a view function that returns a virtual node or a list of virtual nodes,
 // as well as optional props and children.
 // It can be used also to identify class instance components.
-export interface POJOComponent {
+export interface POJOComponent extends DefaultRecord {
   // The view function that returns a virtual node or a list of virtual nodes.
   view: Component;
   // The props for the component.
   props?: VnodeProperties | null;
   // The children for the component.
   children?: any[];
-  // An index signature that allows for any additional properties to be added to the POJO component.
-  [key: string]: any;
 }
 
 // The VnodeComponentInterface represents a virtual node that has a component as its tag.
@@ -95,15 +87,11 @@ export interface Directive {
 }
 
 // The Directives interface is a mapping of directive names to Directive functions.
-export interface Directives {
-  [key: string]: Directive;
-}
+export interface Directives extends Record<string, Directive> {}
 
 // The ReservedProps interface is a mapping of reserved prop names to the value `true`.
 // These prop names cannot be used as custom prop names.
-export interface ReservedProps {
-  [key: string]: true;
-}
+export interface ReservedProps extends Record<string, true> {}
 
 // The Current interface represents the current component and virtual node that are being processed.
 export interface Current {
@@ -127,6 +115,7 @@ export interface V {
   // eslint-disable-next-line no-unused-vars, no-use-before-define
   fragment(_: any, ...children: Children): Children;
 }
+
 // 'textTag' is a constant string that is used to represent text nodes in the virtual DOM.
 const textTag = "#text";
 
@@ -153,8 +142,10 @@ export const Vnode = function Vnode(this: VnodeInterface, tag: string, props: Vn
 
 // 'isComponent' is a function that returns true if the given 'component' is a valid component and false otherwise.
 // A component is either a function or an object with a 'view' function.
-export function isComponent(component): component is Component {
-  return component && (typeof component === "function" || (typeof component === "object" && "view" in component));
+export function isComponent(component: unknown): component is Component {
+  return Boolean(
+    component && (typeof component === "function" || (typeof component === "object" && "view" in component))
+  );
 }
 
 // 'isVnode' is a function that returns true if the given 'object' is a 'Vnode' instance and false otherwise.
@@ -268,28 +259,28 @@ const onUpdateSet: Set<Function> = new Set();
 const onUnmountSet: Set<Function> = new Set();
 
 // These functions allow users to register callbacks for the corresponding lifecycle events.
-export function onMount(callback) {
+export function onMount(callback: Function) {
   if (!isMounted) {
     onMountSet.add(callback);
   }
 }
 
-export function onUpdate(callback) {
+export function onUpdate(callback: Function) {
   onUpdateSet.add(callback);
 }
 
-export function onCleanup(callback) {
+export function onCleanup(callback: Function) {
   onCleanupSet.add(callback);
 }
 
-export function onUnmount(callback) {
+export function onUnmount(callback: Function) {
   if (!isMounted) {
     onUnmountSet.add(callback);
   }
 }
 
 // This function is used to call all the callbacks in a given set.
-function callSet(set) {
+function callSet(set: Set<Function>) {
   for (let callback of set) {
     callback();
   }
@@ -684,13 +675,13 @@ export function patch(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void {
     let newTreeLength = newTree.length;
 
     // Create an object that maps keys to indices in the old tree
-    let oldKeyedList: { [key: string]: number } = {};
+    let oldKeyedList: Record<string, number> = {};
     for (let i = 0; i < oldTreeLength; i++) {
       oldKeyedList[oldTree[i].props.key] = i;
     }
 
     // Create an object that maps keys to indices in the new tree
-    let newKeyedList: { [key: string]: number } = {};
+    let newKeyedList: Record<string, number> = {};
     for (let i = 0; i < newTreeLength; i++) {
       newKeyedList[newTree[i].props.key] = i;
     }
@@ -989,7 +980,7 @@ export function unmount() {
   }
 }
 // This function takes in a DOM element or a DOM element selector and a component to be mounted on it.
-export function mount(dom, component) {
+export function mount(dom: string | DomElement, component: any) {
   // Check if the 'dom' argument is a string. If it is, select the first element that matches the given selector.
   // Otherwise, use the 'dom' argument as the container.
   let container =

package/lib/interfaces.ts.bak

@@ -0,0 +1,141 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-unused-vars */
+declare module "valyrian.js" {
+  interface DefaultRecord extends Record<string | number | symbol, any> {}
+
+  // The VnodeProperties interface represents properties that can be passed to a virtual node.
+  export interface VnodeProperties extends DefaultRecord {
+    // A unique key for the virtual node, which can be a string or a number.
+    // This is useful for optimizing updates in a list of nodes.
+    key?: string | number;
+    // A state object that is associated with the virtual node.
+    state?: any;
+  }
+
+  // The DomElement interface extends the Element interface with an index signature.
+  // This allows for any additional properties to be added to DOM elements.
+  export interface DomElement extends Element, DefaultRecord {}
+
+  // The VnodeInterface represents a virtual node. It has a number of optional fields,
+  // including a tag, props, children, and a DOM element.
+  export interface VnodeInterface extends DefaultRecord {
+    // The constructor for the virtual node. It takes a tag, props, and children as arguments.
+    // The tag can be a string, a component, or a POJO component.
+    // eslint-disable-next-line no-unused-vars
+    new (tag: string | Component | POJOComponent, props: VnodeProperties, children: Children): VnodeInterface;
+    // The tag for the virtual node. It can be a string, a component, or a POJO component.
+    tag: string | Component | POJOComponent;
+    // The props for the virtual node.
+    props: VnodeProperties;
+    // The children for the virtual node.
+    children: Children;
+    // A boolean indicating whether the virtual node is an SVG element.
+    isSVG?: boolean;
+    // The DOM element that corresponds to the virtual node.
+    dom?: DomElement;
+    // A boolean indicating whether the virtual node has been processed in the keyed diffing algorithm.
+    processed?: boolean;
+  }
+
+  // The VnodeWithDom interface represents a virtual node that has a DOM element associated with it.
+  export interface VnodeWithDom extends VnodeInterface {
+    dom: DomElement;
+  }
+
+  // The Component interface represents a function that returns a virtual node or a list of virtual nodes.
+  // It can also have additional properties.
+  export interface Component extends DefaultRecord {
+    // The function that returns a virtual node or a list of virtual nodes.
+    // It can take props and children as arguments.
+    // eslint-disable-next-line no-unused-vars
+    (props?: VnodeProperties | null, ...children: any[]): VnodeInterface | Children | any;
+  }
+
+  // The POJOComponent interface represents a "plain old JavaScript object" (POJO) component.
+  // It has a view function that returns a virtual node or a list of virtual nodes,
+  // as well as optional props and children.
+  // It can be used also to identify class instance components.
+  export interface POJOComponent extends DefaultRecord {
+    // The view function that returns a virtual node or a list of virtual nodes.
+    view: Component;
+    // The props for the component.
+    props?: VnodeProperties | null;
+    // The children for the component.
+    children?: any[];
+  }
+
+  // The VnodeComponentInterface represents a virtual node that has a component as its tag.
+  // It has props and children, just like a regular virtual node.
+  export interface VnodeComponentInterface extends VnodeInterface {
+    tag: Component | POJOComponent;
+    props: VnodeProperties;
+    children: Children;
+  }
+
+  // The Children interface represents a list of virtual nodes or other values.
+  export interface Children extends Array<VnodeInterface | VnodeComponentInterface | any> {}
+
+  // The Directive interface represents a function that can be applied to a virtual node.
+  // It receives the value, virtual node, and old virtual node as arguments, and can return a boolean value.
+  // If only the virtual node is passed, it means its the on create phase for the v-node.
+  // If the old virtual node is also passed, it means its the on update phase for the v-node.
+  export interface Directive {
+    // eslint-disable-next-line no-unused-vars
+    (value: any, vnode: VnodeWithDom, oldVnode?: VnodeWithDom): void | boolean;
+  }
+
+  // The Directives interface is a mapping of directive names to Directive functions.
+  export interface Directives extends Record<string, Directive> {}
+
+  // The ReservedProps interface is a mapping of reserved prop names to the value `true`.
+  // These prop names cannot be used as custom prop names.
+  export interface ReservedProps extends Record<string, true> {}
+
+  // The Current interface represents the current component and virtual node that are being processed.
+  export interface Current {
+    // The current component. It can be a component, a POJO component, or null.
+    component: Component | POJOComponent | null;
+    // The current virtual node. It must have a DOM element associated with it.
+    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.
+  // It takes a tag or component, props, and children as arguments, and returns a virtual node.
+  export interface V {
+    // eslint-disable-next-line no-unused-vars, no-use-before-define
+    (tagOrComponent: string | Component | POJOComponent, props: VnodeProperties | null, ...children: Children):
+      | VnodeInterface
+      | VnodeComponentInterface;
+    // eslint-disable-next-line no-unused-vars, no-use-before-define
+    fragment(_: any, ...children: Children): Children;
+  }
+
+  export let isNodeJs: boolean;
+  export function createDomElement(tag: string, isSVG?: boolean): DomElement;
+  export const Vnode: VnodeInterface;
+  export function isComponent(component: any): component is Component;
+  export const isVnode: (object?: unknown | VnodeInterface) => object is VnodeInterface;
+  export const isVnodeComponent: (object?: unknown | VnodeComponentInterface) => object is VnodeComponentInterface;
+  export function domToVnode(dom: any): VnodeWithDom;
+  export function trust(htmlString: string): any;
+  export const current: Current;
+  export const reservedProps: Record<string, true>;
+  export function onMount(callback: any): void;
+  export function onUpdate(callback: any): void;
+  export function onCleanup(callback: any): void;
+  export function onUnmount(callback: any): void;
+  export const directives: Directives;
+  export function directive(name: string, directive: Directive): void;
+  export function setAttribute(name: string, value: any, newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void;
+  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/node/utils/inline.ts

@@ -6,7 +6,11 @@ import esbuild from "esbuild";
 /* eslint-disable sonarjs/cognitive-complexity */
 import fs from "fs";
 
-export async function inline(file: string | { raw: string; map?: string | null; file: string }, options: Record<string, any> = {}) {
+// eslint-disable-next-line complexity
+export async function inline(
+  file: string | { raw: string; map?: string | null; file: string },
+  options: Record<string, any> = {}
+) {
   if (typeof file === "string") {
     let ext = file.split(".").pop();
     if (ext && /(js|cjs|jsx|mjs|ts|tsx)/.test(ext)) {
@@ -69,6 +73,9 @@ export async function inline(file: string | { raw: string; map?: string | null;
       };
 
       let result = await esbuild.build(esbuildOptions);
+      if (result.outputFiles?.length !== 2) {
+        throw new Error(result.errors.join("\n"));
+      }
 
       if (options.compact) {
         const terser = await import("terser");
@@ -86,6 +93,10 @@ export async function inline(file: string | { raw: string; map?: string | null;
           ...(options.terser || {})
         });
 
+        if (!result2.code || !result2.map) {
+          throw new Error("Unknown error");
+        }
+
         let mapBase64 = Buffer.from(result2.map.toString()).toString("base64");
         let suffix = `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${mapBase64}`;
         return { raw: result2.code, map: suffix, file };
@@ -117,7 +128,11 @@ export async function inline(file: string | { raw: string; map?: string | null;
   }
 }
 
-inline.uncss = async function (renderedHtml: (string | Promise<string>)[], css: string, options: Record<string, any> = {}) {
+inline.uncss = async function (
+  renderedHtml: (string | Promise<string>)[],
+  css: string,
+  options: Record<string, any> = {}
+) {
   let html = await Promise.all(renderedHtml);
 
   let contents = html.map((item) => {

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

@@ -56,26 +56,30 @@ export class Node implements Node {
   constructor() {}
 
   appendChild<T extends Node>(node: T): T {
-    node.parentNode && node.parentNode.removeChild(node as Node);
-    this.childNodes.push(node);
-    node.parentNode = this;
+    if (node) {
+      node.parentNode && node.parentNode.removeChild(node as Node);
+      this.childNodes.push(node);
+      node.parentNode = this;
+    }
     return node;
   }
 
   insertBefore<T extends Node>(node: T, child: Node | null): T {
-    node.parentNode && node.parentNode.removeChild(node as Node);
-    node.parentNode = this;
-    if (child) {
-      let idx = this.childNodes.indexOf(child);
-      this.childNodes.splice(idx, 0, node);
-    } else {
-      this.childNodes.push(node);
+    if (node) {
+      node.parentNode && node.parentNode.removeChild(node as Node);
+      node.parentNode = this;
+      if (child) {
+        let idx = this.childNodes.indexOf(child);
+        this.childNodes.splice(idx, 0, node);
+      } else {
+        this.childNodes.push(node);
+      }
     }
     return node;
   }
 
   replaceChild<T extends Node>(node: Node, child: T): T {
-    if (child && child.parentNode === this) {
+    if (node && child && child.parentNode === this) {
       this.insertBefore(node, child);
       child.parentNode && child.parentNode.removeChild(child);
     }

package/lib/router/index.ts

@@ -65,7 +65,11 @@ interface RouterInterface {
 
 interface RedirectFunction {
   // eslint-disable-next-line no-unused-vars
-  (url: string, parentComponent?: Component, preventPushState?: boolean): string | void;
+  (
+    path: string,
+    parentComponent?: Component | POJOComponent | VnodeComponentInterface,
+    preventPushState?: boolean
+  ): Promise<string | void>;
 }
 
 function flat(array: any) {
@@ -181,7 +185,7 @@ async function searchComponent(
     url: router.url,
     path: router.path,
     matches: router.matches,
-    redirect: (path: string, parentComponent?: Component) => {
+    redirect: (path: string, parentComponent?: Component | POJOComponent | VnodeComponentInterface) => {
       router.go(path, parentComponent);
       // Return false to stop the middleware chain
       return false;
@@ -260,7 +264,11 @@ export class Router implements RouterInterface {
     return this.paths.filter((path) => path.method === "add").map((path) => path.path);
   }
 
-  async go(path: string, parentComponent?: Component, preventPushState = false): Promise<string | void> {
+  async go(
+    path: string,
+    parentComponent?: Component | POJOComponent | VnodeComponentInterface,
+    preventPushState = false
+  ): Promise<string | void> {
     if (!path) {
       throw new Error("router.url.required");
     }
@@ -312,7 +320,11 @@ export class Router implements RouterInterface {
 
 let localRedirect: RedirectFunction;
 
-export function redirect(url: string, parentComponent?: Component, preventPushState = false): string | void {
+export function redirect(
+  url: string,
+  parentComponent?: Component | POJOComponent | VnodeComponentInterface,
+  preventPushState = false
+): Promise<string | void> {
   if (!localRedirect) {
     throw new Error("router.redirect.not.found");
   }

package/lib/signal/index.ts

@@ -22,12 +22,12 @@ export interface SignalInterface extends Array<any> {
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
-export function Signal(initialValue): SignalInterface {
+export function Signal(initialValue: any): SignalInterface {
   // Create a copy of the current context object
   const { vnode, component } = { ...current };
 
   // Check if the context object has a vnode property
-  if (vnode) {
+  if (vnode && component) {
     // Is first call
     if (!vnode.components) {
       // Set the components property to an empty array
@@ -70,7 +70,7 @@ export function Signal(initialValue): SignalInterface {
   const subscriptions: SubscriptionsInterface = [];
 
   // Define a function that allows other parts of the code to subscribe to changes to the Signal's value
-  const subscribe = (callback) => {
+  const subscribe = (callback: Function) => {
     // Add the callback function to the subscriptions array if it is not already in the array
     if (subscriptions.indexOf(callback) === -1) {
       subscriptions.push(callback);
@@ -127,7 +127,7 @@ export function Signal(initialValue): SignalInterface {
   }
 
   // Define a function that allows the value of the Signal to be updated and notifies any subscribed functions of the change
-  const set = (newValue) => {
+  const set = (newValue: any) => {
     // If we have a current event on going, prevent the default action
     if (current.event) {
       current.event.preventDefault();
@@ -152,7 +152,7 @@ export function Signal(initialValue): SignalInterface {
 
   // If the context object has a vnode property, add the signal to the vnode's signals array
   // and add the subscriptions array to the vnode's subscriptions array
-  if (vnode) {
+  if (vnode && component) {
     component.signals.push(signal);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valyrian.js",
-  "version": "7.2.9",
+  "version": "7.2.11",
   "description": "Lightweight steel to forge PWAs. (Minimal Frontend Framework with server side rendering and other capabilities)",
   "repository": "git@github.com:Masquerade-Circus/valyrian.js.git",
   "author": "Masquerade <christian@masquerade-circus.net>",

package/tsconfig.json

@@ -1,20 +1,34 @@
 {
   "compilerOptions": {
-    "jsx": "react",
-    "target": "ES2022",
-    "module": "ES2022",
+    // enable latest features
+    "lib": ["esnext", "dom"],
+    "module": "NodeNext",
+    "target": "ESNext",
+
     "moduleResolution": "NodeNext",
-    "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true,
-    "allowJs": false,
-    "esModuleInterop": true,
+    "noEmit": false,
+    "moduleDetection": "force",
+
+    "jsx": "react", // support JSX
     "jsxFactory": "v",
     "jsxFragmentFactory": "v.fragment",
+    "allowJs": true, // allow importing `.js` from `.ts`
+    "esModuleInterop": true, // allow default imports for CommonJS modules
+
+    // best practices
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "composite": true,
+    "downlevelIteration": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+
     "rootDir": "lib",
     "paths": {
       "node_modules/*": ["./node_modules/*"]
     }
   },
   "include": ["./lib"],
-  "exclude": ["./dist/**"]
+  "exclude": ["./dist"]
 }