Tree-Shaking in React Output Target

packages/example-project/component-library-angular/src/directives/angular-component-lib/utils.ts

@@ -1,5 +1,3 @@
-/* eslint-disable */
-/* tslint:disable */
 import { fromEvent } from 'rxjs';
 
 export const proxyInputs = (Cmp: any, inputs: string[]) => {
@@ -30,24 +28,14 @@ export const proxyOutputs = (instance: any, el: any, events: string[]) => {
   events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
 };
 
-export const defineCustomElement = (tagName: string, customElement: any) => {
-  if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
-    customElements.define(tagName, customElement);
-  }
-};
-
 // tslint:disable-next-line: only-arrow-functions
-export function ProxyCmp(opts: { tagName: string; customElement?: any; inputs?: any; methods?: any }) {
+export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
   const decorator = function (cls: any) {
-    const { tagName, customElement, inputs, methods } = opts;
-
-    defineCustomElement(tagName, customElement);
-
-    if (inputs) {
-      proxyInputs(cls, inputs);
+    if (opts.inputs) {
+      proxyInputs(cls, opts.inputs);
     }
-    if (methods) {
-      proxyMethods(cls, methods);
+    if (opts.methods) {
+      proxyMethods(cls, opts.methods);
     }
     return cls;
   };

packages/example-project/component-library-angular/src/directives/proxies.ts

@@ -1,23 +1,13 @@
 /* tslint:disable */
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
 
-import type { Components } from 'component-library/components';
-
-import { MyButton as MyButtonCmp } from 'component-library/components/my-button.js';
-import { MyCheckbox as MyCheckboxCmp } from 'component-library/components/my-checkbox.js';
-import { MyComponent as MyComponentCmp } from 'component-library/components/my-component.js';
-import { MyInput as MyInputCmp } from 'component-library/components/my-input.js';
-import { MyPopover as MyPopoverCmp } from 'component-library/components/my-popover.js';
-import { MyRadio as MyRadioCmp } from 'component-library/components/my-radio.js';
-import { MyRadioGroup as MyRadioGroupCmp } from 'component-library/components/my-radio-group.js';
-import { MyRange as MyRangeCmp } from 'component-library/components/my-range.js';
+import { Components } from 'component-library';
 
+import { Button as IButton } from 'component-library/dist/types/components/my-button/my-button';
 export declare interface MyButton extends Components.MyButton {}
 @ProxyCmp({
-  tagName: 'my-button',
-  customElement: MyButtonCmp,
   inputs: [
     'buttonType',
     'color',
@@ -59,9 +49,9 @@ export declare interface MyButton extends Components.MyButton {}
 })
 export class MyButton {
   /** Emitted when the button has focus. */
-  myFocus!: EventEmitter<CustomEvent<void>>;
+  myFocus!: IButton['myFocus'];
   /** Emitted when the button loses focus. */
-  myBlur!: EventEmitter<CustomEvent<void>>;
+  myBlur!: IButton['myBlur'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -70,11 +60,9 @@ export class MyButton {
   }
 }
 
-import { CheckboxChangeEventDetail as ICheckboxCheckboxChangeEventDetail } from 'component-library';
+import { Checkbox as ICheckbox } from 'component-library/dist/types/components/my-checkbox/my-checkbox';
 export declare interface MyCheckbox extends Components.MyCheckbox {}
 @ProxyCmp({
-  tagName: 'my-checkbox',
-  customElement: MyCheckboxCmp,
   inputs: ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value'],
 })
 @Component({
@@ -86,11 +74,11 @@ export declare interface MyCheckbox extends Components.MyCheckbox {}
 })
 export class MyCheckbox {
   /** Emitted when the checked property has changed. */
-  myChange!: EventEmitter<CustomEvent<ICheckboxCheckboxChangeEventDetail>>;
+  myChange!: ICheckbox['myChange'];
   /** Emitted when the toggle has focus. */
-  myFocus!: EventEmitter<CustomEvent<void>>;
+  myFocus!: ICheckbox['myFocus'];
   /** Emitted when the toggle loses focus. */
-  myBlur!: EventEmitter<CustomEvent<void>>;
+  myBlur!: ICheckbox['myBlur'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -99,10 +87,9 @@ export class MyCheckbox {
   }
 }
 
+import { MyComponent as IMyComponent } from 'component-library/dist/types/components/my-component/my-component';
 export declare interface MyComponent extends Components.MyComponent {}
 @ProxyCmp({
-  tagName: 'my-component',
-  customElement: MyComponentCmp,
   inputs: ['age', 'first', 'kidsNames', 'last', 'middle'],
 })
 @Component({
@@ -114,7 +101,7 @@ export declare interface MyComponent extends Components.MyComponent {}
 })
 export class MyComponent {
   /** Testing an event without value */
-  myCustomEvent!: EventEmitter<CustomEvent<number>>;
+  myCustomEvent!: IMyComponent['myCustomEvent'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -123,11 +110,9 @@ export class MyComponent {
   }
 }
 
-import { InputChangeEventDetail as IInputInputChangeEventDetail } from 'component-library';
+import { Input as IInput } from 'component-library/dist/types/components/my-input/my-input';
 export declare interface MyInput extends Components.MyInput {}
 @ProxyCmp({
-  tagName: 'my-input',
-  customElement: MyInputCmp,
   inputs: [
     'accept',
     'autocapitalize',
@@ -196,13 +181,13 @@ export declare interface MyInput extends Components.MyInput {}
 })
 export class MyInput {
   /** Emitted when a keyboard input occurred. */
-  myInput!: EventEmitter<CustomEvent<KeyboardEvent>>;
+  myInput!: IInput['myInput'];
   /** Emitted when the value has changed. */
-  myChange!: EventEmitter<CustomEvent<IInputInputChangeEventDetail>>;
+  myChange!: IInput['myChange'];
   /** Emitted when the input loses focus. */
-  myBlur!: EventEmitter<CustomEvent<void>>;
+  myBlur!: IInput['myBlur'];
   /** Emitted when the input has focus. */
-  myFocus!: EventEmitter<CustomEvent<void>>;
+  myFocus!: IInput['myFocus'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -211,11 +196,9 @@ export class MyInput {
   }
 }
 
-import { OverlayEventDetail as IPopoverOverlayEventDetail } from 'component-library';
+import { Popover as IPopover } from 'component-library/dist/types/components/my-dialog/my-dialog';
 export declare interface MyPopover extends Components.MyPopover {}
 @ProxyCmp({
-  tagName: 'my-popover',
-  customElement: MyPopoverCmp,
   inputs: [
     'animated',
     'backdropDismiss',
@@ -250,13 +233,13 @@ export declare interface MyPopover extends Components.MyPopover {}
 })
 export class MyPopover {
   /** Emitted after the popover has presented. */
-  myPopoverDidPresent!: EventEmitter<CustomEvent<void>>;
+  myPopoverDidPresent!: IPopover['didPresent'];
   /** Emitted before the popover has presented. */
-  myPopoverWillPresent!: EventEmitter<CustomEvent<void>>;
+  myPopoverWillPresent!: IPopover['willPresent'];
   /** Emitted before the popover has dismissed. */
-  myPopoverWillDismiss!: EventEmitter<CustomEvent<IPopoverOverlayEventDetail>>;
+  myPopoverWillDismiss!: IPopover['willDismiss'];
   /** Emitted after the popover has dismissed. */
-  myPopoverDidDismiss!: EventEmitter<CustomEvent<IPopoverOverlayEventDetail>>;
+  myPopoverDidDismiss!: IPopover['didDismiss'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -270,10 +253,9 @@ export class MyPopover {
   }
 }
 
+import { Radio as IRadio } from 'component-library/dist/types/components/my-radio/my-radio';
 export declare interface MyRadio extends Components.MyRadio {}
 @ProxyCmp({
-  tagName: 'my-radio',
-  customElement: MyRadioCmp,
   inputs: ['color', 'disabled', 'mode', 'name', 'value'],
 })
 @Component({
@@ -285,11 +267,11 @@ export declare interface MyRadio extends Components.MyRadio {}
 })
 export class MyRadio {
   /** Emitted when the radio button has focus. */
-  myFocus!: EventEmitter<CustomEvent<void>>;
+  myFocus!: IRadio['myFocus'];
   /** Emitted when the radio button loses focus. */
-  myBlur!: EventEmitter<CustomEvent<void>>;
+  myBlur!: IRadio['myBlur'];
   /** Emitted when the radio button loses focus. */
-  mySelect!: EventEmitter<CustomEvent<void>>;
+  mySelect!: IRadio['mySelect'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -298,11 +280,9 @@ export class MyRadio {
   }
 }
 
-import { RadioGroupChangeEventDetail as IRadioGroupRadioGroupChangeEventDetail } from 'component-library';
+import { RadioGroup as IRadioGroup } from 'component-library/dist/types/components/my-radio-group/my-radio-group';
 export declare interface MyRadioGroup extends Components.MyRadioGroup {}
 @ProxyCmp({
-  tagName: 'my-radio-group',
-  customElement: MyRadioGroupCmp,
   inputs: ['allowEmptySelection', 'name', 'value'],
 })
 @Component({
@@ -314,7 +294,7 @@ export declare interface MyRadioGroup extends Components.MyRadioGroup {}
 })
 export class MyRadioGroup {
   /** Emitted when the value has changed. */
-  myChange!: EventEmitter<CustomEvent<IRadioGroupRadioGroupChangeEventDetail>>;
+  myChange!: IRadioGroup['myChange'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -323,11 +303,9 @@ export class MyRadioGroup {
   }
 }
 
-import { RangeChangeEventDetail as IRangeRangeChangeEventDetail } from 'component-library';
+import { Range as IRange } from 'component-library/dist/types/components/my-range/my-range';
 export declare interface MyRange extends Components.MyRange {}
 @ProxyCmp({
-  tagName: 'my-range',
-  customElement: MyRangeCmp,
   inputs: [
     'color',
     'debounce',
@@ -367,11 +345,11 @@ export declare interface MyRange extends Components.MyRange {}
 })
 export class MyRange {
   /** Emitted when the value property has changed. */
-  myChange!: EventEmitter<CustomEvent<IRangeRangeChangeEventDetail>>;
+  myChange!: IRange['myChange'];
   /** Emitted when the range has focus. */
-  myFocus!: EventEmitter<CustomEvent<void>>;
+  myFocus!: IRange['myFocus'];
   /** Emitted when the range loses focus. */
-  myBlur!: EventEmitter<CustomEvent<void>>;
+  myBlur!: IRange['myBlur'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();

packages/example-project/component-library-angular/src/directives/value-accessor.ts

@@ -1,7 +1,6 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ElementRef, HostListener } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
-@Directive({})
 export class ValueAccessor implements ControlValueAccessor {
   private onChange: (value: any) => void = () => {
     /**/

packages/example-project/component-library-vue/src/proxies.ts

@@ -5,7 +5,7 @@ import { defineContainer } from './vue-component-lib/utils';
 
 import type { JSX } from 'component-library';
 
-export const MyButton = /*@__PURE__*/ defineContainer<JSX.MyButton>('my-button', undefined, [
+export const MyButton = /*@__PURE__*/ defineContainer<JSX.MyButton>('my-button', [
   'color',
   'buttonType',
   'disabled',
@@ -25,13 +25,14 @@ export const MyButton = /*@__PURE__*/ defineContainer<JSX.MyButton>('my-button',
 
 export const MyCheckbox = /*@__PURE__*/ defineContainer<JSX.MyCheckbox>(
   'my-checkbox',
-  undefined,
   ['color', 'name', 'checked', 'indeterminate', 'disabled', 'value', 'myChange', 'myFocus', 'myBlur', 'myStyle'],
-  'checked',
-  'myChange'
+  {
+    modelProp: 'checked',
+    modelUpdateEvent: 'myChange',
+  }
 );
 
-export const MyComponent = /*@__PURE__*/ defineContainer<JSX.MyComponent>('my-component', undefined, [
+export const MyComponent = /*@__PURE__*/ defineContainer<JSX.MyComponent>('my-component', [
   'first',
   'middle',
   'last',
@@ -42,7 +43,6 @@ export const MyComponent = /*@__PURE__*/ defineContainer<JSX.MyComponent>('my-co
 
 export const MyInput = /*@__PURE__*/ defineContainer<JSX.MyInput>(
   'my-input',
-  undefined,
   [
     'color',
     'accept',
@@ -75,11 +75,13 @@ export const MyInput = /*@__PURE__*/ defineContainer<JSX.MyInput>(
     'myBlur',
     'myFocus',
   ],
-  'value',
-  'myChange'
+  {
+    modelProp: 'value',
+    modelUpdateEvent: 'myChange',
+  }
 );
 
-export const MyPopover = /*@__PURE__*/ defineContainer<JSX.MyPopover>('my-popover', undefined, [
+export const MyPopover = /*@__PURE__*/ defineContainer<JSX.MyPopover>('my-popover', [
   'component',
   'componentProps',
   'keyboardClose',
@@ -95,7 +97,7 @@ export const MyPopover = /*@__PURE__*/ defineContainer<JSX.MyPopover>('my-popove
   'myPopoverDidDismiss',
 ]);
 
-export const MyRadio = /*@__PURE__*/ defineContainer<JSX.MyRadio>('my-radio', undefined, [
+export const MyRadio = /*@__PURE__*/ defineContainer<JSX.MyRadio>('my-radio', [
   'color',
   'name',
   'disabled',
@@ -108,15 +110,15 @@ export const MyRadio = /*@__PURE__*/ defineContainer<JSX.MyRadio>('my-radio', un
 
 export const MyRadioGroup = /*@__PURE__*/ defineContainer<JSX.MyRadioGroup>(
   'my-radio-group',
-  undefined,
   ['allowEmptySelection', 'name', 'value', 'myChange'],
-  'value',
-  'myChange'
+  {
+    modelProp: 'value',
+    modelUpdateEvent: 'myChange',
+  }
 );
 
 export const MyRange = /*@__PURE__*/ defineContainer<JSX.MyRange>(
   'my-range',
-  undefined,
   [
     'color',
     'debounce',
@@ -135,6 +137,8 @@ export const MyRange = /*@__PURE__*/ defineContainer<JSX.MyRange>(
     'myFocus',
     'myBlur',
   ],
-  'value',
-  'myChange'
+  {
+    modelProp: 'value',
+    modelUpdateEvent: 'myChange',
+  }
 );