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

perf(core): Remove decorator DSL which depends on Reflect

Browse Source 
BREAKING CHANGE

It is no longer possible to declare classes in this format.

```
Component({...}).
Class({
  constructor: function() {...}
})
```

This format would only work with JIT and with ES5. This mode doesn’t
allow build tools like Webpack to process and optimize the code, which
results in prohibitively large bundles. We are removing this API
because we are trying to ensure that everyone is on the fast path by
default, and it is not possible to get on the fast path using the ES5
DSL. The replacement is to use TypeScript and `@Decorator` format.

```
@Component({...})
class {
  constructor() {...}
}
```
This commit is contained in:
Miško Hevery
2017-08-08 14:03:27 -07:00
committed by Hans
parent 679608db65
commit cac130eff9
12 changed files with 456 additions and 755 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/upgrade/src/dynamic/upgrade_adapter.ts
View File

@ -551,19 +551,19 @@ export class UpgradeAdapter {
.then(() => {
// At this point we have ng1 injector and we have prepared
// ng1 components to be upgraded, we now can bootstrap ng2.
const DynamicNgUpgradeModule =
NgModule({
providers: [
{provide: $INJECTOR, useFactory: () => ng1Injector},
{provide: $COMPILE, useFactory: () => ng1Injector.get($COMPILE)},
this.upgradedProviders
],
imports: [this.ng2AppModule],
entryComponents: this.downgradedComponents
}).Class({
constructor: function DynamicNgUpgradeModule() {},
ngDoBootstrap: function() {}
});
@NgModule({
providers: [
{provide: $INJECTOR, useFactory: () => ng1Injector},
{provide: $COMPILE, useFactory: () => ng1Injector.get($COMPILE)},
this.upgradedProviders
],
imports: [this.ng2AppModule],
entryComponents: this.downgradedComponents
})
class DynamicNgUpgradeModule {
constructor() {}
ngDoBootstrap() {}
}
(platformRef as any)
._bootstrapModuleWithZone(
DynamicNgUpgradeModule, this.compilerOptions, this.ngZone)

37
packages/upgrade/src/dynamic/upgrade_ng1_adapter.ts
View File

@ -38,23 +38,26 @@ export class UpgradeNg1ComponentAdapterBuilder {
name.replace(CAMEL_CASE, (all: string, next: string) => '-' + next.toLowerCase());
const self = this;
this.type =
Directive({selector: selector, inputs: this.inputsRename, outputs: this.outputsRename})
.Class({
constructor: [
new Inject($SCOPE), Injector, ElementRef,
function(scope: angular.IScope, injector: Injector, elementRef: ElementRef) {
const helper = new UpgradeHelper(injector, name, elementRef, this.directive);
return new UpgradeNg1ComponentAdapter(
helper, scope, self.template, self.inputs, self.outputs, self.propertyOutputs,
self.checkProperties, self.propertyMap);
}
],
ngOnInit: function() { /* needs to be here for ng2 to properly detect it */ },
ngOnChanges: function() { /* needs to be here for ng2 to properly detect it */ },
ngDoCheck: function() { /* needs to be here for ng2 to properly detect it */ },
ngOnDestroy: function() { /* needs to be here for ng2 to properly detect it */ },
});
@Directive({selector: selector, inputs: this.inputsRename, outputs: this.outputsRename})
class MyClass {
directive: angular.IDirective;
constructor(
@Inject($SCOPE) scope: angular.IScope, injector: Injector, elementRef: ElementRef) {
const helper = new UpgradeHelper(injector, name, elementRef, this.directive);
return new UpgradeNg1ComponentAdapter(
helper, scope, self.template, self.inputs, self.outputs, self.propertyOutputs,
self.checkProperties, self.propertyMap) as any;
}
ngOnInit() { /* needs to be here for ng2 to properly detect it */
}
ngOnChanges() { /* needs to be here for ng2 to properly detect it */
}
ngDoCheck() { /* needs to be here for ng2 to properly detect it */
}
ngOnDestroy() { /* needs to be here for ng2 to properly detect it */
}
};
this.type = MyClass;
}
extractBindings() {