feat: add progressive hydration support

modernweb-dev · Apr 26, 2022 · 0226d08 · 0226d08
1 parent d33400e
commit 0226d08
Show file tree

Hide file tree

Showing 230 changed files with 4,519 additions and 942 deletions.
diff --git a/.gitignore b/.gitignore
@@ -29,8 +29,11 @@ stats.html
 # Rocket Search
 rocket-search-index.json
 
-## Rocket ignore files (need to be the full relative path to the folders)
+## Rocket ignore files
 *-mdjs-generated.js
+*-converted-md-source.js
+*-converted-md.js
+*-converted-html.js
 _site
 _site-dev
 
@@ -41,3 +44,6 @@ _merged_includes
 __output
 __output-dev
 docs_backup
+
+## Local playground
+examples/testing
diff --git a/config/rocket.config.js b/config/rocket.config.js
@@ -31,9 +31,12 @@ export function absoluteBaseUrlNetlify(fallback) {
   return absoluteBaseUrl;
 }
 
-/** @type {import('@rocket/cli/types/main').RocketCliOptions} */
-export default {
+export default /** @type {import('@rocket/cli/types/main').RocketCliOptions} */ ({
   absoluteBaseUrl: absoluteBaseUrlNetlify('http://localhost:8080'),
+  longFileHeaderWidth: 100,
+  longFileHeaderComment: '// prettier-ignore',
+
+  // buildOpenGraphImages: false,
 
   presets: [
     rocketLaunch(),
@@ -55,4 +58,4 @@ export default {
   // pathPrefix: '/_site/',
 
   // clearOutputDir: false,
-};
+});
diff --git a/examples/blog/config/rocket.config.js b/examples/blog/config/rocket.config.js
@@ -0,0 +1,5 @@
+export default /** @type {import('@rocket/cli').RocketCliOptions} */ ({
+  absoluteBaseUrl: 'http://localhost:8080',
+  longFileHeaderWidth: 100,
+  longFileHeaderComment: '// prettier-ignore',
+});
diff --git a/examples/blog/package.json b/examples/blog/package.json
@@ -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",

diff --git a/examples/blog/site/pages/about.rocket.md b/examples/blog/site/pages/about.rocket.md
@@ -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 */
 ```
 

diff --git a/examples/blog/site/pages/blog/hello-world.rocket.md b/examples/blog/site/pages/blog/hello-world.rocket.md
@@ -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!';

diff --git a/examples/blog/site/pages/blog/with-image.rocket.md b/examples/blog/site/pages/blog/with-image.rocket.md
@@ -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!';

diff --git a/examples/blog/site/pages/index.rocket.js b/examples/blog/site/pages/index.rocket.js
@@ -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;

diff --git a/examples/blog/site/pages/pageTreeData.rocketGenerated.json b/examples/blog/site/pages/pageTreeData.rocketGenerated.json
@@ -8,15 +8,34 @@
   "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",
       "url": "/blog/",
       "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
+  ]
 }
diff --git a/examples/blog/site/pages/recursive.data.js b/examples/blog/site/pages/recursive.data.js
@@ -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',
 };
diff --git a/examples/landing-spark/config/rocket.config.js b/examples/landing-spark/config/rocket.config.js
@@ -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()],
 });
diff --git a/examples/landing-spark/package.json b/examples/landing-spark/package.json
@@ -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"
+  }
 }
diff --git a/examples/landing-spark/site/pages/index.rocket.html b/examples/landing-spark/site/pages/index.rocket.html
@@ -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)';

diff --git a/examples/landing-spark/site/pages/pageTreeData.rocketGenerated.json b/examples/landing-spark/site/pages/pageTreeData.rocketGenerated.json
@@ -6,6 +6,5 @@
   "url": "/",
   "outputRelativeFilePath": "index.html",
   "sourceRelativeFilePath": "index.rocket.html",
-  "level": 0,
-  "keepConvertedFiles": true
+  "level": 0
 }
diff --git a/examples/landing-spark/site/pages/recursive.data.js b/examples/landing-spark/site/pages/recursive.data.js
@@ -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',
 };
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   "scripts": {
     "analyze": "run-s analyze:* format:*",
     "analyze:analyze": "node scripts/workspaces-scripts-bin.mjs analyze",
-    "build": "npm run build:packages && NODE_DEBUG=engine:rendering node packages/cli/src/cli.js build",
+    "build": "npm run build:packages && npm run rocket:build",
     "build:packages": "node scripts/workspaces-scripts-bin.mjs build:package",
     "build:site": "run-s analyze:* rocket:build",
     "changeset": "changeset",
@@ -27,13 +27,14 @@
     "lint:versions": "node scripts/lint-versions.js",
     "postinstall": "npm run setup",
     "release": "changeset publish && yarn format",
-    "rocket:build": "node packages/cli/src/cli.js build",
+    "rocket:build": "NODE_DEBUG=engine:rendering node --trace-warnings packages/cli/src/cli.js build",
     "rocket:upgrade": "node packages/cli/src/cli.js upgrade",
     "search": "node packages/cli/src/cli.js search",
     "setup": "npm run setup:ts-configs && npm run setup:patches",
     "setup:patches": "npx patch-package",
     "setup:ts-configs": "node scripts/generate-ts-configs.mjs",
-    "start": "NODE_DEBUG=engine:rendering node --no-warnings --experimental-loader ./packages/engine/src/litCssLoader.js packages/cli/src/cli.js start --open",
+    "start:experimental": "NODE_DEBUG=engine:rendering node --no-warnings --experimental-loader ./packages/engine/src/litCssLoader.js packages/cli/src/cli.js start --open",
+    "start": "NODE_DEBUG=engine:rendering node --trace-warnings packages/cli/src/cli.js start --open",
     "test": "yarn test:node && yarn test:web",
     "test:integration": "playwright test packages/*/test-node/*.spec.js",
     "test:node": "yarn test:unit && yarn test:integration",
@@ -92,7 +93,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "sinon": "^9.2.3",
     "ts-node": "^9.1.1",
-    "typescript": "^4.6.1-rc"
+    "typescript": "^4.6.3"
   },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
@@ -126,7 +127,8 @@
   },
   "imports": {
     "#pageTree": "./site/pages/__shared/pageTree.js",
-    "#assets/*": "./site/src/assets/*"
+    "#assets/*": "./site/src/assets/*",
+    "#components/*": "./site/src/components/*.js"
   },
   "lint-staged": {
     "*.js": [

diff --git a/packages/cli/src/RocketBuild.js b/packages/cli/src/RocketBuild.js
@@ -94,16 +94,21 @@ export class RocketBuild {
       docsDir: this.cli.options.inputDir,
       outputDir: this.cli.options.outputDevDir,
       setupPlugins: this.cli.options.setupEnginePlugins,
+      longFileHeaderWidth: this.cli.options.longFileHeaderWidth,
+      longFileHeaderComment: this.cli.options.longFileHeaderComment,
       renderMode: 'production',
       clearOutputDir: this.cli.options.clearOutputDir,
     });
+    console.log('Engine building...');
     await this.engine.build({ autoStop: this.cli.options.buildAutoStop });
 
     if (this.cli.options.buildOpenGraphImages) {
+      console.log('Generating Open Graph Images...');
       await this.buildOpenGraphImages();
     }
 
     if (this.cli.options.buildOptimize) {
+      console.log('Optimize Production Build...');
       await productionBuild(this.cli.options);
       await this.engine.copyPublicFilesTo(this.cli.options.outputDir);
     }

diff --git a/packages/cli/src/RocketCli.js b/packages/cli/src/RocketCli.js
@@ -43,6 +43,9 @@ export class RocketCli {
     buildAutoStop: true,
     buildOpenGraphImages: true,
 
+    longFileHeaderWidth: 100,
+    longFileHeaderComment: '',
+
     adjustBuildOptions: options => options,
     adjustDevServerOptions: options => options,
 

diff --git a/packages/cli/src/RocketStart.js b/packages/cli/src/RocketStart.js
@@ -52,6 +52,8 @@ export class RocketStart {
       outputDir: this.cli.options.outputDir,
       setupPlugins: this.cli.options.setupEnginePlugins,
       open: this.cli.options.open,
+      longFileHeaderWidth: this.cli.options.longFileHeaderWidth,
+      longFileHeaderComment: this.cli.options.longFileHeaderComment,
       clearOutputDir: this.cli.options.clearOutputDir,
       adjustDevServerOptions: this.cli.options.adjustDevServerOptions,
       setupDevServerMiddleware: this.cli.options.setupDevServerMiddleware,

diff --git a/packages/cli/test-node/01-config.test.js b/packages/cli/test-node/01-config.test.js
@@ -86,4 +86,31 @@ describe('Config', () => {
 
     await cleanup();
   });
+
+  it('05: long file header comments', async () => {
+    const { build, readSource } = await setupTestCli(
+      'fixtures/01-config/05-long-file-header-comment/',
+    );
+    await build();
+
+    expect(readSource('index.rocket.js', { format: false })).to.equal(
+      [
+        '/* START - Rocket auto generated - do not touch */',
+        "export const sourceRelativeFilePath = 'index.rocket.js';",
+        '// prettier-ignore',
+        "import { veryLongFileHeaderValue, multipleLongFileHeaderValues, fakeHtml, fakeComponents, fakeLayout, components } from './local.data.js';",
+        '// prettier-ignore',
+        'export { veryLongFileHeaderValue, multipleLongFileHeaderValues, fakeHtml, fakeComponents, fakeLayout, components };',
+        'export async function registerCustomElements() {',
+        '  // server-only components',
+        '  // prettier-ignore',
+        "  customElements.define('my-el', await import('@test/components').then(m => m.MyVeryLongElementName));",
+        '}',
+        '/* END - Rocket auto generated - do not touch */',
+        '',
+        "export default () => '<my-el></my-el>';",
+        '',
+      ].join('\n'),
+    );
+  });
 });
diff --git a/...ages/cli/test-node/fixtures/01-config/05-long-file-header-comment/config/rocket.config.js b/...ages/cli/test-node/fixtures/01-config/05-long-file-header-comment/config/rocket.config.js
@@ -0,0 +1,4 @@
+export default /** @type {import('../../../../../types/main.js').RocketCliOptions} */ ({
+  longFileHeaderComment: '// prettier-ignore',
+  longFileHeaderWidth: 100,
+});
diff --git a/packages/cli/test-node/fixtures/01-config/05-long-file-header-comment/site/package.json b/packages/cli/test-node/fixtures/01-config/05-long-file-header-comment/site/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@test/components",
+  "type": "module",
+  "exports": {
+    ".": "./src/MyVeryLongElementName.js"
+  }
+}