feat: switch trigger async render from script to island (#831)

* Add async render marker and utility function

* Move useAsyncRender to web file

* switch fresh async render trigger to an island

runtime/fresh/Bindings.tsx

@@ -4,45 +4,7 @@
 import { Head, Partial } from "$fresh/runtime.ts";
 import type { Framework } from "@deco/deco";
 import { usePartialSection } from "@deco/deco/hooks";
-
-const script = (id: string) => {
-  function init() {
-    const elem = document.getElementById(id);
-    const parent = elem?.parentElement;
-
-    if (elem == null || parent == null) {
-      console.error(
-        `Missing element of id ${id} or its parent element. Async rendering will NOT work properly`,
-      );
-      return;
-    }
-
-    const observeAndClose = (e: IntersectionObserverEntry[]) => {
-      e.forEach((entry) => {
-        if (entry.isIntersecting) {
-          elem.click();
-          observer.disconnect();
-        }
-      });
-    };
-    const observer = new IntersectionObserver(observeAndClose);
-    observer.observe(parent);
-    observeAndClose(observer.takeRecords());
-  }
-
-  if (document.readyState === "complete") {
-    init();
-  } else {
-    addEventListener("load", init);
-  }
-};
-
-const dataURI = (fn: typeof script, id: string) =>
-  btoa(
-    `decodeURIComponent(escape(${
-      unescape(encodeURIComponent(`((${fn})("${id}"))`))
-    }))`,
-  );
+import DispatchAsyncRender from "./islands/DispatchAsyncRender.tsx";
 
 const bindings: Framework = {
   name: "fresh",
@@ -65,10 +27,7 @@ const bindings: Framework = {
           id={btnId}
           style={{ display: "none" }}
         />
-        <script
-          defer
-          src={`data:text/javascript;base64,${dataURI(script, btnId)}`}
-        />
+        <DispatchAsyncRender id={btnId} />
         {children}
       </>
     );

runtime/fresh/islands/DispatchAsyncRender.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "preact/hooks";
+
+interface Props {
+  id: string;
+}
+
+export default function DispatchAsyncRender({ id }: Props) {
+  useEffect(function clickOnAsyncRenderElements() {
+    const elem = document.getElementById(id);
+    const parent = elem?.parentElement;
+
+    if (elem == null || parent == null) {
+      console.error(
+        `Missing element of id ${id} or its parent element. Async rendering will NOT work properly`,
+      );
+      return;
+    }
+
+    elem.click();
+  }, []);
+
+  return <div data-dispatch-async-render />;
+}

runtime/fresh/plugin.tsx

@@ -5,12 +5,8 @@ import { Deco, type PageData, type PageParams } from "@deco/deco";
 import { framework as htmxFramework } from "@deco/deco/htmx";
 import type { ComponentType } from "preact";
 import framework from "./Bindings.tsx";
-
-export interface Plugin {
-  name: string;
-  middlewares?: PluginMiddleware[];
-  routes?: PluginRoute[];
-}
+import type { Plugin } from "$fresh/server.ts";
+export type { Plugin } from "$fresh/server.ts";
 
 export interface PluginRoute {
   /** A path in the format of a filename path without filetype */
@@ -110,5 +106,9 @@ export default function decoPlugin<TManifest extends AppManifest = AppManifest>(
       catchAll,
       { ...catchAll, path: "/index" },
     ],
+    islands: {
+      baseLocation: import.meta.url,
+      paths: ["./islands/DispatchAsyncRender.tsx"],
+    },
   };
 }