From 64fd0d6db947e971e47802770f79c38ec9e03d59 Mon Sep 17 00:00:00 2001 From: Kara Erickson Date: Thu, 10 Oct 2019 14:57:15 -0700 Subject: [PATCH] =?UTF-8?q?refactor(core):=20rename=20ngComponentDef=20to?= =?UTF-8?q?=20=C9=B5cmp=20(#33088)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Component defs are not considered public API, so the property that contains them should be prefixed with Angular's marker for "private" ('ɵ') to discourage apps from relying on def APIs directly. This commit adds the prefix and shortens the name from `ngComponentDef` to `cmp`. This is because property names cannot be minified by Uglify without turning on property mangling (which most apps have turned off) and are thus size-sensitive. Note that the other "defs" (ngDirectiveDef, etc) will be prefixed and shortened in follow-up PRs, in an attempt to limit how large and conflict-y this change is. PR Close #33088 --- .../src/tree/render3_function/index.ts | 2 +- .../ngcc/test/rendering/renderer_spec.ts | 2 +- .../src/ngtsc/annotations/src/component.ts | 6 +- .../src/ngtsc/metadata/src/dts.ts | 5 +- .../compiler-cli/src/ngtsc/scope/src/local.ts | 2 +- .../src/transformers/nocollapse_hack.ts | 2 +- .../compliance/r3_compiler_compliance_spec.ts | 79 +++++++++---------- .../r3_view_compiler_binding_spec.ts | 4 +- .../r3_view_compiler_directives_spec.ts | 32 ++++---- .../r3_view_compiler_input_outputs_spec.ts | 2 +- .../r3_view_compiler_listener_spec.ts | 4 +- .../r3_view_compiler_providers_spec.ts | 2 +- .../r3_view_compiler_styling_spec.ts | 18 ++--- .../compiler-cli/test/ngtsc/ngtsc_spec.ts | 22 +++--- packages/compiler/design/architecture.md | 10 +-- .../compiler/design/separate_compilation.md | 26 +++--- packages/compiler/src/constant_pool.ts | 2 +- .../core/src/core_render3_private_export.ts | 2 +- .../core/src/metadata/resource_loading.ts | 4 +- packages/core/src/render3/VIEW_DATA.md | 22 +++--- packages/core/src/render3/assert.ts | 3 +- .../core/src/render3/context_discovery.ts | 2 +- packages/core/src/render3/definition.ts | 8 +- packages/core/src/render3/di.ts | 2 +- .../features/inherit_definition_feature.ts | 6 +- .../render3/features/ng_onchanges_feature.ts | 2 +- .../src/render3/features/providers_feature.ts | 2 +- packages/core/src/render3/fields.ts | 2 +- packages/core/src/render3/i18n.md | 10 +-- .../core/src/render3/interfaces/definition.ts | 4 +- packages/core/src/render3/jit/directive.ts | 8 +- packages/core/src/render3/jit/module.ts | 22 +++--- .../cyclic_import/bundle.golden_symbols.json | 2 +- .../hello_world/bundle.golden_symbols.json | 2 +- .../bundling/todo/bundle.golden_symbols.json | 2 +- .../test/linker/ng_module_integration_spec.ts | 2 +- .../test/metadata/resource_loading_spec.ts | 14 ++-- packages/core/test/render3/basic_perf.ts | 2 +- .../test/render3/change_detection_spec.ts | 12 +-- .../core/test/render3/component_ref_spec.ts | 6 +- packages/core/test/render3/component_spec.ts | 25 +++--- .../core/test/render3/control_flow_spec.ts | 8 +- packages/core/test/render3/di_spec.ts | 2 +- .../core/test/render3/instructions_spec.ts | 2 +- .../core/test/render3/integration_spec.ts | 52 ++++++------ packages/core/test/render3/ivy/jit_spec.ts | 14 ++-- packages/core/test/render3/lifecycle_spec.ts | 2 +- packages/core/test/render3/listeners_spec.ts | 18 ++--- packages/core/test/render3/outputs_spec.ts | 2 +- packages/core/test/render3/providers_spec.ts | 34 ++++---- .../core/test/render3/pure_function_spec.ts | 2 +- packages/core/test/render3/query_spec.ts | 10 +-- packages/core/test/render3/render_util.ts | 2 +- .../test/render3/renderer_factory_spec.ts | 6 +- .../test/render3/view_container_ref_spec.ts | 14 ++-- .../test/strict_types/inheritance_spec.ts | 4 +- packages/core/test/test_bed_spec.ts | 19 +++-- packages/core/testing/src/r3_test_bed.ts | 4 +- .../core/testing/src/r3_test_bed_compiler.ts | 29 ++++--- .../test/testing_public_spec.ts | 2 +- .../hello_world_min_debug.js | 6 +- 61 files changed, 306 insertions(+), 312 deletions(-) diff --git a/modules/benchmarks/src/tree/render3_function/index.ts b/modules/benchmarks/src/tree/render3_function/index.ts index 999dcddf8e..b33f23f843 100644 --- a/modules/benchmarks/src/tree/render3_function/index.ts +++ b/modules/benchmarks/src/tree/render3_function/index.ts @@ -21,7 +21,7 @@ export class TreeFunction { static ngFactoryDef = () => new TreeFunction; /** @nocollapse */ - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: TreeFunction, selectors: [['tree']], decls: 5, diff --git a/packages/compiler-cli/ngcc/test/rendering/renderer_spec.ts b/packages/compiler-cli/ngcc/test/rendering/renderer_spec.ts index 41514bcdc0..e1abeb5573 100644 --- a/packages/compiler-cli/ngcc/test/rendering/renderer_spec.ts +++ b/packages/compiler-cli/ngcc/test/rendering/renderer_spec.ts @@ -189,7 +189,7 @@ runInEachFileSystem(() => { const addDefinitionsSpy = testFormatter.addDefinitions as jasmine.Spy; expect(addDefinitionsSpy.calls.first().args[2]) .toEqual(`A.ngFactoryDef = function A_Factory(t) { return new (t || A)(); }; -A.ngComponentDef = ɵngcc0.ɵɵdefineComponent({ type: A, selectors: [["a"]], decls: 1, vars: 1, template: function A_Template(rf, ctx) { if (rf & 1) { +A.ɵcmp = ɵngcc0.ɵɵdefineComponent({ type: A, selectors: [["a"]], decls: 1, vars: 1, template: function A_Template(rf, ctx) { if (rf & 1) { ɵngcc0.ɵɵtext(0); } if (rf & 2) { ɵngcc0.ɵɵtextInterpolate(ctx.person.name); diff --git a/packages/compiler-cli/src/ngtsc/annotations/src/component.ts b/packages/compiler-cli/src/ngtsc/annotations/src/component.ts index a0205bd27d..62b3571031 100644 --- a/packages/compiler-cli/src/ngtsc/annotations/src/component.ts +++ b/packages/compiler-cli/src/ngtsc/annotations/src/component.ts @@ -400,7 +400,7 @@ export class ComponentDecoratorHandler implements // First it needs to be determined if actually importing the directives/pipes used in the // template would create a cycle. Currently ngtsc refuses to generate cycles, so an option // known as "remote scoping" is used if a cycle would be created. In remote scoping, the - // module file sets the directives/pipes on the ngComponentDef of the component, without + // module file sets the directives/pipes on the ɵcmp of the component, without // requiring new imports (but also in a way that breaks tree shaking). // // Determining this is challenging, because the TemplateDefinitionBuilder is responsible for @@ -456,7 +456,7 @@ export class ComponentDecoratorHandler implements this._recordSyntheticImport(pipe, context); } - // Check whether the directive/pipe arrays in ngComponentDef need to be wrapped in closures. + // Check whether the directive/pipe arrays in ɵcmp need to be wrapped in closures. // This is required if any directive/pipe reference is to a declaration in the same file but // declared after this component. const wrapDirectivesAndPipesInClosure = @@ -493,7 +493,7 @@ export class ComponentDecoratorHandler implements } return [ factoryRes, { - name: 'ngComponentDef', + name: 'ɵcmp', initializer: res.expression, statements: [], type: res.type, diff --git a/packages/compiler-cli/src/ngtsc/metadata/src/dts.ts b/packages/compiler-cli/src/ngtsc/metadata/src/dts.ts index 0e843cd776..17d6a6e2a1 100644 --- a/packages/compiler-cli/src/ngtsc/metadata/src/dts.ts +++ b/packages/compiler-cli/src/ngtsc/metadata/src/dts.ts @@ -69,8 +69,7 @@ export class DtsMetadataReader implements MetadataReader { getDirectiveMetadata(ref: Reference): DirectiveMeta|null { const clazz = ref.node; const def = this.reflector.getMembersOfClass(clazz).find( - field => - field.isStatic && (field.name === 'ngComponentDef' || field.name === 'ngDirectiveDef')); + field => field.isStatic && (field.name === 'ɵcmp' || field.name === 'ngDirectiveDef')); if (def === undefined) { // No definition could be found. return null; @@ -88,7 +87,7 @@ export class DtsMetadataReader implements MetadataReader { return { ref, name: clazz.name.text, - isComponent: def.name === 'ngComponentDef', selector, + isComponent: def.name === 'ɵcmp', selector, exportAs: readStringArrayType(def.type.typeArguments[2]), inputs: readStringMapType(def.type.typeArguments[3]), outputs: readStringMapType(def.type.typeArguments[4]), diff --git a/packages/compiler-cli/src/ngtsc/scope/src/local.ts b/packages/compiler-cli/src/ngtsc/scope/src/local.ts index 48318a607b..dd9f679bc3 100644 --- a/packages/compiler-cli/src/ngtsc/scope/src/local.ts +++ b/packages/compiler-cli/src/ngtsc/scope/src/local.ts @@ -91,7 +91,7 @@ export class LocalModuleScopeRegistry implements MetadataRegistry, ComponentScop * Tracks whether a given component requires "remote scoping". * * Remote scoping is when the set of directives which apply to a given component is set in the - * NgModule's file instead of directly on the ngComponentDef (which is sometimes needed to get + * NgModule's file instead of directly on the component def (which is sometimes needed to get * around cyclic import issues). This is not used in calculation of `LocalModuleScope`s, but is * tracked here for convenience. */ diff --git a/packages/compiler-cli/src/transformers/nocollapse_hack.ts b/packages/compiler-cli/src/transformers/nocollapse_hack.ts index c9a1eed187..c00e4f4a51 100644 --- a/packages/compiler-cli/src/transformers/nocollapse_hack.ts +++ b/packages/compiler-cli/src/transformers/nocollapse_hack.ts @@ -20,7 +20,7 @@ // Pattern matching all Render3 property names. const R3_DEF_NAME_PATTERN = [ 'ngBaseDef', - 'ngComponentDef', + 'ɵcmp', 'ngDirectiveDef', 'ngInjectableDef', 'ngInjectorDef', diff --git a/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts b/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts index b7f5ee4468..df4e0fc67e 100644 --- a/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts @@ -477,7 +477,7 @@ describe('compiler compliance', () => { const factory = 'MyComponent.ngFactoryDef = function MyComponent_Factory(t) { return new (t || MyComponent)(); }'; const template = ` - MyComponent.ngComponentDef = i0.ɵɵdefineComponent({type:MyComponent,selectors:[["my-component"]], + MyComponent.ɵcmp = i0.ɵɵdefineComponent({type:MyComponent,selectors:[["my-component"]], decls: 1, vars: 2, template: function MyComponent_Template(rf,ctx){ @@ -565,7 +565,7 @@ describe('compiler compliance', () => { // ChildComponent definition should be: const ChildComponentDefinition = ` - ChildComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + ChildComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: ChildComponent, selectors: [["child"]], decls: 1, @@ -595,7 +595,7 @@ describe('compiler compliance', () => { // MyComponent definition should be: const MyComponentDefinition = ` … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 2, @@ -618,11 +618,11 @@ describe('compiler compliance', () => { const result = compile(files, angularFiles); const source = result.source; - expectEmit(source, ChildComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); + expectEmit(source, ChildComponentDefinition, 'Incorrect ChildComponent.ɵcmp'); expectEmit(source, ChildComponentFactory, 'Incorrect ChildComponent.ngFactoryDef'); expectEmit(source, SomeDirectiveDefinition, 'Incorrect SomeDirective.ngDirectiveDef'); expectEmit(source, SomeDirectiveFactory, 'Incorrect SomeDirective.ngFactoryDef'); - expectEmit(source, MyComponentDefinition, 'Incorrect MyComponentDefinition.ngComponentDef'); + expectEmit(source, MyComponentDefinition, 'Incorrect MyComponentDefinition.ɵcmp'); expectEmit(source, MyComponentFactory, 'Incorrect MyComponentDefinition.ngFactoryDef'); }); @@ -693,7 +693,7 @@ describe('compiler compliance', () => { // EmptyOutletComponent definition should be: const EmptyOutletComponentDefinition = ` … - EmptyOutletComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + EmptyOutletComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: EmptyOutletComponent, selectors: [["ng-component"]], decls: 1, @@ -713,8 +713,7 @@ describe('compiler compliance', () => { const result = compile(files, angularFiles); const source = result.source; - expectEmit( - source, EmptyOutletComponentDefinition, 'Incorrect EmptyOutletComponent.ngComponentDef'); + expectEmit(source, EmptyOutletComponentDefinition, 'Incorrect EmptyOutletComponent.ɵcmp'); expectEmit( source, EmptyOutletComponentFactory, 'Incorrect EmptyOutletComponent.ngFactoryDef'); }); @@ -742,7 +741,7 @@ describe('compiler compliance', () => { const MyComponentDefinition = ` … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 0, @@ -760,7 +759,7 @@ describe('compiler compliance', () => { const result = compile(files, angularFiles); const source = result.source; - expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef'); + expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ɵcmp'); expectEmit(source, MyComponentFactory, 'Incorrect MyComponent.ngFactoryDef'); }); @@ -813,7 +812,7 @@ describe('compiler compliance', () => { } } … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 3, @@ -838,7 +837,7 @@ describe('compiler compliance', () => { expectEmit(source, IfDirectiveDefinition, 'Incorrect IfDirective.ngDirectiveDef'); expectEmit(source, IfDirectiveFactory, 'Incorrect IfDirective.ngFactoryDef'); - expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef'); + expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ɵcmp'); expectEmit(source, MyComponentFactory, 'Incorrect MyComponent.ngFactoryDef'); }); @@ -880,7 +879,7 @@ describe('compiler compliance', () => { const MyAppDeclaration = ` const $e0_ff$ = function ($v$) { return ["Nancy", $v$]; }; … - MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], decls: 1, @@ -961,7 +960,7 @@ describe('compiler compliance', () => { return ["start-", $v0$, $v1$, $v2$, $v3$, $v4$, "-middle-", $v5$, $v6$, $v7$, $v8$, "-end"]; } … - MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], decls: 1, @@ -1023,7 +1022,7 @@ describe('compiler compliance', () => { const MyAppDefinition = ` const $e0_ff$ = function ($v$) { return {"duration": 500, animation: $v$}; }; … - MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], decls: 1, @@ -1090,7 +1089,7 @@ describe('compiler compliance', () => { const $e0_ff_1$ = function ($v$) { return [$c0$, $v$]; }; const $e0_ff_2$ = function ($v1$, $v2$) { return {animation: $v1$, actions: $v2$}; }; … - MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], decls: 1, @@ -1151,7 +1150,7 @@ describe('compiler compliance', () => { }; const SimpleComponentDefinition = ` - SimpleComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + SimpleComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: SimpleComponent, selectors: [["simple"]], ngContentSelectors: $c0$, @@ -1171,7 +1170,7 @@ describe('compiler compliance', () => { const ComplexComponentDefinition = ` const $c1$ = [[["span", "title", "tofirst"]], [["span", "title", "tosecond"]]]; … - ComplexComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + ComplexComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: ComplexComponent, selectors: [["complex"]], ngContentSelectors: $c2$, @@ -1227,7 +1226,7 @@ describe('compiler compliance', () => { const $c0$ = ["*", [["", "spacer", ""]], "*"]; const $c1$ = ["*", "[spacer]", "*"]; … - Cmp.ngComponentDef = $r3$.ɵɵdefineComponent({ + Cmp.ɵcmp = $r3$.ɵɵdefineComponent({ type: Cmp, selectors: [["ng-component"]], ngContentSelectors: $c1$, @@ -1411,7 +1410,7 @@ describe('compiler compliance', () => { const $_c0$ = [[["", "title", ""]]]; const $_c1$ = ["[title]"]; … - MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], decls: 2, @@ -1463,7 +1462,7 @@ describe('compiler compliance', () => { const $_c0$ = [[["", "title", ""]]]; const $_c1$ = ["[title]"]; … - MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], decls: 2, @@ -1526,7 +1525,7 @@ describe('compiler compliance', () => { const ViewQueryComponentDefinition = ` … - ViewQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: ViewQueryComponent, selectors: [["view-query-component"]], viewQuery: function ViewQueryComponent_Query(rf, ctx) { @@ -1586,7 +1585,7 @@ describe('compiler compliance', () => { const $e0_attrs$ = ["myRef"]; const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"]; … - ViewQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ … viewQuery: function ViewQueryComponent_Query(rf, ctx) { if (rf & 1) { @@ -1636,7 +1635,7 @@ describe('compiler compliance', () => { const ViewQueryComponentDefinition = ` const $refs$ = ["foo"]; … - ViewQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: ViewQueryComponent, selectors: [["view-query-component"]], viewQuery: function ViewQueryComponent_Query(rf, ctx) { @@ -1701,7 +1700,7 @@ describe('compiler compliance', () => { const $e0_attrs$ = ["myRef"]; const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"]; … - ViewQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ … viewQuery: function ViewQueryComponent_Query(rf, ctx) { if (rf & 1) { @@ -1763,7 +1762,7 @@ describe('compiler compliance', () => { }; const ContentQueryComponentDefinition = ` - ContentQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: ContentQueryComponent, selectors: [["content-query-component"]], contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) { @@ -1824,7 +1823,7 @@ describe('compiler compliance', () => { const $e0_attrs$ = ["myRef"]; const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"]; … - ContentQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ … contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) { @@ -1882,7 +1881,7 @@ describe('compiler compliance', () => { }; const ContentQueryComponentDefinition = ` - ContentQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: ContentQueryComponent, selectors: [["content-query-component"]], contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) { @@ -1948,7 +1947,7 @@ describe('compiler compliance', () => { const $e0_attrs$ = ["myRef"]; const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"]; … - ContentQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({ … contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) { @@ -2045,7 +2044,7 @@ describe('compiler compliance', () => { return [$a0$, 1, 2, 3, 4, 5]; }; // ... - MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], decls: 7, @@ -2112,7 +2111,7 @@ describe('compiler compliance', () => { const MyAppDefinition = ` // ... - MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyApp.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyApp, selectors: [["my-app"]], decls: 6, @@ -2235,7 +2234,7 @@ describe('compiler compliance', () => { const MyComponentDefinition = ` const $c1$ = ["user", ""]; … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 3, @@ -2258,7 +2257,7 @@ describe('compiler compliance', () => { const result = compile(files, angularFiles); const source = result.source; - expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef'); + expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ɵcmp'); }); it('local references in nested views', () => { @@ -2330,7 +2329,7 @@ describe('compiler compliance', () => { } } … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 6, @@ -2355,7 +2354,7 @@ describe('compiler compliance', () => { const result = compile(files, angularFiles); const source = result.source; - expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef'); + expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ɵcmp'); }); it('should support local refs mixed with context assignments', () => { @@ -2475,7 +2474,7 @@ describe('compiler compliance', () => { it('should gen hooks with a few simple components', () => { const LifecycleCompDefinition = ` - LifecycleComp.ngComponentDef = $r3$.ɵɵdefineComponent({ + LifecycleComp.ɵcmp = $r3$.ɵɵdefineComponent({ type: LifecycleComp, selectors: [["lifecycle-comp"]], inputs: {nameMin: ["name", "nameMin"]}, @@ -2487,7 +2486,7 @@ describe('compiler compliance', () => { });`; const SimpleLayoutDefinition = ` - SimpleLayout.ngComponentDef = $r3$.ɵɵdefineComponent({ + SimpleLayout.ɵcmp = $r3$.ɵɵdefineComponent({ type: SimpleLayout, selectors: [["simple-layout"]], decls: 2, @@ -2619,7 +2618,7 @@ describe('compiler compliance', () => { } } … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 2, @@ -2705,7 +2704,7 @@ describe('compiler compliance', () => { } } … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 2, @@ -2809,7 +2808,7 @@ describe('compiler compliance', () => { } … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 2, diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts index 0d573974ed..42316c2efc 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts @@ -714,7 +714,7 @@ describe('compiler compliance: bindings', () => { const HostBindingCompDeclaration = ` const $ff$ = function ($v$) { return ["red", $v$]; }; … - HostBindingComp.ngComponentDef = $r3$.ɵɵdefineComponent({ + HostBindingComp.ɵcmp = $r3$.ɵɵdefineComponent({ type: HostBindingComp, selectors: [["host-binding-comp"]], hostBindings: function HostBindingComp_HostBindings(rf, ctx, elIndex) { @@ -862,7 +862,7 @@ describe('compiler compliance: bindings', () => { const $c0$ = ["title", "hello there from component", ${AttributeMarker.Styles}, "opacity", "1"]; const $c1$ = ["title", "hello there from directive", ${AttributeMarker.Classes}, "one", "two", ${AttributeMarker.Styles}, "width", "200px", "height", "500px"]; … - HostAttributeComp.ngComponentDef = $r3$.ɵɵdefineComponent({ + HostAttributeComp.ɵcmp = $r3$.ɵɵdefineComponent({ type: HostAttributeComp, selectors: [["my-host-attribute-component"]], hostBindings: function HostAttributeComp_HostBindings(rf, ctx, elIndex) { diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts index 21f68fafa3..1974c1cc73 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts @@ -38,7 +38,7 @@ describe('compiler compliance: directives', () => { // MyComponent definition should be: const MyComponentDefinition = ` - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 1, @@ -59,7 +59,7 @@ describe('compiler compliance: directives', () => { const result = compile(files, angularFiles); const source = result.source; - expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); + expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp'); expectEmit(source, MyComponentFactory, 'Incorrect ChildComponent.ngFactoryDef'); }); @@ -88,7 +88,7 @@ describe('compiler compliance: directives', () => { // MyComponent definition should be: const MyComponentDefinition = ` - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 1, @@ -109,7 +109,7 @@ describe('compiler compliance: directives', () => { const result = compile(files, angularFiles); const source = result.source; - expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); + expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp'); expectEmit(source, MyComponentFactory, 'Incorrect ChildComponent.ngFactoryDef'); }); @@ -138,7 +138,7 @@ describe('compiler compliance: directives', () => { // MyComponent definition should be: const MyComponentDefinition = ` … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ … consts: [[${AttributeMarker.Bindings}, "someDirective"]], template: function MyComponent_Template(rf, ctx) { @@ -158,7 +158,7 @@ describe('compiler compliance: directives', () => { const result = compile(files, angularFiles); const source = result.source; - expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); + expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp'); }); it('should match directives on ng-templates', () => { @@ -196,7 +196,7 @@ describe('compiler compliance: directives', () => { } } … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ … consts: [["directiveA", ""]], template: function MyComponent_Template(rf, ctx) { @@ -211,7 +211,7 @@ describe('compiler compliance: directives', () => { `; const result = compile(files, angularFiles); - expectEmit(result.source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); + expectEmit(result.source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp'); }); it('should match directives on ng-container', () => { @@ -251,7 +251,7 @@ describe('compiler compliance: directives', () => { } } … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ … consts: [["directiveA", "", ${AttributeMarker.Template}, "ngIf"], ["directiveA", ""]], template: function MyComponent_Template(rf, ctx) { @@ -269,7 +269,7 @@ describe('compiler compliance: directives', () => { `; const result = compile(files, angularFiles); - expectEmit(result.source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); + expectEmit(result.source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp'); }); it('should match directives on ng-template bindings', () => { @@ -297,7 +297,7 @@ describe('compiler compliance: directives', () => { // MyComponent definition should be: const MyComponentDefinition = ` … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ … consts: [[${AttributeMarker.Bindings}, "someDirective"]], template: function MyComponent_Template(rf, ctx) { @@ -317,7 +317,7 @@ describe('compiler compliance: directives', () => { const result = compile(files, angularFiles); const source = result.source; - expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); + expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp'); }); it('should match structural directives', () => { @@ -344,7 +344,7 @@ describe('compiler compliance: directives', () => { // MyComponent definition should be: const MyComponentDefinition = ` … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ … consts: [[${AttributeMarker.Template}, "someDirective"]], template: function MyComponent_Template(rf, ctx) { @@ -361,7 +361,7 @@ describe('compiler compliance: directives', () => { const result = compile(files, angularFiles); const source = result.source; - expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); + expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp'); }); @@ -392,7 +392,7 @@ describe('compiler compliance: directives', () => { // MyComponent definition should be: const MyComponentDefinition = ` … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ … consts: [[${AttributeMarker.Bindings}, "someDirective"]], template: function MyComponent_Template(rf, ctx) { @@ -411,7 +411,7 @@ describe('compiler compliance: directives', () => { const result = compile(files, angularFiles); const source = result.source; - expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); + expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp'); }); }); diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_input_outputs_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_input_outputs_spec.ts index 97dadc1562..8340923e42 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_input_outputs_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_input_outputs_spec.ts @@ -52,7 +52,7 @@ describe('compiler compliance: listen()', () => { }; const componentDef = ` - MyComponent.ngComponentDef = IDENT.ɵɵdefineComponent({ + MyComponent.ɵcmp = IDENT.ɵɵdefineComponent({ … inputs:{ componentInput: "componentInput", diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts index 52fbc38af2..200cc5d1fe 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts @@ -195,7 +195,7 @@ describe('compiler compliance: listen()', () => { const MyComponentDefinition = ` const $e2_refs$ = ["user", ""]; … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 4, @@ -226,7 +226,7 @@ describe('compiler compliance: listen()', () => { const result = compile(files, angularFiles); const source = result.source; - expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef'); + expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ɵcmp'); expectEmit(source, MyComponentFactory, 'Incorrect MyComponent.ngFactoryDef'); }); diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_providers_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_providers_spec.ts index bcbf2b29a2..f60c856133 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_providers_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_providers_spec.ts @@ -145,7 +145,7 @@ describe('compiler compliance: providers', () => { export class MyComponent { } MyComponent.ngFactoryDef = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; - MyComponent.ngComponentDef = i0.ɵɵdefineComponent({ + MyComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 1, diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts index 457dbda594..ac49d283a8 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts @@ -95,7 +95,7 @@ describe('compiler compliance: styling', () => { }; const template = ` - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ … styles: ["div.cool { color: blue; }", ":host.nice p { color: gold; }"], encapsulation: 1 @@ -128,7 +128,7 @@ describe('compiler compliance: styling', () => { }; const template = ` - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors:[["my-component"]], decls: 0, @@ -167,7 +167,7 @@ describe('compiler compliance: styling', () => { }; const template = ` - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors:[["my-component"]], decls: 0, @@ -209,7 +209,7 @@ describe('compiler compliance: styling', () => { const template = ` … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ … decls: 3, vars: 3, @@ -270,7 +270,7 @@ describe('compiler compliance: styling', () => { const template = ` … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ … decls: 1, vars: 1, @@ -502,7 +502,7 @@ describe('compiler compliance: styling', () => { const template = ` … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors:[["my-component"]], decls: 1, @@ -550,7 +550,7 @@ describe('compiler compliance: styling', () => { }; const template = ` - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 1, @@ -696,7 +696,7 @@ describe('compiler compliance: styling', () => { const template = ` … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors:[["my-component"]], decls: 1, @@ -745,7 +745,7 @@ describe('compiler compliance: styling', () => { const template = ` … - MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ + MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({ type: MyComponent, selectors:[["my-component"]], decls: 1, diff --git a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts index a91c8abf49..8ddfc0ad9c 100644 --- a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts +++ b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts @@ -205,14 +205,14 @@ runInEachFileSystem(os => { env.driveMain(); const jsContents = env.getContents('test.js'); - expect(jsContents).toContain('TestCmp.ngComponentDef = i0.ɵɵdefineComponent'); + expect(jsContents).toContain('TestCmp.ɵcmp = i0.ɵɵdefineComponent'); expect(jsContents).toContain('TestCmp.ngFactoryDef = function'); expect(jsContents).not.toContain('__decorate'); const dtsContents = env.getContents('test.d.ts'); expect(dtsContents) .toContain( - 'static ngComponentDef: i0.ɵɵComponentDefWithMeta'); + 'static ɵcmp: i0.ɵɵComponentDefWithMeta'); expect(dtsContents).toContain('static ngFactoryDef: i0.ɵɵFactoryDef'); }); @@ -230,7 +230,7 @@ runInEachFileSystem(os => { env.driveMain(); const jsContents = env.getContents('test.js'); - expect(jsContents).toContain('TestCmp.ngComponentDef = i0.ɵɵdefineComponent'); + expect(jsContents).toContain('TestCmp.ɵcmp = i0.ɵɵdefineComponent'); expect(jsContents).toContain('TestCmp.ngFactoryDef = function'); expect(jsContents).not.toContain('__decorate'); @@ -238,7 +238,7 @@ runInEachFileSystem(os => { expect(dtsContents) .toContain( - 'static ngComponentDef: i0.ɵɵComponentDefWithMeta'); + 'static ɵcmp: i0.ɵɵComponentDefWithMeta'); expect(dtsContents).toContain('static ngFactoryDef: i0.ɵɵFactoryDef'); }); @@ -259,14 +259,14 @@ runInEachFileSystem(os => { env.driveMain(); const jsContents = env.getContents('test.js'); - expect(jsContents).toContain('TestCmp.ngComponentDef = i0.ɵɵdefineComponent'); + expect(jsContents).toContain('TestCmp.ɵcmp = i0.ɵɵdefineComponent'); expect(jsContents).toContain('TestCmp.ngFactoryDef = function'); expect(jsContents).not.toContain('__decorate'); const dtsContents = env.getContents('test.d.ts'); expect(dtsContents) .toContain( - 'static ngComponentDef: i0.ɵɵComponentDefWithMeta'); + 'static ɵcmp: i0.ɵɵComponentDefWithMeta'); expect(dtsContents).toContain('static ngFactoryDef: i0.ɵɵFactoryDef'); }); @@ -310,7 +310,7 @@ runInEachFileSystem(os => { env.driveMain(); const jsContents = env.getContents('test.js'); - expect(jsContents).toContain('/** @nocollapse */ TestCmp.ngComponentDef'); + expect(jsContents).toContain('/** @nocollapse */ TestCmp.ɵcmp'); }); } @@ -372,7 +372,7 @@ runInEachFileSystem(os => { const jsContents = env.getContents('test.js'); expect(jsContents).toContain('TestBase.ngBaseDef = i0.ɵɵdefineBase'); - expect(jsContents).toContain('TestComponent.ngComponentDef = i0.ɵɵdefineComponent'); + expect(jsContents).toContain('TestComponent.ɵcmp = i0.ɵɵdefineComponent'); expect(jsContents).toContain('TestDirective.ngDirectiveDef = i0.ɵɵdefineDirective'); expect(jsContents).toContain('TestPipe.ngPipeDef = i0.ɵɵdefinePipe'); expect(jsContents).toContain('TestInjectable.ngInjectableDef = i0.ɵɵdefineInjectable'); @@ -509,7 +509,7 @@ runInEachFileSystem(os => { const dtsContents = env.getContents('test.d.ts'); expect(dtsContents) .toContain( - 'static ngComponentDef: i0.ɵɵComponentDefWithMeta'); + 'static ɵcmp: i0.ɵɵComponentDefWithMeta'); expect(dtsContents) .toContain( 'static ngModuleDef: i0.ɵɵNgModuleDefWithMeta'); @@ -602,7 +602,7 @@ runInEachFileSystem(os => { import {ɵɵComponentDefWithMeta, ModuleWithProviders, ɵɵNgModuleDefWithMeta} from '@angular/core'; export declare class RouterComp { - static ngComponentDef: ɵɵComponentDefWithMeta + static ɵcmp: ɵɵComponentDefWithMeta } declare class RouterModule { @@ -1179,7 +1179,7 @@ runInEachFileSystem(os => { const dtsContents = env.getContents('test.d.ts'); // Validate that each class has the primary definition. - expect(jsContents).toContain('TestCmp.ngComponentDef ='); + expect(jsContents).toContain('TestCmp.ɵcmp ='); expect(jsContents).toContain('TestDir.ngDirectiveDef ='); expect(jsContents).toContain('TestPipe.ngPipeDef ='); expect(jsContents).toContain('TestNgModule.ngModuleDef ='); diff --git a/packages/compiler/design/architecture.md b/packages/compiler/design/architecture.md index f8e76773b5..1528e13c9f 100644 --- a/packages/compiler/design/architecture.md +++ b/packages/compiler/design/architecture.md @@ -11,7 +11,7 @@ This document details the new architecture of the Angular compiler in a post-Ivy Broadly speaking, The Ivy model is that Angular decorators (`@Injectable`, etc) are compiled to static properties on the classes (`ngInjectableDef`). This operation must take place without global program knowledge, and in most cases only with knowledge of that single decorator. -The one exception is `@Component`, which requires knowledge of the metadata from the `@NgModule` which declares the component in order to properly generate the `ngComponentDef`. In particular, the selectors which are applicable during compilation of a component template are determined by the module that declares that component, and the transitive closure of the exports of that module's imports. +The one exception is `@Component`, which requires knowledge of the metadata from the `@NgModule` which declares the component in order to properly generate the component def (`ɵcmp`). In particular, the selectors which are applicable during compilation of a component template are determined by the module that declares that component, and the transitive closure of the exports of that module's imports. Going forward, this will be the model by which Angular code will be compiled, shipped to NPM, and eventually bundled into applications. @@ -81,7 +81,7 @@ In `ngtsc` this is instead emitted as, ```js const i0 = require("@angular/core"); class GreetComponent {} -GreetComponent.ngComponentDef = i0.ɵɵdefineComponent({ +GreetComponent.ɵcmp = i0.ɵɵdefineComponent({ type: GreetComponent, tag: 'greet', factory: () => new GreetComponent(), @@ -104,7 +104,7 @@ and the `.d.ts` contains: ```ts import * as i0 from '@angular/core'; export class GreetComponent { - static ngComponentDef: i0.NgComponentDef< + static ɵcmp: i0.NgComponentDef< GreetComponent, 'greet', {input: 'input'} @@ -113,7 +113,7 @@ export class GreetComponent { ``` The information needed by reference inversion and type-checking is included in -the type declaration of the `ngComponentDef` in the `.d.ts`. +the type declaration of the `ɵcmp` in the `.d.ts`. #### TypeScript architecture @@ -171,7 +171,7 @@ There are also a list of helper decorators that make the `@Component` and `@Dire Each of the class decorators can be thought of as class transformers that take the declared class and transform it, possibly using information from the helper decorators, to produce an Angular class. The JIT compiler performs this transformation at runtime. The AoT compiler performs this transformation at compile time. -Each of the class decorators' class transformer creates a corresponding static member on the class that describes to the runtime how to use the class. For example, the `@Component` decorator creates an `ngComponentDef` static member, `@Directive` create an `ngDirectiveDef`, etc. Internally, these class transformers are called a "Compiler". Most of the compilers are straight forward translations of the metadata specified in the decorator to the information provided in the corresponding definition and, therefore, do not require anything outside the source file to perform the conversion. However, the component, during production builds and for type checking a template require the module scope of the component which requires information from other files in the program. +Each of the class decorators' class transformer creates a corresponding static member on the class that describes to the runtime how to use the class. For example, the `@Component` decorator creates a `ɵcmp` static member, `@Directive` create an `ngDirectiveDef`, etc. Internally, these class transformers are called a "Compiler". Most of the compilers are straight forward translations of the metadata specified in the decorator to the information provided in the corresponding definition and, therefore, do not require anything outside the source file to perform the conversion. However, the component, during production builds and for type checking a template require the module scope of the component which requires information from other files in the program. #### Compiler design diff --git a/packages/compiler/design/separate_compilation.md b/packages/compiler/design/separate_compilation.md index 7969c8c67f..39beaafa26 100644 --- a/packages/compiler/design/separate_compilation.md +++ b/packages/compiler/design/separate_compilation.md @@ -39,7 +39,7 @@ The mental model of Ivy is that the decorator is the compiler. That is the decorator can be thought of as parameters to a class transformer that transforms the class by generating definitions based on the decorator parameters. An `@Component` decorator transforms the class by adding -an `ngComponentDef` static property, `@Directive` adds `ngDirectiveDef`, +a `ɵcmp` static property, `@Directive` adds `ngDirectiveDef`, `@Pipe` adds `ngPipeDef`, etc. In most cases values supplied to the decorator is sufficient to generate the definition. However, in the case of interpreting the template, the compiler needs to know the selector defined for @@ -65,7 +65,7 @@ class: | field | destination | |---------------------|-----------------------| | `type` | implicit | -| `isComponent` | `ngComponentDef` | +| `isComponent` | `ɵcmp` | | `selector` | `ngModuleScope` | | `exportAs` | `ngDirectiveDef` | | `inputs` | `ngDirectiveDef` | @@ -74,20 +74,20 @@ class: | `hostProperties` | `ngDirectiveDef` | | `hostAttributes` | `ngDirectiveDef` | | `providers` | `ngInjectorDef` | -| `viewProviders` | `ngComponentDef` | +| `viewProviders` | `ɵcmp` | | `queries` | `ngDirectiveDef` | | `guards` | not used | -| `viewQueries` | `ngComponentDef` | +| `viewQueries` | `ɵcmp` | | `entryComponents` | not used | -| `changeDetection` | `ngComponentDef` | -| `template` | `ngComponentDef` | +| `changeDetection` | `ɵcmp` | +| `template` | `ɵcmp` | | `componentViewType` | not used | | `renderType` | not used | | `componentFactory` | not used | Only one definition is generated per class. All components are directives so a -`ngComponentDef` contains all the `ngDirectiveDef` information. All directives -are injectable so `ngComponentDef` and `ngDirectiveDef` contain `ngInjectableDef` +`ɵcmp` contains all the `ngDirectiveDef` information. All directives +are injectable so `ɵcmp` and `ngDirectiveDef` contain `ngInjectableDef` information. For `CompilePipeSummary` the table looks like: @@ -126,9 +126,9 @@ reexported from the index. The metadata for a class in ivy is transformed to be what the metadata of the transformed .js file produced by the ivy compiler would be. For example, a -component's `@Component` is removed by the compiler and replaced by a `ngComponentDef`. +component's `@Component` is removed by the compiler and replaced by a `ɵcmp`. The `.metadata.json` file is similarly transformed but the content of the -value assigned is elided (e.g. `"ngComponentDef": {}`). The compiler doesn't +value assigned is elided (e.g. `"ɵcmp": {}`). The compiler doesn't record the selector declared for a component but it is needed to produce the `ngModuleScope` so the information is recorded as if a static field `ngSelector` was declared on class with the value of the `selector` field @@ -141,7 +141,7 @@ The following transformations are performed: The metadata for a component is transformed by: 1. Removing the `@Component` directive. -2. Add `"ngComponentDef": {}` static field. +2. Add `"ɵcmp": {}` static field. 3. Add `"ngSelector": ` static field. ##### Example @@ -161,7 +161,7 @@ export class MyComponent { ```js export class MyComponent { name: string; - static ngComponentDef = ɵɵdefineComponent({...}); + static ɵcmp = ɵɵdefineComponent({...}); } ``` @@ -174,7 +174,7 @@ export class MyComponent { "MyComponent": { "__symbolic": "class", "statics": { - "ngComponentDef": {}, + "ɵcmp": {}, "ngSelector": "my-comp" } } diff --git a/packages/compiler/src/constant_pool.ts b/packages/compiler/src/constant_pool.ts index f5eea86e01..efde19a72e 100644 --- a/packages/compiler/src/constant_pool.ts +++ b/packages/compiler/src/constant_pool.ts @@ -200,7 +200,7 @@ export class ConstantPool { public propertyNameOf(kind: DefinitionKind): string { switch (kind) { case DefinitionKind.Component: - return 'ngComponentDef'; + return 'ɵcmp'; case DefinitionKind.Directive: return 'ngDirectiveDef'; case DefinitionKind.Injector: diff --git a/packages/core/src/core_render3_private_export.ts b/packages/core/src/core_render3_private_export.ts index 81ea351910..526224a275 100644 --- a/packages/core/src/core_render3_private_export.ts +++ b/packages/core/src/core_render3_private_export.ts @@ -221,7 +221,7 @@ export { export { NG_ELEMENT_ID as ɵNG_ELEMENT_ID, - NG_COMPONENT_DEF as ɵNG_COMPONENT_DEF, + NG_COMP_DEF as ɵNG_COMP_DEF, NG_DIRECTIVE_DEF as ɵNG_DIRECTIVE_DEF, NG_PIPE_DEF as ɵNG_PIPE_DEF, NG_MODULE_DEF as ɵNG_MODULE_DEF, diff --git a/packages/core/src/metadata/resource_loading.ts b/packages/core/src/metadata/resource_loading.ts index c9ae16a81b..0aed1c1cd3 100644 --- a/packages/core/src/metadata/resource_loading.ts +++ b/packages/core/src/metadata/resource_loading.ts @@ -87,7 +87,7 @@ export function resolveComponentResources( let componentResourceResolutionQueue = new Map, Component>(); -// Track when existing ngComponentDef for a Type is waiting on resources. +// Track when existing ɵcmp for a Type is waiting on resources. const componentDefPendingResolution = new Set>(); export function maybeQueueResolutionOfComponentResources(type: Type, metadata: Component) { @@ -128,4 +128,4 @@ function unwrapResponse(response: string | {text(): Promise}): string|Pr function componentDefResolved(type: Type): void { componentDefPendingResolution.delete(type); -} \ No newline at end of file +} diff --git a/packages/core/src/render3/VIEW_DATA.md b/packages/core/src/render3/VIEW_DATA.md index 0ada819d25..29c9ab597c 100644 --- a/packages/core/src/render3/VIEW_DATA.md +++ b/packages/core/src/render3/VIEW_DATA.md @@ -36,7 +36,7 @@ The size of the `DECLS` section is declared in the property `decls` of the compo }) class MyApp { - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ ..., decls: 5, template: function(rf: RenderFlags, ctx: MyApp) { @@ -87,7 +87,7 @@ The size of the `VARS `section is declared in the property `vars` of the compone class MyApp { name = 'World'; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ ..., decls: 2, // Two DOM Elements. vars: 2, // Two bindings. @@ -140,7 +140,7 @@ Examples include: }) class MyApp { - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ ..., decls: 1, template: function(rf: RenderFlags, ctx: MyApp) { @@ -160,7 +160,7 @@ class MyApp { }) class Child { @HostBinding('tooltip') hostTitle = 'Hello World!'; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ ... hostVars: 1 }); @@ -204,8 +204,8 @@ The `EXPANDO` section needs additional information for information stored in `TV | ----: | ---------------------------: | ------- | 0 | -10 | Negative numbers signify pointers to elements. In this case 10 (``) | 1 | 2 | Injector size. Number of values to skip to get to Host Bindings. -| 2 | Child.ngComponentDef.hostBindings | The function to call. (Only when `hostVars` is not `0`) -| 3 | Child.ngComponentDef.hostVars | Number of host bindings to process. (Only when `hostVars` is not `0`) +| 2 | Child.ɵcmp.hostBindings | The function to call. (Only when `hostVars` is not `0`) +| 3 | Child.ɵcmp.hostVars | Number of host bindings to process. (Only when `hostVars` is not `0`) | 4 | Tooltip.ngDirectiveDef.hostBindings | The function to call. (Only when `hostVars` is not `0`) | 5 | Tooltip.ngDirectiveDef.hostVars | Number of host bindings to process. (Only when `hostVars` is not `0`) @@ -242,9 +242,9 @@ The above code should execute as: | (initial) | `11` | `-1` | `-1` | `-10` | `19` | `\* new Child() *\ 19` | `\* *\ 10` | `2` | `21` | `\* new Child() *\ 19` | `\* *\ 10` -| `Child.ngComponentDef.hostBindings` | invoke with => | `\* new Child() *\ 19` | `\* *\ 10` +| `Child.ɵcmp.hostBindings` | invoke with => | `\* new Child() *\ 19` | `\* *\ 10` | | `21` | `\* new Tooltip() *\ 20` | `\* *\ 10` -| `Child.ngComponentDef.hostVars` | `22` | `\* new Tooltip() *\ 20` | `\* *\ 10` +| `Child.ɵcmp.hostVars` | `22` | `\* new Tooltip() *\ 20` | `\* *\ 10` | `Tooltip.ngDirectiveDef.hostBindings` | invoke with => | `\* new Tooltip() *\ 20` | `\* *\ 10` | | `22` | `21` | `\* *\ 10` | `Tooltip.ngDirectiveDef.hostVars` | `22` | `21` | `\* *\ 10` @@ -274,7 +274,7 @@ Injection tokens are sorted into three sections: }) class MyApp { - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ ..., decls: 1, template: function(rf: RenderFlags, ctx: MyApp) { @@ -302,7 +302,7 @@ class MyApp { }) class Child { construction(injector: Injector) {} - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ ... features: [ ProvidesFeature( @@ -331,7 +331,7 @@ The above will create the following layout: | `EXPANDO` | 11..18| cumulativeBloom | templateBloom | | *sub-section: `component` and `directives`* -| 19 | `factory(Child.ngComponentDef.factory)`* | `Child` +| 19 | `factory(Child.ɵcmp.factory)`* | `Child` | | *sub-section: `providers`* | 20 | `factory(ServiceA.ngInjectableDef.factory)`* | `ServiceA` | 22 | `'someServiceBValue'`* | `ServiceB` diff --git a/packages/core/src/render3/assert.ts b/packages/core/src/render3/assert.ts index 10644d102b..71ab4fee95 100644 --- a/packages/core/src/render3/assert.ts +++ b/packages/core/src/render3/assert.ts @@ -21,8 +21,7 @@ export function assertTNodeForLView(tNode: TNode, lView: LView) { export function assertComponentType( actual: any, - msg: string = - 'Type passed in is not ComponentType, it does not have \'ngComponentDef\' property.') { + msg: string = 'Type passed in is not ComponentType, it does not have \'ɵcmp\' property.') { if (!getComponentDef(actual)) { throwError(msg); } diff --git a/packages/core/src/render3/context_discovery.ts b/packages/core/src/render3/context_discovery.ts index 46931c4609..04e0e8f7d2 100644 --- a/packages/core/src/render3/context_discovery.ts +++ b/packages/core/src/render3/context_discovery.ts @@ -178,7 +178,7 @@ export function attachPatchData(target: any, data: LView | LContext) { } export function isComponentInstance(instance: any): boolean { - return instance && instance.constructor && instance.constructor.ngComponentDef; + return instance && instance.constructor && instance.constructor.ɵcmp; } export function isDirectiveInstance(instance: any): boolean { diff --git a/packages/core/src/render3/definition.ts b/packages/core/src/render3/definition.ts index 74d9d8d7cc..f71737daf9 100644 --- a/packages/core/src/render3/definition.ts +++ b/packages/core/src/render3/definition.ts @@ -16,7 +16,7 @@ import {initNgDevMode} from '../util/ng_dev_mode'; import {stringify} from '../util/stringify'; import {EMPTY_ARRAY, EMPTY_OBJ} from './empty'; -import {NG_BASE_DEF, NG_COMPONENT_DEF, NG_DIRECTIVE_DEF, NG_FACTORY_DEF, NG_LOCALE_ID_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from './fields'; +import {NG_BASE_DEF, NG_COMP_DEF, NG_DIRECTIVE_DEF, NG_FACTORY_DEF, NG_LOCALE_ID_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from './fields'; import {ComponentDef, ComponentDefFeature, ComponentTemplate, ComponentType, ContentQueriesFunction, DirectiveDef, DirectiveDefFeature, DirectiveType, DirectiveTypesOrFactory, FactoryFn, HostBindingsFunction, PipeDef, PipeType, PipeTypesOrFactory, ViewQueriesFunction, ɵɵBaseDef} from './interfaces/definition'; import {TAttributes} from './interfaces/node'; // while SelectorFlags is unused here, it's required so that types don't get resolved lazily @@ -34,7 +34,7 @@ let _renderCompCount = 0; * class MyDirective { * // Generated by Angular Template Compiler * // [Symbol] syntax will not be supported by TypeScript until v2.7 - * static ngComponentDef = defineComponent({ + * static ɵcmp = defineComponent({ * ... * }); * } @@ -314,7 +314,7 @@ export function ɵɵdefineComponent(componentDefinition: { */ export function ɵɵsetComponentScope( type: ComponentType, directives: Type[], pipes: Type[]): void { - const def = (type.ngComponentDef as ComponentDef); + const def = (type.ɵcmp as ComponentDef); def.directiveDefs = () => directives.map(extractDirectiveDef); def.pipeDefs = () => pipes.map(extractPipeDef); } @@ -740,7 +740,7 @@ export function ɵɵdefinePipe(pipeDef: { */ export function getComponentDef(type: any): ComponentDef|null { - return type[NG_COMPONENT_DEF] || null; + return type[NG_COMP_DEF] || null; } export function getDirectiveDef(type: any): DirectiveDef|null { diff --git a/packages/core/src/render3/di.ts b/packages/core/src/render3/di.ts index a860087aeb..e6581f91fa 100644 --- a/packages/core/src/render3/di.ts +++ b/packages/core/src/render3/di.ts @@ -255,7 +255,7 @@ export function diPublicInInjector( * * Then factory method generated is: * ``` - * MyComponent.ngComponentDef = defineComponent({ + * MyComponent.ɵcmp = defineComponent({ * factory: () => new MyComponent(injectAttribute('title')) * ... * }) diff --git a/packages/core/src/render3/features/inherit_definition_feature.ts b/packages/core/src/render3/features/inherit_definition_feature.ts index fdee1c9a2d..e66eacfc61 100644 --- a/packages/core/src/render3/features/inherit_definition_feature.ts +++ b/packages/core/src/render3/features/inherit_definition_feature.ts @@ -15,7 +15,7 @@ import {isComponentDef} from '../interfaces/type_checks'; import {ɵɵNgOnChangesFeature} from './ng_onchanges_feature'; function getSuperType(type: Type): Type& - {ngComponentDef?: ComponentDef, ngDirectiveDef?: DirectiveDef} { + {ɵcmp?: ComponentDef, ngDirectiveDef?: DirectiveDef} { return Object.getPrototypeOf(type.prototype).constructor; } @@ -32,9 +32,9 @@ export function ɵɵInheritDefinitionFeature(definition: DirectiveDef| Comp let superDef: DirectiveDef|ComponentDef|undefined = undefined; if (isComponentDef(definition)) { // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance. - superDef = superType.ngComponentDef || superType.ngDirectiveDef; + superDef = superType.ɵcmp || superType.ngDirectiveDef; } else { - if (superType.ngComponentDef) { + if (superType.ɵcmp) { throw new Error('Directives cannot inherit Components'); } // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance. diff --git a/packages/core/src/render3/features/ng_onchanges_feature.ts b/packages/core/src/render3/features/ng_onchanges_feature.ts index 1b37fc752c..a815609e27 100644 --- a/packages/core/src/render3/features/ng_onchanges_feature.ts +++ b/packages/core/src/render3/features/ng_onchanges_feature.ts @@ -32,7 +32,7 @@ type OnChangesExpando = OnChanges & { * Example usage: * * ``` - * static ngComponentDef = defineComponent({ + * static ɵcmp = defineComponent({ * ... * inputs: {name: 'publicName'}, * features: [NgOnChangesFeature()] diff --git a/packages/core/src/render3/features/providers_feature.ts b/packages/core/src/render3/features/providers_feature.ts index c0e3255a1b..20bad6c88f 100644 --- a/packages/core/src/render3/features/providers_feature.ts +++ b/packages/core/src/render3/features/providers_feature.ts @@ -18,7 +18,7 @@ import {DirectiveDef} from '../interfaces/definition'; * class ComponentWithProviders { * constructor(private greeter: GreeterDE) {} * - * static ngComponentDef = defineComponent({ + * static ɵcmp = defineComponent({ * type: ComponentWithProviders, * selectors: [['component-with-providers']], * factory: () => new ComponentWithProviders(directiveInject(GreeterDE as any)), diff --git a/packages/core/src/render3/fields.ts b/packages/core/src/render3/fields.ts index 54799295ef..9f9a2fb303 100644 --- a/packages/core/src/render3/fields.ts +++ b/packages/core/src/render3/fields.ts @@ -8,7 +8,7 @@ import {getClosureSafeProperty} from '../util/property'; -export const NG_COMPONENT_DEF = getClosureSafeProperty({ngComponentDef: getClosureSafeProperty}); +export const NG_COMP_DEF = getClosureSafeProperty({ɵcmp: getClosureSafeProperty}); export const NG_DIRECTIVE_DEF = getClosureSafeProperty({ngDirectiveDef: getClosureSafeProperty}); export const NG_PIPE_DEF = getClosureSafeProperty({ngPipeDef: getClosureSafeProperty}); export const NG_MODULE_DEF = getClosureSafeProperty({ngModuleDef: getClosureSafeProperty}); diff --git a/packages/core/src/render3/i18n.md b/packages/core/src/render3/i18n.md index f0469261a9..f58e4587d6 100644 --- a/packages/core/src/render3/i18n.md +++ b/packages/core/src/render3/i18n.md @@ -73,7 +73,7 @@ function MyComponent_NgIf_Template_0(rf: RenderFlags, ctx: any) { } class MyComponent { - static ngComponentDef = defineComponent({ + static ɵcmp = defineComponent({ ..., template: function(rf: RenderFlags, ctx: MyComponent) { if (rf & RenderFlags.Create) { @@ -329,7 +329,7 @@ function MyComponent_NgIf_Template_2(rf: RenderFlags, ctx: any) { } class MyComponent { - static ngComponentDef = defineComponent({ + static ɵcmp = defineComponent({ ..., template: function(rf: RenderFlags, ctx: MyComponent) { if (rf & RenderFlags.Create) { @@ -670,7 +670,7 @@ const MSG_title = `You have {�0�, plural, const MSG_div_attr = ['title', MSG_title, optionalSanitizerFn]; class MyComponent { - static ngComponentDef = defineComponent({ + static ɵcmp = defineComponent({ ..., template: function(rf: RenderFlags, ctx: MyComponent) { if (rf & RenderFlags.Create) { @@ -911,7 +911,7 @@ const MSG_nested = ` class MyComponent { count: number; animal: string; - static ngComponentDef = defineComponent({ + static ɵcmp = defineComponent({ ..., template: function(rf: RenderFlags, ctx: MyComponent) { if (rf & RenderFlags.Create) { @@ -1068,7 +1068,7 @@ if (CLOSURE) { const MSG_div_attr = ['title', MSG_hello]; class MyComponent { - static ngComponentDef = defineComponent({ + static ɵcmp = defineComponent({ ..., template: function(rf: RenderFlags, ctx: MyComponent) { if (rf & RenderFlags.Create) { diff --git a/packages/core/src/render3/interfaces/definition.ts b/packages/core/src/render3/interfaces/definition.ts index 88d0749f33..1789867568 100644 --- a/packages/core/src/render3/interfaces/definition.ts +++ b/packages/core/src/render3/interfaces/definition.ts @@ -69,10 +69,10 @@ export const enum RenderFlags { } /** - * A subclass of `Type` which has a static `ngComponentDef`:`ComponentDef` field making it + * A subclass of `Type` which has a static `ɵcmp`:`ComponentDef` field making it * consumable for rendering. */ -export interface ComponentType extends Type { ngComponentDef: never; } +export interface ComponentType extends Type { ɵcmp: never; } /** * A subclass of `Type` which has a static `ngDirectiveDef`:`DirectiveDef` field making it diff --git a/packages/core/src/render3/jit/directive.ts b/packages/core/src/render3/jit/directive.ts index 2c846dff8e..26af0adb67 100644 --- a/packages/core/src/render3/jit/directive.ts +++ b/packages/core/src/render3/jit/directive.ts @@ -18,7 +18,7 @@ import {ViewEncapsulation} from '../../metadata/view'; import {initNgDevMode} from '../../util/ng_dev_mode'; import {getBaseDef, getComponentDef, getDirectiveDef} from '../definition'; import {EMPTY_ARRAY, EMPTY_OBJ} from '../empty'; -import {NG_BASE_DEF, NG_COMPONENT_DEF, NG_DIRECTIVE_DEF, NG_FACTORY_DEF} from '../fields'; +import {NG_BASE_DEF, NG_COMP_DEF, NG_DIRECTIVE_DEF, NG_FACTORY_DEF} from '../fields'; import {ComponentType} from '../interfaces/definition'; import {stringifyForError} from '../util/misc_utils'; @@ -29,11 +29,11 @@ import {flushModuleScopingQueueAsMuchAsPossible, patchComponentDefWithScope, tra /** * Compile an Angular component according to its decorator metadata, and patch the resulting - * ngComponentDef onto the component type. + * component def (ɵcmp) onto the component type. * * Compilation may be asynchronous (due to the need to resolve URLs for the component template or * other resources, for example). In the event that compilation is not immediate, `compileComponent` - * will enqueue resource resolution into a global queue and will fail to return the `ngComponentDef` + * will enqueue resource resolution into a global queue and will fail to return the `ɵcmp` * until the global queue has been resolved with a call to `resolveComponentResources`. */ export function compileComponent(type: Type, metadata: Component): void { @@ -51,7 +51,7 @@ export function compileComponent(type: Type, metadata: Component): void { // because we'd have to resolve the asynchronous templates. addDirectiveFactoryDef(type, metadata); - Object.defineProperty(type, NG_COMPONENT_DEF, { + Object.defineProperty(type, NG_COMP_DEF, { get: () => { if (ngComponentDef === null) { const compiler = getCompilerFacade(); diff --git a/packages/core/src/render3/jit/module.ts b/packages/core/src/render3/jit/module.ts index e4c8357a02..7d3d5b9ce9 100644 --- a/packages/core/src/render3/jit/module.ts +++ b/packages/core/src/render3/jit/module.ts @@ -16,7 +16,7 @@ import {ModuleWithProviders, NgModule, NgModuleDef, NgModuleTransitiveScopes} fr import {deepForEach, flatten} from '../../util/array_utils'; import {assertDefined} from '../../util/assert'; import {getComponentDef, getDirectiveDef, getNgModuleDef, getPipeDef} from '../definition'; -import {NG_COMPONENT_DEF, NG_DIRECTIVE_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from '../fields'; +import {NG_COMP_DEF, NG_DIRECTIVE_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from '../fields'; import {ComponentDef} from '../interfaces/definition'; import {NgModuleType} from '../ng_module_ref'; import {maybeUnwrapFn, stringifyForError} from '../util/misc_utils'; @@ -373,7 +373,7 @@ function computeCombinedExports(type: Type): Type[] { /** * Some declared components may be compiled asynchronously, and thus may not have their - * ngComponentDef set yet. If this is the case, then a reference to the module is written into + * ɵcmp set yet. If this is the case, then a reference to the module is written into * the `ngSelectorScope` property of the declared type. */ function setScopeOnDeclaredComponents(moduleType: Type, ngModule: NgModule) { @@ -382,9 +382,9 @@ function setScopeOnDeclaredComponents(moduleType: Type, ngModule: NgModule) const transitiveScopes = transitiveScopesFor(moduleType); declarations.forEach(declaration => { - if (declaration.hasOwnProperty(NG_COMPONENT_DEF)) { - // An `ngComponentDef` field exists - go ahead and patch the component directly. - const component = declaration as Type& {ngComponentDef: ComponentDef}; + if (declaration.hasOwnProperty(NG_COMP_DEF)) { + // A `ɵcmp` field exists - go ahead and patch the component directly. + const component = declaration as Type& {ɵcmp: ComponentDef}; const componentDef = getComponentDef(component) !; patchComponentDefWithScope(componentDef, transitiveScopes); } else if ( @@ -404,8 +404,8 @@ export function patchComponentDefWithScope( componentDef.directiveDefs = () => Array.from(transitiveScopes.compilation.directives) .map( - dir => dir.hasOwnProperty(NG_COMPONENT_DEF) ? getComponentDef(dir) ! : - getDirectiveDef(dir) !) + dir => + dir.hasOwnProperty(NG_COMP_DEF) ? getComponentDef(dir) ! : getDirectiveDef(dir) !) .filter(def => !!def); componentDef.pipeDefs = () => Array.from(transitiveScopes.compilation.pipes).map(pipe => getPipeDef(pipe) !); @@ -455,7 +455,7 @@ export function transitiveScopesFor( if (getPipeDef(declaredWithDefs)) { scopes.compilation.pipes.add(declared); } else { - // Either declared has an ngComponentDef or ngDirectiveDef, or it's a component which hasn't + // Either declared has a ɵcmp or ngDirectiveDef, or it's a component which hasn't // had its template compiled yet. In either case, it gets added to the compilation's // directives. scopes.compilation.directives.add(declared); @@ -486,14 +486,14 @@ export function transitiveScopesFor( maybeUnwrapFn(def.exports).forEach((exported: Type) => { const exportedType = exported as Type& { // Components, Directives, NgModules, and Pipes can all be exported. - ngComponentDef?: any; + ɵcmp?: any; ngDirectiveDef?: any; ngModuleDef?: NgModuleDef; ngPipeDef?: any; }; - // Either the type is a module, a pipe, or a component/directive (which may not have an - // ngComponentDef as it might be compiled asynchronously). + // Either the type is a module, a pipe, or a component/directive (which may not have a + // ɵcmp as it might be compiled asynchronously). if (isNgModule(exportedType)) { // When this module exports another, the exported module's exported directives and pipes are // added to both the compilation and exported scopes of this module. diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json index 06e787207c..14fbbb84fe 100644 --- a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json +++ b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json @@ -66,7 +66,7 @@ "name": "NEXT" }, { - "name": "NG_COMPONENT_DEF" + "name": "NG_COMP_DEF" }, { "name": "NG_DIRECTIVE_DEF" diff --git a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json index 6480466e0c..638982c333 100644 --- a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json +++ b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json @@ -60,7 +60,7 @@ "name": "NEXT" }, { - "name": "NG_COMPONENT_DEF" + "name": "NG_COMP_DEF" }, { "name": "NG_DIRECTIVE_DEF" diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json index 251a879e93..04672e5461 100644 --- a/packages/core/test/bundling/todo/bundle.golden_symbols.json +++ b/packages/core/test/bundling/todo/bundle.golden_symbols.json @@ -123,7 +123,7 @@ "name": "NEXT" }, { - "name": "NG_COMPONENT_DEF" + "name": "NG_COMP_DEF" }, { "name": "NG_DIRECTIVE_DEF" diff --git a/packages/core/test/linker/ng_module_integration_spec.ts b/packages/core/test/linker/ng_module_integration_spec.ts index 8b8aa19dd7..e54fd8074a 100644 --- a/packages/core/test/linker/ng_module_integration_spec.ts +++ b/packages/core/test/linker/ng_module_integration_spec.ts @@ -125,7 +125,7 @@ function declareTests(config?: {useJit: boolean}) { } function createComp(compType: Type, moduleType: Type): ComponentFixture { - const componentDef = (compType as any).ngComponentDef; + const componentDef = (compType as any).ɵcmp; if (componentDef) { // Since we avoid Components/Directives/Pipes recompiling in case there are no overrides, we // may face a problem where previously compiled defs available to a given diff --git a/packages/core/test/metadata/resource_loading_spec.ts b/packages/core/test/metadata/resource_loading_spec.ts index f6202e6e1b..c27f8a5f3e 100644 --- a/packages/core/test/metadata/resource_loading_spec.ts +++ b/packages/core/test/metadata/resource_loading_spec.ts @@ -18,7 +18,7 @@ describe('resource_loading', () => { it('should throw an error when compiling component that has unresolved templateUrl', () => { const MyComponent: ComponentType = (class MyComponent{}) as any; compileComponent(MyComponent, {templateUrl: 'someUrl'}); - expect(() => MyComponent.ngComponentDef).toThrowError(` + expect(() => MyComponent.ɵcmp).toThrowError(` Component 'MyComponent' is not resolved: - templateUrl: someUrl Did you run and wait for 'resolveComponentResources()'?`.trim()); @@ -27,7 +27,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim()); it('should throw an error when compiling component that has unresolved styleUrls', () => { const MyComponent: ComponentType = (class MyComponent{}) as any; compileComponent(MyComponent, {styleUrls: ['someUrl1', 'someUrl2']}); - expect(() => MyComponent.ngComponentDef).toThrowError(` + expect(() => MyComponent.ɵcmp).toThrowError(` Component 'MyComponent' is not resolved: - styleUrls: ["someUrl1","someUrl2"] Did you run and wait for 'resolveComponentResources()'?`.trim()); @@ -38,7 +38,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim()); const MyComponent: ComponentType = (class MyComponent{}) as any; compileComponent( MyComponent, {templateUrl: 'someUrl', styleUrls: ['someUrl1', 'someUrl2']}); - expect(() => MyComponent.ngComponentDef).toThrowError(` + expect(() => MyComponent.ɵcmp).toThrowError(` Component 'MyComponent' is not resolved: - templateUrl: someUrl - styleUrls: ["someUrl1","someUrl2"] @@ -64,7 +64,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim()); const metadata: Component = {templateUrl: 'test://content'}; compileComponent(MyComponent, metadata); await resolveComponentResources(testResolver); - expect(MyComponent.ngComponentDef).toBeDefined(); + expect(MyComponent.ɵcmp).toBeDefined(); expect(metadata.template).toBe('content'); expect(resourceFetchCount).toBe(1); }); @@ -74,7 +74,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim()); const metadata: Component = {template: '', styleUrls: ['test://style1', 'test://style2']}; compileComponent(MyComponent, metadata); await resolveComponentResources(testResolver); - expect(MyComponent.ngComponentDef).toBeDefined(); + expect(MyComponent.ɵcmp).toBeDefined(); expect(metadata.styleUrls).toBe(undefined); expect(metadata.styles).toEqual(['style1', 'style2']); expect(resourceFetchCount).toBe(2); @@ -85,7 +85,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim()); const metadata: Component = {template: '', styleUrls: ['test://style1', 'test://style1']}; compileComponent(MyComponent, metadata); await resolveComponentResources(testResolver); - expect(MyComponent.ngComponentDef).toBeDefined(); + expect(MyComponent.ɵcmp).toBeDefined(); expect(metadata.styleUrls).toBe(undefined); expect(metadata.styles).toEqual(['style1', 'style1']); expect(resourceFetchCount).toBe(1); @@ -136,7 +136,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim()); const metadata: Component = {templateUrl: 'test://content'}; compileComponent(MyComponent, metadata); await resolveComponentResources(fetch); - expect(MyComponent.ngComponentDef).toBeDefined(); + expect(MyComponent.ɵcmp).toBeDefined(); expect(metadata.template).toBe('response for test://content'); }); }); diff --git a/packages/core/test/render3/basic_perf.ts b/packages/core/test/render3/basic_perf.ts index 7a8a371501..efe396096b 100644 --- a/packages/core/test/render3/basic_perf.ts +++ b/packages/core/test/render3/basic_perf.ts @@ -34,7 +34,7 @@ describe('iv perf test', () => { it(`${iteration}. create ${count} divs in Render3`, () => { class Component { static ngFactoryDef = () => new Component; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: Component, selectors: [['div']], decls: 1, diff --git a/packages/core/test/render3/change_detection_spec.ts b/packages/core/test/render3/change_detection_spec.ts index f331676993..e3f6f8fe7f 100644 --- a/packages/core/test/render3/change_detection_spec.ts +++ b/packages/core/test/render3/change_detection_spec.ts @@ -26,7 +26,7 @@ describe('change detection', () => { ngDoCheck(): void { this.doCheckCount++; } static ngFactoryDef = () => new MyComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: MyComponent, selectors: [['my-comp']], decls: 2, @@ -102,7 +102,7 @@ describe('change detection', () => { onClick() {} static ngFactoryDef = () => comp = new MyComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: MyComponent, selectors: [['my-comp']], decls: 2, @@ -140,7 +140,7 @@ describe('change detection', () => { onClick() {} static ngFactoryDef = () => comp = new ManualComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ManualComponent, selectors: [['manual-comp']], decls: 2, @@ -176,7 +176,7 @@ describe('change detection', () => { name: string = 'Nancy'; static ngFactoryDef = () => new ManualApp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ManualApp, selectors: [['manual-app']], decls: 1, @@ -231,7 +231,7 @@ describe('change detection', () => { ngDoCheck(): void { this.doCheckCount++; } static ngFactoryDef = () => parent = new ButtonParent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ButtonParent, selectors: [['button-parent']], decls: 2, @@ -308,7 +308,7 @@ describe('change detection', () => { } static ngFactoryDef = () => new MyComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: MyComponent, selectors: [['my-comp']], decls: 1, diff --git a/packages/core/test/render3/component_ref_spec.ts b/packages/core/test/render3/component_ref_spec.ts index f2becf5258..9f88dd4cbc 100644 --- a/packages/core/test/render3/component_ref_spec.ts +++ b/packages/core/test/render3/component_ref_spec.ts @@ -21,7 +21,7 @@ describe('ComponentFactory', () => { it('should correctly populate default properties', () => { class TestComponent { static ngFactoryDef = () => new TestComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: TestComponent, selectors: [['test', 'foo'], ['bar']], decls: 0, @@ -42,7 +42,7 @@ describe('ComponentFactory', () => { it('should correctly populate defined properties', () => { class TestComponent { static ngFactoryDef = () => new TestComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: TestComponent, encapsulation: ViewEncapsulation.None, selectors: [['test', 'foo'], ['bar']], @@ -90,7 +90,7 @@ describe('ComponentFactory', () => { class TestComponent { static ngFactoryDef = () => new TestComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: TestComponent, encapsulation: ViewEncapsulation.None, selectors: [['test']], diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts index 30f55c0295..2dc579b7b5 100644 --- a/packages/core/test/render3/component_spec.ts +++ b/packages/core/test/render3/component_spec.ts @@ -22,7 +22,7 @@ describe('component', () => { increment() { this.count++; } static ngFactoryDef = () => new CounterComponent; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: CounterComponent, encapsulation: ViewEncapsulation.None, selectors: [['counter']], @@ -72,7 +72,7 @@ describe('component', () => { class MyComponent { constructor(public myService: MyService) {} static ngFactoryDef = () => new MyComponent(ɵɵdirectiveInject(MyService)); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: MyComponent, encapsulation: ViewEncapsulation.None, selectors: [['my-component']], @@ -116,7 +116,7 @@ describe('component', () => { name = ''; static ngFactoryDef = () => new Comp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: Comp, selectors: [['comp']], decls: 1, @@ -175,7 +175,7 @@ it('should not invoke renderer destroy method for embedded views', () => { return comp; } - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: Comp, selectors: [['comp']], decls: 3, @@ -248,7 +248,7 @@ describe('component with a container', () => { // TODO(issue/24571): remove '!'. items !: string[]; static ngFactoryDef = () => new WrapperComponent; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: WrapperComponent, encapsulation: ViewEncapsulation.None, selectors: [['wrapper']], @@ -325,7 +325,7 @@ describe('recursive components', () => { ngOnDestroy() { events.push('destroy' + this.data.value); } static ngFactoryDef = () => new TreeComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: TreeComponent, encapsulation: ViewEncapsulation.None, selectors: [['tree-comp']], @@ -375,8 +375,7 @@ describe('recursive components', () => { }); } - (TreeComponent.ngComponentDef as ComponentDef).directiveDefs = - () => [TreeComponent.ngComponentDef]; + (TreeComponent.ɵcmp as ComponentDef).directiveDefs = () => [TreeComponent.ɵcmp]; /** * {{ data.value }} @@ -391,7 +390,7 @@ describe('recursive components', () => { ngOnDestroy() { events.push('destroy' + this.data.value); } static ngFactoryDef = () => new NgIfTree(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: NgIfTree, encapsulation: ViewEncapsulation.None, selectors: [['ng-if-tree']], @@ -438,8 +437,8 @@ describe('recursive components', () => { } } - (NgIfTree.ngComponentDef as ComponentDef).directiveDefs = - () => [NgIfTree.ngComponentDef, NgIf.ngDirectiveDef]; + (NgIfTree.ɵcmp as ComponentDef).directiveDefs = + () => [NgIfTree.ɵcmp, NgIf.ngDirectiveDef]; function _buildTree(currDepth: number): TreeNode { const children = currDepth < 2 ? _buildTree(currDepth + 1) : null; @@ -533,7 +532,7 @@ describe('recursive components', () => { // TODO(issue/24571): remove '!'. minifiedName !: string; static ngFactoryDef = () => new TestInputsComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: TestInputsComponent, encapsulation: ViewEncapsulation.None, selectors: [['test-inputs']], @@ -546,7 +545,7 @@ describe('recursive components', () => { }); } - const testInputsComponentFactory = new ComponentFactory(TestInputsComponent.ngComponentDef); + const testInputsComponentFactory = new ComponentFactory(TestInputsComponent.ɵcmp); expect([ {propName: 'minifiedName', templateName: 'unminifiedName'} diff --git a/packages/core/test/render3/control_flow_spec.ts b/packages/core/test/render3/control_flow_spec.ts index c03825bb85..ba3b3995f8 100644 --- a/packages/core/test/render3/control_flow_spec.ts +++ b/packages/core/test/render3/control_flow_spec.ts @@ -699,7 +699,7 @@ describe('JS control flow', () => { return new Comp(); } - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: Comp, selectors: [['comp']], decls: 0, @@ -713,7 +713,7 @@ describe('JS control flow', () => { condition2 = true; static ngFactoryDef = () => new App(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: App, selectors: [['app']], decls: 3, @@ -769,7 +769,7 @@ describe('JS control flow', () => { return new Comp(); } - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: Comp, selectors: [['comp']], decls: 0, @@ -783,7 +783,7 @@ describe('JS control flow', () => { condition2 = true; static ngFactoryDef = () => new App(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: App, selectors: [['app']], decls: 3, diff --git a/packages/core/test/render3/di_spec.ts b/packages/core/test/render3/di_spec.ts index 8a1968df75..98a63480a6 100644 --- a/packages/core/test/render3/di_spec.ts +++ b/packages/core/test/render3/di_spec.ts @@ -118,7 +118,7 @@ describe('di', () => { constructor(public renderer: Renderer2) {} static ngFactoryDef = () => new MyComp(ɵɵdirectiveInject(Renderer2 as any)); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: MyComp, selectors: [['my-comp']], decls: 1, diff --git a/packages/core/test/render3/instructions_spec.ts b/packages/core/test/render3/instructions_spec.ts index 3082e58628..5c125f06f6 100644 --- a/packages/core/test/render3/instructions_spec.ts +++ b/packages/core/test/render3/instructions_spec.ts @@ -241,7 +241,7 @@ describe('instructions', () => { rows = [['a', 'b'], ['A', 'B'], ['a', 'b'], ['A', 'B']]; static ngFactoryDef = function ToDoAppComponent_Factory() { return new NestedLoops(); }; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: NestedLoops, selectors: [['nested-loops']], decls: 1, diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts index 8e07cc8228..cfe3893741 100644 --- a/packages/core/test/render3/integration_spec.ts +++ b/packages/core/test/render3/integration_spec.ts @@ -118,7 +118,7 @@ describe('render3 integration test', () => { afterTree !: Tree; static ngFactoryDef = () => new ChildComponent; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ selectors: [['child']], type: ChildComponent, decls: 3, @@ -200,7 +200,7 @@ describe('component styles', () => { it('should pass in the component styles directly into the underlying renderer', () => { class StyledComp { static ngFactoryDef = () => new StyledComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: StyledComp, styles: ['div { color: red; }'], decls: 1, @@ -228,7 +228,7 @@ describe('component animations', () => { class AnimComp { static ngFactoryDef = () => new AnimComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: AnimComp, decls: 0, vars: 0, @@ -255,7 +255,7 @@ describe('component animations', () => { it('should include animations in the renderType data array even if the array is empty', () => { class AnimComp { static ngFactoryDef = () => new AnimComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: AnimComp, decls: 0, vars: 0, @@ -275,7 +275,7 @@ describe('component animations', () => { it('should allow [@trigger] bindings to be picked up by the underlying renderer', () => { class AnimComp { static ngFactoryDef = () => new AnimComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: AnimComp, decls: 1, vars: 1, @@ -312,7 +312,7 @@ describe('component animations', () => { () => { class AnimComp { static ngFactoryDef = () => new AnimComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: AnimComp, decls: 1, vars: 1, @@ -361,7 +361,7 @@ describe('component animations', () => { // class ParentComp { // static ngFactoryDef = () => new ParentComp(); - // static ngComponentDef = ɵɵdefineComponent({ + // static ɵcmp = ɵɵdefineComponent({ // type: ParentComp, // decls: 1, // vars: 1, @@ -391,7 +391,7 @@ describe('element discovery', () => { it('should only monkey-patch immediate child nodes in a component', () => { class StructuredComp { static ngFactoryDef = () => new StructuredComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: StructuredComp, selectors: [['structured-comp']], decls: 2, @@ -423,7 +423,7 @@ describe('element discovery', () => { it('should only monkey-patch immediate child nodes in a sub component', () => { class ChildComp { static ngFactoryDef = () => new ChildComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ChildComp, selectors: [['child-comp']], decls: 3, @@ -440,7 +440,7 @@ describe('element discovery', () => { class ParentComp { static ngFactoryDef = () => new ParentComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ParentComp, selectors: [['parent-comp']], directives: [ChildComp], @@ -473,7 +473,7 @@ describe('element discovery', () => { it('should only monkey-patch immediate child nodes in an embedded template container', () => { class StructuredComp { static ngFactoryDef = () => new StructuredComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: StructuredComp, selectors: [['structured-comp']], directives: [NgIf], @@ -523,7 +523,7 @@ describe('element discovery', () => { it('should return a context object from a given dom node', () => { class StructuredComp { static ngFactoryDef = () => new StructuredComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: StructuredComp, selectors: [['structured-comp']], directives: [NgIf], @@ -561,7 +561,7 @@ describe('element discovery', () => { it('should cache the element context on a element was pre-emptively monkey-patched', () => { class StructuredComp { static ngFactoryDef = () => new StructuredComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: StructuredComp, selectors: [['structured-comp']], decls: 1, @@ -593,7 +593,7 @@ describe('element discovery', () => { () => { class StructuredComp { static ngFactoryDef = () => new StructuredComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: StructuredComp, selectors: [['structured-comp']], decls: 2, @@ -626,7 +626,7 @@ describe('element discovery', () => { () => { class StructuredComp { static ngFactoryDef = () => new StructuredComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: StructuredComp, selectors: [['structured-comp']], decls: 1, @@ -674,7 +674,7 @@ describe('element discovery', () => { */ class ProjectorComp { static ngFactoryDef = () => new ProjectorComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ProjectorComp, selectors: [['projector-comp']], decls: 4, @@ -697,7 +697,7 @@ describe('element discovery', () => { class ParentComp { static ngFactoryDef = () => new ParentComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ParentComp, selectors: [['parent-comp']], directives: [ProjectorComp], @@ -771,7 +771,7 @@ describe('element discovery', () => { () => { class StructuredComp { static ngFactoryDef = () => new StructuredComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: StructuredComp, selectors: [['structured-comp']], decls: 1, @@ -798,7 +798,7 @@ describe('element discovery', () => { it('should by default monkey-patch the bootstrap component with context details', () => { class StructuredComp { static ngFactoryDef = () => new StructuredComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: StructuredComp, selectors: [['structured-comp']], decls: 0, @@ -855,7 +855,7 @@ describe('element discovery', () => { class StructuredComp { static ngFactoryDef = () => new StructuredComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: StructuredComp, selectors: [['structured-comp']], directives: [MyDir1, MyDir2, MyDir3], @@ -933,7 +933,7 @@ describe('element discovery', () => { class ChildComp { static ngFactoryDef = () => childComponentInstance = new ChildComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ChildComp, selectors: [['child-comp']], decls: 1, @@ -948,7 +948,7 @@ describe('element discovery', () => { class ParentComp { static ngFactoryDef = () => new ParentComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ParentComp, selectors: [['parent-comp']], directives: [ChildComp, MyDir1, MyDir2], @@ -1011,7 +1011,7 @@ describe('element discovery', () => { () => { class ChildComp { static ngFactoryDef = () => new ChildComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ChildComp, selectors: [['child-comp']], decls: 3, @@ -1028,7 +1028,7 @@ describe('element discovery', () => { class ParentComp { static ngFactoryDef = () => new ParentComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ParentComp, selectors: [['parent-comp']], directives: [ChildComp], @@ -1072,7 +1072,7 @@ describe('sanitization', () => { it('should sanitize data using the provided sanitization interface', () => { class SanitizationComp { static ngFactoryDef = () => new SanitizationComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: SanitizationComp, selectors: [['sanitize-this']], decls: 1, @@ -1130,7 +1130,7 @@ describe('sanitization', () => { class SimpleComp { static ngFactoryDef = () => new SimpleComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: SimpleComp, selectors: [['sanitize-this']], decls: 1, diff --git a/packages/core/test/render3/ivy/jit_spec.ts b/packages/core/test/render3/ivy/jit_spec.ts index 874cfe4549..d2703924c5 100644 --- a/packages/core/test/render3/ivy/jit_spec.ts +++ b/packages/core/test/render3/ivy/jit_spec.ts @@ -33,7 +33,7 @@ ivyEnabled && describe('render3 jit', () => { } const SomeCmpAny = SomeCmp as any; - expect(SomeCmpAny.ngComponentDef).toBeDefined(); + expect(SomeCmpAny.ɵcmp).toBeDefined(); expect(SomeCmpAny.ngFactoryDef() instanceof SomeCmp).toBe(true); }); @@ -198,7 +198,7 @@ ivyEnabled && describe('render3 jit', () => { }) class Cmp { } - const cmpDef: ComponentDef = (Cmp as any).ngComponentDef; + const cmpDef: ComponentDef = (Cmp as any).ɵcmp; expect(cmpDef.directiveDefs).toBeNull(); @@ -230,7 +230,7 @@ ivyEnabled && describe('render3 jit', () => { onChange(event: any): void {} } - const cmpDef = (Cmp as any).ngComponentDef as ComponentDef; + const cmpDef = (Cmp as any).ɵcmp as ComponentDef; expect(cmpDef.hostBindings).toBeDefined(); expect(cmpDef.hostBindings !.length).toBe(3); @@ -268,8 +268,8 @@ ivyEnabled && describe('render3 jit', () => { } const InputCompAny = InputComp as any; - expect(InputCompAny.ngComponentDef.inputs).toEqual({publicName: 'privateName'}); - expect(InputCompAny.ngComponentDef.declaredInputs).toEqual({publicName: 'privateName'}); + expect(InputCompAny.ɵcmp.inputs).toEqual({publicName: 'privateName'}); + expect(InputCompAny.ɵcmp.declaredInputs).toEqual({publicName: 'privateName'}); }); it('should add @Input properties to a directive', () => { @@ -331,7 +331,7 @@ ivyEnabled && describe('render3 jit', () => { @ViewChild('foo', {static: false}) foo: ElementRef|undefined; } - expect((TestComponent as any).ngComponentDef.foo).not.toBeNull(); + expect((TestComponent as any).ɵcmp.foo).not.toBeNull(); }); it('should compile ViewChildren query on a component', () => { @@ -340,7 +340,7 @@ ivyEnabled && describe('render3 jit', () => { @ViewChildren('foo') foos: QueryList|undefined; } - expect((TestComponent as any).ngComponentDef.viewQuery).not.toBeNull(); + expect((TestComponent as any).ɵcmp.viewQuery).not.toBeNull(); }); }); diff --git a/packages/core/test/render3/lifecycle_spec.ts b/packages/core/test/render3/lifecycle_spec.ts index 9a394bd164..3ebbdef8ab 100644 --- a/packages/core/test/render3/lifecycle_spec.ts +++ b/packages/core/test/render3/lifecycle_spec.ts @@ -56,7 +56,7 @@ describe('lifecycles', () => { } static ngFactoryDef = () => new Component(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: Component, selectors: [[name]], decls: decls, diff --git a/packages/core/test/render3/listeners_spec.ts b/packages/core/test/render3/listeners_spec.ts index b5ac4b69c2..35b928c36b 100644 --- a/packages/core/test/render3/listeners_spec.ts +++ b/packages/core/test/render3/listeners_spec.ts @@ -34,7 +34,7 @@ describe('event listeners', () => { return comp; } - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: MyComp, selectors: [['comp']], decls: 2, @@ -67,7 +67,7 @@ describe('event listeners', () => { return comp; } - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: MyCompWithGlobalListeners, selectors: [['comp']], decls: 1, @@ -135,7 +135,7 @@ describe('event listeners', () => { } static ngFactoryDef = () => new PreventDefaultComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: PreventDefaultComp, selectors: [['prevent-default-comp']], decls: 2, @@ -326,7 +326,7 @@ describe('event listeners', () => { onClick() { this.counter++; } static ngFactoryDef = () => new AppComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: AppComp, selectors: [['app-comp']], decls: 1, @@ -387,7 +387,7 @@ describe('event listeners', () => { onClick(index: number) { this.counters[index]++; } static ngFactoryDef = () => new AppComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: AppComp, selectors: [['app-comp']], decls: 1, @@ -451,7 +451,7 @@ describe('event listeners', () => { onClick(index: number) { this.counters[index]++; } static ngFactoryDef = () => new AppComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: AppComp, selectors: [['app-comp']], decls: 1, @@ -530,7 +530,7 @@ describe('event listeners', () => { onClick() { events.push('click!'); } static ngFactoryDef = () => { return new MyComp(); }; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: MyComp, selectors: [['comp']], decls: 1, @@ -633,7 +633,7 @@ describe('event listeners', () => { onClick(a: any, b: any) { this.counter += a + b; } static ngFactoryDef = () => new MyComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: MyComp, selectors: [['comp']], decls: 2, @@ -914,7 +914,7 @@ describe('event listeners', () => { onClick(comp: any) { this.comp = comp; } static ngFactoryDef = () => new App(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: App, selectors: [['app']], decls: 3, diff --git a/packages/core/test/render3/outputs_spec.ts b/packages/core/test/render3/outputs_spec.ts index 6030bd7384..0cdeea45c0 100644 --- a/packages/core/test/render3/outputs_spec.ts +++ b/packages/core/test/render3/outputs_spec.ts @@ -22,7 +22,7 @@ describe('outputs', () => { resetStream = new EventEmitter(); static ngFactoryDef = () => buttonToggle = new ButtonToggle(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ButtonToggle, selectors: [['button-toggle']], template: function(rf: RenderFlags, ctx: any) {}, diff --git a/packages/core/test/render3/providers_spec.ts b/packages/core/test/render3/providers_spec.ts index 7004d971d5..4ff4fed22e 100644 --- a/packages/core/test/render3/providers_spec.ts +++ b/packages/core/test/render3/providers_spec.ts @@ -423,7 +423,7 @@ describe('providers', () => { }); }); - describe('with directives (order in ngComponentDef.directives matters)', () => { + describe('with directives (order in ɵcmp.directives matters)', () => { it('should work without providers nor viewProviders in component', () => { expectProvidersScenario({ parent: { @@ -647,7 +647,7 @@ describe('providers', () => { }); }); - describe('with directives (order in ngComponentDef.directives matters)', () => { + describe('with directives (order in ɵcmp.directives matters)', () => { it('should work without providers nor viewProviders in component', () => { expectProvidersScenario({ parent: { @@ -870,7 +870,7 @@ describe('providers', () => { static ngFactoryDef = () => { return new Repeated(ɵɵdirectiveInject(String), ɵɵdirectiveInject(Number)); } - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: Repeated, selectors: [['repeated']], decls: 2, @@ -901,7 +901,7 @@ describe('providers', () => { }) class ComponentWithProviders { static ngFactoryDef = () => new ComponentWithProviders(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ComponentWithProviders, selectors: [['component-with-providers']], decls: 2, @@ -956,7 +956,7 @@ describe('providers', () => { static ngFactoryDef = () => { return new Repeated(ɵɵdirectiveInject(String), ɵɵdirectiveInject(Number)); } - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: Repeated, selectors: [['repeated']], decls: 2, @@ -990,7 +990,7 @@ describe('providers', () => { }) class ComponentWithProviders { static ngFactoryDef = () => new ComponentWithProviders(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ComponentWithProviders, selectors: [['component-with-providers']], decls: 2, @@ -1039,7 +1039,7 @@ describe('providers', () => { constructor(private s: String) {} static ngFactoryDef = () => new EmbeddedComponent(ɵɵdirectiveInject(String)); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: EmbeddedComponent, selectors: [['embedded-cmp']], decls: 1, @@ -1062,7 +1062,7 @@ describe('providers', () => { static ngFactoryDef = () => hostComponent = new HostComponent( ɵɵdirectiveInject(ViewContainerRef as any), injectComponentFactoryResolver()) - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: HostComponent, selectors: [['host-cmp']], decls: 1, @@ -1086,7 +1086,7 @@ describe('providers', () => { constructor() {} static ngFactoryDef = () => new AppComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: AppComponent, selectors: [['app-cmp']], decls: 1, @@ -1248,7 +1248,7 @@ describe('providers', () => { constructor() {} static ngFactoryDef = () => new MyComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: MyComponent, selectors: [['my-cmp']], decls: 1, @@ -1275,7 +1275,7 @@ describe('providers', () => { constructor() {} static ngFactoryDef = () => new AppComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: AppComponent, selectors: [['app-cmp']], decls: 1, @@ -1340,7 +1340,7 @@ describe('providers', () => { static ngFactoryDef = () => { return new MyComponent(ɵɵdirectiveInject(InjectableWithLifeCycleHooks)); } - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: MyComponent, selectors: [['my-comp']], decls: 1, @@ -1367,7 +1367,7 @@ describe('providers', () => { public condition = true; static ngFactoryDef = () => new App(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: App, selectors: [['app-cmp']], decls: 2, @@ -1442,7 +1442,7 @@ function expectProvidersScenario(defs: { class ViewChildComponent { static ngFactoryDef = () => testComponentInjection(defs.viewChild, new ViewChildComponent()); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ViewChildComponent, selectors: [['view-child']], decls: 1, @@ -1470,7 +1470,7 @@ function expectProvidersScenario(defs: { static ngFactoryDef = () => { return testComponentInjection(defs.contentChild, new ContentChildComponent()); } - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ContentChildComponent, selectors: [['content-child']], decls: 1, @@ -1501,7 +1501,7 @@ function expectProvidersScenario(defs: { class ParentComponent { static ngFactoryDef = () => testComponentInjection(defs.parent, new ParentComponent()); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ParentComponent, selectors: [['parent']], decls: 1, @@ -1538,7 +1538,7 @@ function expectProvidersScenario(defs: { class App { static ngFactoryDef = () => testComponentInjection(defs.app, new App()); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: App, selectors: [['app']], decls: 2, diff --git a/packages/core/test/render3/pure_function_spec.ts b/packages/core/test/render3/pure_function_spec.ts index 528f104cce..b2ac7ac924 100644 --- a/packages/core/test/render3/pure_function_spec.ts +++ b/packages/core/test/render3/pure_function_spec.ts @@ -20,7 +20,7 @@ describe('object literals', () => { config !: {[key: string]: any}; static ngFactoryDef = function ObjectComp_Factory() { return objectComp = new ObjectComp(); }; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ObjectComp, selectors: [['object-comp']], decls: 0, diff --git a/packages/core/test/render3/query_spec.ts b/packages/core/test/render3/query_spec.ts index 672dde8d56..01f254e49a 100644 --- a/packages/core/test/render3/query_spec.ts +++ b/packages/core/test/render3/query_spec.ts @@ -249,7 +249,7 @@ describe('query', () => { alias?: Alias; static ngFactoryDef = function App_Factory() { return new App(); }; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: App, selectors: [['app']], decls: 1, @@ -295,7 +295,7 @@ describe('query', () => { service?: Service; static ngFactoryDef = function App_Factory() { return new App(); }; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: App, selectors: [['app']], decls: 1, @@ -839,7 +839,7 @@ describe('query', () => { class Child { static ngFactoryDef = () => childInstance = new Child(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: Child, selectors: [['child']], decls: 0, @@ -1959,7 +1959,7 @@ describe('query', () => { texts !: QueryList; static ngFactoryDef = () => contentQueryDirective = new ContentQueryDirective(); - static ngComponentDef = ɵɵdefineDirective({ + static ɵcmp = ɵɵdefineDirective({ type: ContentQueryDirective, selectors: [['', 'content-query', '']], contentQueries: (rf: RenderFlags, ctx: any, dirIndex: number) => { @@ -2030,7 +2030,7 @@ describe('query', () => { texts !: QueryList; static ngFactoryDef = () => new ViewQueryComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: ViewQueryComponent, selectors: [['view-query']], consts: [['text', 'A'], ['text', 'B'], ['text', 'C'], ['text', 'D'], ['text', 'E']], diff --git a/packages/core/test/render3/render_util.ts b/packages/core/test/render3/render_util.ts index 6c802395ed..c584ca7b7e 100644 --- a/packages/core/test/render3/render_util.ts +++ b/packages/core/test/render3/render_util.ts @@ -375,7 +375,7 @@ export function createComponent( return class Component { value: any; static ngFactoryDef = () => new Component; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: Component, selectors: [[name]], decls: decls, diff --git a/packages/core/test/render3/renderer_factory_spec.ts b/packages/core/test/render3/renderer_factory_spec.ts index d67c98703f..0ec6a81c02 100644 --- a/packages/core/test/render3/renderer_factory_spec.ts +++ b/packages/core/test/render3/renderer_factory_spec.ts @@ -27,7 +27,7 @@ describe('renderer factory lifecycle', () => { class SomeComponent { static ngFactoryDef = () => new SomeComponent; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: SomeComponent, encapsulation: ViewEncapsulation.None, selectors: [['some-component']], @@ -47,7 +47,7 @@ describe('renderer factory lifecycle', () => { class SomeComponentWhichThrows { static ngFactoryDef = () => new SomeComponentWhichThrows; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: SomeComponentWhichThrows, encapsulation: ViewEncapsulation.None, selectors: [['some-component-with-Error']], @@ -151,7 +151,7 @@ describe('Renderer2 destruction hooks', () => { it('should call renderer.destroy for each component destroyed', () => { class SimpleComponent { static ngFactoryDef = () => new SimpleComponent; - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: SimpleComponent, encapsulation: ViewEncapsulation.None, selectors: [['simple']], diff --git a/packages/core/test/render3/view_container_ref_spec.ts b/packages/core/test/render3/view_container_ref_spec.ts index cbc693e402..9cd3ed583f 100644 --- a/packages/core/test/render3/view_container_ref_spec.ts +++ b/packages/core/test/render3/view_container_ref_spec.ts @@ -102,7 +102,7 @@ describe('ViewContainerRef', () => { // TODO(issue/24571): remove '!'. testDir !: TestDirective; static ngFactoryDef = () => new TestComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: TestComponent, encapsulation: ViewEncapsulation.None, selectors: [['test-cmp']], @@ -174,7 +174,7 @@ describe('ViewContainerRef', () => { // TODO(issue/24571): remove '!'. testDir !: TestDirective; static ngFactoryDef = () => new TestComponent(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: TestComponent, encapsulation: ViewEncapsulation.None, selectors: [['test-cmp']], @@ -247,7 +247,7 @@ describe('ViewContainerRef', () => { ɵɵdirectiveInject(ViewContainerRef as any), injectComponentFactoryResolver()); } - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: AppComp, selectors: [['app-comp']], decls: 0, @@ -263,7 +263,7 @@ describe('ViewContainerRef', () => { static ngFactoryDef = () => dynamicComp = new DynamicComp(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: DynamicComp, selectors: [['dynamic-comp']], decls: 0, @@ -368,7 +368,7 @@ describe('ViewContainerRef', () => { static ngFactoryDef = () => new AppCmpt(ɵɵdirectiveInject(ViewContainerRef as any), injectComponentFactoryResolver()) - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: AppCmpt, selectors: [['app']], decls: 0, @@ -436,7 +436,7 @@ describe('ViewContainerRef', () => { foo !: QueryList; static ngFactoryDef = () => dynamicComp = new DynamicCompWithViewQueries(); - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: DynamicCompWithViewQueries, selectors: [['dynamic-cmpt-with-view-queries']], decls: 2, @@ -485,7 +485,7 @@ describe('ViewContainerRef', () => { static ngFactoryDef = () => new CompWithListenerThatDestroysItself(ɵɵdirectiveInject(ChangeDetectorRef as any)) - static ngComponentDef = ɵɵdefineComponent({ + static ɵcmp = ɵɵdefineComponent({ type: CompWithListenerThatDestroysItself, selectors: [['comp-with-listener-and-on-destroy']], decls: 2, diff --git a/packages/core/test/strict_types/inheritance_spec.ts b/packages/core/test/strict_types/inheritance_spec.ts index b1b5261bd5..78a8a44e63 100644 --- a/packages/core/test/strict_types/inheritance_spec.ts +++ b/packages/core/test/strict_types/inheritance_spec.ts @@ -9,7 +9,7 @@ import {ɵɵComponentDefWithMeta, ɵɵPipeDefWithMeta as PipeDefWithMeta} from '@angular/core'; declare class SuperComponent { - static ngComponentDef: ɵɵComponentDefWithMeta; + static ɵcmp: ɵɵComponentDefWithMeta; } declare class SubComponent extends SuperComponent { @@ -18,7 +18,7 @@ declare class SubComponent extends SuperComponent { // would produce type errors when the "strictFunctionTypes" option is enabled. onlyInSubtype: string; - static ngComponentDef: ɵɵComponentDefWithMeta; + static ɵcmp: ɵɵComponentDefWithMeta; } declare class SuperPipe { static ngPipeDef: PipeDefWithMeta; } diff --git a/packages/core/test/test_bed_spec.ts b/packages/core/test/test_bed_spec.ts index a122f629d3..64a090d80b 100644 --- a/packages/core/test/test_bed_spec.ts +++ b/packages/core/test/test_bed_spec.ts @@ -506,7 +506,7 @@ describe('TestBed', () => { const getAOTCompiledComponent = () => { class ComponentClass { static ngFactoryDef = () => new ComponentClass(); - static ngComponentDef = defineComponent({ + static ɵcmp = defineComponent({ type: ComponentClass, selectors: [['comp']], decls: 1, @@ -616,13 +616,13 @@ describe('TestBed', () => { {set: {template: `{{'hello' | somePipe}}`}}); TestBed.createComponent(SomeComponent); - const defBeforeReset = (SomeComponent as any).ngComponentDef; + const defBeforeReset = (SomeComponent as any).ɵcmp; expect(defBeforeReset.pipeDefs().length).toEqual(1); expect(defBeforeReset.directiveDefs().length).toEqual(2); // directive + component TestBed.resetTestingModule(); - const defAfterReset = (SomeComponent as any).ngComponentDef; + const defAfterReset = (SomeComponent as any).ɵcmp; expect(defAfterReset.pipeDefs).toBe(null); expect(defAfterReset.directiveDefs).toBe(null); }); @@ -654,8 +654,8 @@ describe('TestBed', () => { }); TestBed.createComponent(ComponentWithNoAnnotations); - expect(ComponentWithNoAnnotations.hasOwnProperty('ngComponentDef')).toBeTruthy(); - expect(SomeComponent.hasOwnProperty('ngComponentDef')).toBeTruthy(); + expect(ComponentWithNoAnnotations.hasOwnProperty('ɵcmp')).toBeTruthy(); + expect(SomeComponent.hasOwnProperty('ɵcmp')).toBeTruthy(); expect(DirectiveWithNoAnnotations.hasOwnProperty('ngDirectiveDef')).toBeTruthy(); expect(SomeDirective.hasOwnProperty('ngDirectiveDef')).toBeTruthy(); @@ -666,12 +666,12 @@ describe('TestBed', () => { TestBed.resetTestingModule(); // ng defs should be removed from classes with no annotations - expect(ComponentWithNoAnnotations.hasOwnProperty('ngComponentDef')).toBeFalsy(); + expect(ComponentWithNoAnnotations.hasOwnProperty('ɵcmp')).toBeFalsy(); expect(DirectiveWithNoAnnotations.hasOwnProperty('ngDirectiveDef')).toBeFalsy(); expect(PipeWithNoAnnotations.hasOwnProperty('ngPipeDef')).toBeFalsy(); // ng defs should be preserved on super types - expect(SomeComponent.hasOwnProperty('ngComponentDef')).toBeTruthy(); + expect(SomeComponent.hasOwnProperty('ɵcmp')).toBeTruthy(); expect(SomeDirective.hasOwnProperty('ngDirectiveDef')).toBeTruthy(); expect(SomePipe.hasOwnProperty('ngPipeDef')).toBeTruthy(); }); @@ -719,8 +719,7 @@ describe('TestBed', () => { } TestBed.configureTestingModule({imports: [MyModule]}); - const originalResolver = - (ComponentWithProvider as any).ngComponentDef.providersResolver; + const originalResolver = (ComponentWithProvider as any).ɵcmp.providersResolver; TestBed.overrideProvider(SomeInjectable, {useValue: {id: 'fake'}}); const compiler = TestBed.inject(Compiler); @@ -728,7 +727,7 @@ describe('TestBed', () => { compiler.compileModuleSync(MyModule); TestBed.resetTestingModule(); - expect((ComponentWithProvider as any).ngComponentDef.providersResolver) + expect((ComponentWithProvider as any).ɵcmp.providersResolver) .toEqual(originalResolver); }); }); diff --git a/packages/core/testing/src/r3_test_bed.ts b/packages/core/testing/src/r3_test_bed.ts index 86f8cce1b0..8fe1a58ab6 100644 --- a/packages/core/testing/src/r3_test_bed.ts +++ b/packages/core/testing/src/r3_test_bed.ts @@ -328,11 +328,11 @@ export class TestBedRender3 implements TestBed { const rootElId = `root-ng-internal-isolated-${_nextRootElementId++}`; testComponentRenderer.insertRootElement(rootElId); - const componentDef = (type as any).ngComponentDef; + const componentDef = (type as any).ɵcmp; if (!componentDef) { throw new Error( - `It looks like '${stringify(type)}' has not been IVY compiled - it has no 'ngComponentDef' field`); + `It looks like '${stringify(type)}' has not been IVY compiled - it has no 'ɵcmp' field`); } // TODO: Don't cast as `InjectionToken`, proper type is boolean[] diff --git a/packages/core/testing/src/r3_test_bed_compiler.ts b/packages/core/testing/src/r3_test_bed_compiler.ts index afc65c86b4..cb5e107c20 100644 --- a/packages/core/testing/src/r3_test_bed_compiler.ts +++ b/packages/core/testing/src/r3_test_bed_compiler.ts @@ -7,7 +7,7 @@ */ import {ResourceLoader} from '@angular/compiler'; -import {ApplicationInitStatus, COMPILER_OPTIONS, Compiler, Component, Directive, Injector, LOCALE_ID, ModuleWithComponentFactories, ModuleWithProviders, NgModule, NgModuleFactory, NgZone, Pipe, PlatformRef, Provider, Type, ɵDEFAULT_LOCALE_ID as DEFAULT_LOCALE_ID, ɵDirectiveDef as DirectiveDef, ɵNG_COMPONENT_DEF as NG_COMPONENT_DEF, ɵNG_DIRECTIVE_DEF as NG_DIRECTIVE_DEF, ɵNG_INJECTOR_DEF as NG_INJECTOR_DEF, ɵNG_MODULE_DEF as NG_MODULE_DEF, ɵNG_PIPE_DEF as NG_PIPE_DEF, ɵNgModuleFactory as R3NgModuleFactory, ɵNgModuleTransitiveScopes as NgModuleTransitiveScopes, ɵNgModuleType as NgModuleType, ɵRender3ComponentFactory as ComponentFactory, ɵRender3NgModuleRef as NgModuleRef, ɵcompileComponent as compileComponent, ɵcompileDirective as compileDirective, ɵcompileNgModuleDefs as compileNgModuleDefs, ɵcompilePipe as compilePipe, ɵgetInjectableDef as getInjectableDef, ɵpatchComponentDefWithScope as patchComponentDefWithScope, ɵsetLocaleId as setLocaleId, ɵtransitiveScopesFor as transitiveScopesFor, ɵɵInjectableDef as InjectableDef} from '@angular/core'; +import {ApplicationInitStatus, COMPILER_OPTIONS, Compiler, Component, Directive, Injector, LOCALE_ID, ModuleWithComponentFactories, ModuleWithProviders, NgModule, NgModuleFactory, NgZone, Pipe, PlatformRef, Provider, Type, ɵDEFAULT_LOCALE_ID as DEFAULT_LOCALE_ID, ɵDirectiveDef as DirectiveDef, ɵNG_COMP_DEF as NG_COMP_DEF, ɵNG_DIRECTIVE_DEF as NG_DIRECTIVE_DEF, ɵNG_INJECTOR_DEF as NG_INJECTOR_DEF, ɵNG_MODULE_DEF as NG_MODULE_DEF, ɵNG_PIPE_DEF as NG_PIPE_DEF, ɵNgModuleFactory as R3NgModuleFactory, ɵNgModuleTransitiveScopes as NgModuleTransitiveScopes, ɵNgModuleType as NgModuleType, ɵRender3ComponentFactory as ComponentFactory, ɵRender3NgModuleRef as NgModuleRef, ɵcompileComponent as compileComponent, ɵcompileDirective as compileDirective, ɵcompileNgModuleDefs as compileNgModuleDefs, ɵcompilePipe as compilePipe, ɵgetInjectableDef as getInjectableDef, ɵpatchComponentDefWithScope as patchComponentDefWithScope, ɵsetLocaleId as setLocaleId, ɵtransitiveScopesFor as transitiveScopesFor, ɵɵInjectableDef as InjectableDef} from '@angular/core'; import {ModuleRegistrationMap, getRegisteredModulesState, restoreRegisteredModulesState} from '../../src/linker/ng_module_factory_registration'; import {clearResolutionOfComponentResourcesQueue, isComponentDefPendingResolution, resolveComponentResources, restoreComponentResolutionQueue} from '../../src/metadata/resource_loading'; @@ -175,7 +175,7 @@ export class R3TestBedCompiler { } overrideTemplateUsingTestingModule(type: Type, template: string): void { - const def = (type as any)[NG_COMPONENT_DEF]; + const def = (type as any)[NG_COMP_DEF]; const hasStyleUrls = (): boolean => { const metadata = this.resolvers.component.resolve(type) !as Component; return !!metadata.styleUrls && metadata.styleUrls.length > 0; @@ -229,7 +229,7 @@ export class R3TestBedCompiler { this.applyProviderOverrides(); - // Patch previously stored `styles` Component values (taken from ngComponentDef), in case these + // Patch previously stored `styles` Component values (taken from ɵcmp), in case these // Components have `styleUrls` fields defined and template override was requested. this.patchComponentsWithExistingStyles(); @@ -286,7 +286,7 @@ export class R3TestBedCompiler { */ _getComponentFactories(moduleType: NgModuleType): ComponentFactory[] { return maybeUnwrapFn(moduleType.ngModuleDef.declarations).reduce((factories, declaration) => { - const componentDef = (declaration as any).ngComponentDef; + const componentDef = (declaration as any).ɵcmp; componentDef && factories.push(new ComponentFactory(componentDef, this.testModuleRef !)); return factories; }, [] as ComponentFactory[]); @@ -298,7 +298,7 @@ export class R3TestBedCompiler { this.pendingComponents.forEach(declaration => { needsAsyncResources = needsAsyncResources || isComponentDefPendingResolution(declaration); const metadata = this.resolvers.component.resolve(declaration) !; - this.maybeStoreNgDef(NG_COMPONENT_DEF, declaration); + this.maybeStoreNgDef(NG_COMP_DEF, declaration); compileComponent(declaration, metadata); }); this.pendingComponents.clear(); @@ -333,9 +333,9 @@ export class R3TestBedCompiler { this.componentToModuleScope.forEach((moduleType, componentType) => { const moduleScope = getScopeOfModule(moduleType); - this.storeFieldOfDefOnType(componentType, NG_COMPONENT_DEF, 'directiveDefs'); - this.storeFieldOfDefOnType(componentType, NG_COMPONENT_DEF, 'pipeDefs'); - patchComponentDefWithScope((componentType as any).ngComponentDef, moduleScope); + this.storeFieldOfDefOnType(componentType, NG_COMP_DEF, 'directiveDefs'); + this.storeFieldOfDefOnType(componentType, NG_COMP_DEF, 'pipeDefs'); + patchComponentDefWithScope((componentType as any).ɵcmp, moduleScope); }); this.componentToModuleScope.clear(); @@ -343,14 +343,13 @@ export class R3TestBedCompiler { private applyProviderOverrides(): void { const maybeApplyOverrides = (field: string) => (type: Type) => { - const resolver = - field === NG_COMPONENT_DEF ? this.resolvers.component : this.resolvers.directive; + const resolver = field === NG_COMP_DEF ? this.resolvers.component : this.resolvers.directive; const metadata = resolver.resolve(type) !; if (this.hasProviderOverrides(metadata.providers)) { this.patchDefWithProviderOverrides(type, field); } }; - this.seenComponents.forEach(maybeApplyOverrides(NG_COMPONENT_DEF)); + this.seenComponents.forEach(maybeApplyOverrides(NG_COMP_DEF)); this.seenDirectives.forEach(maybeApplyOverrides(NG_DIRECTIVE_DEF)); this.seenComponents.clear(); @@ -390,7 +389,7 @@ export class R3TestBedCompiler { private patchComponentsWithExistingStyles(): void { this.existingComponentStyles.forEach( - (styles, type) => (type as any)[NG_COMPONENT_DEF].styles = styles); + (styles, type) => (type as any)[NG_COMP_DEF].styles = styles); this.existingComponentStyles.clear(); } @@ -419,10 +418,10 @@ export class R3TestBedCompiler { private queueType(type: Type, moduleType: Type|TestingModuleOverride): void { const component = this.resolvers.component.resolve(type); if (component) { - // Check whether a give Type has respective NG def (ngComponentDef) and compile if def is + // Check whether a give Type has respective NG def (ɵcmp) and compile if def is // missing. That might happen in case a class without any Angular decorators extends another // class where Component/Directive/Pipe decorator is defined. - if (isComponentDefPendingResolution(type) || !type.hasOwnProperty(NG_COMPONENT_DEF)) { + if (isComponentDefPendingResolution(type) || !type.hasOwnProperty(NG_COMP_DEF)) { this.pendingComponents.add(type); } this.seenComponents.add(type); @@ -530,7 +529,7 @@ export class R3TestBedCompiler { // on objects they were applied to. In this particular case, situations where this code // is invoked should be quite rare to cause any noticeable impact, since it's applied // only to some test cases (for example when class with no annotations extends some - // @Component) when we need to clear 'ngComponentDef' field on a given class to restore + // @Component) when we need to clear 'ɵcmp' field on a given class to restore // its original state (before applying overrides and running tests). delete (type as any)[prop]; } else { diff --git a/packages/platform-browser/test/testing_public_spec.ts b/packages/platform-browser/test/testing_public_spec.ts index ef0765a8f5..c5f97a861c 100644 --- a/packages/platform-browser/test/testing_public_spec.ts +++ b/packages/platform-browser/test/testing_public_spec.ts @@ -781,7 +781,7 @@ const bTok = new InjectionToken('b'); it('should use set up providers', fakeAsync(() => { // Keeping this component inside the test is needed to make sure it's not resolved - // prior to this test, thus having ngComponentDef and a reference in resource + // prior to this test, thus having ɵcmp and a reference in resource // resolution queue. This is done to check external resoution logic in isolation by // configuring TestBed with the necessary ResourceLoader instance. @Component({ diff --git a/tools/symbol-extractor/symbol_extractor_spec/hello_world_min_debug.js b/tools/symbol-extractor/symbol_extractor_spec/hello_world_min_debug.js index 5eea71c7e5..fad9a5d17f 100644 --- a/tools/symbol-extractor/symbol_extractor_spec/hello_world_min_debug.js +++ b/tools/symbol-extractor/symbol_extractor_spec/hello_world_min_debug.js @@ -451,7 +451,7 @@ function(componentType, opts) { void 0 === opts && (opts = {}); var component, rendererFactory = opts.rendererFactory || domRendererFactory3, - componentDef = componentType.ngComponentDef; + componentDef = componentType.ɵcmp; componentDef.type != componentType && (componentDef.type = componentType); var hostNode = locateHostElement(rendererFactory, opts.host || componentDef.tag), oldView = enterView( @@ -546,7 +546,7 @@ */ (component); }(function() { function HelloWorld() { this.name = 'World'; } - HelloWorld.ngComponentDef = function(componentDefinition) { + HelloWorld.ɵcmp = function(componentDefinition) { var type = componentDefinition.type, def = { type: type, diPublic: null, @@ -672,4 +672,4 @@ }); return HelloWorld; }()); -}(); \ No newline at end of file +}();