Skip to content

Commit 409bb2f

Browse files
daKmoRdaKmoR
committed
chore: add hydration starter to create
1 parent 0f77a8b commit 409bb2f

File tree

153 files changed

+448
-87
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

153 files changed

+448
-87
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ docs/_merged*
1616

1717
# sanity example has a separate backend that is unrelated to Rocket
1818
# therefore it does not need to follow it code rules
19-
/examples/sanity-minimal-starter/backend/
19+
/examples/04-sanity-minimal-starter/backend/
2020

2121
/packages/engine/test-node/fixtures/06-error-handling/01-page-error/docs/index.rocket.js
2222
/packages/engine/test-node/fixtures/03b-format-markdown/c01-md-in-js-to-md-html/md-in-js.js

‎examples/blog/.gitignore‎ renamed to ‎examples/01-hydration-starter/.gitignore‎

File renamed without changes.

‎examples/landing-spark/.vscode/settings.json‎ renamed to ‎examples/01-hydration-starter/.vscode/settings.json‎

File renamed without changes.

‎examples/01-hydration-starter/README.md‎

Lines changed: 44 additions & 0 deletions

‎examples/minimal/config/rocket.config.js‎ renamed to ‎examples/01-hydration-starter/config/rocket.config.js‎

File renamed without changes.

‎examples/01-hydration-starter/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "rocket-hydration-starter",
3+
"version": "0.0.1",
4+
"private": true,
5+
"description": "Example on how to hydrate web components",
6+
"type": "module",
7+
"scripts": {
8+
"build": "rocket build",
9+
"dev": "npm start",
10+
"preview": "rocket preview",
11+
"start": "NODE_DEBUG=engine:rendering rocket start --open"
12+
},
13+
"devDependencies": {
14+
"@rocket/cli": "^0.20.0-alpha.17",
15+
"@rocket/engine": "^0.1.0-alpha.23",
16+
"@webcomponents/template-shadowroot": "^0.1.0",
17+
"lit": "^2.0.0"
18+
},
19+
"@rocket/template-name": "Hydration Starter",
20+
"imports": {
21+
"#components/*": "./site/src/components/*"
22+
}
23+
}

‎examples/01-hydration-starter/site/pages/index.rocket.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* START - Rocket auto generated - do not touch */
2+
export const sourceRelativeFilePath = 'index.rocket.js';
3+
import { html, components, layout } from './recursive.data.js';
4+
export { html, components, layout };
5+
export async function registerCustomElements() {
6+
// server-only components
7+
customElements.define(
8+
'hello-wave',
9+
await import('#components/HelloWave.js').then(m => m.HelloWave),
10+
);
11+
// hydrate-able components
12+
customElements.define(
13+
'hello-typer',
14+
await import('#components/HelloTyper.js').then(m => m.HelloTyper),
15+
);
16+
customElements.define(
17+
'my-counter',
18+
await import('#components/MyCounter.js').then(m => m.MyCounter),
19+
);
20+
}
21+
/* END - Rocket auto generated - do not touch */
22+
23+
export default () => html`
24+
<h1>Hello World</h1>
25+
<hello-wave></hello-wave>
26+
<hello-typer loading="hydrate:onVisible"></hello-typer>
27+
<details open>
28+
<!-- put an open attribute on the details element to check hydration as you scroll down -->
29+
<summary>👇</summary>
30+
<p style="height: 120vh;">Emptiness of space</p>
31+
</details>
32+
<my-counter loading="hydrate:onVisible"></my-counter>
33+
`;

‎examples/01-hydration-starter/site/pages/pageTreeData.rocketGenerated.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"h1": "Hello World",
3+
"name": "Hello World",
4+
"menuLinkText": "Hello World",
5+
"url": "/",
6+
"outputRelativeFilePath": "index.html",
7+
"sourceRelativeFilePath": "index.rocket.js",
8+
"level": 0
9+
}

‎examples/01-hydration-starter/site/pages/recursive.data.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { html } from 'lit';
2+
3+
export { html };
4+
5+
export const components = {
6+
'hello-wave': '#components/HelloWave.js::HelloWave',
7+
'hello-typer': '#components/HelloTyper.js::HelloTyper',
8+
'my-counter': '#components/MyCounter.js::MyCounter',
9+
// 👆 we are using a private import defined in the package json that maps
10+
// "#components/*": "./site/src/components/*"
11+
// (see https://nodejs.org/api/packages.html#packages_imports)
12+
};
13+
14+
export const layout = data => html`
15+
<!DOCTYPE html>
16+
<html lang="en">
17+
<head>
18+
<meta charset="utf-8" />
19+
</head>
20+
<body>
21+
${data.content()}
22+
</body>
23+
</html>
24+
`;

‎examples/blog/site/public/android-chrome-192x192.png‎ renamed to ‎examples/01-hydration-starter/site/public/android-chrome-192x192.png‎

File renamed without changes.

0 commit comments

Comments
 (0)