feat(compiler): generate component custom event types with HTML target #3296

sean-perkins · 2022-03-21T18:26:18Z

Pull request checklist

Please check if your PR fulfills the following requirements:

Tests for the changes have been added (for bug fixes / features)
Docs have been reviewed and added / updated if needed (for bug fixes / features)
Build (npm run build) was run locally and any changes were pushed
Unit tests (npm test) were run locally and passed
E2E Tests (npm run test.karma.prod) were run locally and passed
Prettier (npm run prettier) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

What is the current behavior?

The generated types for a web components custom event, does not include type definitions for the target value.

GitHub Issue Number: #3291

What is the new behavior?

Stencil compiler will generate new exported interfaces in components.d.ts for all web component that have custom events.
The generated interfaces includes the typing to the generated HTML element type for the event target and accepts a generic for the custom event detail.
Stencil compiler will generate the web component custom event type with the new type, allowing usage with the custom event and the generated HTML element type for the target.

Does this introduce a breaking change?

Yes
No

Testing

The steps outlined below can apply to any Stencil project, but will outline against Ionic Framework:

Build and pack a local version of this branch
Install the .tgz into Ionic Framework /core project.
Run npm run build to build Stencil
See that in components.d.ts that there is a new namespace called ComponentEvents.
Build the react package, by running npm run build from packages/react
Sync the build changes with the react test app, by running npm run sync from packages/react/test-app.
Run the test-app npm run start
Modify any of these .tsx files (i.e. App.tsx) to use a web component with a JSX event listener that accesses a custom public method on the web component:

<IonInfiniteScroll onIonInfinite={ev => ev.target.complete()}></IonInfiniteScroll>

Validate that there is no typing errors/exceptions. Intellisense/tsc is able to determine the type of the complete() function from infinite-scroll.tsx.

Other information

Closing #3286 in favor of this PR.

sean-perkins · 2022-03-21T18:28:30Z

I can open a PR to the Stencil docs site to account for these changes, if we agree with the approach and naming of the generated types.

…eat/custom-event-target

sean-perkins · 2022-03-21T18:41:44Z

I could see us renaming the generated types to be: ComponentEvents.IonAccordion instead of ComponentEvents.IonAccordionCustomEvent (as an example). But will wait until this gets a first look.

sean-perkins · 2022-03-21T19:06:52Z

Discussed with the framework team, only concession is if we could rather export all the generated event interfaces globally, instead of under a namespace.

This would make implementations similar to:

import { InfiniteScrollCustomEvent } from '@ionic/core';

onInfiniteScroll(ev: InfiniteScrollCustomEvent) {
  ev.target.complete();
}

I originally opted not to do this, based on the type definition file having everything namespaced or under a module. If we so no risk to exporting the interfaces all top-level, I'd like to make that change.

rwaskiewicz · 2022-04-22T17:34:43Z

@sean-perkins We landed ~~#2936~~ #3337, which was blocking us from moving forward on this PR. LMK if you wanna sync up some time next week to figure out next steps for this one

sean-perkins · 2022-04-22T17:36:52Z

@rwaskiewicz Sounds good! I'll rebase and incorporate some of the changes we discussed offline (probably ~ mid next week). I'll reach out if I have questions with the latest 👍

sean-perkins · 2022-05-06T18:04:04Z

This PR has been updated. Unsure if you can re-run failed jobs or if I need to push an empty commit to re-trigger CI. I know we can re-run failed actions in framework, assume it is a contributor permission.

rwaskiewicz · 2022-05-06T20:38:45Z

yeah...must be a contributor permission thing. kicked it back off

this commit adds a single unit test for the new `generate-event-detail-types` file. this was created to ensure that we codify the fact that the interface generated by this file follows a specific format

rwaskiewicz · 2022-05-09T19:17:32Z

src/compiler/types/generate-event-types.ts

@@ -6,20 +6,28 @@ import { updateTypeIdentifierNames } from './stencil-types';
 * Generates the individual event types for all @Event() decorated events in a component
 * @param cmpMeta component runtime metadata for a single component
 * @param typeImportData locally/imported/globally used type names, which may be used to prevent naming collisions
+ * @param cmpClassName The pascal cas name of the component class


Suggested change

* @param cmpClassName The pascal cas name of the component class

* @param cmpClassName The pascal cased name of the component class

rwaskiewicz · 2022-05-09T19:22:55Z

src/compiler/types/generate-event-types.ts

@@ -32,6 +40,7 @@ export const generateEventTypes = (cmpMeta: d.ComponentCompilerMeta, typeImportD
 */
 const getEventType = (
  cmpEvent: d.ComponentCompilerEvent,
+  cmpEventDetailInterface: string,


Minor, can we add the JSDoc for this new parameter?

this commit fixes type checker errors associated with `StencilTypes.updateTypeIdentifierNames` that were missed in the original implementation. these errors were found while reviewing #3296 by happen-stance. STENCIL-445 has been created to investigate how we can run the type checker on tests more often & catch these errors sooner.

this commit checks in changes to `test/end-to-end/src/components.d.ts` that are generated starting with 846740f (#3296) we missed this as a result of relying on ci to run the end to end tests for us, rather than ever running them locally. the changes found in this commit were generated by running `npm run test.end-to-end` on the commit immediately preceding this one. to avoid issues like this in the future, stencil-451 has been created and added to the backlog

moshner · 2022-05-31T17:33:11Z

This is great! Thanks for adding it. Are there docs on how to use it?

rwaskiewicz · 2022-05-31T17:48:52Z

@moshner There aren't any explicit docs. However, if you upgrade to Stencil v2.16.0 and re-compile your project, these types should be autogenerated for you

moshner · 2022-05-31T17:49:56Z

Docs would be very helpful. Especially, for anyone who is consuming our web components and need to hook into events.

jcfranco · 2022-06-01T21:54:21Z

This is a great enhancement! Is there a particular reason why currentTarget isn't typed? Apologies if I'm missing something.

this commit updates the typings for the todo-app that exists within the `test/` subdirectory of the project. these changes should have been committed with 846740f (#3296) but were unfortunately missed

sean-perkins added 8 commits March 18, 2022 13:39

feat(compiler): generate custom event with HTML element target

9fa83d2

feat(compiler): generate component event detail types with HTML target

1d292d6

test(compiler): generate event types

70c1b01

test(compiler): generate component types

1d224fb

feat(): generate event types as TagNameCustomEvent

6fad6dc

test(karma): event emissions

d7d6722

chore(): prettier formatting

0df1e9b

test(compiler): jsx types when generating component types

813aac5

sean-perkins requested a review from a team March 21, 2022 18:26

sean-perkins mentioned this pull request Mar 21, 2022

feat(runtime): event emitter accepts event specific custom event #3286

Closed

14 tasks

Merge branch 'main' into feat/custom-event-target

78976e1

sean-perkins mentioned this pull request Mar 21, 2022

bug: Stencil components have incorrect event types ionic-team/ionic-framework#24952

Closed

6 tasks

Merge remote-tracking branch 'origin/feat/custom-event-target' into f…

2f03715

…eat/custom-event-target

sean-perkins added 4 commits May 6, 2022 13:05

Merge remote-tracking branch 'origin/main' into feat/custom-event-target

bece262

chore(): prettier

9d789ac

chore(): test run build output

3f44069

fix(): export interface types

1f2ecc5

rwaskiewicz added 2 commits May 9, 2022 16:09

test(event-type): add unit test for generate-event-types

fd6746d

this commit adds a single unit test for the new `generate-event-detail-types` file. this was created to ensure that we codify the fact that the interface generated by this file follows a specific format

fix(): update jsdocs

6b4ee36

rwaskiewicz approved these changes May 9, 2022

View reviewed changes

Merge branch 'main' into feat/custom-event-target

b21083c

rwaskiewicz merged commit 846740f into ionic-team:main May 9, 2022

rwaskiewicz mentioned this pull request May 12, 2022

refactor(tests): fix updateTypeIdentiferNames spy types #3366

Merged

14 tasks

rwaskiewicz mentioned this pull request May 18, 2022

chore(tests): fix end to end .d.ts file #3370

Merged

14 tasks

rwaskiewicz mentioned this pull request May 31, 2022

feat: Custom HTMLElement type for event targets #3291

Closed

3 tasks

rwaskiewicz mentioned this pull request Sep 20, 2022

chore(tests): update analysis typings #3626

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(compiler): generate component custom event types with HTML target #3296

feat(compiler): generate component custom event types with HTML target #3296

sean-perkins commented Mar 21, 2022 •

edited

Loading

sean-perkins commented Mar 21, 2022

sean-perkins commented Mar 21, 2022 •

edited

Loading

sean-perkins commented Mar 21, 2022

rwaskiewicz commented Apr 22, 2022 •

edited

Loading

sean-perkins commented Apr 22, 2022

sean-perkins commented May 6, 2022

rwaskiewicz commented May 6, 2022

rwaskiewicz May 9, 2022

rwaskiewicz May 9, 2022

moshner commented May 31, 2022

rwaskiewicz commented May 31, 2022

moshner commented May 31, 2022

jcfranco commented Jun 1, 2022

	* @param cmpClassName The pascal cas name of the component class
	* @param cmpClassName The pascal cased name of the component class

feat(compiler): generate component custom event types with HTML target #3296

feat(compiler): generate component custom event types with HTML target #3296

Conversation

sean-perkins commented Mar 21, 2022 • edited Loading

Pull request checklist

Pull request type

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Testing

Other information

sean-perkins commented Mar 21, 2022

sean-perkins commented Mar 21, 2022 • edited Loading

sean-perkins commented Mar 21, 2022

rwaskiewicz commented Apr 22, 2022 • edited Loading

sean-perkins commented Apr 22, 2022

sean-perkins commented May 6, 2022

rwaskiewicz commented May 6, 2022

rwaskiewicz May 9, 2022

Choose a reason for hiding this comment

rwaskiewicz May 9, 2022

Choose a reason for hiding this comment

moshner commented May 31, 2022

rwaskiewicz commented May 31, 2022

moshner commented May 31, 2022

jcfranco commented Jun 1, 2022

sean-perkins commented Mar 21, 2022 •

edited

Loading

sean-perkins commented Mar 21, 2022 •

edited

Loading

rwaskiewicz commented Apr 22, 2022 •

edited

Loading