fix: Add RequestIdleCallback polyfill (#231)

deco-cx · May 15, 2023 · 270e297 · 270e297
1 parent ab381c0
commit 270e297
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 90 deletions.
diff --git a/components/LiveControls.tsx b/components/LiveControls.tsx
@@ -1,7 +1,7 @@
 import { Head } from "$fresh/runtime.ts";
 import { DomInspectorActivators, inspectVSCode } from "../deps.ts";
-import type { Site } from "$live/types.ts";
 import { context } from "$live/live.ts";
+import type { Site } from "$live/types.ts";
 
 const IS_LOCALHOST = context.deploymentId === undefined;
 
@@ -35,7 +35,6 @@ type LiveEvent = {
 // Only add dom inspector if running in localhost, i.e. deploymentId === undefined
 const domInspectorModule = IS_LOCALHOST
   ? `
-window.ACTIVATE_INSPECTOR = true;
 const DomInspectorActivators = {
   CmdE: {
     label: "Cmd+E or Ctrl+E",
@@ -51,109 +50,112 @@ const DomInspectorActivators = {
 ${inspectVSCode.DomInspector.toString()}`
   : "";
 
-const main = () => {
-  // deno-lint-ignore no-explicit-any
-  const isLiveEvent = (data: any): data is LiveEvent =>
-    ["scrollToComponent", "DOMInspector"].includes(data?.type);
-
-  const onKeydown = (event: KeyboardEvent) => {
-    // in case loaded in iframe, avoid redirecting to editor while in editor
-    if (window !== window.parent) {
-      return;
-    }
-
-    // Disable going to admin while input it being typed
-    if (event.target !== document.body) {
-      return;
-    }
-
-    if (event.defaultPrevented) {
-      return;
-    }
-
-    if (
-      (event.ctrlKey && event.shiftKey && event.key === "E") ||
-      event.key === "."
-    ) {
-      event.preventDefault();
-      event.stopPropagation();
-
-      const href = new URL(
-        `/admin/${window.LIVE.site.id}/pages/${window.LIVE.page.id}`,
-        "https://deco.cx",
-      );
-
-      href.searchParams.set(
-        "pagePath",
-        encodeURIComponent(
-          `${window.location.pathname}${window.location.search}`,
-        ),
-      );
-
-      window.location.href = `${href}`;
-    }
-  };
+const main = () =>
+  requestIdleCallback(() => {
+    // deno-lint-ignore no-explicit-any
+    const isLiveEvent = (data: any): data is LiveEvent =>
+      ["scrollToComponent", "DOMInspector"].includes(data?.type);
 
-  const onMessage = (event: MessageEvent<LiveEvent>) => {
-    const { data } = event;
+    const onKeydown = (event: KeyboardEvent) => {
+      // in case loaded in iframe, avoid redirecting to editor while in editor
+      if (window !== window.parent) {
+        return;
+      }
 
-    if (!isLiveEvent(data)) {
-      return;
-    }
+      // Disable going to admin while input it being typed
+      if (event.target !== document.body) {
+        return;
+      }
 
-    switch (data.type) {
-      case "scrollToComponent": {
-        const findById = document
-          .getElementById(data.args.id);
+      if (event.defaultPrevented) {
+        return;
+      }
 
-        const findByAlternateId = data.args.alternateId
-          ? document
-            .getElementById(data.args.alternateId)
-          : undefined;
+      if (
+        (event.ctrlKey && event.shiftKey && event.key === "E") ||
+        event.key === "."
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const href = new URL(
+          `/admin/${window.LIVE.site.id}/pages/${window.LIVE.page.id}`,
+          "https://deco.cx",
+        );
+
+        href.searchParams.set(
+          "pagePath",
+          encodeURIComponent(
+            `${window.location.pathname}${window.location.search}`,
+          ),
+        );
+
+        window.location.href = `${href}`;
+      }
+    };
 
-        (findById ?? findByAlternateId)?.scrollIntoView({ behavior: "smooth" });
+    const onMessage = (event: MessageEvent<LiveEvent>) => {
+      const { data } = event;
 
+      if (!isLiveEvent(data)) {
         return;
       }
-      case "DOMInspector": {
-        const action = data.args;
 
-        if (action === "activate" && !inspector.isActive()) {
-          inspector.activate();
-        } else if (action === "deactivate" && inspector.isActive()) {
-          inspector.deactivate();
+      switch (data.type) {
+        case "scrollToComponent": {
+          const findById = document
+            .getElementById(data.args.id);
+
+          const findByAlternateId = data.args.alternateId
+            ? document
+              .getElementById(data.args.alternateId)
+            : undefined;
+
+          (findById ?? findByAlternateId)?.scrollIntoView({
+            behavior: "smooth",
+          });
+
+          return;
         }
+        case "DOMInspector": {
+          const action = data.args;
 
-        return;
+          if (action === "activate" && !inspector.isActive()) {
+            inspector.activate();
+          } else if (action === "deactivate" && inspector.isActive()) {
+            inspector.deactivate();
+          }
+
+          return;
+        }
       }
-    }
-  };
+    };
 
-  //@ts-ignore: "window.ACTIVATE_INSPECTOR not available"
-  const inspector = window.ACTIVATE_INSPECTOR &&
     //@ts-ignore: "DomInspector not available"
-    new DomInspector(document.body, {
-      outline: "1px dashed #2fd080",
-      backgroundColor: "rgba(47, 208, 128, 0.33)",
-      backgroundBlendMode: "multiply",
-      activator: DomInspectorActivators.Backquote,
-      path: "/live/inspect",
-    });
-
-  /** Setup global variables */
-  window.LIVE = {
-    ...window.LIVE,
-    ...JSON.parse(document.getElementById("__DECO_STATE")!.innerText),
-  };
+    const inspector = typeof DomInspector !== "undefined" &&
+      //@ts-ignore: "DomInspector not available"
+      new DomInspector(document.body, {
+        outline: "1px dashed #2fd080",
+        backgroundColor: "rgba(47, 208, 128, 0.33)",
+        backgroundBlendMode: "multiply",
+        activator: DomInspectorActivators.Backquote,
+        path: "/live/inspect",
+      });
+
+    /** Setup global variables */
+    window.LIVE = {
+      ...window.LIVE,
+      ...JSON.parse(document.getElementById("__DECO_STATE")!.innerText),
+    };
 
-  /** Setup listeners */
+    /** Setup listeners */
 
-  // navigate to admin when user clicks ctrl+shift+e
-  document.body.addEventListener("keydown", onKeydown);
+    // navigate to admin when user clicks ctrl+shift+e
+    document.body.addEventListener("keydown", onKeydown);
 
-  // focus element when inside admin
-  addEventListener("message", onMessage);
-};
+    // focus element when inside admin
+    addEventListener("message", onMessage);
+  });
 
 function LiveControls({ site, page }: Props) {
   const partialPage = page && {
@@ -172,8 +174,7 @@ function LiveControls({ site, page }: Props) {
       <script
         type="module"
         dangerouslySetInnerHTML={{
-          __html:
-            `${domInspectorModule}\nrequestIdleCallback(${main.toString()})`,
+          __html: `${domInspectorModule}\n${main.toString()}`,
         }}
       />
     </Head>

diff --git a/components/LivePolyfills.tsx b/components/LivePolyfills.tsx
@@ -0,0 +1,18 @@
+import { Head } from "$fresh/runtime.ts";
+
+// Polyfills required for our inline scripts to work on our targeted browsers
+const snippet = () => {
+  // Required for Safari
+  window.requestIdleCallback = window.requestIdleCallback ||
+    ((callback: IdleRequestCallback) => setTimeout(callback, 0));
+};
+
+function LivePolyfills() {
+  return (
+    <Head>
+      <script dangerouslySetInnerHTML={{ __html: `(${snippet})()` }} />
+    </Head>
+  );
+}
+
+export default LivePolyfills;
diff --git a/deno.lock b/deno.lock
diff --git a/pages/LivePage.tsx b/pages/LivePage.tsx
@@ -3,6 +3,7 @@ import { Head } from "$fresh/runtime.ts";
 import { isSection, Section } from "$live/blocks/section.ts";
 import LiveAnalytics from "$live/components/LiveAnalytics.tsx";
 import LiveControls from "$live/components/LiveControls.tsx";
+import LivePolyfills from "$live/components/LivePolyfills.tsx";
 import LivePageEditor, {
   BlockControls,
 } from "$live/components/LivePageEditor.tsx";
@@ -167,6 +168,7 @@ export default function LivePage(
 
   return (
     <>
+      <LivePolyfills />
       <LiveControls
         site={{ id: context.siteId, name: context.site }}
         page={{

diff --git a/routes/live/previews/[...block].tsx b/routes/live/previews/[...block].tsx
@@ -2,6 +2,7 @@ import { HandlerContext, PageProps } from "$fresh/server.ts";
 import { Page } from "$live/blocks/page.ts";
 import LiveAnalytics from "$live/components/LiveAnalytics.tsx";
 import LiveControls from "$live/components/LiveControls.tsx";
+import LivePolyfills from "$live/components/LivePolyfills.tsx";
 import { context } from "$live/live.ts";
 import Render from "$live/routes/[...catchall].tsx";
 import { LiveConfig, LiveState } from "$live/types.ts";
@@ -30,6 +31,7 @@ export default function Preview(props: PageProps<Page>) {
   };
   return (
     <>
+      <LivePolyfills />
       <LiveControls
         site={{ id: context.siteId, name: context.site }}
         page={{