Remove on prefix on Angular Events

BuilderIO · Sep 26, 2024 · ed2abd6 · ed2abd6
1 parent 28ebf38
commit ed2abd6
Show file tree

Hide file tree

Showing 15 changed files with 269 additions and 152 deletions.
diff --git a/e2e/e2e-app/src/component-paths.ts b/e2e/e2e-app/src/component-paths.ts
@@ -6,4 +6,5 @@ export const COMPONENT_PATHS = [
   '/special-tags/',
   '/signals/',
   '/disabled-input/',
+  '/event-listener/',
 ];
diff --git a/e2e/e2e-app/src/components/events/event-child.lite.tsx b/e2e/e2e-app/src/components/events/event-child.lite.tsx
@@ -0,0 +1,25 @@
+import { useStore } from '@builder.io/mitosis';
+
+export interface EventChildProps {
+  onConfirm: (name: string) => void;
+  onCancel: () => void;
+}
+
+export default function EventChild(props: EventChildProps) {
+  const state = useStore({
+    _onCancel() {
+      props.onCancel();
+    },
+
+    _onConfirm() {
+      props.onConfirm('Joe');
+    },
+  });
+
+  return (
+    <>
+      <button onClick={() => state._onCancel()}>Cancel</button>
+      <button onClick={() => state._onConfirm()}>Confirm</button>
+    </>
+  );
+}
diff --git a/e2e/e2e-app/src/components/events/event-parent.lite.tsx b/e2e/e2e-app/src/components/events/event-parent.lite.tsx
@@ -0,0 +1,28 @@
+import { useState, useStore } from '@builder.io/mitosis';
+import EventChild from './event-child.lite';
+
+export default function EventParent() {
+  const [eventLog, setEventLog] = useState<string>('');
+
+  const state = useStore({
+    _onCancel() {
+      const newEventLog = eventLog + 'Cancel event called <br>';
+      setEventLog(newEventLog);
+    },
+
+    _onConfirm(name: string) {
+      const newEventLog = eventLog + `Confirm event called with parameter: ${name} <br>`;
+      setEventLog(newEventLog);
+    },
+  });
+
+  return (
+    <>
+      <EventChild
+        onConfirm={(name) => state._onConfirm(name)}
+        onCancel={() => state._onCancel()}
+      ></EventChild>
+      <p data-testid="event-log" innerHTML={eventLog}></p>
+    </>
+  );
+}
diff --git a/e2e/e2e-app/src/homepage.lite.tsx b/e2e/e2e-app/src/homepage.lite.tsx
@@ -2,6 +2,7 @@ import { For, onMount, Show, useStore } from '@builder.io/mitosis';
 import { COMPONENT_PATHS } from './component-paths';
 import ComponentWithTypes from './components/component-with-types.lite';
 import DisabledInput from './components/disabled-input/disabled-input.lite';
+import EventParent from './components/events/event-parent.lite';
 import NestedParent from './components/nested/nested-parent.lite';
 import OneComponent from './components/one-component.lite';
 import ShowForComponent from './components/show-for-component.lite';
@@ -61,6 +62,10 @@ export default function Homepage(props: { pathname?: string }) {
       <Show when={state.pathToUse.startsWith('/disabled-input')}>
         <DisabledInput />
       </Show>
+
+      <Show when={state.pathToUse.startsWith('/event-listener')}>
+        <EventParent />
+      </Show>
     </div>
   );
 }
diff --git a/e2e/e2e-app/tests/main.spec.ts b/e2e/e2e-app/tests/main.spec.ts
@@ -46,7 +46,6 @@ test.describe('e2e', () => {
     await expect(page.locator(`${textLocator}2`)).toBeVisible();
     await expect(page.locator(`${textLocator}3`)).toBeVisible();
   });
-
   test.describe('special HTML tags', () => {
     test('template tag', async ({ page, packageName }) => {
       await page.goto('/special-tags/');
@@ -101,4 +100,28 @@ test.describe('e2e', () => {
       await expect(nativeEnabled).toBeEditable();
     });
   });
+
+  test.describe('Event Listener', () => {
+    test('Single Event without parameter', async ({ page, packageName }) => {
+      await page.goto('/event-listener/');
+
+      const cancelButton = page.getByRole('button', { name: 'Cancel' });
+
+      await cancelButton.click();
+
+      await expect(page.getByTestId('event-log')).toHaveText('Cancel event called');
+    });
+
+    test('Single Event with parameter', async ({ page, packageName }) => {
+      await page.goto('/event-listener/');
+
+      const confirmButton = page.getByRole('button', { name: 'Confirm' });
+
+      await confirmButton.click();
+
+      await expect(page.getByTestId('event-log')).toHaveText(
+        'Confirm event called with parameter: Joe',
+      );
+    });
+  });
 });
diff --git a/examples/basic/src/blocks/modal.lite.tsx b/examples/basic/src/blocks/modal.lite.tsx
@@ -0,0 +1,27 @@
+import {useStore} from '@builder.io/mitosis';
+
+export interface ModalProps {
+  onConfirm: (name: string) => void;
+  onCancel: () => void;
+}
+
+export default function Modal(props: ModalProps) {
+
+  const state = useStore({
+    _onCancel() {
+        props.onCancel()
+    },
+
+    _onConfirm() {
+        props.onConfirm('Joe')
+    },
+  });
+
+
+  return (
+  <>
+    <button onClick={() => state._onCancel()}>Cancel</button>
+    <button onClick={() => state._onConfirm()}>Confirm</button>
+  </>
+  );
+}
diff --git a/examples/basic/src/index-helpers/blocks-exports.ts b/examples/basic/src/index-helpers/blocks-exports.ts
@@ -1,2 +1,2 @@
 export { default as Button } from '../blocks/button.lite';
-export { default as Image } from '../blocks/image.lite';
+export { default as Image } from '../blocks/image.lite';
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -294,15 +294,15 @@ import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 export default class MyBasicOutputsComponent {
   @Input() message;
 
-  @Output() onMessage = new EventEmitter();
-  @Output() onEvent = new EventEmitter();
+  @Output() message = new EventEmitter();
+  @Output() event = new EventEmitter();
 
   name = \\"PatrickJS\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
-      this.onMessage.emit(this.name);
-      this.onEvent.emit(this.message);
+      this.message.emit(this.name);
+      this.event.emit(this.message);
     }
   }
 }
@@ -338,15 +338,15 @@ import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 export default class MyBasicOutputsComponent {
   @Input() message;
 
-  @Output() onMessage = new EventEmitter();
-  @Output() onEvent = new EventEmitter();
+  @Output() message = new EventEmitter();
+  @Output() event = new EventEmitter();
 
   name = \\"PatrickJS\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
-      this.onMessage.emit(this.name);
-      this.onEvent.emit(this.message);
+      this.message.emit(this.name);
+      this.event.emit(this.message);
     }
   }
 }
@@ -3694,7 +3694,7 @@ const defaultProps = {
         </a>
       </ng-container>
       <ng-container *ngIf=\\"!link\\">
-        <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\" #elRef1>
+        <button type=\\"button\\" (click)=\\"this.click.emit($event)\\" #elRef1>
           {{buttonText}}
         </button>
       </ng-container>
@@ -3715,7 +3715,7 @@ export default class Button {
   @Input() text = defaultProps[\\"text\\"];
   @Input() buttonText;
 
-  @Output() onClick = new EventEmitter();
+  @Output() click = new EventEmitter();
 
   @ViewChild(\\"elRef0\\") elRef0;
   @ViewChild(\\"elRef1\\") elRef1;
@@ -3821,7 +3821,7 @@ const defaultProps = {
         </a>
       </ng-container>
       <ng-container *ngIf=\\"!link\\">
-        <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\" #elRef1>
+        <button type=\\"button\\" (click)=\\"this.click.emit($event)\\" #elRef1>
           {{text}}
         </button>
       </ng-container>
@@ -3841,7 +3841,7 @@ export default class Button {
   @Input() openLinkInNewTab = defaultProps[\\"openLinkInNewTab\\"];
   @Input() text = defaultProps[\\"text\\"];
 
-  @Output() onClick = new EventEmitter();
+  @Output() click = new EventEmitter();
 
   @ViewChild(\\"elRef0\\") elRef0;
   @ViewChild(\\"elRef1\\") elRef1;
@@ -7144,15 +7144,15 @@ import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 export default class MyBasicOutputsComponent {
   @Input() message!: any;
 
-  @Output() onMessage = new EventEmitter();
-  @Output() onEvent = new EventEmitter();
+  @Output() message = new EventEmitter();
+  @Output() event = new EventEmitter();
 
   name = \\"PatrickJS\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
-      this.onMessage.emit(this.name);
-      this.onEvent.emit(this.message);
+      this.message.emit(this.name);
+      this.event.emit(this.message);
     }
   }
 }
@@ -7188,15 +7188,15 @@ import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 export default class MyBasicOutputsComponent {
   @Input() message!: any;
 
-  @Output() onMessage = new EventEmitter();
-  @Output() onEvent = new EventEmitter();
+  @Output() message = new EventEmitter();
+  @Output() event = new EventEmitter();
 
   name = \\"PatrickJS\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
-      this.onMessage.emit(this.name);
-      this.onEvent.emit(this.message);
+      this.message.emit(this.name);
+      this.event.emit(this.message);
     }
   }
 }
@@ -10828,7 +10828,7 @@ const defaultProps = {
         </a>
       </ng-container>
       <ng-container *ngIf=\\"!link\\">
-        <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\" #elRef1>
+        <button type=\\"button\\" (click)=\\"this.click.emit($event)\\" #elRef1>
           {{buttonText}}
         </button>
       </ng-container>
@@ -10850,7 +10850,7 @@ export default class Button {
   @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
   @Input() buttonText!: ButtonProps[\\"buttonText\\"];
 
-  @Output() onClick = new EventEmitter();
+  @Output() click = new EventEmitter();
 
   @ViewChild(\\"elRef0\\") elRef0!: ElementRef;
   @ViewChild(\\"elRef1\\") elRef1!: ElementRef;
@@ -10964,7 +10964,7 @@ const defaultProps = {
         </a>
       </ng-container>
       <ng-container *ngIf=\\"!link\\">
-        <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\" #elRef1>
+        <button type=\\"button\\" (click)=\\"this.click.emit($event)\\" #elRef1>
           {{text}}
         </button>
       </ng-container>
@@ -10985,7 +10985,7 @@ export default class Button {
     defaultProps[\\"openLinkInNewTab\\"];
   @Input() text!: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
 
-  @Output() onClick = new EventEmitter();
+  @Output() click = new EventEmitter();
 
   @ViewChild(\\"elRef0\\") elRef0!: ElementRef;
   @ViewChild(\\"elRef1\\") elRef1!: ElementRef;