add timeline pkg to flutter

2026-02-24 19:26:17 +01:00
parent 0d1119b2af
commit 28898fb081
33 changed files with 2617 additions and 43 deletions
--- a/apps/web/src/components/flutter-view.tsx
+++ b/apps/web/src/components/flutter-view.tsx
@@ -0,0 +1,176 @@
+import { useEffect, useRef, useState } from "react";
+
+declare global {
+  interface Window {
+    __zendegi__?: {
+      getState: () => string;
+      onEvent: (json: string) => void;
+      updateState?: (json: string) => void;
+    };
+    _flutter?: {
+      buildConfig?: unknown;
+      loader: {
+        load: (config?: {
+          config?: {
+            entrypointBaseUrl?: string;
+            assetBase?: string;
+          };
+          onEntrypointLoaded?: (engineInitializer: {
+            initializeEngine: (config: {
+              hostElement: HTMLElement;
+              assetBase?: string;
+            }) => Promise<{ runApp: () => void }>;
+          }) => Promise<void>;
+        }) => Promise<void>;
+      };
+    };
+  }
+}
+
+type FlutterViewProps = {
+  state: Record<string, unknown>;
+  onEvent: (event: { type: string; payload?: Record<string, unknown> }) => void;
+  className?: string;
+};
+
+export function FlutterView({
+  state,
+  onEvent,
+  className,
+}: FlutterViewProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [status, setStatus] = useState<"loading" | "ready" | "error">(
+    "loading"
+  );
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  const onEventRef = useRef(onEvent);
+  onEventRef.current = onEvent;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    let pollingInterval: ReturnType<typeof setInterval> | undefined;
+    let pollingTimeout: ReturnType<typeof setTimeout> | undefined;
+
+    window.__zendegi__ = {
+      getState: () => JSON.stringify(stateRef.current),
+      onEvent: (json: string) => {
+        const event = JSON.parse(json) as {
+          type: string;
+          payload?: Record<string, unknown>;
+        };
+        onEventRef.current(event);
+      },
+    };
+
+    const init = async () => {
+      // Load flutter.js if not already loaded
+      if (!window._flutter) {
+        await new Promise<void>((resolve, reject) => {
+          if (document.querySelector('script[src="/flutter/flutter.js"]')) {
+            // Script tag exists but hasn't finished — wait for _flutter to appear
+            pollingTimeout = setTimeout(() => {
+              clearInterval(pollingInterval);
+              reject(
+                new Error("Timed out waiting for flutter.js to initialize")
+              );
+            }, 10_000);
+            pollingInterval = setInterval(() => {
+              if (window._flutter) {
+                clearInterval(pollingInterval);
+                clearTimeout(pollingTimeout);
+                resolve();
+              }
+            }, 50);
+            return;
+          }
+          const script = document.createElement("script");
+          script.src = "/flutter/flutter.js";
+          script.defer = true;
+          script.onload = () => resolve();
+          script.onerror = () => reject(new Error("Failed to load flutter.js"));
+          document.head.appendChild(script);
+        });
+      }
+
+      // Fetch and set buildConfig so load() works (supports wasm)
+      if (!window._flutter!.buildConfig) {
+        const res = await fetch("/flutter/build_config.json");
+        if (!res.ok) {
+          throw new Error(`Failed to fetch build config: ${res.status}`);
+        }
+        window._flutter!.buildConfig = await res.json();
+      }
+
+      try {
+        await window._flutter!.loader.load({
+          config: {
+            entrypointBaseUrl: "/flutter/",
+            assetBase: "/flutter/",
+          },
+          onEntrypointLoaded: async (engineInitializer) => {
+            const appRunner = await engineInitializer.initializeEngine({
+              hostElement: container,
+              assetBase: "/flutter/",
+            });
+            appRunner.runApp();
+            setStatus("ready");
+          },
+        });
+      } catch (error) {
+        throw new Error(
+          `Flutter engine initialization failed: ${error instanceof Error ? error.message : error}`
+        );
+      }
+    };
+
+    init().catch(() => setStatus("error"));
+
+    return () => {
+      clearInterval(pollingInterval);
+      clearTimeout(pollingTimeout);
+      container.replaceChildren();
+      delete (window as Partial<Window>).__zendegi__;
+    };
+  }, []);
+
+  useEffect(() => {
+    window.__zendegi__?.updateState?.(JSON.stringify(state));
+  }, [state]);
+
+  return (
+    <div className={className} style={{ height: "100%", position: "relative" }}>
+      {status === "loading" && (
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          Loading Flutter...
+        </div>
+      )}
+      {status === "error" && (
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "red",
+          }}
+        >
+          Failed to load Flutter view
+        </div>
+      )}
+      <div ref={containerRef} style={{ width: "100%", height: "100%" }} />
+    </div>
+  );
+}