feat(ivy): SVG now handled by ivy compiler (#23899)

PR Close #23899

packages/core/src/core_render3_private_export.ts

@@ -45,6 +45,10 @@ export {
   i7 as ɵi7,
   i8 as ɵi8,
   iV as ɵiV,
+  N as ɵN,
+  NH as ɵNH,
+  NM as ɵNM,
+  NS as ɵNS,
   pb1 as ɵpb1,
   pb2 as ɵpb2,
   pb3 as ɵpb3,

packages/core/src/render3/index.ts

@@ -54,6 +54,11 @@ export {
   elementStyle as s,
   elementStyleNamed as sn,
 
+  namespace as N,
+  namespaceHTML as NH,
+  namespaceMathML as NM,
+  namespaceSVG as NS,
+
   listener as L,
   store as st,
   load as ld,

packages/core/src/render3/instructions.ts

@@ -496,6 +496,7 @@ export function renderEmbeddedTemplate<T>(
       rf = RenderFlags.Create;
     }
     oldView = enterView(viewNode.data, viewNode);
+    namespaceHTML();
     tView.template !(rf, context);
     if (rf & RenderFlags.Update) {
       refreshView();
@@ -521,6 +522,7 @@ export function renderComponentOrTemplate<T>(
       rendererFactory.begin();
     }
     if (template) {
+      namespaceHTML();
       template(getRenderFlags(hostView), componentOrContext !);
       refreshView();
     } else {
@@ -2186,6 +2188,7 @@ export function detectChangesInternal<T>(hostView: LView, hostNode: LElementNode
   const template = hostView.tView.template !;
 
   try {
+    namespaceHTML();
     template(getRenderFlags(hostView), component);
     refreshView();
   } finally {

packages/core/test/bundling/todo/bundle.golden_symbols.json

@@ -545,6 +545,9 @@
   {
     "name": "markViewDirty"
   },
+  {
+    "name": "namespaceHTML"
+  },
   {
     "name": "notImplemented"
   },

packages/core/test/render3/compiler_canonical/elements_spec.ts

@@ -55,6 +55,44 @@ describe('elements', () => {
         .toEqual('<div class="my-app" title="Hello">Hello <b>World</b>!</div>');
   });
 
+  it('should translate DOM structure with SVG', () => {
+    type $MyComponent$ = MyComponent;
+
+    // Important: keep arrays outside of function to not create new instances.
+    const $e0_attrs$ = ['class', 'my-app', 'title', 'Hello'];
+    const $e2_attrs$ = ['cx', '50', 'cy', '100', 'r', '25'];
+
+    @Component({
+      selector: 'my-component',
+      template:
+          `<div class="my-app" title="Hello"><svg><circle cx="50" cy="100" r="25"/></svg></div>`
+    })
+    class MyComponent {
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyComponent,
+        selectors: [['my-component']],
+        factory: () => new MyComponent(),
+        template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
+          if (rf & 1) {
+            $r3$.ɵE(0, 'div', $e0_attrs$);
+            $r3$.ɵNS();
+            $r3$.ɵE(1, 'svg');
+            $r3$.ɵEe(2, 'circle', $e2_attrs$);
+            $r3$.ɵe();
+            $r3$.ɵNH();
+            $r3$.ɵe();
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    expect(toHtml(renderComponent(MyComponent)))
+        .toEqual(
+            '<div class="my-app" title="Hello"><svg><circle cx="50" cy="100" r="25"></circle></svg></div>');
+  });
+
   it('should support local refs', () => {
     type $LocalRefComp$ = LocalRefComp;
 

packages/core/test/render3/compiler_canonical/template_variables_spec.ts

@@ -133,6 +133,57 @@ describe('template variables', () => {
     expect(toHtml(renderComponent(MyComponent))).toEqual('<ul></ul>');
   });
 
+  it('should support a let variable and reference inside of SVG', () => {
+    type $MyComponent$ = MyComponent;
+    const $_c0$ = ['for', '', 'forOf', ''];
+
+    interface Item {
+      name: number;
+    }
+
+    @Component({
+      selector: 'my-component',
+      template: `<svg><g *for="let item of items"><circle></circle></g></svg>`
+    })
+    class MyComponent {
+      items = [{data: 42}, {data: 42}];
+
+      // NORMATIVE
+      static ngComponentDef = $r3$.ɵdefineComponent({
+        type: MyComponent,
+        selectors: [['my-component']],
+        factory: function MyComponent_Factory() { return new MyComponent(); },
+        template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
+          if (rf & 1) {
+            $r3$.ɵNS();
+            $r3$.ɵE(0, 'svg');
+            $r3$.ɵC(1, MyComponent__svg_g_Template_1, null, $_c0$);
+            $r3$.ɵe();
+          }
+          if (rf & 2) {
+            $r3$.ɵp(1, 'forOf', $r3$.ɵb(ctx.items));
+          }
+          function MyComponent__svg_g_Template_1(rf: $RenderFlags$, ctx0: $MyComponent$) {
+            if (rf & 1) {
+              $r3$.ɵE(0, 'g');
+              $r3$.ɵEe(1, 'circle');
+              $r3$.ɵe();
+            }
+          }
+        }
+      });
+      // /NORMATIVE
+    }
+
+    // NON-NORMATIVE
+    (MyComponent.ngComponentDef as ComponentDef<any>).directiveDefs =
+        [ForOfDirective.ngDirectiveDef];
+    // /NON-NORMATIVE
+
+    // TODO(chuckj): update when the changes to enable ngForOf lands.
+    expect(toHtml(renderComponent(MyComponent))).toEqual('<svg></svg>');
+  });
+
   it('should support accessing parent template variables', () => {
     type $MyComponent$ = MyComponent;