j-templates 8.0.21 → 8.0.23

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/package.json

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