Update ssr to use use ssr-client and new eleventy plugin (#1114)

* Update ssr to use use ssr-client and new eleventy plugin.

Also update docs with this guidance.

* Fix lit-html version in package-lock

* Add ssr-client to lit.js rollup chunk to fix hydration on prod.

* Update client usage to show examples using ssr-client

* Revert the stackblitz link

Author: AndrewJakubowicz

package-lock.json

@@ -157,8 +157,9 @@
     "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-navigation": "^0.3.2",
     "@11ty/eleventy-plugin-rss": "^1.1.2",
-    "@lit-labs/eleventy-plugin-lit": "^1.0.0",
+    "@lit-labs/eleventy-plugin-lit": "^1.0.1",
     "@lit-labs/ssr": "^3.1.2",
+    "@lit-labs/ssr-client": "^1.1.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "clean-css": "^5.1.0",
     "codemirror": "^5.58.2",
@@ -194,7 +195,7 @@
     "@types/react": "^18.0.17",
     "@webcomponents/template-shadowroot": "^0.2.1",
     "algoliasearch": "^4.14.2",
-    "lit": "^2.1.0",
+    "lit": "^2.7.4",
     "postdoc-lib": "^1.0.3",
     "tarts": "^1.0.0",
     "timeago.js": "^4.0.2",

packages/lit-dev-content/package.json

@@ -71,7 +71,8 @@ export default [
           relative.startsWith('lit/') ||
           relative.startsWith('lit-html/') ||
           relative.startsWith('lit-element/') ||
-          relative.startsWith('@lit/reactive-element/')
+          relative.startsWith('@lit/reactive-element/') ||
+          relative.startsWith('@lit-labs/ssr-client/')
         ) {
           return 'lit';
         }

packages/lit-dev-content/rollup.config.js

@@ -155,7 +155,7 @@ implementations haven't loaded.
 its JavaScript implementation, becoming responsive and interactive.
 
 Lit comes with automatic support for hydration via the special
-`lit/experimental-hydrate-support.js` module. As long as this module has been
+`@lit-labs/ssr-client/lit-element-hydrate-support.js` module. As long as this module has been
 loaded, Lit components will detect when they have been statically rendered, and
 will adopt their existing shadow root.
 

packages/lit-dev-content/site/blog/2022-02-07-eleventy.md

@@ -13,11 +13,11 @@ Lit SSR generates static HTML for the browser to parse and paint without any Jav
 How to re-apply that reactivity client-side depends on whether you are rendering standalone Lit templates or utilizing Lit components.
 
 ## Standalone Lit Templates
-"Hydration" for Lit templates is the process of having Lit re-associate the expressions of Lit templates with the nodes they should update in the DOM as well as adding event listeners. In order to hydrate Lit templates, the `hydrate()` method from the `experimental-hydrate` module is provided in the `lit` package. Before you update a server-rendered container using `render()`, you must first call `hydrate()` on that container using the same template and data that was used to render on the server:
+"Hydration" for Lit templates is the process of having Lit re-associate the expressions of Lit templates with the nodes they should update in the DOM as well as adding event listeners. In order to hydrate Lit templates, the `hydrate()` method is provided in the `@lit-labs/ssr-client` package. Before you update a server-rendered container using `render()`, you must first call `hydrate()` on that container using the same template and data that was used to render on the server:
 
 ```js
 import {render} from 'lit';
-import {hydrate} from 'lit/experimental-hydrate.js';
+import {hydrate} from '@lit-labs/ssr-client';
 import {myTemplate} from './my-template.js';
 // Initial hydration required before render:
 // (must be same data used to render on the server)
@@ -31,33 +31,33 @@ const update = (data) => render(myTemplate(data), document.body);
 ## Lit components
 To re-apply reactivity to Lit components, custom element definitions need to be loaded for them to upgrade, enabling their lifecycle callbacks, and the templates in the components' shadow roots needs to be hydrated.
 
-Upgrading can be achieved simply by loading the component module that registers the custom element. This can be done by loading a bundle of all the component definitions for a page, or may be done based on more sophisticated heuristics where only a subset of definitions are loaded as needed. To ensure templates in `LitElement` shadow roots are hydrated, load the `lit/experimental-hydrate-support.js` module which installs support for `LitElement` to automatically hydrate itself when it detects it was server-rendered with declarative shadow DOM. This module must be loaded before the `lit` module is loaded (including any component modules that import `lit`) to ensure hydration support is properly installed.
+Upgrading can be achieved simply by loading the component module that registers the custom element. This can be done by loading a bundle of all the component definitions for a page, or may be done based on more sophisticated heuristics where only a subset of definitions are loaded as needed. To ensure templates in `LitElement` shadow roots are hydrated, load the `@lit-labs/ssr-client/lit-element-hydrate-support.js` module which installs support for `LitElement` to automatically hydrate itself when it detects it was server-rendered with declarative shadow DOM. This module must be loaded before the `lit` module is loaded (including any component modules that import `lit`) to ensure hydration support is properly installed.
 
 When Lit components are server rendered, their shadow root contents are emitted inside a `<template shadowroot>`, also known as a [Declarative Shadow Root](https://web.dev/declarative-shadow-dom/). Declarative shadow roots automatically attach their contents to a shadow root on the template's parent element when HTML is parsed without the need for JavaScript.
 
 Until all browsers include declarative shadow DOM support, a very small polyfill is available that can be inlined into your page. This lets you use SSR now for any browsers with JavaScript enabled and incrementally address non-JavaScript use cases as the feature is rolled out to other browsers. The usage of the [`template-shadowroot` polyfill](https://github.com/webcomponents/template-shadowroot) is described below.
 
-### Loading `lit/experimental-hydrate-support.js`
+### Loading `@lit-labs/ssr-client/lit-element-hydrate-support.js`
 This needs to be loaded before any component modules and the `lit` library.
 
 For example:
 ```html
   <body>
     <!-- App components rendered with declarative shadow DOM placed here. -->
 
-    <!-- exprimental-hydrate-support should be loaded first. -->
-    <script src="/node_modules/lit/exprimental-hydrate-support.js"></script>
+    <!-- ssr-client lit-element-hydrate-support should be loaded first. -->
+    <script src="/node_modules/@lit-labs/ssr-client/lit-element-hydrate-support.js"></script>
 
-    <!-- As compnent definition loads, your pre-rendered components will
+    <!-- As component definition loads, your pre-rendered components will
         come to life and become interactive. -->
     <script src="/app-components.js"></script>
   </body>
 ```
 
-If you are [bundling](/docs/v2/tools/production/) your code, make sure the `lit/expriemntal-hydrate-support.js` is imported first:
+If you are [bundling](/docs/v2/tools/production/) your code, make sure the `@lit-labs/ssr-client/lit-element-hydrate-support.js` is imported first:
 ```js
 // index.js
-import 'lit/experimental-hydrate-support.js';
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
 import './app-components.js';
 ```
 
@@ -117,6 +117,6 @@ The HTML snippet below includes an optional strategy to hide the body until the
 ```
 
 ### Combined example
-This example shows a strategy that combines both the `lit/experimental-hydrate-support.js` and the `template-shadowroot` polyfill loading and serves a page with a SSRed component to hydrate client-side.
+This example shows a strategy that combines both the `@lit-labs/ssr-client/lit-element-hydrate-support.js` and the `template-shadowroot` polyfill loading and serves a page with a SSRed component to hydrate client-side.
 
 [Lit SSR in a Koa server](https://stackblitz.com/edit/lit-ssr-global?file=src/server.js)

packages/lit-dev-content/site/docs/v2/ssr/client-usage.md

@@ -7,4 +7,4 @@
 // This file is needed for rollup bundling order despite it never being loaded
 // in Production. Loading this file directly in prod in default.html would cause
 // an unnecessary second request to lit.js
-import 'lit/experimental-hydrate-support.js';
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js';