Skip to content
Permalink
Browse files

feat(elements): rename API to createCustomElement (#22413)

PR Close #22413
  • Loading branch information...
andrewseguin authored and mhevery committed Mar 14, 2018
1 parent 39a12d2 commit 167fdf745ce2a257cd614396141d282ea0db296e
@@ -8,7 +8,7 @@ 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 } from '@angular/elements';
import { createCustomElement } from '@angular/elements';

@Injectable()
export class ElementsLoader {
@@ -44,10 +44,10 @@ export class ElementsLoader {

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

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

return customElements.whenDefined(selector);
@@ -12,7 +12,7 @@
* Entry point for all public APIs of the `elements` package.
*/
export {NgElementStrategy, NgElementStrategyEvent, NgElementStrategyFactory} from './src/element-strategy';
export {NgElement, NgElementConfig, NgElementConstructor, WithProperties, createNgElementConstructor} from './src/ng-element-constructor';
export {NgElement, NgElementConfig, NgElementConstructor, WithProperties, createCustomElement} from './src/create-custom-element';
export {VERSION} from './src/version';

// This file only reexports content of the `src` folder. Keep it that way.
@@ -71,13 +71,13 @@ export interface NgElementConfig {
* @description Builds a class that encapsulates the functionality of the provided component and
* uses the config's information to provide more context to the class. Takes the component factory's
* inputs and outputs to convert them to the proper custom element API and add hooks to input
* changes. Passes the config's injector to each created instance (may be overriden with the
* changes. Passes the config's injector to each created instance (may be overridden with the
* static property to affect all newly created instances, or as a constructor argument for
* one-off creations).
*
* @experimental
*/
export function createNgElementConstructor<P>(
export function createCustomElement<P>(
component: Type<any>, config: NgElementConfig): NgElementConstructor<P> {
const inputs = getComponentInputs(component, config.injector);

@@ -12,15 +12,15 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {Subject} from 'rxjs/Subject';

import {NgElementStrategy, NgElementStrategyEvent, NgElementStrategyFactory} from '../src/element-strategy';
import {NgElementConstructor, createNgElementConstructor} from '../src/ng-element-constructor';
import {NgElementConstructor, createCustomElement} from '../src/create-custom-element';

type WithFooBar = {
fooFoo: string,
barBar: string
};

if (typeof customElements !== 'undefined') {
describe('createNgElementConstructor', () => {
describe('createCustomElement', () => {
let NgElementCtor: NgElementConstructor<WithFooBar>;
let strategy: TestStrategy;
let strategyFactory: TestStrategyFactory;
@@ -35,7 +35,7 @@ if (typeof customElements !== 'undefined') {
strategyFactory = new TestStrategyFactory();
strategy = strategyFactory.testStrategy;

NgElementCtor = createNgElementConstructor(TestComponent, {injector, strategyFactory});
NgElementCtor = createCustomElement(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.
@@ -101,7 +101,7 @@ if (typeof customElements !== 'undefined') {
beforeAll(() => {
strategyFactory = new TestStrategyFactory();
strategy = strategyFactory.testStrategy;
NgElementCtorWithChangedAttr = createNgElementConstructor(TestComponent, {
NgElementCtorWithChangedAttr = createCustomElement(TestComponent, {
injector,
strategyFactory,
attributeToPropertyInputs: {'attr-1': 'fooFoo', 'attr-2': 'barbar'}
@@ -1,5 +1,5 @@
/** @experimental */
export declare function createNgElementConstructor<P>(component: Type<any>, config: NgElementConfig): NgElementConstructor<P>;
export declare function createCustomElement<P>(component: Type<any>, config: NgElementConfig): NgElementConstructor<P>;

/** @experimental */
export declare abstract class NgElement extends HTMLElement {

0 comments on commit 167fdf7

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