Upgrades to latest node-html-parser.

For some reason we were on a very old version of `node-html-parser` and needed to upgrade it to gain ESM support. This introduced a few breaking changes we needed to be addressed, but nothing too significant.
dgp1130 · Mar 1, 2023 · 052210b · 052210b
1 parent 100b8b6
commit 052210b
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 29 deletions.
diff --git a/common/prerender_annotation_walker_test.ts b/common/prerender_annotation_walker_test.ts
@@ -84,7 +84,13 @@ describe('prerender_annotation_walker', () => {
             const nodes = Array.from(walkAllAnnotations(root));
             expect(nodes.length).toBe(1);
             const node = nodes[0]!;
-            node.replace(new HTMLElement('script', {}));
+            node.replace(new HTMLElement(
+                'script' /* tagName */,
+                {} /* keyAttrs */,
+                '' /* rawAttrs */,
+                null /* parentNode */,
+                [0, 0] /* range */,
+            ));
 
             const extracted = root.toString();
             expect(extracted).toBe(`
@@ -146,8 +152,13 @@ describe('prerender_annotation_walker', () => {
             node.remove(); // Update the node.
 
             // Try to update it again.
-            expect(() => node.replace(new HTMLElement('script', {})))
-                .toThrowError('Node was already updated, cannot replace it.');
+            expect(() => node.replace(new HTMLElement(
+                'script' /* tagName */,
+                {} /* keyAttrs */,
+                '' /* rawAttrs */,
+                null /* parentNode */,
+                [0, 0] /* range */,
+            ))).toThrowError('Node was already updated, cannot replace it.');
         });
     });
-});
+});
diff --git a/examples/site/blog/blog_test.ts b/examples/site/blog/blog_test.ts
@@ -10,7 +10,7 @@ describe('Blog', () => {
 
         // Renders the blog page.
         const page = parse(new TextDecoder().decode(index!.contents));
-        expect(page.querySelector('title').text).toBe('Blog');
+        expect(page.querySelector('title')!.text).toBe('Blog');
 
         // Renders links to all generated pages.
         const posts = Object.fromEntries(page.querySelectorAll('article ul a')
@@ -31,9 +31,9 @@ describe('Blog', () => {
 
         // Renders the Foo post.
         const page = parse(new TextDecoder().decode(post!.contents));
-        expect(page.querySelector('title').text).toBe('Foo');
+        expect(page.querySelector('title')!.text).toBe('Foo');
 
-        const article = page.querySelector('article');
+        const article = page.querySelector('article')!;
         expect(article.text).toContain('This is a blog post about Foo!');
     });
 
@@ -46,9 +46,9 @@ describe('Blog', () => {
 
         // Renders the Bar post.
         const page = parse(new TextDecoder().decode(post!.contents));
-        expect(page.querySelector('title').text).toBe('Bar');
+        expect(page.querySelector('title')!.text).toBe('Bar');
 
-        const article = page.querySelector('article');
+        const article = page.querySelector('article')!;
         expect(article.text)
             .toContain('This is another blog post generated from markdown.');
     });
@@ -62,9 +62,9 @@ describe('Blog', () => {
 
         // Renders the Baz post.
         const page = parse(new TextDecoder().decode(post!.contents));
-        expect(page.querySelector('title').text).toBe('Baz');
+        expect(page.querySelector('title')!.text).toBe('Baz');
 
-        const article = page.querySelector('article');
+        const article = page.querySelector('article')!;
         expect(article.text).toContain(
             'Here is one more blog post about nothing in particular');
     });

diff --git a/examples/site/components/base/base_test.ts b/examples/site/components/base/base_test.ts
@@ -12,15 +12,15 @@ describe('base', () => {
             expect(callback).toHaveBeenCalledOnceWith();
 
             // Title should be set.
-            expect(fragment.querySelector('html head title').text)
+            expect(fragment.querySelector('html head title')!.text)
                 .toBe('Some title');
 
             // Renders the header and footer.
             expect(fragment.querySelector('[comp-header]')).toBeDefined();
             expect(fragment.querySelector('[comp-footer]')).toBeDefined();
 
             // Callback should be placed under `<main />` tag.
-            const main = fragment.querySelector('body main');
+            const main = fragment.querySelector('body main')!;
             const mainChildren = main.childNodes
                 .filter((node) => node.nodeType === NodeType.ELEMENT_NODE);
             expect(mainChildren.length).toBe(1);
@@ -36,15 +36,15 @@ describe('base', () => {
             expect(callback).toHaveBeenCalledOnceWith();
 
             // Title should be set.
-            expect(fragment.querySelector('html head title').text)
+            expect(fragment.querySelector('html head title')!.text)
                 .toBe('Some title');
 
             // Renders the header and footer.
             expect(fragment.querySelector('[comp-header]')).toBeDefined();
             expect(fragment.querySelector('[comp-footer]')).toBeDefined();
 
             // Callback should be placed under `<main />` tag.
-            const main = fragment.querySelector('body main');
+            const main = fragment.querySelector('body main')!;
             const mainChildren = main.childNodes
                 .filter((node) => node.nodeType === NodeType.ELEMENT_NODE);
             expect(mainChildren.length).toBe(1);

diff --git a/examples/site/components/counter/counter_prerender_test.ts b/examples/site/components/counter/counter_prerender_test.ts
@@ -11,11 +11,11 @@ describe('counter', () => {
             expect(counter).toBeDefined();
 
             // Custom element light DOM should be prerendered.
-            expect(counter.getAttribute('initial')).toBe('5');
-            expect(counter.querySelector('#label').text)
+            expect(counter!.getAttribute('initial')).toBe('5');
+            expect(counter!.querySelector('#label')!.text)
                 .toBe('The current count is: 5.');
-            expect(counter.querySelector('#decrement')).toBeDefined();
-            expect(counter.querySelector('#increment')).toBeDefined();
+            expect(counter!.querySelector('#decrement')).toBeDefined();
+            expect(counter!.querySelector('#increment')).toBeDefined();
         });
     });
 });
diff --git a/examples/site/components/footer/footer_test.ts b/examples/site/components/footer/footer_test.ts
@@ -6,8 +6,12 @@ describe('footer', () => {
         it('renders a footer', () => {
             const fragment = parse(renderFooter());
 
-            expect(fragment.structuredText)
-                .toContain('Made with Bazel and rules_prerender.');
+            const footerText = fragment.textContent
+                .trim()
+                .split('\n')
+                .map((line) => line.trim())
+                .join(' ');
+            expect(footerText).toBe('Made with Bazel and rules_prerender.');
         });
     });
 });
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
         "http-server": "^14.1.1",
         "lightningcss": "^1.19.0",
         "markdown-it": "^12.0.4",
-        "node-html-parser": "^2.0.0",
+        "node-html-parser": "^6.1.5",
         "rollup": "^2.35.1",
         "yargs": "^16.2.0"
     },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tools/binaries/resource_injector/injector.ts b/tools/binaries/resource_injector/injector.ts
@@ -60,7 +60,13 @@ function getOrInjectHead(root: HTMLElement): HTMLElement {
     const existingHead = root.querySelector('head');
     if (existingHead) return existingHead;
 
-    const head = new HTMLElement('head', {});
+    const head = new HTMLElement(
+        'head' /* tagName */,
+        {} /* keyAttrs */,
+        '' /* rawAttrs */,
+        null /* parentNode */,
+        [0, 0] /* range */,
+    );
     const html = root.querySelector('html');
     if (!html) throw new Error('<html /> element could not be found.');
 
@@ -81,7 +87,13 @@ function injectScript(root: HTMLElement, action: InjectScript): void {
     const head = getOrInjectHead(root);
 
     // Insert a `<script />` tag at the end of the `<head />` element.
-    const script = new HTMLElement('script', {});
+    const script = new HTMLElement(
+        'script' /* tagName */,
+        {} /* keyAttrs */,
+        '' /* rawAttrs */,
+        null /* parentNode */,
+        [0, 0] /* range */,
+    );
     script.setAttribute('src', action.path);
     script.setAttribute('type', 'module');
     script.setAttribute('async', '');
@@ -109,7 +121,13 @@ async function replaceInlineStyleAnnotations(
                 JSON.stringify(annotation, null, 4)}`);
         }
 
-        const inlineStyle = new HTMLElement('style', {});
+        const inlineStyle = new HTMLElement(
+            'style' /* tagName */,
+            {} /* keyAttrs */,
+            '' /* rawAttrs */,
+            null /* parentNode */,
+            [0, 0] /* range */,
+        );
         inlineStyle.set_content(await fs.readFile(annotation.path, 'utf-8'));
         node.replace(inlineStyle);
     }