feat: add progressive hydration support

This commit is contained in:
Thomas Allmer
2022-04-04 09:06:04 +02:00
parent d33400e12e
commit 0226d08de6
230 changed files with 4519 additions and 942 deletions

View File

@@ -0,0 +1,5 @@
export default /** @type {import('@rocket/cli').RocketCliOptions} */ ({
absoluteBaseUrl: 'http://localhost:8080',
longFileHeaderWidth: 100,
longFileHeaderComment: '// prettier-ignore',
});

View File

@@ -7,7 +7,7 @@
"exports": {
".": "./src/index.js",
"./styles/*": "./site/src/styles/*",
"./components/*": "./site/src/components/*"
"./components/*": "./site/src/components/*.js"
},
"scripts": {
"build": "rocket build",

View File

@@ -3,6 +3,13 @@
export const sourceRelativeFilePath = 'about.rocket.md';
import { html, layout, components } from './recursive.data.js';
export { html, layout, components };
export async function registerCustomElements() {
// server-only components
// prettier-ignore
customElements.define('blog-header', await import('@example/blog/components/BlogHeader').then(m => m.BlogHeader));
// prettier-ignore
customElements.define('site-footer', await import('@example/blog/components/SiteFooter').then(m => m.SiteFooter));
}
/* END - Rocket auto generated - do not touch */
```

View File

@@ -4,6 +4,17 @@ export const sourceRelativeFilePath = 'blog/hello-world.rocket.md';
import { html, components } from '../recursive.data.js';
import { layout } from './local.data.js';
export { html, layout, components };
export async function registerCustomElements() {
// server-only components
// prettier-ignore
customElements.define('blog-header', await import('@example/blog/components/BlogHeader').then(m => m.BlogHeader));
// prettier-ignore
customElements.define('blog-author', await import('@example/blog/components/BlogAuthor').then(m => m.BlogAuthor));
// prettier-ignore
customElements.define('blog-post', await import('@example/blog/components/BlogPost').then(m => m.BlogPost));
// prettier-ignore
customElements.define('site-footer', await import('@example/blog/components/SiteFooter').then(m => m.SiteFooter));
}
/* END - Rocket auto generated - do not touch */
export const title = 'Hello world!';

View File

@@ -4,6 +4,17 @@ export const sourceRelativeFilePath = 'blog/with-image.rocket.md';
import { html, components } from '../recursive.data.js';
import { layout } from './local.data.js';
export { html, layout, components };
export async function registerCustomElements() {
// server-only components
// prettier-ignore
customElements.define('blog-header', await import('@example/blog/components/BlogHeader').then(m => m.BlogHeader));
// prettier-ignore
customElements.define('blog-author', await import('@example/blog/components/BlogAuthor').then(m => m.BlogAuthor));
// prettier-ignore
customElements.define('blog-post', await import('@example/blog/components/BlogPost').then(m => m.BlogPost));
// prettier-ignore
customElements.define('site-footer', await import('@example/blog/components/SiteFooter').then(m => m.SiteFooter));
}
/* END - Rocket auto generated - do not touch */
export const title = 'With Image!';

View File

@@ -2,6 +2,15 @@
export const sourceRelativeFilePath = 'index.rocket.js';
import { html, components } from './recursive.data.js';
export { html, components };
export async function registerCustomElements() {
// server-only components
// prettier-ignore
customElements.define('blog-header', await import('@example/blog/components/BlogHeader').then(m => m.BlogHeader));
// prettier-ignore
customElements.define('blog-post-preview', await import('@example/blog/components/BlogPostPreview').then(m => m.BlogPostPreview));
// prettier-ignore
customElements.define('site-footer', await import('@example/blog/components/SiteFooter').then(m => m.SiteFooter));
}
/* END - Rocket auto generated - do not touch */
export const layout = false;

View File

@@ -8,8 +8,26 @@
"sourceRelativeFilePath": "index.rocket.js",
"level": 0,
"description": "The perfect starter for your perfect blog.",
"layout": false,
"permalink": "https://example.com/",
"children": [
{
"title": "",
"h1": "\n \n ",
"headlinesWithId": [
{
"text": "About",
"id": "about",
"level": 1
}
],
"name": "\n \n ",
"menuLinkText": "\n \n ",
"url": "/about/",
"outputRelativeFilePath": "about/index.html",
"sourceRelativeFilePath": "about.rocket.md",
"level": 1
},
{
"name": "blog/index.rocket.js",
"menuLinkText": "blog/index.rocket.js",
@@ -17,6 +35,7 @@
"outputRelativeFilePath": "blog/index.html",
"sourceRelativeFilePath": "blog/index.rocket.js",
"level": 1,
"layout": false,
"children": [
{
"title": "Hello world!",
@@ -27,11 +46,9 @@
"outputRelativeFilePath": "blog/hello-world/index.html",
"sourceRelativeFilePath": "blog/hello-world.rocket.md",
"level": 2,
"alt": "",
"author": "Thomas Allmer (@daKmoR)",
"authorHref": "https://twitter.com/daKmoR",
"description": "Just a Hello World Post!",
"heroImage": "",
"publishDate": "12 Sep 2021",
"value": 128
},
@@ -52,26 +69,7 @@
"publishDate": "13 Sep 2021",
"value": 128
}
],
"layout": false
},
{
"title": "",
"h1": "\n \n ",
"headlinesWithId": [
{
"text": "About",
"id": "about",
"level": 1
}
],
"name": "\n \n ",
"menuLinkText": "\n \n ",
"url": "/about/",
"outputRelativeFilePath": "about/index.html",
"sourceRelativeFilePath": "about.rocket.md",
"level": 1
]
}
],
"layout": false
]
}

View File

@@ -7,10 +7,9 @@ export { html } from 'lit';
export const layout = new LayoutPage();
export const components = {
'blog-author': () => import('../src/components/BlogAuthor.js').then(m => m.BlogAuthor),
'blog-header': () => import('../src/components/BlogHeader.js').then(m => m.BlogHeader),
'blog-post': () => import('../src/components/BlogPost.js').then(m => m.BlogPost),
'blog-post-preview': () =>
import('../src/components/BlogPostPreview.js').then(m => m.BlogPostPreview),
'site-footer': () => import('../src/components/SiteFooter.js').then(m => m.SiteFooter),
'blog-author': '@example/blog/components/BlogAuthor::BlogAuthor',
'blog-header': '@example/blog/components/BlogHeader::BlogHeader',
'blog-post': '@example/blog/components/BlogPost::BlogPost',
'blog-post-preview': '@example/blog/components/BlogPostPreview::BlogPostPreview',
'site-footer': '@example/blog/components/SiteFooter::SiteFooter',
};

View File

@@ -2,5 +2,7 @@ import { rocketSpark } from '@rocket/spark';
export default /** @type {import('@rocket/cli').RocketCliOptions} */ ({
absoluteBaseUrl: 'http://localhost:8080',
longFileHeaderWidth: 100,
longFileHeaderComment: '// prettier-ignore',
presets: [rocketSpark()],
});

View File

@@ -17,5 +17,8 @@
"@rocket/spark": "^0.1.0-alpha.1",
"lit": "^2.0.0"
},
"@rocket/template-name": "Landing Page (Spark Theme)"
"@rocket/template-name": "Landing Page (Spark Theme)",
"imports": {
"#components/*": "./site/src/components/*.js"
}
}

View File

@@ -3,6 +3,17 @@
export const sourceRelativeFilePath = 'index.rocket.html';
import { pageTree, layout, components } from './recursive.data.js';
export { pageTree, layout, components };
export async function registerCustomElements() {
// server-only components
customElements.define('block-columns', await import('@rocket/components/components/BlockColumns').then(m => m.BlockColumns));
customElements.define('card-icon', await import('@rocket/components/components/CardIcon').then(m => m.CardIcon));
customElements.define('feature-small', await import('@rocket/components/components/FeatureSmall').then(m => m.FeatureSmall));
customElements.define('block-features', await import('@rocket/spark/components/BlockFeatures').then(m => m.BlockFeatures));
customElements.define('block-columns-gray', await import('#components/BlockColumnsGray').then(m => m.BlockColumnsGray));
customElements.define('testimonial-small', await import('@rocket/components/components/TestimonialSmall').then(m => m.TestimonialSmall));
customElements.define('block-blue', await import('@rocket/spark/components/BlockBlue').then(m => m.BlockBlue));
customElements.define('the-block', await import('@rocket/components/components/TheBlock').then(m => m.TheBlock));
}
/* END - Rocket auto generated - do not touch */
export const title = 'Rocket Landing Page Template (Theme Spark)';

View File

@@ -6,6 +6,5 @@
"url": "/",
"outputRelativeFilePath": "index.html",
"sourceRelativeFilePath": "index.rocket.html",
"level": 0,
"keepConvertedFiles": true
"level": 0
}

View File

@@ -16,6 +16,5 @@ export const layout = new LayoutHome({
export const components = {
...rocketComponents,
...sparkComponents,
'block-columns-gray': () =>
import('../src/components/BlockColumnsGray.js').then(m => m.BlockColumnsGray),
'block-columns-gray': '#components/BlockColumnsGray::BlockColumnsGray',
};