Feature/issue 935 native custom element ssr

[thescientist13]

Related Issue

resolves #935

Summary of Changes

1. Introduced wcc + a default export syntax for SSR routes to emit a Web Component as body content
2. Added test case for WCC and export default
3. Added documentation re export default .... as HTMLElement and usage of WCC
4. With WCC, don't have to use getFrontmatter.imports (YMMV) 🥳

Will likely spin up a new release branch for this and any batched features we want to group for a release introducing these features.

TODO

1. Needs fix from WCC for Node >= 16 support for CI - node modules (bare specifiers) are causing an unhandled filesystem exception wcc#43
2. New build failure? Windows filesystem / interop thing?

        Generating graph of workspace files...
        2022-06-07T12:36:55.1362420Z Initializing project config
        2022-06-07T12:36:55.6002072Z Initializing project workspace contexts
        2022-06-07T12:36:55.6010831Z Generating graph of workspace files...
        2022-06-07T12:36:55.6019063Z building from local sources...
        2022-06-07T12:36:55.8982802Z { route: '/artists/' }
        2022-06-07T12:36:55.9040838Z 
        2022-06-07T12:36:55.9041705Z node:internal/process/promises:279
        2022-06-07T12:36:55.9043825Z             triggerUncaughtException(err, true /* fromPromise */);
        2022-06-07T12:36:55.9044317Z             ^
        2022-06-07T12:36:55.9054780Z TypeError [ERR_INVALID_URL_SCHEME]: The URL must be of scheme file
        2022-06-07T12:36:55.9056972Z     at open (node:internal/fs/promises:451:10)
        2022-06-07T12:36:55.9057533Z     at Object.readFile (node:internal/fs/promises:797:20)
        2022-06-07T12:36:55.9058481Z     at getTagName (file:///D:/a/greenwood/greenwood/node_modules/wc-compiler/src/wcc.js:84:35)
        2022-06-07T12:36:55.9059303Z     at renderToString (file:///D:/a/greenwood/greenwood/node_modules/wc-compiler/src/wcc.js:130:32)
        2022-06-07T12:36:55.9060215Z     at executeRouteModule (file:///D:/a/greenwood/greenwood/packages/cli/src/lib/ssr-route-worker.js:26:38) {
        2022-06-07T12:36:55.9060867Z   code: 'ERR_INVALID_URL_SCHEME'
        2022-06-07T12:36:55.9061227Z }
        2022-06-07T12:36:55.9475381Z error Command failed with exit code 1.
      

3. Need innerHTML support from wcc (static only mode) - support innerHTML in compiler for custom elements wcc#49
4. Need to look into how this may impact prerender + puppeteer
   • basically, when puppeteer moves to plugin, WCC will just be the SSR default. But lit rendered for example, has a prerender option. Do we need to redefine prerender vs export? - will track as part of future release work
5. Create / update relevant test cases
6. Documentation (including components as pages)
7. Support default export for Lit Renderer Plugin
8. Extract / bundle SSR deps (e.g. native card) for some sort of interactivity example
   • would frontmatter imports work here? 🤩
9. Wait for Bug/issue 940 static router breaking hybrid workspaces #942 and then remove router patch changes
10. Did I accidentally overlap with Feature/issue 879 static export ssr routes #921?
    • yes, rolled back and will implement post puppeteer cutover
11. setup v0.26.0 release branch and candidate features
    • Should have the ability to statically export server rendered routes as just HTML #879
    • puppeteer as a render plugin
    • will want to evaluate if we can improve how we are defining terms and experiences around SSR'd routes and prerender pages, and how it may differ across across various solutions now; WCC, Lit, Puppeteer, etc.Make sure it is not too confusing. Should also make sure it works across both solutions for HTML and JS.
    • Will want to update getting started, template blog, and projectevergreen repos to use WCC

Questions / New Issues

1. For Lit export default, should find a way to get the tag name automatically, or maybe we don't need it all?
2. Add SSR support into include HTML plugin? Or maybe we can deprecate the custom elements option now that we have WCC?
3. Should / could we pre-render custom elements in markdown or in HTML (pages and template)? - yes, when we move puppeteer to a plugin and WCC is the default for prerender - puppeteer based renderer plugin and HTMLElement (WCC) as default renderer #954
4. What to do about getTemplate and getPage? - Layouts (Templates) and Pages #955
   • default export allows you to use a custom element
   • in the future, maybe use HTMLElement for all of them?
   • keep strings simple for simple cases, wcc / HTMLElement for more advanced cases
5. Introduce ASTs in Greenwood for HTML (and / or do better DOM parsing) - refactor HTML manipulation and generation #950
6. Move puppeteer and related deps to a plugin, upgrade deps as well - puppeteer based renderer plugin and HTMLElement (WCC) as default renderer #954
   • how to execute arbitrary <script> logic / "setup" in a template for SSR (find example)
7. Look into improving the Data story with Greenwood, be it fetch or GraphQL and if more can be done server side now, e.g. getData() and passed in as props or serialized as globalThis for hydration, a la add support for (progressive) hydration for compatible renderers (globalThis for state?) #880 , or consider APIs like getServerSideProps (SSR) vs getStaticProps (SSG) as part of a future data loading story? - Data Loading Strategies #952

[thescientist13]

I should probably make this conditional and opt-out by default, as part of #880