Update build process to fix loading errors

Fleker · Fleker · commit d289f6d7b692 · 2021-09-24T13:34:48.000-04:00
Accomodate directories of JS files
Address obfuscation key in executing callbacks
Update to patch 1.0.1

Change-Id: I6780d4190fcc5b24afee7e73d7ac3413cc1820ea
diff --git a/angular.json b/angular.json
@@ -38,7 +38,7 @@
               },
               {
                 "input": "./dist/client-bundle",
-                "glob": "*.js",
+                "glob": "**/*.js",
                 "output": "."
               }
             ],
diff --git a/package.json b/package.json
@@ -3,18 +3,22 @@
   "author": {
     "name": "Google LLC"
   },
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=12.22.2"
+  },
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "npm run build:client && npm run build:extension",
-    "build:client": "tsc --project tsconfig.client.json && parcel build dist/client/*.js --dist-dir dist/client-bundle",
+    "build:client": "tsc --project tsconfig.client.json && parcel build dist/client/**/*.js --dist-dir dist/client-bundle",
     "build:extension": "ng build",
+    "clean": "rm -rf ./.parcel-cache ./dist",
     "fix": "ng lint --fix",
     "lint": "ng lint",
-    "package": "cd dist/interactive-canvas-extension && zip bundle.zip * && mv bundle.zip ../../",
+    "package": "cd dist/interactive-canvas-extension && zip bundle.zip * **/* && mv bundle.zip ../../",
     "test": "npm run lint && npm run test:unit",
     "test:unit": "tsc --project tsconfig.ava.json && ava dist/tests/**/*.test.js",
     "watch": "ng build --watch --configuration development"
diff --git a/src/bootstrap.html b/src/bootstrap.html
@@ -14,6 +14,6 @@
 <html>
     <head></head>
     <body>
-        <script src="bootstrap.js"></script>
+        <script src="webpage/bootstrap.js"></script>
     </body>
 </html>
diff --git a/src/interactive-canvas.ts b/src/interactive-canvas.ts
@@ -24,7 +24,7 @@ export interface InteractiveCanvas {
   getHeaderHeightPx: () => Promise<number>;
   setCanvasState: (state: Object) => Promise<void>;
   g: {
-    G: InteractiveCanvasCallbacks;
+    [key: string]: InteractiveCanvasCallbacks;
   };
 }
 
diff --git a/src/manifest.json b/src/manifest.json
@@ -1,7 +1,7 @@
 {
     "name": "Interactive Canvas DevTools",
     "description": "DevTools for Interactive Canvas",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "manifest_version": 3,
     "permissions": ["storage", "activeTab", "scripting"],
     "host_permissions": ["<all_urls>"],
@@ -10,12 +10,12 @@
             "matches": ["<all_urls>"],
             "exclude_matches": ["*://*.google.com/*"],
             "run_at": "document_end",
-            "js": ["content-script.js"],
+            "js": ["webpage/content-script.js"],
             "all_frames": true
         }
     ],
     "web_accessible_resources": [{
-        "resources": ["js-yaml.min.js", "webpage-script.js"],
+        "resources": ["js-yaml.min.js", "webpage/webpage-script.js"],
         "matches": ["<all_urls>"]
     }],
     "devtools_page": "bootstrap.html"
diff --git a/src/webpage/content-script.ts b/src/webpage/content-script.ts
@@ -27,7 +27,7 @@ declare let window: InteractiveCanvasWindow;
 /**
  * An array of scripts to be loaded into the primary page context.
  */
-const scriptsToLoad = ['js-yaml.min.js', 'webpage-script.js'];
+const scriptsToLoad = ['js-yaml.min.js', 'webpage/webpage-script.js'];
 scriptsToLoad.forEach(script => {
   const s = document.createElement('script');
   s.src = chrome.runtime.getURL(script);
diff --git a/src/webpage/webpage-script.ts b/src/webpage/webpage-script.ts
@@ -229,19 +229,38 @@ window.requestAnimationFrame(() => {
   addDebuggingMethodsInJsConsole();
 });
 
+/**
+ * Dynamically gets the correct object within the Interactive Canvas
+ * object that contains callback methods.
+ * @returns InteractiveCanvasCallbacks object
+ */
+function getInteractiveCanvasCallbacks() {
+  // Internally, the callbacks are stored in interactiveCanvas.g.[letter]
+  // This letter is not static, and may change with each release.
+  // We need to iterate through each letter to find callbacks.
+  const callbackObjectKeys = Object.keys(window.interactiveCanvas.g);
+  for (const key of callbackObjectKeys) {
+    // Check that this element has an onUpdate function.
+    if (window.interactiveCanvas.g[key].onUpdate !== undefined) {
+      return window.interactiveCanvas.g[key];
+    }
+  }
+  throw new Error('Cannot find callbacks in window.interactiveCanvas.g');
+}
+
 document.addEventListener('message', (e: Event) => {
   const event = e as MessageEvent;
   const eventData = event.data;
   const {type} = eventData;
   switch (type) {
     case 'payload': {
       const {data} = eventData;
-      window.interactiveCanvas.g.G.onUpdate(data);
+      getInteractiveCanvasCallbacks().onUpdate(data);
       break;
     }
     case 'TtsEndpointEvent': {
       const {name} = eventData;
-      window.interactiveCanvas.g.G.onTtsMark(name);
+      getInteractiveCanvasCallbacks().onTtsMark(name);
       break;
     }
     case 'Ext-ShowHeader': {
diff --git a/tsconfig.client.json b/tsconfig.client.json
@@ -15,7 +15,7 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "ES2020",
-    "module": "CommonJS",
+    "module": "ES2015",
     "esModuleInterop": false,
     "lib": [
       "es2018",

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@`
`38`	`38`	`},`
`39`	`39`	`{`
`40`	`40`	`"input": "./dist/client-bundle",`
`41`		`- "glob": "*.js",`
	`41`	`+ "glob": "*/.js",`
`42`	`42`	`"output": "."`
`43`	`43`	`}`
`44`	`44`	`],`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ export interface InteractiveCanvas {`
`24`	`24`	`getHeaderHeightPx: () => Promise<number>;`
`25`	`25`	`setCanvasState: (state: Object) => Promise<void>;`
`26`	`26`	`g: {`
`27`		`- G: InteractiveCanvasCallbacks;`
	`27`	`+ [key: string]: InteractiveCanvasCallbacks;`
`28`	`28`	`};`
`29`	`29`	`}`
`30`	`30`