fix: Avoids converting a gif into a function (#247)

BuilderIO · Sep 23, 2022 · b76a50a · b76a50a · vercel · Sep 23, 2022
1 parent e27ea76
commit b76a50a
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 10 deletions.
diff --git a/src/lib/web-worker/worker-exec.ts b/src/lib/web-worker/worker-exec.ts
@@ -1,5 +1,5 @@
-import { debug } from '../utils';
-import { environments, partytownLibUrl, webWorkerCtx } from './worker-constants';
+import { VERSION } from '../build-modules/version';
+import { logWorker } from '../log';
 import {
   EventHandler,
   InitializeScriptData,
@@ -10,12 +10,12 @@ import {
   WebWorkerEnvironment,
   WinId,
   WorkerInstance,
-  WorkerMessageType,
+  WorkerMessageType
 } from '../types';
-import { getInstanceStateValue, setInstanceStateValue } from './worker-state';
+import { debug } from '../utils';
+import { environments, partytownLibUrl, webWorkerCtx } from './worker-constants';
 import { getOrCreateNodeInstance } from './worker-constructors';
-import { logWorker } from '../log';
-import { VERSION } from '../build-modules/version';
+import { getInstanceStateValue, setInstanceStateValue } from './worker-state';
 
 export const initNextScriptsInWebWorker = async (initScript: InitializeScriptData) => {
   let winId = initScript.$winId$;
@@ -27,6 +27,14 @@ export const initNextScriptsInWebWorker = async (initScript: InitializeScriptDat
   let errorMsg = '';
   let env = environments[winId];
   let rsp: Response;
+  let javascriptContentTypes = ["text/jscript",
+                                "text/javascript",
+                                "text/x-javascript",
+                                "application/javascript",
+                                "application/x-javascript",
+                                "text/ecmascript",
+                                "text/x-ecmascript",
+                                "application/ecmascript"]
 
   if (scriptSrc) {
     try {
@@ -40,10 +48,13 @@ export const initNextScriptsInWebWorker = async (initScript: InitializeScriptDat
 
       rsp = await fetch(scriptSrc);
       if (rsp.ok) {
-        scriptContent = await rsp.text();
-
-        env.$currentScriptId$ = instanceId;
-        run(env, scriptContent, scriptOrgSrc || scriptSrc);
+        let responseContentType = rsp.headers.get("content-type");
+        let shouldExecute = javascriptContentTypes.some(ct => responseContentType?.toLowerCase?.().includes?.(ct));
+        if (shouldExecute){
+          scriptContent = await rsp.text();
+          env.$currentScriptId$ = instanceId;
+          run(env, scriptContent, scriptOrgSrc || scriptSrc);
+        }
         runStateLoadHandlers(instance!, StateProp.loadHandlers);
       } else {
         errorMsg = rsp.statusText;

diff --git a/tests/index.html b/tests/index.html
@@ -120,6 +120,7 @@ <h2>Service Integration Tests</h2>
       <li><a href="/tests/integrations/load-scripts-on-main-thread/">Load Scripts on Main Thread</a></li>
       <li><a href="/tests/integrations/facebook-pixel/">Facebook Pixel</a></li>
       <li><a href="/tests/integrations/gtm/">Google Tag Manager (GTM)</a></li>
+      <li><a href="/tests/integrations/javascript-request/">Javascript Request Execution</a></li>
       <li><a href="/tests/integrations/hubspot/forms.html">Hubspot Forms</a></li>
       <li><a href="/tests/integrations/intercom/">Intercom</a></li>
       <li><a href="/tests/integrations/jquery/">jQuery</a></li>

diff --git a/tests/integrations/javascript-request/execute.js b/tests/integrations/javascript-request/execute.js
@@ -0,0 +1,4 @@
+(function () {
+  const element = document.querySelector("#javascript-execution")
+  element.textContent = "Executed the js"
+})()
diff --git a/tests/integrations/javascript-request/index.html b/tests/integrations/javascript-request/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Partytown Test Page" />
+
+    <title>Javascript request execution 🎉</title>
+
+    <script>
+      partytown = {
+        logCalls: true,
+        logGetters: true,
+        logSetters: true,
+        logImageRequests: true,
+        logMainAccess: true,
+        logSendBeaconRequests: true,
+        logStackTraces: false,
+        logScriptExecution: true,
+      }
+    </script>
+    <script src="/~partytown/debug/partytown.js"></script>
+  </head>
+  <body>
+    <h1>Javascript request execution</h1>
+
+    <p>
+      <strong>Javascript ("create-element.js") execution</strong>
+      <span id="javascript-execution"></span>
+    </p>
+
+    <p>
+      <strong>Text ("some-text.txt") execution</strong>
+      <span id="text-execution"></span>
+    </p>
+
+    <!-- Some third party js -->
+    <script type="text/partytown">
+      (async function(){
+        const jsRequestElement = document.createElement("script")
+        jsRequestElement.setAttribute("src", "/tests/integrations/javascript-request/execute.js")
+        document.head.appendChild(jsRequestElement)
+
+        const textRequestElement = document.createElement("script")
+        textRequestElement.setAttribute("src", "/tests/integrations/javascript-request/some-text.txt")
+        document.head.appendChild(textRequestElement)
+
+      })()
+    </script>
+    <!-- End Some third party js -->
+
+    <script type="text/partytown">
+      (function () {
+        document.body.classList.add('completed')
+      })()
+    </script>
+
+    <p><a href="/tests/">All Tests</a></p>
+  </body>
+</html>
diff --git a/tests/integrations/javascript-request/javascript-request.spec.ts b/tests/integrations/javascript-request/javascript-request.spec.ts
@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test';
+
+test('javascript request execution', async ({ page }) => {
+  await page.goto('/tests/integrations/javascript-request/');
+
+  await page.waitForSelector('.completed');
+
+  const javascriptExecutionElement = page.locator('#javascript-execution');
+  await expect(javascriptExecutionElement).toHaveText('Executed the js');
+});
+
+test('text request execution', async ({ page }) => {
+  await page.goto('/tests/integrations/javascript-request/');
+
+  await page.waitForSelector('.completed');
+
+  const textExecutionElement = page.locator('#text-execution');
+  await expect(textExecutionElement).toBeEmpty();
+});
diff --git a/tests/integrations/javascript-request/some-text.txt b/tests/integrations/javascript-request/some-text.txt
@@ -0,0 +1,4 @@
+(function () {
+  const element = document.querySelector("#text-execution")
+  element.textContent = "Executed the text"
+})()