Merge pull request #218 from gigabo/root-attributes

Update root container attributes on `reuseDom` client transition

packages/react-server-test-pages/entrypoints.js

@@ -5,6 +5,10 @@
 // Your method will be defaulted to "get".
 // The default `description` is your route _key_.
 module.exports = {
+	RootAttributes: {
+		entry: "/root/attributes",
+		description: "Attributes on root elements and containers",
+	},
 	RootWhen: {
 		entry: "/root/when",
 		description: "<RootElement when={...}>",

packages/react-server-test-pages/pages/root/attributes.js

@@ -0,0 +1,28 @@
+import {RootContainer, RootElement, Link} from "react-server";
+
+const url = color => `/root/attributes?color=${color}`;
+
+const Links = opts => <span>
+	<Link path={url( "red"    )} {...opts}>Red</    Link><span> | </span>
+	<Link path={url( "yellow" )} {...opts}>Yellow</ Link><span> | </span>
+	<Link path={url( "green"  )} {...opts}>Green</  Link>
+</span>
+
+export default class RootAttributesPage {
+	getElements() {
+		const color = this.getRequest().getQuery().color || "white";
+		const style = `background-color: ${color}`;
+		return <RootContainer>
+			<div>Background below the hr should be <em>{color}</em></div>
+			<div><Links /> (normal)</div>
+			<div><Links reuseDom={true}/> (reuseDom)</div>
+			<hr />
+			<RootContainer style={style}>
+				<div>RootContainer</div>
+			</RootContainer>
+			<RootElement style={style}>
+				<div>RootElement</div>
+			</RootElement>
+		</RootContainer>
+	}
+}

packages/react-server/core/ClientController.js

@@ -577,6 +577,10 @@ class ClientController extends EventEmitter {
 				//
 				if (this._reuseDom && element.containerOpen && oldRootContainer) {
 					mountNode = oldRootContainer;
+					this._updateContainerNodeAttributes(
+						mountNode,
+						element.containerOpen
+					);
 				} else if (this._reuseDom && element.containerClose && !oldRootContainer && !oldRootElement) {
 					mountNode = mountNode.parentNode;
 				} else if (this._reuseDom && oldRootElement) {
@@ -737,6 +741,10 @@ class ClientController extends EventEmitter {
 		return node;
 	}
 
+	_updateContainerNodeAttributes(node, attrs) {
+		_.forEach(attrs, (v, k) => node.setAttribute(k, v));
+	}
+
 	init () {
 
 		var unloadHandler = () => {this.terminate(); };