refactor(angular): use Stencil output target for Angular bindings (#23986)

angular/src/directives/angular-component-lib/utils.ts

@@ -5,26 +5,26 @@ import { fromEvent } from 'rxjs';
 export const proxyInputs = (Cmp: any, inputs: string[]) => {
   const Prototype = Cmp.prototype;
   inputs.forEach(item => {
-  Object.defineProperty(Prototype, item, {
+    Object.defineProperty(Prototype, item, {
-    get() {
+      get() {
-    return this.el[item];
+        return this.el[item];
-    },
+      },
-    set(val: any) {
+      set(val: any) {
-    this.z.runOutsideAngular(() => (this.el[item] = val));
+        this.z.runOutsideAngular(() => (this.el[item] = val));
-    }
+      }
-  });
+    });
   });
 };
 
 export const proxyMethods = (Cmp: any, methods: string[]) => {
   const Prototype = Cmp.prototype;
   methods.forEach(methodName => {
-  Prototype[methodName] = function () {
+    Prototype[methodName] = function () {
-    const args = arguments;
+      const args = arguments;
-    return this.z.runOutsideAngular(() =>
+      return this.z.runOutsideAngular(() =>
-    this.el[methodName].apply(this.el, args)
+        this.el[methodName].apply(this.el, args)
-    );
+      );
-  };
+    };
   });
 };
 
@@ -33,14 +33,14 @@ export const proxyOutputs = (instance: any, el: any, events: string[]) => {
 }
 
 export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
-  const decorator =  function(cls: any){
+  const decorator = function(cls: any) {
-  if (opts.inputs) {
+    if (opts.inputs) {
-    proxyInputs(cls, opts.inputs);
+      proxyInputs(cls, opts.inputs);
-  }
+    }
-  if (opts.methods) {
+    if (opts.methods) {
-    proxyMethods(cls, opts.methods);
+      proxyMethods(cls, opts.methods);
-  }
+    }
-  return cls;
+    return cls;
   };
   return decorator;
 }

angular/src/directives/navigation/nav-delegate.ts

@@ -1,7 +1,7 @@
 import { ComponentFactoryResolver, Directive, ElementRef, Injector, ViewContainerRef } from '@angular/core';
 
 import { AngularDelegate } from '../../providers/angular-delegate';
-import { ProxyCmp, proxyOutputs } from '../proxies-utils';
+import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
 
 @ProxyCmp({
   inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'],

angular/src/directives/overlays/modal.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 /* tslint:disable */
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, NgZone, TemplateRef } from "@angular/core";
-import { ProxyCmp, proxyOutputs } from "../proxies-utils";
+import { ProxyCmp, proxyOutputs } from "../angular-component-lib/utils";
 import { Components } from "@ionic/core";
 export declare interface IonModal extends Components.IonModal {
 }

angular/src/directives/overlays/popover.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 /* tslint:disable */
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, NgZone, TemplateRef } from "@angular/core";
-import { ProxyCmp, proxyOutputs } from "../proxies-utils";
+import { ProxyCmp, proxyOutputs } from "../angular-component-lib/utils";
 import { Components } from "@ionic/core";
 export declare interface IonPopover extends Components.IonPopover {
 }

angular/src/directives/proxies-list.txt

@@ -1,5 +1,5 @@
 
-import type * as d from './proxies';
+import * as d from './proxies';
 
 export const DIRECTIVES = [
   d.IonAccordion,

angular/src/directives/virtual-scroll/virtual-scroll.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EmbeddedViewRef, IterableDiffer, IterableDiffers, NgZone, SimpleChanges, TrackByFunction } from '@angular/core';
 import { Cell, CellType, FooterHeightFn, HeaderFn, HeaderHeightFn, ItemHeightFn } from '@ionic/core';
 
-import { ProxyCmp } from '../proxies-utils';
+import { ProxyCmp } from '../angular-component-lib/utils';
 
 import { VirtualFooter } from './virtual-footer';
 import { VirtualHeader } from './virtual-header';

core/package-lock.json

@@ -18,6 +18,7 @@
         "@jest/core": "^26.6.3",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
+        "@stencil/angular-output-target": "^0.2.0",
         "@stencil/react-output-target": "^0.1.0",
         "@stencil/sass": "1.3.2",
         "@stencil/vue-output-target": "^0.5.1",
@@ -1356,6 +1357,12 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@stencil/angular-output-target": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.2.0.tgz",
+      "integrity": "sha512-Ptr5vigf8v+EnF9Y9LXTKimcVPfB9arC5FnSuKt5ZdNQ8IATWGLx4fhoD2/LThhkPwG9QtjDj9A4GPidu0Fomg==",
+      "dev": true
+    },
     "node_modules/@stencil/core": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.6.0.tgz",
@@ -15015,6 +15022,12 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@stencil/angular-output-target": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.2.0.tgz",
+      "integrity": "sha512-Ptr5vigf8v+EnF9Y9LXTKimcVPfB9arC5FnSuKt5ZdNQ8IATWGLx4fhoD2/LThhkPwG9QtjDj9A4GPidu0Fomg==",
+      "dev": true
+    },
     "@stencil/core": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.6.0.tgz",

core/package.json

@@ -40,6 +40,7 @@
     "@jest/core": "^26.6.3",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
+    "@stencil/angular-output-target": "^0.2.0",
     "@stencil/react-output-target": "^0.1.0",
     "@stencil/sass": "1.3.2",
     "@stencil/vue-output-target": "^0.5.1",

core/stencil.config.ts

@@ -1,5 +1,6 @@
 import { Config } from '@stencil/core';
 import { sass } from '@stencil/sass';
+import { angularOutputTarget } from '@stencil/angular-output-target';
 import { vueOutputTarget } from '@stencil/vue-output-target';
 import { reactOutputTarget } from '@stencil/react-output-target';
 
@@ -180,11 +181,9 @@ export const config: Config = {
     //   type: 'stats',
     //   file: 'stats.json'
     // },
-    {
+    angularOutputTarget({
-      type: 'angular',
       componentCorePackage: '@ionic/core',
       directivesProxyFile: '../angular/src/directives/proxies.ts',
-      directivesUtilsFile: '../angular/src/directives/proxies-utils.ts',
       directivesArrayFile: '../angular/src/directives/proxies-list.txt',
       excludeComponents: [
         // overlays
@@ -211,8 +210,44 @@ export const config: Config = {
         // auxiliar
         'ion-picker-column',
         'ion-virtual-scroll'
-      ]
+      ],
-    }
+      /**
+       * TODO: Abstract custom Ionic value accessor functionality
+       * to be configurable with Stencil generated value accessors.
+       */
+      // valueAccessorConfigs: [
+      //   {
+      //     elementSelectors: ['ion-input:not([type=number])', 'ion-textarea', 'ion-searchbar'],
+      //     event: 'ionChange',
+      //     targetAttr: 'value',
+      //     type: 'text',
+      //   },
+      //   {
+      //     elementSelectors: ['ion-input[type=number]'],
+      //     event: 'ionChange',
+      //     targetAttr: 'value',
+      //     type: 'number',
+      //   },
+      //   {
+      //     elementSelectors: ['ion-checkbox', 'ion-toggle'],
+      //     event: 'ionChange',
+      //     targetAttr: 'checked',
+      //     type: 'boolean',
+      //   },
+      //   {
+      //     elementSelectors: ['ion-range', 'ion-select', 'ion-radio-group', 'ion-segment', 'ion-datetime'],
+      //     event: 'ionChange',
+      //     targetAttr: 'value',
+      //     type: 'select',
+      //   },
+      //   {
+      //     elementSelectors: ['ion-radio'],
+      //     event: 'ionSelect',
+      //     targetAttr: 'checked',
+      //     type: 'radio',
+      //   },
+      // ]
+    }),
   ],
   buildEs5: 'prod',
   extras: {