feat(upgrade): allow non-element selectors for downgraded components (#14037)

This affects the dynamic version of `upgrade` and makes it more consistent with
the static version, while removing an artificial limitation.

This commit also refactors the file layout and code, in order to share code wrt
to dowgrading components between the dynamic and static versions.

modules/@angular/upgrade/src/common/component_info.ts

@@ -44,4 +44,4 @@ export class PropertyBinding {
     this.bindAttr = `bind${capitalAttr}`;
     this.bindonAttr = `bindon${capitalAttr}`;
   }
-}
+}

modules/@angular/upgrade/src/common/downgrade_component.ts

@@ -8,9 +8,8 @@
 
 import {ComponentFactory, ComponentFactoryResolver, Injector, Type} from '@angular/core';
 
-import * as angular from '../common/angular1';
+import * as angular from './angular1';
-import {$INJECTOR, $PARSE, INJECTOR_KEY, REQUIRE_NG_MODEL} from '../common/constants';
+import {$INJECTOR, $PARSE, INJECTOR_KEY, REQUIRE_NG_MODEL} from './constants';
-
 import {DowngradeComponentAdapter} from './downgrade_component_adapter';
 
 let downgradeCount = 0;

modules/@angular/upgrade/src/common/downgrade_component_adapter.ts

@@ -8,11 +8,10 @@
 
 import {ChangeDetectorRef, ComponentFactory, ComponentRef, EventEmitter, Injector, OnChanges, ReflectiveInjector, SimpleChange, SimpleChanges, Type} from '@angular/core';
 
-import * as angular from '../common/angular1';
+import * as angular from './angular1';
-import {$SCOPE} from '../common/constants';
 import {hookupNgModel} from '../common/util';
-
 import {ComponentInfo, PropertyBinding} from './component_info';
+import {$SCOPE} from './constants';
 
 const INITIAL_VALUE = {
   __UNINITIALIZED__: true

modules/@angular/upgrade/src/dynamic/metadata.ts

@@ -9,63 +9,32 @@
 import {DirectiveResolver} from '@angular/compiler';
 import {Directive, Type} from '@angular/core';
 
+import {PropertyBinding} from '../common/component_info';
+
+
 const COMPONENT_SELECTOR = /^[\w|-]*$/;
 const SKEWER_CASE = /-(\w)/g;
 const directiveResolver = new DirectiveResolver();
 
-export interface AttrProp {
-  prop: string;
-  attr: string;
-  bracketAttr: string;
-  bracketParenAttr: string;
-  parenAttr: string;
-  onAttr: string;
-  bindAttr: string;
-  bindonAttr: string;
-}
-
 export interface ComponentInfo {
   type: Type<any>;
   selector: string;
-  inputs?: AttrProp[];
+  inputs?: PropertyBinding[];
-  outputs?: AttrProp[];
+  outputs?: PropertyBinding[];
 }
 
 export function getComponentInfo(type: Type<any>): ComponentInfo {
   const resolvedMetadata: Directive = directiveResolver.resolve(type);
-  let selector = resolvedMetadata.selector;
+  const selector = resolvedMetadata.selector;
-  if (!selector.match(COMPONENT_SELECTOR)) {
+
-    throw new Error('Only selectors matching element names are supported, got: ' + selector);
-  }
-  selector = selector.replace(
-      SKEWER_CASE, (all: any /** TODO #9100 */, letter: string) => letter.toUpperCase());
   return {
-    type: type,
+    type,
-    selector: selector,
+    selector,
     inputs: parseFields(resolvedMetadata.inputs),
     outputs: parseFields(resolvedMetadata.outputs)
   };
 }
 
-export function parseFields(names: string[]): AttrProp[] {
+export function parseFields(bindings: string[]): PropertyBinding[] {
-  const attrProps: AttrProp[] = [];
+  return (bindings || []).map(binding => new PropertyBinding(binding));
-  if (names) {
-    for (let i = 0; i < names.length; i++) {
-      const parts = names[i].split(':');
-      const prop = parts[0].trim();
-      const attr = (parts[1] || parts[0]).trim();
-      const capitalAttr = attr.charAt(0).toUpperCase() + attr.substr(1);
-      attrProps.push(<AttrProp>{
-        prop: prop,
-        attr: attr,
-        bracketAttr: `[${attr}]`,
-        parenAttr: `(${attr})`,
-        bracketParenAttr: `[(${attr})]`,
-        onAttr: `on${capitalAttr}`,
-        bindAttr: `bind${capitalAttr}`,
-        bindonAttr: `bindon${capitalAttr}`
-      });
-    }
-  }
-  return attrProps;
 }

modules/@angular/upgrade/src/dynamic/upgrade_adapter.ts

@@ -112,7 +112,7 @@ export class UpgradeAdapter {
    * @internal
    */
   private ng1ComponentsToBeUpgraded: {[name: string]: UpgradeNg1ComponentAdapterBuilder} = {};
-  private providers: Provider[] = [];
+  private upgradedProviders: Provider[] = [];
   private ngZone: NgZone;
   private ng1Module: angular.IModule;
   private moduleRef: NgModuleRef<any> = null;
@@ -437,11 +437,11 @@ export class UpgradeAdapter {
    *
    * ```
    */
-  public upgradeNg1Provider(name: string, options?: {asToken: any}) {
+  upgradeNg1Provider(name: string, options?: {asToken: any}) {
     const token = options && options.asToken || name;
-    this.providers.push({
+    this.upgradedProviders.push({
       provide: token,
-      useFactory: (ng1Injector: angular.IInjectorService) => ng1Injector.get(name),
+      useFactory: ($injector: angular.IInjectorService) => $injector.get(name),
       deps: [$INJECTOR]
     });
   }
@@ -557,7 +557,7 @@ export class UpgradeAdapter {
                     providers: [
                       {provide: $INJECTOR, useFactory: () => ng1Injector},
                       {provide: $COMPILE, useFactory: () => ng1Injector.get($COMPILE)},
-                      this.providers
+                      this.upgradedProviders
                     ],
                     imports: [this.ng2AppModule]
                   }).Class({

modules/@angular/upgrade/static.ts

@@ -12,8 +12,8 @@
  * Entry point for all public APIs of the upgrade/static package, allowing
  * Angular 1 and Angular 2+ to run side by side in the same application.
  */
+export {downgradeComponent} from './src/common/downgrade_component';
 export {downgradeInjectable} from './src/common/downgrade_injectable';
-export {downgradeComponent} from './src/static/downgrade_component';
 export {UpgradeComponent} from './src/static/upgrade_component';
 export {UpgradeModule} from './src/static/upgrade_module';
 

modules/@angular/upgrade/test/common/component_info_spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {PropertyBinding} from '@angular/upgrade/src/aot/component_info';
+import {PropertyBinding} from '@angular/upgrade/src/common/component_info';
 
 export function main() {
   describe('PropertyBinding', () => {

modules/@angular/upgrade/test/dynamic/metadata_spec.ts

@@ -7,23 +7,17 @@
  */
 
 import {Component} from '@angular/core';
-import {describe, expect, it} from '@angular/core/testing/testing_internal';
 import {getComponentInfo, parseFields} from '@angular/upgrade/src/dynamic/metadata';
 
 export function main() {
   describe('upgrade metadata', () => {
     it('should extract component selector', () => {
-      expect(getComponentInfo(ElementNameComponent).selector).toEqual('elementNameDashed');
+      expect(getComponentInfo(ElementNameComponent).selector).toBe('element-name-dashed');
     });
 
 
     describe('errors', () => {
       it('should throw on missing selector', () => {
-        expect(() => getComponentInfo(AttributeNameComponent))
-            .toThrowError('Only selectors matching element names are supported, got: [attr-name]');
-      });
-
-      it('should throw on non element names', () => {
         expect(() => getComponentInfo(NoAnnotationComponent))
             .toThrowError('No Directive annotation found on NoAnnotationComponent');
       });
@@ -34,7 +28,7 @@ export function main() {
 
       it('should process values', () => {
         expect(parseFields([' name ', ' prop :  attr '])).toEqual([
-          {
+          jasmine.objectContaining({
             prop: 'name',
             attr: 'name',
             bracketAttr: '[name]',
@@ -43,8 +37,8 @@ export function main() {
             onAttr: 'onName',
             bindAttr: 'bindName',
             bindonAttr: 'bindonName'
-          },
+          }),
-          {
+          jasmine.objectContaining({
             prop: 'prop',
             attr: 'attr',
             bracketAttr: '[attr]',
@@ -53,7 +47,7 @@ export function main() {
             onAttr: 'onAttr',
             bindAttr: 'bindAttr',
             bindonAttr: 'bindonAttr'
-          }
+          })
         ]);
       });
     });

modules/@angular/upgrade/test/dynamic/upgrade_spec.ts

@@ -271,6 +271,25 @@ export function main() {
     });
 
     describe('downgrade ng2 component', () => {
+      it('should allow non-element selectors for downgraded components', async(() => {
+           @Component({selector: '[itWorks]', template: 'It works'})
+           class WorksComponent {
+           }
+
+           @NgModule({declarations: [WorksComponent], imports: [BrowserModule]})
+           class Ng2Module {
+           }
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(WorksComponent));
+
+           const element = html('<ng2></ng2>');
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toBe('It works');
+           });
+         }));
+
       it('should bind properties, events', async(() => {
            const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
            const ng1Module = angular.module('ng1', []);
@@ -458,7 +477,6 @@ export function main() {
            });
          }));
 
-
       it('should fallback to the root ng2.injector when compiled outside the dom', async(() => {
            const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
            const ng1Module = angular.module('ng1', []);

modules/@angular/upgrade/test/static/integration/downgrade_component_spec.ts

@@ -273,6 +273,30 @@ export function main() {
          });
        }));
 
+    it('should allow attribute selectors for downgraded components', async(() => {
+         @Component({selector: '[itWorks]', template: 'It works'})
+         class WorksComponent {
+         }
+
+         @NgModule({
+           declarations: [WorksComponent],
+           entryComponents: [WorksComponent],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module = angular.module('ng1', []).directive(
+             'worksComponent', downgradeComponent({component: WorksComponent}));
+
+         const element = html('<works-component></works-component>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           expect(multiTrim(document.body.textContent)).toBe('It works');
+         });
+       }));
+
     it('should allow attribute selectors for components in ng2', async(() => {
          @Component({selector: '[itWorks]', template: 'It works'})
          class WorksComponent {