Merge pull request #315 from chiragpat/rehydration_example

Add support for partial rehydration and example apps for rehydration

packages/@glimmer/component/package.json

@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@glimmer/env": "^0.1.7",
-    "@glimmer/util": "0.61.2",
+    "@glimmer/util": "0.62.4",
     "@glimmer/core": "2.0.0-beta.10",
     "broccoli-file-creator": "^2.1.1",
     "broccoli-merge-trees": "^3.0.2",
@@ -43,11 +43,11 @@
   "devDependencies": {
     "@ember/optional-features": "^0.6.1",
     "@glimmer/application-test-helpers": "^1.0.0",
-    "@glimmer/compiler": "0.61.2",
-    "@glimmer/interfaces": "0.61.2",
+    "@glimmer/compiler": "0.62.4",
+    "@glimmer/interfaces": "0.62.4",
     "@glimmer/resolver": "^0.3.0",
     "@glimmer/tracking": "2.0.0-beta.10",
-    "@glimmer/wire-format": "0.61.2",
+    "@glimmer/wire-format": "0.62.4",
     "@types/ember": "~3.0.29",
     "@types/ember-qunit": "~3.4.3",
     "@types/ember-test-helpers": "~1.0.6",

packages/@glimmer/core/package.json

@@ -13,16 +13,16 @@
   },
   "dependencies": {
     "@glimmer/env": "^0.1.7",
-    "@glimmer/global-context": "0.61.2",
-    "@glimmer/interfaces": "0.61.2",
-    "@glimmer/opcode-compiler": "0.61.2",
-    "@glimmer/program": "0.61.2",
-    "@glimmer/runtime": "0.61.2",
-    "@glimmer/validator": "0.61.2",
+    "@glimmer/global-context": "0.62.4",
+    "@glimmer/interfaces": "0.62.4",
+    "@glimmer/opcode-compiler": "0.62.4",
+    "@glimmer/program": "0.62.4",
+    "@glimmer/runtime": "0.62.4",
+    "@glimmer/validator": "0.62.4",
     "@simple-dom/interface": "^1.4.0"
   },
   "devDependencies": {
-    "@glimmer/compiler": "0.61.2",
+    "@glimmer/compiler": "0.62.4",
     "@glimmer/component": "2.0.0-beta.10",
     "@glimmer/tracking": "2.0.0-beta.10"
   },

packages/@glimmer/core/test/interactive/render-test.ts

@@ -47,4 +47,23 @@ module(`[@glimmer/core] interactive rendering tests`, () => {
 
     assert.equal(containerElement.innerHTML, '<h1>Hello World</h1>');
   });
+
+  test('can partially rehydrate from a different root dom node', async (assert) => {
+    const containerElement = document.createElement('div');
+    containerElement.innerHTML =
+      '<!--%+b:0%--><!--%+b:1%--><div id="test"><!--%+b:2%--><h1>Hello <!--%+b:3%-->World<!--%-b:3%--></h1><!--%-b:2%--></div><!--%-b:1%--><!--%-b:0%-->';
+
+    await render(createTemplate(`<h1>Hello {{@name}}</h1>`), {
+      element: containerElement.querySelector('#test')!,
+      rehydrate: true,
+      args: {
+        name: 'World',
+      },
+    });
+
+    assert.equal(
+      containerElement.innerHTML,
+      '<!--%+b:0%--><!--%+b:1%--><div id="test"><h1>Hello World</h1></div><!--%-b:1%--><!--%-b:0%-->'
+    );
+  });
 });

packages/@glimmer/helper/package.json

@@ -14,8 +14,8 @@
   "dependencies": {
     "@glimmer/component": "2.0.0-beta.10",
     "@glimmer/core": "2.0.0-beta.10",
-    "@glimmer/interfaces": "0.61.2",
-    "@glimmer/reference": "0.61.2"
+    "@glimmer/interfaces": "0.62.4",
+    "@glimmer/reference": "0.62.4"
   },
   "volta": {
     "node": "12.16.1",

packages/@glimmer/modifier/package.json

@@ -12,7 +12,7 @@
     "build": "webpack"
   },
   "dependencies": {
-    "@glimmer/interfaces": "0.61.2",
+    "@glimmer/interfaces": "0.62.4",
     "@simple-dom/interface": "^1.4.0"
   },
   "volta": {

packages/@glimmer/ssr/package.json

@@ -11,10 +11,10 @@
   "module": "dist/modules/index.js",
   "dependencies": {
     "@glimmer/core": "2.0.0-beta.10",
-    "@glimmer/node": "0.61.2",
-    "@glimmer/reference": "0.61.2",
-    "@glimmer/runtime": "0.61.2",
-    "@glimmer/util": "0.61.2",
+    "@glimmer/node": "0.62.4",
+    "@glimmer/reference": "0.62.4",
+    "@glimmer/runtime": "0.62.4",
+    "@glimmer/util": "0.62.4",
     "@simple-dom/document": "^1.4.0",
     "@simple-dom/serializer": "^1.4.0",
     "@simple-dom/void-map": "^1.4.0"

packages/@glimmer/tracking/package.json

@@ -23,14 +23,14 @@
   ],
   "dependencies": {
     "@glimmer/env": "^0.1.7",
-    "@glimmer/validator": "0.61.2"
+    "@glimmer/validator": "0.62.4"
   },
   "devDependencies": {
     "@glimmer/application-test-helpers": "^1.0.0",
-    "@glimmer/compiler": "0.61.2",
-    "@glimmer/interfaces": "0.61.2",
+    "@glimmer/compiler": "0.62.4",
+    "@glimmer/interfaces": "0.62.4",
     "@glimmer/resolver": "^0.3.0",
-    "@glimmer/wire-format": "0.61.2"
+    "@glimmer/wire-format": "0.62.4"
   },
   "ember-addon": {
     "main": "ember-addon-main.js"

packages/babel-plugins/@glimmer/babel-plugin-strict-template-precompile/package.json

@@ -15,7 +15,7 @@
     "@babel/helper-module-imports": "^7.0.0",
     "@babel/parser": "^7.9.4",
     "@babel/types": "^7.9.0",
-    "@glimmer/compiler": "0.61.2"
+    "@glimmer/compiler": "0.62.4"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.8.3",

packages/example-apps/partial-rehydration/index.ts

@@ -0,0 +1,14 @@
+import { renderComponent } from '@glimmer/core';
+import RehydratingComponent from './src/RehydratingComponent';
+
+document.addEventListener(
+  'DOMContentLoaded',
+  () => {
+    const element = document.querySelector('.static-component');
+    renderComponent(RehydratingComponent, {
+      element: element!,
+      rehydrate: true,
+    });
+  },
+  { once: true }
+);

packages/example-apps/partial-rehydration/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "example-app-partial-rehydration",
+  "version": "0.1.12",
+  "description": "Example application using @glimmer packages for partial rehydration",
+  "main": "dist/commonjs/index.js",
+  "repository": "https://github.com/glimmerjs/glimmer.js/tree/master/packages/example-apps/partial-rehydration",
+  "author": "Chirag Patel",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "build": "webpack"
+  },
+  "dependencies": {
+    "@glimmer/core": "^1.0.0",
+    "@glimmer/component": "^1.0.0",
+    "@glimmer/tracking": "^1.0.0",
+    "@glimmer/helper": "^1.0.0",
+    "@glimmer/modifier": "^1.0.0",
+    "@glimmer/ssr": "^1.0.0"
+  },
+  "volta": {
+    "node": "12.16.1",
+    "yarn": "1.22.4"
+  }
+}

packages/example-apps/partial-rehydration/server.ts

@@ -0,0 +1,29 @@
+import { renderToString } from '@glimmer/ssr';
+import StaticComponent from './src/StaticComponent';
+
+interface ExpressResponse {
+  end(str: string): void;
+}
+
+export default async function handler(
+  _: {},
+  res: ExpressResponse,
+  clientsideBundleLocation: string
+): Promise<void> {
+  const ssrOutput = await renderToString(StaticComponent, {
+    rehydrate: true,
+  });
+
+  res.end(`
+      <!doctype html>
+      <html>
+        <head>
+          <title>Glimmer Demo</title>
+        </head>
+        <body>
+          <div id="app">${ssrOutput}</div>
+          <script src="${clientsideBundleLocation}"></script>
+        </body>
+      </html>
+    `);
+}

packages/example-apps/partial-rehydration/src/RehydratingComponent.ts

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { createTemplate, setComponentTemplate } from '@glimmer/core';
+import { on, action } from '@glimmer/modifier';
+
+class RehydratingComponent extends Component {
+  @tracked count = 1;
+
+  @action increment(): void {
+    this.count++;
+  }
+}
+
+setComponentTemplate(
+  createTemplate(
+    { on },
+    `<p>You have clicked the button {{this.count}} times.</p>
+     <button {{on "click" this.increment}}>Click</button>
+    `
+  ),
+  RehydratingComponent
+);
+
+export default RehydratingComponent;

packages/example-apps/partial-rehydration/src/StaticComponent.ts

@@ -0,0 +1,16 @@
+import { createTemplate, setComponentTemplate, templateOnlyComponent } from '@glimmer/core';
+import RehydratingComponent from './RehydratingComponent';
+
+const StaticComponent = setComponentTemplate(
+  createTemplate(
+    { RehydratingComponent },
+    `<div class="static-component">
+      <h1>Hello I am a static component. I don't change after page load.</h1>
+      <RehydratingComponent/>
+     </div>
+    `
+  ),
+  templateOnlyComponent()
+);
+
+export default StaticComponent;

packages/example-apps/rehydration/index.ts

@@ -0,0 +1,14 @@
+import { renderComponent } from '@glimmer/core';
+import MyComponent from './src/MyComponent';
+
+document.addEventListener(
+  'DOMContentLoaded',
+  () => {
+    const element = document.getElementById('app');
+    renderComponent(MyComponent, {
+      element: element!,
+      rehydrate: true,
+    });
+  },
+  { once: true }
+);

packages/example-apps/rehydration/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "example-app-rehydration",
+  "version": "0.1.12",
+  "description": "Example application using @glimmer packages for rehydration",
+  "main": "dist/commonjs/index.js",
+  "repository": "https://github.com/glimmerjs/glimmer.js/tree/master/packages/example-apps/rehydration",
+  "author": "Chirag Patel",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "build": "webpack"
+  },
+  "dependencies": {
+    "@glimmer/core": "^1.0.0",
+    "@glimmer/component": "^1.0.0",
+    "@glimmer/tracking": "^1.0.0",
+    "@glimmer/helper": "^1.0.0",
+    "@glimmer/modifier": "^1.0.0",
+    "@glimmer/ssr": "^1.0.0"
+  },
+  "volta": {
+    "node": "12.16.1",
+    "yarn": "1.22.4"
+  }
+}

packages/example-apps/rehydration/server.ts

@@ -0,0 +1,29 @@
+import { renderToString } from '@glimmer/ssr';
+import MyComponent from './src/MyComponent';
+
+interface ExpressResponse {
+  end(str: string): void;
+}
+
+export default async function handler(
+  _: {},
+  res: ExpressResponse,
+  clientsideBundleLocation: string
+): Promise<void> {
+  const ssrOutput = await renderToString(MyComponent, {
+    rehydrate: true,
+  });
+
+  res.end(`
+      <!doctype html>
+      <html>
+        <head>
+          <title>Glimmer Demo</title>
+        </head>
+        <body>
+          <div id="app">${ssrOutput}</div>
+          <script src="${clientsideBundleLocation}"></script>
+        </body>
+      </html>
+    `);
+}

packages/example-apps/rehydration/src/MyComponent.ts

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { createTemplate, setComponentTemplate } from '@glimmer/core';
+import { on, action } from '@glimmer/modifier';
+
+class MyComponent extends Component {
+  @tracked count = 1;
+
+  @action increment(): void {
+    this.count++;
+  }
+}
+
+setComponentTemplate(
+  createTemplate(
+    { on },
+    `<p>You have clicked the button {{this.count}} times.</p>
+     <button {{on "click" this.increment}}>Click</button>
+    `
+  ),
+  MyComponent
+);
+
+export default MyComponent;