Add ability to skip polyfills and registration.

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

@@ -0,0 +1,86 @@
+import { ComponentCompilerMeta } from '@stencil/core/internal';
+import { generateProxies } from '../src/output-react';
+import { PackageJSON, OutputTargetReact } from '../src/types';
+
+describe('generateProxies', () => {
+  const components: ComponentCompilerMeta[] = [];
+  const pkgData: PackageJSON = {
+    types: 'dist/types/index.d.ts',
+  };
+  const rootDir: string = '';
+  beforeEach(() => {});
+
+  it('should include both polyfills and definCustomElements when both are true in the outputTarget', () => {
+    const outputTarget: OutputTargetReact = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-react/src/proxies.ts',
+      includePolyfills: true,
+      includeDefineCustomElements: true,
+    };
+
+    const finalText = generateProxies(components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+
+import { JSX } from 'component-library';
+
+import { applyPolyfills, defineCustomElements } from 'component-library/loader';
+
+applyPolyfills().then(() => defineCustomElements());
+
+`,
+    );
+  });
+
+  it('should include only defineCustomElements when includePolyfills is false in the outputTarget', () => {
+    const outputTarget: OutputTargetReact = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-react/src/proxies.ts',
+      includePolyfills: false,
+      includeDefineCustomElements: true,
+    };
+
+    const finalText = generateProxies(components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+
+import { JSX } from 'component-library';
+
+import { defineCustomElements } from 'component-library/loader';
+
+defineCustomElements();
+
+`,
+    );
+  });
+
+  it('should not include defineCustomElements or applyPolyfills if both are false in the outputTarget', () => {
+    const outputTarget: OutputTargetReact = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-react/src/proxies.ts',
+      includePolyfills: false,
+      includeDefineCustomElements: false,
+    };
+
+    const finalText = generateProxies(components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+
+import { JSX } from 'component-library';
+
+
+
+
+`,
+    );
+  });
+});

packages/react-output-target/package.json

@@ -19,8 +19,7 @@
     "rollup": "rollup -c",
     "version": "npm run build",
     "release": "np",
-    "test": "jest --passWithNoTests",
-    "test.watch": "jest --watch"
+    "test": "../../node_modules/.bin/jest"
   },
   "repository": {
     "type": "git",

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

@@ -1,5 +1,5 @@
 import path from 'path';
-import { OutputTargetReact } from './types';
+import { OutputTargetReact, PackageJSON } from './types';
 import { dashToPascalCase, normalizePath, readPackageJson, relativeImport, sortBy } from './utils';
 import { CompilerCtx, ComponentCompilerMeta, Config } from '@stencil/core/internal';
 
@@ -11,24 +11,25 @@ export async function reactProxyOutput(
 ) {
   const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
   const rootDir = config.rootDir as string;
+  const pkgData = await readPackageJson(rootDir);
 
-  await generateProxies(compilerCtx, filteredComponents, outputTarget, rootDir);
+  const finalText = generateProxies(filteredComponents, pkgData, outputTarget, rootDir);
+  await compilerCtx.fs.writeFile(outputTarget.proxiesFile, finalText);
   await copyResources(config, outputTarget);
 }
 
 function getFilteredComponents(excludeComponents: string[] = [], cmps: ComponentCompilerMeta[]) {
-  return sortBy(cmps, cmp => cmp.tagName).filter(
-    c => !excludeComponents.includes(c.tagName) && !c.internal,
+  return sortBy(cmps, (cmp) => cmp.tagName).filter(
+    (c) => !excludeComponents.includes(c.tagName) && !c.internal,
   );
 }
 
-async function generateProxies(
-  compilerCtx: CompilerCtx,
+export function generateProxies(
   components: ComponentCompilerMeta[],
+  pkgData: PackageJSON,
   outputTarget: OutputTargetReact,
   rootDir: string,
 ) {
-  const pkgData = await readPackageJson(rootDir);
   const distTypesDir = path.dirname(pkgData.types);
   const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
   const componentsTypeFile = relativeImport(outputTarget.proxiesFile, dtsFilePath, '.d.ts');
@@ -42,14 +43,22 @@ import { createReactComponent } from './react-component-lib';\n`;
     ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`
     : `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';\n`;
 
-  const sourceImports = `import { ${REGISTER_CUSTOM_ELEMENTS}, ${APPLY_POLYFILLS} } from '${normalizePath(
+  const pathToCorePackageLoader = normalizePath(
     path.join(
       outputTarget.componentCorePackage || '',
       outputTarget.loaderDir || DEFAULT_LOADER_DIR,
     ),
-  )}';\n`;
-
-  const registerCustomElements = `${APPLY_POLYFILLS}().then(() => ${REGISTER_CUSTOM_ELEMENTS}());`;
+  );
+  let sourceImports = '';
+  let registerCustomElements = '';
+
+  if (outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) {
+    sourceImports = `import { ${APPLY_POLYFILLS}, ${REGISTER_CUSTOM_ELEMENTS} } from '${pathToCorePackageLoader}';\n`;
+    registerCustomElements = `${APPLY_POLYFILLS}().then(() => ${REGISTER_CUSTOM_ELEMENTS}());`;
+  } else if (!outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) {
+    sourceImports = `import { ${REGISTER_CUSTOM_ELEMENTS} } from '${pathToCorePackageLoader}';\n`;
+    registerCustomElements = `${REGISTER_CUSTOM_ELEMENTS}();`;
+  }
 
   const final: string[] = [
     imports,
@@ -59,9 +68,7 @@ import { createReactComponent } from './react-component-lib';\n`;
     components.map(createComponentDefinition).join('\n'),
   ];
 
-  const finalText = final.join('\n') + '\n';
-
-  return compilerCtx.fs.writeFile(outputTarget.proxiesFile, finalText);
+  return final.join('\n') + '\n';
 }
 
 function createComponentDefinition(cmpMeta: ComponentCompilerMeta) {

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

@@ -16,14 +16,15 @@ export const reactOutputTarget = (outputTarget: OutputTargetReact): OutputTarget
     await reactProxyOutput(compilerCtx, outputTarget, buildCtx.components, config);
 
     timespan.finish(`generate react finished`);
-  }
+  },
 });
 
-
 function normalizeOutputTarget(config: Config, outputTarget: any) {
   const results: OutputTargetReact = {
     ...outputTarget,
-    excludeComponents: outputTarget.excludeComponents || []
+    excludeComponents: outputTarget.excludeComponents || [],
+    includePolyfills: outputTarget.includePolyfills ?? true,
+    includeDefineCustomElements: outputTarget.includeDefineCustomElements ?? true,
   };
 
   if (config.rootDir == null) {

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

@@ -3,6 +3,8 @@ export interface OutputTargetReact {
   proxiesFile: string;
   excludeComponents?: string[];
   loaderDir?: string;
+  includePolyfills?: boolean;
+  includeDefineCustomElements?: boolean;
 }
 
 export interface PackageJSON {

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

@@ -0,0 +1,107 @@
+import { ComponentCompilerMeta } from '@stencil/core/internal';
+import { generateProxies } from '../src/output-vue';
+import { PackageJSON, OutputTargetVue } from '../src/types';
+
+describe('generateProxies', () => {
+  const components: ComponentCompilerMeta[] = [];
+  const pkgData: PackageJSON = {
+    types: 'dist/types/index.d.ts',
+  };
+  const rootDir: string = '';
+  beforeEach(() => {});
+
+  it('should include both polyfills and definCustomElements when both are true in the outputTarget', () => {
+    const outputTarget: OutputTargetVue = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-vue/src/proxies.ts',
+      includePolyfills: true,
+      includeDefineCustomElements: true,
+    };
+
+    const finalText = generateProxies(components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import Vue, { PropOptions } from 'vue';
+import { createCommonRender, createCommonMethod } from './vue-component-lib/utils';
+
+import { Components } from 'component-library';
+
+import { applyPolyfills, defineCustomElements } from 'component-library/loader';
+
+applyPolyfills().then(() => defineCustomElements());
+
+const customElementTags: string[] = [
+
+];
+Vue.config.ignoredElements = [...Vue.config.ignoredElements, ...customElementTags];
+
+
+`,
+    );
+  });
+
+  it('should include only defineCustomElements when includePolyfills is false in the outputTarget', () => {
+    const outputTarget: OutputTargetVue = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-vue/src/proxies.ts',
+      includePolyfills: false,
+      includeDefineCustomElements: true,
+    };
+
+    const finalText = generateProxies(components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import Vue, { PropOptions } from 'vue';
+import { createCommonRender, createCommonMethod } from './vue-component-lib/utils';
+
+import { Components } from 'component-library';
+
+import { defineCustomElements } from 'component-library/loader';
+
+defineCustomElements();
+
+const customElementTags: string[] = [
+
+];
+Vue.config.ignoredElements = [...Vue.config.ignoredElements, ...customElementTags];
+
+
+`,
+    );
+  });
+
+  it('should not include defineCustomElements or applyPolyfills if both are false in the outputTarget', () => {
+    const outputTarget: OutputTargetVue = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-vue/src/proxies.ts',
+      includePolyfills: false,
+      includeDefineCustomElements: false,
+    };
+
+    const finalText = generateProxies(components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import Vue, { PropOptions } from 'vue';
+import { createCommonRender, createCommonMethod } from './vue-component-lib/utils';
+
+import { Components } from 'component-library';
+
+
+
+
+const customElementTags: string[] = [
+
+];
+Vue.config.ignoredElements = [...Vue.config.ignoredElements, ...customElementTags];
+
+
+`,
+    );
+  });
+});

packages/vue-output-target/package.json

@@ -19,8 +19,7 @@
     "rollup": "rollup -c",
     "version": "npm run build",
     "release": "np",
-    "test": "jest --passWithNoTests",
-    "test.watch": "jest --watch"
+    "test": "../../node_modules/.bin/jest"
   },
   "repository": {
     "type": "git",

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

@@ -1,5 +1,5 @@
 import path from 'path';
-import { OutputTargetVue } from './types';
+import { OutputTargetVue, PackageJSON } from './types';
 import { CompilerCtx, ComponentCompilerMeta, Config } from '@stencil/core/internal';
 import { createComponentDefinition } from './generate-vue-component';
 import { normalizePath, readPackageJson, relativeImport, sortBy } from './utils';
@@ -12,8 +12,10 @@ export async function vueProxyOutput(
 ) {
   const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
   const rootDir = config.rootDir as string;
+  const pkgData = await readPackageJson(rootDir);
 
-  await generateProxies(compilerCtx, filteredComponents, outputTarget, rootDir);
+  const finalText = generateProxies(filteredComponents, pkgData, outputTarget, rootDir);
+  await compilerCtx.fs.writeFile(outputTarget.proxiesFile, finalText);
   await copyResources(config, outputTarget);
 }
 
@@ -23,13 +25,12 @@ function getFilteredComponents(excludeComponents: string[] = [], cmps: Component
   );
 }
 
-async function generateProxies(
-  compilerCtx: CompilerCtx,
+export function generateProxies(
   components: ComponentCompilerMeta[],
+  pkgData: PackageJSON,
   outputTarget: OutputTargetVue,
   rootDir: string,
 ) {
-  const pkgData = await readPackageJson(rootDir);
   const distTypesDir = path.dirname(pkgData.types);
   const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
   const componentsTypeFile = relativeImport(outputTarget.proxiesFile, dtsFilePath, '.d.ts');
@@ -44,14 +45,22 @@ import { createCommonRender, createCommonMethod } from './vue-component-lib/util
     ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`
     : `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';\n`;
 
-  const sourceImports = `import { ${REGISTER_CUSTOM_ELEMENTS}, ${APPLY_POLYFILLS} } from '${normalizePath(
+  const pathToCorePackageLoader = normalizePath(
     path.join(
       outputTarget.componentCorePackage || '',
       outputTarget.loaderDir || DEFAULT_LOADER_DIR,
     ),
-  )}';\n`;
+  );
+  let sourceImports = '';
+  let registerCustomElements = '';
 
-  const registerCustomElements = `${APPLY_POLYFILLS}().then(() => ${REGISTER_CUSTOM_ELEMENTS}());`;
+  if (outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) {
+    sourceImports = `import { ${APPLY_POLYFILLS}, ${REGISTER_CUSTOM_ELEMENTS} } from '${pathToCorePackageLoader}';\n`;
+    registerCustomElements = `${APPLY_POLYFILLS}().then(() => ${REGISTER_CUSTOM_ELEMENTS}());`;
+  } else if (!outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) {
+    sourceImports = `import { ${REGISTER_CUSTOM_ELEMENTS} } from '${pathToCorePackageLoader}';\n`;
+    registerCustomElements = `${REGISTER_CUSTOM_ELEMENTS}();`;
+  }
 
   const final: string[] = [
     imports,
@@ -64,10 +73,9 @@ import { createCommonRender, createCommonMethod } from './vue-component-lib/util
       .join('\n'),
   ];
 
-  const finalText = final.join('\n') + '\n';
-
-  return compilerCtx.fs.writeFile(outputTarget.proxiesFile, finalText);
+  return final.join('\n') + '\n';
 }
+
 function createIgnoredElementsString(components: ComponentCompilerMeta[]) {
   const ignoredElements = components.map((component) => ` '${component.tagName}',`).join('\n');