[ssr-client] Move experimental hydrate modules (#3720)

.changeset/pretty-goats-switch.md

@@ -0,0 +1,9 @@
+---
+'@lit-labs/eleventy-plugin-lit': patch
+'@lit-labs/ssr-react': patch
+'@lit-labs/testing': patch
+'@lit-labs/nextjs': patch
+'@lit-labs/ssr': patch
+---
+
+Use hydration modules from `@lit-labs/ssr-client`

.changeset/sweet-lemons-brake.md

@@ -0,0 +1,10 @@
+---
+'@lit-labs/ssr-client': minor
+'lit-element': patch
+'lit-html': patch
+'lit': patch
+---
+
+`lit-html/experimental-hydrate.js` and `lit-element/experimental-hydrate-support.js` have been moved to `@lit-labs/ssr-client`.
+
+The modules in the original location have been marked deprecated and will be removed in a future version.

.eslintignore

@@ -275,9 +275,11 @@ packages/labs/ssr/index.*
 
 packages/labs/ssr-client/development/
 packages/labs/ssr-client/directives/
-packages/labs/ssr-client/controllers/
+packages/labs/ssr-client/lib/
+packages/labs/ssr-client/node/
 packages/labs/ssr-client/node_modules/
 packages/labs/ssr-client/index.*
+packages/labs/ssr-client/lit-element-hydrate-support.*
 
 packages/labs/ssr-dom-shim/index.*
 packages/labs/ssr-dom-shim/lib/

.prettierignore

@@ -262,9 +262,11 @@ packages/labs/ssr/index.*
 
 packages/labs/ssr-client/development/
 packages/labs/ssr-client/directives/
-packages/labs/ssr-client/controllers/
+packages/labs/ssr-client/lib/
+packages/labs/ssr-client/node/
 packages/labs/ssr-client/node_modules/
 packages/labs/ssr-client/index.*
+packages/labs/ssr-client/lit-element-hydrate-support.*
 
 packages/labs/ssr-dom-shim/index.*
 packages/labs/ssr-dom-shim/lib/

packages/labs/eleventy-plugin-lit/README.md

@@ -252,7 +252,7 @@ to their JavaScript implementations, becoming responsive and interactive.
 Lit components can automatically hydrate themselves when they detect that a
 Shadow Root has already been attached, as long as Lit's _experimental hydrate
 support_ module has been installed by importing
-[`lit/experimental-hydrate-support.js`](https://github.com/lit/lit/blob/main/packages/lit-element/src/experimental-hydrate-support.ts).
+[`@lit-labs/ssr-client/lit-element-hydrate-support.js`](https://github.com/lit/lit/blob/main/packages/labs/ssr-client/src/lit-element-hydrate-support.ts).
 
 > ⏱️ The Lit hydration support module **must be loaded before Lit or any
 > components that depend on Lit are imported**, because it modifies the initial
@@ -325,7 +325,7 @@ The file `_includes/default.html` would then contain the following:
         execute them yet, though. -->
     <link
       rel="modulepreload"
-      href="/node_modules/lit/experimental-hydrate-support.js"
+      href="/node_modules/@lit-labs/ssr-client/lit-element-hydrate-support.js"
     />
     <link rel="modulepreload" href="/_js/component1.js" />
     <link rel="modulepreload" href="/_js/component2.js" />
@@ -368,7 +368,7 @@ The file `_includes/default.html` would then contain the following:
         // Start fetching the Lit hydration support module (note the absence
         // of "await" -- we don't want to block yet).
         const litHydrateSupportInstalled = import(
-          '/node_modules/lit/experimental-hydrate-support.js'
+          '/node_modules/@lit-labs/ssr-client/lit-element-hydrate-support.js'
         );
 
         // Check if we require the declarative shadow DOM polyfill. As of

packages/labs/eleventy-plugin-lit/demo/_includes/default.html

@@ -44,7 +44,7 @@
         // Start fetching the Lit hydration support module (note the absence
         // of "await" -- we don't want to block yet).
         const litHydrateSupportInstalled = import(
-          'lit/experimental-hydrate-support.js'
+          '@lit-labs/ssr-client/lit-element-hydrate-support.js'
         );
 
         // Check if we require the declarative shadow DOM polyfill. As of

packages/labs/nextjs/src/index.ts

@@ -28,7 +28,7 @@ export = (_pluginOptions: LitSsrPluginOptions = {}) =>
           options: {
             // This adds a side-effectful import which monkey patches
             // `React.createElement` in the server and imports
-            // `lit/experimental-hydrate-support.js` in the client.
+            // `@lit-labs/ssr-client/lit-element-hydrate-support.js` in the client.
             imports: ['side-effects @lit-labs/ssr-react/enable-lit-ssr.js'],
           },
         });

packages/labs/ssr-client/.gitignore

@@ -1,5 +1,7 @@
 /development/
 /directives/
-/controllers/
+/lib/
+/node/
 /node_modules/
 /index.*
+/lit-element-hydrate-support.*

packages/labs/ssr-client/package.json

@@ -18,10 +18,25 @@
   },
   "exports": {
     ".": {
+      "types": "./development/index.d.ts",
+      "node": {
+        "development": "./node/development/index.js",
+        "default": "./node/index.js"
+      },
       "development": "./development/index.js",
       "default": "./index.js"
     },
+    "./lit-element-hydrate-support.js": {
+      "types": "./development/lit-element-hydrate-support.d.ts",
+      "node": {
+        "development": "./node/development/lit-element-hydrate-support.js",
+        "default": "./node/lit-element-hydrate-support.js"
+      },
+      "development": "./development/lit-element-hydrate-support.js",
+      "default": "./lit-element-hydrate-support.js"
+    },
     "./directives/render-light.js": {
+      "types": "./development/directives/render-light.d.ts",
       "development": "./development/directives/render-light.js",
       "default": "./directives/render-light.js"
     }
@@ -30,7 +45,9 @@
     "/development/",
     "!/development/test/",
     "/directives/",
-    "/index.{d.ts,d.ts.map,js,js.map}"
+    "/lib/",
+    "/index.{d.ts,d.ts.map,js,js.map}",
+    "/lit-element-hydrate-support.{d.ts,d.ts.map,js,js.map}"
   ],
   "scripts": {
     "build": "wireit",
@@ -72,7 +89,8 @@
       "files": [],
       "output": [
         "*.d.ts{,.map}",
-        "directives/*.d.ts{,.map}"
+        "directives/*.d.ts{,.map}",
+        "lib/*.d.ts{,.map}"
       ]
     },
     "build:rollup": {
@@ -86,7 +104,10 @@
       ],
       "output": [
         "index.js{,.map}",
-        "directives/*.js{,.map}"
+        "lit-element-hydrate-support.js{,.map}",
+        "directives/*.js{,.map}",
+        "lib/*.js{,.map}",
+        "node/"
       ]
     },
     "checksize": {
@@ -106,9 +127,9 @@
     "@lit-internal/scripts": "^1.0.0"
   },
   "dependencies": {
+    "@lit/reactive-element": "^1.0.0",
     "lit": "^2.0.0",
-    "lit-html": "^2.0.0",
-    "@lit/reactive-element": "^1.0.0"
+    "lit-html": "^2.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/labs/ssr-client/rollup.config.js

@@ -9,6 +9,11 @@ import {createRequire} from 'module';
 
 export default litProdConfig({
   packageName: createRequire(import.meta.url)('./package.json').name,
-  entryPoints: ['index', 'directives/render-light'],
+  entryPoints: [
+    'index',
+    'lit-element-hydrate-support',
+    'directives/render-light',
+  ],
   external: ['lit/directive.js', 'lit/directive-helpers.js'],
+  includeNodeBuild: true,
 });

packages/labs/ssr-client/src/env.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+// eslint-disable-next-line no-var
+declare var litElementHydrateSupport:
+  | undefined
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  | ((options: {LitElement: any}) => void);

packages/labs/ssr-client/src/index.ts

@@ -3,4 +3,4 @@
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-export {};
+export * from './lib/hydrate-lit-html.js';