fix: issue with keys under ssr no-update root (#1527)

Co-authored-by: Michael Rawlings <mirawlings@ebay.com>
(cherry picked from commit fd03031)

packages/marko/src/runtime/components/Component.js

@@ -20,6 +20,7 @@ var morphdom = require("../vdom/morphdom");
 var eventDelegation = require("./event-delegation");
 var domData = require("./dom-data");
 var componentsByDOMNode = domData.___componentByDOMNode;
+var keyedElementsByComponentId = domData.___ssrKeyedElementsByComponentId;
 var CONTEXT_KEY = "__subtree_context__";
 
 var hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -181,16 +182,21 @@ function Component(id) {
   this.___input = undefined;
   this.___mounted = false;
   this.___global = undefined;
-
   this.___destroyed = false;
   this.___updateQueued = false;
   this.___dirty = false;
   this.___settingInput = false;
-
   this.___document = undefined;
-
-  this.___keyedElements = {};
   this.___keySequence = undefined;
+
+  var ssrKeyedElements = keyedElementsByComponentId[id];
+
+  if (ssrKeyedElements) {
+    this.___keyedElements = ssrKeyedElements;
+    delete keyedElementsByComponentId[id];
+  } else {
+    this.___keyedElements = {};
+  }
 }
 
 Component.prototype = componentProto = {

packages/marko/src/runtime/components/beginComponent.js

@@ -23,12 +23,13 @@ module.exports = function beginComponent(
     componentsContext
   ));
 
-  // On the server
-  if (
-    !componentsContext.___isPreserved &&
+  var ownerIsRenderBoundary =
+    ownerComponentDef && ownerComponentDef.___renderBoundary;
+  var ownerWillRerender =
     ownerComponentDef &&
-    ownerComponentDef.___flags & FLAG_WILL_RERENDER_IN_BROWSER
-  ) {
+    ownerComponentDef.___flags & FLAG_WILL_RERENDER_IN_BROWSER;
+  // On the server
+  if (!componentsContext.___isPreserved && ownerWillRerender) {
     componentDef.___flags |= FLAG_WILL_RERENDER_IN_BROWSER;
     return componentDef;
   }
@@ -57,7 +58,7 @@ module.exports = function beginComponent(
     componentDef.___flags |= FLAG_OLD_HYDRATE_NO_CREATE;
   }
 
-  if (ownerComponentDef && ownerComponentDef.___renderBoundary && key != null) {
+  if ((ownerIsRenderBoundary || ownerWillRerender) && key != null) {
     out.w(
       "<!--" +
         runtimeId +

packages/marko/src/runtime/components/dom-data.js

@@ -19,5 +19,6 @@ module.exports = {
   ___vElementByDOMNode: new WeakMap(),
   ___componentByDOMNode: new WeakMap(),
   ___detachedByDOMNode: new WeakMap(),
-  ___keyByDOMNode: new WeakMap()
+  ___keyByDOMNode: new WeakMap(),
+  ___ssrKeyedElementsByComponentId: {}
 };

packages/marko/src/runtime/components/init-components-browser.js

@@ -12,10 +12,10 @@ var addComponentRootToKeyedElements =
 var ComponentDef = require("./ComponentDef");
 var registry = require("./registry");
 var domData = require("./dom-data");
+var keyedElementsByComponentId = domData.___ssrKeyedElementsByComponentId;
 var componentsByDOMNode = domData.___componentByDOMNode;
 var serverRenderedGlobals = {};
 var serverComponentRootNodes = {};
-var keyedElementsByComponentId = {};
 
 var FLAG_WILL_RERENDER_IN_BROWSER = 1;
 
@@ -337,9 +337,6 @@ function hydrateComponentAndGetMount(componentDef, doc) {
 
     component.___rootNode = rootNode;
     componentsByDOMNode.set(rootNode, component);
-    component.___keyedElements = keyedElementsByComponentId[componentId] || {};
-
-    delete keyedElementsByComponentId[componentId];
 
     if (componentDef.___flags & FLAG_WILL_RERENDER_IN_BROWSER) {
       component.___document = doc;

packages/marko/test/components-pages/fixtures/no-update-nested-component-key/components/child/index.marko

@@ -0,0 +1,8 @@
+class {
+  onMount() {
+    window.child = this;
+  }
+}
+
+<div key="div">Child</div>
+<nested-child key="nested" no-update/>

packages/marko/test/components-pages/fixtures/no-update-nested-component-key/components/container/index.marko

@@ -0,0 +1,3 @@
+<div class="container">
+    <${input.renderBody}/>
+</div>

packages/marko/test/components-pages/fixtures/no-update-nested-component-key/components/nested-child/index.marko

@@ -0,0 +1,7 @@
+class {
+  onMount() {
+    window.nestedChild = this;
+  }
+}
+
+<div key="div">Nested Child</div>

packages/marko/test/components-pages/fixtures/no-update-nested-component-key/components/root/index.marko

@@ -0,0 +1,9 @@
+class {
+    onMount() {
+        window.root = this;
+    }
+}
+
+<container>
+    <child key="child"/>
+</container>

packages/marko/test/components-pages/fixtures/no-update-nested-component-key/template.marko

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+html lang="en"
+    head
+        meta charset="UTF-8"
+        title -- Marko Test
+    body
+
+        div id="test"
+        div id="mocha"
+        div id="testsTarget"
+
+        <root/>
+
+        init-components immediate

packages/marko/test/components-pages/fixtures/no-update-nested-component-key/tests.js

@@ -0,0 +1,14 @@
+var expect = require("chai").expect;
+
+it("should render correctly", function() {
+  var root = window.root;
+  var child = window.child;
+  var nestedChild = window.nestedChild;
+
+  expect(root.getComponent("child")).to.eql(child);
+
+  expect(child.getComponent("nested")).to.eql(nestedChild);
+  expect(child.getEl("div")).has.property("textContent", "Child");
+
+  expect(nestedChild.getEl("div")).has.property("textContent", "Nested Child");
+});