Skip to content
This repository was archived by the owner on Oct 29, 2024. It is now read-only.

Commit 130dd8f

Browse files
chadhietalachadhietala
authored
Merge pull request #315 from chiragpat/rehydration_example
Add support for partial rehydration and example apps for rehydration
2 parents 7a5c057 + dd74671 commit 130dd8f

File tree

19 files changed

+449
-157
lines changed

19 files changed

+449
-157
lines changed

‎packages/@glimmer/component/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
},
2828
"dependencies": {
2929
"@glimmer/env": "^0.1.7",
30-
"@glimmer/util": "0.61.2",
30+
"@glimmer/util": "0.62.4",
3131
"@glimmer/core": "2.0.0-beta.10",
3232
"broccoli-file-creator": "^2.1.1",
3333
"broccoli-merge-trees": "^3.0.2",
@@ -43,11 +43,11 @@
4343
"devDependencies": {
4444
"@ember/optional-features": "^0.6.1",
4545
"@glimmer/application-test-helpers": "^1.0.0",
46-
"@glimmer/compiler": "0.61.2",
47-
"@glimmer/interfaces": "0.61.2",
46+
"@glimmer/compiler": "0.62.4",
47+
"@glimmer/interfaces": "0.62.4",
4848
"@glimmer/resolver": "^0.3.0",
4949
"@glimmer/tracking": "2.0.0-beta.10",
50-
"@glimmer/wire-format": "0.61.2",
50+
"@glimmer/wire-format": "0.62.4",
5151
"@types/ember": "~3.0.29",
5252
"@types/ember-qunit": "~3.4.3",
5353
"@types/ember-test-helpers": "~1.0.6",

‎packages/@glimmer/core/package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@
1313
},
1414
"dependencies": {
1515
"@glimmer/env": "^0.1.7",
16-
"@glimmer/global-context": "0.61.2",
17-
"@glimmer/interfaces": "0.61.2",
18-
"@glimmer/opcode-compiler": "0.61.2",
19-
"@glimmer/program": "0.61.2",
20-
"@glimmer/runtime": "0.61.2",
21-
"@glimmer/validator": "0.61.2",
16+
"@glimmer/global-context": "0.62.4",
17+
"@glimmer/interfaces": "0.62.4",
18+
"@glimmer/opcode-compiler": "0.62.4",
19+
"@glimmer/program": "0.62.4",
20+
"@glimmer/runtime": "0.62.4",
21+
"@glimmer/validator": "0.62.4",
2222
"@simple-dom/interface": "^1.4.0"
2323
},
2424
"devDependencies": {
25-
"@glimmer/compiler": "0.61.2",
25+
"@glimmer/compiler": "0.62.4",
2626
"@glimmer/component": "2.0.0-beta.10",
2727
"@glimmer/tracking": "2.0.0-beta.10"
2828
},

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,4 +47,23 @@ module(`[@glimmer/core] interactive rendering tests`, () => {
4747

4848
assert.equal(containerElement.innerHTML, '<h1>Hello World</h1>');
4949
});
50+
51+
test('can partially rehydrate from a different root dom node', async (assert) => {
52+
const containerElement = document.createElement('div');
53+
containerElement.innerHTML =
54+
'<!--%+b:0%--><!--%+b:1%--><div id="test"><!--%+b:2%--><h1>Hello <!--%+b:3%-->World<!--%-b:3%--></h1><!--%-b:2%--></div><!--%-b:1%--><!--%-b:0%-->';
55+
56+
await render(createTemplate(`<h1>Hello {{@name}}</h1>`), {
57+
element: containerElement.querySelector('#test')!,
58+
rehydrate: true,
59+
args: {
60+
name: 'World',
61+
},
62+
});
63+
64+
assert.equal(
65+
containerElement.innerHTML,
66+
'<!--%+b:0%--><!--%+b:1%--><div id="test"><h1>Hello World</h1></div><!--%-b:1%--><!--%-b:0%-->'
67+
);
68+
});
5069
});

‎packages/@glimmer/helper/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
"dependencies": {
1515
"@glimmer/component": "2.0.0-beta.10",
1616
"@glimmer/core": "2.0.0-beta.10",
17-
"@glimmer/interfaces": "0.61.2",
18-
"@glimmer/reference": "0.61.2"
17+
"@glimmer/interfaces": "0.62.4",
18+
"@glimmer/reference": "0.62.4"
1919
},
2020
"volta": {
2121
"node": "12.16.1",

‎packages/@glimmer/modifier/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"build": "webpack"
1313
},
1414
"dependencies": {
15-
"@glimmer/interfaces": "0.61.2",
15+
"@glimmer/interfaces": "0.62.4",
1616
"@simple-dom/interface": "^1.4.0"
1717
},
1818
"volta": {

‎packages/@glimmer/ssr/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
"module": "dist/modules/index.js",
1212
"dependencies": {
1313
"@glimmer/core": "2.0.0-beta.10",
14-
"@glimmer/node": "0.61.2",
15-
"@glimmer/reference": "0.61.2",
16-
"@glimmer/runtime": "0.61.2",
17-
"@glimmer/util": "0.61.2",
14+
"@glimmer/node": "0.62.4",
15+
"@glimmer/reference": "0.62.4",
16+
"@glimmer/runtime": "0.62.4",
17+
"@glimmer/util": "0.62.4",
1818
"@simple-dom/document": "^1.4.0",
1919
"@simple-dom/serializer": "^1.4.0",
2020
"@simple-dom/void-map": "^1.4.0"

‎packages/@glimmer/tracking/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@
2323
],
2424
"dependencies": {
2525
"@glimmer/env": "^0.1.7",
26-
"@glimmer/validator": "0.61.2"
26+
"@glimmer/validator": "0.62.4"
2727
},
2828
"devDependencies": {
2929
"@glimmer/application-test-helpers": "^1.0.0",
30-
"@glimmer/compiler": "0.61.2",
31-
"@glimmer/interfaces": "0.61.2",
30+
"@glimmer/compiler": "0.62.4",
31+
"@glimmer/interfaces": "0.62.4",
3232
"@glimmer/resolver": "^0.3.0",
33-
"@glimmer/wire-format": "0.61.2"
33+
"@glimmer/wire-format": "0.62.4"
3434
},
3535
"ember-addon": {
3636
"main": "ember-addon-main.js"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"@babel/helper-module-imports": "^7.0.0",
1616
"@babel/parser": "^7.9.4",
1717
"@babel/types": "^7.9.0",
18-
"@glimmer/compiler": "0.61.2"
18+
"@glimmer/compiler": "0.62.4"
1919
},
2020
"devDependencies": {
2121
"@babel/preset-env": "^7.8.3",

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { renderComponent } from '@glimmer/core';
2+
import RehydratingComponent from './src/RehydratingComponent';
3+
4+
document.addEventListener(
5+
'DOMContentLoaded',
6+
() => {
7+
const element = document.querySelector('.static-component');
8+
renderComponent(RehydratingComponent, {
9+
element: element!,
10+
rehydrate: true,
11+
});
12+
},
13+
{ once: true }
14+
);

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "example-app-partial-rehydration",
3+
"version": "0.1.12",
4+
"description": "Example application using @glimmer packages for partial rehydration",
5+
"main": "dist/commonjs/index.js",
6+
"repository": "https://github.com/glimmerjs/glimmer.js/tree/master/packages/example-apps/partial-rehydration",
7+
"author": "Chirag Patel",
8+
"license": "MIT",
9+
"private": true,
10+
"scripts": {
11+
"build": "webpack"
12+
},
13+
"dependencies": {
14+
"@glimmer/core": "^1.0.0",
15+
"@glimmer/component": "^1.0.0",
16+
"@glimmer/tracking": "^1.0.0",
17+
"@glimmer/helper": "^1.0.0",
18+
"@glimmer/modifier": "^1.0.0",
19+
"@glimmer/ssr": "^1.0.0"
20+
},
21+
"volta": {
22+
"node": "12.16.1",
23+
"yarn": "1.22.4"
24+
}
25+
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { renderToString } from '@glimmer/ssr';
2+
import StaticComponent from './src/StaticComponent';
3+
4+
interface ExpressResponse {
5+
end(str: string): void;
6+
}
7+
8+
export default async function handler(
9+
_: {},
10+
res: ExpressResponse,
11+
clientsideBundleLocation: string
12+
): Promise<void> {
13+
const ssrOutput = await renderToString(StaticComponent, {
14+
rehydrate: true,
15+
});
16+
17+
res.end(`
18+
<!doctype html>
19+
<html>
20+
<head>
21+
<title>Glimmer Demo</title>
22+
</head>
23+
<body>
24+
<div id="app">${ssrOutput}</div>
25+
<script src="${clientsideBundleLocation}"></script>
26+
</body>
27+
</html>
28+
`);
29+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Component from '@glimmer/component';
2+
import { tracked } from '@glimmer/tracking';
3+
import { createTemplate, setComponentTemplate } from '@glimmer/core';
4+
import { on, action } from '@glimmer/modifier';
5+
6+
class RehydratingComponent extends Component {
7+
@tracked count = 1;
8+
9+
@action increment(): void {
10+
this.count++;
11+
}
12+
}
13+
14+
setComponentTemplate(
15+
createTemplate(
16+
{ on },
17+
`<p>You have clicked the button {{this.count}} times.</p>
18+
<button {{on "click" this.increment}}>Click</button>
19+
`
20+
),
21+
RehydratingComponent
22+
);
23+
24+
export default RehydratingComponent;

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { createTemplate, setComponentTemplate, templateOnlyComponent } from '@glimmer/core';
2+
import RehydratingComponent from './RehydratingComponent';
3+
4+
const StaticComponent = setComponentTemplate(
5+
createTemplate(
6+
{ RehydratingComponent },
7+
`<div class="static-component">
8+
<h1>Hello I am a static component. I don't change after page load.</h1>
9+
<RehydratingComponent/>
10+
</div>
11+
`
12+
),
13+
templateOnlyComponent()
14+
);
15+
16+
export default StaticComponent;

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { renderComponent } from '@glimmer/core';
2+
import MyComponent from './src/MyComponent';
3+
4+
document.addEventListener(
5+
'DOMContentLoaded',
6+
() => {
7+
const element = document.getElementById('app');
8+
renderComponent(MyComponent, {
9+
element: element!,
10+
rehydrate: true,
11+
});
12+
},
13+
{ once: true }
14+
);

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "example-app-rehydration",
3+
"version": "0.1.12",
4+
"description": "Example application using @glimmer packages for rehydration",
5+
"main": "dist/commonjs/index.js",
6+
"repository": "https://github.com/glimmerjs/glimmer.js/tree/master/packages/example-apps/rehydration",
7+
"author": "Chirag Patel",
8+
"license": "MIT",
9+
"private": true,
10+
"scripts": {
11+
"build": "webpack"
12+
},
13+
"dependencies": {
14+
"@glimmer/core": "^1.0.0",
15+
"@glimmer/component": "^1.0.0",
16+
"@glimmer/tracking": "^1.0.0",
17+
"@glimmer/helper": "^1.0.0",
18+
"@glimmer/modifier": "^1.0.0",
19+
"@glimmer/ssr": "^1.0.0"
20+
},
21+
"volta": {
22+
"node": "12.16.1",
23+
"yarn": "1.22.4"
24+
}
25+
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { renderToString } from '@glimmer/ssr';
2+
import MyComponent from './src/MyComponent';
3+
4+
interface ExpressResponse {
5+
end(str: string): void;
6+
}
7+
8+
export default async function handler(
9+
_: {},
10+
res: ExpressResponse,
11+
clientsideBundleLocation: string
12+
): Promise<void> {
13+
const ssrOutput = await renderToString(MyComponent, {
14+
rehydrate: true,
15+
});
16+
17+
res.end(`
18+
<!doctype html>
19+
<html>
20+
<head>
21+
<title>Glimmer Demo</title>
22+
</head>
23+
<body>
24+
<div id="app">${ssrOutput}</div>
25+
<script src="${clientsideBundleLocation}"></script>
26+
</body>
27+
</html>
28+
`);
29+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Component from '@glimmer/component';
2+
import { tracked } from '@glimmer/tracking';
3+
import { createTemplate, setComponentTemplate } from '@glimmer/core';
4+
import { on, action } from '@glimmer/modifier';
5+
6+
class MyComponent extends Component {
7+
@tracked count = 1;
8+
9+
@action increment(): void {
10+
this.count++;
11+
}
12+
}
13+
14+
setComponentTemplate(
15+
createTemplate(
16+
{ on },
17+
`<p>You have clicked the button {{this.count}} times.</p>
18+
<button {{on "click" this.increment}}>Click</button>
19+
`
20+
),
21+
MyComponent
22+
);
23+
24+
export default MyComponent;

0 commit comments

Comments
 (0)