fixup! refactor(compiler): emit instructions for foreign components

Author: leonsenft

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/GOLDEN_PARTIAL.js

@@ -388,13 +388,27 @@ function frameworkImport(component) {
 export class TestCmp {
     title = 'Submit';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: TestCmp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: TestCmp, isStandalone: true, selector: "main", ngImport: i0, template: '<FancyButton class="btn-cls" [label]="title"></FancyButton>', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: TestCmp, isStandalone: true, selector: "main", ngImport: i0, template: `
+    <FancyButton
+      class="btn-cls"
+      unsafe-attr="value"
+      [label]="title"
+      [unsafe-input]="title"
+    />
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: TestCmp, decorators: [{
             type: Component,
             args: [{
                     selector: 'main',
-                    template: '<FancyButton class="btn-cls" [label]="title"></FancyButton>',
+                    template: `
+    <FancyButton
+      class="btn-cls"
+      unsafe-attr="value"
+      [label]="title"
+      [unsafe-input]="title"
+    />
+  `,
                     // @ts-ignore: @angular/core does not expose the `foreignImports` property.
                     foreignImports: [
                         // @ts-ignore: @angular/core does not expose the `ForeignComponent` type this expects.

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/foreign_component.js

@@ -7,7 +7,7 @@ export class TestCmp {
     vars: 0,
     template: function TestCmp_Template(rf, ctx) {
       if (rf & 1) {
-        i0.ɵɵforeignComponent(0, frameworkImport(FancyButton), { class: "btn-cls", label: ctx.title });
+        i0.ɵɵforeignComponent(0, frameworkImport(FancyButton), { class: "btn-cls", "unsafe-attr": "value", label: ctx.title, "unsafe-input": ctx.title });
       }
     },
     encapsulation: 2

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/foreign_component.local.js

@@ -7,7 +7,7 @@ export class TestCmp {
     vars: 0,
     template: function TestCmp_Template(rf, ctx) {
       if (rf & 1) {
-        i0.ɵɵforeignComponent(0, frameworkImport(FancyButton), { class: "btn-cls", label: ctx.title });
+        i0.ɵɵforeignComponent(0, frameworkImport(FancyButton), { class: "btn-cls", "unsafe-attr": "value", label: ctx.title, "unsafe-input": ctx.title });
       }
     },
     encapsulation: 2

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/foreign_component.ts

@@ -9,7 +9,14 @@ function frameworkImport(component: {}): Function {
 
 @Component({
   selector: 'main',
-  template: '<FancyButton class="btn-cls" [label]="title"></FancyButton>',
+  template: `
+    <FancyButton
+      class="btn-cls"
+      unsafe-attr="value"
+      [label]="title"
+      [unsafe-input]="title"
+    />
+  `,
   // @ts-ignore: @angular/core does not expose the `foreignImports` property.
   foreignImports: [
     // @ts-ignore: @angular/core does not expose the `ForeignComponent` type this expects.

packages/compiler/src/template/pipeline/src/ingest.ts

@@ -14,6 +14,7 @@ import {splitNsName} from '../../../ml_parser/tags';
 import * as o from '../../../output/output_ast';
 import {ParseSourceSpan} from '../../../parse_util';
 import * as t from '../../../render3/r3_ast';
+import {isUnsafeObjectKey} from '../../../render3/util';
 import {
   DeferBlockDepsEmitMode,
   R3ComponentDeferMetadata,
@@ -296,14 +297,14 @@ function ingestElement(unit: ViewCompilationUnit, element: t.Element): void {
       propEntries.push({
         key: attr.name,
         value: o.literal(attr.value),
-        quoted: false,
+        quoted: isUnsafeObjectKey(attr.name),
       });
     }
     for (const input of element.inputs) {
       propEntries.push({
         key: input.name,
         value: convertAst(input.value, unit.job, input.sourceSpan),
-        quoted: false,
+        quoted: isUnsafeObjectKey(input.name),
       });
     }
     const props = propEntries.length > 0 ? o.literalMap(propEntries) : null;