Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove on prefix on Angular Events #1565

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Remove on prefix on Angular Events #1565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e740789
Remove on prefix on Angular Events
bastiW Sep 26, 2024
44518d4
Fix angular event handling (#2)
bastiW Sep 26, 2024
74d0deb
fix event emitters
bastiW Sep 26, 2024
e7a93f1
rename function for clarity
bastiW Sep 27, 2024
603bf04
add changeset for react
bastiW Sep 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/perfect-tigers-eat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@builder.io/mitosis': patch
---

React: Fix type error when emitting an event without data (onSomeEvent: () => void; type will now have correct binding in the parent without unnecesarry undefined event parameter)
5 changes: 5 additions & 0 deletions .changeset/six-ghosts-exercise.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@builder.io/mitosis': minor
---

Remove on prefix on angulare event emits to be aligned with Angular Style Rule 05-16: Don't Prefix Output Properties
1 change: 1 addition & 0 deletions e2e/e2e-app/src/component-paths.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ export const COMPONENT_PATHS = [
'/special-tags/',
'/signals/',
'/disabled-input/',
'/event-listener/',
];
25 changes: 25 additions & 0 deletions e2e/e2e-app/src/components/events/event-child.lite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
28 changes: 28 additions & 0 deletions e2e/e2e-app/src/components/events/event-parent.lite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
5 changes: 5 additions & 0 deletions e2e/e2e-app/src/homepage.lite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
);
}
25 changes: 24 additions & 1 deletion e2e/e2e-app/tests/main.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/');
Expand Down Expand Up @@ -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',
);
});
});
});
27 changes: 27 additions & 0 deletions examples/basic/src/blocks/modal.lite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
2 changes: 1 addition & 1 deletion examples/basic/src/index-helpers/blocks-exports.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
48 changes: 24 additions & 24 deletions packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
Expand Down Expand Up @@ -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);
}
}
}
Expand Down Expand Up @@ -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>
Expand All @@ -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;
Expand Down Expand Up @@ -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>
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
}
}
Expand Down Expand Up @@ -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);
}
}
}
Expand Down Expand Up @@ -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>
Expand All @@ -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;
Expand Down Expand Up @@ -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>
Expand All @@ -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;
Expand Down
Loading