@angular/core 15.0.0-next.2 → 15.0.0-next.3

package/fesm2020/testing.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v15.0.0-next.2
+ * @license Angular v15.0.0-next.3
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -2568,7 +2568,8 @@ function ɵɵdefineComponent(componentDefinition) {
             setInput: null,
             schemas: componentDefinition.schemas || null,
             tView: null,
-            applyHostDirectives: null,
+            findHostDirectiveDefs: null,
+            hostDirectives: null,
         };
         const dependencies = componentDefinition.dependencies;
         const feature = componentDefinition.features;
@@ -2909,10 +2910,10 @@ function isLContainer(value) {
     return Array.isArray(value) && value[TYPE] === true;
 }
 function isContentQueryHost(tNode) {
-    return (tNode.flags & 8 /* TNodeFlags.hasContentQuery */) !== 0;
+    return (tNode.flags & 4 /* TNodeFlags.hasContentQuery */) !== 0;
 }
 function isComponentHost(tNode) {
-    return (tNode.flags & 2 /* TNodeFlags.isComponentHost */) === 2 /* TNodeFlags.isComponentHost */;
+    return tNode.componentOffset > -1;
 }
 function isDirectiveHost(tNode) {
     return (tNode.flags & 1 /* TNodeFlags.isDirectiveHost */) === 1 /* TNodeFlags.isDirectiveHost */;
@@ -4322,7 +4323,7 @@ const unusedValueExportToPlacateAjd$5 = 1;
  * @param tNode
  */
 function hasClassInput(tNode) {
-    return (tNode.flags & 16 /* TNodeFlags.hasClassInput */) !== 0;
+    return (tNode.flags & 8 /* TNodeFlags.hasClassInput */) !== 0;
 }
 /**
  * Returns `true` if the `TNode` has a directive which has `@Input()` for `style` binding.
@@ -4346,7 +4347,7 @@ function hasClassInput(tNode) {
  * @param tNode
  */
 function hasStyleInput(tNode) {
-    return (tNode.flags & 32 /* TNodeFlags.hasStyleInput */) !== 0;
+    return (tNode.flags & 16 /* TNodeFlags.hasStyleInput */) !== 0;
 }
 
 /**
@@ -7636,7 +7637,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('15.0.0-next.2');
+const VERSION = new Version('15.0.0-next.3');
 
 /**
  * @license
@@ -8455,18 +8456,21 @@ function findViaDirective(lView, directiveInstance) {
  */
 function getDirectivesAtNodeIndex(nodeIndex, lView, includeComponents) {
     const tNode = lView[TVIEW].data[nodeIndex];
-    let directiveStartIndex = tNode.directiveStart;
-    if (directiveStartIndex == 0)
+    if (tNode.directiveStart === 0)
         return EMPTY_ARRAY;
-    const directiveEndIndex = tNode.directiveEnd;
-    if (!includeComponents && tNode.flags & 2 /* TNodeFlags.isComponentHost */)
-        directiveStartIndex++;
-    return lView.slice(directiveStartIndex, directiveEndIndex);
+    const results = [];
+    for (let i = tNode.directiveStart; i < tNode.directiveEnd; i++) {
+        const directiveInstance = lView[i];
+        if (!isComponentInstance(directiveInstance) || includeComponents) {
+            results.push(directiveInstance);
+        }
+    }
+    return results;
 }
 function getComponentAtNodeIndex(nodeIndex, lView) {
     const tNode = lView[TVIEW].data[nodeIndex];
-    let directiveStartIndex = tNode.directiveStart;
-    return tNode.flags & 2 /* TNodeFlags.isComponentHost */ ? lView[directiveStartIndex] : null;
+    const { directiveStart, componentOffset } = tNode;
+    return componentOffset > -1 ? lView[directiveStart + componentOffset] : null;
 }
 /**
  * Returns a map of local references (local reference name => element or directive instance) that
@@ -9214,9 +9218,10 @@ function getClosestRElement(tView, tNode, lView) {
     }
     else {
         ngDevMode && assertTNodeType(parentTNode, 3 /* TNodeType.AnyRNode */ | 4 /* TNodeType.Container */);
-        if (parentTNode.flags & 2 /* TNodeFlags.isComponentHost */) {
+        const { componentOffset } = parentTNode;
+        if (componentOffset > -1) {
             ngDevMode && assertTNodeForLView(parentTNode, lView);
-            const encapsulation = tView.data[parentTNode.directiveStart].encapsulation;
+            const { encapsulation } = tView.data[parentTNode.directiveStart + componentOffset];
             // We've got a parent which is an element in the current view. We just need to verify if the
             // parent element is not a component. Component's content nodes are not inserted immediately
             // because they will be projected, and so doing insert at this point would be wasteful.
@@ -9449,10 +9454,10 @@ function applyNodes(renderer, action, tNode, lView, parentRElement, beforeNode,
         if (isProjection) {
             if (action === 0 /* WalkTNodeTreeAction.Create */) {
                 rawSlotValue && attachPatchData(unwrapRNode(rawSlotValue), lView);
-                tNode.flags |= 4 /* TNodeFlags.isProjected */;
+                tNode.flags |= 2 /* TNodeFlags.isProjected */;
             }
         }
-        if ((tNode.flags & 64 /* TNodeFlags.isDetached */) !== 64 /* TNodeFlags.isDetached */) {
+        if ((tNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */) {
             if (tNodeType & 8 /* TNodeType.ElementContainer */) {
                 applyNodes(renderer, action, tNode.child, lView, parentRElement, beforeNode, false);
                 applyToElementOrContainer(action, renderer, parentRElement, rawSlotValue, beforeNode);
@@ -11506,6 +11511,7 @@ class TNode {
     index, //
     insertBeforeIndex, //
     injectorIndex, //
+    componentOffset, //
     directiveStart, //
     directiveEnd, //
     directiveStylingLast, //
@@ -11538,6 +11544,7 @@ class TNode {
         this.index = index;
         this.insertBeforeIndex = insertBeforeIndex;
         this.injectorIndex = injectorIndex;
+        this.componentOffset = componentOffset;
         this.directiveStart = directiveStart;
         this.directiveEnd = directiveEnd;
         this.directiveStylingLast = directiveStylingLast;
@@ -11615,21 +11622,19 @@ class TNode {
     }
     get flags_() {
         const flags = [];
-        if (this.flags & 16 /* TNodeFlags.hasClassInput */)
+        if (this.flags & 8 /* TNodeFlags.hasClassInput */)
             flags.push('TNodeFlags.hasClassInput');
-        if (this.flags & 8 /* TNodeFlags.hasContentQuery */)
+        if (this.flags & 4 /* TNodeFlags.hasContentQuery */)
             flags.push('TNodeFlags.hasContentQuery');
-        if (this.flags & 32 /* TNodeFlags.hasStyleInput */)
+        if (this.flags & 16 /* TNodeFlags.hasStyleInput */)
             flags.push('TNodeFlags.hasStyleInput');
-        if (this.flags & 128 /* TNodeFlags.hasHostBindings */)
+        if (this.flags & 64 /* TNodeFlags.hasHostBindings */)
             flags.push('TNodeFlags.hasHostBindings');
-        if (this.flags & 2 /* TNodeFlags.isComponentHost */)
-            flags.push('TNodeFlags.isComponentHost');
         if (this.flags & 1 /* TNodeFlags.isDirectiveHost */)
             flags.push('TNodeFlags.isDirectiveHost');
-        if (this.flags & 64 /* TNodeFlags.isDetached */)
+        if (this.flags & 32 /* TNodeFlags.isDetached */)
             flags.push('TNodeFlags.isDetached');
-        if (this.flags & 4 /* TNodeFlags.isProjected */)
+        if (this.flags & 2 /* TNodeFlags.isProjected */)
             flags.push('TNodeFlags.isProjected');
         return flags.join('|');
     }
@@ -12139,7 +12144,7 @@ function getOrCreateTNode(tView, index, type, name, attrs) {
             // See `TNodeType.Placeholder` and `LFrame.inI18n` for more context.
             // If the `TNode` was not pre-declared than it means it was not mentioned which means it was
             // removed, so we mark it as detached.
-            tNode.flags |= 64 /* TNodeFlags.isDetached */;
+            tNode.flags |= 32 /* TNodeFlags.isDetached */;
         }
     }
     else if (tNode.type & 64 /* TNodeType.Placeholder */) {
@@ -12443,7 +12448,7 @@ function createDirectivesInstances(tView, lView, tNode) {
     if (!getBindingsEnabled())
         return;
     instantiateAllDirectives(tView, lView, tNode, getNativeByTNode(tNode, lView));
-    if ((tNode.flags & 128 /* TNodeFlags.hasHostBindings */) === 128 /* TNodeFlags.hasHostBindings */) {
+    if ((tNode.flags & 64 /* TNodeFlags.hasHostBindings */) === 64 /* TNodeFlags.hasHostBindings */) {
         invokeDirectivesHostBindings(tView, lView, tNode);
     }
 }
@@ -12643,6 +12648,7 @@ function createTNode(tView, tParent, type, index, value, attrs) {
         index, // index: number
         null, // insertBeforeIndex: null|-1|number|number[]
         injectorIndex, // injectorIndex: number
+        -1, // componentOffset: number
         -1, // directiveStart: number
         -1, // directiveEnd: number
         -1, // directiveStylingLast: number
@@ -12678,6 +12684,7 @@ function createTNode(tView, tParent, type, index, value, attrs) {
             directiveStart: -1,
             directiveEnd: -1,
             directiveStylingLast: -1,
+            componentOffset: -1,
             propertyBindings: null,
             flags: 0,
             providerIndexes: 0,
@@ -12741,24 +12748,23 @@ function initializeInputAndOutputAliases(tView, tNode) {
     let outputsStore = null;
     for (let i = start; i < end; i++) {
         const directiveDef = tViewData[i];
-        const directiveInputs = directiveDef.inputs;
+        inputsStore = generatePropertyAliases(directiveDef.inputs, i, inputsStore);
+        outputsStore = generatePropertyAliases(directiveDef.outputs, i, outputsStore);
         // Do not use unbound attributes as inputs to structural directives, since structural
         // directive inputs can only be set using microsyntax (e.g. `<div *dir="exp">`).
         // TODO(FW-1930): microsyntax expressions may also contain unbound/static attributes, which
         // should be set for inline templates.
-        const initialInputs = (tNodeAttrs !== null && !isInlineTemplate(tNode)) ?
-            generateInitialInputs(directiveInputs, tNodeAttrs) :
+        const initialInputs = (inputsStore !== null && tNodeAttrs !== null && !isInlineTemplate(tNode)) ?
+            generateInitialInputs(inputsStore, i, tNodeAttrs) :
             null;
         inputsFromAttrs.push(initialInputs);
-        inputsStore = generatePropertyAliases(directiveInputs, i, inputsStore);
-        outputsStore = generatePropertyAliases(directiveDef.outputs, i, outputsStore);
     }
     if (inputsStore !== null) {
         if (inputsStore.hasOwnProperty('class')) {
-            tNode.flags |= 16 /* TNodeFlags.hasClassInput */;
+            tNode.flags |= 8 /* TNodeFlags.hasClassInput */;
         }
         if (inputsStore.hasOwnProperty('style')) {
-            tNode.flags |= 32 /* TNodeFlags.hasStyleInput */;
+            tNode.flags |= 16 /* TNodeFlags.hasStyleInput */;
         }
     }
     tNode.initialInputs = inputsFromAttrs;
@@ -12879,7 +12885,7 @@ function instantiateRootComponent(tView, lView, def) {
         configureViewWithDirective(tView, rootTNode, lView, directiveIndex, def);
         initializeInputAndOutputAliases(tView, rootTNode);
     }
-    const directive = getNodeInjectable(lView, tView, rootTNode.directiveStart, rootTNode);
+    const directive = getNodeInjectable(lView, tView, rootTNode.directiveStart + rootTNode.componentOffset, rootTNode);
     attachPatchData(directive, lView);
     const native = getNativeByTNode(rootTNode, lView);
     if (native) {
@@ -12896,7 +12902,10 @@ function resolveDirectives(tView, lView, tNode, localRefs) {
     ngDevMode && assertFirstCreatePass(tView);
     let hasDirectives = false;
     if (getBindingsEnabled()) {
-        const directiveDefs = findDirectiveDefMatches(tView, lView, tNode);
+        const directiveDefsMatchedBySelectors = findDirectiveDefMatches(tView, lView, tNode);
+        const directiveDefs = directiveDefsMatchedBySelectors ?
+            findHostDirectiveDefs$1(directiveDefsMatchedBySelectors, tView, lView, tNode) :
+            null;
         const exportsMap = localRefs === null ? null : { '': -1 };
         if (directiveDefs !== null) {
             hasDirectives = true;
@@ -12925,9 +12934,9 @@ function resolveDirectives(tView, lView, tNode, localRefs) {
                 configureViewWithDirective(tView, tNode, lView, directiveIdx, def);
                 saveNameToExportMap(directiveIdx, def, exportsMap);
                 if (def.contentQueries !== null)
-                    tNode.flags |= 8 /* TNodeFlags.hasContentQuery */;
+                    tNode.flags |= 4 /* TNodeFlags.hasContentQuery */;
                 if (def.hostBindings !== null || def.hostAttrs !== null || def.hostVars !== 0)
-                    tNode.flags |= 128 /* TNodeFlags.hasHostBindings */;
+                    tNode.flags |= 64 /* TNodeFlags.hasHostBindings */;
                 const lifeCycleHooks = def.type.prototype;
                 // Only push a node index into the preOrderHooks array if this is the first
                 // pre-order hook found on this node.
@@ -13080,20 +13089,19 @@ function findDirectiveDefMatches(tView, viewData, tNode) {
                     if (ngDevMode) {
                         assertTNodeType(tNode, 2 /* TNodeType.Element */, `"${tNode.value}" tags cannot be used as component hosts. ` +
                             `Please use a different tag to activate the ${stringify(def.type)} component.`);
-                        if (tNode.flags & 2 /* TNodeFlags.isComponentHost */) {
+                        if (isComponentHost(tNode)) {
                             // If another component has been matched previously, it's the first element in the
                             // `matches` array, see how we store components/directives in `matches` below.
                             throwMultipleComponentError(tNode, matches[0].type, def.type);
                         }
                     }
-                    markAsComponentHost(tView, tNode);
+                    markAsComponentHost(tView, tNode, 0);
                     // The component is always stored first with directives after.
                     matches.unshift(def);
                 }
                 else {
                     matches.push(def);
                 }
-                def.applyHostDirectives?.(tView, viewData, tNode, matches);
             }
         }
     }
@@ -13101,15 +13109,36 @@ function findDirectiveDefMatches(tView, viewData, tNode) {
 }
 /**
  * Marks a given TNode as a component's host. This consists of:
- * - setting appropriate TNode flags;
+ * - setting the component offset on the TNode.
  * - storing index of component's host element so it will be queued for view refresh during CD.
  */
-function markAsComponentHost(tView, hostTNode) {
+function markAsComponentHost(tView, hostTNode, componentOffset) {
     ngDevMode && assertFirstCreatePass(tView);
-    hostTNode.flags |= 2 /* TNodeFlags.isComponentHost */;
+    ngDevMode && assertGreaterThan(componentOffset, -1, 'componentOffset must be great than -1');
+    hostTNode.componentOffset = componentOffset;
     (tView.components || (tView.components = ngDevMode ? new TViewComponents() : []))
         .push(hostTNode.index);
 }
+/**
+ * Given an array of directives that were matched by their selectors, this function
+ * produces a new array that also includes any host directives that have to be applied.
+ * @param selectorMatches Directives matched in a template based on their selectors.
+ * @param tView Current TView.
+ * @param lView Current LView.
+ * @param tNode Current TNode that is being matched.
+ */
+function findHostDirectiveDefs$1(selectorMatches, tView, lView, tNode) {
+    const matches = [];
+    for (const def of selectorMatches) {
+        if (def.findHostDirectiveDefs === null) {
+            matches.push(def);
+        }
+        else {
+            def.findHostDirectiveDefs(matches, def, tView, lView, tNode);
+        }
+    }
+    return matches;
+}
 /** Caches local names and their matching directive indices for query and template lookups. */
 function cacheMatchingLocalNames(tNode, localRefs, exportsMap) {
     if (localRefs) {
@@ -13252,10 +13281,11 @@ function setInputsFromAttrs(lView, directiveIndex, instance, def, tNode, initial
  *
  * <my-component name="Bess"></my-component>
  *
- * @param inputs The list of inputs from the directive def
- * @param attrs The static attrs on this node
+ * @param inputs Input alias map that was generated from the directive def inputs.
+ * @param directiveIndex Index of the directive that is currently being processed.
+ * @param attrs Static attrs on this node.
  */
-function generateInitialInputs(inputs, attrs) {
+function generateInitialInputs(inputs, directiveIndex, attrs) {
     let inputsToStore = null;
     let i = 0;
     while (i < attrs.length) {
@@ -13276,7 +13306,17 @@ function generateInitialInputs(inputs, attrs) {
         if (inputs.hasOwnProperty(attrName)) {
             if (inputsToStore === null)
                 inputsToStore = [];
-            inputsToStore.push(attrName, inputs[attrName], attrs[i + 1]);
+            // Find the input's public name from the input store. Note that we can be found easier
+            // through the directive def, but we want to do it using the inputs store so that it can
+            // account for host directive aliases.
+            const inputConfig = inputs[attrName];
+            for (let j = 0; j < inputConfig.length; j += 2) {
+                if (inputConfig[j] === directiveIndex) {
+                    inputsToStore.push(attrName, inputConfig[j + 1], attrs[i + 1]);
+                    // A directive can't have multiple inputs with the same name so we can break here.
+                    break;
+                }
+            }
         }
         i += 2;
     }
@@ -14309,7 +14349,7 @@ function createRootComponentView(rNode, def, rootView, rendererFactory, hostRend
     const componentView = createLView(rootView, getOrCreateComponentTView(def), null, def.onPush ? 32 /* LViewFlags.Dirty */ : 16 /* LViewFlags.CheckAlways */, rootView[index], tNode, rendererFactory, viewRenderer, sanitizer || null, null, null);
     if (tView.firstCreatePass) {
         diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, rootView), tView, def.type);
-        markAsComponentHost(tView, tNode);
+        markAsComponentHost(tView, tNode, 0);
         initTNodeFlags(tNode, rootView.length, 1);
     }
     addToViewTree(rootView, componentView);
@@ -14606,6 +14646,13 @@ function ɵɵCopyDefinitionFeature(definition) {
     }
 }
 
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
 /**
  * This feature add the host directives behavior to a directive definition by patching a
  * function onto it. The expectation is that the runtime will invoke the function during
@@ -14627,29 +14674,43 @@ function ɵɵCopyDefinitionFeature(definition) {
  * @codeGenApi
  */
 function ɵɵHostDirectivesFeature(rawHostDirectives) {
-    const unwrappedHostDirectives = Array.isArray(rawHostDirectives) ? rawHostDirectives : rawHostDirectives();
-    const hostDirectives = unwrappedHostDirectives.map(dir => typeof dir === 'function' ? { directive: dir, inputs: EMPTY_OBJ, outputs: EMPTY_OBJ } : {
-        directive: dir.directive,
-        inputs: bindingArrayToMap(dir.inputs),
-        outputs: bindingArrayToMap(dir.outputs)
-    });
     return (definition) => {
-        // TODO(crisbeto): implement host directive matching logic.
-        definition.applyHostDirectives =
-            (tView, viewData, tNode, matches) => { };
+        definition.findHostDirectiveDefs = findHostDirectiveDefs;
+        definition.hostDirectives =
+            (Array.isArray(rawHostDirectives) ? rawHostDirectives : rawHostDirectives()).map(dir => {
+                return typeof dir === 'function' ?
+                    { directive: resolveForwardRef(dir), inputs: EMPTY_OBJ, outputs: EMPTY_OBJ } :
+                    {
+                        directive: resolveForwardRef(dir.directive),
+                        inputs: bindingArrayToMap(dir.inputs),
+                        outputs: bindingArrayToMap(dir.outputs)
+                    };
+            });
     };
 }
+function findHostDirectiveDefs(matches, def, tView, lView, tNode) {
+    if (def.hostDirectives !== null) {
+        for (const hostDirectiveConfig of def.hostDirectives) {
+            const hostDirectiveDef = getDirectiveDef(hostDirectiveConfig.directive);
+            // TODO(crisbeto): assert that the def exists.
+            // Host directives execute before the host so that its host bindings can be overwritten.
+            findHostDirectiveDefs(matches, hostDirectiveDef, tView, lView, tNode);
+        }
+    }
+    // Push the def itself at the end since it needs to execute after the host directives.
+    matches.push(def);
+}
 /**
  * Converts an array in the form of `['publicName', 'alias', 'otherPublicName', 'otherAlias']` into
  * a map in the form of `{publicName: 'alias', otherPublicName: 'otherAlias'}`.
  */
 function bindingArrayToMap(bindings) {
-    if (!bindings || bindings.length === 0) {
+    if (bindings === undefined || bindings.length === 0) {
         return EMPTY_OBJ;
     }
     const result = {};
-    for (let i = 1; i < bindings.length; i += 2) {
-        result[bindings[i - 1]] = bindings[i];
+    for (let i = 0; i < bindings.length; i += 2) {
+        result[bindings[i]] = bindings[i + 1];
     }
     return result;
 }
@@ -15608,7 +15669,7 @@ function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) {
     if (styles !== null) {
         writeDirectStyle(renderer, native, styles);
     }
-    if ((tNode.flags & 64 /* TNodeFlags.isDetached */) !== 64 /* TNodeFlags.isDetached */) {
+    if ((tNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */) {
         // In the i18n case, the translation may have removed this element, so only add it if it is not
         // detached. See `TNodeType.Placeholder` and `LFrame.inI18n` for more context.
         appendChild(tView, lView, native, tNode);
@@ -16046,9 +16107,7 @@ function wrapListener(tNode, lView, context, listenerFn, wrapWithPreventDefault)
         }
         // In order to be backwards compatible with View Engine, events on component host nodes
         // must also mark the component view itself dirty (i.e. the view that it owns).
-        const startView = tNode.flags & 2 /* TNodeFlags.isComponentHost */ ?
-            getComponentLViewByIndex(tNode.index, lView) :
-            lView;
+        const startView = tNode.componentOffset > -1 ? getComponentLViewByIndex(tNode.index, lView) : lView;
         markViewDirty(startView);
         let result = executeListenerWithErrorHandling(lView, context, listenerFn, e);
         // A just-invoked listener function might have coalesced listeners so we need to check for
@@ -16205,7 +16264,7 @@ function ɵɵprojection(nodeIndex, selectorIndex = 0, attrs) {
         tProjectionNode.projection = selectorIndex;
     // `<ng-content>` has no content
     setCurrentTNodeAsNotParent();
-    if ((tProjectionNode.flags & 64 /* TNodeFlags.isDetached */) !== 64 /* TNodeFlags.isDetached */) {
+    if ((tProjectionNode.flags & 32 /* TNodeFlags.isDetached */) !== 32 /* TNodeFlags.isDetached */) {
         // re-distribution of projectable nodes is stored on a component's view level
         applyProjection(tView, lView, tProjectionNode);
     }
@@ -18119,7 +18178,7 @@ function normalizeSuffix(value, suffix) {
  * @param isClassBased `true` if `class` (`false` if `style`)
  */
 function hasStylingInputShadow(tNode, isClassBased) {
-    return (tNode.flags & (isClassBased ? 16 /* TNodeFlags.hasClassInput */ : 32 /* TNodeFlags.hasStyleInput */)) !== 0;
+    return (tNode.flags & (isClassBased ? 8 /* TNodeFlags.hasClassInput */ : 16 /* TNodeFlags.hasStyleInput */)) !== 0;
 }
 
 /**
@@ -19811,7 +19870,7 @@ function processI18nInsertBefore(renderer, childTNode, lView, childRNode, parent
             anchorRNode = i18nParent;
             i18nParent = parentRElement;
         }
-        if (i18nParent !== null && (childTNode.flags & 2 /* TNodeFlags.isComponentHost */) === 0) {
+        if (i18nParent !== null && childTNode.componentOffset === -1) {
             for (let i = 1; i < tNodeInsertBeforeIndex.length; i++) {
                 // No need to `unwrapRNode` because all of the indexes point to i18n text nodes.
                 // see `assertDomNode` below.