@editframe/react 0.23.8-beta.0 → 0.25.0-beta.0

package/src/hooks/useTimingInfo.ts

@@ -1,4 +1,5 @@
 import type { EFTimegroup } from "@editframe/elements";
+import type { Task } from "@lit/task";
 import type { ReactiveController, ReactiveControllerHost } from "lit";
 import { useEffect, useRef, useState } from "react";
 
@@ -9,27 +10,65 @@ interface TimeInfo {
 }
 
 class CurrentTimeController implements ReactiveController {
+  #lastTaskPromise: Promise<unknown> | null = null;
+  #isConnected = false;
+
   constructor(
     private host: {
       ownCurrentTimeMs: number;
       durationMs: number;
+      frameTask: Task<readonly unknown[], unknown>;
     } & ReactiveControllerHost,
     private setCurrentTime: React.Dispatch<React.SetStateAction<TimeInfo>>,
   ) {
     this.host.addController(this);
   }
 
+  hostConnected(): void {
+    this.#isConnected = true;
+  }
+
   hostDisconnected(): void {
+    this.#isConnected = false;
+    this.#lastTaskPromise = null;
     this.host.removeController(this);
   }
 
   hostUpdated(): void {
+    const currentTaskPromise = this.host.frameTask.taskComplete;
+
+    // Detect if a new frame task has started (promise reference changed)
+    if (currentTaskPromise !== this.#lastTaskPromise) {
+      this.#lastTaskPromise = currentTaskPromise;
+
+      // Wait for this specific task to complete, then update React
+      // This is async so it doesn't block the update cycle
+      currentTaskPromise
+        .then(() => {
+          // Only update if still connected
+          if (this.#isConnected) {
+            this.#updateReactState();
+          }
+        })
+        .catch(() => {
+          // Ignore task errors - we'll continue observing
+        });
+    }
+  }
+
+  #updateReactState(): void {
+    // Always update to ensure React has the latest state
     this.setCurrentTime({
       ownCurrentTimeMs: this.host.ownCurrentTimeMs,
       durationMs: this.host.durationMs,
       percentComplete: this.host.ownCurrentTimeMs / this.host.durationMs,
     });
   }
+
+  // Public method to manually trigger sync (for initialization)
+  syncNow(): void {
+    this.#updateReactState();
+  }
 }
 
 export const useTimingInfo = (
@@ -45,7 +84,23 @@ export const useTimingInfo = (
     if (!timegroupRef.current) {
       throw new Error("Timegroup ref not set");
     }
-    new CurrentTimeController(timegroupRef.current, setTimeInfo);
+
+    const controller = new CurrentTimeController(
+      timegroupRef.current,
+      setTimeInfo,
+    );
+
+    // Trigger initial update if the timegroup is already connected
+    if (timegroupRef.current.isConnected) {
+      controller.hostConnected();
+      // Sync initial state immediately
+      controller.syncNow();
+    }
+
+    // Cleanup function
+    return () => {
+      controller.hostDisconnected();
+    };
   }, [timegroupRef.current]);
 
   return { ...timeInfo, ref: timegroupRef };

package/tsdown.config.ts

@@ -0,0 +1,36 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+
+import { defineConfig, type Plugin } from "tsdown";
+
+import { createTsdownConfig } from "../tsdown.config.base.ts";
+
+// Plugin to handle CSS ?inline imports from @editframe/elements
+const inlineCssPlugin = (): Plugin => ({
+  name: "inline-css",
+  resolveId(source, importer) {
+    if (source.endsWith(".css?inline") && importer) {
+      const resolved = path.resolve(
+        path.dirname(importer),
+        source.replace("?inline", ""),
+      );
+      return { id: resolved + "?inline", external: false };
+    }
+    return null;
+  },
+  load(id) {
+    if (id.endsWith("?inline")) {
+      const filePath = id.replace("?inline", "");
+      const css = readFileSync(filePath, "utf-8");
+      return `export default ${JSON.stringify(css)}`;
+    }
+    return null;
+  },
+});
+
+export default defineConfig(
+  createTsdownConfig({
+    plugins: [inlineCssPlugin()],
+    external: [/@editframe\/(elements|assets)/],
+  }),
+);