HTMLElementTagNameMap Part 2 - add create mapping and checker script #5139

awikkerink · 2024-11-10T15:05:14Z

This adds the ability to include a mappings.d.ts file, which allows an IDE with lit-ts-plugin installed to have typings for basic querySelector calls, and getElementByTagName calls. This also allows a project that is using typescript to type the core elements by referencing the mapped type

See https://github.com/BrightspaceUI/core/pull/5187/files#diff-cbc0e7a7d8e718c3c30b3003face1bc0bcfe98dcd79f3e4024fd270bda4c71d6 for what the final result should look like.

Also see
#5141
#5140

Auto lit mapping generator requires Typescript JSDoc Part 1 - Add template parameters to mixins #5140 for lint:types script to pass
Depends on Typescript JSDoc Part 1.1 - Add template parameter to getLocalizeClass intl#217

github-actions · 2024-11-10T15:06:16Z

Thanks for the PR! 🎉

We've deployed an automatic preview for this PR - you can see your changes here:

URL	https://live.d2l.dev/prs/BrightspaceUI/core/pr-5139/

Note

The build needs to finish before your changes are deployed.
Changes to the PR will automatically update the instance.

awikkerink · 2024-11-10T19:29:23Z

tools/check-html-element-tag-types/check-html-element-helper.d.ts

+	type LitElementConstructor = Constructor<{}>;
+	type LitElementClassType = Constructor<{}>;
+    type ReactiveElementConstructor = Constructor<{}>;
+	type ReactiveElementClassType = Constructor<{}>;


Typing all the template types to Constructor<{}> so that the errors are pushed to the check-html-element-tag-types.ts file

awikkerink · 2024-11-10T19:29:51Z

tools/check-html-element-tag-types/tsconfig.json

+      "strictFunctionTypes": false,
+      "moduleResolution": "bundler",
+      "maxNodeModuleJsDepth": 3,
+      "skipLibCheck": true


Skip errors in *.d.ts files

awikkerink · 2024-11-10T19:30:08Z

tools/check-html-element-tag-types/tsconfig.json

+      "strict": true,
+      "strictFunctionTypes": false,
+      "moduleResolution": "bundler",
+      "maxNodeModuleJsDepth": 3,


Need this to include the localize mixin from intl: https://github.com/BrightspaceUI/intl/blob/main/lib/localize.js#L17

awikkerink · 2024-11-10T19:31:03Z

typings/mapping.d.ts

@@ -0,0 +1,14 @@
+/** Generated from {@link ../tools/create-mapping.sh} */
+import { LitElement } from 'lit';


This import is needed to extend the HTMLElementTagNameMap instead of defining it. Not sure if there is a better way to do this.

awikkerink · 2024-11-14T03:59:28Z

jsconfig.json

jsconfig.json is something that IDEs will pick up and use to add typing information.

awikkerink · 2024-11-14T04:03:33Z

typings/mapping.d.ts

+declare global {
+	interface HTMLElementTagNameMap {
+		// Components with export class...extends LitElement
+		'd2l-build-info': import('../index.js').BuildInfo;


Just starting with d2l-build-info as a proof of concept. Once the other PRs: #5140, #5141 are merged, the mapping.d.ts can be rebuilt.

After this, a CI step can be created to automatically update the mapping as needed. Then, adding new components to the map should be very simple. Just add an export or @typedef, then a PR will automatically be created to add it, and the lint step will ensure that the mixins are being used correctly.

package.json

github-actions · 2024-12-03T17:50:54Z

PR #5188 created to update mapping.d.ts.

--edit
PR #5189 created for CI

github-actions · 2024-12-03T18:00:03Z

PR #5190 created to update mapping.d.ts.

github-actions · 2024-12-06T19:58:51Z

PR #5215 created to update mapping.d.ts. See https://github.com/BrightspaceUI/core?tab=readme-ov-file#mappingdts-troubleshooting for troubleshooting errors

github-actions · 2024-12-09T18:02:49Z

PR #5220 created to update mapping.d.ts. See https://github.com/BrightspaceUI/core?tab=readme-ov-file#mappingdts-troubleshooting for troubleshooting errors

github-actions · 2024-12-11T14:14:05Z

PR #5227 created to update mapping.d.ts. See https://github.com/BrightspaceUI/core?tab=readme-ov-file#mappingdts-troubleshooting for troubleshooting errors

Auto lit mapping #5139

awikkerink · 2024-12-16T14:33:52Z

Closing, as the usefulness of HtmlElementTagNameMap is not very great, and adds a higher maintenance load on Nimbus

awikkerink mentioned this pull request Nov 10, 2024

Typescript JSDoc Part 1 - Add template parameters to mixins #5140

Closed

awikkerink commented Nov 10, 2024

View reviewed changes

awikkerink force-pushed the awikkerink/inspiration-add-create-mapping-script branch 2 times, most recently from 0c76e6c to 6acaee2 Compare November 13, 2024 15:23

awikkerink commented Nov 14, 2024

View reviewed changes

jsconfig.json Outdated

Copy link

Contributor Author

awikkerink Nov 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

jsconfig.json is something that IDEs will pick up and use to add typing information.

awikkerink commented Nov 14, 2024

View reviewed changes

awikkerink force-pushed the awikkerink/inspiration-add-create-mapping-script branch 2 times, most recently from 05e2774 to 77821e9 Compare November 18, 2024 20:25

github-actions bot mentioned this pull request Nov 18, 2024

Updating vdiff goldens for PR 5139 #5161

Closed

awikkerink force-pushed the awikkerink/inspiration-add-create-mapping-script branch 2 times, most recently from a2eb685 to ce2d1ac Compare November 21, 2024 15:14

github-actions bot mentioned this pull request Nov 21, 2024

Updating vdiff goldens for PR 5139 #5169

Closed

awikkerink force-pushed the awikkerink/inspiration-add-create-mapping-script branch 3 times, most recently from 35524ca to 32c0149 Compare December 1, 2024 03:03

github-actions bot mentioned this pull request Dec 1, 2024

Updating vdiff goldens for PR 5139 #5185

Closed

awikkerink mentioned this pull request Dec 2, 2024

DO NOT MERGE - Inspiration add typings #5187

Closed

awikkerink marked this pull request as ready for review December 2, 2024 14:10

awikkerink requested a review from a team as a code owner December 2, 2024 14:10

awikkerink commented Dec 2, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

github-actions bot mentioned this pull request Dec 3, 2024

Auto lit mapping #5139 #5188

Closed

awikkerink mentioned this pull request Dec 3, 2024

Auto lit mapping s6a4 #5189

Closed

This was referenced Dec 3, 2024

Auto lit mapping #5139 #5190

Closed

Updating vdiff goldens for PR 5139 #5191

Closed

github-actions bot mentioned this pull request Dec 6, 2024

Auto lit mapping #5139 #5209

Closed

awikkerink force-pushed the awikkerink/inspiration-add-create-mapping-script branch from b7c8c0e to 90ad388 Compare December 6, 2024 19:58

This was referenced Dec 6, 2024

Auto lit mapping #5139 #5215

Closed

Updating vdiff goldens for PR 5139 #5216

Closed

awikkerink force-pushed the awikkerink/inspiration-add-create-mapping-script branch from 90ad388 to f1d225a Compare December 9, 2024 18:02

github-actions bot mentioned this pull request Dec 9, 2024

Auto lit mapping #5139 #5220

Closed

awikkerink force-pushed the awikkerink/inspiration-add-create-mapping-script branch from f1d225a to 1d532ee Compare December 11, 2024 14:13

github-actions bot mentioned this pull request Dec 11, 2024

Auto lit mapping #5139 #5227

Merged

awikkerink added a commit that referenced this pull request Dec 11, 2024

Merge pull request #5227 from BrightspaceUI/auto-lit-mapping-14sd

e791355

Auto lit mapping #5139

awikkerink force-pushed the awikkerink/inspiration-add-create-mapping-script branch from e791355 to 4516b1a Compare December 11, 2024 20:20

awikkerink and others added 12 commits December 12, 2024 09:42

Add create-mapping script and checker

5475df0

Add mapping.d.ts

4f73c80

Update check-html-element-helper.d.ts

df559ec

Update common.d.ts

08e1d88

Add github lit mapping action

a0189d3

Fix some typos

0f2d664

Fix runs-on

6ab7e68

Run lint:types script

077898b

Update README.md

604035e

Add helpful link to auto mapping comment

cf7499e

Update jsconfig.json

b892f29

auto generate lit mappings

1b73b1b

awikkerink force-pushed the awikkerink/inspiration-add-create-mapping-script branch from 4516b1a to 1b73b1b Compare December 12, 2024 14:42

github-actions bot mentioned this pull request Dec 12, 2024

Updating vdiff goldens for PR 5139 #5235

Closed

awikkerink closed this Dec 16, 2024

awikkerink deleted the awikkerink/inspiration-add-create-mapping-script branch December 16, 2024 14:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTMLElementTagNameMap Part 2 - add create mapping and checker script #5139

HTMLElementTagNameMap Part 2 - add create mapping and checker script #5139

awikkerink commented Nov 10, 2024 •

edited

Loading

github-actions bot commented Nov 10, 2024

awikkerink Nov 10, 2024

awikkerink Nov 10, 2024

awikkerink Nov 10, 2024 •

edited

Loading

awikkerink Nov 10, 2024 •

edited

Loading

awikkerink Nov 14, 2024

awikkerink Nov 14, 2024

awikkerink Nov 14, 2024

github-actions bot commented Dec 3, 2024 •

edited by awikkerink

Loading

github-actions bot commented Dec 3, 2024

github-actions bot commented Dec 6, 2024

github-actions bot commented Dec 9, 2024

github-actions bot commented Dec 11, 2024

awikkerink commented Dec 16, 2024

		@@ -0,0 +1,14 @@
		/** Generated from {@link ../tools/create-mapping.sh} */
		import { LitElement } from 'lit';

HTMLElementTagNameMap Part 2 - add create mapping and checker script #5139

HTMLElementTagNameMap Part 2 - add create mapping and checker script #5139

Conversation

awikkerink commented Nov 10, 2024 • edited Loading

github-actions bot commented Nov 10, 2024

awikkerink Nov 10, 2024

Choose a reason for hiding this comment

awikkerink Nov 10, 2024

Choose a reason for hiding this comment

awikkerink Nov 10, 2024 • edited Loading

Choose a reason for hiding this comment

awikkerink Nov 10, 2024 • edited Loading

Choose a reason for hiding this comment

awikkerink Nov 14, 2024

Choose a reason for hiding this comment

awikkerink Nov 14, 2024

Choose a reason for hiding this comment

awikkerink Nov 14, 2024

Choose a reason for hiding this comment

github-actions bot commented Dec 3, 2024 • edited by awikkerink Loading

github-actions bot commented Dec 3, 2024

github-actions bot commented Dec 6, 2024

github-actions bot commented Dec 9, 2024

github-actions bot commented Dec 11, 2024

awikkerink commented Dec 16, 2024

awikkerink commented Nov 10, 2024 •

edited

Loading

awikkerink Nov 10, 2024 •

edited

Loading

awikkerink Nov 10, 2024 •

edited

Loading

github-actions bot commented Dec 3, 2024 •

edited by awikkerink

Loading