diff --git a/packages/angular-output-target/__tests__/plugin.spec.ts b/packages/angular-output-target/__tests__/plugin.spec.ts index dfa2919f..d45655ce 100644 --- a/packages/angular-output-target/__tests__/plugin.spec.ts +++ b/packages/angular-output-target/__tests__/plugin.spec.ts @@ -23,11 +23,9 @@ describe('normalizeOutputTarget', () => { const results: OutputTargetAngular = normalizeOutputTarget(config, { directivesProxyFile: '/component-library-angular/src/components.ts', }); - - expect(results).toEqual({ - directivesProxyFile: '/component-library-angular/src/components.ts', - excludeComponents: [], - valueAccessorConfig: [], - } as OutputTargetAngular); + expect(results.directivesProxyFile).toEqual('/component-library-angular/src/components.ts'); + expect(results.excludeComponents).toEqual([]); + expect(results.valueAccessorConfigs).toEqual([]); + expect(typeof results.tagNameModifier).toBe('function'); }); }); diff --git a/packages/angular-output-target/src/generate-angular-component.ts b/packages/angular-output-target/src/generate-angular-component.ts index 6365f588..f108b809 100644 --- a/packages/angular-output-target/src/generate-angular-component.ts +++ b/packages/angular-output-target/src/generate-angular-component.ts @@ -2,11 +2,13 @@ import path from 'path'; import { dashToPascalCase, normalizePath } from './utils'; import { ComponentCompilerMeta } from '@stencil/core/internal'; +import { TagNameModifier } from './types'; export const createComponentDefinition = ( componentCorePackage: string, distTypesDir: string, rootDir: string, + tagNameModifier: TagNameModifier, ) => (cmpMeta: ComponentCompilerMeta) => { // Collect component meta const inputs = [ @@ -21,7 +23,7 @@ export const createComponentDefinition = ( // Generate Angular @Directive const directiveOpts = [ - `selector: \'${cmpMeta.tagName}\'`, + `selector: \'${tagNameModifier(cmpMeta.tagName)}\'`, `changeDetection: ChangeDetectionStrategy.OnPush`, `template: ''`, ]; diff --git a/packages/angular-output-target/src/output-angular.ts b/packages/angular-output-target/src/output-angular.ts index 6434816a..9a115b29 100644 --- a/packages/angular-output-target/src/output-angular.ts +++ b/packages/angular-output-target/src/output-angular.ts @@ -8,7 +8,7 @@ import generateValueAccessors from './generate-value-accessors'; export async function angularDirectiveProxyOutput( compilerCtx: CompilerCtx, - outputTarget: OutputTargetAngular, + outputTarget: Required, components: ComponentCompilerMeta[], config: Config, ) { @@ -63,7 +63,7 @@ async function copyResources(config: Config, outputTarget: OutputTargetAngular) export function generateProxies( components: ComponentCompilerMeta[], pkgData: PackageJSON, - outputTarget: OutputTargetAngular, + outputTarget: Required, rootDir: string, ) { const distTypesDir = path.dirname(pkgData.types); @@ -83,7 +83,14 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`; imports, typeImports, components - .map(createComponentDefinition(outputTarget.componentCorePackage!, distTypesDir, rootDir)) + .map( + createComponentDefinition( + outputTarget.componentCorePackage!, + distTypesDir, + rootDir, + outputTarget.tagNameModifier, + ), + ) .join('\n'), ]; diff --git a/packages/angular-output-target/src/plugin.ts b/packages/angular-output-target/src/plugin.ts index 52191366..15d10a9c 100644 --- a/packages/angular-output-target/src/plugin.ts +++ b/packages/angular-output-target/src/plugin.ts @@ -11,9 +11,17 @@ export const angularOutputTarget = (outputTarget: OutputTargetAngular): OutputTa return normalizeOutputTarget(config, outputTarget); }, async generator(config, compilerCtx, buildCtx) { + const normalizedOutputTarget = normalizeOutputTarget(config, outputTarget) as Required< + OutputTargetAngular + >; const timespan = buildCtx.createTimeSpan(`generate angular proxies started`, true); - await angularDirectiveProxyOutput(compilerCtx, outputTarget, buildCtx.components, config); + await angularDirectiveProxyOutput( + compilerCtx, + normalizedOutputTarget, + buildCtx.components, + config, + ); timespan.finish(`generate angular proxies finished`); }, @@ -23,7 +31,8 @@ export function normalizeOutputTarget(config: Config, outputTarget: any) { const results: OutputTargetAngular = { ...outputTarget, excludeComponents: outputTarget.excludeComponents || [], - valueAccessorConfig: outputTarget.valueAccessorConfig || [], + valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], + tagNameModifier: outputTarget.tagNameModifier ?? ((tagName: string) => tagName), }; if (config.rootDir == null) { diff --git a/packages/angular-output-target/src/types.ts b/packages/angular-output-target/src/types.ts index 374753b2..ed9ac050 100644 --- a/packages/angular-output-target/src/types.ts +++ b/packages/angular-output-target/src/types.ts @@ -5,10 +5,14 @@ export interface OutputTargetAngular { directivesUtilsFile?: string; valueAccessorConfigs?: ValueAccessorConfig[]; excludeComponents?: string[]; + // @deprecated + tagNameModifier?: TagNameModifier; } export type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean'; +export type TagNameModifier = (tagName: string) => string; + export interface ValueAccessorConfig { elementSelectors: string | string[]; event: string; diff --git a/packages/example-project/component-library-react/src/components.ts b/packages/example-project/component-library-react/src/components.ts index 2af6cf98..6c5627b7 100644 --- a/packages/example-project/component-library-react/src/components.ts +++ b/packages/example-project/component-library-react/src/components.ts @@ -5,8 +5,9 @@ import { createReactComponent } from './react-component-lib'; import { JSX } from 'component-library'; +import { applyPolyfills, defineCustomElements } from 'component-library/loader'; - +applyPolyfills().then(() => defineCustomElements()); export const MyButton = /*@__PURE__*/createReactComponent('my-button'); export const MyCheckbox = /*@__PURE__*/createReactComponent('my-checkbox'); export const MyComponent = /*@__PURE__*/createReactComponent('my-component'); diff --git a/packages/example-project/component-library-vue/src/proxies.ts b/packages/example-project/component-library-vue/src/proxies.ts index 8f460cf7..e1397094 100644 --- a/packages/example-project/component-library-vue/src/proxies.ts +++ b/packages/example-project/component-library-vue/src/proxies.ts @@ -6,8 +6,9 @@ import { createCommonRender, createCommonMethod } from './vue-component-lib/util import { Components } from 'component-library'; +import { applyPolyfills, defineCustomElements } from 'component-library/loader'; - +applyPolyfills().then(() => defineCustomElements()); const customElementTags: string[] = [ 'my-button', diff --git a/packages/react-output-target/__tests__/plugin.spec.ts b/packages/react-output-target/__tests__/plugin.spec.ts index 898bc7de..ebbbd7a3 100644 --- a/packages/react-output-target/__tests__/plugin.spec.ts +++ b/packages/react-output-target/__tests__/plugin.spec.ts @@ -24,12 +24,11 @@ describe('normalizeOutputTarget', () => { proxiesFile: '../component-library-react/src/components.ts', }); - expect(results).toEqual({ - proxiesFile: '../component-library-react/src/components.ts', - excludeComponents: [], - includePolyfills: true, - includeDefineCustomElements: true, - } as OutputTargetReact); + expect(results.proxiesFile).toEqual('../component-library-react/src/components.ts'); + expect(results.excludeComponents).toEqual([]); + expect(results.includePolyfills).toEqual(true); + expect(results.includeDefineCustomElements).toEqual(true); + expect(typeof results.tagNameModifier).toBe('function'); }); it('Polyfills and DefinCustomElements should be false when set that way', () => { diff --git a/packages/react-output-target/src/output-react.ts b/packages/react-output-target/src/output-react.ts index e779055e..d9fd22eb 100644 --- a/packages/react-output-target/src/output-react.ts +++ b/packages/react-output-target/src/output-react.ts @@ -1,11 +1,11 @@ import path from 'path'; -import { OutputTargetReact, PackageJSON } from './types'; +import { OutputTargetReact, PackageJSON, TagNameModifier } from './types'; import { dashToPascalCase, normalizePath, readPackageJson, relativeImport, sortBy } from './utils'; import { CompilerCtx, ComponentCompilerMeta, Config } from '@stencil/core/internal'; export async function reactProxyOutput( compilerCtx: CompilerCtx, - outputTarget: OutputTargetReact, + outputTarget: Required, components: ComponentCompilerMeta[], config: Config, ) { @@ -27,7 +27,7 @@ function getFilteredComponents(excludeComponents: string[] = [], cmps: Component export function generateProxies( components: ComponentCompilerMeta[], pkgData: PackageJSON, - outputTarget: OutputTargetReact, + outputTarget: Required, rootDir: string, ) { const distTypesDir = path.dirname(pkgData.types); @@ -65,19 +65,23 @@ import { createReactComponent } from './react-component-lib';\n`; typeImports, sourceImports, registerCustomElements, - components.map(createComponentDefinition).join('\n'), + components.map(createComponentDefinition(outputTarget.tagNameModifier)).join('\n'), ]; return final.join('\n') + '\n'; } -function createComponentDefinition(cmpMeta: ComponentCompilerMeta) { +const createComponentDefinition = (tagNameModifier: TagNameModifier) => ( + cmpMeta: ComponentCompilerMeta, +) => { const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName); return [ - `export const ${tagNameAsPascal} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${cmpMeta.tagName}');`, + `export const ${tagNameAsPascal} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${tagNameModifier( + cmpMeta.tagName, + )}');`, ]; -} +}; async function copyResources(config: Config, outputTarget: OutputTargetReact) { if (!config.sys || !config.sys.copy || !config.sys.glob) { diff --git a/packages/react-output-target/src/plugin.ts b/packages/react-output-target/src/plugin.ts index 4a9ccc84..f7b79cd1 100644 --- a/packages/react-output-target/src/plugin.ts +++ b/packages/react-output-target/src/plugin.ts @@ -11,9 +11,12 @@ export const reactOutputTarget = (outputTarget: OutputTargetReact): OutputTarget return normalizeOutputTarget(config, outputTarget); }, async generator(config, compilerCtx, buildCtx) { + const normalizedOutputTarget = normalizeOutputTarget(config, outputTarget) as Required< + OutputTargetReact + >; const timespan = buildCtx.createTimeSpan(`generate react started`, true); - await reactProxyOutput(compilerCtx, outputTarget, buildCtx.components, config); + await reactProxyOutput(compilerCtx, normalizedOutputTarget, buildCtx.components, config); timespan.finish(`generate react finished`); }, @@ -25,6 +28,7 @@ export function normalizeOutputTarget(config: Config, outputTarget: any) { excludeComponents: outputTarget.excludeComponents || [], includePolyfills: outputTarget.includePolyfills ?? true, includeDefineCustomElements: outputTarget.includeDefineCustomElements ?? true, + tagNameModifier: outputTarget.tagNameModifier ?? ((tagName: string) => tagName), }; if (config.rootDir == null) { diff --git a/packages/react-output-target/src/types.ts b/packages/react-output-target/src/types.ts index 6491f032..42acf606 100644 --- a/packages/react-output-target/src/types.ts +++ b/packages/react-output-target/src/types.ts @@ -5,8 +5,12 @@ export interface OutputTargetReact { loaderDir?: string; includePolyfills?: boolean; includeDefineCustomElements?: boolean; + // @deprecated + tagNameModifier?: TagNameModifier; } +export type TagNameModifier = (tagName: string) => string; + export interface PackageJSON { types: string; } diff --git a/packages/vue-output-target/src/output-vue.ts b/packages/vue-output-target/src/output-vue.ts index 2c1b880d..2c7e697e 100644 --- a/packages/vue-output-target/src/output-vue.ts +++ b/packages/vue-output-target/src/output-vue.ts @@ -6,7 +6,7 @@ import { normalizePath, readPackageJson, relativeImport, sortBy } from './utils' export async function vueProxyOutput( compilerCtx: CompilerCtx, - outputTarget: OutputTargetVue, + outputTarget: Required, components: ComponentCompilerMeta[], config: Config, ) { @@ -86,7 +86,7 @@ ${ignoredElements} Vue.config.ignoredElements = [...Vue.config.ignoredElements, ...customElementTags];\n`; } -async function copyResources(config: Config, outputTarget: OutputTargetVue) { +async function copyResources(config: Config, outputTarget: Required) { if (!config.sys || !config.sys.copy || !config.sys.glob) { throw new Error('stencil is not properly initialized at this step. Notify the developer'); } diff --git a/packages/vue-output-target/src/plugin.ts b/packages/vue-output-target/src/plugin.ts index b29d0705..b4053fe3 100644 --- a/packages/vue-output-target/src/plugin.ts +++ b/packages/vue-output-target/src/plugin.ts @@ -11,9 +11,12 @@ export const vueOutputTarget = (outputTarget: OutputTargetVue): OutputTargetCust return normalizeOutputTarget(config, outputTarget); }, async generator(config, compilerCtx, buildCtx) { + const normalizedOutputTarget = normalizeOutputTarget(config, outputTarget) as Required< + OutputTargetVue + >; const timespan = buildCtx.createTimeSpan(`generate vue started`, true); - await vueProxyOutput(compilerCtx, outputTarget, buildCtx.components, config); + await vueProxyOutput(compilerCtx, normalizedOutputTarget, buildCtx.components, config); timespan.finish(`generate vue finished`); },