fix(engine): reparse html if pageTree requests a second pass

modernweb-dev · Aug 17, 2022 · 390335d · 390335d
1 parent 6d2f469
commit 390335d
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 16 deletions.
diff --git a/.changeset/lemon-knives-call.md b/.changeset/lemon-knives-call.md
@@ -0,0 +1,7 @@
+---
+'@rocket/engine': patch
+'@rocket/launch': patch
+'@rocket/spark': patch
+---
+
+Improve title tag handling
diff --git a/packages/engine/src/Engine.js b/packages/engine/src/Engine.js
@@ -121,8 +121,10 @@ export class Engine {
       if (pageTree.pageTreeChangedOnSave) {
         for (const sourceFilePath of sourceFiles) {
           const result = await this.renderFile({ sourceFilePath, throwOnError: true });
+          await pageTree.add(result.sourceRelativeFilePath);
           await cleanupAutoGeneratedFiles(result);
         }
+        await pageTree.save();
       }
     }
 

diff --git a/packages/engine/src/web-menu/getHtmlMetaData.js b/packages/engine/src/web-menu/getHtmlMetaData.js
@@ -28,16 +28,20 @@ export function getHtmlMetaData(htmlFilePath) {
   const metaData = {
     // headlinesWithId: [],
   };
-
   /** @type {string | undefined} */
   let capturedHeadlineText = undefined;
+  let withinHTMLHead = false;
   parser.eventHandler = (ev, _data) => {
     if (ev === SaxEventType.OpenTag) {
       const data = /** @type {Tag} */ (/** @type {any} */ (_data));
       if (isHeadline(data)) {
         capturedHeadlineText = '';
       }
+      if (data.name === 'head') {
+        withinHTMLHead = true;
+      }
     }
+
     if (capturedHeadlineText !== undefined && ev === SaxEventType.Text) {
       const data = /** @type {Text} */ (/** @type {any} */ (_data));
       capturedHeadlineText += data.value;
@@ -74,7 +78,7 @@ export function getHtmlMetaData(htmlFilePath) {
           metaData.menuNoLink = getAttribute(data, 'content') !== 'false';
         }
       }
-      if (!metaData.title && data.name === 'title') {
+      if (withinHTMLHead && data.name === 'title') {
         metaData.title = getText(data);
       }
 
@@ -87,7 +91,7 @@ export function getHtmlMetaData(htmlFilePath) {
           .replace(/&#x26;/g, '&')
           .trim();
         const text = linkText || processedCapturedHeadlineText || '';
-        if (data.name === 'h1') {
+        if (!metaData.h1 && data.name === 'h1') {
           metaData.h1 = text;
         }
         if (id && text) {
@@ -104,6 +108,10 @@ export function getHtmlMetaData(htmlFilePath) {
         }
         capturedHeadlineText = undefined;
       }
+
+      if (data.name === 'head') {
+        withinHTMLHead = false;
+      }
     }
   };
 

diff --git a/packages/engine/test-node/05z-menu.test.js b/packages/engine/test-node/05z-menu.test.js
@@ -894,7 +894,7 @@ describe('Engine menus', () => {
     });
   });
 
-  it('15: link-text attribute', async () => {
+  it('16: link-text attribute', async () => {
     const { build, readSource } = await setupTestEngine(
       'fixtures/05-menu/16-link-text-attribute/docs',
     );
@@ -929,4 +929,23 @@ describe('Engine menus', () => {
       url: '/',
     });
   });
+
+  it('17: title-tag', async () => {
+    const { build, readSource, deleteSource } = await setupTestEngine(
+      'fixtures/05-menu/17-title-tag/docs',
+    );
+    await deleteSource('pageTreeData.rocketGenerated.json');
+    await build();
+
+    expect(JSON.parse(readSource('pageTreeData.rocketGenerated.json'))).to.deep.equal({
+      h1: 'Welcome to Rocket',
+      level: 0,
+      menuLinkText: 'Welcome to Rocket',
+      name: 'Welcome to Rocket',
+      outputRelativeFilePath: 'index.html',
+      sourceRelativeFilePath: 'index.rocket.js',
+      title: 'Welcome to Rocket | Rocket',
+      url: '/',
+    });
+  });
 });
diff --git a/packages/engine/test-node/fixtures/05-menu/02-generate-page-tree/docs/about.rocket.js b/packages/engine/test-node/fixtures/05-menu/02-generate-page-tree/docs/about.rocket.js
@@ -6,7 +6,13 @@ export { layout };
 
 import { html } from 'lit';
 export default () => html`
-  <meta name="menu:link.text" content="About" />
-  <title>About | MyPage</title>
-  <h1>This is About</h1>
+  <html>
+    <head>
+      <title>About | MyPage</title>
+    </head>
+    <body>
+      <meta name="menu:link.text" content="About" />
+      <h1>This is About</h1>
+    </body>
+  </html>
 `;
diff --git a/...e/test-node/fixtures/05-menu/02-generate-page-tree/docs/pageTreeData.rocketGenerated.json b/...e/test-node/fixtures/05-menu/02-generate-page-tree/docs/pageTreeData.rocketGenerated.json
@@ -8,8 +8,8 @@
   "level": 0,
   "children": [
     {
-      "menuLinkText": "About",
       "title": "About | MyPage",
+      "menuLinkText": "About",
       "h1": "This is About",
       "name": "This is About",
       "url": "/about/",

diff --git a/packages/engine/test-node/fixtures/05-menu/17-title-tag/docs/index.rocket.js b/packages/engine/test-node/fixtures/05-menu/17-title-tag/docs/index.rocket.js
@@ -0,0 +1,7 @@
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = 'index.rocket.js';
+import { layout, html } from './recursive.data.js';
+export { layout, html };
+/* END - Rocket auto generated - do not touch */
+
+export default () => html` <h1>Welcome to Rocket</h1> `;
diff --git a/...ges/engine/test-node/fixtures/05-menu/17-title-tag/docs/pageTreeData.rocketGenerated.json b/...ges/engine/test-node/fixtures/05-menu/17-title-tag/docs/pageTreeData.rocketGenerated.json
@@ -0,0 +1,10 @@
+{
+  "title": "Welcome to Rocket | Rocket",
+  "h1": "Welcome to Rocket",
+  "name": "Welcome to Rocket",
+  "menuLinkText": "Welcome to Rocket",
+  "url": "/",
+  "outputRelativeFilePath": "index.html",
+  "sourceRelativeFilePath": "index.rocket.js",
+  "level": 0
+}
diff --git a/packages/engine/test-node/fixtures/05-menu/17-title-tag/docs/recursive.data.js b/packages/engine/test-node/fixtures/05-menu/17-title-tag/docs/recursive.data.js
@@ -0,0 +1,28 @@
+import { PageTree } from '@rocket/engine';
+import { html } from 'lit';
+
+const pageTree = new PageTree({
+  inputDir: new URL('./', import.meta.url),
+  outputDir: new URL('../__output', import.meta.url),
+});
+
+await pageTree.restore();
+
+const titleWrapperFn = title => (title ? `${title} | Rocket` : '');
+
+export const layout = data => {
+  const title = titleWrapperFn(pageTree.getPage(data.sourceRelativeFilePath)?.model?.name);
+  return html`
+    <html>
+      <head>
+        <title-server-only>${title}</title-server-only>
+      </head>
+    </html>
+    <body>
+      <main>${data.content()}</main>
+    </body>
+    </html>
+  `;
+};
+
+export { html };
diff --git a/packages/launch/src/LayoutMain.js b/packages/launch/src/LayoutMain.js
@@ -65,7 +65,7 @@ export class LayoutMain extends Layout {
       },
     ],
     footerMenu: [],
-    titleWrapperFn: title => `${title} | ${this.options.siteName}`,
+    titleWrapperFn: title => (title ? `${title} | ${this.options.siteName}` : ''),
   };
 
   /**

diff --git a/presets/spark/src/LayoutHome.js b/presets/spark/src/LayoutHome.js
@@ -31,7 +31,7 @@ export class LayoutHome extends Layout {
           return nothing;
         }
         const page = this.options.pageTree.getPage(data.sourceRelativeFilePath);
-        if (page.model.headlinesWithId) {
+        if (page?.model?.headlinesWithId) {
           return html`
             ${page.model.headlinesWithId.map(
               headline => html`

diff --git a/site/pages/10--docs/20--basics/70--navigation.rocket.md b/site/pages/10--docs/20--basics/70--navigation.rocket.md
@@ -11,6 +11,8 @@ export async function registerCustomElements() {
   // prettier-ignore
   customElements.define('rocket-header', await import('@rocket/components/header.js').then(m => m.RocketHeader));
   // prettier-ignore
+  customElements.define('inline-notification', await import('@rocket/components/inline-notification.js').then(m => m.InlineNotification));
+  // prettier-ignore
   customElements.define('rocket-main-docs', await import('@rocket/components/main-docs.js').then(m => m.RocketMainDocs));
   // prettier-ignore
   customElements.define('rocket-content-area', await import('@rocket/components/content-area.js').then(m => m.RocketContentArea));

diff --git a/site/pages/pageTreeData.rocketGenerated.json b/site/pages/pageTreeData.rocketGenerated.json
@@ -386,6 +386,31 @@
                   "text": "Recommended Project Structure",
                   "id": "recommended-project-structure",
                   "level": 2
+                },
+                {
+                  "text": "site/pages/",
+                  "id": "sitepages",
+                  "level": 3
+                },
+                {
+                  "text": "site/src/",
+                  "id": "sitesrc",
+                  "level": 3
+                },
+                {
+                  "text": "site/src/components",
+                  "id": "sitesrccomponents",
+                  "level": 3
+                },
+                {
+                  "text": "site/src/layouts",
+                  "id": "sitesrclayouts",
+                  "level": 3
+                },
+                {
+                  "text": "site/public/",
+                  "id": "sitepublic",
+                  "level": 3
                 }
               ],
               "name": "Project Structure",
@@ -758,6 +783,16 @@
                   "id": "menu-link-text",
                   "level": 3
                 },
+                {
+                  "text": "link-text=\"...\"",
+                  "id": "link-text",
+                  "level": 3
+                },
+                {
+                  "text": "Headings with HTML",
+                  "id": "headings-with-html",
+                  "level": 2
+                },
                 {
                   "text": "Menu No Link",
                   "id": "menu-no-link",
@@ -937,7 +972,7 @@
                   "level": 2
                 },
                 {
-                  "text": "The  Function",
+                  "text": "The :resolve Function",
                   "id": "the-resolve-function",
                   "level": 2
                 },
@@ -1432,7 +1467,7 @@
                   "level": 2
                 },
                 {
-                  "text": "1. Simple  Tags and External Files",
+                  "text": "1. Simple &lt;link> Tags and External Files",
                   "id": "1-simple-link-tags-and-external-files",
                   "level": 3
                 },
@@ -1447,7 +1482,7 @@
                   "level": 3
                 },
                 {
-                  "text": "Recommendations &#x26; Best Practices",
+                  "text": "Recommendations & Best Practices",
                   "id": "recommendations--best-practices",
                   "level": 2
                 },

diff --git a/yarn.lock b/yarn.lock
@@ -2085,9 +2085,9 @@
     glob "^7.1.6"
 
 "@web/rollup-plugin-html@^1.8.0":
-  version "1.10.3"
-  resolved "https://registry.yarnpkg.com/@web/rollup-plugin-html/-/rollup-plugin-html-1.10.3.tgz#78fa06a9a7f2ec6973a12bd1000b900c1fd4e4eb"
-  integrity sha512-2RMIeKxpGtrcXiqPTgMVq5neGa5xa69MfNK860BHVMEO2N/MrHFuQNr1eNLsspcq2DL/xnymwC3w5hgjtlgxag==
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@web/rollup-plugin-html/-/rollup-plugin-html-1.11.0.tgz#46c2bcb3a3b9db55d53b897ffc7e7ef2f618a052"
+  integrity sha512-EqUcV5plGYTV/utdbX8g5t8Yq/z6VfFuQuPD39ckOQuRj7Rj6HD15FHwLHpFAWOR0+GrDnNzR74RvI4ipGm0qQ==
   dependencies:
     "@web/parse5-utils" "^1.3.0"
     glob "^7.1.6"
-Original file line number
+Diff line change
@@ Expand Up / @@ -65,7 +65,7 @@ export class LayoutMain extends Layout { @@
           },
         ],
         footerMenu: [],
-        titleWrapperFn: title => `${title} | ${this.options.siteName}`,
+        titleWrapperFn: title => (title ? `${title} | ${this.options.siteName}` : ''),
       };
       /**
@@ Expand Down @@