diff --git a/packages/react-output-target/__tests__/generate-react-components.spec.ts b/packages/react-output-target/__tests__/generate-react-components.spec.ts new file mode 100644 index 00000000..5ddf7a38 --- /dev/null +++ b/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'; + + + + +`, + ); + }); +}); diff --git a/packages/react-output-target/package.json b/packages/react-output-target/package.json index 36fb2691..82edee3f 100644 --- a/packages/react-output-target/package.json +++ b/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", diff --git a/packages/react-output-target/src/output-react.ts b/packages/react-output-target/src/output-react.ts index 34d70516..e779055e 100644 --- a/packages/react-output-target/src/output-react.ts +++ b/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) { diff --git a/packages/react-output-target/src/plugin.ts b/packages/react-output-target/src/plugin.ts index 9f874963..0088f182 100644 --- a/packages/react-output-target/src/plugin.ts +++ b/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) { diff --git a/packages/react-output-target/src/types.ts b/packages/react-output-target/src/types.ts index a7280b13..6491f032 100644 --- a/packages/react-output-target/src/types.ts +++ b/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 { diff --git a/packages/vue-output-target/__tests__/generate-vue-compontes.spec.ts b/packages/vue-output-target/__tests__/generate-vue-compontes.spec.ts new file mode 100644 index 00000000..fd2a23d4 --- /dev/null +++ b/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]; + + +`, + ); + }); +}); diff --git a/packages/vue-output-target/package.json b/packages/vue-output-target/package.json index 4110a625..0b29b64c 100644 --- a/packages/vue-output-target/package.json +++ b/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", diff --git a/packages/vue-output-target/src/output-vue.ts b/packages/vue-output-target/src/output-vue.ts index 902c1a7d..2c1b880d 100644 --- a/packages/vue-output-target/src/output-vue.ts +++ b/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'); diff --git a/packages/vue-output-target/src/plugin.ts b/packages/vue-output-target/src/plugin.ts index f9fadc24..56173d57 100644 --- a/packages/vue-output-target/src/plugin.ts +++ b/packages/vue-output-target/src/plugin.ts @@ -24,6 +24,8 @@ function normalizeOutputTarget(config: Config, outputTarget: any) { ...outputTarget, excludeComponents: outputTarget.excludeComponents || [], componentModels: outputTarget.componentModels || [], + includePolyfills: outputTarget.includePolyfills ?? true, + includeDefineCustomElements: outputTarget.includeDefineCustomElements ?? true, }; if (config.rootDir == null) { diff --git a/packages/vue-output-target/src/types.ts b/packages/vue-output-target/src/types.ts index a8488049..e55e752b 100644 --- a/packages/vue-output-target/src/types.ts +++ b/packages/vue-output-target/src/types.ts @@ -4,6 +4,8 @@ export interface OutputTargetVue { excludeComponents?: string[]; componentModels?: ComponentModelConfig[]; loaderDir?: string; + includePolyfills?: boolean; + includeDefineCustomElements?: boolean; } export interface ComponentModelConfig {