taggedjs 2.5.9 → 2.5.12

package/bundle.js

@@ -73,23 +73,20 @@ function resetFunctionProps(newProps, ownerSupport) {
     }
     // BELOW: Do not clone because if first argument is object, the memory ref back is lost
     // const newProps = {...props} 
-    Object.entries(newProps).forEach(([name, value]) => {
-        if (value instanceof Function) {
-            const toCall = newProps[name].toCall;
-            if (toCall) {
-                return; // already previously converted
-            }
-            newProps[name] = (...args) => {
-                return newProps[name].toCall(...args); // what gets called can switch over parent state changes
-            };
-            // Currently, call self but over parent state changes, I may need to call a newer parent tag owner
-            newProps[name].toCall = (...args) => {
-                return callbackPropOwner(value, args, ownerSupport);
-            };
-            newProps[name].original = value;
-            return;
+    for (const name in newProps) {
+        const value = newProps[name];
+        if (!(value instanceof Function)) {
+            continue;
         }
-    });
+        const toCall = newProps[name].toCall;
+        if (toCall) {
+            continue; // already previously converted
+        }
+        newProps[name] = (...args) => newProps[name].toCall(...args); // what gets called can switch over parent state changes
+        // Currently, call self but over parent state changes, I may need to call a newer parent tag owner
+        newProps[name].toCall = (...args) => callbackPropOwner(value, args, ownerSupport);
+        newProps[name].original = value;
+    }
     return newProps;
 }
 function callbackPropOwner(toCall, callWith, ownerSupport) {
@@ -333,8 +330,11 @@ function afterInterpolateElement(container, insertBefore, tagSupport, context, o
     if (!clones.length) {
         return clones;
     }
-    clones.forEach(clone => (0,_interpolateTemplate__WEBPACK_IMPORTED_MODULE_1__.afterElmBuild)(clone, options, context, tagSupport));
-    tagSupport.clones.push(...clones);
+    for (let index = clones.length - 1; index >= 0; --index) {
+        const clone = clones[index];
+        (0,_interpolateTemplate__WEBPACK_IMPORTED_MODULE_1__.afterElmBuild)(clone, options, context, tagSupport);
+        tagSupport.clones.push(clone);
+    }
     return clones;
 }
 
@@ -451,12 +451,15 @@ function inputAttribute(name, value, element) {
     if (names[0] === 'class') {
         names.shift();
         if (value) {
-            names.forEach(name => element.classList.add(name));
+            for (let index = 0; index < names.length; ++index) {
+                element.classList.add(names[index]);
+            }
         }
         else {
-            names.forEach(name => element.classList.remove(name));
+            for (let index = 0; index < names.length; ++index) {
+                element.classList.remove(names[index]);
+            }
         }
-        return;
     }
 }
 
@@ -479,24 +482,20 @@ function howToSetAttribute(element, name, value) {
     element.setAttribute(name, value);
 }
 function howToSetInputValue(element, name, value) {
-    /*
-    if((element as any)[name] === value) {
-      return // its already the value we are setting
-    }
-    */
     element[name] = value;
 }
 function interpolateAttributes(child, scope, ownerSupport) {
     const attrNames = child.getAttributeNames();
     let howToSet = howToSetAttribute;
-    attrNames.forEach(attrName => {
+    for (let index = 0; index < attrNames.length; ++index) {
+        const attrName = attrNames[index];
         if (child.nodeName === 'INPUT' && attrName === 'value') {
             howToSet = howToSetInputValue;
         }
         const value = child.getAttribute(attrName);
         (0,_processAttribute_function__WEBPACK_IMPORTED_MODULE_0__.processAttribute)(attrName, value, child, scope, ownerSupport, howToSet);
         howToSet = howToSetAttribute; // put back
-    });
+    }
 }
 
 
@@ -514,25 +513,23 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _interpolateTemplate__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./interpolateTemplate */ "./ts/interpolations/interpolateTemplate.ts");
 
-function interpolateContentTemplates(element, context, tagSupport, options, children) {
-    if (!children || element.tagName === 'TEMPLATE') {
-        return { clones: [], tagComponents: [] }; // done
-    }
+function interpolateContentTemplates(context, tagSupport, options, children) {
     // counting for animation stagger computing
     const counts = options.counts;
     const clones = [];
     const tagComponents = [];
-    const childArray = new Array(...children);
-    childArray.forEach(child => {
+    const childLength = children.length;
+    for (let index = childLength - 1; index >= 0; --index) {
+        const child = children[index];
         const { clones: nextClones, tagComponent } = (0,_interpolateTemplate__WEBPACK_IMPORTED_MODULE_0__.interpolateTemplate)(child, context, tagSupport, counts, options);
         clones.push(...nextClones);
         if (tagComponent) {
             tagComponents.push(tagComponent);
-            return;
+            continue;
         }
         if (child.children) {
-            const nextKids = new Array(...child.children);
-            nextKids.forEach((subChild, index) => {
+            for (let index = child.children.length - 1; index >= 0; --index) {
+                const subChild = child.children[index];
                 // IF <template end /> its a variable to be processed
                 if (isRenderEndTemplate(subChild)) {
                     const { tagComponent } = (0,_interpolateTemplate__WEBPACK_IMPORTED_MODULE_0__.interpolateTemplate)(subChild, context, tagSupport, counts, options);
@@ -540,12 +537,12 @@ function interpolateContentTemplates(element, context, tagSupport, options, chil
                         tagComponents.push(tagComponent);
                     }
                 }
-                const { clones: nextClones, tagComponents: nextTagComponent } = interpolateContentTemplates(subChild, context, tagSupport, options, subChild.children);
+                const { clones: nextClones, tagComponents: nextTagComponent } = interpolateContentTemplates(context, tagSupport, options, subChild.children);
                 clones.push(...nextClones);
                 tagComponents.push(...nextTagComponent);
-            });
+            }
         }
-    });
+    }
     return { clones, tagComponents };
 }
 function isRenderEndTemplate(child) {
@@ -587,21 +584,22 @@ interpolatedTemplates, ownerSupport, options) {
     const template = container.children[0];
     const children = template.content.children;
     if (result.keys.length) {
-        const { clones: nextClones, tagComponents: nextTagComponents } = (0,_interpolateContentTemplates__WEBPACK_IMPORTED_MODULE_2__.interpolateContentTemplates)(container, context, ownerSupport, options, children);
+        const { clones: nextClones, tagComponents: nextTagComponents } = (0,_interpolateContentTemplates__WEBPACK_IMPORTED_MODULE_2__.interpolateContentTemplates)(context, ownerSupport, options, children);
         clones.push(...nextClones);
         tagComponents.push(...nextTagComponents);
     }
-    (0,_interpolateAttributes__WEBPACK_IMPORTED_MODULE_0__.interpolateAttributes)(container, context, ownerSupport);
+    (0,_interpolateAttributes__WEBPACK_IMPORTED_MODULE_0__.interpolateAttributes)(template, context, ownerSupport);
     processChildrenAttributes(children, context, ownerSupport);
     return { clones, tagComponents };
 }
 function processChildrenAttributes(children, context, ownerSupport) {
-    new Array(...children).forEach(child => {
+    for (let index = children.length - 1; index >= 0; --index) {
+        const child = children[index];
         (0,_interpolateAttributes__WEBPACK_IMPORTED_MODULE_0__.interpolateAttributes)(child, context, ownerSupport);
         if (child.children) {
             processChildrenAttributes(child.children, context, ownerSupport);
         }
-    });
+    }
 }
 function interpolateString(string) {
     const result = (0,_interpolations__WEBPACK_IMPORTED_MODULE_1__.interpolateToTemplates)(string);
@@ -626,7 +624,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _tag_Tag_class__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../tag/Tag.class */ "./ts/tag/Tag.class.ts");
 /* harmony import */ var _elementInitCheck__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./elementInitCheck */ "./ts/interpolations/elementInitCheck.ts");
-/* harmony import */ var _tag_update_processSubjectValue_function__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../tag/update/processSubjectValue.function */ "./ts/tag/update/processSubjectValue.function.ts");
+/* harmony import */ var _tag_update_processFirstSubjectValue_function__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../tag/update/processFirstSubjectValue.function */ "./ts/tag/update/processFirstSubjectValue.function.ts");
 /* harmony import */ var _isInstance__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../isInstance */ "./ts/isInstance.ts");
 /* harmony import */ var _scanTextAreaValue_function__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./scanTextAreaValue.function */ "./ts/interpolations/scanTextAreaValue.function.ts");
 /* harmony import */ var _tag_update_updateExistingValue_function__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../tag/update/updateExistingValue.function */ "./ts/tag/update/updateExistingValue.function.ts");
@@ -666,12 +664,10 @@ options) {
             }
         };
     }
-    let isForceElement = options.forceElement;
-    subscribeToTemplate(insertBefore, existingSubject, ownerSupport, counts, { isForceElement });
+    subscribeToTemplate(insertBefore, existingSubject, ownerSupport, counts);
     return { clones };
 }
-function subscribeToTemplate(insertBefore, subject, ownerSupport, counts, // used for animation stagger computing
-{ isForceElement }) {
+function subscribeToTemplate(insertBefore, subject, ownerSupport, counts) {
     let called = false;
     const onValue = (value) => {
         if (called) {
@@ -679,13 +675,9 @@ function subscribeToTemplate(insertBefore, subject, ownerSupport, counts, // use
             return;
         }
         const templater = value;
-        (0,_tag_update_processSubjectValue_function__WEBPACK_IMPORTED_MODULE_2__.processSubjectValue)(templater, subject, insertBefore, ownerSupport, {
+        (0,_tag_update_processFirstSubjectValue_function__WEBPACK_IMPORTED_MODULE_2__.processFirstSubjectValue)(templater, subject, insertBefore, ownerSupport, {
             counts: { ...counts },
-            forceElement: isForceElement,
         });
-        if (isForceElement) {
-            isForceElement = false; // only can happen once
-        }
         called = true;
     };
     let mutatingCallback = onValue;
@@ -716,13 +708,15 @@ function afterElmBuild(elm, options, context, ownerSupport) {
     let diff = options.counts.added;
     diff = (0,_elementInitCheck__WEBPACK_IMPORTED_MODULE_1__.elementInitCheck)(elm, options.counts) - diff;
     if (elm.children) {
-        new Array(...elm.children).forEach((child, index) => {
+        const children = elm.children;
+        for (let index = children.length - 1; index >= 0; --index) {
+            const child = children[index];
             const subOptions = {
                 ...options,
                 counts: options.counts,
             };
             return afterElmBuild(child, subOptions, context, ownerSupport);
-        });
+        }
     }
 }
 
@@ -820,7 +814,9 @@ function processNameOnlyAttr(attrValue, lastValue, child, ownerSupport, howToSet
             child.removeAttribute(lastValue);
         }
         else if (lastValue instanceof Object) {
-            Object.entries(lastValue).forEach(([name]) => child.removeAttribute(name));
+            for (const name in lastValue) {
+                child.removeAttribute(name);
+            }
         }
     }
     if (typeof (attrValue) === 'string') {
@@ -831,20 +827,19 @@ function processNameOnlyAttr(attrValue, lastValue, child, ownerSupport, howToSet
         return;
     }
     if (attrValue instanceof Object) {
-        Object.entries(attrValue).forEach(([name, value]) => processNameValueAttr(name, value, child, ownerSupport, howToSet));
-        return;
+        for (const name in attrValue) {
+            processNameValueAttr(name, attrValue[name], child, ownerSupport, howToSet);
+        }
     }
 }
 function processNameValueAttr(attrName, result, child, ownerSupport, howToSet) {
     const isSpecial = isSpecialAttr(attrName);
-    // attach as callback?
     if (result instanceof Function) {
         const action = function (...args) {
             const result2 = result(child, args);
             return result2;
         };
         child[attrName].action = action;
-        // child.addEventListener(attrName, action)
     }
     // Most every variable comes in here since everything is made a ValueSubject
     if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_1__.isSubjectInstance)(result)) {
@@ -944,9 +939,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   isTagComponent: () => (/* binding */ isTagComponent),
 /* harmony export */   isTagTemplater: () => (/* binding */ isTagTemplater)
 /* harmony export */ });
-function isTagComponent(value) {
-    return value?.wrapper?.parentWrap.original instanceof Function;
-}
 function isTag(value) {
     return isTagTemplater(value) || isTagClass(value);
 }
@@ -954,6 +946,10 @@ function isTagTemplater(value) {
     const templater = value;
     return templater?.isTemplater === true && templater.wrapper === undefined;
 }
+// TODO: whats the difference between isTagClass and isTagComponent
+function isTagComponent(value) {
+    return value?.wrapper?.parentWrap.original instanceof Function;
+}
 function isTagClass(value) {
     const templater = value;
     return templater?.isTagClass === true;
@@ -1336,25 +1332,29 @@ function providersChangeCheck(tagSupport) {
     const global = tagSupport.global;
     const providersWithChanges = global.providers.filter(provider => !(0,_deepFunctions__WEBPACK_IMPORTED_MODULE_0__.deepEqual)(provider.instance, provider.clone));
     // reset clones
-    providersWithChanges.forEach(provider => {
+    for (let index = providersWithChanges.length - 1; index >= 0; --index) {
+        const provider = providersWithChanges[index];
         const appSupport = tagSupport.getAppTagSupport();
         handleProviderChanges(appSupport, provider);
         provider.clone = (0,_deepFunctions__WEBPACK_IMPORTED_MODULE_0__.deepClone)(provider.instance);
-    });
+    }
 }
 function handleProviderChanges(appSupport, provider) {
     const tagsWithProvider = getTagsWithProvider(appSupport, provider);
-    tagsWithProvider.forEach(({ tagSupport, renderCount, provider }) => {
+    for (let index = tagsWithProvider.length - 1; index >= 0; --index) {
+        const { tagSupport, renderCount, provider } = tagsWithProvider[index];
         if (tagSupport.global.deleted) {
-            return; // i was deleted after another tag processed
+            continue; // i was deleted after another tag processed
         }
         const notRendered = renderCount === tagSupport.global.renderCount;
         if (notRendered) {
             provider.clone = (0,_deepFunctions__WEBPACK_IMPORTED_MODULE_0__.deepClone)(provider.instance);
-            return (0,_tag_render_renderTagSupport_function__WEBPACK_IMPORTED_MODULE_1__.renderTagSupport)(tagSupport, false);
+            (0,_tag_render_renderTagSupport_function__WEBPACK_IMPORTED_MODULE_1__.renderTagSupport)(tagSupport, false);
+            continue;
         }
-    });
+    }
 }
+/** Updates and returns memory of tag providers */
 function getTagsWithProvider(tagSupport, provider, memory = []) {
     const global = tagSupport.global;
     const compare = global.providers;
@@ -1366,7 +1366,10 @@ function getTagsWithProvider(tagSupport, provider, memory = []) {
             provider: hasProvider,
         });
     }
-    tagSupport.childTags.forEach(child => getTagsWithProvider(child, provider, memory));
+    const childTags = tagSupport.childTags;
+    for (let index = childTags.length - 1; index >= 0; --index) {
+        getTagsWithProvider(childTags[index], provider, memory);
+    }
     return memory;
 }
 
@@ -1610,7 +1613,6 @@ const beforeRender = (tagSupport) => initState(tagSupport);
     beforeRedraw: beforeRender,
     afterRender: (tagSupport) => {
         const memory = tagSupport.memory;
-        // const state: State = memory.state
         const config = _setUse_function__WEBPACK_IMPORTED_MODULE_1__.setUse.memory.stateConfig;
         const rearray = config.rearray;
         if (rearray.length) {
@@ -1627,13 +1629,15 @@ const beforeRender = (tagSupport) => initState(tagSupport);
                 throw error;
             }
         }
-        const cTagConfig = config.tagSupport;
         delete config.rearray; // clean up any previous runs
         delete config.tagSupport;
         memory.state.length = 0;
         memory.state.push(...config.array);
-        // memory.state = config.array // [...config.array]
-        memory.state.forEach(item => item.lastValue = getStateValue(item)); // set last values
+        const state = memory.state;
+        for (let index = state.length - 1; index >= 0; --index) {
+            const item = state[index];
+            item.lastValue = getStateValue(item); // set last values
+        }
         config.array = [];
     }
 });
@@ -1659,15 +1663,18 @@ function initState(tagSupport) {
     const memory = tagSupport.memory;
     const state = memory.state;
     const config = _setUse_function__WEBPACK_IMPORTED_MODULE_1__.setUse.memory.stateConfig;
-    // TODO: This guard may no longer be needed
+    // TODO: The following two blocks of code are state protects, have a production mode that removes this checks
     /*
     if (config.rearray) {
       checkStateMismatch(tagSupport, config, state)
     }
     */
     config.rearray = [];
-    if (state?.length) {
-        state.forEach(state => getStateValue(state));
+    const stateLength = state?.length;
+    if (stateLength) {
+        for (let index = 0; index < stateLength; ++index) {
+            getStateValue(state[index]);
+        }
         config.rearray.push(...state);
     }
     config.tagSupport = tagSupport;
@@ -1764,14 +1771,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   syncStates: () => (/* binding */ syncStates)
 /* harmony export */ });
 function syncStates(stateFrom, stateTo) {
-    stateFrom.forEach((state, index) => {
+    for (let index = stateFrom.length - 1; index >= 0; --index) {
+        const state = stateFrom[index];
         const fromValue = state.get();
         const callback = stateTo[index].callback;
         if (callback) {
             callback(fromValue); // set the value
         }
         stateTo[index].lastValue = fromValue; // record the value
-    });
+    }
 }
 
 
@@ -1970,15 +1978,17 @@ class Subject {
     set(value) {
         this.value = value;
         // Notify all subscribers with the new value
-        this.subscribers.forEach(sub => {
-            // (sub.callback as any).value = value
+        const subs = [...this.subscribers]; // subs may change as we call callbacks
+        const length = subs.length;
+        for (let index = 0; index < length; ++index) {
+            const sub = subs[index];
             sub.callback(value, sub);
-        });
+        }
     }
     // next() is available for rxjs compatibility
     next = this.set;
     toPromise() {
-        return new Promise((res, rej) => {
+        return new Promise(res => {
             this.subscribe((x, subscription) => {
                 subscription.unsubscribe();
                 res(x);
@@ -2155,7 +2165,10 @@ function getSubscription(subject, callback) {
         // any double unsubscribes will be ignored
         subscription.unsubscribe = () => subscription;
         // unsubscribe from any combined subjects
-        subscription.subscriptions.forEach(subscription => subscription.unsubscribe());
+        const subscriptions = subscription.subscriptions;
+        for (let index = subscriptions.length - 1; index >= 0; --index) {
+            subscriptions[index].unsubscribe();
+        }
         return subscription;
     };
     subscription.add = (sub) => {
@@ -2175,7 +2188,6 @@ function runPipedMethods(value, methods, onComplete) {
             return runPipedMethods(newValue, cloneMethods, onComplete);
         }
         onComplete(newValue);
-        // return newValue = next
     };
     let handler = next;
     const setHandler = (x) => handler = x;
@@ -2302,8 +2314,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _interpolations_interpolateElement__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../interpolations/interpolateElement */ "./ts/interpolations/interpolateElement.ts");
 /* harmony import */ var _interpolations_interpolateTemplate__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../interpolations/interpolateTemplate */ "./ts/interpolations/interpolateTemplate.ts");
 /* harmony import */ var _interpolations_afterInterpolateElement_function__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../interpolations/afterInterpolateElement.function */ "./ts/interpolations/afterInterpolateElement.function.ts");
-/* harmony import */ var _render_renderSubjectComponent_function__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./render/renderSubjectComponent.function */ "./ts/tag/render/renderSubjectComponent.function.ts");
-
 
 
 
@@ -2327,7 +2337,6 @@ class BaseTagSupport {
     appElement; // only seen on this.getAppTagSupport().appElement
     strings;
     values;
-    lastTemplateString = undefined; // used to compare templates for updates
     propsConfig;
     // stays with current render
     memory = {
@@ -2362,7 +2371,6 @@ class BaseTagSupport {
     }
     /** Function that kicks off actually putting tags down as HTML elements */
     buildBeforeElement(insertBefore, options = {
-        forceElement: false,
         counts: { added: 0, removed: 0 },
     }) {
         const subject = this.subject;
@@ -2378,24 +2386,24 @@ class BaseTagSupport {
         this.hasLiveElements = true;
         const context = this.update();
         const template = this.getTemplate();
-        const isForceElement = options.forceElement;
-        const elementContainer = document.createElement('div');
-        elementContainer.id = 'tag-temp-holder';
-        // render content with a first child that we can know is our first element
-        elementContainer.innerHTML = `<template id="temp-template-tag-wrap">${template.string}</template>`;
+        const elementContainer = document.createDocumentFragment();
+        const tempDraw = document.createElement('template');
+        tempDraw.innerHTML = template.string;
+        elementContainer.appendChild(tempDraw);
         // Search/replace innerHTML variables but don't interpolate tag components just yet
         const { tagComponents } = (0,_interpolations_interpolateElement__WEBPACK_IMPORTED_MODULE_11__.interpolateElement)(elementContainer, context, template, this, // ownerSupport,
         {
-            forceElement: options.forceElement,
             counts: options.counts
         });
         (0,_interpolations_afterInterpolateElement_function__WEBPACK_IMPORTED_MODULE_13__.afterInterpolateElement)(elementContainer, placeholderElm, this, // ownerSupport
         context, options);
         // Any tag components that were found should be processed AFTER the owner processes its elements. Avoid double processing of elements attributes like (oninit)=${}
-        tagComponents.forEach(tagComponent => {
-            (0,_interpolations_interpolateTemplate__WEBPACK_IMPORTED_MODULE_12__.subscribeToTemplate)(tagComponent.insertBefore, tagComponent.subject, tagComponent.ownerSupport, options.counts, { isForceElement });
+        const length = tagComponents.length;
+        for (let index = 0; index < length; ++index) {
+            const tagComponent = tagComponents[index];
+            (0,_interpolations_interpolateTemplate__WEBPACK_IMPORTED_MODULE_12__.subscribeToTemplate)(tagComponent.insertBefore, tagComponent.subject, tagComponent.ownerSupport, options.counts);
             (0,_interpolations_afterInterpolateElement_function__WEBPACK_IMPORTED_MODULE_13__.afterInterpolateElement)(elementContainer, tagComponent.insertBefore, tagComponent.ownerSupport, context, options);
-        });
+        }
     }
     getTemplate() {
         const thisTag = this.templater.tag;
@@ -2408,7 +2416,6 @@ class BaseTagSupport {
             return trimString;
         }).join('');
         const interpolation = (0,_interpolations_interpolateElement__WEBPACK_IMPORTED_MODULE_11__.interpolateString)(string);
-        this.lastTemplateString = interpolation.string;
         return {
             interpolation,
             string: interpolation.string,
@@ -2425,19 +2432,19 @@ class BaseTagSupport {
         const strings = this.strings || thisTag.strings;
         const values = this.values || thisTag.values;
         strings.map((_string, index) => {
-            const variableName = _Tag_class__WEBPACK_IMPORTED_MODULE_0__.variablePrefix + index;
             const hasValue = values.length > index;
+            if (!hasValue) {
+                return;
+            }
+            const variableName = _Tag_class__WEBPACK_IMPORTED_MODULE_0__.variablePrefix + index;
             const value = values[index];
             // is something already there?
             const exists = variableName in context;
             if (exists) {
                 return (0,_update_updateContextItem_function__WEBPACK_IMPORTED_MODULE_8__.updateContextItem)(context, variableName, value);
             }
-            if (!hasValue) {
-                return;
-            }
             // 🆕 First time values below
-            context[variableName] = (0,_update_processNewValue_function__WEBPACK_IMPORTED_MODULE_9__.processNewValue)(hasValue, value, this);
+            context[variableName] = (0,_update_processNewValue_function__WEBPACK_IMPORTED_MODULE_9__.processNewValue)(value, this);
         });
         return context;
     }
@@ -2468,15 +2475,17 @@ class TagSupport extends BaseTagSupport {
         if (firstDestroy && (0,_isInstance__WEBPACK_IMPORTED_MODULE_2__.isTagComponent)(this.templater)) {
             (0,_tagRunner__WEBPACK_IMPORTED_MODULE_5__.runBeforeDestroy)(this, this);
         }
+        this.destroySubscriptions();
         // signify immediately child has been deleted (looked for during event processing)
-        childTags.forEach(child => {
+        for (let index = childTags.length - 1; index >= 0; --index) {
+            const child = childTags[index];
             const subGlobal = child.global;
             delete subGlobal.newest;
             subGlobal.deleted = true;
             if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_2__.isTagComponent)(child.templater)) {
                 (0,_tagRunner__WEBPACK_IMPORTED_MODULE_5__.runBeforeDestroy)(child, child);
             }
-        });
+        }
         // HTML DOM manipulation. Put back down the template tag
         const insertBefore = global.insertBefore;
         if (insertBefore.nodeName === 'TEMPLATE') {
@@ -2487,7 +2496,6 @@ class TagSupport extends BaseTagSupport {
                 }
             }
         }
-        this.destroySubscriptions();
         let mainPromise;
         if (this.ownerTagSupport) {
             this.ownerTagSupport.childTags = this.ownerTagSupport.childTags.filter(child => child !== this);
@@ -2523,9 +2531,11 @@ class TagSupport extends BaseTagSupport {
         return mainPromise.then(() => options.stagger);
     }
     destroySubscriptions() {
-        const global = this.global;
-        global.subscriptions.forEach(cloneSub => cloneSub.unsubscribe());
-        global.subscriptions.length = 0;
+        const subs = this.global.subscriptions;
+        for (let index = subs.length - 1; index >= 0; --index) {
+            subs[index].unsubscribe();
+        }
+        subs.length = 0;
     }
     destroyClones({ stagger } = {
         stagger: 0,
@@ -2533,13 +2543,15 @@ class TagSupport extends BaseTagSupport {
         const oldClones = [...this.clones];
         this.clones.length = 0; // tag maybe used for something else
         const promises = oldClones.map(clone => this.checkCloneRemoval(clone, stagger)).filter(x => x); // only return promises
+        // check subjects that may have clones attached to them
         const oldContext = this.global.context;
-        Object.values(oldContext).forEach(value => {
+        for (const name in oldContext) {
+            const value = oldContext[name];
             const clone = value.clone;
-            if (clone && clone.parentNode) {
+            if (clone?.parentNode) {
                 clone.parentNode.removeChild(clone);
             }
-        });
+        }
         if (promises.length) {
             return { promise: Promise.all(promises), stagger };
         }
@@ -2583,19 +2595,6 @@ class TagSupport extends BaseTagSupport {
         this.values = values;
         return this.updateContext(this.global.context);
     }
-    /** Used during HMR only where static content itself could have been edited */
-    async rebuild() {
-        delete this.strings; // seek the templater strings instead now
-        delete this.values; // seek the templater strings instead now
-        restoreTagMarkers(this);
-        const newSupport = (0,_render_renderSubjectComponent_function__WEBPACK_IMPORTED_MODULE_14__.renderSubjectComponent)(this.subject, this, this.ownerTagSupport);
-        await this.destroy();
-        newSupport.buildBeforeElement(this.global.insertBefore, {
-            forceElement: true,
-            counts: { added: 0, removed: 0 },
-        });
-        return newSupport;
-    }
     getAppTagSupport() {
         let tag = this;
         while (tag.ownerTagSupport) {
@@ -2606,7 +2605,10 @@ class TagSupport extends BaseTagSupport {
 }
 function restoreTagMarkers(support) {
     (0,_checkDestroyPrevious_function__WEBPACK_IMPORTED_MODULE_4__.restoreTagMarker)(support);
-    support.childTags.forEach(childTag => restoreTagMarkers(childTag.global.oldest));
+    const childTags = support.childTags;
+    for (let index = childTags.length - 1; index >= 0; --index) {
+        restoreTagMarkers(childTags[index].global.oldest);
+    }
 }
 
 
@@ -2622,6 +2624,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   checkDestroyPrevious: () => (/* binding */ checkDestroyPrevious),
 /* harmony export */   destroyArrayTag: () => (/* binding */ destroyArrayTag),
+/* harmony export */   isSimpleType: () => (/* binding */ isSimpleType),
 /* harmony export */   restoreTagMarker: () => (/* binding */ restoreTagMarker)
 /* harmony export */ });
 /* harmony import */ var _isInstance__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../isInstance */ "./ts/isInstance.ts");
@@ -2634,6 +2637,21 @@ __webpack_require__.r(__webpack_exports__);
 
 function checkDestroyPrevious(subject, // existing.value is the old value
 newValue, insertBefore) {
+    const displaySubject = subject;
+    const hasLastValue = 'lastValue' in displaySubject;
+    const lastValue = displaySubject.lastValue; // TODO: we maybe able to use displaySubject.value and remove concept of lastValue
+    // was simple value but now something bigger
+    if (hasLastValue && lastValue !== newValue) {
+        const newType = typeof (newValue);
+        if (isSimpleType(newType) && typeof (lastValue) === newType) {
+            return false;
+        }
+        if (newValue instanceof Function && lastValue instanceof Function) {
+            return false;
+        }
+        destroySimpleValue(insertBefore, displaySubject);
+        return 'changed-simple-value';
+    }
     const arraySubject = subject;
     const wasArray = arraySubject.lastArray;
     // no longer an array
@@ -2642,7 +2660,10 @@ newValue, insertBefore) {
         delete arraySubject.lastArray;
         delete arraySubject.placeholder;
         (0,_insertAfter_function__WEBPACK_IMPORTED_MODULE_3__.insertAfter)(insertBefore, placeholderElm);
-        wasArray.forEach(({ tagSupport }) => destroyArrayTag(tagSupport, { added: 0, removed: 0 }));
+        for (let index = wasArray.length - 1; index >= 0; --index) {
+            const { tagSupport } = wasArray[index];
+            destroyArrayTag(tagSupport, { added: 0, removed: 0 });
+        }
         return 'array';
     }
     const tagSubject = subject;
@@ -2672,16 +2693,11 @@ newValue, insertBefore) {
         (0,_destroyTag_function__WEBPACK_IMPORTED_MODULE_2__.destroyTagMemory)(lastSupport);
         return 'different-tag';
     }
-    const displaySubject = subject;
-    const hasLastValue = 'lastValue' in displaySubject;
-    const lastValue = displaySubject.lastValue; // TODO: we maybe able to use displaySubject.value and remove concept of lastValue
-    // was simple value but now something bigger
-    if (hasLastValue && lastValue !== newValue) {
-        destroySimpleValue(insertBefore, displaySubject);
-        return 'changed-simple-value';
-    }
     return false;
 }
+function isSimpleType(value) {
+    return ['string', 'number', 'boolean'].includes(value);
+}
 function destroyArrayTag(tagSupport, counts) {
     (0,_destroyTag_function__WEBPACK_IMPORTED_MODULE_2__.destroyTagSupportPast)(tagSupport);
     tagSupport.destroy({
@@ -3426,14 +3442,18 @@ function getTagWrap(templater, result) {
         };
         tagSupport.memory = newTagSupport.memory; // state handover
         if (templater.madeChildIntoSubject) {
-            childSubject.value.forEach(kid => {
-                kid.values.forEach((value, index) => {
+            const value = childSubject.value;
+            for (let index = value.length - 1; index >= 0; --index) {
+                const kid = value[index];
+                const values = kid.values;
+                for (let index = values.length - 1; index >= 0; --index) {
+                    const value = values[index];
                     if (!(value instanceof Function)) {
-                        return;
+                        continue;
                     }
                     const valuesValue = kid.values[index];
                     if (valuesValue.isChildOverride) {
-                        return; // already overwritten
+                        continue; // already overwritten
                     }
                     // all functions need to report to me
                     kid.values[index] = function (...args) {
@@ -3443,8 +3463,8 @@ function getTagWrap(templater, result) {
                         args);
                     };
                     valuesValue.isChildOverride = true;
-                });
-            });
+                }
+            }
         }
         return tagSupport;
     };
@@ -3551,7 +3571,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../state */ "./ts/state/index.ts");
 /* harmony import */ var _subject__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../subject */ "./ts/subject/index.ts");
 /* harmony import */ var _getSupportInCycle_function__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./getSupportInCycle.function */ "./ts/tag/getSupportInCycle.function.ts");
-// TODO: This should be more like `new TaggedJs().use({})`
 
 
 
@@ -3563,20 +3582,149 @@ _state__WEBPACK_IMPORTED_MODULE_0__.setUse.memory.tagClosed$ = new _subject__WEB
 });
 // Life cycle 1
 function runBeforeRender(tagSupport, ownerSupport) {
-    _state__WEBPACK_IMPORTED_MODULE_0__.setUse.tagUse.forEach(tagUse => tagUse.beforeRender(tagSupport, ownerSupport));
+    const tagUse = _state__WEBPACK_IMPORTED_MODULE_0__.setUse.tagUse;
+    const length = tagUse.length;
+    for (let index = 0; index < length; ++index) {
+        tagUse[index].beforeRender(tagSupport, ownerSupport);
+    }
 }
 // Life cycle 2
 function runAfterRender(tagSupport, ownerTagSupport) {
-    _state__WEBPACK_IMPORTED_MODULE_0__.setUse.tagUse.forEach(tagUse => tagUse.afterRender(tagSupport, ownerTagSupport));
+    const tagUse = _state__WEBPACK_IMPORTED_MODULE_0__.setUse.tagUse;
+    const length = tagUse.length;
+    for (let index = 0; index < length; ++index) {
+        tagUse[index].afterRender(tagSupport, ownerTagSupport);
+    }
     _state__WEBPACK_IMPORTED_MODULE_0__.setUse.memory.tagClosed$.next(ownerTagSupport);
 }
 // Life cycle 3
 function runBeforeRedraw(tagSupport, ownerTagSupport) {
-    _state__WEBPACK_IMPORTED_MODULE_0__.setUse.tagUse.forEach(tagUse => tagUse.beforeRedraw(tagSupport, ownerTagSupport));
+    const tagUse = _state__WEBPACK_IMPORTED_MODULE_0__.setUse.tagUse;
+    const length = tagUse.length;
+    for (let index = 0; index < length; ++index) {
+        tagUse[index].beforeRedraw(tagSupport, ownerTagSupport);
+    }
 }
 // Life cycle 4 - end of life
 function runBeforeDestroy(tagSupport, ownerTagSupport) {
-    _state__WEBPACK_IMPORTED_MODULE_0__.setUse.tagUse.forEach(tagUse => tagUse.beforeDestroy(tagSupport, ownerTagSupport));
+    const tagUse = _state__WEBPACK_IMPORTED_MODULE_0__.setUse.tagUse;
+    const length = tagUse.length;
+    for (let index = 0; index < length; ++index) {
+        tagUse[index].beforeDestroy(tagSupport, ownerTagSupport);
+    }
+}
+
+
+/***/ }),
+
+/***/ "./ts/tag/update/processFirstSubject.utils.ts":
+/*!****************************************************!*\
+  !*** ./ts/tag/update/processFirstSubject.utils.ts ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ValueTypes: () => (/* binding */ ValueTypes),
+/* harmony export */   getValueType: () => (/* binding */ getValueType)
+/* harmony export */ });
+/* harmony import */ var _isInstance__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../isInstance */ "./ts/isInstance.ts");
+/* harmony import */ var _checkDestroyPrevious_function__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../checkDestroyPrevious.function */ "./ts/tag/checkDestroyPrevious.function.ts");
+
+
+var ValueTypes;
+(function (ValueTypes) {
+    ValueTypes["unknown"] = "unknown";
+    ValueTypes["tag"] = "tag";
+    ValueTypes["templater"] = "templater";
+    ValueTypes["tagArray"] = "tag-array";
+    ValueTypes["tagComponent"] = "tag-component";
+    ValueTypes["subject"] = "subject";
+    ValueTypes["date"] = "date";
+    ValueTypes["string"] = "string";
+    ValueTypes["boolean"] = "boolean";
+    ValueTypes["function"] = "function";
+    ValueTypes["undefined"] = "undefined";
+})(ValueTypes || (ValueTypes = {}));
+function getValueType(value) {
+    if (value === undefined || value === null) {
+        return ValueTypes.undefined;
+    }
+    if (value instanceof Date) {
+        return ValueTypes.date;
+    }
+    if (value instanceof Function) {
+        return ValueTypes.function;
+    }
+    const type = typeof (value);
+    if ((0,_checkDestroyPrevious_function__WEBPACK_IMPORTED_MODULE_1__.isSimpleType)(type)) {
+        return type;
+    }
+    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_0__.isTagComponent)(value)) {
+        return ValueTypes.tagComponent;
+    }
+    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_0__.isTagTemplater)(value)) {
+        return ValueTypes.templater;
+    }
+    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_0__.isTagClass)(value)) {
+        return ValueTypes.tag;
+    }
+    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_0__.isTagArray)(value)) {
+        return ValueTypes.tagArray;
+    }
+    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_0__.isSubjectInstance)(value)) {
+        return ValueTypes.subject;
+    }
+    return ValueTypes.unknown;
+}
+
+
+/***/ }),
+
+/***/ "./ts/tag/update/processFirstSubjectValue.function.ts":
+/*!************************************************************!*\
+  !*** ./ts/tag/update/processFirstSubjectValue.function.ts ***!
+  \************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   processFirstSubjectValue: () => (/* binding */ processFirstSubjectValue)
+/* harmony export */ });
+/* harmony import */ var _processSubjectComponent_function__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./processSubjectComponent.function */ "./ts/tag/update/processSubjectComponent.function.ts");
+/* harmony import */ var _processTagArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./processTagArray */ "./ts/tag/update/processTagArray.ts");
+/* harmony import */ var _processRegularValue_function__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./processRegularValue.function */ "./ts/tag/update/processRegularValue.function.ts");
+/* harmony import */ var _processTag_function__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./processTag.function */ "./ts/tag/update/processTag.function.ts");
+/* harmony import */ var _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./processFirstSubject.utils */ "./ts/tag/update/processFirstSubject.utils.ts");
+
+
+
+
+
+function processFirstSubjectValue(value, subject, // could be tag via result.tag
+insertBefore, // <template end interpolate /> (will be removed)
+ownerSupport, // owner
+options) {
+    const valueType = (0,_processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_4__.getValueType)(value);
+    switch (valueType) {
+        case _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_4__.ValueTypes.templater:
+            (0,_processTag_function__WEBPACK_IMPORTED_MODULE_3__.processTag)(value, insertBefore, ownerSupport, subject);
+            return;
+        case _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_4__.ValueTypes.tag:
+            const tag = value;
+            let templater = tag.templater;
+            if (!templater) {
+                templater = (0,_processTag_function__WEBPACK_IMPORTED_MODULE_3__.tagFakeTemplater)(tag);
+            }
+            (0,_processTag_function__WEBPACK_IMPORTED_MODULE_3__.processTag)(templater, insertBefore, ownerSupport, subject);
+            return;
+        case _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_4__.ValueTypes.tagArray:
+            return (0,_processTagArray__WEBPACK_IMPORTED_MODULE_1__.processTagArray)(subject, value, insertBefore, ownerSupport, options);
+        case _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_4__.ValueTypes.tagComponent:
+            (0,_processSubjectComponent_function__WEBPACK_IMPORTED_MODULE_0__.processSubjectComponent)(value, subject, insertBefore, ownerSupport, options);
+            return;
+    }
+    (0,_processRegularValue_function__WEBPACK_IMPORTED_MODULE_2__.processFirstRegularValue)(value, subject, insertBefore);
 }
 
 
@@ -3593,35 +3741,27 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   processNewValue: () => (/* binding */ processNewValue)
 /* harmony export */ });
 /* harmony import */ var _subject_ValueSubject__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../subject/ValueSubject */ "./ts/subject/ValueSubject.ts");
-/* harmony import */ var _isInstance__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../isInstance */ "./ts/isInstance.ts");
-/* harmony import */ var _TemplaterResult_class__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../TemplaterResult.class */ "./ts/TemplaterResult.class.ts");
-/* harmony import */ var _TagSupport_class__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../TagSupport.class */ "./ts/tag/TagSupport.class.ts");
+/* harmony import */ var _TemplaterResult_class__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../TemplaterResult.class */ "./ts/TemplaterResult.class.ts");
+/* harmony import */ var _TagSupport_class__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../TagSupport.class */ "./ts/tag/TagSupport.class.ts");
+/* harmony import */ var _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./processFirstSubject.utils */ "./ts/tag/update/processFirstSubject.utils.ts");
 
 
 
 
-function processNewValue(hasValue, value, ownerSupport) {
-    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_1__.isTagComponent)(value)) {
-        const tagSubject = new _subject_ValueSubject__WEBPACK_IMPORTED_MODULE_0__.ValueSubject(value);
-        return tagSubject;
-    }
-    if (value instanceof Function) {
-        return new _subject_ValueSubject__WEBPACK_IMPORTED_MODULE_0__.ValueSubject(value);
-    }
-    if (!hasValue) {
-        return new _subject_ValueSubject__WEBPACK_IMPORTED_MODULE_0__.ValueSubject(undefined);
-    }
-    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_1__.isTagTemplater)(value)) {
-        const templater = value;
-        const tag = templater.tag;
-        return processNewTag(tag, ownerSupport);
-    }
-    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_1__.isTagClass)(value)) {
-        return processNewTag(value, ownerSupport);
-    }
-    // is already a value subject?
-    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_1__.isSubjectInstance)(value)) {
-        return value;
+function processNewValue(value, ownerSupport) {
+    const valueType = (0,_processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__.getValueType)(value);
+    switch (valueType) {
+        case _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__.ValueTypes.tagComponent:
+            const tagSubject = new _subject_ValueSubject__WEBPACK_IMPORTED_MODULE_0__.ValueSubject(value);
+            return tagSubject;
+        case _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__.ValueTypes.templater:
+            const templater = value;
+            const tag = templater.tag;
+            return processNewTag(tag, ownerSupport);
+        case _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__.ValueTypes.tag:
+            return processNewTag(value, ownerSupport);
+        case _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__.ValueTypes.subject:
+            return value;
     }
     return new _subject_ValueSubject__WEBPACK_IMPORTED_MODULE_0__.ValueSubject(value);
 }
@@ -3629,12 +3769,12 @@ function processNewTag(value, ownerSupport) {
     const tag = value;
     let templater = tag.templater;
     if (!templater) {
-        templater = new _TemplaterResult_class__WEBPACK_IMPORTED_MODULE_2__.TemplaterResult([]);
+        templater = new _TemplaterResult_class__WEBPACK_IMPORTED_MODULE_1__.TemplaterResult([]);
         templater.tag = tag;
         tag.templater = templater;
     }
     const subject = new _subject_ValueSubject__WEBPACK_IMPORTED_MODULE_0__.ValueSubject(templater);
-    const tagSupport = subject.tagSupport = new _TagSupport_class__WEBPACK_IMPORTED_MODULE_3__.TagSupport(templater, ownerSupport, subject);
+    subject.tagSupport = new _TagSupport_class__WEBPACK_IMPORTED_MODULE_2__.TagSupport(templater, ownerSupport, subject);
     return subject;
 }
 
@@ -3649,6 +3789,7 @@ function processNewTag(value, ownerSupport) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   processFirstRegularValue: () => (/* binding */ processFirstRegularValue),
 /* harmony export */   processRegularValue: () => (/* binding */ processRegularValue)
 /* harmony export */ });
 /* harmony import */ var _updateBeforeTemplate_function__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../updateBeforeTemplate.function */ "./ts/updateBeforeTemplate.function.ts");
@@ -3662,10 +3803,25 @@ insertBefore) {
         return; // no need to update display, its the same
     }
     subject.lastValue = value;
+    const castedValue = (0,_updateBeforeTemplate_function__WEBPACK_IMPORTED_MODULE_0__.castTextValue)(value);
+    // replace existing string?
+    const oldClone = subject.clone;
+    if (oldClone) {
+        oldClone.textContent = castedValue;
+        return;
+    }
     // Processing of regular values
-    const clone = (0,_updateBeforeTemplate_function__WEBPACK_IMPORTED_MODULE_0__.updateBeforeTemplate)(value, before);
+    const clone = (0,_updateBeforeTemplate_function__WEBPACK_IMPORTED_MODULE_0__.updateBeforeTemplate)(castedValue, before);
     subject.clone = clone; // remember single element put down, for future updates
 }
+function processFirstRegularValue(value, subject, // could be tag via subject.tag
+insertBefore) {
+    subject.lastValue = value;
+    const castedValue = (0,_updateBeforeTemplate_function__WEBPACK_IMPORTED_MODULE_0__.castTextValue)(value);
+    // Processing of regular values
+    const clone = (0,_updateBeforeTemplate_function__WEBPACK_IMPORTED_MODULE_0__.updateBeforeTemplate)(castedValue, insertBefore);
+    subject.clone = clone; // remember single element put down, for future updates 
+}
 
 
 /***/ }),
@@ -3708,7 +3864,7 @@ function processSubjectComponent(templater, subject, insertBefore, ownerSupport,
     global.insertBefore = insertBefore;
     const providers = _state__WEBPACK_IMPORTED_MODULE_0__.setUse.memory.providerConfig;
     providers.ownerSupport = ownerSupport;
-    const isRender = !reSupport || options.forceElement;
+    const isRender = !reSupport;
     if (isRender) {
         const support = reSupport || tagSupport;
         reSupport = (0,_render_renderSubjectComponent_function__WEBPACK_IMPORTED_MODULE_3__.renderSubjectComponent)(subject, support, ownerSupport);
@@ -3720,79 +3876,6 @@ function processSubjectComponent(templater, subject, insertBefore, ownerSupport,
 }
 
 
-/***/ }),
-
-/***/ "./ts/tag/update/processSubjectValue.function.ts":
-/*!*******************************************************!*\
-  !*** ./ts/tag/update/processSubjectValue.function.ts ***!
-  \*******************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   processSubjectValue: () => (/* binding */ processSubjectValue)
-/* harmony export */ });
-/* harmony import */ var _processSubjectComponent_function__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./processSubjectComponent.function */ "./ts/tag/update/processSubjectComponent.function.ts");
-/* harmony import */ var _isInstance__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../isInstance */ "./ts/isInstance.ts");
-/* harmony import */ var _processTagArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./processTagArray */ "./ts/tag/update/processTagArray.ts");
-/* harmony import */ var _processRegularValue_function__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./processRegularValue.function */ "./ts/tag/update/processRegularValue.function.ts");
-/* harmony import */ var _processTag_function__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./processTag.function */ "./ts/tag/update/processTag.function.ts");
-
-
-
-
-
-var ValueTypes;
-(function (ValueTypes) {
-    ValueTypes["tag"] = "tag";
-    ValueTypes["templater"] = "templater";
-    ValueTypes["tagArray"] = "tag-array";
-    ValueTypes["tagComponent"] = "tag-component";
-    ValueTypes["value"] = "value";
-})(ValueTypes || (ValueTypes = {}));
-function getValueType(value) {
-    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_1__.isTagComponent)(value)) {
-        return ValueTypes.tagComponent;
-    }
-    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_1__.isTagTemplater)(value)) {
-        return ValueTypes.templater;
-    }
-    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_1__.isTagClass)(value)) {
-        return ValueTypes.tag;
-    }
-    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_1__.isTagArray)(value)) {
-        return ValueTypes.tagArray;
-    }
-    return ValueTypes.value;
-}
-// export type ExistingValue = TemplaterResult | Tag[] | TagSupport | Function | Subject<unknown> | RegularValue | Tag
-function processSubjectValue(value, subject, // could be tag via result.tag
-insertBefore, // <template end interpolate /> (will be removed)
-ownerSupport, // owner
-options) {
-    const valueType = getValueType(value);
-    switch (valueType) {
-        case ValueTypes.templater:
-            (0,_processTag_function__WEBPACK_IMPORTED_MODULE_4__.processTag)(value, insertBefore, ownerSupport, subject);
-            return;
-        case ValueTypes.tag:
-            const tag = value;
-            let templater = tag.templater;
-            if (!templater) {
-                templater = (0,_processTag_function__WEBPACK_IMPORTED_MODULE_4__.tagFakeTemplater)(tag);
-            }
-            (0,_processTag_function__WEBPACK_IMPORTED_MODULE_4__.processTag)(templater, insertBefore, ownerSupport, subject);
-            return;
-        case ValueTypes.tagArray:
-            return (0,_processTagArray__WEBPACK_IMPORTED_MODULE_2__.processTagArray)(subject, value, insertBefore, ownerSupport, options);
-        case ValueTypes.tagComponent:
-            (0,_processSubjectComponent_function__WEBPACK_IMPORTED_MODULE_0__.processSubjectComponent)(value, subject, insertBefore, ownerSupport, options);
-            return;
-    }
-    (0,_processRegularValue_function__WEBPACK_IMPORTED_MODULE_3__.processRegularValue)(value, subject, insertBefore);
-}
-
-
 /***/ }),
 
 /***/ "./ts/tag/update/processTag.function.ts":
@@ -3826,7 +3909,6 @@ subject) {
     tagSupport.ownerTagSupport = ownerSupport;
     tagSupport.buildBeforeElement(insertBefore, {
         counts: { added: 0, removed: 0 },
-        forceElement: true,
     });
 }
 function setupNewTemplater(tagSupport, ownerSupport, subject) {
@@ -3914,7 +3996,9 @@ ownerSupport, options) {
         }
         return true;
     });
-    value.forEach((item, index) => {
+    const length = value.length;
+    for (let index = 0; index < length; ++index) {
+        const item = value[index];
         const previous = lastArray[index];
         const previousSupport = previous?.tagSupport;
         const subTag = item;
@@ -3922,7 +4006,6 @@ ownerSupport, options) {
             (0,_processTag_function__WEBPACK_IMPORTED_MODULE_3__.tagFakeTemplater)(subTag);
         }
         const tagSupport = new _TagSupport_class__WEBPACK_IMPORTED_MODULE_4__.TagSupport(subTag.templater, ownerSupport, new _subject_ValueSubject__WEBPACK_IMPORTED_MODULE_0__.ValueSubject(undefined));
-        // tagSupport.templater = subTag.templater
         if (previousSupport) {
             (0,_processTag_function__WEBPACK_IMPORTED_MODULE_3__.setupNewTemplater)(tagSupport, ownerSupport, previousSupport.subject);
             const global = previousSupport.global;
@@ -3935,7 +4018,6 @@ ownerSupport, options) {
             const details = {
                 template: tagSupport.getTemplate().string,
                 array: value,
-                ownerTagContent: ownerSupport.lastTemplateString,
             };
             const message = 'Use html`...`.key(item) instead of html`...` to template an Array';
             console.error(message, details);
@@ -3949,11 +4031,12 @@ ownerSupport, options) {
             // subTag.tagSupport = subTag.tagSupport || prevSupport
             const oldest = prevGlobal.oldest;
             oldest.updateBy(tagSupport);
-            return [];
+            // return []
+            continue;
         }
         processAddTagArrayItem(runtimeInsertBefore, tagSupport, index, options, lastArray);
         ownerSupport.childTags.push(tagSupport);
-    });
+    }
     return clones;
 }
 function setPlaceholderElm(insertBefore, subject) {
@@ -3980,7 +4063,7 @@ function processAddTagArrayItem(before, tagSupport, index, options, lastArray) {
     const newTempElm = document.createElement('template');
     fragment.appendChild(newTempElm);
     tagSupport.buildBeforeElement(newTempElm, // before,
-    { counts, forceElement: options.forceElement });
+    { counts });
     const parent = before.parentNode;
     parent.insertBefore(fragment, before);
 }
@@ -4012,18 +4095,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 function processTagResult(tagSupport, subject, // used for recording past and current value
 insertBefore, // <template end interpolate />
-{ counts, forceElement, }) {
+{ counts, }) {
     // *if appears we already have seen
     const subjectTag = subject;
     const lastSupport = subjectTag.tagSupport;
-    const prevSupport = lastSupport?.global.oldest || undefined; // || tag.tagSupport.oldest // subjectTag.tag
-    const justUpdate = prevSupport; // && !forceElement
+    const prevSupport = lastSupport?.global.oldest || undefined;
+    const justUpdate = prevSupport;
     if (prevSupport && justUpdate) {
         return processTagResultUpdate(tagSupport, subjectTag, prevSupport);
     }
     tagSupport.buildBeforeElement(insertBefore, {
         counts,
-        forceElement,
     });
 }
 function processTagResultUpdate(tagSupport, subject, // used for recording past and current value
@@ -4135,15 +4217,13 @@ subject, insertBefore) {
         const oldFunction = oldWrapper.parentWrap.original;
         const newFunction = newWrapper.parentWrap.original;
         // string compare both functions
-        // isSameTag = oldFunction.compareTo === newFunction.compareTo // ???
-        isSameTag = oldFunction === newFunction; // ???
+        isSameTag = oldFunction === newFunction;
     }
     const templater = tagSupport.templater;
     if (!isSameTag) {
         const oldestSupport = lastSupport.global.oldest;
         (0,_destroyTag_function__WEBPACK_IMPORTED_MODULE_2__.destroyTagMemory)(oldestSupport);
         return (0,_processSubjectComponent_function__WEBPACK_IMPORTED_MODULE_1__.processSubjectComponent)(templater, subject, insertBefore, ownerSupport, {
-            forceElement: false,
             counts: { added: 0, removed: 0 },
         });
     }
@@ -4192,7 +4272,6 @@ subject, insertBefore) {
 }
 function buildNewTag(newSupport, oldInsertBefore, oldTagSupport, subject) {
     newSupport.buildBeforeElement(oldInsertBefore, {
-        forceElement: true,
         counts: { added: 0, removed: 0 },
     });
     newSupport.global.oldest = newSupport;
@@ -4207,7 +4286,8 @@ function syncFunctionProps(lastSupport, ownerSupport, newPropsArray) {
     const priorPropConfig = lastSupport.propsConfig;
     const priorPropsArray = priorPropConfig.latestCloned;
     const prevSupport = ownerSupport.global.newest;
-    newPropsArray.forEach((argPosition, index) => {
+    for (let index = newPropsArray.length - 1; index >= 0; --index) {
+        const argPosition = newPropsArray[index];
         if (typeof (argPosition) !== 'object') {
             return;
         }
@@ -4215,23 +4295,23 @@ function syncFunctionProps(lastSupport, ownerSupport, newPropsArray) {
         if (typeof (priorProps) !== 'object') {
             return;
         }
-        Object.entries(argPosition).forEach(([name, value]) => {
+        for (const name in argPosition) {
+            const value = argPosition[name];
             if (!(value instanceof Function)) {
-                return;
+                continue;
             }
             const newCallback = argPosition[name]; // || value
             const original = newCallback instanceof Function && newCallback.toCall;
             if (original) {
-                return; // already previously converted
+                continue; // already previously converted
             }
             // Currently, call self but over parent state changes, I may need to call a newer parent tag owner
             priorProps[name].toCall = (...args) => {
                 return (0,_alterProps_function__WEBPACK_IMPORTED_MODULE_4__.callbackPropOwner)(newCallback, // value, // newOriginal,
                 args, prevSupport);
             };
-            return;
-        });
-    });
+        }
+    }
 }
 
 
@@ -4250,14 +4330,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _TagSupport_class__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../TagSupport.class */ "./ts/tag/TagSupport.class.ts");
 /* harmony import */ var _TemplaterResult_class__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../TemplaterResult.class */ "./ts/TemplaterResult.class.ts");
 /* harmony import */ var _isInstance__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../isInstance */ "./ts/isInstance.ts");
-/* harmony import */ var _processTagArray__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./processTagArray */ "./ts/tag/update/processTagArray.ts");
-/* harmony import */ var _updateExistingTagComponent_function__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./updateExistingTagComponent.function */ "./ts/tag/update/updateExistingTagComponent.function.ts");
-/* harmony import */ var _processRegularValue_function__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./processRegularValue.function */ "./ts/tag/update/processRegularValue.function.ts");
-/* harmony import */ var _checkDestroyPrevious_function__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../checkDestroyPrevious.function */ "./ts/tag/checkDestroyPrevious.function.ts");
-/* harmony import */ var _processSubjectComponent_function__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./processSubjectComponent.function */ "./ts/tag/update/processSubjectComponent.function.ts");
-/* harmony import */ var _isLikeTags_function__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../isLikeTags.function */ "./ts/tag/isLikeTags.function.ts");
-/* harmony import */ var _interpolations_bindSubjectCallback_function__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../interpolations/bindSubjectCallback.function */ "./ts/interpolations/bindSubjectCallback.function.ts");
+/* harmony import */ var _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./processFirstSubject.utils */ "./ts/tag/update/processFirstSubject.utils.ts");
+/* harmony import */ var _processTagArray__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./processTagArray */ "./ts/tag/update/processTagArray.ts");
+/* harmony import */ var _updateExistingTagComponent_function__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./updateExistingTagComponent.function */ "./ts/tag/update/updateExistingTagComponent.function.ts");
+/* harmony import */ var _processRegularValue_function__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./processRegularValue.function */ "./ts/tag/update/processRegularValue.function.ts");
+/* harmony import */ var _checkDestroyPrevious_function__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../checkDestroyPrevious.function */ "./ts/tag/checkDestroyPrevious.function.ts");
+/* harmony import */ var _processSubjectComponent_function__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./processSubjectComponent.function */ "./ts/tag/update/processSubjectComponent.function.ts");
+/* harmony import */ var _isLikeTags_function__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../isLikeTags.function */ "./ts/tag/isLikeTags.function.ts");
 /* harmony import */ var _processTag_function__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./processTag.function */ "./ts/tag/update/processTag.function.ts");
+/* harmony import */ var _setTagPlaceholder_function__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../setTagPlaceholder.function */ "./ts/tag/setTagPlaceholder.function.ts");
+
 
 
 
@@ -4271,10 +4353,10 @@ __webpack_require__.r(__webpack_exports__);
 
 function updateExistingValue(subject, value, ownerSupport, insertBefore) {
     const subjectTag = subject;
-    const isComponent = (0,_isInstance__WEBPACK_IMPORTED_MODULE_2__.isTagComponent)(value);
-    (0,_checkDestroyPrevious_function__WEBPACK_IMPORTED_MODULE_6__.checkDestroyPrevious)(subject, value, insertBefore);
+    const valueType = (0,_processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__.getValueType)(value);
+    (0,_checkDestroyPrevious_function__WEBPACK_IMPORTED_MODULE_7__.checkDestroyPrevious)(subject, value, insertBefore);
     // handle already seen tag components
-    if (isComponent) {
+    if (valueType === _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__.ValueTypes.tagComponent) {
         return prepareUpdateToComponent(value, subjectTag, insertBefore, ownerSupport);
     }
     // was component but no longer
@@ -4283,42 +4365,40 @@ function updateExistingValue(subject, value, ownerSupport, insertBefore) {
         handleStillTag(subject, value, ownerSupport);
         return subjectTag;
     }
-    // its another tag array
-    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_2__.isTagArray)(value)) {
-        (0,_processTagArray__WEBPACK_IMPORTED_MODULE_3__.processTagArray)(subject, value, insertBefore, // oldInsertBefore as InsertBefore,
-        ownerSupport, { counts: {
-                added: 0,
-                removed: 0,
-            } });
-        return subject;
-    }
-    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_2__.isTagTemplater)(value)) {
-        (0,_processTag_function__WEBPACK_IMPORTED_MODULE_10__.processTag)(value, insertBefore, ownerSupport, subjectTag);
-        return subjectTag;
-    }
-    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_2__.isTagClass)(value)) {
-        const tag = value;
-        let templater = tag.templater;
-        if (!templater) {
-            templater = (0,_processTag_function__WEBPACK_IMPORTED_MODULE_10__.getFakeTemplater)();
-            tag.templater = templater;
-            templater.tag = tag;
-        }
-        (0,_processTag_function__WEBPACK_IMPORTED_MODULE_10__.processTag)(templater, insertBefore, ownerSupport, subjectTag);
-        return subjectTag;
-    }
-    // we have been given a subject
-    if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_2__.isSubjectInstance)(value)) {
-        return value;
-    }
-    // now its a function
-    if (value instanceof Function) {
-        const bound = (0,_interpolations_bindSubjectCallback_function__WEBPACK_IMPORTED_MODULE_9__.bindSubjectCallback)(value, ownerSupport);
-        subject.set(bound);
-        return subject;
+    switch (valueType) {
+        case _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__.ValueTypes.tagArray:
+            (0,_processTagArray__WEBPACK_IMPORTED_MODULE_4__.processTagArray)(subject, value, insertBefore, // oldInsertBefore as InsertBefore,
+            ownerSupport, { counts: {
+                    added: 0,
+                    removed: 0,
+                } });
+            return subject;
+        case _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__.ValueTypes.templater:
+            (0,_processTag_function__WEBPACK_IMPORTED_MODULE_10__.processTag)(value, insertBefore, ownerSupport, subjectTag);
+            return subjectTag;
+        case _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__.ValueTypes.tag:
+            const tag = value;
+            let templater = tag.templater;
+            if (!templater) {
+                templater = (0,_processTag_function__WEBPACK_IMPORTED_MODULE_10__.getFakeTemplater)();
+                tag.templater = templater;
+                templater.tag = tag;
+            }
+            (0,_processTag_function__WEBPACK_IMPORTED_MODULE_10__.processTag)(templater, insertBefore, ownerSupport, subjectTag);
+            return subjectTag;
+        case _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__.ValueTypes.subject:
+            return value;
+        // now its a useless function (we don't automatically call functions)
+        case _processFirstSubject_utils__WEBPACK_IMPORTED_MODULE_3__.ValueTypes.function:
+            // const bound = bindSubjectCallback(value as Callback, ownerSupport)
+            // subject.set(bound)
+            if (!subject.clone) {
+                subject.clone = (0,_setTagPlaceholder_function__WEBPACK_IMPORTED_MODULE_11__.swapInsertBefore)(insertBefore);
+            }
+            return subject;
     }
     // This will cause all other values to render
-    (0,_processRegularValue_function__WEBPACK_IMPORTED_MODULE_5__.processRegularValue)(value, subject, insertBefore);
+    (0,_processRegularValue_function__WEBPACK_IMPORTED_MODULE_6__.processRegularValue)(value, subject, insertBefore);
     return subjectTag;
 }
 function handleStillTag(subject, value, ownerSupport) {
@@ -4338,7 +4418,7 @@ function handleStillTag(subject, value, ownerSupport) {
     if (isClass) {
         valueSupport.global = lastSupport.global;
     }
-    const isSameTag = value && (0,_isLikeTags_function__WEBPACK_IMPORTED_MODULE_8__.isLikeTags)(lastSupport, valueSupport);
+    const isSameTag = value && (0,_isLikeTags_function__WEBPACK_IMPORTED_MODULE_9__.isLikeTags)(lastSupport, valueSupport);
     if ((0,_isInstance__WEBPACK_IMPORTED_MODULE_2__.isTagTemplater)(value)) {
         (0,_processTag_function__WEBPACK_IMPORTED_MODULE_10__.setupNewTemplater)(valueSupport, ownerSupport, subject);
     }
@@ -4352,14 +4432,13 @@ function handleStillTag(subject, value, ownerSupport) {
         const insertBefore = global.insertBefore;
         return (0,_processTag_function__WEBPACK_IMPORTED_MODULE_10__.processTag)(templater, insertBefore, ownerSupport, subject);
     }
-    return (0,_processRegularValue_function__WEBPACK_IMPORTED_MODULE_5__.processRegularValue)(value, subject, subject.insertBefore);
+    return (0,_processRegularValue_function__WEBPACK_IMPORTED_MODULE_6__.processRegularValue)(value, subject, subject.insertBefore);
 }
 function prepareUpdateToComponent(templater, subjectTag, insertBefore, ownerSupport) {
     // When last value was not a component
     if (!subjectTag.tagSupport) {
-        (0,_processSubjectComponent_function__WEBPACK_IMPORTED_MODULE_7__.processSubjectComponent)(templater, subjectTag, insertBefore, // oldInsertBefore as InsertBefore,
+        (0,_processSubjectComponent_function__WEBPACK_IMPORTED_MODULE_8__.processSubjectComponent)(templater, subjectTag, insertBefore, // oldInsertBefore as InsertBefore,
         ownerSupport, {
-            forceElement: true,
             counts: { added: 0, removed: 0 },
         });
         return subjectTag;
@@ -4369,28 +4448,19 @@ function prepareUpdateToComponent(templater, subjectTag, insertBefore, ownerSupp
     const prevSupport = subjectSup.global.newest;
     if (prevSupport) {
         const newestState = prevSupport.memory.state;
-        // tagSupport.memory.state = [...newestState]
         tagSupport.memory.state.length = 0;
         tagSupport.memory.state.push(...newestState);
     }
     else {
-        (0,_checkDestroyPrevious_function__WEBPACK_IMPORTED_MODULE_6__.restoreTagMarker)(subjectSup);
-        /*
-        const placeholder = subjectSup.global.placeholder
-        if(placeholder && !insertBefore.parentNode) {
-          insertAfter(insertBefore,placeholder)
-          delete subjectSup.global.placeholder
-        }
-        */
-        (0,_processSubjectComponent_function__WEBPACK_IMPORTED_MODULE_7__.processSubjectComponent)(templater, subjectTag, insertBefore, ownerSupport, {
-            forceElement: true,
+        (0,_checkDestroyPrevious_function__WEBPACK_IMPORTED_MODULE_7__.restoreTagMarker)(subjectSup);
+        (0,_processSubjectComponent_function__WEBPACK_IMPORTED_MODULE_8__.processSubjectComponent)(templater, subjectTag, insertBefore, ownerSupport, {
             counts: { added: 0, removed: 0 },
         });
         return subjectTag;
     }
     tagSupport.global = subjectSup.global;
     subjectTag.tagSupport = tagSupport;
-    (0,_updateExistingTagComponent_function__WEBPACK_IMPORTED_MODULE_4__.updateExistingTagComponent)(ownerSupport, tagSupport, // latest value
+    (0,_updateExistingTagComponent_function__WEBPACK_IMPORTED_MODULE_5__.updateExistingTagComponent)(ownerSupport, tagSupport, // latest value
     subjectTag, insertBefore);
     return subjectTag;
 }
@@ -4406,23 +4476,27 @@ function prepareUpdateToComponent(templater, subjectTag, insertBefore, ownerSupp
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   castTextValue: () => (/* binding */ castTextValue),
 /* harmony export */   updateBeforeTemplate: () => (/* binding */ updateBeforeTemplate)
 /* harmony export */ });
 // Function to update the value of x
-function updateBeforeTemplate(value, lastFirstChild) {
+function updateBeforeTemplate(value, // value should be casted before calling here
+lastFirstChild) {
     const parent = lastFirstChild.parentNode;
-    let castedValue = value;
-    // mimic React skipping to display EXCEPT for true does display on page
-    if ([undefined, false, null].includes(value)) { // || value === true
-        castedValue = '';
-    }
     // Insert the new value (never use innerHTML here)
-    const textNode = document.createTextNode(castedValue); // never innerHTML
+    const textNode = document.createTextNode(value); // never innerHTML
     parent.insertBefore(textNode, lastFirstChild);
     /* remove existing nodes */
     parent.removeChild(lastFirstChild);
     return textNode;
 }
+function castTextValue(value) {
+    // mimic React skipping to display EXCEPT for true does display on page
+    if ([undefined, false, null].includes(value)) { // || value === true
+        return '';
+    }
+    return value;
+}
 
 
 /***/ })