poc: ssr client rehydration

.circleci/config.yml

@@ -105,6 +105,9 @@ commands:
         type: boolean
       compat:
         type: boolean
+      test_hydrate:
+        type: boolean
+        default: false
       coverage:
         type: boolean
         default: true
@@ -116,6 +119,7 @@ commands:
               <<# parameters.disable_synthetic >> DISABLE_SYNTHETIC=1 <</ parameters.disable_synthetic >>
               <<# parameters.force_native_shadow_mode >> FORCE_NATIVE_SHADOW_MODE_FOR_TEST=1 <</ parameters.force_native_shadow_mode >>
               <<# parameters.compat >> COMPAT=1 <</ parameters.compat >>
+              <<# parameters.test_hydrate >> TEST_HYDRATION=1 <</ parameters.test_hydrate >>
               <<# parameters.coverage >> COVERAGE=1 <</ parameters.coverage >>
               yarn sauce
 
@@ -190,6 +194,11 @@ jobs:
           disable_synthetic: false
           compat: false
           force_native_shadow_mode: true
+      - run_karma:
+          disable_synthetic: true
+          compat: false
+          force_native_shadow_mode: false
+          test_hydrate: true
       - run:
           name: Compute karma coverage
           command: yarn coverage

packages/@lwc/babel-plugin-component/src/constants.js

@@ -47,6 +47,7 @@ const LWC_SUPPORTED_APIS = new Set([
     'unwrap',
 
     // From "@lwc/engine-dom"
+    'hydrateComponent',
     'buildCustomElementConstructor',
     'createElement',
 

packages/@lwc/engine-core/src/3rdparty/snabbdom/types.ts

@@ -94,6 +94,7 @@ export interface Hooks<N extends VNode> {
     move: (vNode: N, parentNode: Node, referenceNode: Node | null) => void;
     update: (oldVNode: N, vNode: N) => void;
     remove: (vNode: N, parentNode: Node) => void;
+    hydrate: (vNode: N, node: Node) => void;
 }
 
 export interface Module<N extends VNode> {

packages/@lwc/engine-core/src/framework/api.ts

@@ -23,14 +23,14 @@ import {
     StringReplace,
     toString,
 } from '@lwc/shared';
-import { logError } from '../shared/logger';
-import { RenderMode } from './vm';
+import { logError, logWarn } from '../shared/logger';
 import { invokeEventListener } from './invoker';
 import { getVMBeingRendered } from './template';
 import { EmptyArray, EmptyObject } from './utils';
 import {
     appendVM,
     getAssociatedVMIfPresent,
+    getAssociatedVM,
     removeVM,
     rerenderVM,
     runConnectedCallback,
@@ -39,6 +39,9 @@ import {
     VM,
     VMState,
     getRenderRoot,
+    createVM,
+    hydrateVM,
+    RenderMode,
 } from './vm';
 import {
     VNode,
@@ -66,8 +69,11 @@ import {
     updateChildrenHook,
     allocateChildrenHook,
     markAsDynamicChildren,
+    hydrateChildrenHook,
+    hydrateElmHook,
+    LWCDOMMode,
 } from './hooks';
-import { isComponentConstructor } from './def';
+import { getComponentInternalDef, isComponentConstructor } from './def';
 import { getUpgradableConstructor } from './upgradable-element';
 
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
@@ -86,6 +92,26 @@ const TextHook: Hooks<VText> = {
     insert: insertNodeHook,
     move: insertNodeHook, // same as insert for text nodes
     remove: removeNodeHook,
+    hydrate: (vNode: VNode, node: Node) => {
+        if (process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line lwc-internal/no-global-node
+            if (node.nodeType !== Node.TEXT_NODE) {
+                logError('Hydration mismatch: incorrect node type received', vNode.owner);
+                assert.fail('Hydration mismatch: incorrect node type received.');
+            }
+
+            if (node.nodeValue !== vNode.text) {
+                logWarn(
+                    'Hydration mismatch: text values do not match, will recover from the difference',
+                    vNode.owner
+                );
+            }
+        }
+
+        // always set the text value to the one from the vnode.
+        node.nodeValue = vNode.text ?? null;
+        vNode.elm = node;
+    },
 };
 
 const CommentHook: Hooks<VComment> = {
@@ -101,6 +127,26 @@ const CommentHook: Hooks<VComment> = {
     insert: insertNodeHook,
     move: insertNodeHook, // same as insert for text nodes
     remove: removeNodeHook,
+    hydrate: (vNode: VNode, node: Node) => {
+        if (process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line lwc-internal/no-global-node
+            if (node.nodeType !== Node.COMMENT_NODE) {
+                logError('Hydration mismatch: incorrect node type received', vNode.owner);
+                assert.fail('Hydration mismatch: incorrect node type received.');
+            }
+
+            if (node.nodeValue !== vNode.text) {
+                logWarn(
+                    'Hydration mismatch: comment values do not match, will recover from the difference',
+                    vNode.owner
+                );
+            }
+        }
+
+        // always set the text value to the one from the vnode.
+        node.nodeValue = vNode.text ?? null;
+        vNode.elm = node;
+    },
 };
 
 // insert is called after update, which is used somewhere else (via a module)
@@ -141,6 +187,39 @@ const ElementHook: Hooks<VElement> = {
         removeNodeHook(vnode, parentNode);
         removeElmHook(vnode);
     },
+    hydrate: (vnode, node) => {
+        const elm = node as Element;
+        vnode.elm = elm;
+
+        const { context } = vnode.data;
+        const isDomManual = Boolean(
+            !isUndefined(context) &&
+                !isUndefined(context.lwc) &&
+                context.lwc.dom === LWCDOMMode.manual
+        );
+
+        if (isDomManual) {
+            // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
+            // remove the innerHTML from props so it reuses the existing dom elements.
+            const { props } = vnode.data;
+            if (!isUndefined(props) && !isUndefined(props.innerHTML)) {
+                if (elm.innerHTML === props.innerHTML) {
+                    delete props.innerHTML;
+                } else {
+                    logWarn(
+                        `Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`,
+                        vnode.owner
+                    );
+                }
+            }
+        }
+
+        hydrateElmHook(vnode);
+
+        if (!isDomManual) {
+            hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vnode.owner);
+        }
+    },
 };
 
 const CustomElementHook: Hooks<VCustomElement> = {
@@ -219,6 +298,39 @@ const CustomElementHook: Hooks<VCustomElement> = {
             removeVM(vm);
         }
     },
+    hydrate: (vnode, elm) => {
+        // the element is created, but the vm is not
+        const { sel, mode, ctor, owner } = vnode;
+
+        const def = getComponentInternalDef(ctor);
+        createVM(elm, def, {
+            mode,
+            owner,
+            tagName: sel,
+            renderer: owner.renderer,
+        });
+
+        vnode.elm = elm as Element;
+
+        const vm = getAssociatedVM(elm);
+        allocateChildrenHook(vnode, vm);
+
+        hydrateElmHook(vnode);
+
+        // Insert hook section:
+        if (process.env.NODE_ENV !== 'production') {
+            assert.isTrue(vm.state === VMState.created, `${vm} cannot be recycled.`);
+        }
+        runConnectedCallback(vm);
+
+        if (vm.renderMode !== RenderMode.Light) {
+            // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
+            // Note: for Light DOM, this is handled while hydrating the VM
+            hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vm);
+        }
+
+        hydrateVM(vm);
+    },
 };
 
 function linkNodeToShadow(elm: Node, owner: VM) {