fix: fix report-item script issue caused by webpack optimizer [PT-186…

…921649]

packages/tecrock-table/src/components/report-item/report-item.tsx

@@ -15,39 +15,40 @@ import classMap from "../table.scss";
 // A method to execute any JavaScript code in the report-item iframe. This is necessary to set up table scaling for
 // narrow views and to enable snapshot clicking. This approach is quite limited, but it suffices for our needs in
 // this specific case.
-const reportItemScript =
-  "<script>" + (function runInReportItem() {
-    // Setup table scaling
-    const table = document.body.getElementsByTagName("table")[0];
-    if (!table) {
-      return;
-    }
-    const tableParent = table.parentElement;
-    if (!tableParent) {
-      return;
-    }
-    if (table.offsetWidth > tableParent.offsetWidth) {
-      // Table is wider than its parent, there is a horizontal scrollbar, so we need to scale it down.
-      const originalWidth = table.offsetWidth;
-      const originalHeight = table.offsetHeight;
-      const scale = tableParent.offsetWidth / (originalWidth + 1);
-      table.style.transform = `scale(${scale})`;
-      table.style.width = tableParent.style.width = `${scale * originalWidth}px`;
-      table.style.height = tableParent.style.height = (scale * originalHeight) + "px";
-      tableParent.style.overflow = "hidden";
-    }
-    // Set up the snapshot click handler. This is implemented in the Table component, but it won't work in the report
-    // item because the component is rendered to a string and sent in that form. Fortunately, it's easy to
-    // reimplement it here.
-    const snapshots = document.body.getElementsByTagName("img");
-    for (let i = 0; i < snapshots.length; i++) {
-      const snapshot = snapshots[i];
-      snapshot.addEventListener("click", () => {
-        window.open(snapshot.src, "_blank");
-      });
-    }
-  }).toString() +
-  "\nrunInReportItem(); </script>";
+function runInReportItem() {
+  // Setup table scaling
+  const table = document.body.getElementsByTagName("table")[0];
+  if (!table) {
+    return;
+  }
+  const tableParent = table.parentElement;
+  if (!tableParent) {
+    return;
+  }
+  if (table.offsetWidth > tableParent.offsetWidth) {
+    // Table is wider than its parent, there is a horizontal scrollbar, so we need to scale it down.
+    const originalWidth = table.offsetWidth;
+    const originalHeight = table.offsetHeight;
+    const scale = tableParent.offsetWidth / (originalWidth + 1);
+    table.style.transform = `scale(${scale})`;
+    table.style.width = tableParent.style.width = `${scale * originalWidth}px`;
+    table.style.height = tableParent.style.height = (scale * originalHeight) + "px";
+    tableParent.style.overflow = "hidden";
+  }
+  // Set up the snapshot click handler. This is implemented in the Table component, but it won't work in the report
+  // item because the component is rendered to a string and sent in that form. Fortunately, it's easy to
+  // reimplement it here.
+  const snapshots = document.body.getElementsByTagName("img");
+  for (let i = 0; i < snapshots.length; i++) {
+    const snapshot = snapshots[i];
+    snapshot.addEventListener("click", () => {
+      window.open(snapshot.src, "_blank");
+    });
+  }
+}
+// runInReportItem.name is necessary (rather than just using runInReportItem()) because the webpack optimizer might
+// change function name or even inline the function, which would break the code.
+const reportItemScript = "<script>" + runInReportItem.toString() + `\n ${runInReportItem.name}(); </script>`;
 
 export const reportItemHandler: IGetReportItemAnswerHandler<ITectonicExplorerInteractiveState, IAuthoredState> = request => {
   const {platformUserId, version, itemsType} = request;