@ryupold/vode 0.12.2 → 0.13.0

package/.github/workflows/npm-publish.yml

@@ -1,7 +1,8 @@
 name: Publish to https://registry.npmjs.org
 
 on:
-  push:
+  release:
+    types: published
     branches:
       - 'main'
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "0.12.2",
+    "version": "0.13.0",
     "description": "Small web framework for minimal websites",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",

package/src/vode.ts

@@ -62,8 +62,10 @@ export type EventsMap =
     & { [K in keyof SVGElementEventMap as `on${K}`]: SVGElementEventMap[K] }
     & { onsearch: Event };
 
-export type PropertyValue<S> = string | boolean | null | undefined | StyleProp | ClassProp | Patch<S> | void;
-
+export type PropertyValue<S> =
+    | string | boolean | null | undefined | void
+    | StyleProp | ClassProp
+    | Patch<S>;
 
 export type Dispatch<S> = (action: Patch<S>) => void;
 export type PatchableState<S> = S & { patch: Dispatch<Patch<S>> };
@@ -104,7 +106,7 @@ export function createPatch<S extends object | unknown>(p: DeepPartial<S> | Effe
  * - identity: `vode(["div", ["span", "bar"]])` => `["div", ["span", "bar"]]` --*rendered*-> `<div><span>bar</span></div>`
  */
 export function vode<S extends object | unknown>(tag: Tag | Vode<S>, props?: Props<S> | ChildVode<S>, ...children: ChildVode<S>[]): Vode<S> {
-    if(!tag) throw new Error("tag must be a string or vode");
+    if (!tag) throw new Error("tag must be a string or vode");
     if (Array.isArray(tag)) return tag;
     else if (props) return [tag, props as Props<S>, ...children];
     else return [tag, ...children];
@@ -319,16 +321,6 @@ export function childrenStart<S>(vode: ChildVode<S> | AttachedVode<S>): number {
     return props(vode) ? 2 : 1;
 }
 
-/** @returns multiple merged objects as one, applying from left to right ({}, first, ...p) */
-export function merge(first?: object | unknown, ...p: (object | unknown)[]): object {
-    first = mergeState({}, first);
-    for (const pp of p) {
-        if (!pp) continue;
-        first = mergeState(first, pp);
-    }
-    return first!;
-}
-
 function mergeState(target: any, source: any) {
     if (!source) return target;
 
@@ -564,31 +556,34 @@ function unwrap<S>(c: Component<S> | ChildVode<S>, s: S): ChildVode<S> {
 
 function patchProperties<S>(patch: Dispatch<S>, node: ChildNode, oldProps?: Props<S>, newProps?: Props<S>, isSvg?: boolean) {
     if (!newProps && !oldProps) return;
-    if (!oldProps) {         // set new props
-        for (const key in newProps) {
-            const newValue = newProps[key as keyof Props<S>] as PropertyValue<S>;
-            newProps[key as keyof Props<S>] = patchProperty(patch, <Element>node, key, undefined, newValue, isSvg);
-        }
-    } else if (newProps) {   // clear old props and set new in one loop
-        const combinedKeys = new Set([...Object.keys(oldProps), ...Object.keys(newProps)]);
-        for (const key of combinedKeys) {
+
+    // match existing properties
+    if (oldProps) {
+        for (const key in oldProps) {
             const oldValue = oldProps[key as keyof Props<S>] as PropertyValue<S>;
-            const newValue = newProps[key as keyof Props<S>] as PropertyValue<S>;
-            if (key[0] === "o" && key[1] === "n") {
-                const oldEvent = (<any>node)["__" + key];
-                if ((oldEvent && oldEvent !== newValue) || (!oldEvent && oldValue !== newValue)) {
-                    newProps[key as keyof Props<S>] = patchProperty(patch, <Element>node, key, oldValue, newValue, isSvg);
-                }
-                (<any>node)["__" + key] = newValue;
+            const newValue = newProps?.[key as keyof Props<S>] as PropertyValue<S>;
+
+            if (oldValue !== newValue) {
+                if (newProps) newProps[key as keyof Props<S>] = patchProperty(patch, node, key, oldValue, newValue, isSvg);
+                else patchProperty(patch, node, key, oldValue, undefined, isSvg);
             }
-            else if (oldValue !== newValue) {
-                newProps[key as keyof Props<S>] = patchProperty(patch, <Element>node, key, oldValue, newValue, isSvg);
+        }
+    }
+
+    //new properties that weren't in oldProps
+    if (newProps && oldProps) {
+        for (const key in newProps) {
+            if (!(key in oldProps)) {
+                const newValue = newProps[key as keyof Props<S>] as PropertyValue<S>;
+                newProps[key as keyof Props<S>] = patchProperty(patch, <Element>node, key, undefined, newValue, isSvg);
             }
         }
-    } else {                 //delete all old props, cause there are no new props
-        for (const key in oldProps) {
-            const oldValue = oldProps[key as keyof Props<S>] as PropertyValue<S>;
-            oldProps[key as keyof Props<S>] = patchProperty(patch, <Element>node, key, oldValue, undefined, isSvg);
+    }
+    // only new props
+    else if (newProps) {
+        for (const key in newProps) {
+            const newValue = newProps[key as keyof Props<S>] as PropertyValue<S>;
+            newProps[key as keyof Props<S>] = patchProperty(patch, <Element>node, key, undefined, newValue, isSvg);
         }
     }
 }
@@ -660,13 +655,12 @@ function patchProperty<S>(patch: Dispatch<S>, node: ChildNode, key: string | key
 }
 
 function classString(classProp: ClassProp): string {
-    if (typeof classProp === "string") {
+    if (typeof classProp === "string")
         return classProp;
-    } else if (Array.isArray(classProp)) {
+    else if (Array.isArray(classProp))
         return classProp.map(classString).join(" ");
-    } else if (typeof classProp === "object") {
+    else if (typeof classProp === "object")
         return Object.keys(classProp!).filter(k => classProp![k]).join(" ");
-    } else {
+    else
         return "";
-    }
 }

package/vode.mjs

@@ -187,15 +187,6 @@ function child(vode2, index) {
 function childrenStart(vode2) {
   return props(vode2) ? 2 : 1;
 }
-function merge(first, ...p) {
-  first = mergeState({}, first);
-  for (const pp of p) {
-    if (!pp)
-      continue;
-    first = mergeState(first, pp);
-  }
-  return first;
-}
 function mergeState(target, source) {
   if (!source)
     return target;
@@ -390,30 +381,29 @@ function unwrap(c, s) {
 function patchProperties(patch, node, oldProps, newProps, isSvg) {
   if (!newProps && !oldProps)
     return;
-  if (!oldProps) {
-    for (const key in newProps) {
-      const newValue = newProps[key];
-      newProps[key] = patchProperty(patch, node, key, undefined, newValue, isSvg);
-    }
-  } else if (newProps) {
-    const combinedKeys = new Set([...Object.keys(oldProps), ...Object.keys(newProps)]);
-    for (const key of combinedKeys) {
+  if (oldProps) {
+    for (const key in oldProps) {
       const oldValue = oldProps[key];
-      const newValue = newProps[key];
-      if (key[0] === "o" && key[1] === "n") {
-        const oldEvent = node["__" + key];
-        if (oldEvent && oldEvent !== newValue || !oldEvent && oldValue !== newValue) {
+      const newValue = newProps?.[key];
+      if (oldValue !== newValue) {
+        if (newProps)
           newProps[key] = patchProperty(patch, node, key, oldValue, newValue, isSvg);
-        }
-        node["__" + key] = newValue;
-      } else if (oldValue !== newValue) {
-        newProps[key] = patchProperty(patch, node, key, oldValue, newValue, isSvg);
+        else
+          patchProperty(patch, node, key, oldValue, undefined, isSvg);
       }
     }
-  } else {
-    for (const key in oldProps) {
-      const oldValue = oldProps[key];
-      oldProps[key] = patchProperty(patch, node, key, oldValue, undefined, isSvg);
+  }
+  if (newProps && oldProps) {
+    for (const key in newProps) {
+      if (!(key in oldProps)) {
+        const newValue = newProps[key];
+        newProps[key] = patchProperty(patch, node, key, undefined, newValue, isSvg);
+      }
+    }
+  } else if (newProps) {
+    for (const key in newProps) {
+      const newValue = newProps[key];
+      newProps[key] = patchProperty(patch, node, key, undefined, newValue, isSvg);
     }
   }
 }
@@ -479,15 +469,14 @@ function patchProperty(patch, node, key, oldValue, newValue, isSvg) {
   return newValue;
 }
 function classString(classProp) {
-  if (typeof classProp === "string") {
+  if (typeof classProp === "string")
     return classProp;
-  } else if (Array.isArray(classProp)) {
+  else if (Array.isArray(classProp))
     return classProp.map(classString).join(" ");
-  } else if (typeof classProp === "object") {
+  else if (typeof classProp === "object")
     return Object.keys(classProp).filter((k) => classProp[k]).join(" ");
-  } else {
+  else
     return "";
-  }
 }
 // src/vode-tags.ts
 var A = "a";
@@ -728,7 +717,6 @@ export {
   tag,
   props,
   mergeClass,
-  merge,
   memo,
   htmlToVode,
   createState,