feat(custom-elements): add experimental custom elements build (#22863)

Co-authored-by: Liam DeBeasi <[email protected]>

Author: adamdbradley

.gitignore

@@ -59,10 +59,10 @@ prerender-static.html
 angular/css/
 packages/react/css/
 packages/vue/css/
+core/components/
 core/css/
 core/hydrate/
 core/loader/
 core/www/
 .stencil/
 angular/build/
-core/components/

.scripts/common.js

@@ -10,6 +10,7 @@ const rootDir = path.join(__dirname, '../');
 
 const packages = [
   'core',
+  'core/components',
   'docs',
   'angular',
   'packages/react',

.scripts/test-dist.js

@@ -7,7 +7,25 @@ const fs = require('fs');
 [
   // core
   {
-    files: ['../core/dist/index.js', '../core/dist/ionic/index.esm.js']
+    files: [
+      '../core/css/core.css', 
+      '../core/css/core.css.map', 
+      '../core/css/normalize.css', 
+      '../core/css/normalize.css.map', 
+      '../core/components/index.js', 
+      '../core/components/index.d.ts', 
+      '../core/components/package.json',
+      '../core/dist/index.js', 
+      '../core/dist/ionic/index.esm.js', 
+    ]
+  },
+  // hydrate
+  {
+    files: [
+      '../core/hydrate/index.js',
+      '../core/hydrate/index.d.ts',
+      '../core/hydrate/package.json'
+    ]
   },
   // angular
   {

angular/src/directives/navigation/ion-router-outlet.ts

@@ -1,6 +1,7 @@
 import { Location } from '@angular/common';
 import { Attribute, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Optional, Output, SkipSelf, ViewContainerRef } from '@angular/core';
 import { ActivatedRoute, ChildrenOutletContexts, OutletContext, PRIMARY_OUTLET, Router } from '@angular/router';
+import { componentOnReady } from '@ionic/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { distinctUntilChanged, filter, switchMap } from 'rxjs/operators';
 
@@ -96,13 +97,12 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
         this.activateWith(context.route, context.resolver || null);
       }
     }
-    if ((this.nativeEl as any).componentOnReady) {
-      this.nativeEl.componentOnReady().then(() => {
-        if (this._swipeGesture === undefined) {
-          this.swipeGesture = this.config.getBoolean('swipeBackEnabled', (this.nativeEl as any).mode === 'ios');
-        }
-      });
-    }
+
+    new Promise(resolve => componentOnReady(this.nativeEl, resolve)).then(() => {
+      if (this._swipeGesture === undefined) {
+        this.swipeGesture = this.config.getBoolean('swipeBackEnabled', (this.nativeEl as any).mode === 'ios');
+      }
+    });
   }
 
   get isActivated(): boolean {

angular/src/directives/proxies.ts

@@ -278,8 +278,8 @@ export class IonHeader {
 }
 export declare interface IonIcon extends Components.IonIcon {
 }
-@ProxyCmp({ inputs: ["ariaLabel", "color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "size", "src"] })
-@Component({ selector: "ion-icon", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["ariaLabel", "color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "size", "src"] })
+@ProxyCmp({ inputs: ["ariaHidden", "ariaLabel", "color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] })
+@Component({ selector: "ion-icon", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["ariaHidden", "ariaLabel", "color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] })
 export class IonIcon {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {

angular/src/types/interfaces.ts

@@ -10,6 +10,6 @@ export interface IonicWindow extends Window {
 }
 
 export interface HTMLStencilElement extends HTMLElement {
-  componentOnReady(): Promise<this>;
-  forceUpdate(): void;
+  componentOnReady?(): Promise<this>;
+  forceUpdate?(): void;
 }

core/README.md

@@ -40,6 +40,24 @@ The `@ionic/core` package can by used in simple HTML, or by vanilla JavaScript w
 * [@ionic/angular](https://www.npmjs.com/package/@ionic/angular)
 
 
+## Custom Elements Build (Experimental)
+
+In addition to the default, self lazy-loading components built by Stencil, this package also comes with each component exported as a stand-alone custom element within `@ionic/core/components`. Each component extends `HTMLElement`, and does not lazy-load itself. Instead, this package is useful for projects already using a bundler such as Webpack or Rollup. While all components are available to be imported, the custom elements build also ensures bundlers only import what's used, and tree-shakes any unused components.
+
+Below is an example of importing `ion-toggle`, and initializing Ionic so it's able to correctly load the "mode", such as Material Design or iOS. Additionally, the `initialize({...})` function can receive the Ionic config.
+
+```typescript
+import { IonBadge } from "@ionic/core/components/ion-badge";
+import { initialize } from "@ionic/core/components";
+
+initialize();
+
+customElements.define("ion-badge", IonBadge);
+```
+
+Notice how `IonBadge` is imported from `@ionic/core/components/ion-badge` rather than just `@ionic/core/components`. Additionally, the `initialize` function is imported from `@ionic/core/components` rather than `@ionic/core`. All of this helps to ensure bundlers do not pull in more code than is needed.
+
+
 ## How to contribute
 
 [Check out the CONTRIBUTE guide](CONTRIBUTING.md)