Merge pull request #2 from dario-piotrowicz/main

fix: ensure scripts and styles inserted with their entire text content

src/__tests__/__snapshots__/inline-scripts.expected/step-0.html

@@ -0,0 +1 @@
+Embedded App.

src/__tests__/__snapshots__/inline-scripts.expected/step-1.html

@@ -0,0 +1,2 @@
+Embedded App.
+<script></script>

src/__tests__/__snapshots__/inline-scripts.expected/step-3.html

@@ -0,0 +1,5 @@
+Embedded App.
+<script>
+  scriptValues = ["a", "b"];
+</script>
+After Script.

src/__tests__/__snapshots__/inline-styles.expected/step-0.html

@@ -0,0 +1 @@
+Embedded App.

src/__tests__/__snapshots__/inline-styles.expected/step-1.html

@@ -0,0 +1 @@
+Embedded App. <style></style>

src/__tests__/__snapshots__/inline-styles.expected/step-3.html

@@ -0,0 +1,7 @@
+Embedded App.
+<style>
+  h1 {
+    color: red;
+  }
+</style>
+After Styles.

src/__tests__/__snapshots__/stream-elements.expected/step-0.html

@@ -0,0 +1 @@
+<h1>H1</h1>

src/__tests__/__snapshots__/stream-elements.expected/step-1.html

@@ -0,0 +1,2 @@
+<h1>H1</h1>
+<h2>H2</h2>

src/__tests__/__snapshots__/stream-elements.expected/step-2.html

@@ -0,0 +1,3 @@
+<h1>H1</h1>
+<h2>H2</h2>
+<h3>H3</h3>

src/__tests__/index.test.ts

@@ -6,6 +6,8 @@ declare const inlineScriptValues: unknown[];
 
 it("stream-text", fixture(["Hello", "World"]));
 
+it("stream-elements", fixture(["<h1>H1</h1>", "<h2>H2</h2>", "<h3>H3</h3>"]));
+
 it(
   "blocking-scripts",
   fixture([
@@ -118,3 +120,29 @@ After blocking.`,
     },
   ])
 );
+
+it(
+  "inline-scripts",
+  fixture([
+    "Embedded App.",
+    '<script>scriptValues = ["a',
+    '", "b"];</script>',
+    "After Script.",
+    async (page) => {
+      assert.deepStrictEqual(await page.evaluate(() => scriptValues), [
+        "a",
+        "b",
+      ]);
+    },
+  ])
+);
+
+it(
+  "inline-styles",
+  fixture([
+    "Embedded App. ",
+    "<style> h1 { colo",
+    "r: red; } </style>",
+    " After Styles.",
+  ])
+);

src/index.ts

@@ -23,12 +23,13 @@ export = function writableDOM(
   let scanNode: Node | null = null;
   let resolve: void | (() => void);
   let isBlocked = false;
+  let inlineHostNode: Node | null = null;
 
   return {
     write(chunk: string) {
       doc.write(chunk);
 
-      if (pendingText) {
+      if (pendingText && !inlineHostNode) {
         // When we left on text, it's possible more text was written to the same node.
         // here we copy in the final text content from the detached dom to the live dom.
         (targetNodes.get(pendingText) as Text).data = pendingText.data;
@@ -42,6 +43,8 @@ export = function writableDOM(
       }
     },
     close() {
+      appendInlineTextIfNeeded(pendingText, inlineHostNode);
+
       return isBlocked
         ? new Promise<void>((_) => (resolve = _))
         : Promise.resolve();
@@ -68,6 +71,7 @@ export = function writableDOM(
     } else {
       while ((node = walker.nextNode())) {
         const clone = document.importNode(node, false);
+        const previousPendingText = pendingText;
         if (node.nodeType === Node.TEXT_NODE) {
           pendingText = node as Text;
         } else {
@@ -86,10 +90,17 @@ export = function writableDOM(
         const parentNode = targetNodes.get(node.parentNode!)!;
         targetNodes.set(node, clone);
 
-        if (parentNode === target) {
-          target.insertBefore(clone, nextSibling);
+        if (isInlineHost(parentNode!)) {
+          inlineHostNode = parentNode;
         } else {
-          parentNode.appendChild(clone);
+          appendInlineTextIfNeeded(previousPendingText, inlineHostNode);
+          inlineHostNode = null;
+
+          if (parentNode === target) {
+            target.insertBefore(clone, nextSibling);
+          } else {
+            parentNode.appendChild(clone);
+          }
         }
 
         // Start walking for preloads.
@@ -178,3 +189,20 @@ function getPreloadLink(node: any) {
 
   return link;
 }
+
+function appendInlineTextIfNeeded(
+  pendingText: Text | null,
+  inlineTextHostNode: Node | null
+) {
+  if (pendingText && inlineTextHostNode) {
+    inlineTextHostNode.appendChild(pendingText);
+  }
+}
+
+function isInlineHost(node: Node) {
+  const { tagName } = node as Element;
+  return (
+    (tagName === "SCRIPT" && !(node as HTMLScriptElement).src) ||
+    tagName === "STYLE"
+  );
+}