j-templates 8.0.21 → 8.0.24

package/DOM/domNodeConfig.js

@@ -56,6 +56,9 @@ function getHTMLNode(from, current) {
     return from;
 }
 export const DOMNodeConfig = {
+    isConnected(target) {
+        return target.isConnected;
+    },
     createNode(type, namespace) {
         return namespace
             ? document.createElementNS(namespace, type)

package/Node/component.d.ts

@@ -14,6 +14,11 @@ export declare class Component<D = void, T = void, E = {}> {
     private scope;
     private templates;
     private componentEvents;
+    /**
+     * Return if the component's vNode is connected
+     * to a parent document
+     */
+    get IsConnected(): boolean;
     /**
      * Returns the component's virtual node injector.
      */
@@ -51,6 +56,7 @@ export declare class Component<D = void, T = void, E = {}> {
      * Override to perform post‑binding initialization.
      */
     Bound(): void;
+    Connected(): void;
     /**
      * Fires a component event.
      *
@@ -85,6 +91,6 @@ export declare namespace Component {
      * @param vnode - The virtual node to be attached.
      * @returns The result of the attachment operation.
      */
-    function Attach(node: any, vnode: vNodeType): vNodeType;
+    function Attach(node: any, vnode: vElementNode): vElementNode;
 }
 export {};

package/Node/component.js

@@ -9,6 +9,13 @@ import { ObservableScope } from "../Store";
  * @template E - Event map type for component events.
  */
 export class Component {
+    /**
+     * Return if the component's vNode is connected
+     * to a parent document
+     */
+    get IsConnected() {
+        return this.vNode.connected;
+    }
     /**
      * Returns the component's virtual node injector.
      */
@@ -76,6 +83,7 @@ export class Component {
     Bound() {
         Bound.All(this);
     }
+    Connected() { }
     /**
      * Fires a component event.
      *

package/Node/nodeConfig.d.ts

@@ -1,4 +1,5 @@
 export interface INodeConfig {
+    isConnected(node: any): boolean;
     createNode(type: any, namespace: string): any;
     createTextNode(value?: string): any;
     scheduleUpdate(callback: () => void): void;

package/Node/vNode.d.ts

@@ -6,5 +6,5 @@ export declare namespace vNode {
     function Destroy(vnode: vNodeType): void;
     function DestroyAll(vnodes: vNodeType[]): void;
     function ToFunction<P = HTMLElement, E = HTMLElementEventMap>(type: string | typeof TEXT_NODE | typeof FRAGMENT_NODE, namespace?: string): <T>(config: vNodeConfig<P, E, T>, children?: vNodeType[] | vNodeChildrenFunction<T>) => vElementNode;
-    function Attach(node: any, vnode: vNodeType): vNodeType;
+    function Attach(node: any, vnode: vElementNode): vElementNode;
 }

package/Node/vNode.js

@@ -13,6 +13,7 @@ export var vNode;
         return {
             definition,
             type: definition.type,
+            connected: false,
             injector: definition.componentFactory
                 ? new Injector()
                 : (Injector.Current() ?? new Injector()),
@@ -71,8 +72,11 @@ export var vNode;
         if (vnode.type === FRAGMENT_NODE)
             throw new Error("Cannot attach a fragment directly. A fragment has no DOM node — " +
                 "wrap it in a real element (e.g. div) before attaching.");
+        // Must create a node + attach before Init so Connected can run correctly
+        // on a possible Component instance
+        const childNode = vnode.definition.node = CreateNode(vnode);
+        NodeConfig.addChild(node, childNode);
         Init(vnode);
-        NodeConfig.addChild(node, vnode.node);
         return vnode;
     }
     vNode.Attach = Attach;
@@ -80,19 +84,22 @@ export var vNode;
 function ComponentChildren() {
     return this.Template();
 }
-function InitNode(vnode, parentNode) {
-    const { type, namespace, props, attrs, on, data, componentFactory, children, childrenArray, } = vnode.definition;
-    let node = null;
+function CreateNode(vnode) {
     switch (vnode.type) {
         case FRAGMENT_NODE:
-            break;
+            return null;
         case TEXT_NODE:
-            vnode.node = node = vnode.definition.node ?? NodeConfig.createTextNode();
-            break;
+            return vnode.definition.node ?? NodeConfig.createTextNode();
         default:
-            vnode.node = node = vnode.definition.node ?? NodeConfig.createNode(type, namespace);
-            break;
+            return vnode.definition.node ?? NodeConfig.createNode(vnode.definition.type, vnode.definition.namespace);
     }
+}
+function InitNode(vnode, parentNode) {
+    const { 
+    /* type,
+    namespace, */
+    props, attrs, on, data, componentFactory, children, childrenArray, } = vnode.definition;
+    const node = vnode.node = CreateNode(vnode);
     vnode.definition = null;
     vnode.parentNode = parentNode;
     if (props) {
@@ -130,7 +137,7 @@ function InitNode(vnode, parentNode) {
     }
     if (componentFactory) {
         vnode.component = Injector.Scope(vnode.injector, componentFactory, vnode);
-        vnode.component.Bound();
+        // vnode.component.Bound();
         Children(vnode, ComponentChildren.bind(vnode.component));
     }
     else if (childrenArray) {
@@ -173,7 +180,7 @@ function CreateChildrenScope(vnode, children, data) {
     return ObservableScope.Create(DynamicChildrenFunction.bind(null, vnode.injector, children, data));
 }
 function ToVNodeType(children) {
-    return typeof children === "string" ? { type: STRING_NODE, node: children } : children;
+    return typeof children === "string" ? { type: STRING_NODE, connected: false, node: children } : children;
 }
 function GetNextNodes(injector, children, data) {
     return ToVNodeType(Injector.Scope(injector, children, data));
@@ -236,14 +243,18 @@ function UpdateChildren(vnode, init = false, skipInit = false) {
             if (vnode.destroyed || children !== vnode.children)
                 return;
             if (init) {
-                if (vnode.node !== null)
+                if (vnode.node !== null) {
                     NodeConfig.reconcileChildren(vnode.node, CleanupChildrenArray(vnode.children));
+                    vnode.component?.Bound();
+                    FireConnected(vnode, true);
+                }
             }
             else if (!async) {
                 let reconcileNode = vnode;
                 while (reconcileNode.node === null)
                     reconcileNode = reconcileNode.parentNode;
                 NodeConfig.reconcileChildren(reconcileNode.node, CleanupChildrenArray(reconcileNode.children));
+                FireConnected(vnode, true);
             }
             else {
                 NodeConfig.scheduleUpdate(function () {
@@ -253,11 +264,47 @@ function UpdateChildren(vnode, init = false, skipInit = false) {
                     while (reconcileNode.node === null)
                         reconcileNode = reconcileNode.parentNode;
                     NodeConfig.reconcileChildren(reconcileNode.node, CleanupChildrenArray(reconcileNode.children));
+                    FireConnected(vnode, true);
                 });
             }
         });
     });
 }
+function FireConnected(vnode, root = false) {
+    if ((!root && vnode.connected) ||
+        (vnode.type !== FRAGMENT_NODE && vnode.node === null))
+        return;
+    switch (vnode.type) {
+        case FRAGMENT_NODE:
+            break;
+        default: {
+            if (!vnode.connected) {
+                vnode.connected = NodeConfig.isConnected(vnode.node);
+                switch (vnode.type) {
+                    case STRING_NODE:
+                    case TEXT_NODE:
+                        break;
+                    default:
+                        vnode.connected && vnode.component?.Connected();
+                }
+            }
+            break;
+        }
+    }
+    if (vnode.type !== FRAGMENT_NODE && !vnode.connected)
+        return;
+    switch (vnode.type) {
+        case STRING_NODE:
+        case TEXT_NODE:
+            break;
+        default: {
+            const children = vnode.children;
+            const count = children?.length;
+            for (let x = 0; x < count; x++)
+                FireConnected(children[x]);
+        }
+    }
+}
 function ScheduledAssignment(assign) {
     let scheduled = false;
     return function (scope) {

package/Node/vNode.types.d.ts

@@ -27,10 +27,12 @@ export type vNodeConfig<P = HTMLElement, E = HTMLElementEventMap, T = never> = {
 };
 export type vStringNode = {
     type: typeof STRING_NODE;
+    connected: boolean;
     node: string;
 };
 export type vElementNode = {
     type: string | typeof TEXT_NODE | typeof FRAGMENT_NODE;
+    connected: boolean;
     definition: vNodeDefinition<any, any, any>;
     injector: Injector;
     parentNode: vElementNode | null;

package/Store/Diff/diffTree.js

@@ -34,16 +34,16 @@ function FlattenValue(root, value, keyFunc) {
  * @param path - Dot-separated path to the value (empty string returns source)
  * @returns The value at the specified path
  */
-function GetPathValue(source, path) {
+function GetPathValue(source, path, keyFunc) {
     if (path === "")
         return [source, true];
     const parts = path.split(".");
     let curr = source;
     let x = 0;
     for (; curr && x < parts.length - 1; x++)
-        curr = curr[parts[x]];
+        curr = ResolveKeyed(source, curr[parts[x]], keyFunc);
     if (curr && Object.hasOwn(curr, parts[x])) {
-        curr = curr[parts[x]];
+        curr = ResolveKeyed(source, curr[parts[x]], keyFunc);
         x++;
     }
     else
@@ -224,7 +224,7 @@ function RunProjections(source, keyFunc, projections, memo) {
         let y = 0;
         for (; allPathsExist && y < reads.length && !reads[y].endsWith("*"); y++) {
             const read = reads[y];
-            const [value, found] = GetPathValue(source, read);
+            const [value, found] = GetPathValue(source, read, keyFunc);
             allPathsExist = found;
             keys.push(read);
             values.push((found && CreateSnapshot(source, keyFunc, value)) || value);
@@ -233,6 +233,7 @@ function RunProjections(source, keyFunc, projections, memo) {
             const prefix = reads[y].slice(0, reads[y].length - 1);
             const matchedKeys = Object.keys(source).filter(key => key.startsWith(prefix));
             for (let z = 0; z < matchedKeys.length; z++) {
+                // No keyFunc passed because dot paths are not supported for wildcard paths
                 const [value, found] = GetPathValue(source, matchedKeys[z]);
                 allPathsExist = allPathsExist && found;
                 keys.push(matchedKeys[z]);
@@ -253,6 +254,12 @@ function RunProjections(source, keyFunc, projections, memo) {
     }
     return diffResult;
 }
+function ResolveKeyed(source, value, keyFunc) {
+    if (keyFunc === undefined || JsonType(value) === 'value')
+        return value;
+    const key = keyFunc(value);
+    return (key && source[key]) ?? value;
+}
 /**
  * Resolves a path to its keyed root object if applicable.
  * Searches up the path to find an object with a key from keyFunc.
@@ -402,7 +409,7 @@ export class DiffTree {
      * @returns The value at the specified path
      */
     GetPath(path) {
-        const [value] = GetPathValue(this.rootState, path);
+        const [value] = GetPathValue(this.rootState, path, this.keyFunc);
         return value;
     }
     /**
@@ -411,7 +418,7 @@ export class DiffTree {
      * @param path - Dot-separated path to the value
      */
     Snapshot(path) {
-        const [value, found] = GetPathValue(this.rootState, path);
+        const [value, found] = GetPathValue(this.rootState, path, this.keyFunc);
         if (!found)
             throw `Unable to get snapshot for path ${path}`;
         return CreateSnapshot(this.rootState, this.keyFunc, value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "j-templates",
-  "version": "8.0.21",
+  "version": "8.0.24",
   "description": "j-templates",
   "license": "MIT",
   "repository": "https://github.com/TypesInCode/jTemplates",