feat(ivy): added namespaced attributes (#23899)

PR Close #23899

packages/core/src/render3/di.ts

@@ -260,8 +260,11 @@ export function injectAttribute(attrNameToInject: string): string|undefined {
   const attrs = tElement.attrs;
   if (attrs) {
     for (let i = 0; i < attrs.length; i = i + 2) {
-      const attrName = attrs[i];
+      let attrName = attrs[i];
       if (attrName === AttributeMarker.SELECT_ONLY) break;
+      if (attrName === 0) {  // NS.FULL
+        attrName = attrs[i += 2];
+      }
       if (attrName == attrNameToInject) {
         return attrs[i + 1] as string;
       }

packages/core/src/render3/instructions.ts

@@ -842,15 +842,28 @@ export function createTView(
 function setUpAttributes(native: RElement, attrs: TAttributes): void {
   const isProc = isProceduralRenderer(renderer);
   for (let i = 0; i < attrs.length; i += 2) {
-    const attrName = attrs[i];
-    if (attrName === AttributeMarker.SELECT_ONLY) break;
-    if (attrName !== NG_PROJECT_AS_ATTR_NAME) {
-      const attrVal = attrs[i + 1];
-      ngDevMode && ngDevMode.rendererSetAttribute++;
-      isProc ?
-          (renderer as ProceduralRenderer3)
-              .setAttribute(native, attrName as string, attrVal as string) :
-          native.setAttribute(attrName as string, attrVal as string);
+    let attrName = attrs[i];
+    if (attrName === 0) {  // NS.FULL
+      // Namespaced attribute
+      const attrNS = attrs[i + 1] as string;
+      attrName = attrs[i + 2] as string;
+      const attrVal = attrs[i + 3] as string;
+      i += 2;
+      if (isProc) {
+        (renderer as ProceduralRenderer3).setAttribute(native, attrName, attrVal, attrNS);
+      } else {
+        native.setAttributeNS(attrNS, attrName, attrVal);
+      }
+    } else {
+      if (attrName === AttributeMarker.SELECT_ONLY) break;
+      if (attrName !== NG_PROJECT_AS_ATTR_NAME) {
+        const attrVal = attrs[i + 1];
+        ngDevMode && ngDevMode.rendererSetAttribute++;
+        isProc ?
+            (renderer as ProceduralRenderer3)
+                .setAttribute(native, attrName as string, attrVal as string) :
+            native.setAttribute(attrName as string, attrVal as string);
+      }
     }
   }
 }
@@ -1493,7 +1506,8 @@ function generateInitialInputs(
 
   const attrs = tNode.attrs !;
   for (let i = 0; i < attrs.length; i += 2) {
-    const attrName = attrs[i];
+    const first = attrs[i];
+    const attrName = first === 0 ? attrs[i += 2] : first;  // 0 = NS.FULL
     const minifiedInputName = inputs[attrName];
     const attrValue = attrs[i + 1];
 
@@ -1906,7 +1920,7 @@ function appendToProjectionNode(
  *        - 1 based index of the selector from the {@link projectionDef}
  */
 export function projection(
-    nodeIndex: number, localIndex: number, selectorIndex: number = 0, attrs?: string[]): void {
+    nodeIndex: number, localIndex: number, selectorIndex: number = 0, attrs?: TAttributes): void {
   const node = createLNode(
       nodeIndex, TNodeType.Projection, null, null, attrs || null, {head: null, tail: null});
 

packages/core/src/render3/interfaces/node.ts

@@ -5,7 +5,6 @@
  * 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
  */
-
 import {LContainer} from './container';
 import {LInjector} from './injector';
 import {LProjection} from './projection';
@@ -14,6 +13,16 @@ import {RElement, RNode, RText} from './renderer';
 import {LView, TData, TView} from './view';
 
 
+/**
+ * Namespace attribute flags.
+ */
+export const enum NS {
+  /**
+   * Use the next value as the full namespaces URI, the values after that
+   * are then the name and the value, respectively.
+   */
+  FULL = 0,
+}
 
 /**
  * TNodeType corresponds to the TNode.type property. It contains information
@@ -179,7 +188,7 @@ export const enum AttributeMarker {
  * - attribute names and values
  * - special markers acting as flags to alter attributes processing.
  */
-export type TAttributes = (string | AttributeMarker)[];
+export type TAttributes = (string | AttributeMarker | NS)[];
 
 /**
  * LNode binding data (flyweight) for a particular node that is shared between all templates

packages/core/src/render3/node_selector_matcher.ts

@@ -106,8 +106,12 @@ function findAttrIndexInNode(name: string, attrs: TAttributes | null): number {
   if (attrs === null) return -1;
   for (let i = 0; i < attrs.length; i += step) {
     const attrName = attrs[i];
-    if (attrName === name) return i;
-    if (attrName === AttributeMarker.SELECT_ONLY) {
+    if (attrName === 0) {
+      // NS.FULL
+      step = 2;
+    } else if (attrName === name) {
+      return i;
+    } else if (attrName === AttributeMarker.SELECT_ONLY) {
       step = 1;
     }
   }