add option to rename tags but not their related outputTarget componen…

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');
   });
 });

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: '<ng-content></ng-content>'`,
   ];

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<OutputTargetAngular>,
   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<OutputTargetAngular>,
   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'),
   ];
 

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) {

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;

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<JSX.MyButton, HTMLMyButtonElement>('my-button');
 export const MyCheckbox = /*@__PURE__*/createReactComponent<JSX.MyCheckbox, HTMLMyCheckboxElement>('my-checkbox');
 export const MyComponent = /*@__PURE__*/createReactComponent<JSX.MyComponent, HTMLMyComponentElement>('my-component');

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',

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', () => {

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<OutputTargetReact>,
   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<OutputTargetReact>,
   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) {

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) {

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;
 }

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<OutputTargetVue>,
   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<OutputTargetVue>) {
   if (!config.sys || !config.sys.copy || !config.sys.glob) {
     throw new Error('stencil is not properly initialized at this step. Notify the developer');
   }

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