fix(hydrate): do not add html comments inside inline scripts

ionic-team · Oct 26, 2020 · 3c16737 · 3c16737
1 parent 33a8556
commit 3c16737
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/src/runtime/test/hydrate-no-encapsulation.spec.tsx b/src/runtime/test/hydrate-no-encapsulation.spec.tsx
@@ -2,6 +2,31 @@ import { Component, Host, h } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
 describe('hydrate no encapsulation', () => {
+  it('no script annotations', async () => {
+    @Component({ tag: 'cmp-a' })
+    class CmpA {
+      render() {
+        return (
+          <Host>
+            <script>console.log('script')</script>
+          </Host>
+        );
+      }
+    }
+    // @ts-ignore
+    const serverHydrated = await newSpecPage({
+      components: [CmpA],
+      html: `<cmp-a></cmp-a>`,
+      hydrateServerSide: true,
+    });
+    expect(serverHydrated.root).toEqualHtml(`
+      <cmp-a class="hydrated" s-id="1">
+        <!--r.1-->
+        <script c-id="1.0.0.0">console.log('script')</script>
+      </cmp-a>
+    `);
+  });
+
   it('root element, no slot', async () => {
     @Component({ tag: 'cmp-a' })
     class CmpA {

diff --git a/src/runtime/vdom/vdom-annotations.ts b/src/runtime/vdom/vdom-annotations.ts
@@ -140,7 +140,8 @@ const insertChildVNodeAnnotations = (doc: Document, vnodeChild: d.VNode, cmpData
     childElm.setAttribute(HYDRATE_CHILD_ID, childId);
   } else if (childElm.nodeType === NODE_TYPE.TextNode) {
     const parentNode = childElm.parentNode;
-    if (parentNode.nodeName !== 'STYLE') {
+    const nodeName = parentNode.nodeName;
+    if (nodeName !== 'STYLE' && nodeName !== 'SCRIPT') {
       const textNodeId = `${TEXT_NODE_ID}.${childId}`;
 
       const commentBeforeTextNode = doc.createComment(textNodeId);