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

PR Close #22413

aio/src/app/custom-elements/elements-loader.ts

@@ -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 =
+      const CustomElement =
-          createNgElementConstructor(CustomElementComponent, {injector: elementModuleRef.injector});
+          createCustomElement(CustomElementComponent, {injector: elementModuleRef.injector});
 
-      customElements!.define(selector, NgElement);
+      customElements!.define(selector, CustomElement);
       this.elementsToLoad.delete(selector);
 
       return customElements.whenDefined(selector);

packages/elements/public_api.ts

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

packages/elements/src/create-custom-element.ts

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

packages/elements/test/create-custom-element_spec.ts

@@ -12,7 +12,7 @@ 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,
@@ -20,7 +20,7 @@ type WithFooBar = {
 };
 
 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'}

tools/public_api_guard/elements/elements.d.ts

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