@effing/create 0.6.1 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effing/create",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "Create a new Effing project",
   "type": "module",
   "bin": "./dist/index.js",

package/template/app/routes/pff.$effieId.tsx

@@ -42,7 +42,7 @@ const RENDER_SCALES = [
 
 type RenderSuccess = {
   renderSuccess: true;
-  videoUrl: string;
+  progressUrl: string;
   renderScale: number;
 };
 type RenderError = {
@@ -113,7 +113,7 @@ export async function loader({ request, params }: Route.LoaderArgs) {
 
       if (warmupResponse.ok) {
         const warmupData = await warmupResponse.json();
-        warmupStreamUrl = warmupData.url;
+        warmupStreamUrl = warmupData.progressUrl;
       }
     } catch {
       // Warmup is best-effort, don't fail the page load
@@ -212,8 +212,8 @@ async function handleRender(
       }
     }
 
-    const { url } = await createResponse.json();
-    return { renderSuccess: true, renderScale: scale, videoUrl: url };
+    const { progressUrl } = await createResponse.json();
+    return { renderSuccess: true, renderScale: scale, progressUrl };
   } catch (err) {
     return {
       renderSuccess: false,
@@ -274,15 +274,34 @@ export default function EffiePreviewPage() {
     return () => clearInterval(interval);
   }, [render.startTime, render.playbackTime]);
 
-  // Update render state when action completes successfully
+  // Connect to SSE progress when render action completes
   useEffect(() => {
-    if (actionData && isRenderSuccess(actionData)) {
-      setRender((prev) => ({
-        ...prev,
-        videoUrl: actionData.videoUrl,
-        scale: actionData.renderScale,
-      }));
-    }
+    if (!actionData || !isRenderSuccess(actionData)) return;
+
+    const { progressUrl, renderScale } = actionData;
+    const eventSource = new EventSource(progressUrl);
+
+    eventSource.addEventListener("ready", (e) => {
+      try {
+        const { videoUrl } = JSON.parse(e.data);
+        setRender((prev) => ({
+          ...prev,
+          videoUrl,
+          scale: renderScale,
+        }));
+      } catch {
+        // Ignore parse errors
+      }
+      eventSource.close();
+    });
+
+    eventSource.addEventListener("error", () => {
+      eventSource.close();
+    });
+
+    return () => {
+      eventSource.close();
+    };
   }, [actionData]);
 
   const warmup = useEffieWarmup(warmupStreamUrl);

package/template/package.json

@@ -11,14 +11,14 @@
     "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {
-    "@effing/annie": "^0.6.1",
-    "@effing/annie-player": "^0.6.1",
-    "@effing/effie": "^0.6.1",
-    "@effing/effie-preview": "^0.6.1",
-    "@effing/ffs": "^0.6.1",
-    "@effing/satori": "^0.6.1",
-    "@effing/serde": "^0.6.1",
-    "@effing/tween": "^0.6.1",
+    "@effing/annie": "^0.7.1",
+    "@effing/annie-player": "^0.7.1",
+    "@effing/effie": "^0.7.1",
+    "@effing/effie-preview": "^0.7.1",
+    "@effing/ffs": "^0.7.1",
+    "@effing/satori": "^0.7.1",
+    "@effing/serde": "^0.7.1",
+    "@effing/tween": "^0.7.1",
     "@react-router/node": "^7.0.0",
     "@react-router/serve": "^7.0.0",
     "cross-env": "^7.0.3",

package/template/public/sw.js

@@ -1,16 +1,20 @@
 /* global clients */
 
 // FFS render URLs (GET /render/{uuid}) are one-time-consumption — the server
-// deletes the job after streaming the response. However, Chrome makes follow-up
-// requests to the same URL (e.g. to re-read the moov atom for seeking), which
-// return 404 and cause the video to hang at larger scales. This service worker
-// caches the response so those subsequent requests are served from cache.
+// deletes the job after streaming the response. However, browsers might make
+// follow-up requests to the same URL (e.g. to re-read the moov atom for seeking),
+// which return 404 and cause the video to break. This service worker caches the
+// response so those subsequent requests are served from cache.
 
 const CACHE_NAME = "ffs-render-cache";
-const RENDER_URL_PATTERN = /\/render\/[0-9a-f-]{36}$/;
+const RENDER_URL_PATTERN = /\/render\/[0-9a-f-]{36}\/video$/;
 const MAX_ENTRIES = 5;
 
+/** @type {string[]} URLs in insertion order — reset on activate alongside the cache. */
+const cacheOrder = [];
+
 self.addEventListener("activate", (event) => {
+  cacheOrder.length = 0;
   event.waitUntil(caches.delete(CACHE_NAME).then(() => clients.claim()));
 });
 
@@ -25,14 +29,16 @@ self.addEventListener("fetch", (event) => {
       const response = await fetch(event.request);
       if (response.ok) {
         await cache.put(event.request, response.clone());
+        cacheOrder.push(event.request.url);
 
-        // Prune oldest entries to keep the cache bounded.
-        const keys = await cache.keys();
-        if (keys.length > MAX_ENTRIES) {
-          await Promise.all(
-            keys
-              .slice(0, keys.length - MAX_ENTRIES)
-              .map((k) => cache.delete(k)),
+        // Prune oldest entries in the background — don't block the response.
+        if (cacheOrder.length > MAX_ENTRIES) {
+          const toDelete = cacheOrder.splice(
+            0,
+            cacheOrder.length - MAX_ENTRIES,
+          );
+          event.waitUntil(
+            Promise.all(toDelete.map((url) => cache.delete(url))),
           );
         }
       }