webcomponents / webcomponents.org

Home of the web components community
https://www.webcomponents.org
Apache License 2.0
359 stars 95 forks source link

Set up separate dev and prod builds with esbuild #1334

Closed aomarks closed 1 year ago

aomarks commented 1 year ago

Note to reviewers: I first used tsc + Rollup in this PR, and then replaced it with esbuild, so you'll see those commits in the middle. You can ignore them, or read them if you're interested.

Sets up separate dev and prod eleventy builds for the new webcomponents.org. Both builds use esbuild.

Running npm run watch:dev or npm run watch:prod from the top-level will give you live refresh versions of either build.

The dev build is super fast because [1] it uses symlinks so that Eleventy doesn't need to rebuild when static assets or JS changes, and [2] it runs esbuild with no minification or bundling.

There is a separate check:types command in the client package which runs TypeScript in noEmit mode. This runs in parallel when you use either of the top-level watch:* commands. So the experience is that the browser updates immediately, and a few moments later you also get any type errors.

This design lets us use identical <script> tags in both dev and prod mode, which is nice. On lit.dev we needed to generate different script tags for each mode.

Also addresses the post-merge comments from https://github.com/webcomponents/webcomponents.org/pull/1333