Simplify JS and templates

[aomarks]

This PR re-organizes the site-client package, and simplifies the way we load scripts in the browser for each page.

Changes

• There is now a folder for each page, with a consistent naming scheme for the different modules.

• Each page has a boot.ts module, which is the one module that will be loaded in the browser for that page. They're responsible for installing hydration support, loading components, and performing hydration (we used to split these responsibilities up into 3 separate modules, which I don't think was necessary).

• Each page has a shell.ts module which is what contains the top-level render function that can be used for both SSR and browser hydration.

• There is no longer a separate global hydrate-support.js script. If a page needs hydration support, it should have lit/experimental-hydrate-support.js as the first import in its boot.js.

• renderPage no longer takes an array of scripts, it only takes an initScript (which should be the boot script) -- because if we need multiple scripts for a page, we can just import them from that page's boot.js.

• Removed the entrypoints folder. esbuild now looks for pages/*/boot.js as the entrypoints.

New layout of packages/site-client/src:

.
├── pages
│   ├── catalog
│   │   ├── boot.ts
│   │   ├── wco-catalog-page.ts
│   │   ├── wco-catalog-search.ts
│   │   └── wco-element-card.ts
│   ├── docs
│   │   ├── boot.ts
│   │   ├── shell.ts
│   │   └── wco-docs-page.ts
│   ├── element
│   │   ├── boot.ts
│   │   ├── shell.ts
│   │   └── wco-element-page.ts
│   └── home
│       ├── boot.ts
│       └── wco-home-page.ts
└── shared
    ├── wco-footer.ts
    ├── wco-nav-page.ts
    ├── wco-page.ts
    └── wco-top-bar.ts

Also

• Moved the common template code from site-content to a new site-templates package.

  • The site-content package can now be globally commonjs.

  • (I also started converting the site-content package to TypeScript, but hit some snags, so will send as a followup.)

[github-actions[bot]]

A live preview of this PR will be available at the URL below and will update on each commit. = The build takes ~5-10 minutes, and will 404 until finished.

https://pr1418---site-khswqo4xea-wl.a.run.app/

Warning Until our Cloud Run project is public, only authorized users can view the above URL. The easiest way to view it authenticated is to run the following proxy command and visit http://localhost:5453

(gcloud beta run services proxy --project=webcomponents-org-test --region=us-west2 --tag=pr1418 --port=5453 site \
& gcloud beta run services proxy --project=webcomponents-org-test --region=us-west2 --tag=pr1418 --port=6453 catalog)

[justinfagnani]

Nice!

My only thought is that for terminology we might consider hydrate over boot, because all boot does is hydrate and boot is just a new term to add to the mix. Very much no big deal though. This is great.

[aomarks]

Nice!

My only thought is that for terminology we might consider hydrate over boot, because all boot does is hydrate and boot is just a new term to add to the mix. Very much no big deal though. This is great.

I was looking for a name that just means "the script that runs when a page starts up", which might not actually do hydration, or might not exclusively do hydration. Other names could be: init, entrypoint, ... but I guess I'll just keep it as boot for now, can always change it.