cargdev/angular
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(core): rename ngComponentDef to ɵcmp (#33088)

Browse Source 
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
This commit is contained in:
Kara Erickson
2019-10-10 14:57:15 -07:00
committed by Miško Hevery
parent d4d07233dc
commit 64fd0d6db9
61 changed files with 306 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/core_render3_private_export.ts
View File

@ -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,

4
packages/core/src/metadata/resource_loading.ts
View File

@ -87,7 +87,7 @@ export function resolveComponentResources(
let componentResourceResolutionQueue = new Map<Type<any>, 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<Type<any>>();
export function maybeQueueResolutionOfComponentResources(type: Type<any>, metadata: Component) {
@ -128,4 +128,4 @@ function unwrapResponse(response: string | {text(): Promise<string>}): string|Pr
function componentDefResolved(type: Type<any>): void {
componentDefPendingResolution.delete(type);
}
}

22
packages/core/src/render3/VIEW_DATA.md
View File

@ -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 (`<child>`)
| 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` | `\* <child> *\ 10`
| `2` | `21` | `\* new Child() *\ 19` | `\* <child> *\ 10`
| `Child.ngComponentDef.hostBindings` | invoke with => | `\* new Child() *\ 19` | `\* <child> *\ 10`
| `Child.ɵcmp.hostBindings` | invoke with => | `\* new Child() *\ 19` | `\* <child> *\ 10`
| | `21` | `\* new Tooltip() *\ 20` | `\* <child> *\ 10`
| `Child.ngComponentDef.hostVars` | `22` | `\* new Tooltip() *\ 20` | `\* <child> *\ 10`
| `Child.ɵcmp.hostVars` | `22` | `\* new Tooltip() *\ 20` | `\* <child> *\ 10`
| `Tooltip.ngDirectiveDef.hostBindings` | invoke with => | `\* new Tooltip() *\ 20` | `\* <child> *\ 10`
| | `22` | `21` | `\* <child> *\ 10`
| `Tooltip.ngDirectiveDef.hostVars` | `22` | `21` | `\* <child> *\ 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`

3
packages/core/src/render3/assert.ts
View File

@ -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);
}

2
packages/core/src/render3/context_discovery.ts
View File

@ -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 {

8
packages/core/src/render3/definition.ts
View File

@ -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<T>(componentDefinition: {
*/
export function ɵɵsetComponentScope(
type: ComponentType<any>, directives: Type<any>[], pipes: Type<any>[]): void {
const def = (type.ngComponentDef as ComponentDef<any>);
const def = (type.ɵcmp as ComponentDef<any>);
def.directiveDefs = () => directives.map(extractDirectiveDef);
def.pipeDefs = () => pipes.map(extractPipeDef);
}
@ -740,7 +740,7 @@ export function ɵɵdefinePipe<T>(pipeDef: {
*/
export function getComponentDef<T>(type: any): ComponentDef<T>|null {
return type[NG_COMPONENT_DEF] || null;
return type[NG_COMP_DEF] || null;
}
export function getDirectiveDef<T>(type: any): DirectiveDef<T>|null {

2
packages/core/src/render3/di.ts
View File

@ -255,7 +255,7 @@ export function diPublicInInjector(
*
* Then factory method generated is:
* ```
* MyComponent.ngComponentDef = defineComponent({
* MyComponent.ɵcmp = defineComponent({
* factory: () => new MyComponent(injectAttribute('title'))
* ...
* })

6
packages/core/src/render3/features/inherit_definition_feature.ts
View File

@ -15,7 +15,7 @@ import {isComponentDef} from '../interfaces/type_checks';
import {ɵɵNgOnChangesFeature} from './ng_onchanges_feature';
function getSuperType(type: Type<any>): Type<any>&
{ngComponentDef?: ComponentDef<any>, ngDirectiveDef?: DirectiveDef<any>} {
{ɵcmp?: ComponentDef<any>, ngDirectiveDef?: DirectiveDef<any>} {
return Object.getPrototypeOf(type.prototype).constructor;
}
@ -32,9 +32,9 @@ export function ɵɵInheritDefinitionFeature(definition: DirectiveDef<any>| Comp
let superDef: DirectiveDef<any>|ComponentDef<any>|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.

2
packages/core/src/render3/features/ng_onchanges_feature.ts
View File

@ -32,7 +32,7 @@ type OnChangesExpando = OnChanges & {
* Example usage:
*
* ```
* static ngComponentDef = defineComponent({
* static ɵcmp = defineComponent({
* ...
* inputs: {name: 'publicName'},
* features: [NgOnChangesFeature()]

2
packages/core/src/render3/features/providers_feature.ts
View File

@ -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)),

2
packages/core/src/render3/fields.ts
View File

@ -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});

10
packages/core/src/render3/i18n.md
View File

@ -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 {<7B>0<EFBFBD>, 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) {

4
packages/core/src/render3/interfaces/definition.ts
View File

@ -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<T> extends Type<T> { ngComponentDef: never; }
export interface ComponentType<T> extends Type<T> { ɵcmp: never; }
/**
* A subclass of `Type` which has a static `ngDirectiveDef`:`DirectiveDef` field making it

8
packages/core/src/render3/jit/directive.ts
View File

@ -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<any>, metadata: Component): void {
@ -51,7 +51,7 @@ export function compileComponent(type: Type<any>, 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();

22
packages/core/src/render3/jit/module.ts
View File

@ -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<any>): Type<any>[] {
/**
* 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<any>, ngModule: NgModule) {
@ -382,9 +382,9 @@ function setScopeOnDeclaredComponents(moduleType: Type<any>, 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<any>& {ngComponentDef: ComponentDef<any>};
if (declaration.hasOwnProperty(NG_COMP_DEF)) {
// A `ɵcmp` field exists - go ahead and patch the component directly.
const component = declaration as Type<any>& {ɵcmp: ComponentDef<any>};
const componentDef = getComponentDef(component) !;
patchComponentDefWithScope(componentDef, transitiveScopes);
} else if (
@ -404,8 +404,8 @@ export function patchComponentDefWithScope<C>(
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<T>(
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<T>(
maybeUnwrapFn(def.exports).forEach(<E>(exported: Type<E>) => {
const exportedType = exported as Type<E>& {
// Components, Directives, NgModules, and Pipes can all be exported.
ngComponentDef?: any;
ɵcmp?: any;
ngDirectiveDef?: any;
ngModuleDef?: NgModuleDef<E>;
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.