mirror of
https://github.com/modernweb-dev/rocket.git
synced 2026-03-10 08:51:24 +00:00
feat: add progressive hydration support
This commit is contained in:
5
examples/blog/config/rocket.config.js
Normal file
5
examples/blog/config/rocket.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
export default /** @type {import('@rocket/cli').RocketCliOptions} */ ({
|
||||
absoluteBaseUrl: 'http://localhost:8080',
|
||||
longFileHeaderWidth: 100,
|
||||
longFileHeaderComment: '// prettier-ignore',
|
||||
});
|
||||
@@ -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",
|
||||
|
||||
@@ -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 */
|
||||
```
|
||||
|
||||
|
||||
@@ -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!';
|
||||
|
||||
@@ -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!';
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
]
|
||||
}
|
||||
@@ -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',
|
||||
};
|
||||
|
||||
@@ -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()],
|
||||
});
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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)';
|
||||
|
||||
@@ -6,6 +6,5 @@
|
||||
"url": "/",
|
||||
"outputRelativeFilePath": "index.html",
|
||||
"sourceRelativeFilePath": "index.rocket.html",
|
||||
"level": 0,
|
||||
"keepConvertedFiles": true
|
||||
"level": 0
|
||||
}
|
||||
@@ -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',
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user