j-templates 7.0.94 → 7.0.95

package/DOM/elements.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dt = exports.dl = exports.li = exports.ol = exports.ul = exports.rp = exports.rt = exports.dfn = exports.time = exports.abbr = exports.small = exports.mark = exports.sup = exports.sub = exports.ins = exports.del = exports.strike = exports.s = exports.u = exports.em = exports.i = exports.strong = exports.b = exports.a = exports.q = exports.cite = exports._var = exports.samp = exports.kbd = exports.code = exports.pre = exports.p = exports.h6 = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.address = exports.blockquote = exports.hr = exports.footer = exports.header = exports.main = exports.nav = exports.aside = exports.article = exports.section = exports.span = exports.div = void 0;
-exports.text = exports.slot = exports.template = exports.area = exports.map = exports.svg = exports.canvas = exports.menu = exports.dialog = exports.summary = exports.details = exports.iframe = exports.param = exports.object = exports.embed = exports.track = exports.video = exports.audio = exports.source = exports.picture = exports.figcaption = exports.figure = exports.img = exports.meter = exports.progress = exports.output = exports.datalist = exports.legend = exports.fieldset = exports.label = exports.optgroup = exports.option = exports.select = exports.button = exports.textarea = exports.input = exports.form = exports.colgroup = exports.col = exports.td = exports.th = exports.tr = exports.tfoot = exports.tbody = exports.thead = exports.table = exports.dd = void 0;
+exports.text = exports.fragment = exports.slot = exports.template = exports.area = exports.map = exports.svg = exports.canvas = exports.menu = exports.dialog = exports.summary = exports.details = exports.iframe = exports.param = exports.object = exports.embed = exports.track = exports.video = exports.audio = exports.source = exports.picture = exports.figcaption = exports.figure = exports.img = exports.meter = exports.progress = exports.output = exports.datalist = exports.legend = exports.fieldset = exports.label = exports.optgroup = exports.option = exports.select = exports.button = exports.textarea = exports.input = exports.form = exports.colgroup = exports.col = exports.td = exports.th = exports.tr = exports.tfoot = exports.tbody = exports.thead = exports.table = exports.dd = void 0;
 const vNode_1 = require("../Node/vNode");
+const vNode_types_1 = require("../Node/vNode.types");
 // Layout
 exports.div = vNode_1.vNode.ToFunction("div");
 exports.span = vNode_1.vNode.ToFunction("span");
@@ -109,8 +110,13 @@ exports.area = vNode_1.vNode.ToFunction("area");
 // Meta content
 exports.template = vNode_1.vNode.ToFunction("template");
 exports.slot = vNode_1.vNode.ToFunction("slot");
+const fragmentElement = vNode_1.vNode.ToFunction(vNode_types_1.FRAGMENT_NODE);
+const fragment = function (config, children) {
+    return fragmentElement(config, children);
+};
+exports.fragment = fragment;
 // Text node
-const textElement = vNode_1.vNode.ToFunction("text");
+const textElement = vNode_1.vNode.ToFunction(vNode_types_1.TEXT_NODE);
 const text = function (callback) {
     return textElement({ props: () => ({ nodeValue: callback() }) });
 };

package/Node/nodeConfig.d.ts

@@ -42,5 +42,6 @@ export interface INodeConfig {
     getNextSibling(target: any): any;
     replaceChildren(target: any, children: any[]): void;
     reconcileChildren(target: any, children: any[]): void;
+    reconcileRange(target: any, start: any, end: any, children: any[]): void;
 }
 export declare const NodeConfig: INodeConfig;

package/Node/vNode.d.ts

@@ -1,21 +1,10 @@
-import { RecursivePartial } from "../Utils/utils.types";
-import { vNode as vNodeType, vNodeDefinition, FunctionOr, vNodeEvents, vNodeChildrenFunction, vElementNode } from "./vNode.types";
-type vNodeConfig<P = HTMLElement, E = HTMLElementEventMap, T = never> = {
-    props?: FunctionOr<RecursivePartial<P>>;
-    attrs?: FunctionOr<{
-        [name: string]: string;
-    }>;
-    on?: FunctionOr<vNodeEvents<E>>;
-    data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
-};
+import { vNode as vNodeType, vNodeDefinition, vNodeChildrenFunction, vElementNode, vNodeConfig, TEXT_NODE, FRAGMENT_NODE } from "./vNode.types";
 export declare namespace vNode {
     function Create<P = HTMLElement, E = HTMLElementEventMap, T = never>(definition: vNodeDefinition<P, E, T>): vElementNode;
-    function CreateText(text: string): vNodeType;
-    function Init(vnode: vNodeType): void;
-    function InitAll(vnodes: vNodeType[]): void;
+    function Init(vnode: vNodeType, parentNode?: vElementNode): void;
+    function InitAll(vnodes: vNodeType[], parentNode?: vElementNode): void;
     function Destroy(vnode: vNodeType): void;
     function DestroyAll(vnodes: vNodeType[]): void;
-    function ToFunction<P = HTMLElement, E = HTMLElementEventMap>(type: string, namespace?: string): <T>(config: vNodeConfig<P, E, T>, children?: vNodeType[] | vNodeChildrenFunction<T>) => vElementNode;
+    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;
 }
-export {};

package/Node/vNode.js

@@ -20,6 +20,7 @@ var vNode;
                     return new injector_1.Injector();
                 })
                 : (injector_1.Injector.Current() ?? new injector_1.Injector()),
+            parentNode: null,
             node: definition.node ?? null,
             children: null,
             destroyed: false,
@@ -29,29 +30,15 @@ var vNode;
         };
     }
     vNode.Create = Create;
-    function CreateText(text) {
-        return {
-            definition: null,
-            type: "text",
-            injector: null,
-            node: nodeConfig_1.NodeConfig.createTextNode(text),
-            children: null,
-            destroyed: false,
-            onDestroyed: null,
-            component: null,
-            scopes: [],
-        };
-    }
-    vNode.CreateText = CreateText;
-    function Init(vnode) {
+    function Init(vnode, parentNode = null) {
         if ((0, vNode_types_1.isStringNode)(vnode) || vnode.definition === null)
             return;
-        InitNode(vnode);
+        InitNode(vnode, parentNode);
     }
     vNode.Init = Init;
-    function InitAll(vnodes) {
+    function InitAll(vnodes, parentNode = null) {
         for (let x = 0; x < vnodes.length; x++)
-            Init(vnodes[x]);
+            Init(vnodes[x], parentNode);
     }
     vNode.InitAll = InitAll;
     function Destroy(vnode) {
@@ -85,6 +72,9 @@ var vNode;
     }
     vNode.ToFunction = ToFunction;
     function Attach(node, vnode) {
+        if (vnode.type === vNode_types_1.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.");
         Init(vnode);
         nodeConfig_1.NodeConfig.addChild(node, vnode.node);
         return vnode;
@@ -94,11 +84,21 @@ var vNode;
 function ComponentChildren() {
     return this.Template();
 }
-function InitNode(vnode) {
+function InitNode(vnode, parentNode) {
     const { type, namespace, props, attrs, on, data, componentFactory, children, childrenArray, } = vnode.definition;
-    const node = (vnode.node =
-        vnode.definition.node ?? nodeConfig_1.NodeConfig.createNode(type, namespace));
+    let node = null;
+    switch (vnode.type) {
+        case vNode_types_1.FRAGMENT_NODE:
+            break;
+        case vNode_types_1.TEXT_NODE:
+            vnode.node = node = vnode.definition.node ?? nodeConfig_1.NodeConfig.createTextNode();
+            break;
+        default:
+            vnode.node = node = vnode.definition.node ?? nodeConfig_1.NodeConfig.createNode(type, namespace);
+            break;
+    }
     vnode.definition = null;
+    vnode.parentNode = parentNode;
     if (props) {
         if (typeof props === "function") {
             const assignProperties = nodeConfig_1.NodeConfig.createPropertyAssignment(node);
@@ -139,7 +139,7 @@ function InitNode(vnode) {
     }
     else if (childrenArray) {
         vnode.children = childrenArray;
-        vNode.InitAll(childrenArray);
+        vNode.InitAll(childrenArray, vnode);
     }
     else if (children) {
         Children(vnode, children, data);
@@ -174,6 +174,9 @@ function CreateChildrenScope(vnode, children, data) {
     }
     return Store_1.ObservableScope.Create(DynamicChildrenFunction.bind(null, vnode.injector, children, data));
 }
+function ToVNodeType(children) {
+    return typeof children === "string" ? { type: vNode_types_1.STRING_NODE, node: children } : children;
+}
 function GetNextNodes(injector, children, data) {
     return ToVNodeType(injector_1.Injector.Scope(injector, children, data));
 }
@@ -201,11 +204,13 @@ function ToArray(result) {
         return result;
     return [result];
 }
-function ToVNodeType(children) {
-    return typeof children === "string" ? { type: "string", node: children } : children;
-}
 function GetNode(vnode) {
-    return vnode.node;
+    switch (vnode.type) {
+        case vNode_types_1.FRAGMENT_NODE:
+            return vnode.children.flatMap(GetNode);
+        default:
+            return vnode.node;
+    }
 }
 function UpdateChildren(vnode, init = false, skipInit = false) {
     if (!vnode.children)
@@ -220,22 +225,33 @@ function UpdateChildren(vnode, init = false, skipInit = false) {
                 (0, thread_1.Schedule)(function () {
                     if (vnode.destroyed || children !== vnode.children)
                         return;
-                    vNode.Init(childNode);
+                    vNode.Init(childNode, vnode);
                 });
             }
         }
         (0, thread_1.Thread)(function (async) {
             if (vnode.destroyed || children !== vnode.children)
                 return;
-            if (init || !async) {
-                nodeConfig_1.NodeConfig.reconcileChildren(vnode.node, vnode.children.map(GetNode));
+            if (init) {
+                if (vnode.node !== null)
+                    nodeConfig_1.NodeConfig.reconcileChildren(vnode.node, vnode.children.flatMap(GetNode));
             }
-            else
+            else if (!async) {
+                let reconcileNode = vnode;
+                while (reconcileNode.node === null)
+                    reconcileNode = reconcileNode.parentNode;
+                nodeConfig_1.NodeConfig.reconcileChildren(reconcileNode.node, reconcileNode.children.flatMap(GetNode));
+            }
+            else {
                 nodeConfig_1.NodeConfig.scheduleUpdate(function () {
                     if (vnode.destroyed || children !== vnode.children)
                         return;
-                    nodeConfig_1.NodeConfig.reconcileChildren(vnode.node, vnode.children.map(GetNode));
+                    let reconcileNode = vnode;
+                    while (reconcileNode.node === null)
+                        reconcileNode = reconcileNode.parentNode;
+                    nodeConfig_1.NodeConfig.reconcileChildren(reconcileNode.node, reconcileNode.children.flatMap(GetNode));
                 });
+            }
         });
     });
 }

package/Node/vNode.types.d.ts

@@ -3,6 +3,9 @@ import { IObservableScope } from "../Store/Tree/observableScope";
 import { Injector } from "../Utils/injector";
 import { RecursivePartial } from "../Utils/utils.types";
 import { Emitter } from "../Utils/emitter";
+export declare const STRING_NODE: unique symbol;
+export declare const TEXT_NODE: unique symbol;
+export declare const FRAGMENT_NODE: unique symbol;
 export type FunctionOr<T> = {
     (): T | Promise<T>;
 } | T;
@@ -14,14 +17,23 @@ export type vNodeEvents<E extends {
     };
 };
 export type vNodeChildrenFunction<T> = ((data: T) => vNode | vNode[]) | ((data: T) => string);
+export type vNodeConfig<P = HTMLElement, E = HTMLElementEventMap, T = never> = {
+    props?: FunctionOr<RecursivePartial<P>>;
+    attrs?: FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: FunctionOr<vNodeEvents<E>>;
+    data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
+};
 export type vStringNode = {
-    type: "string";
+    type: typeof STRING_NODE;
     node: string;
 };
 export type vElementNode = {
-    type: string;
+    type: string | typeof TEXT_NODE | typeof FRAGMENT_NODE;
     definition: vNodeDefinition<any, any, any>;
     injector: Injector;
+    parentNode: vElementNode | null;
     node: Node | null;
     children: vNode[];
     destroyed: boolean;
@@ -32,7 +44,7 @@ export type vElementNode = {
 export type vNode = vStringNode | vElementNode;
 export declare function isStringNode(vnode: vNode): vnode is vStringNode;
 export type vNodeDefinition<P = HTMLElement, E = HTMLElementEventMap, T = never> = {
-    type: string;
+    type: string | typeof TEXT_NODE | typeof FRAGMENT_NODE;
     node?: Node;
     namespace: string | null;
     props?: FunctionOr<RecursivePartial<P>>;

package/Node/vNode.types.js

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FRAGMENT_NODE = exports.TEXT_NODE = exports.STRING_NODE = void 0;
 exports.isStringNode = isStringNode;
+exports.STRING_NODE = Symbol("STRING_NODE");
+exports.TEXT_NODE = Symbol("TEXT_NODE");
+exports.FRAGMENT_NODE = Symbol("FRAGMENT_NODE");
 function isStringNode(vnode) {
-    return vnode.type === "string";
+    return vnode.type === exports.STRING_NODE;
 }

package/Store/Tree/observableScope.js

@@ -7,6 +7,7 @@ exports.GateScope = GateScope;
 exports.PeekScope = PeekScope;
 const emitter_1 = require("../../Utils/emitter");
 const functions_1 = require("../../Utils/functions");
+const scheduling_1 = require("../../Utils/scheduling");
 function Invoke(param, callback) {
     return callback(param);
 }
@@ -87,9 +88,9 @@ function ProcessScopeQueue() {
  * @param scope The scope to queue for update.
  */
 function OnSetQueued(scope) {
-    if (scopeQueue.length === 0)
-        queueMicrotask(ProcessScopeQueue);
     scopeQueue.push(scope);
+    if (scopeQueue.length === 1)
+        (0, scheduling_1._queueMicrotask)(ProcessScopeQueue);
 }
 /**
  * Marks a scope as dirty and triggers update behavior based on scope type.

package/Utils/emitter.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Emitter = void 0;
-const scheduleCallback = typeof requestIdleCallback !== "undefined"
-    ? requestIdleCallback
-    : setTimeout;
+const scheduling_1 = require("./scheduling");
 const pendingCompactEmitters = new Set();
 function Compact(emitter) {
     if (emitter.length === 1 || emitter[0] === 0)
@@ -16,7 +14,7 @@ function ScheduleCompact() {
     if (compactScheduled)
         return;
     compactScheduled = true;
-    scheduleCallback(PerformCompact);
+    (0, scheduling_1._requestIdleCallback)(PerformCompact);
 }
 function PerformCompact() {
     compactScheduled = false;

package/Utils/scheduling.d.ts

@@ -0,0 +1,4 @@
+export declare const _requestAnimationFrame: typeof window.requestAnimationFrame;
+export declare const _setTimeout: typeof window.setTimeout;
+export declare const _queueMicrotask: typeof window.queueMicrotask;
+export declare const _requestIdleCallback: typeof window.requestIdleCallback;

package/Utils/scheduling.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._requestIdleCallback = exports._queueMicrotask = exports._setTimeout = exports._requestAnimationFrame = void 0;
+const IMMEDIATE_OVERRIDE = typeof process !== "undefined" ?
+    process.env.SYNC_SCHEDULING === 'true' :
+    false;
+exports._requestAnimationFrame = IMMEDIATE_OVERRIDE ?
+    function immediateRequestAnimationFrame(callback) {
+        callback(0);
+        return 0;
+    } : window.requestAnimationFrame;
+exports._setTimeout = IMMEDIATE_OVERRIDE ?
+    function immediateSetTimeout(handler, timeout, ...args) {
+        if (typeof handler === "function")
+            handler(...args);
+        return 0;
+    } : window.setTimeout;
+exports._queueMicrotask = IMMEDIATE_OVERRIDE ?
+    function immediateQueueMicrotask(callback) {
+        callback();
+    } : window.queueMicrotask;
+exports._requestIdleCallback = IMMEDIATE_OVERRIDE ?
+    function immediateRequestIdleCallback(callback, options) {
+        callback({ didTimeout: false, timeRemaining: () => 0 });
+        return 0;
+    } : window.requestIdleCallback ?? window.setTimeout;

package/Utils/thread.js

@@ -7,6 +7,7 @@ exports.Synch = Synch;
 exports.Thread = Thread;
 exports.ThreadAsync = ThreadAsync;
 const list_1 = require("./list");
+const scheduling_1 = require("./scheduling");
 // Constants
 /**
  * The maximum time allowed for work execution in milliseconds
@@ -19,9 +20,6 @@ const contextQueue = list_1.List.Create();
 // State variables
 let threadContext = null;
 let timeoutRunning = false;
-// Callback scheduling functions
-const scheduleInitialCallback = queueMicrotask;
-const scheduleCallback = setTimeout;
 /**
  * Calculates the remaining time until the deadline
  * @param this - The deadline object
@@ -49,7 +47,7 @@ function ProcessQueue(deadline = createDeadline()) {
     while (deadline.timeRemaining() > 0 && (ctx = list_1.List.Pop(contextQueue)))
         DoWork(ctx, deadline);
     if (contextQueue.size > 0)
-        scheduleCallback(ProcessQueue);
+        (0, scheduling_1._setTimeout)(ProcessQueue);
     else
         timeoutRunning = false;
 }
@@ -62,7 +60,7 @@ function ScheduleWork(ctx) {
     if (timeoutRunning)
         return;
     timeoutRunning = true;
-    scheduleInitialCallback(ProcessQueue);
+    (0, scheduling_1._queueMicrotask)(ProcessQueue);
 }
 /**
  * Invokes a callback in the specified thread context

package/package.json

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

package/DOM/window.d.ts

@@ -1 +0,0 @@
-export declare const wndw: Window;

package/DOM/window.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.wndw = void 0;
-function jsdomWindow() {
-    try {
-        return require("jsdom").JSDOM("").window;
-    }
-    catch (err) {
-        return undefined;
-    }
-}
-exports.wndw = typeof window !== "undefined" ? window : jsdomWindow();