transformTagName compatibility

.github/workflows/ci.yml

@@ -3,8 +3,8 @@ name: CI
 on: push
 
 jobs:
-  build-and-test-nix:
-    name: Build and Test
+  build-and-test-unix:
+    name: Build and Test Unix
     runs-on: ubuntu-latest
     timeout-minutes: 30
     steps:
@@ -31,7 +31,7 @@ jobs:
       - name: Test
         run: npm test
   plugin-build-and-test-windows:
-    name: Build and Test
+    name: Build and Test Windows
     runs-on: windows-latest
     timeout-minutes: 30
     steps:

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/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "This is an output plugin for stencil.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist/",
-    "resources/"
+    "resources/",
+    "angular-component-lib"
   ],
   "publishConfig": {
     "access": "public"

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;