taggedjs 2.1.1 → 2.1.2

package/js/getCallback.js

@@ -0,0 +1,53 @@
+import { getStateValue } from "./state.js";
+import { setUse } from "./tagRunner.js";
+export let getCallback = () => (callback) => () => {
+    throw new Error('The real callback function was called and that should never occur');
+};
+setUse({
+    beforeRender: (tagSupport) => {
+        tagSupport.callbacks = [];
+        getCallback = () => {
+            const callbackMaker = (callback) => {
+                const trigger = () => {
+                    const state = tagSupport.state;
+                    const oldest = callbackMaker.state; // state.oldest as StateConfigArray
+                    const newest = state.newest;
+                    // ensure that the oldest has the latest values first
+                    updateState(newest, oldest);
+                    // run the callback
+                    const promise = callback();
+                    // send the oldest state changes into the newest
+                    updateState(oldest, newest);
+                    tagSupport.render();
+                    if (promise instanceof Promise) {
+                        promise.finally(() => {
+                            // send the oldest state changes into the newest
+                            updateState(oldest, newest);
+                            tagSupport.render();
+                        });
+                    }
+                };
+                const state = tagSupport.state;
+                trigger.state = state;
+                return trigger;
+            };
+            const callbacks = tagSupport.callbacks;
+            callbacks.push(callbackMaker);
+            return callbackMaker;
+        };
+    },
+    afterRender: (tagSupport) => {
+        const callbacks = tagSupport.callbacks;
+        callbacks.forEach(callback => {
+            const state = tagSupport.state;
+            callback.state = [...state.newest];
+        });
+    }
+});
+function updateState(stateFrom, stateTo) {
+    stateFrom.forEach((state, index) => {
+        const oldValue = getStateValue(state);
+        const [checkValue] = stateTo[index](oldValue);
+    });
+}
+//# sourceMappingURL=getCallback.js.map

package/js/getCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCallback.js","sourceRoot":"","sources":["../ts/getCallback.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4C,aAAa,EAAE,MAAM,YAAY,CAAA;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAIvC,MAAM,CAAC,IAAI,WAAW,GAAG,GAAG,EAAE,CAAC,CAAC,QAAkB,EAAE,EAAE,CAAC,GAAS,EAAE;IAChE,MAAM,IAAI,KAAK,CAAC,mEAAmE,CAAC,CAAA;AACtF,CAAC,CAAA;AAOD,MAAM,CAAC;IACL,YAAY,EAAE,CAAC,UAA8B,EAAE,EAAE;QAC/C,UAAU,CAAC,SAAS,GAAG,EAAE,CAAA;QAEzB,WAAW,GAAG,GAAG,EAAE;YAEjB,MAAM,aAAa,GAAG,CACpB,QAAkB,EAClB,EAAE;gBACF,MAAM,OAAO,GAAG,GAAG,EAAE;oBACnB,MAAM,KAAK,GAAG,UAAU,CAAC,KAAc,CAAA;oBACvC,MAAM,MAAM,GAAI,aAAqB,CAAC,KAAK,CAAA,CAAC,mCAAmC;oBAC/E,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;oBAE3B,qDAAqD;oBACrD,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;oBAE3B,mBAAmB;oBACnB,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAA;oBAE1B,gDAAgD;oBAChD,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;oBAE3B,UAAU,CAAC,MAAM,EAAE,CAAA;oBAEnB,IAAG,OAAO,YAAY,OAAO,EAAE,CAAC;wBAC9B,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;4BACnB,gDAAgD;4BAChD,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;4BAE3B,UAAU,CAAC,MAAM,EAAE,CAAA;wBACrB,CAAC,CAAC,CAAA;oBACJ,CAAC;gBACH,CAAC,CAAA;gBAED,MAAM,KAAK,GAAG,UAAU,CAAC,KAAc,CAAA;gBACvC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;gBAErB,OAAO,OAAO,CAAA;YAChB,CAAC,CAAA;YAED,MAAM,SAAS,GAAG,UAAU,CAAC,SAAkB,CAAA;YAC/C,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;YAE7B,OAAO,aAAa,CAAA;QACtB,CAAC,CAAA;IACH,CAAC;IACD,WAAW,EAAE,CAAC,UAA8B,EAAE,EAAE;QAC9C,MAAM,SAAS,GAAG,UAAU,CAAC,SAAkB,CAAA;QAC/C,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC3B,MAAM,KAAK,GAAG,UAAU,CAAC,KAAc,CAAA;YACvC,QAAQ,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,MAAa,CAAC,CAAA;QAC3C,CAAC,CAAC,CAAA;IACJ,CAAC;CACF,CAAC,CAAA;AAEF,SAAS,WAAW,CAClB,SAA2B,EAC3B,OAAyB;IAEzB,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACjC,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,CAAA;QACrC,MAAM,CAAC,UAAU,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAE,QAAQ,CAAE,CAAA;IACjD,CAAC,CAAC,CAAA;AACJ,CAAC"}

package/js/getTagSupport.d.ts

@@ -0,0 +1,20 @@
+import { Tag } from "./Tag.class.js";
+import { TemplaterResult } from "./tag.js";
+export interface TagSupport {
+    templater?: TemplaterResult;
+    /** Indicator of re-rending. Saves from double rending something already rendered */
+    renderCount: 0;
+    mutatingRender: () => any;
+    render: () => any;
+    /**
+     *
+     * @param {*} props value.props
+     * @param {*} newProps value.newProps
+     * @param {*} compareToProps compareSupport.templater.props
+     * @returns {boolean}
+     */
+    hasPropChanges: (props: any, newProps: any, compareToProps: any) => boolean;
+    oldest?: Tag;
+    newest?: Tag;
+}
+export declare function getTagSupport(templater?: TemplaterResult): TagSupport;

package/js/getTagSupport.js

@@ -0,0 +1,20 @@
+import { deepEqual } from "./deepFunctions.js";
+export function getTagSupport(templater) {
+    const tagSupport = {
+        templater,
+        renderCount: 0,
+        mutatingRender: () => { throw new Error('Tag function "render()" was called in sync but can only be called async'); }, // loaded later and only callable async
+        render: () => {
+            ++tagSupport.renderCount;
+            return tagSupport.mutatingRender();
+        }, // ensure this function still works even during deconstructing
+        hasPropChanges: (props, newProps, compareToProps) => {
+            const oldProps = tagSupport.templater.cloneProps;
+            const isCommonEqual = props === undefined && props === compareToProps;
+            const isEqual = isCommonEqual || deepEqual(newProps, oldProps);
+            return !isEqual;
+        },
+    };
+    return tagSupport;
+}
+//# sourceMappingURL=getTagSupport.js.map

package/js/getTagSupport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTagSupport.js","sourceRoot":"","sources":["../ts/getTagSupport.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AA8B9C,MAAM,UAAU,aAAa,CAC3B,SAA2B;IAE3B,MAAM,UAAU,GAAe;QAC7B,SAAS;QACT,WAAW,EAAE,CAAC;QACd,cAAc,EAAE,GAAG,EAAE,GAAE,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAA,CAAA,CAAC,EAAE,uCAAuC;QAC3J,MAAM,EAAE,GAAG,EAAE;YACX,EAAE,UAAU,CAAC,WAAW,CAAA;YACxB,OAAO,UAAU,CAAC,cAAc,EAAE,CAAA;QACpC,CAAC,EAAE,8DAA8D;QAEjE,cAAc,EAAE,CACd,KAAU,EACV,QAAa,EACb,cAAmB,EACnB,EAAE;YACF,MAAM,QAAQ,GAAI,UAAU,CAAC,SAAiB,CAAC,UAAU,CAAA;YACzD,MAAM,aAAa,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,cAAc,CAAA;YACrE,MAAM,OAAO,GAAG,aAAa,IAAI,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;YAC9D,OAAO,CAAC,OAAO,CAAA;QACjB,CAAC;KACF,CAAA;IAED,OAAO,UAAU,CAAA;AACnB,CAAC"}

package/js/html.d.ts

@@ -0,0 +1,2 @@
+import { Tag } from "./Tag.class.js";
+export declare function html(strings: string[], ...values: unknown[]): Tag;

package/js/html.js

@@ -0,0 +1,5 @@
+import { Tag } from "./Tag.class.js";
+export function html(strings, ...values) {
+    return new Tag(strings, values);
+}
+//# sourceMappingURL=html.js.map

package/js/html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.js","sourceRoot":"","sources":["../ts/html.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAA;AAEpC,MAAM,UAAU,IAAI,CAClB,OAAiB,EACjB,GAAG,MAAiB;IAEpB,OAAO,IAAI,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;AACjC,CAAC"}

package/js/index.d.ts

@@ -0,0 +1,10 @@
+export { html } from "./html.js";
+export { tag } from "./tag.js";
+export { Subject } from "./Subject.js";
+export { wait } from "./wait.js";
+export { renderAppToElement } from "./renderAppToElement.js";
+export { Tag } from "./Tag.class.js";
+export * from "./onInit.js";
+export { providers } from "./providers.js";
+export { state } from "./state.js";
+export { getCallback } from "./getCallback.js";

package/js/index.js

@@ -0,0 +1,12 @@
+export { html } from "./html.js";
+export { tag } from "./tag.js";
+export { Subject } from "./Subject.js";
+export { wait } from "./wait.js";
+export { renderAppToElement } from "./renderAppToElement.js";
+export { Tag } from "./Tag.class.js";
+// hooks
+export * from "./onInit.js";
+export { providers } from "./providers.js";
+export { state } from "./state.js";
+export { getCallback } from "./getCallback.js";
+//# sourceMappingURL=index.js.map

package/js/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../ts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAG9B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAGtC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAEhC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAE5D,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAA;AAEpC,QAAQ;AACR,cAAc,aAAa,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA"}

package/js/inputAttribute.d.ts

@@ -0,0 +1 @@
+export declare function inputAttribute(name: string, value: any, element: Element): void;

package/js/inputAttribute.js

@@ -0,0 +1,19 @@
+export function inputAttribute(name, value, element) {
+    const names = name.split('.');
+    // style.position = "absolute"
+    if (names[0] === 'style') {
+        element.style[names[1]] = value;
+    }
+    // Example: class.width-full = "true"
+    if (names[0] === 'class') {
+        names.pop();
+        if (value) {
+            names.forEach(name => element.classList.remove(name));
+        }
+        else {
+            names.forEach(name => element.classList.add(name));
+        }
+        return;
+    }
+}
+//# sourceMappingURL=inputAttribute.js.map

package/js/inputAttribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputAttribute.js","sourceRoot":"","sources":["../ts/inputAttribute.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,cAAc,CAC5B,IAAY,EACZ,KAAU,EACV,OAAgB;IAEhB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAE7B,8BAA8B;IAC9B,IAAG,KAAK,CAAC,CAAC,CAAC,KAAK,OAAO,EAAE,CAAC;QACvB,OAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAA;IAC1C,CAAC;IAED,qCAAqC;IACrC,IAAG,KAAK,CAAC,CAAC,CAAC,KAAK,OAAO,EAAE,CAAC;QACxB,KAAK,CAAC,GAAG,EAAE,CAAA;QACX,IAAG,KAAK,EAAE,CAAC;YACT,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;QACvD,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAA;QACpD,CAAC;QACD,OAAM;IACR,CAAC;AACH,CAAC"}

package/js/interpolateAttributes.d.ts

@@ -0,0 +1,3 @@
+import { Context, Tag } from "./Tag.class.js";
+export declare function interpolateAttributes(child: Element, scope: Context, ownerTag: Tag): void;
+export declare function isSpecialAttr(attrName: string): boolean;

package/js/interpolateAttributes.js

@@ -0,0 +1,69 @@
+import { Subject } from "./Subject.js";
+import { inputAttribute } from "./inputAttribute.js";
+const startRegX = /^\s*{/;
+const endRegX = /}\s*$/;
+export function interpolateAttributes(child, scope, ownerTag) {
+    child.getAttributeNames().forEach(attrName => {
+        const value = child.getAttribute(attrName);
+        const isSpecial = isSpecialAttr(attrName);
+        // An attempt to replicate React
+        if (value && value.search(startRegX) >= 0 && value.search(endRegX) >= 0) {
+            // get the code inside the brackets like "variable0" or "{variable0}"
+            const code = value.replace('{', '').split('').reverse().join('').replace('}', '').split('').reverse().join('');
+            const result = scope[code];
+            // attach as callback
+            if (result instanceof Function) {
+                ;
+                child[attrName] = function (...args) {
+                    result(child, args);
+                };
+                return;
+            }
+            if (result instanceof Subject) {
+                child.removeAttribute(attrName);
+                const callback = (newAttrValue) => {
+                    if (newAttrValue instanceof Function) {
+                        ;
+                        child[attrName] = function (...args) {
+                            newAttrValue(child, args);
+                        };
+                        child[attrName].tagFunction = newAttrValue;
+                        return;
+                    }
+                    if (isSpecial) {
+                        inputAttribute(attrName, newAttrValue, child);
+                    }
+                    if (newAttrValue) {
+                        child.setAttribute(attrName, newAttrValue);
+                    }
+                    const isDeadValue = newAttrValue === undefined || newAttrValue === false || newAttrValue === null;
+                    if (isDeadValue) {
+                        child.removeAttribute(attrName);
+                        return;
+                    }
+                    // value is 0
+                    child.setAttribute(attrName, newAttrValue);
+                };
+                const sub = result.subscribe(callback);
+                ownerTag.cloneSubs.push(sub); // this is where unsubscribe is picked up
+                return;
+            }
+            // child.setAttribute(attrName, result)
+            /*
+            if(attrName === 'style') {
+              return
+            }
+            */
+            child.setAttribute(attrName, result.value);
+            return;
+        }
+        // Non dynamic
+        if (isSpecial) {
+            return inputAttribute(attrName, value, child);
+        }
+    });
+}
+export function isSpecialAttr(attrName) {
+    return attrName.search(/^(class|style)(\.)/) >= 0;
+}
+//# sourceMappingURL=interpolateAttributes.js.map

package/js/interpolateAttributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interpolateAttributes.js","sourceRoot":"","sources":["../ts/interpolateAttributes.ts"],"names":[],"mappings":"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"}

package/js/interpolateContentTemplates.d.ts

@@ -0,0 +1,3 @@
+import { Tag } from "./Tag.class.js";
+/** Returns subscriptions[] that will need to be unsubscribed from when element is destroyed */
+export declare function interpolateContentTemplates(element: Element, variable: any, ownerTag: Tag): void;

package/js/interpolateContentTemplates.js

@@ -0,0 +1,47 @@
+import { interpolateTemplate } from "./interpolateTemplate.js";
+/** Returns subscriptions[] that will need to be unsubscribed from when element is destroyed */
+export function interpolateContentTemplates(element, variable, ownerTag) {
+    if (!element.children || element.tagName === 'TEMPLATE') {
+        return; // done
+    }
+    const counts = {
+        added: 0,
+        removed: 0,
+    };
+    const children = new Array(...element.children);
+    children.forEach((child, index) => {
+        interpolateChild(child, index, children);
+        if (child.children) {
+            const nextKids = new Array(...child.children);
+            nextKids.forEach((subChild, index) => {
+                if (isRenderEndTemplate(subChild)) {
+                    interpolateChild(subChild, index, nextKids);
+                }
+                interpolateContentTemplates(subChild, variable, ownerTag);
+            });
+        }
+    });
+    function interpolateChild(child, index, children) {
+        children.forEach((child, subIndex) => {
+            if (subIndex < index) {
+                return; // too low
+            }
+            if (child.tagName !== 'TEMPLATE') {
+                return; // not a template
+            }
+            if (child.getAttribute('interpolate') === undefined || child.getAttribute('end') === undefined) {
+                return; // not a rendering template
+            }
+            return child;
+        });
+        interpolateTemplate(child, variable, ownerTag, counts);
+    }
+    return;
+}
+function isRenderEndTemplate(child) {
+    const isTemplate = child.tagName === 'TEMPLATE';
+    return isTemplate &&
+        child.getAttribute('interpolate') !== undefined &&
+        child.getAttribute('end') !== undefined;
+}
+//# sourceMappingURL=interpolateContentTemplates.js.map

package/js/interpolateContentTemplates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interpolateContentTemplates.js","sourceRoot":"","sources":["../ts/interpolateContentTemplates.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAEtE,+FAA+F;AAC/F,MAAM,UAAU,2BAA2B,CACzC,OAAgB,EAChB,QAAa,EACb,QAAa;IAEb,IAAK,CAAC,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,OAAO,KAAK,UAAU,EAAG,CAAC;QAC1D,OAAM,CAAC,OAAO;IAChB,CAAC;IACD,MAAM,MAAM,GAAW;QACrB,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;KACX,CAAA;IAED,MAAM,QAAQ,GAAG,IAAI,KAAK,CAAC,GAAI,OAAO,CAAC,QAAgB,CAAC,CAAA;IAExD,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAChC,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;QAExC,IAAK,KAAK,CAAC,QAAQ,EAAG,CAAC;YACrB,MAAM,QAAQ,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAA;YAC7C,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;gBACnC,IAAK,mBAAmB,CAAC,QAAQ,CAAC,EAAG,CAAC;oBACpC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;gBAC7C,CAAC;gBAED,2BAA2B,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAA;YAC3D,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,SAAS,gBAAgB,CACvB,KAAc,EACd,KAAa,EACb,QAAmB;QAEnB,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;YACnC,IAAK,QAAQ,GAAG,KAAK,EAAG,CAAC;gBACvB,OAAM,CAAC,UAAU;YACnB,CAAC;YAED,IAAK,KAAK,CAAC,OAAO,KAAG,UAAU,EAAG,CAAC;gBACjC,OAAM,CAAC,iBAAiB;YAC1B,CAAC;YAED,IAAK,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,KAAG,SAAS,IAAI,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,SAAS,EAAG,CAAC;gBAC/F,OAAM,CAAC,2BAA2B;YACpC,CAAC;YAED,OAAO,KAAK,CAAA;QACd,CAAC,CAAC,CAAA;QAEF,mBAAmB,CACjB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,CACP,CAAA;IACH,CAAC;IAED,OAAM;AACR,CAAC;AAED,SAAS,mBAAmB,CAAC,KAAc;IACzC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,KAAG,UAAU,CAAA;IAC7C,OAAO,UAAU;QACjB,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,SAAS;QAC/C,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,SAAS,CAAA;AACzC,CAAC"}

package/js/interpolateElement.d.ts

@@ -0,0 +1,14 @@
+import { Context, Tag } from "./Tag.class.js";
+/**
+ *
+ * @param {*} element
+ * @param {*} context
+ * @param {Tag} ownerTag
+ */
+export declare function interpolateElement(element: Element, context: Context, // variables used to evaluate
+ownerTag: Tag): void;
+/** Convert interpolations into template tags */
+export declare function interpolateElementChild(child: Element): {
+    string: string;
+    keys: string[];
+};

package/js/interpolateElement.js

@@ -0,0 +1,35 @@
+import { interpolateAttributes } from "./interpolateAttributes.js";
+import { interpolateToTemplates } from "./interpolations.js";
+import { interpolateContentTemplates } from "./interpolateContentTemplates.js";
+import { escapeSearch, variablePrefix } from "./Tag.class.js";
+/**
+ *
+ * @param {*} element
+ * @param {*} context
+ * @param {Tag} ownerTag
+ */
+export function interpolateElement(element, context, // variables used to evaluate
+ownerTag) {
+    const result = interpolateElementChild(element);
+    if (result.keys.length) {
+        interpolateContentTemplates(element, context, ownerTag);
+    }
+    interpolateAttributes(element, context, ownerTag);
+    function processChildren(children) {
+        new Array(...children).forEach(child => {
+            interpolateAttributes(child, context, ownerTag);
+            if (child.children) {
+                processChildren(child.children);
+            }
+        });
+    }
+    processChildren(element.children);
+}
+/** Convert interpolations into template tags */
+export function interpolateElementChild(child) {
+    const result = interpolateToTemplates(child.innerHTML);
+    result.string = result.string.replace(escapeSearch, variablePrefix);
+    child.innerHTML = result.string;
+    return result;
+}
+//# sourceMappingURL=interpolateElement.js.map

package/js/interpolateElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interpolateElement.js","sourceRoot":"","sources":["../ts/interpolateElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAA;AAC9E,OAAO,EAAgB,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE3E;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAChC,OAAgB,EAChB,OAAgB,EAAE,6BAA6B;AAC/C,QAAa;IAEb,MAAM,MAAM,GAAG,uBAAuB,CAAC,OAAO,CAAC,CAAA;IAE/C,IAAG,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QACtB,2BAA2B,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAA;IACzD,CAAC;IAED,qBAAqB,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAA;IAEjD,SAAS,eAAe,CAAC,QAAwB;QAC/C,IAAI,KAAK,CAAC,GAAG,QAAe,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAC5C,qBAAqB,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAA;YAE/C,IAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;gBAClB,eAAe,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;YACjC,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;AACnC,CAAC;AAED,gDAAgD;AAChD,MAAM,UAAU,uBAAuB,CACrC,KAAc;IAEd,MAAM,MAAM,GAAG,sBAAsB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IACtD,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,cAAc,CAAC,CAAA;IACnE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,MAAM,CAAA;IAC/B,OAAO,MAAM,CAAA;AACf,CAAC"}

package/js/interpolateTemplate.d.ts

@@ -0,0 +1,21 @@
+import { Context, Tag } from "./Tag.class.js";
+import { TemplaterResult } from "./tag.js";
+export declare function interpolateTemplate(template: Element & {
+    clone?: any;
+}, // <template end interpolate /> (will be removed)
+context: Context, // variable scope of {`__tagVar${index}`:'x'}
+ownerTag: Tag, // Tag class
+counts: Counts): void;
+export declare function updateBetweenTemplates(value: any, lastFirstChild: Element): Text;
+export type Counts = {
+    added: 0;
+    removed: 0;
+};
+/** Returns {clones:[], subs:[]} */
+export declare function processTagResult(tag: Tag, result: any, // used for recording past and current value
+insertBefore: Element, // <template end interpolate />
+{ index, counts, }: {
+    index?: number;
+    counts: Counts;
+}): void;
+export declare function isTagComponent(value: unknown | TemplaterResult): boolean;

package/js/interpolateTemplate.js

@@ -0,0 +1,262 @@
+import { buildItemTagMap } from "./render.js";
+import { Tag, variablePrefix } from "./Tag.class.js";
+import { Subject } from "./Subject.js";
+import { processTagArray } from "./processTagArray.js";
+import { getTagSupport } from "./getTagSupport.js";
+import { deepClone, deepEqual } from "./deepFunctions.js";
+import { config as providers } from "./providers.js";
+import { elementInitCheck } from "./elementInitCheck.js";
+import { runBeforeRender } from "./tagRunner.js";
+import { TemplaterResult } from "./tag.js";
+export function interpolateTemplate(template, // <template end interpolate /> (will be removed)
+context, // variable scope of {`__tagVar${index}`:'x'}
+ownerTag, // Tag class
+counts) {
+    if (!template.hasAttribute('end')) {
+        return; // only care about starts
+    }
+    const variableName = template.getAttribute('id');
+    if (variableName?.substring(0, variablePrefix.length) !== variablePrefix) {
+        return; // ignore, not a tagVar
+    }
+    const result = context[variableName];
+    if (result instanceof Subject) {
+        const callback = (templateNewValue) => {
+            processSubjectValue(templateNewValue, result, template, ownerTag, counts);
+            setTimeout(() => {
+                counts.added = 0; // reset
+                counts.removed = 0; // reset
+            }, 0);
+        };
+        const sub = result.subscribe(callback);
+        ownerTag.cloneSubs.push(sub);
+        return;
+    }
+    const clone = updateBetweenTemplates(result, template.clone || template);
+    ownerTag.clones.push(clone);
+    template.clone = clone;
+    return;
+}
+/**
+ *
+ * @param {*} value
+ * @param {*} result
+ * @param {*} template
+ * @param {Tag} ownerTag
+ * @param {{added: number, removed: number}} counts
+ * @returns
+ */
+function processSubjectValue(value, result, // could be tag via result.tag
+template, // <template end interpolate /> (will be removed)
+ownerTag, counts) {
+    if (value instanceof Tag) {
+        // first time seeing this tag?
+        if (!value.tagSupport) {
+            value.tagSupport = getTagSupport();
+            value.tagSupport.mutatingRender = ownerTag.tagSupport.mutatingRender;
+            value.tagSupport.oldest = value.tagSupport.oldest || value;
+            ownerTag.children.push(value);
+            value.ownerTag = ownerTag;
+        }
+        // value.tagSupport.newest = value
+        processTagResult(value, result, // Function will attach result.tag
+        template, { counts });
+        return;
+    }
+    // *for map
+    if (value instanceof Array && value.every(x => x instanceof Tag)) {
+        return processTagArray(result, value, template, ownerTag, counts);
+    }
+    if (isTagComponent(value)) {
+        return processSubjectComponent(value, result, template, ownerTag, counts);
+    }
+    // *if processing WAS a tag BUT NOW its some other non-tag value
+    if (result.tag) {
+        // put the template back
+        const lastFirstChild = template.clone || template; // result.tag.clones[0] // template.lastFirstChild
+        lastFirstChild.parentNode.insertBefore(template, lastFirstChild);
+        const stagger = counts.removed;
+        const animated = result.tag.destroy(stagger);
+        counts.removed = stagger + animated;
+        delete result.tag;
+        const clone = updateBetweenTemplates(value, lastFirstChild // ✅ this will be removed
+        ); // the template will be remove in here
+        template.clone = clone;
+        return;
+    }
+    const before = template.clone || template; // Either the template is on the doc OR its the first element we last put on doc
+    // Processing of regular values
+    const clone = updateBetweenTemplates(value, before);
+    template.clone = clone;
+    const oldPos = ownerTag.clones.indexOf(before);
+    if (oldPos >= 0 && !ownerTag.clones.includes(clone) && !before.parentNode) {
+        ownerTag.clones.splice(oldPos, 1);
+        ownerTag.clones.push(clone);
+    }
+}
+// Function to update the value of x
+export function updateBetweenTemplates(value, lastFirstChild) {
+    const parent = lastFirstChild.parentNode;
+    // mimic React skipping to display EXCEPT for true does display on page
+    if (value === undefined || value === false || value === null) { // || value === true
+        value = '';
+    }
+    // Insert the new value (never use innerHTML here)
+    const textNode = document.createTextNode(value); // never innerHTML
+    parent.insertBefore(textNode, lastFirstChild);
+    /* remove existing nodes */
+    parent.removeChild(lastFirstChild);
+    return textNode;
+}
+/** Returns {clones:[], subs:[]} */
+export function processTagResult(tag, result, // used for recording past and current value
+insertBefore, // <template end interpolate />
+{ index, counts, }) {
+    const template = tag.getTemplate();
+    // *for
+    if (index !== undefined) {
+        const existing = result.lastArray[index];
+        if (existing?.tag.isLikeTag(tag)) {
+            existing.tag.updateByTag(tag);
+            return;
+        }
+        const lastFirstChild = insertBefore; // tag.clones[0] // insertBefore.lastFirstChild
+        const clones = buildItemTagMap(tag, template, lastFirstChild);
+        clones.forEach(clone => afterElmBuild(clone, counts));
+        result.lastArray.push({
+            tag, index
+        });
+        return;
+    }
+    // *if appears we already have seen
+    if (result.tag) {
+        // are we just updating an if we already had?
+        if (result.tag.isLikeTag(tag)) {
+            // components
+            if (result instanceof Function) {
+                const newTag = result(result.tag.tagSupport);
+                result.tag.updateByTag(newTag);
+                return;
+            }
+            result.tag.updateByTag(tag);
+            return;
+        }
+    }
+    // *if just now appearing to be a Tag
+    const before = insertBefore.clone || insertBefore;
+    const clones = buildItemTagMap(tag, template, before);
+    clones.forEach(clone => afterElmBuild(clone, counts));
+    result.tag = tag; // let reprocessing know we saw this previously as an if
+    return;
+}
+export function isTagComponent(value) {
+    return value instanceof TemplaterResult;
+}
+function processSubjectComponent(value, result, template, ownerTag, counts) {
+    if (value.tagged !== true) {
+        let name = value.name || value.constructor?.name;
+        if (name === 'Function') {
+            name = undefined;
+        }
+        const error = new Error(`Not a tag component. Wrap your function with tag(). Example tag(props => html\`\`) on component:\n\n${name || value.toString().substring(0, 120)}\n\n`);
+        throw error;
+    }
+    /** @type {TagSupport} */
+    const tagSupport = result.tagSupport || getTagSupport(value);
+    tagSupport.mutatingRender = () => {
+        const preRenderCount = tagSupport.renderCount;
+        // Is this NOT my first render
+        if (result.tag) {
+            providersChangeCheck(result.tag);
+            // When the providers were checked, a render to myself occurred and I do not need to re-render again
+            if (preRenderCount !== tagSupport.renderCount) {
+                return tagSupport.newest;
+            }
+            const hasPropsChanged = tagSupport.hasPropChanges(value.props, value.newProps, result.tag.tagSupport.templater.props);
+            if (!hasPropsChanged) {
+                tagSupport.newest = value.redraw(value.newProps); // No change detected, just redraw me only
+                return tagSupport.newest;
+            }
+        }
+        // draw to my parent
+        const newest = tagSupport.newest = ownerTag.tagSupport.render();
+        return newest;
+    };
+    const templater = value;
+    let tag = templater.newest;
+    providers.ownerTag = ownerTag;
+    const isFirstTime = !tag;
+    runBeforeRender(tagSupport, tag);
+    if (isFirstTime) {
+        tag = templater.wrapper();
+        tag.tagSupport = tagSupport;
+        tag.afterRender();
+        templater.oldest = tag;
+        tagSupport.oldest = tag;
+        value.oldest = tag;
+    }
+    templater.newest = tag;
+    tag.ownerTag = ownerTag;
+    tag.ownerTag = ownerTag;
+    ownerTag.children.push(tag);
+    tag.setSupport(tagSupport);
+    processTagResult(tag, result, // The element set here will be removed from document
+    template, // <template end interpolate /> (will be removed)
+    {
+        counts,
+    });
+    return;
+}
+function afterElmBuild(elm, counts) {
+    if (!elm.getAttribute) {
+        return;
+    }
+    elementInitCheck(elm, counts);
+    if (elm.children) {
+        new Array(...elm.children).forEach(child => afterElmBuild(child, counts));
+    }
+}
+function providersChangeCheck(tag) {
+    const providersWithChanges = tag.providers.filter(provider => {
+        return !deepEqual(provider.instance, provider.clone);
+    });
+    // reset clones
+    providersWithChanges.forEach(provider => {
+        const appElement = tag.getAppElement();
+        handleProviderChanges(appElement, provider);
+        provider.clone = deepClone(provider.instance);
+    });
+}
+/**
+ *
+ * @param {Tag} appElement
+ * @param {Provider} provider
+ */
+function handleProviderChanges(appElement, provider) {
+    const tagsWithProvider = getTagsWithProvider(appElement, provider);
+    tagsWithProvider.forEach(({ tag, renderCount, provider }) => {
+        if (renderCount === tag.tagSupport.renderCount) {
+            provider.clone = deepClone(provider.instance);
+            tag.tagSupport.render();
+        }
+    });
+}
+/**
+ *
+ * @param {Tag} appElement
+ * @param {Provider} provider
+ * @returns {{tag: Tag, renderCount: numer, provider: Provider}[]}
+ */
+function getTagsWithProvider(tag, provider, memory = []) {
+    const hasProvider = tag.providers.find(xProvider => xProvider.constructMethod === provider.constructMethod);
+    if (hasProvider) {
+        memory.push({
+            tag,
+            renderCount: tag.tagSupport.renderCount,
+            provider: hasProvider
+        });
+    }
+    tag.children.forEach(child => getTagsWithProvider(child, provider, memory));
+    return memory;
+}
+//# sourceMappingURL=interpolateTemplate.js.map