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.

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

chore: typescript assets in 11ty dev server and ssr #1992

Merged
merged 46 commits into from
Nov 14, 2024

Conversation

bennypowers
Copy link
Member

@bennypowers bennypowers commented Oct 16, 2024

What I did

  1. migrate all elements to new standard accessor syntax for standard decorators/ts5.0 (might spin this into a separate pr) reverted this because for reasons i care not to know, it breaks the build's performance in a serious way.
  2. load typescript assets (i.e. rh- and uxdot- elements) using esbuild transforms in the 11ty dev server
  3. load typescript assets via tsx for the ssr build.

So now the 11ty dev server and the wds dev server operate entirely on typescript sources, with no build. the only time we compile is during the docs build so we can copy files over, and in the 'build' script so we can ship js files.

Testing Instructions

  1. npm run serve and npm run build

Notes to Reviewers

In it's current state (thursday morning, Jerusalem time), the build has been going for 14 hours, and after 50 pages or so, pages take 30 minutes each to build. Clearly there's a leak or other perf issue somewhere.

Copy link

changeset-bot bot commented Oct 16, 2024

⚠️ No Changeset found

Latest commit: 1006297

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

netlify bot commented Oct 16, 2024

Deploy Preview for red-hat-design-system ready!

Name Link
🔨 Latest commit 1006297
🔍 Latest deploy log https://app.netlify.com/sites/red-hat-design-system/deploys/673606065a42fc00098c7b01
😎 Deploy Preview https://deploy-preview-1992--red-hat-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@bennypowers bennypowers force-pushed the chore/ts-assets-11ty-dev branch from f67c197 to 22e4593 Compare October 16, 2024 07:43
@bennypowers bennypowers force-pushed the chore/ts-assets-11ty-dev branch from 22e4593 to 2067482 Compare October 16, 2024 07:54
Copy link
Contributor

github-actions bot commented Oct 22, 2024

Size Change: -3.76 kB (-1.78%)

Total Size: 207 kB

Filename Size Change
./lib/environment.js 194 B -3.9 kB (-95.26%) 🏆
./uxdot/uxdot-pattern-ssr-controller-client.js 604 B +68 B (+12.69%) ⚠️
./uxdot/uxdot-pattern-ssr-controller-server.js 1.68 kB +19 B (+1.15%)
./uxdot/uxdot-pattern.js 2.12 kB +52 B (+2.51%)
ℹ️ View Unchanged
Filename Size
./elements.js 473 B
./elements/rh-accordion/context.js 162 B
./elements/rh-accordion/rh-accordion-header.js 2.77 kB
./elements/rh-accordion/rh-accordion-panel.js 1.37 kB
./elements/rh-accordion/rh-accordion.js 3.21 kB
./elements/rh-alert/rh-alert.js 4.31 kB
./elements/rh-audio-player/rh-audio-player-about.js 1.85 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js 1.85 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 1.53 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js 1.43 kB
./elements/rh-audio-player/rh-audio-player.js 13.2 kB
./elements/rh-audio-player/rh-cue.js 2 kB
./elements/rh-audio-player/rh-transcript.js 2.75 kB
./elements/rh-avatar/random-pattern-controller.js 2.72 kB
./elements/rh-avatar/rh-avatar.js 2.9 kB
./elements/rh-back-to-top/rh-back-to-top.js 2.1 kB
./elements/rh-badge/rh-badge.js 1.55 kB
./elements/rh-blockquote/rh-blockquote.js 1.41 kB
./elements/rh-breadcrumb/rh-breadcrumb.js 1.5 kB
./elements/rh-button/rh-button.js 4.24 kB
./elements/rh-card/rh-card.js 3.64 kB
./elements/rh-code-block/prism.css.js 822 B
./elements/rh-code-block/prism.js 572 B
./elements/rh-code-block/rh-code-block.js 7.25 kB
./elements/rh-cta/rh-cta.js 3.96 kB
./elements/rh-dialog/rh-dialog.js 4.78 kB
./elements/rh-dialog/yt-api.js 617 B
./elements/rh-footer/rh-footer-block.js 766 B
./elements/rh-footer/rh-footer-copyright.js 362 B
./elements/rh-footer/rh-footer-links.js 1.17 kB
./elements/rh-footer/rh-footer-social-link.js 964 B
./elements/rh-footer/rh-footer-universal.js 4.05 kB
./elements/rh-footer/rh-footer.js 5.01 kB
./elements/rh-health-index/rh-health-index.js 2.35 kB
./elements/rh-icon/rh-icon.js 2.35 kB
./elements/rh-icon/ssr.js 181 B
./elements/rh-menu/rh-menu.js 1.29 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 2.47 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 1.35 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 571 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js 5.31 kB
./elements/rh-navigation-secondary/test/fixtures.js 769 B
./elements/rh-pagination/rh-pagination.js 5.46 kB
./elements/rh-site-status/rh-site-status.js 2.5 kB
./elements/rh-skip-link/rh-skip-link.js 1.24 kB
./elements/rh-spinner/rh-spinner.js 1.43 kB
./elements/rh-stat/rh-stat.js 2.2 kB
./elements/rh-subnav/rh-subnav.js 2.73 kB
./elements/rh-surface/rh-surface.js 1.11 kB
./elements/rh-surface/test/elements.js 423 B
./elements/rh-switch/rh-switch.js 2.93 kB
./elements/rh-table/rh-sort-button.js 1.49 kB
./elements/rh-table/rh-table.js 3.54 kB
./elements/rh-tabs/context.js 160 B
./elements/rh-tabs/rh-tab-panel.js 1.04 kB
./elements/rh-tabs/rh-tab.js 3.02 kB
./elements/rh-tabs/rh-tabs.js 3.77 kB
./elements/rh-tag/rh-tag.js 2.84 kB
./elements/rh-tile/rh-tile-group.js 1.81 kB
./elements/rh-tile/rh-tile.js 5.15 kB
./elements/rh-timestamp/rh-timestamp.js 983 B
./elements/rh-tooltip/rh-tooltip.js 2.24 kB
./elements/rh-video-embed/rh-video-embed.js 4.6 kB
./lib/context/color/consumer.js 1.35 kB
./lib/context/color/controller.js 947 B
./lib/context/color/provider.js 2.18 kB
./lib/context/event.js 593 B
./lib/context/headings/consumer.js 722 B
./lib/context/headings/controller.js 1.12 kB
./lib/context/headings/provider.js 1.24 kB
./lib/DirController.js 565 B
./lib/elements/rh-context-demo/rh-context-demo.js 1.28 kB
./lib/elements/rh-context-picker/rh-context-picker.js 2.24 kB
./lib/functions.js 175 B
./lib/I18nController.js 1.38 kB
./lib/ScreenSizeController.js 849 B
./lib/ssr-controller.js 251 B
./react/rh-accordion/rh-accordion-header.js 199 B
./react/rh-accordion/rh-accordion-panel.js 185 B
./react/rh-accordion/rh-accordion.js 215 B
./react/rh-alert/rh-alert.js 184 B
./react/rh-audio-player/rh-audio-player-about.js 191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js 213 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 214 B
./react/rh-audio-player/rh-audio-player-subscribe.js 196 B
./react/rh-audio-player/rh-audio-player.js 183 B
./react/rh-audio-player/rh-cue.js 195 B
./react/rh-audio-player/rh-transcript.js 207 B
./react/rh-avatar/rh-avatar.js 173 B
./react/rh-back-to-top/rh-back-to-top.js 183 B
./react/rh-badge/rh-badge.js 174 B
./react/rh-blockquote/rh-blockquote.js 179 B
./react/rh-breadcrumb/rh-breadcrumb.js 179 B
./react/rh-button/rh-button.js 174 B
./react/rh-card/rh-card.js 172 B
./react/rh-code-block/rh-code-block.js 181 B
./react/rh-cta/rh-cta.js 170 B
./react/rh-dialog/rh-dialog.js 203 B
./react/rh-footer/rh-footer-block.js 184 B
./react/rh-footer/rh-footer-copyright.js 187 B
./react/rh-footer/rh-footer-links.js 185 B
./react/rh-footer/rh-footer-social-link.js 193 B
./react/rh-footer/rh-footer-universal.js 188 B
./react/rh-footer/rh-footer.js 174 B
./react/rh-health-index/rh-health-index.js 184 B
./react/rh-icon/rh-icon.js 202 B
./react/rh-menu/rh-menu.js 173 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js 199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js 201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js 213 B
./react/rh-pagination/rh-pagination.js 178 B
./react/rh-site-status/rh-site-status.js 181 B
./react/rh-skip-link/rh-skip-link.js 181 B
./react/rh-spinner/rh-spinner.js 175 B
./react/rh-stat/rh-stat.js 171 B
./react/rh-subnav/rh-subnav.js 175 B
./react/rh-surface/rh-surface.js 175 B
./react/rh-switch/rh-switch.js 185 B
./react/rh-table/rh-sort-button.js 213 B
./react/rh-table/rh-table.js 174 B
./react/rh-tabs/rh-tab-panel.js 181 B
./react/rh-tabs/rh-tab.js 187 B
./react/rh-tabs/rh-tabs.js 174 B
./react/rh-tag/rh-tag.js 182 B
./react/rh-tile/rh-tile-group.js 183 B
./react/rh-tile/rh-tile.js 194 B
./react/rh-timestamp/rh-timestamp.js 176 B
./react/rh-tooltip/rh-tooltip.js 175 B
./react/rh-video-embed/rh-video-embed.js 227 B
./uxdot/uxdot-best-practice.js 742 B
./uxdot/uxdot-copy-button.js 1.2 kB
./uxdot/uxdot-copy-permalink.js 1.1 kB
./uxdot/uxdot-example.js 1.17 kB
./uxdot/uxdot-feedback.js 727 B
./uxdot/uxdot-header.js 1.07 kB
./uxdot/uxdot-hero.js 679 B
./uxdot/uxdot-installation-tabs.js 675 B
./uxdot/uxdot-masthead.js 809 B
./uxdot/uxdot-pattern-ssr-controller.js 213 B
./uxdot/uxdot-repo-status-checklist.js 1.16 kB
./uxdot/uxdot-repo-status-list.js 1.07 kB
./uxdot/uxdot-repo-status-table.js 782 B
./uxdot/uxdot-repo.js 1.17 kB
./uxdot/uxdot-search.js 2.39 kB
./uxdot/uxdot-sidenav.js 2.67 kB
./uxdot/uxdot-spacer-tokens-table.js 2.45 kB
./uxdot/uxdot-toc.js 1.13 kB

compressed-size-action

@bennypowers bennypowers marked this pull request as ready for review October 22, 2024 16:09
@bennypowers bennypowers requested review from adamjohnson and removed request for adamjohnson October 22, 2024 16:11
@bennypowers
Copy link
Member Author

@adamjohnson @zeroedin PTAL, I managed a patch to jspm/generator which lets us ignore all local modules in the tracing process.

@bennypowers bennypowers enabled auto-merge (squash) November 3, 2024 09:50
@adamjohnson
Copy link
Collaborator

Seeing some issues with the build. It seems initially a git clean --fdx && nvm use && npm ci && npm run serve does start the server. But it's hit or miss if updates to any content in /docs get served.

  1. Run git clean --fdx && nvm use && npm ci && npm run serve.
  2. Go to docs/index.njk and change some text, save. This may or may not work.
  3. Go to docs/about/index.md and change some text, save. This may or may not work.
  4. Stop npm serve by typing CTRL + C.
  5. Enter npm run serve.
  6. Repeat steps 2-3. See if it throws an error when updating content.

Here's what's being output in my console FWIW:

Initial git clean... output:

https://app.warp.dev/block/OsOoMVvEhuT8xiUt5FxLUm

After running npm run serve and changing files in steps 2-3:

https://app.warp.dev/block/c0nbZxTlT9kDc6ieQexNz0

@adamjohnson
Copy link
Collaborator

When running npm run serve, the CLI hangs and never finishes. Steps to reproduce:

  1. git clean -fdx && nvm use && npm ci && npm run serve
  2. CLI hangs. CTRL + C. Hangs. CTRL + \.
  3. I was subsequently successful in running a npm run build.

After these steps, I figured I would try something similar with build:

  1. git clean -fdx && nvm use && npm ci && npm run build
  2. It works!
  3. npm run serve
  4. It runs and we can hit localhost:8080.
  5. Change some text in docs/index.njk.
  6. Refresh page, no change.
  7. CTRL + C then CTRL + \ npm run serve to kill the process.
  8. Re-run npm run serve.
  9. serve hangs. ☠️
  10. Repeat step 7.
  11. build still works / completes.

@bennypowers
Copy link
Member Author

i wasn't able to reproduce on linux, i'll try on macos:

red-hat-design-system on  chore/ts-assets-11ty-dev [$] is 📦 v2.1.1 via  v22.7.0 
❯ git clean -fdx && nvm use && npm ci && npm run serve
Removing .cache/
Removing .wireit/
Removing _site/
Removing custom-elements.json
Removing docs/_data/playgrounds.json
Removing docs/_plugins/lit-ssr/worker.js
Removing lib/environment.js
Removing node_modules/
Now using Node v22.7.0 (npm 10.8.2) ~/.local/share/nvm/v22.7.0/bin/node
npm warn deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead

added 2151 packages, and audited 2152 packages in 32s

270 packages are looking for funding
  run `npm fund` for details

43 vulnerabilities (1 low, 17 moderate, 19 high, 6 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

> @rhds/[email protected] serve
> wireit

(node:584830) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
🦥 Import map generator done in 12056.526904999999ms
   Resolving local packages took 12054.025899ms

(node:584830) ExperimentalWarning: glob is an experimental feature and might change at any time
1097.57  Rendered ./_site/foundations/iconography/index.html in
[11ty] Copied 13483 Wrote 578 files in 58.71 seconds (101.6ms each, v3.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/
✅ Ran 4 scripts and skipped 0 in 235.5s.

@bennypowers
Copy link
Member Author

@adamjohnson confirmed your issue on macOS, but oddly it doesn't happen on linux 🤷

Either way, bumping to node 23 seems to have done the job, so 🤞 PTAL

package.json Show resolved Hide resolved
Copy link
Collaborator

@zeroedin zeroedin left a comment

Choose a reason for hiding this comment

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

It doesn't appear the files ever get created in _site/assets/packages/@rhds/elements/ or _site/assets/packages/@uxdot/elements/ My assumption is while running npm run serve that these files get created on the fly, but when needed for CI and a static site they aren't available, most likely related to previous build comment.

@adamjohnson
Copy link
Collaborator

  1. git clean -fdx && nvm use && npm ci && npm run serve works 🎉
  2. Changing content on 8080 works 🎉
  3. CTRL + C works 🎉
  4. npm run build works 🎉
  5. git clean -fdx && nvm use && npm ci && npm run build works 🎉
  6. npm run serve works 🎉
  7. npm run dev works 🎉
  8. git clean -fdx && nvm use && npm ci && npm run start works 🎉

I tested these on both OSX and Linux Mint.

Anecdotally, it takes 11 seconds for a docs change on my M2 MBP. It takes ~50 seconds for a docs change on my personal Dell laptop from 2018. The difference in speed on the Apple silicone is real.

I wonder if anyone has a Windows machine they'd be willing to test with? I unfortunately do not have a Windows device.

@bennypowers
Copy link
Member Author

I wonder if anyone has a Windows machine they'd be willing to test with? I unfortunately do not have a Windows device.

Unless someone asks, and gives a compelling reason why we should care, I really don't want to support windows for our development workflow. They can use WSL, a vm, a container, online services like gh codespaces, whatever.

Copy link
Collaborator

@zeroedin zeroedin left a comment

Choose a reason for hiding this comment

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

'Leventy Gains Typescript Manipulation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done ☑️
Development

Successfully merging this pull request may close these issues.

3 participants