rf

package.json

@@ -1,6 +1,6 @@
 {
   "name": "alfama",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "author": "Abhishiv Saxena<[email protected]>",
   "license": "MIT",
   "description": "Fine-grained reactive library with no compiler, no magic, and no virtual DOM",

src/dom/api.ts

@@ -40,13 +40,13 @@ export const insertElement = (
 
   const step = parentPath.reduce<TreeStep | undefined>((step, key) => {
     if (!step) return;
-    const child = step.children.find((el) => el.id === key);
+    const child = step.k.find((el) => el.id === key);
     return child;
   }, parentStep);
   if (!step) throw new Error("");
 
   const afterIndex = after
-    ? step.children.findIndex((el) => el.id === after)
+    ? step.k.findIndex((el) => el.id === after)
     : undefined;
 
   const { root, registry } = reifyTree(renderContext, el, step, afterIndex);
@@ -55,9 +55,7 @@ export const insertElement = (
     renderContext,
     step,
     root,
-    afterIndex && afterIndex > -1
-      ? step.children[afterIndex as number]
-      : undefined
+    afterIndex && afterIndex > -1 ? step.k[afterIndex as number] : undefined
   );
 };
 
@@ -69,11 +67,11 @@ export const removeElement = (
 ) => {
   const step = parentPath.reduce<TreeStep | undefined>((step, key) => {
     if (!step) return;
-    const child = step.children.find((el) => el.id === key);
+    const child = step.k.find((el) => el.id === key);
     return child;
   }, parentStep);
   if (!step) throw createError(102);
-  const child = step.children.find((el) => el.id === key);
+  const child = step.k.find((el) => el.id === key);
   if (!child) throw createError(102);
   removeNode(renderContext, child);
 };
@@ -123,15 +121,15 @@ export const addNode = (
       node.parent = parentStep;
       if (parentStep && before) {
         const elementsToInsert = node.dom;
-        const beforeIndex = parentStep.children.indexOf(before);
-        parentStep.children.splice(beforeIndex, 0, node);
+        const beforeIndex = parentStep.k.indexOf(before);
+        parentStep.k.splice(beforeIndex, 0, node);
 
         const refNode: HTMLElement = before.dom as HTMLElement;
         refNode.before(elementsToInsert);
       } else if (parentStep) {
         const parentDOM = parentStep.dom;
         const elementsToInsert = node.dom;
-        parentStep.children.push(node);
+        parentStep.k.push(node);
         if (parentDOM && (parentDOM as HTMLElement)) {
           parentDOM.append(elementsToInsert);
         }
@@ -181,7 +179,7 @@ export const removeNode = (renderCtx: RenderContext, node: TreeStep) => {
   nodes.forEach((step) => {
     renderCtx.reg.delete(step);
     step;
-    step.parent ? arrayRemove(step.parent.children, step) : null;
+    step.parent ? arrayRemove(step.parent.k, step) : null;
   });
 };
 
@@ -268,21 +266,21 @@ export const getUtils = (
 
       // this enables state preservation during HMR
       const s =
-        match && match.signals && match.signals[name]
-          ? (match.signals[name] as Signal<any>)
+        match && match.sigs && match.sigs[name]
+          ? (match.sigs[name] as Signal<any>)
           : (createSignal(val) as Signal<any>);
-      parentStep.state.signals[name] = s;
+      parentStep.state.sigs[name] = s;
       return s;
     },
     computedSignal(name: string, wire) {
       const match = getTreeStepRenderContextState(renderContext, parentStep);
 
       // this enables state preservation during HMR
       const s =
-        match && match.signals && match.signals[name]
-          ? (match.signals[name] as Signal<any>)
+        match && match.sigs && match.sigs[name]
+          ? (match.sigs[name] as Signal<any>)
           : (createComputedSignal(wire) as Signal<any>);
-      parentStep.state.signals[name] = s;
+      parentStep.state.sigs[name] = s;
       return s;
     },
     wire(arg) {

src/dom/index.ts

@@ -98,7 +98,7 @@ export function unrender(arg: RenderContext | TreeStep[]) {
       });
       step.onUnmount.forEach((el) => el(step));
       // step.state.stores = {};
-      Object.values(step.state.signals).forEach((sig) => {
+      Object.values(step.state.sigs).forEach((sig) => {
         sig.wires.clear();
       });
       step.state.ctx.clear();

src/dom/traverser.ts

@@ -38,7 +38,7 @@ export const reifyTree = (
       registry.push(step);
       // step.parent.children.push shouldnt be done here for root.parent at least
       // reason more about it: maybe reifyTree shouldn't take parent as prop?
-      if (step !== root && step.parent) step.parent.children.push(step);
+      if (step !== root && step.parent) step.parent.k.push(step);
       const isSVG = checkIfSVG(step);
       const dom = createDOMNode(step, isSVG);
       if (dom) {
@@ -133,7 +133,7 @@ export const getTreeStep = (
       node: el,
       meta,
       parent: parentStep,
-      children: [],
+      k: [],
     };
     if (
       el === null ||
@@ -161,7 +161,7 @@ export const getTreeStep = (
       return {
         type: DOMConstants.ComponentTreeStep,
         ...step,
-        state: { signals: {}, ctx: new Map(), stores: {} },
+        state: { sigs: {}, ctx: new Map(), stores: {} },
         wires: [],
         onMount: [],
         onUnmount: [],

src/dom/types.ts

@@ -44,7 +44,7 @@ export interface NativeVElement extends VElementBase {
   type: typeof DOMConstants.NATIVE;
   t: string;
   p: Record<string, any> & {
-    children: VElement[];
+    k: VElement[];
   };
 }
 
@@ -53,7 +53,7 @@ export interface ComponentVElement<T = any> extends VElementBase {
   type: typeof DOMConstants.COMPONENT;
   t: Component<T>;
   p: Record<string, any> & {
-    children: VElement[];
+    k: VElement[];
   };
 }
 
@@ -72,7 +72,7 @@ export type BaseTreeStep = {
   id?: string;
   parent?: TreeStep;
   meta?: Record<string, any>;
-  children: Array<TreeStep>;
+  k: Array<TreeStep>;
 };
 
 export interface NativeTreeStep extends BaseTreeStep {
@@ -91,7 +91,7 @@ export interface ComponentTreeStep extends BaseTreeStep {
 }
 
 export interface ComponentTreeStepState {
-  signals: Record<string, Signal>;
+  sigs: Record<string, Signal>;
   stores: Record<string, StoreCursor>;
   ctx: Map<any, any>;
 }

src/dom/utils.ts

@@ -22,10 +22,10 @@ export const getDescendants = (node: TreeStep): TreeStep[] => {
     },
     {
       kids: (parent) => {
-        if (!parent.children) {
+        if (!parent.k) {
           console.log(parent);
         }
-        return [...(Array.isArray(parent.children) ? parent.children : [])];
+        return [...(Array.isArray(parent.k) ? parent.k : [])];
       },
       order: "post",
     }

src/stdlib/Each/index.tsx

@@ -84,16 +84,16 @@ export const Each: <T extends ArrayOrObject>(
     const observor = function (change: StoreChange) {
       const { data, path, value } = change;
       //console.log("Each list change", change, listCursorPath, path);
-      const pStep = parentStep.children[0];
-      const previousChildren = [...(pStep.children || [])];
+      const pStep = parentStep.k[0];
+      const previousChildren = [...(pStep.k || [])];
       // list reset
       if (listCursorPath.join() === path.join() && !data) {
         previousChildren.forEach((node) => {
           removeNode(renderContext, node);
         });
         const startIndex = 0;
         (value as typeof props.cursor).forEach((item, index) => {
-          const previousChildren = [...(pStep.children || [])];
+          const previousChildren = [...(pStep.k || [])];
           const { treeStep, el } = renderArray(
             pStep,
             props.renderItem,
@@ -161,7 +161,7 @@ export const Each: <T extends ArrayOrObject>(
         // Add the new nodes being spliced in
         items.forEach((item, i) => {
           const index = startIndex + i;
-          const previousChildren = [...(pStep.children || [])];
+          const previousChildren = [...(pStep.k || [])];
           const { treeStep, el } = renderArray(
             pStep,
             props.renderItem,

src/stdlib/When/index.tsx

@@ -20,19 +20,7 @@ export type WhenProps = {
 
 export const When = component<WhenProps>(
   "When",
-  (
-    props,
-    {
-      wire,
-      setContext,
-      signal,
-      utils,
-      onUnmount,
-      onMount,
-      step: parentStep,
-      renderContext,
-    }
-  ) => {
+  (props, { utils, onUnmount, onMount, step: parentStep, renderContext }) => {
     const underlying = utils.wire(props.condition);
     const value = underlying.run();
     const getView = (value: any) => {
@@ -46,10 +34,12 @@ export const When = component<WhenProps>(
     const task = (value: any) => {
       const view = getView(value);
       const u = view ? view() : null;
-      const previousChildren = [...parentStep.children];
+      const previousChildren = [...parentStep.k];
       const { registry, root } = reifyTree(renderContext, u, parentStep);
       addNode(renderContext, parentStep, root);
-      previousChildren.forEach((n) => removeNode(renderContext, n));
+      for (var n of previousChildren) {
+        removeNode(renderContext, n);
+      }
     };
     onMount(() => {
       underlying.tasks.add(task);