From d72574bdc1a5465ad413679cc35deb8d8f6b481d Mon Sep 17 00:00:00 2001 From: Slawek Kolodziej Date: Sun, 24 Mar 2024 10:34:32 +0100 Subject: [PATCH] fix: update worker-script innerHTML implementation (#572) --- src/lib/web-worker/worker-constants.ts | 2 +- src/lib/web-worker/worker-script.ts | 12 ++++++--- .../load-scripts-on-main-thread/index.html | 25 +++++++++++++++++++ .../load-scripts-on-main-thread.spec.ts | 8 ++++++ .../load-scripts-on-main-thread/snippet.html | 25 +++++++++++++++++++ tests/platform/script/index.html | 18 +++++++++++++ tests/platform/script/script.spec.ts | 4 +++ 7 files changed, 90 insertions(+), 4 deletions(-) diff --git a/src/lib/web-worker/worker-constants.ts b/src/lib/web-worker/worker-constants.ts index eef430c9..6509dc1d 100644 --- 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 index 5492cfa3..63b040de 100644 --- 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 = { get() { const type = getter(this, ['type']); + if (isScriptJsType(type)) { - return getInstanceStateValue(this, StateProp.innerHTML) || ''; - } else { - return getter(this, ['innerHTML']); + const scriptContent = getInstanceStateValue(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 index bbd26d03..8d70b351 100644 --- 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 @@

Load scripts on main thread 🎉

})(); +
  • + Inline script with text + + + +
  • Inline Script ran in the background: 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 index d375c41a..6788583b 100644 --- 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 index fab07cad..0a72ef09 100644 --- 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 @@

    Load scripts on main thread 🎉

    })()
    • +
  • + Inline script with text + + + +
  • Script ran in the background: diff --git a/tests/platform/script/index.html b/tests/platform/script/index.html index ca87fde7..5ea6a259 100644 --- a/tests/platform/script/index.html +++ b/tests/platform/script/index.html @@ -243,6 +243,24 @@

    Script

    • +
  • + set innerHTML, nested + + +
    • +
  • async/defer diff --git a/tests/platform/script/script.spec.ts b/tests/platform/script/script.spec.ts index a18a39f2..01e94b73 100644 --- 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();