Merge pull request #16 from oslabs-beta/experiment_without_rollup

Experiment without rollup
oslabs-beta · Jan 8, 2022 · ff677e5 · ff677e5
2 parents f9e5fa9 + f40cf10
commit ff677e5
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 142 deletions.
diff --git a/chrome_extension/background.js b/chrome_extension/background.js
@@ -14,7 +14,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   );
   if (request.body === 'runContentScript') {
     sendResponse({ body: 'trying to run the content script' });
-    chrome.tabs.executeScript({ file: './output/bundledContentScript.js' });
+    chrome.tabs.executeScript({ file: './contentScript.js' });
   }
   // pass any received message along to main.js
   if (request) {

diff --git a/chrome_extension/build/bundleDelorean.js b/chrome_extension/build/bundleDelorean.js
diff --git a/chrome_extension/contentScript.js b/chrome_extension/contentScript.js
@@ -1,19 +1,33 @@
-const sendMessages = (e) => {
-  window.postMessage({body: e });
-  console.log(e)
-}
-const p = (o) => JSON.parse(JSON.stringify(o));
+// This injects the string iife below directly into the DOM to be executed and listen for events.
+// Check the elements tab of the devtools to see the script tag added in
+
+if (!window.tag) {
+  // creating a script tag to be injected into the browser's DOM where the application is running
+  window.tag = document.createElement("script");
+  // adding the following code to the script tag so that we can record the events that Svelte emits
+  // the code is added as an IIFE
+  window.tag.text = `
+(function () {
+'use strict';
+
+const sendMessages = (eventDetail) => {
+  window.postMessage({ body: eventDetail });
+  console.log(eventDetail);
+};
+
+const parseEvent = (event) => JSON.parse(JSON.stringify(event));
+
 function setupListeners(root) {
-  root.addEventListener('SvelteRegisterComponent', (e) => sendMessages(p(e.detail)));
-  root.addEventListener('SvelteRegisterBlock', (e) => sendMessages(p(e.detail)));
-  root.addEventListener('SvelteDOMInsert', (e) => sendMessages(p(e.detail)));
-  root.addEventListener('SvelteDOMRemove', (e) => sendMessages(p(e.detail)));
-  root.addEventListener('SvelteDOMAddEventListener', (e) => sendMessages(p(e.detail)));
-  root.addEventListener('SvelteDOMRemoveEventListener',(e) => sendMessages(p(e.detail)));
-  root.addEventListener('SvelteDOMSetData', (e) => sendMessages(p(e.detail)));
-  root.addEventListener('SvelteDOMSetProperty', (e) => sendMessages(p(e.detail)));
-  root.addEventListener('SvelteDOMSetAttribute', (e) => sendMessages(p(e.detail)));
-  root.addEventListener('SvelteDOMRemoveAttribute', (e) => sendMessages(p(e.detail)));
+  root.addEventListener('SvelteRegisterComponent', (e) => sendMessages(parseEvent(e.detail)));
+  root.addEventListener('SvelteRegisterBlock', (e) => sendMessages(parseEvent(e.detail)));
+  root.addEventListener('SvelteDOMInsert', (e) => sendMessages(parseEvent(e.detail)));
+  root.addEventListener('SvelteDOMRemove', (e) => sendMessages(parseEvent(e.detail)));
+  root.addEventListener('SvelteDOMAddEventListener', (e) => sendMessages(parseEvent(e.detail)));
+  root.addEventListener('SvelteDOMRemoveEventListener',(e) => sendMessages(parseEvent(e.detail)));
+  root.addEventListener('SvelteDOMSetData', (e) => sendMessages(parseEvent(e.detail)));
+  root.addEventListener('SvelteDOMSetProperty', (e) => sendMessages(parseEvent(e.detail)));
+  root.addEventListener('SvelteDOMSetAttribute', (e) => sendMessages(parseEvent(e.detail)));
+  root.addEventListener('SvelteDOMRemoveAttribute', (e) => sendMessages(parseEvent(e.detail)));
 }
 
 setupListeners(window.document);
@@ -29,4 +43,18 @@ for (let i = 0; i < window.frames.length; i++) {
   root.addEventListener('readystatechange', (e) => clearTimeout(timer), {
     once: true,
   });
-}
+}
+
+})();
+`;
+  document.children[0].append(window.tag);
+
+  window.addEventListener(
+    "message",
+    (messageEvent) => {
+      console.log(messageEvent);
+      messageEvent.source == window && chrome.runtime.sendMessage(messageEvent.data);
+    },
+    false
+  );
+}
diff --git a/chrome_extension/manifest.json b/chrome_extension/manifest.json
@@ -8,5 +8,5 @@
     "scripts": ["background.js"]
   },
   "permissions": ["tabs", "activeTab", "debugger", "<all_urls>"],
-  "web_accessible_resources": ["./output/bundledContentScript.js"]
+  "web_accessible_resources": ["./contentScript.js"]
 }
diff --git a/chrome_extension/output/bundledContentScript.js b/chrome_extension/output/bundledContentScript.js
@@ -1,70 +0,0 @@
-if (!window.tag) {
-		window.tag = document.createElement('script')
-		window.tag.text = `
-(function () {
-  'use strict';
-
-  const sendMessages = (e) => {
-    window.postMessage({body: e });
-    console.log(e);
-  };
-  const p = (o) => JSON.parse(JSON.stringify(o));
-  function setupListeners(root) {
-    root.addEventListener('SvelteRegisterComponent', (e) => sendMessages(p(e.detail)));
-    root.addEventListener('SvelteRegisterBlock', (e) => sendMessages(p(e.detail)));
-    root.addEventListener('SvelteDOMInsert', (e) => sendMessages(p(e.detail)));
-    root.addEventListener('SvelteDOMRemove', (e) => sendMessages(p(e.detail)));
-    root.addEventListener('SvelteDOMAddEventListener', (e) => sendMessages(p(e.detail)));
-    root.addEventListener('SvelteDOMRemoveEventListener',(e) => sendMessages(p(e.detail)));
-    root.addEventListener('SvelteDOMSetData', (e) => sendMessages(p(e.detail)));
-    root.addEventListener('SvelteDOMSetProperty', (e) => sendMessages(p(e.detail)));
-    root.addEventListener('SvelteDOMSetAttribute', (e) => sendMessages(p(e.detail)));
-    root.addEventListener('SvelteDOMRemoveAttribute', (e) => sendMessages(p(e.detail)));
-  }
-
-  setupListeners(window.document);
-  for (let i = 0; i < window.frames.length; i++) {
-    const frame = window.frames[i];
-    const root = frame.document;
-    setupListeners(root);
-    const timer = setInterval(() => {
-      if (root == frame.document) return;
-      clearTimeout(timer);
-      setupListeners(frame.document);
-    }, 0);
-    root.addEventListener('readystatechange', (e) => clearTimeout(timer), {
-      once: true,
-    });
-  }
-
-})();
-`
-		if (window.sessionStorage.SvelteDevToolsProfilerEnabled === "true") window.tag.text = window.tag.text.replace('let profilerEnabled = false;', '$&\nstartProfiler();')
-		document.children[0].append(window.tag)
-		const sendMessage = chrome.runtime.sendMessage
-		const postMessage = window.postMessage.bind(window)
-		chrome.runtime.onMessage.addListener((message, sender) => {
-			const fromBackground = sender && sender.id === chrome.runtime.id
-			if (!fromBackground) {
-				console.error('Message from unexpected sender', sender, message)
-				return
-			}
-			switch (message.type) {
-				case 'startProfiler':
-					window.sessionStorage.SvelteDevToolsProfilerEnabled = "true"
-					break
-				case 'stopProfiler':
-					// fallthrough
-				case 'clear':
-					delete window.sessionStorage.SvelteDevToolsProfilerEnabled
-					break
-			}
-			postMessage(message)
-		})
-		window.addEventListener(
-			'message',
-			e => e.source == window && sendMessage(e.data),
-			false
-		)
-		window.addEventListener('unload', () => sendMessage({ type: 'clear' }))
-	}

diff --git a/public/build/bundle.js b/public/build/bundle.js
diff --git a/rollup.config.js b/rollup.config.js
@@ -83,58 +83,6 @@ export default [
       clearScreen: false,
     },
   },
-  {
-    input: "./chrome_extension/contentScript.js",
-    external: "chrome",
-    output: {
-      file: "./chrome_extension/output/bundledContentScript.js",
-      name: "contentScript",
-      format: "iife",
-      banner: `if (!window.tag) {
-		window.tag = document.createElement('script')
-		window.tag.text = \``,
-      footer: `\`
-		if (window.sessionStorage.SvelteDevToolsProfilerEnabled === "true") window.tag.text = window.tag.text.replace('let profilerEnabled = false;', '\$&\\nstartProfiler();')
-		document.children[0].append(window.tag)
-		const sendMessage = chrome.runtime.sendMessage
-		const postMessage = window.postMessage.bind(window)
-		chrome.runtime.onMessage.addListener((message, sender) => {
-			const fromBackground = sender && sender.id === chrome.runtime.id
-			if (!fromBackground) {
-				console.error('Message from unexpected sender', sender, message)
-				return
-			}
-			switch (message.type) {
-				case 'startProfiler':
-					window.sessionStorage.SvelteDevToolsProfilerEnabled = "true"
-					break
-				case 'stopProfiler':
-					// fallthrough
-				case 'clear':
-					delete window.sessionStorage.SvelteDevToolsProfilerEnabled
-					break
-			}
-			postMessage(message)
-		})
-		window.addEventListener(
-			'message',
-			e => e.source == window && sendMessage(e.data),
-			false
-		)
-		window.addEventListener('unload', () => sendMessage({ type: 'clear' }))
-	}`,
-    },
-    plugins: [
-      resolve(),
-      svelte({
-        preprocess: sveltePreprocess({ sourceMap: true }),
-        compilerOptions: {
-          // enable run-time checks when not in production
-          dev: !production,
-        },
-      }),
-    ],
-  },
   {
     input: "./client/main.ts",
     external: "chrome",