fix: update worker-script innerHTML implementation (#572)

QwikDev · Mar 24, 2024 · d72574b · d72574b
1 parent 0258d26
commit d72574b
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 4 deletions.
diff --git a/src/lib/web-worker/worker-constants.ts b/src/lib/web-worker/worker-constants.ts
@@ -60,7 +60,7 @@ export const structureChangingMethodNames = /*#__PURE__*/ commaSplit(
 
 /** setters that could change dimensions of elements */
 export const dimensionChangingSetterNames = /*#__PURE__*/ commaSplit(
-  'className,width,height,hidden,innerHTML,innerText,textContent'
+  'className,width,height,hidden,innerHTML,innerText,textContent,text'
 );
 
 /** method calls that could change dimensions of elements */

diff --git a/src/lib/web-worker/worker-script.ts b/src/lib/web-worker/worker-script.ts
@@ -36,6 +36,8 @@ export const patchHTMLScriptElement = (WorkerHTMLScriptElement: any, env: WebWor
       },
     },
 
+    text: innerHTMLDescriptor,
+
     textContent: innerHTMLDescriptor,
 
     type: {
@@ -59,11 +61,15 @@ export const patchHTMLScriptElement = (WorkerHTMLScriptElement: any, env: WebWor
 const innerHTMLDescriptor: PropertyDescriptor & ThisType<WorkerNode> = {
   get() {
     const type = getter(this, ['type']);
+
     if (isScriptJsType(type)) {
-      return getInstanceStateValue<string>(this, StateProp.innerHTML) || '';
-    } else {
-      return getter(this, ['innerHTML']);
+      const scriptContent = getInstanceStateValue<string>(this, StateProp.innerHTML);
+      if (scriptContent) {
+        return scriptContent;
+      }
     }
+
+    return getter(this, ['innerHTML']) || '';
   },
   set(scriptContent: string) {
     setInstanceStateValue(this, StateProp.innerHTML, scriptContent);

diff --git a/tests/integrations/load-scripts-on-main-thread/index.html b/tests/integrations/load-scripts-on-main-thread/index.html
@@ -16,6 +16,7 @@
         loadScriptsOnMainThread: [
           `${location.protocol}//${location.host}/tests/integrations/load-scripts-on-main-thread/test-script.js`,
           `inline-test-script`,
+          `inline-test-script-text`,
           /regex-test-script\.js/,
         ],
       };
@@ -215,6 +216,30 @@ <h1>Load scripts on main thread 🎉</h1>
           })();
         </script>
       </li>
+      <li>
+        <strong>Inline script with text</strong>
+        <code id="testInlineScriptText"></code>
+        <script type="text/javascript">
+          const globalVariableScriptText = 13;
+        </script>
+        <script type="text/partytown">
+          (function () {
+            const script = document.createElement('script');
+
+            script.type = "text/javascript";
+            script.id = "inline-test-script-text";
+
+            script.text = `
+              (function () {
+                const testEl = document.getElementById('testInlineScriptText');
+                testEl.className = 'testInlineScriptText';
+                testEl.innerHTML = globalVariableScriptText;
+              })();
+            `;
+            document.body.appendChild(script);
+          })();
+        </script>
+      </li>
       <li>
         <strong>Inline Script ran in the background:</strong>
         <code id="inlineTestScriptRanInTheBackground"></code>

diff --git a/tests/integrations/load-scripts-on-main-thread/load-scripts-on-main-thread.spec.ts b/tests/integrations/load-scripts-on-main-thread/load-scripts-on-main-thread.spec.ts
@@ -25,6 +25,10 @@ test('integration window accessor', async ({ page }) => {
   await page.waitForSelector('.testInlineScript');
   const testInlineScript = page.locator('#testInlineScript');
   await expect(testInlineScript).toHaveText('12');
+
+  await page.waitForSelector('.testInlineScriptText');
+  const testInlineScriptText = page.locator('#testInlineScriptText');
+  await expect(testInlineScriptText).toHaveText('13');
 });
 
 test('integration window accessor with snippet', async ({ page }) => {
@@ -52,4 +56,8 @@ test('integration window accessor with snippet', async ({ page }) => {
   await page.waitForSelector('.testInlineScript');
   const testInlineScript = page.locator('#testInlineScript');
   await expect(testInlineScript).toHaveText('12');
+
+  await page.waitForSelector('.testInlineScriptText');
+  const testInlineScriptText = page.locator('#testInlineScriptText');
+  await expect(testInlineScriptText).toHaveText('13');
 });
diff --git a/tests/integrations/load-scripts-on-main-thread/snippet.html b/tests/integrations/load-scripts-on-main-thread/snippet.html
@@ -17,6 +17,7 @@
         loadScriptsOnMainThread: [
           `${location.protocol}//${location.host}/tests/integrations/load-scripts-on-main-thread/test-script.js`,
           `inline-test-script`,
+          `inline-test-script-text`,
           /regex-test-script\.js/,
         ],
       });
@@ -126,6 +127,30 @@ <h1>Load scripts on main thread 🎉</h1>
           })()
         </script>
       </li>
+      <li>
+        <strong>Inline script with text</strong>
+        <code id="testInlineScriptText"></code>
+        <script type="text/javascript">
+          const globalVariableScriptText = 13;
+        </script>
+        <script type="text/partytown">
+          (function () {
+            const script = document.createElement('script');
+
+            script.type = "text/javascript";
+            script.id = "inline-test-script-text";
+
+            script.text = `
+              (function () {
+                const testEl = document.getElementById('testInlineScriptText');
+                testEl.className = 'testInlineScriptText';
+                testEl.innerHTML = globalVariableScriptText;
+              })();
+            `;
+            document.body.appendChild(script);
+          })();
+        </script>
+      </li>
       <li>
         <strong>Script ran in the background:</strong>
         <code id="testScriptRanInTheBackground"></code>

diff --git a/tests/platform/script/index.html b/tests/platform/script/index.html
@@ -243,6 +243,24 @@ <h1 class="title">Script</h1>
         </script>
       </li>
 
+      <li>
+        <strong>set innerHTML, nested</strong>
+        <code some-attr="111" id="testInnerHTMLNested"></code>
+        <script type="text/partytown">
+          (function () {
+            const testEl = document.getElementById('testInnerHTMLNested');
+            const parent = document.createElement('div');
+            parent.innerHTML = '<script>console.log(42);<\/script>';
+
+            testEl.innerHTML = [
+              parent.firstChild.tagName,
+              parent.firstChild.innerHTML
+            ].join(', ');
+            testEl.className = 'testInnerHTMLNested';
+          })();
+        </script>
+      </li>
+
       <li>
         <strong>async/defer</strong>
         <code id="testAsync"></code>

diff --git a/tests/platform/script/script.spec.ts b/tests/platform/script/script.spec.ts
@@ -41,6 +41,10 @@ test('script', async ({ page }) => {
   const testInnerHTMLError = page.locator('#testInnerHTMLError');
   await expect(testInnerHTMLError).toHaveText('gahh');
 
+  await page.waitForSelector('.testInnerHTMLNested');
+  const testInnerHTMLNested = page.locator('#testInnerHTMLNested');
+  await expect(testInnerHTMLNested).toHaveText('SCRIPT, console.log(42);');
+
   await page.waitForSelector('.testAsync');
   const testAsync = page.locator('#testAsync');
   const testAsyncText = await testAsync.innerText();