fix(angular): enable event names with forward slash (#482)

* fix(angular): enable event names with forward slash * Update packages/angular-output-target/src/generate-angular-component.ts Co-authored-by: Tanner Reits <[email protected]> * add test --------- Co-authored-by: Tanner Reits <[email protected]>
ionic-team · Sep 18, 2024 · 857d8ca · 857d8ca
1 parent 516f334
commit 857d8ca
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/packages/angular-output-target/__tests__/generate-angular-component.spec.ts b/packages/angular-output-target/__tests__/generate-angular-component.spec.ts
@@ -285,6 +285,21 @@ describe('createComponentTypeDefinition()', () => {
         tags: [],
       },
     },
+    {
+      name: 'my/slash/event',
+      complexType: {
+        references: {
+          MySlashEvent: {
+            location: 'import',
+          },
+        },
+        original: 'MySlashEvent',
+      },
+      docs: {
+        text: '',
+        tags: [],
+      },
+    },
   ];
 
   describe('www build', () => {
@@ -296,6 +311,7 @@ describe('createComponentTypeDefinition()', () => {
 import type { MyOtherEvent as IMyComponentMyOtherEvent } from '@ionic/core';
 import type { MyDoclessEvent as IMyComponentMyDoclessEvent } from '@ionic/core';
 import type { MyKebabEvent as IMyComponentMyKebabEvent } from '@ionic/core';
+import type { MySlashEvent as IMyComponentMySlashEvent } from '@ionic/core';
 
 export declare interface MyComponent extends Components.MyComponent {
   /**
@@ -310,6 +326,8 @@ export declare interface MyComponent extends Components.MyComponent {
   myDoclessEvent: EventEmitter<CustomEvent<IMyComponentMyDoclessEvent>>;
 
   'my-kebab-event': EventEmitter<CustomEvent<IMyComponentMyKebabEvent>>;
+
+  'my/slash/event': EventEmitter<CustomEvent<IMyComponentMySlashEvent>>;
 }`
       );
     });
@@ -407,6 +425,7 @@ export declare interface MyComponent extends Components.MyComponent {
 import type { MyOtherEvent as IMyComponentMyOtherEvent } from '@ionic/core/custom-elements';
 import type { MyDoclessEvent as IMyComponentMyDoclessEvent } from '@ionic/core/custom-elements';
 import type { MyKebabEvent as IMyComponentMyKebabEvent } from '@ionic/core/custom-elements';
+import type { MySlashEvent as IMyComponentMySlashEvent } from '@ionic/core/custom-elements';
 
 export declare interface MyComponent extends Components.MyComponent {
   /**
@@ -421,6 +440,8 @@ export declare interface MyComponent extends Components.MyComponent {
   myDoclessEvent: EventEmitter<CustomEvent<IMyComponentMyDoclessEvent>>;
 
   'my-kebab-event': EventEmitter<CustomEvent<IMyComponentMyKebabEvent>>;
+
+  'my/slash/event': EventEmitter<CustomEvent<IMyComponentMySlashEvent>>;
 }`
         );
       });

diff --git a/packages/angular-output-target/src/generate-angular-component.ts b/packages/angular-output-target/src/generate-angular-component.ts
@@ -188,8 +188,8 @@ export const createComponentTypeDefinition = (
   const eventTypes = publicEvents.map((event) => {
     const comment = createDocComment(event.docs);
     let eventName = event.name;
-    if (event.name.includes('-')) {
-      // If an event name includes a dash, we need to wrap it in quotes.
+    if (/[-/]/.test(event.name)) {
+      // If an event name includes a dash or a forward slash, we need to wrap it in quotes.
       // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
       eventName = `'${event.name}'`;
     }