@effing/create 0.15.0 → 0.16.0

package/package.json

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

package/template/app/pool.server.ts

@@ -1,3 +1,8 @@
+import path from "node:path";
 import { createSatoriPool } from "@effing/satori/pool";
 
-export const satoriPool = createSatoriPool();
+export const satoriPool = createSatoriPool(
+  process.env.NODE_ENV === "production"
+    ? { workerFile: path.resolve("build/satori.mjs") }
+    : undefined,
+);

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

@@ -57,52 +57,72 @@ type ActionResult =
   | { intent: "reload"; success: false; error: string };
 
 type RenderState =
-  | { step: "idle" }
-  | { step: "started"; startedAt: number }
+  | { step: "idle"; error: string | null }
+  | { step: "starting"; startedAt: number }
   | {
-      step: "ready";
+      step: "streaming";
       startedAt: number;
       videoUrl: string;
       scale: number;
-      downloadUrl?: string;
     }
   | {
-      step: "done";
+      step: "playing";
       startedAt: number;
       videoUrl: string;
       scale: number;
       playbackAt: number;
-      downloadUrl?: string;
+    }
+  | {
+      step: "done";
+      startedAt: number;
+      videoUrl: string;
+      scale: number;
+      playbackAt: number | null;
+      downloadUrl: string;
     };
 
 type RenderAction =
   | { type: "start" }
-  | { type: "ready"; videoUrl: string; scale: number }
+  | { type: "stream"; videoUrl: string; scale: number }
   | { type: "play" }
-  | { type: "error" }
-  | { type: "buffered"; downloadUrl: string };
+  | { type: "finish"; downloadUrl: string }
+  | { type: "error"; error?: string };
+
+const INITIAL_RENDER_STATE: RenderState = { step: "idle", error: null };
 
 function renderReducer(state: RenderState, action: RenderAction): RenderState {
   switch (action.type) {
     case "start":
-      return { step: "started", startedAt: Date.now() };
-    case "ready":
-      if (state.step !== "started") return state;
+      return { step: "starting", startedAt: Date.now() };
+    case "stream":
+      if (state.step !== "starting") return state;
       return {
-        step: "ready",
+        step: "streaming",
         startedAt: state.startedAt,
         videoUrl: action.videoUrl,
         scale: action.scale,
       };
     case "play":
-      if (state.step !== "ready") return state;
-      return { ...state, step: "done", playbackAt: Date.now() };
-    case "buffered":
-      if (state.step === "ready" || state.step === "done")
+      if (state.step === "streaming")
+        return { ...state, step: "playing", playbackAt: Date.now() };
+      if (state.step === "done" && state.playbackAt === null)
+        return { ...state, playbackAt: Date.now() };
+      return state;
+    case "finish":
+      if (state.step === "streaming")
+        return {
+          ...state,
+          step: "done",
+          playbackAt: null,
+          downloadUrl: action.downloadUrl,
+        };
+      if (state.step === "playing")
+        return { ...state, step: "done", downloadUrl: action.downloadUrl };
+      if (state.step === "done")
         return { ...state, downloadUrl: action.downloadUrl };
       return state;
     case "error":
-      return { step: "idle" };
+      return { step: "idle", error: action.error ?? "Render failed" };
   }
 }
 
@@ -296,25 +316,32 @@ export default function EffiePreviewPage() {
   const actionData = useActionData<typeof action>();
   const navigation = useNavigation();
 
-  const [render, dispatch] = useReducer(renderReducer, { step: "idle" });
+  const [render, dispatch] = useReducer(renderReducer, INITIAL_RENDER_STATE);
   const [elapsedToPlay, setElapsedToPlay] = useState<number | null>(null);
   const prevDownloadUrlRef = useRef<string | null>(null);
 
   // Update elapsed time while rendering is in progress
   useEffect(() => {
-    if (render.step === "idle") {
-      setElapsedToPlay(null);
-      return;
-    }
-    if (render.step === "done") {
-      setElapsedToPlay((render.playbackAt - render.startedAt) / 1000);
-      return;
+    switch (render.step) {
+      case "idle":
+        setElapsedToPlay(null);
+        return;
+      case "playing":
+        setElapsedToPlay((render.playbackAt - render.startedAt) / 1000);
+        return;
+      case "done":
+        if (render.playbackAt !== null)
+          setElapsedToPlay((render.playbackAt - render.startedAt) / 1000);
+        return;
+      case "starting":
+      case "streaming": {
+        const update = () =>
+          setElapsedToPlay((Date.now() - render.startedAt) / 1000);
+        update();
+        const interval = setInterval(update, 100);
+        return () => clearInterval(interval);
+      }
     }
-    const update = () =>
-      setElapsedToPlay((Date.now() - render.startedAt) / 1000);
-    update();
-    const interval = setInterval(update, 100);
-    return () => clearInterval(interval);
   }, [render]);
 
   // Connect to SSE progress when render action completes
@@ -328,15 +355,23 @@ export default function EffiePreviewPage() {
     eventSource.addEventListener("ready", (e) => {
       try {
         const { videoUrl } = JSON.parse(e.data);
-        dispatch({ type: "ready", videoUrl, scale: renderScale });
+        dispatch({ type: "stream", videoUrl, scale: renderScale });
       } catch {
         // Ignore parse errors
       }
       eventSource.close();
     });
 
-    eventSource.addEventListener("error", () => {
-      dispatch({ type: "error" });
+    eventSource.addEventListener("error", (e) => {
+      let error = "Render failed";
+      if (e instanceof MessageEvent) {
+        try {
+          error = JSON.parse(e.data).message;
+        } catch {
+          // use default
+        }
+      }
+      dispatch({ type: "error", error });
       eventSource.close();
     });
 
@@ -406,7 +441,7 @@ export default function EffiePreviewPage() {
     }
     const downloadUrl = URL.createObjectURL(blob);
     prevDownloadUrlRef.current = downloadUrl;
-    dispatch({ type: "buffered", downloadUrl });
+    dispatch({ type: "finish", downloadUrl });
   };
 
   const formatSourceUrl = (url: string, maxLen = 70) => {
@@ -485,7 +520,13 @@ export default function EffiePreviewPage() {
           <EffieCoverPreview
             cover={effie.cover}
             resolution={coverResolution}
-            video={"videoUrl" in render ? render.videoUrl : null}
+            video={
+              render.step === "streaming" ||
+              render.step === "playing" ||
+              render.step === "done"
+                ? render.videoUrl
+                : null
+            }
             onPlay={handleVideoPlay}
             onFullyBuffered={handleFullyBuffered}
             style={{
@@ -620,9 +661,12 @@ export default function EffiePreviewPage() {
                 issues={actionData.issues}
               />
             )}
+            {render.step === "idle" && render.error && (
+              <div style={{ color: "#E44444" }}>{render.error}</div>
+            )}
 
             {/* Render Progress */}
-            {(render.step === "started" || render.step === "ready") &&
+            {(render.step === "starting" || render.step === "streaming") &&
               elapsedToPlay !== null && (
                 <div style={{ color: "#4CAE4C" }}>
                   Rendering... {elapsedToPlay.toFixed(1)}s
@@ -630,41 +674,40 @@ export default function EffiePreviewPage() {
               )}
 
             {/* Render Success */}
-            {(render.step === "ready" || render.step === "done") &&
-              elapsedToPlay !== null && (
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "flex-start",
-                    gap: "1rem",
-                  }}
-                >
-                  {render.step === "done" && (
-                    <span style={{ color: "#4CAE4C" }}>
-                      Started playing after {elapsedToPlay.toFixed(1)}s (at{" "}
-                      {Math.round(render.scale * 100)}%)
-                    </span>
-                  )}
-                  {render.downloadUrl && (
-                    <a
-                      href={render.downloadUrl}
-                      download={`${effieId}-${width}x${height}.mp4`}
-                      style={{
-                        padding: "0.4rem 0.75rem",
-                        backgroundColor: "#fff",
-                        color: "#4CAE4C",
-                        border: "1px solid #4CAE4C",
-                        borderRadius: 4,
-                        fontSize: "14px",
-                        textDecoration: "none",
-                      }}
-                    >
-                      Download video
-                    </a>
-                  )}
-                </div>
-              )}
+            {(render.step === "playing" || render.step === "done") && (
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "flex-start",
+                  gap: "1rem",
+                }}
+              >
+                {render.playbackAt !== null && elapsedToPlay !== null && (
+                  <span style={{ color: "#4CAE4C" }}>
+                    Started playing after {elapsedToPlay.toFixed(1)}s (at{" "}
+                    {Math.round(render.scale * 100)}%)
+                  </span>
+                )}
+                {render.step === "done" && (
+                  <a
+                    href={render.downloadUrl}
+                    download={`${effieId}-${width}x${height}.mp4`}
+                    style={{
+                      padding: "0.4rem 0.75rem",
+                      backgroundColor: "#fff",
+                      color: "#4CAE4C",
+                      border: "1px solid #4CAE4C",
+                      borderRadius: 4,
+                      fontSize: "14px",
+                      textDecoration: "none",
+                    }}
+                  >
+                    Download video
+                  </a>
+                )}
+              </div>
+            )}
 
             {/* Downloading Status */}
             {warmupDownloadingItems.length > 0 && (

package/template/package.json

@@ -3,7 +3,9 @@
   "type": "module",
   "sideEffects": false,
   "scripts": {
-    "build": "react-router build",
+    "build": "run-s build:app build:satori",
+    "build:app": "react-router build",
+    "build:satori": "vite build -c vite.config.satori.ts",
     "dev": "run-p dev:*",
     "dev:app": "react-router dev",
     "dev:ffs": "ffs",
@@ -11,15 +13,16 @@
     "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {
-    "@effing/annie": "^0.15.0",
-    "@effing/annie-player": "^0.15.0",
-    "@effing/effie": "^0.15.0",
-    "@effing/effie-preview": "^0.15.0",
-    "@effing/ffs": "^0.15.0",
-    "@effing/satori": "^0.15.0",
+    "@effing/annie": "^0.16.0",
+    "@effing/annie-player": "^0.16.0",
+    "@effing/effie": "^0.16.0",
+    "@effing/effie-preview": "^0.16.0",
+    "@effing/ffs": "^0.16.0",
+    "@effing/satori": "^0.16.0",
     "@resvg/resvg-js": "^2.6.2",
-    "@effing/serde": "^0.15.0",
-    "@effing/tween": "^0.15.0",
+    "@effing/serde": "^0.16.0",
+    "satori": "^0.19.2",
+    "@effing/tween": "^0.16.0",
     "@react-router/node": "^7.0.0",
     "@react-router/serve": "^7.0.0",
     "cross-env": "^7.0.3",
@@ -38,7 +41,7 @@
     "@types/react-dom": "^19.0.0",
     "npm-run-all": "^4.1.5",
     "typescript": "^5.9.3",
-    "vite": "^6.0.0",
+    "vite": "^7.0.0",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "engines": {

package/template/vite.config.satori.ts

@@ -0,0 +1,34 @@
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+
+const workerEntry = fileURLToPath(import.meta.resolve("@effing/satori/worker"));
+
+// Second Vite build that bundles the satori worker into a single `build/satori.mjs`.
+// Referenced by `app/pool.server.ts` as the worker file in production.
+//
+// Why bundle: The satori pool spawns worker_threads via bare `import()`. Each
+// worker thread independently resolves and parses the full dependency tree on
+// startup (no shared module cache with the main thread). Bundling all pure-JS
+// deps into one file avoids that overhead.
+//
+// Why `@resvg/resvg-js` stays external: It uses a CJS runtime shim to load
+// platform-specific `.node` native binaries — can't be statically bundled.
+//
+// Why `emptyOutDir: false`: The main app build already placed files in `build/`.
+export default defineConfig({
+  build: {
+    ssr: true,
+    outDir: "build",
+    rollupOptions: {
+      input: workerEntry,
+      external: [/\.node$/, "@resvg/resvg-js"],
+      output: {
+        entryFileNames: "satori.mjs",
+      },
+    },
+    emptyOutDir: false,
+  },
+  ssr: {
+    noExternal: true,
+  },
+});

package/template/vite.config.ts

@@ -5,10 +5,6 @@ import tsconfigPaths from "vite-tsconfig-paths";
 export default defineConfig({
   server: { port: 3839 }, // 3839 = 0xEFF, how effing cool is that? ʘ‿ʘ
   plugins: [reactRouter(), tsconfigPaths()],
-  ssr: {
-    noExternal: ["yoga-wasm-web", "yoga-wasm-web/asm", "satori", "emoji-regex"],
-    external: ["@resvg/resvg-js"],
-  },
   optimizeDeps: {
     exclude: ["@resvg/resvg-js"],
   },