@ryupold/vode 0.11.0 → 0.12.1

package/package.json

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

package/src/vode.ts

@@ -11,10 +11,9 @@ export type Component<S> = (s: S) => ChildVode<S>;
 
 export type Patch<S> =
     | NoRenderPatch // ignored
-    | typeof EmptyPatch | DeepPartial<S> // render patches
+    | {} | DeepPartial<S> // render patches
     | Promise<Patch<S>> | Effect<S>; // effects resulting in patches
 
-export const EmptyPatch = {} as const; // smallest patch to cause a render without any changes
 export type NoRenderPatch = undefined | null | number | boolean | bigint | string | symbol | void;
 
 export type DeepPartial<S> = { [P in keyof S]?: S[P] extends Array<infer I> ? Array<Patch<I>> : Patch<S[P]> };
@@ -78,7 +77,7 @@ export type ContainerNode<S> = HTMLElement & {
         vode: AttachedVode<S>, //don't touch this
         patch: Dispatch<S>, // can't touch this
         render: () => void, // can't touch this
-        q: Patch<S>[],  // this will change in the future, so don't touch it
+        q: object | null,  // next patch aggregate to be applied
         isRendering: boolean,  // under no circumstances touch this
         /** stats about the overall patches & last render time */
         stats: {
@@ -86,9 +85,7 @@ export type ContainerNode<S> = HTMLElement & {
             liveEffectCount: number,
             renderPatchCount: number,
             renderCount: number,
-            renderTime: number,
-            queueLengthBeforeRender: number,
-            queueLengthAfterRender: number,
+            lastRenderTime: number,
         },
     }
 };
@@ -97,7 +94,7 @@ export type ContainerNode<S> = HTMLElement & {
 export function createState<S extends object | unknown>(state: S): PatchableState<S> { return state as PatchableState<S>; }
 
 /** type safe way to create a patch. useful for type inference and autocompletion. */
-export function createPatch<S extends object | unknown>(p: DeepPartial<S> | Effect<S> | NoRenderPatch): Patch<S> { return p; }
+export function createPatch<S extends object | unknown>(p: DeepPartial<S> | Effect<S> | NoRenderPatch): typeof p { return p; }
 
 /** type-safe way to create a vode. useful for type inference and autocompletion.
  * 
@@ -107,13 +104,10 @@ 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 (Array.isArray(tag)) {
-        return tag;
-    }
-    if (props) {
-        return [tag, props as Props<S>, ...children];
-    }
-    return [tag, ...children];
+    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];
 }
 
 /** create a vode app inside a container element
@@ -124,8 +118,12 @@ export function vode<S extends object | unknown>(tag: Tag | Vode<S>, props?: Pro
  * @returns a patch function that can be used to update the state
  */
 export function app<S extends object | unknown>(container: HTMLElement, initialState: Omit<S, "patch">, dom: Component<S>, ...initialPatches: Patch<S>[]) {
+    if (!container) throw new Error("container must be a valid HTMLElement");
+    if (!initialState || typeof initialState !== "object") throw new Error("initialState must be an object");
+    if (typeof dom !== "function") throw new Error("dom must be a function that returns a vode");
+
     const _vode = {} as ContainerNode<S>["_vode"];
-    _vode.stats = { renderTime: 0, renderCount: 0, queueLengthBeforeRender: 0, queueLengthAfterRender: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
+    _vode.stats = { lastRenderTime: 0, renderCount: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
 
     Object.defineProperty(initialState, "patch", {
         enumerable: false, configurable: true,
@@ -171,7 +169,7 @@ export function app<S extends object | unknown>(container: HTMLElement, initialS
                 _vode.patch!((<EffectFunction<S>>action)(_vode.state));
             } else {
                 _vode.stats.renderPatchCount++;
-                _vode.q!.push(<Patch<S>>action);
+                _vode.q = mergeState(_vode.q || {}, action);
                 if (!_vode.isRendering) _vode.render!();
             }
         }
@@ -180,25 +178,19 @@ export function app<S extends object | unknown>(container: HTMLElement, initialS
     Object.defineProperty(_vode, "render", {
         enumerable: false, configurable: true,
         writable: false, value: () => requestAnimationFrame(() => {
-            if (_vode.isRendering || _vode.q!.length === 0) return;
+            if (_vode.isRendering || !_vode.q) return;
             _vode.isRendering = true;
             const sw = Date.now();
             try {
-                _vode.stats.queueLengthBeforeRender = _vode.q!.length;
-
-                while (_vode.q!.length > 0) {
-                    const patch = _vode.q!.shift();
-                    if (patch === EmptyPatch) continue;
-                    mergeState(_vode.state, patch);
-                }
+                _vode.state = mergeState(_vode.state, _vode.q);
+                _vode.q = null;
                 _vode.vode = render(_vode.state, _vode.patch, container, 0, _vode.vode, dom(_vode.state))!;
             } finally {
                 _vode.isRendering = false;
                 _vode.stats.renderCount++;
-                _vode.stats.renderTime = Date.now() - sw;
-                _vode.stats.queueLengthAfterRender = _vode.q!.length;
-                if (_vode.q!.length > 0) {
-                    _vode.render!();
+                _vode.stats.lastRenderTime = Date.now() - sw;
+                if (_vode.q) {
+                    _vode.render();
                 }
             }
         })
@@ -206,7 +198,7 @@ export function app<S extends object | unknown>(container: HTMLElement, initialS
 
     _vode.patch = (<PatchableState<S>>initialState).patch;
     _vode.state = <PatchableState<S>>initialState;
-    _vode.q = [];
+    _vode.q = null;
 
     const root = container as ContainerNode<S>;
     root._vode = _vode;

package/vode.mjs

@@ -1,5 +1,4 @@
 // src/vode.ts
-var EmptyPatch = {};
 function createState(state) {
   return state;
 }
@@ -7,17 +6,24 @@ function createPatch(p) {
   return p;
 }
 function vode(tag, props, ...children) {
-  if (Array.isArray(tag)) {
+  if (!tag)
+    throw new Error("tag must be a string or vode");
+  if (Array.isArray(tag))
     return tag;
-  }
-  if (props) {
+  else if (props)
     return [tag, props, ...children];
-  }
-  return [tag, ...children];
+  else
+    return [tag, ...children];
 }
 function app(container, initialState, dom, ...initialPatches) {
+  if (!container)
+    throw new Error("container must be a valid HTMLElement");
+  if (!initialState || typeof initialState !== "object")
+    throw new Error("initialState must be an object");
+  if (typeof dom !== "function")
+    throw new Error("dom must be a function that returns a vode");
   const _vode = {};
-  _vode.stats = { renderTime: 0, renderCount: 0, queueLengthBeforeRender: 0, queueLengthAfterRender: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
+  _vode.stats = { lastRenderTime: 0, renderCount: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
   Object.defineProperty(initialState, "patch", {
     enumerable: false,
     configurable: true,
@@ -65,7 +71,7 @@ function app(container, initialState, dom, ...initialPatches) {
         _vode.patch(action(_vode.state));
       } else {
         _vode.stats.renderPatchCount++;
-        _vode.q.push(action);
+        _vode.q = mergeState(_vode.q || {}, action);
         if (!_vode.isRendering)
           _vode.render();
       }
@@ -76,25 +82,19 @@ function app(container, initialState, dom, ...initialPatches) {
     configurable: true,
     writable: false,
     value: () => requestAnimationFrame(() => {
-      if (_vode.isRendering || _vode.q.length === 0)
+      if (_vode.isRendering || !_vode.q)
         return;
       _vode.isRendering = true;
       const sw = Date.now();
       try {
-        _vode.stats.queueLengthBeforeRender = _vode.q.length;
-        while (_vode.q.length > 0) {
-          const patch = _vode.q.shift();
-          if (patch === EmptyPatch)
-            continue;
-          mergeState(_vode.state, patch);
-        }
+        _vode.state = mergeState(_vode.state, _vode.q);
+        _vode.q = null;
         _vode.vode = render(_vode.state, _vode.patch, container, 0, _vode.vode, dom(_vode.state));
       } finally {
         _vode.isRendering = false;
         _vode.stats.renderCount++;
-        _vode.stats.renderTime = Date.now() - sw;
-        _vode.stats.queueLengthAfterRender = _vode.q.length;
-        if (_vode.q.length > 0) {
+        _vode.stats.lastRenderTime = Date.now() - sw;
+        if (_vode.q) {
           _vode.render();
         }
       }
@@ -102,7 +102,7 @@ function app(container, initialState, dom, ...initialPatches) {
   });
   _vode.patch = initialState.patch;
   _vode.state = initialState;
-  _vode.q = [];
+  _vode.q = null;
   const root = container;
   root._vode = _vode;
   const initialVode = dom(initialState);
@@ -894,7 +894,6 @@ export {
   FECOMPONENTTRANSFER,
   FECOLORMATRIX,
   FEBLEND,
-  EmptyPatch,
   EMBED,
   EM,
   ELLIPSE,