Skip to content
Permalink
Browse files

feat(elements): provide type, not factory; remove config need (#22413)

PR Close #22413
  • Loading branch information...
andrewseguin authored and mhevery committed Mar 2, 2018
1 parent d2be675 commit 19368085aad53ad97b96e675b3e7ac9fc1fd6b8d
@@ -111,11 +111,15 @@ class FakeComponentFactoryResolver extends ComponentFactoryResolver {
}

class FakeModuleRef extends NgModuleRef<WithCustomElementComponent> {
injector: Injector;
injector = jasmine.createSpyObj('injector', ['get']);
componentFactoryResolver = new FakeComponentFactoryResolver(this.modulePath);
instance: WithCustomElementComponent = new FakeCustomElementModule();

constructor(private modulePath) { super(); }
constructor(private modulePath) {
super();

this.injector.get.and.returnValue(this.componentFactoryResolver);
}

destroy() {}
onDestroy(callback: () => void) {}
@@ -1,15 +1,14 @@
import {
ComponentFactory,
Inject,
Injectable,
NgModuleFactoryLoader,
NgModuleRef,
} from '@angular/core';
import { ELEMENT_MODULE_PATHS_TOKEN, WithCustomElementComponent } from './element-registry';
import { ELEMENT_MODULE_PATHS_TOKEN } from './element-registry';
import { of } from 'rxjs/observable/of';
import { Observable } from 'rxjs/Observable';
import { fromPromise } from 'rxjs/observable/fromPromise';
import { createNgElementConstructor, getConfigFromComponentFactory } from '@angular/elements';
import { createNgElementConstructor } from '@angular/elements';

@Injectable()
export class ElementsLoader {
@@ -45,26 +44,15 @@ export class ElementsLoader {
return this.moduleFactoryLoader.load(modulePath).then(elementModuleFactory => {
if (!this.elementsToLoad.has(selector)) { return; }

const injector = this.moduleRef.injector;
const elementModuleRef = elementModuleFactory.create(injector);
const componentFactory = this.getCustomElementComponentFactory(elementModuleRef);

const ngElementConfig = getConfigFromComponentFactory(componentFactory, injector);
const NgElement = createNgElementConstructor(ngElementConfig);
const elementModuleRef = elementModuleFactory.create(this.moduleRef.injector);
const CustomElementComponent = elementModuleRef.instance.customElementComponent;
const NgElement =
createNgElementConstructor(CustomElementComponent, {injector: elementModuleRef.injector});

customElements!.define(selector, NgElement);
this.elementsToLoad.delete(selector);

return customElements.whenDefined(selector);
});
}

/** Gets the component factory of the custom element defined on the NgModuleRef. */
private getCustomElementComponentFactory(
customElementModuleRef: NgModuleRef<WithCustomElementComponent>): ComponentFactory<string> {
const resolver = customElementModuleRef.componentFactoryResolver;
const customElementComponent = customElementModuleRef.instance.customElementComponent;

return resolver.resolveComponentFactory(customElementComponent);
}
}
@@ -131,7 +131,7 @@
tslib "^1.7.1"

"@angular/elements@file:../dist/packages-dist/elements":
version "6.0.0-beta.5-8531ff3335"
version "6.0.0-beta.5-0968e9f16a"
dependencies:
tslib "^1.7.1"

@@ -340,10 +340,6 @@
version "1.0.8"
resolved "https://registry.yarnpkg.com/@webcomponents/custom-elements/-/custom-elements-1.0.8.tgz#b7b8ef7248f7681d1ad4286a0ada5fe3c2bc7228"

"@webcomponents/webcomponentsjs@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-1.1.0.tgz#1392799c266fca142622a720176f688beb74d181"

JSONStream@^1.2.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.1.tgz#707f761e01dae9e16f1bcf93703b78c70966579a"
@@ -11,7 +11,6 @@
* @description
* Entry point for all public APIs of the `elements` package.
*/
export {ComponentFactoryNgElementStrategy, ComponentFactoryNgElementStrategyFactory, getConfigFromComponentFactory} from './src/component-factory-strategy';
export {NgElementStrategy, NgElementStrategyEvent, NgElementStrategyFactory} from './src/element-strategy';
export {NgElement, NgElementConfig, NgElementConstructor, createNgElementConstructor} from './src/ng-element-constructor';
export {VERSION} from './src/version';
@@ -18,27 +18,6 @@ import {camelToDashCase, isFunction, scheduler, strictEquals} from './utils';
/** Time in milliseconds to wait before destroying the component ref when disconnected. */
const DESTROY_DELAY = 10;

/**
* Creates an NgElementConfig based on the provided component factory and injector. By default,
* the observed attributes on the NgElement will be the kebab-case version of the component inputs.
*
* @experimental
*/
export function getConfigFromComponentFactory(
componentFactory: ComponentFactory<any>, injector: Injector) {
const attributeToPropertyInputs = new Map<string, string>();
componentFactory.inputs.forEach(({propName, templateName}) => {
const attr = camelToDashCase(templateName);
attributeToPropertyInputs.set(attr, propName);
});

return {
strategyFactory: new ComponentFactoryNgElementStrategyFactory(componentFactory, injector),
propertyInputs: componentFactory.inputs.map(({propName}) => propName),
attributeToPropertyInputs,
};
}

/**
* Factory that creates new ComponentFactoryNgElementStrategy instances with the strategy factory's
* injector. A new strategy instance is created with the provided component factory which will
@@ -6,10 +6,12 @@
* found in the LICENSE file at https://angular.io/license
*/

import {ComponentFactoryResolver, Injector, Type} from '@angular/core';
import {Subscription} from 'rxjs/Subscription';

import {ComponentFactoryNgElementStrategyFactory} from './component-factory-strategy';
import {NgElementStrategy, NgElementStrategyFactory} from './element-strategy';
import {createCustomEvent} from './utils';
import {camelToDashCase, createCustomEvent} from './utils';

/**
* Class constructor based on an Angular Component to be used for custom element registration.
@@ -54,9 +56,20 @@ export type WithProperties<P> = {
* @experimental
*/
export interface NgElementConfig {
strategyFactory: NgElementStrategyFactory;
propertyInputs: string[];
attributeToPropertyInputs: Map<string, string>;
injector: Injector;
strategyFactory?: NgElementStrategyFactory;
propertyInputs?: string[];
attributeToPropertyInputs?: Map<string, string>;
}

/** Gets a map of default set of attributes to observe and the properties they affect. */
function getDefaultAttributeToPropertyInputs(inputs: {propName: string, templateName: string}[]) {
const attributeToPropertyInputs = new Map<string, string>();
inputs.forEach(({propName, templateName}) => {
attributeToPropertyInputs.set(camelToDashCase(templateName), propName);
});

return attributeToPropertyInputs;
}

/**
@@ -73,28 +86,40 @@ export interface NgElementConfig {
*
* @experimental
*/
export function createNgElementConstructor<P>(config: NgElementConfig): NgElementConstructor<P> {
export function createNgElementConstructor<P>(
component: Type<any>, config: NgElementConfig): NgElementConstructor<P> {
const componentFactoryResolver =
config.injector.get(ComponentFactoryResolver) as ComponentFactoryResolver;
const componentFactory = componentFactoryResolver.resolveComponentFactory(component);
const inputs = componentFactory.inputs;

const defaultStrategyFactory = config.strategyFactory ||
new ComponentFactoryNgElementStrategyFactory(componentFactory, config.injector);

const attributeToPropertyInputs =
config.attributeToPropertyInputs || getDefaultAttributeToPropertyInputs(inputs);

class NgElementImpl extends NgElement {
static readonly observedAttributes = Array.from(config.attributeToPropertyInputs.keys());
static readonly observedAttributes = Array.from(attributeToPropertyInputs.keys());

constructor(strategyFactoryOverride?: NgElementStrategyFactory) {
super();

// Use the constructor's strategy factory override if it is present, otherwise default to
// the config's factory.
const strategyFactory = strategyFactoryOverride || config.strategyFactory;
const strategyFactory = strategyFactoryOverride || defaultStrategyFactory;
this.ngElementStrategy = strategyFactory.create();
}

attributeChangedCallback(
attrName: string, oldValue: string|null, newValue: string, namespace?: string): void {
const propName = config.attributeToPropertyInputs.get(attrName) !;
const propName = attributeToPropertyInputs.get(attrName) !;
this.ngElementStrategy.setPropertyValue(propName, newValue);
}

connectedCallback(): void {
// Take element attribute inputs and set them as inputs on the strategy
config.attributeToPropertyInputs.forEach((propName, attrName) => {
attributeToPropertyInputs.forEach((propName, attrName) => {
const value = this.getAttribute(attrName);
if (value) {
this.ngElementStrategy.setPropertyValue(propName, value);
@@ -120,9 +145,10 @@ export function createNgElementConstructor<P>(config: NgElementConfig): NgElemen
}
}

// Add getters and setters for each input defined on the Angular Component so that the input
// changes can be known.
config.propertyInputs.forEach(property => {
// Add getters and setters to the prototype for each property input. If the config does not
// contain property inputs, use all inputs by default.
const propertyInputs = config.propertyInputs || inputs.map(({propName}) => propName);
propertyInputs.forEach(property => {
Object.defineProperty(NgElementImpl.prototype, property, {
get: function() { return this.ngElementStrategy.getPropertyValue(property); },
set: function(newValue: any) { this.ngElementStrategy.setPropertyValue(property, newValue); },
@@ -10,7 +10,7 @@ import {ComponentFactory, ComponentRef, Injector, NgModuleRef, SimpleChange, Sim
import {fakeAsync, tick} from '@angular/core/testing';
import {Subject} from 'rxjs/Subject';

import {ComponentFactoryNgElementStrategy, ComponentFactoryNgElementStrategyFactory, getConfigFromComponentFactory} from '../src/component-factory-strategy';
import {ComponentFactoryNgElementStrategy, ComponentFactoryNgElementStrategyFactory} from '../src/component-factory-strategy';
import {NgElementStrategyEvent} from '../src/element-strategy';

describe('ComponentFactoryNgElementStrategy', () => {
@@ -32,14 +32,6 @@ describe('ComponentFactoryNgElementStrategy', () => {
strategy = new ComponentFactoryNgElementStrategy(factory, injector);
});

it('should generate a default config for NgElement', () => {
let config = getConfigFromComponentFactory(factory, injector);
expect(config.strategyFactory).toBeTruthy();
expect(config.propertyInputs).toEqual(['fooFoo', 'barBar']);
expect(config.attributeToPropertyInputs.get('foo-foo')).toBe('fooFoo');
expect(config.attributeToPropertyInputs.get('my-bar-bar')).toBe('barBar');
});

it('should create a new strategy from the factory', () => {
const strategyFactory = new ComponentFactoryNgElementStrategyFactory(factory, injector);
expect(strategyFactory.create()).toBeTruthy();
@@ -6,13 +6,13 @@
* found in the LICENSE file at https://angular.io/license
*/

import {Component, ComponentFactory, EventEmitter, Input, NgModule, Output, destroyPlatform} from '@angular/core';
import {Component, EventEmitter, Injector, Input, NgModule, Output, destroyPlatform} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {Subject} from 'rxjs/Subject';

import {NgElementStrategy, NgElementStrategyEvent, NgElementStrategyFactory} from '../src/element-strategy';
import {NgElementConfig, NgElementConstructor, createNgElementConstructor} from '../src/ng-element-constructor';
import {NgElementConstructor, createNgElementConstructor} from '../src/ng-element-constructor';
import {patchEnv, restoreEnv} from '../testing/index';

type WithFooBar = {
@@ -23,27 +23,21 @@ type WithFooBar = {
if (typeof customElements !== 'undefined') {
describe('createNgElementConstructor', () => {
let NgElementCtor: NgElementConstructor<WithFooBar>;
let factory: ComponentFactory<TestComponent>;
let strategy: TestStrategy;
let strategyFactory: TestStrategyFactory;
let injector: Injector;

beforeAll(() => patchEnv());
beforeAll(done => {
destroyPlatform();
platformBrowserDynamic()
.bootstrapModule(TestModule)
.then(ref => {
factory = ref.componentFactoryResolver.resolveComponentFactory(TestComponent);
injector = ref.injector;
strategyFactory = new TestStrategyFactory();
strategy = strategyFactory.testStrategy;

const config: NgElementConfig = {
strategyFactory,
propertyInputs: ['fooFoo', 'barBar'],
attributeToPropertyInputs:
new Map<string, string>([['foo-foo', 'fooFoo'], ['barbar', 'barBar']])
};
NgElementCtor = createNgElementConstructor(config);
NgElementCtor = createNgElementConstructor(TestComponent, {injector, strategyFactory});

// The `@webcomponents/custom-elements/src/native-shim.js` polyfill allows us to create
// new instances of the NgElement which extends HTMLElement, as long as we define it.
@@ -110,8 +104,9 @@ if (typeof customElements !== 'undefined') {
beforeAll(() => {
strategyFactory = new TestStrategyFactory();
strategy = strategyFactory.testStrategy;
NgElementCtorWithChangedAttr = createNgElementConstructor({
strategyFactory: strategyFactory,
NgElementCtorWithChangedAttr = createNgElementConstructor(TestComponent, {
injector,
strategyFactory,
propertyInputs: ['prop1', 'prop2'],
attributeToPropertyInputs:
new Map<string, string>([['attr-1', 'prop1'], ['attr-2', 'prop2']])
@@ -1,35 +1,5 @@
/** @experimental */
export declare class ComponentFactoryNgElementStrategy implements NgElementStrategy {
events: Observable<NgElementStrategyEvent>;
constructor(componentFactory: ComponentFactory<any>, injector: Injector);
protected callNgOnChanges(): void;
connect(element: HTMLElement): void;
protected detectChanges(): void;
disconnect(): void;
getPropertyValue(property: string): any;
protected initializeComponent(element: HTMLElement): void;
protected initializeInputs(): void;
protected initializeOutputs(): void;
protected recordInputChange(property: string, currentValue: any): void;
protected scheduleDetectChanges(): void;
setPropertyValue(property: string, value: any): void;
}

/** @experimental */
export declare class ComponentFactoryNgElementStrategyFactory implements NgElementStrategyFactory {
constructor(componentFactory: ComponentFactory<any>, injector: Injector);
create(): ComponentFactoryNgElementStrategy;
}

/** @experimental */
export declare function createNgElementConstructor<P>(config: NgElementConfig): NgElementConstructor<P>;

/** @experimental */
export declare function getConfigFromComponentFactory(componentFactory: ComponentFactory<any>, injector: Injector): {
strategyFactory: ComponentFactoryNgElementStrategyFactory;
propertyInputs: string[];
attributeToPropertyInputs: Map<string, string>;
};
export declare function createNgElementConstructor<P>(component: Type<any>, config: NgElementConfig): NgElementConstructor<P>;

/** @experimental */
export declare abstract class NgElement extends HTMLElement {
@@ -42,9 +12,10 @@ export declare abstract class NgElement extends HTMLElement {

/** @experimental */
export interface NgElementConfig {
attributeToPropertyInputs: Map<string, string>;
propertyInputs: string[];
strategyFactory: NgElementStrategyFactory;
attributeToPropertyInputs?: Map<string, string>;
injector: Injector;
propertyInputs?: string[];
strategyFactory?: NgElementStrategyFactory;
}

/** @experimental */

0 comments on commit 1936808

Please sign in to comment.
You can’t perform that action at this time.