Skip to content

Commit 3661a08

Browse files
ethangardnerethangardner
authored
Web components: TypeScript conversion and build improvements (uswds#223)
* ensure all src files are typescript * export type definitions * update vite config to resolve vite associated errors * use default text alignment for language in banner * remove vite error info from readme * regenerate lockfile * Update TypeScript conversion and build improvements Resolved vite error and provided types export in package. Signed-off-by: Ethan Gardner <ethangardner@users.noreply.github.com> * ignore ephemeral files in changesets * remove window call to provide better support for ssg frameworks --------- Signed-off-by: Ethan Gardner <ethangardner@users.noreply.github.com>
1 parent 14fd294 commit 3661a08

File tree

11 files changed

+950
-50
lines changed

11 files changed

+950
-50
lines changed

‎.changeset/twenty-socks-reflect.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@uswds/elements": patch
3+
---
4+
5+
Web components: TypeScript conversion and build improvements.
6+
- Resolved vite error [#222](https://github.com/uswds/uswds-elements/issues/222#issue-3623280254)
7+
- Provided types export in package [#221](https://github.com/uswds/uswds-elements/issues/221)

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
package.json
22
build
33
dist
4+
.changeset
45
*.d.ts

‎README.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,6 @@ This can be seen in the demo on the [USWDS Elements Storybook](<https://federali
8080
8181
**Note:** Please be mindful of the accessibility implications of customizing component appearance. It is your responsibility to ensure that your customizations meet the [accessibility requirements](https://designsystem.digital.gov/accessibility/) of the design system and pass any [WCAG 2.2](https://www.w3.org/TR/WCAG22/) or [Section 508](https://www.section508.gov/) accessibility tests.
8282
83-
> [!IMPORTANT]
84-
> If you are bundling your application using Vite, you may encounter a JavaScript error when using the `usa-banner` component with Vite's dev server (this also applies to other Vite-based tools such as Astro). To work around this, you may need to run the dev server in production mode by prefixing the command to start the server with `NODE_ENV=production`. For instance, if you run the command `npm run dev` to start your dev server, you should start it with `NODE_ENV=production npm run dev`.
85-
8683
## Documentation
8784
8885
For more detailed documentation, refer to the Storybook for USWDS Elements. You can visit the most up-to-date Storybook documentation on [Cloud.gov Pages](https://federalist-ab6c0bdb-eccd-4b26-bb5f-b0154661e999.sites.pages.cloud.gov/site/uswds/web-components/?path=/docs/readme--docs).
@@ -138,10 +135,13 @@ npx @changesets/cli pre exit
138135
139136
2. Bump versions locally (optional)
140137
- To update package.json versions and changelogs locally before publishing:
138+
141139
```bash
142140
npx @changesets/cli version
143141
```
142+
144143
- Commit the resulting changes (package.json updates and generated changelog files):
144+
145145
```bash
146146
git add .
147147
git commit -m "chore(release): version packages and changelogs"
@@ -151,9 +151,11 @@ npx @changesets/cli pre exit
151151
- Option A — Let the repository automation handle publishing (recommended):
152152
- Push your branch to GitHub and open a PR. The CI / release automation will run and, depending on the configuration and merged changesets, will publish releases when merged to `main`.
153153
- Option B — Publish locally (requires NPM credentials and appropriate tokens):
154+
154155
```bash
155156
npm run release
156157
```
158+
157159
This script typically runs your tokenized publish flow (it may run builds and then `changeset publish`).
158160
159161
#### How the automation works (GitHub Actions)
@@ -163,7 +165,6 @@ npx @changesets/cli pre exit
163165
- The action can either create a release PR or publish directly to NPM depending on repository and action settings.
164166
- The workflow uses repository secrets:
165167
- `GITHUB_TOKEN` — standard workflow permission for the action to create PRs/commits.
166-
- `NPM_TOKEN` — required to publish packages to the NPM registry.
167168
- The action is configured to run the project’s release script (for example `npm run release`) and is run in a controlled environment; it will also disable Husky hooks during automated runs (HUSKY=0) to avoid local commit hooks blocking automation.
168169
169170
#### Notes, tips, and troubleshooting

‎config/vite.config.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import browserslist from "browserslist";
44
import { browserslistToTargets } from "lightningcss";
55
import litCss from "vite-plugin-lit-css";
66
import bundlesize from "vite-plugin-bundlesize";
7+
import dts from "vite-plugin-dts";
78
import {
89
type Entry,
910
mapEntriesToKeyValue,
@@ -39,6 +40,9 @@ export default defineConfig({
3940
{ name: "**/*.cjs", limit: "Infinity" },
4041
],
4142
}),
43+
dts({
44+
tsconfigPath: "./config/tsconfig.json",
45+
}),
4246
],
4347
resolve: {
4448
alias: {
@@ -69,8 +73,13 @@ export default defineConfig({
6973
entry: mapEntriesToKeyValue(entries),
7074
},
7175
rollupOptions: {
72-
external: ["lit"],
73-
output: { globals: { lit: "lit" }, format: "es" },
76+
/**
77+
* The regex resolves the error in vite environments:
78+
* - https://github.com/uswds/uswds-elements/issues/222
79+
* - https://github.com/shoelace-style/shoelace/discussions/1847#discussioncomment-14516120
80+
*/
81+
external: [/^@?lit(-\w+)?($|\/.+)/],
82+
output: { format: "es" },
7483
},
7584
},
7685
});

‎custom-elements.json‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,23 @@
44
"modules": [
55
{
66
"kind": "javascript-module",
7-
"path": "src/components/index.js",
7+
"path": "src/components/index.ts",
88
"declarations": [],
99
"exports": [
1010
{
1111
"kind": "js",
1212
"name": "UsaLink",
1313
"declaration": {
1414
"name": "UsaLink",
15-
"module": "src/components/index.js"
15+
"module": "src/components/index.ts"
1616
}
1717
},
1818
{
1919
"kind": "js",
2020
"name": "UsaBanner",
2121
"declaration": {
2222
"name": "UsaBanner",
23-
"module": "src/components/index.js"
23+
"module": "src/components/index.ts"
2424
}
2525
}
2626
]
@@ -250,7 +250,7 @@
250250
},
251251
{
252252
"kind": "javascript-module",
253-
"path": "src/components/usa-link/index.js",
253+
"path": "src/components/usa-link/index.ts",
254254
"declarations": [
255255
{
256256
"kind": "class",
@@ -282,28 +282,47 @@
282282
],
283283
"members": [
284284
{
285-
"kind": "method",
286-
"name": "hasLinkChild"
285+
"kind": "field",
286+
"name": "href",
287+
"privacy": "public",
288+
"type": {
289+
"text": "string | undefined"
290+
},
291+
"attribute": "href"
292+
},
293+
{
294+
"kind": "field",
295+
"name": "slottedChildren",
296+
"type": {
297+
"text": "HTMLAnchorElement | undefined"
298+
},
299+
"privacy": "private"
287300
},
288301
{
289302
"kind": "method",
290-
"name": "templateWithChildren"
303+
"name": "hasLinkChild",
304+
"privacy": "private",
305+
"return": {
306+
"type": {
307+
"text": "boolean"
308+
}
309+
}
291310
},
292311
{
293312
"kind": "method",
294-
"name": "templateWithSlots"
313+
"name": "templateWithChildren",
314+
"privacy": "private"
295315
},
296316
{
297-
"kind": "field",
298-
"name": "href",
299-
"privacy": "public",
300-
"attribute": "href"
317+
"kind": "method",
318+
"name": "templateWithSlots",
319+
"privacy": "private"
301320
}
302321
],
303322
"attributes": [
304323
{
305324
"type": {
306-
"text": "String"
325+
"text": "string | undefined"
307326
},
308327
"description": "The url for the link",
309328
"name": "href",
@@ -325,15 +344,15 @@
325344
"name": "UsaLink",
326345
"declaration": {
327346
"name": "UsaLink",
328-
"module": "src/components/usa-link/index.js"
347+
"module": "src/components/usa-link/index.ts"
329348
}
330349
},
331350
{
332351
"kind": "custom-element-definition",
333352
"name": "usa-link",
334353
"declaration": {
335354
"name": "UsaLink",
336-
"module": "src/components/usa-link/index.js"
355+
"module": "src/components/usa-link/index.ts"
337356
}
338357
}
339358
]

0 commit comments

Comments
 (0)