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`);
},