fix: extract main innerHTML for .plain.html fallback and improve test fixture

shsteimer · claude · shsteimer · commit e49ca059f67d · 2026-05-28T09:31:36.000+10:00
Parse the full HTML document and return only the innerHTML of &lt;main&gt;
rather than sending the raw file content. Uses existing hast-util-select
and hast-util-to-html deps. Test fixture updated to use a realistic full
document and a multiline fragment string for readability.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/server/HelixServer.js b/src/server/HelixServer.js
@@ -476,15 +476,16 @@ export class HelixServer extends BaseServer {
               }
             }
             if (isPlainFallback) {
-              // .plain.html callers want the raw body fragment — skip head wrapping
+              // .plain.html callers want the raw fragment — extract <main> content
               if (liveReload) {
                 liveReload.registerFile(ctx.requestId, servedFilePath);
               }
+              const fragment = utils.extractMainContent(htmlContent);
               res.set({
                 'content-type': 'text/html; charset=utf-8',
                 'access-control-allow-origin': '*',
               });
-              res.send(htmlContent);
+              res.send(fragment);
               log.debug(`${pfx}served from ${CONTENT_DIR}/: ${ctx.path}`);
               return;
             }
diff --git a/src/server/utils.js b/src/server/utils.js
@@ -19,11 +19,14 @@ import { fileURLToPath } from 'url';
 import cookie from 'cookie';
 import { unified } from 'unified';
 import rehypeParse from 'rehype-parse';
+import { select } from 'hast-util-select';
+import { toHtml } from 'hast-util-to-html';
 import { getFetch } from '../fetch-utils.js';
 
 // Load console interceptor script at startup
 // eslint-disable-next-line no-underscore-dangle
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const htmlParser = unified().use(rehypeParse);
 const CONSOLE_INTERCEPTOR = readFileSync(
   path.join(__dirname, '../../packages/browser-injectables/src/console-interceptor.js'),
   'utf-8',
@@ -787,6 +790,19 @@ window.LiveReloadOptions = {
     const fullHead = headHtml + metaTags;
     return `<html><head>${fullHead}</head><body><header></header><main>${content}</main><footer></footer></body></html>`;
   },
+
+  /**
+   * Extracts the innerHTML of the <main> element from a full HTML document.
+   * Returns the original content unchanged if no <main> is found.
+   * @param {string} html full HTML document
+   * @returns {string} innerHTML of <main>, or original html if no <main> present
+   */
+  extractMainContent(html) {
+    const ast = htmlParser.parse(html);
+    const main = select('main', ast);
+    if (!main) return html;
+    return main.children.map((child) => toHtml(child)).join('');
+  },
 };
 
 export default Object.freeze(utils);
diff --git a/test/server.test.js b/test/server.test.js
@@ -1353,9 +1353,18 @@ describe('Helix Server', () => {
       const cwd = await setupProject(path.join(__rootdir, 'test', 'fixtures', 'project'), testRoot);
       await fse.ensureDir(path.join(cwd, CONTENT_DIR));
       // Only content/foo.html exists on disk — no content/foo.plain.html
+      // The stored .html file is a full document; .plain.html must return only the inner fragment
+      const innerFragment = `<div>
+  <p><a href="/">Home</a></p>
+</div>
+<div>
+  <ul>
+    <li><a href="/about">About</a></li>
+  </ul>
+</div>`;
       await fse.writeFile(
         path.join(cwd, CONTENT_DIR, 'foo.html'),
-        '<body><header></header><main><p>plain fragment</p></main><footer></footer></body>',
+        `<html><head><title>Foo</title></head><body><header></header><main>${innerFragment}</main><footer></footer></body></html>`,
       );
 
       // Proxy must not be called — if it is, the test will fail via nock
@@ -1369,9 +1378,13 @@ describe('Helix Server', () => {
         const resp = await getFetch()(`http://127.0.0.1:${project.server.port}/foo.plain.html`);
         assert.strictEqual(resp.status, 200);
         const body = await resp.text();
-        // Should return the raw fragment — no <head> wrapping, no head.html injection
-        assert.ok(body.includes('plain fragment'), 'body should contain the fragment content');
+        // Must return the inner fragment only — no document structure
+        assert.ok(body.includes('<a href="/">Home</a>'), 'body should contain the fragment content');
         assert.ok(!body.includes('<head>'), '.plain.html response must not contain a <head> element');
+        assert.ok(!body.includes('<body>'), '.plain.html response must not contain a <body> element');
+        assert.ok(!body.includes('<main>'), '.plain.html response must not contain a <main> element');
+        assert.ok(!body.includes('<header>'), '.plain.html response must not contain a <header> element');
+        assert.ok(!body.includes('<footer>'), '.plain.html response must not contain a <footer> element');
       } finally {
         await project.stop();
       }

Original file line number	Diff line number	Diff line change
`@@ -476,15 +476,16 @@ export class HelixServer extends BaseServer {`
`476`	`476`	`}`
`477`	`477`	`}`
`478`	`478`	`if (isPlainFallback) {`
`479`		`- // .plain.html callers want the raw body fragment — skip head wrapping`
	`479`	`+ // .plain.html callers want the raw fragment — extract <main> content`
`480`	`480`	`if (liveReload) {`
`481`	`481`	`liveReload.registerFile(ctx.requestId, servedFilePath);`
`482`	`482`	`}`
	`483`	`+ const fragment = utils.extractMainContent(htmlContent);`
`483`	`484`	`res.set({`
`484`	`485`	`'content-type': 'text/html; charset=utf-8',`
`485`	`486`	`'access-control-allow-origin': '*',`
`486`	`487`	`});`
`487`		`- res.send(htmlContent);`
	`488`	`+ res.send(fragment);`
`488`	`489`	log.debug(`${pfx}served from ${CONTENT_DIR}/: ${ctx.path}`);
`489`	`490`	`return;`
`490`	`491`	`}`