fix(angular, react, vue): use defineCustomElement import to improve treeshaking

packages/angular-output-target/angular-component-lib/utils.ts

@@ -43,11 +43,13 @@ export const defineCustomElement = (tagName: string, customElement: any) => {
 }
 
 // tslint:disable-next-line: only-arrow-functions
-export function ProxyCmp(opts: { tagName: string, customElement?: any, inputs?: any; methods?: any }) {
+export function ProxyCmp(opts: { defineCustomElementFn?: () => void, inputs?: any; methods?: any }) {
   const decorator = function (cls: any) {
-    const { tagName, customElement, inputs, methods } = opts;
+    const { defineCustomElementFn, inputs, methods } = opts;
 
-    defineCustomElement(tagName, customElement);
+    if (defineCustomElementFn !== undefined) {
+      defineCustomElementFn();
+    }
 
     if (inputs) {
       proxyInputs(cls, inputs);

packages/angular-output-target/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "0.3.0",
+  "version": "0.4.0-2",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -37,6 +37,9 @@
     "@angular/core": "8.2.14",
     "@angular/forms": "8.2.14"
   },
+  "peerDependencies": {
+    "@stencil/core": "^2.9.0"
+  },
   "jest": {
     "transform": {
       "^.+\\.(js|ts|tsx)$": "<rootDir>/test/jest.preprocessor.js"

packages/angular-output-target/src/generate-angular-component.ts

@@ -124,8 +124,7 @@ function getProxyCmp(tagName: string, includeCustomElement: boolean, inputs: str
   const hasMethods = methods.length > 0;
 
   const proxMeta: string[] = [
-    `tagName: \'${tagName}\'`,
-    `customElement: ${includeCustomElement ? dashToPascalCase(tagName) + 'Cmp' : 'undefined'}`
+    `defineCustomElementFn: ${includeCustomElement ? 'define' + dashToPascalCase(tagName) : 'undefined'}`
   ];
 
   if (hasInputs) proxMeta.push(`inputs: ['${inputs.join(`', '`)}']`);

packages/angular-output-target/src/output-angular.ts

@@ -101,7 +101,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     const cmpImports = components.map(component => {
       const pascalImport = dashToPascalCase(component.tagName);
 
-      return `import { ${pascalImport} as ${pascalImport}Cmp } from '${normalizePath(outputTarget.componentCorePackage!)}/${outputTarget.customElementsDir ||
+      return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage!)}/${outputTarget.customElementsDir ||
         'components'
       }/${component.tagName}.js';`;
     });

packages/react-output-target/__tests__/generate-react-components.spec.ts

@@ -10,7 +10,7 @@ describe('createComponentDefinition', () => {
       methods: [],
       events: [],
     }, true);
-    expect(output[0]).toEqual(`export const MyComponent = /*@__PURE__*/createReactComponent<JSX.MyComponent, HTMLMyComponentElement>('my-component', undefined, undefined, MyComponentCmp);`);
+    expect(output[0]).toEqual(`export const MyComponent = /*@__PURE__*/createReactComponent<JSX.MyComponent, HTMLMyComponentElement>('my-component', undefined, undefined, defineMyComponent);`);
   });
 
   it('should create a React component without custom element support', () => {

packages/react-output-target/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/react-output-target",
-  "version": "0.1.0",
+  "version": "0.2.0-0",
   "description": "React output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -32,7 +32,7 @@
     "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues"
   },
   "peerDependencies": {
-    "@stencil/core": ">=1.8.0"
+    "@stencil/core": "^2.9.0"
   },
   "devDependencies": {
     "@types/react": "^16.7.0",

packages/react-output-target/react-component-lib/createComponent.tsx

@@ -4,7 +4,6 @@ import {
   attachProps,
   createForwardRef,
   dashToPascalCase,
-  defineCustomElement,
   isCoveredByReact,
   mergeRefs,
 } from './utils';
@@ -30,9 +29,11 @@ export const createReactComponent = <
     originalProps: StencilReactInternalProps<ElementType>,
     propsToPass: any,
   ) => ExpandedPropsTypes,
-  customElement?: any,
+  defineCustomElement?: () => void,
 ) => {
-  defineCustomElement(tagName, customElement);
+  if (defineCustomElement !== undefined) {
+    defineCustomElement();
+  }
 
   const displayName = dashToPascalCase(tagName);
   const ReactComponent = class extends React.Component<StencilReactInternalProps<ElementType>> {

packages/react-output-target/src/output-react.ts

@@ -76,7 +76,7 @@ import { createReactComponent } from './react-component-lib';\n`;
     const cmpImports = components.map(component => {
       const pascalImport = dashToPascalCase(component.tagName);
 
-      return `import { ${pascalImport} as ${pascalImport}Cmp } from '${normalizePath(outputTarget.componentCorePackage!)}/${outputTarget.customElementsDir ||
+      return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage!)}/${outputTarget.customElementsDir ||
         'components'
       }/${component.tagName}.js';`;
     });
@@ -117,7 +117,7 @@ export function createComponentDefinition(cmpMeta: ComponentCompilerMeta, includ
   let template = `export const ${tagNameAsPascal} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${cmpMeta.tagName}'`;
 
   if (includeCustomElement) {
-    template += `, undefined, undefined, ${tagNameAsPascal}Cmp`;
+    template += `, undefined, undefined, define${tagNameAsPascal}`;
   }
 
   template += `);`;

packages/svelte-output-target/package.json

@@ -31,7 +31,7 @@
     "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues"
   },
   "peerDependencies": {
-    "@stencil/core": ">=1.8.0 || ^2.0.0"
+    "@stencil/core": "^2.9.0"
   },
   "devDependencies": {
     "estree-walker": "^2.0.1",

packages/vue-output-target/__tests__/generate-vue-components.spec.ts

@@ -23,7 +23,7 @@ export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent>
       events: [],
     });
     expect(output).toEqual(`
-export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent>('my-component', MyComponentCmp);
+export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent>('my-component', defineMyComponent);
 `
   });
 

packages/vue-output-target/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/vue-output-target",
-  "version": "0.5.1",
+  "version": "0.6.0-0",
   "description": "Vue output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -32,7 +32,7 @@
     "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues"
   },
   "peerDependencies": {
-    "@stencil/core": ">=1.8.0 || ^2.0.0"
+    "@stencil/core": "^2.9.0"
   },
   "jest": {
     "transform": {

packages/vue-output-target/src/generate-vue-component.ts

@@ -8,7 +8,7 @@ export const createComponentDefinition = (
   includeCustomElement: boolean = false
 ) => (cmpMeta: Pick<ComponentCompilerMeta, 'properties' | 'tagName' | 'methods' | 'events'>) => {
   const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-  const importAs = (includeCustomElement) ? tagNameAsPascal + 'Cmp' : 'undefined';
+  const importAs = (includeCustomElement) ? 'define' + tagNameAsPascal : 'undefined';
 
   let props: string[] = [];
 

packages/vue-output-target/src/output-vue.ts

@@ -65,7 +65,7 @@ import { defineContainer } from './vue-component-lib/utils';\n`;
     const cmpImports = components.map(component => {
       const pascalImport = dashToPascalCase(component.tagName);
 
-      return `import { ${pascalImport} as ${pascalImport}Cmp } from '${normalizePath(outputTarget.componentCorePackage!)}/${outputTarget.customElementsDir ||
+      return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage!)}/${outputTarget.customElementsDir ||
         'components'
       }/${component.tagName}.js';`;
     });

packages/vue-output-target/vue-component-lib/utils.ts

@@ -51,7 +51,7 @@ const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses:
 */
 export const defineContainer = <Props>(
   name: string,
-  customElement: any,
+  defineCustomElement: any,
   componentProps: string[] = [],
   modelProp?: string,
   modelUpdateEvent?: string,
@@ -63,12 +63,8 @@ export const defineContainer = <Props>(
   * They refer to whatever properties are set on an instance of a component.
   */
 
-  if (
-    customElement !== undefined &&
-    typeof customElements !== 'undefined' &&
-    !customElements.get(name)
-  ) {
-    customElements.define(name, customElement);
+  if (defineCustomElement !== undefined) {
+    defineCustomElement();
   }
 
   const Container = defineComponent<Props & InputProps>((props: any, { attrs, slots, emit }) => {