iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

PR Close #22413
This commit is contained in:
Andrew Seguin 2018-03-01 22:34:21 -08:00 committed by Miško Hevery
parent d2be675acc
commit 19368085aa
9 changed files with 65 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
aio/src/app/custom-elements/elements-loader.spec.ts
View File

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

24
aio/src/app/custom-elements/elements-loader.ts
View File

@ -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,12 +44,10 @@ 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);
@ -58,13 +55,4 @@ export class ElementsLoader {
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);
}
}

6
aio/yarn.lock
View File

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

1
packages/elements/public_api.ts
View File

@ -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';

21
packages/elements/src/component-factory-strategy.ts
View File

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

50
packages/elements/src/ng-element-constructor.ts
View File

@ -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
packages/elements/test/component-factory-strategy_spec.ts
View File

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

21
packages/elements/test/ng-element-constructor_spec.ts
View File

@ -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,9 +23,9 @@ 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 => {
@ -33,17 +33,11 @@ if (typeof customElements !== 'undefined') {
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']])

39
tools/public_api_guard/elements/elements.d.ts vendored
View File

@ -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 */