@effing/create 0.14.1 → 0.15.1

package/dist/index.js

@@ -61,8 +61,8 @@ Creating a new Effing project in ${root}...
   await fs.writeFile(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
   console.log("Done! To get started:\n");
   console.log(`  cd ${projectName}`);
-  console.log("  npm install");
-  console.log("  npm run dev\n");
+  console.log("  npm install    # or: pnpm install");
+  console.log("  npm run dev    # or: pnpm run dev\n");
   console.log("Then open http://localhost:3839 to see your project.\n");
 }
 main().catch((err) => {

package/package.json

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

package/template/Dockerfile

@@ -0,0 +1,38 @@
+FROM node:22-alpine AS base
+RUN corepack enable
+WORKDIR /app
+
+# Stage: install all deps and build
+FROM base AS build
+COPY package.json pnpm-lock.yaml* package-lock.json* ./
+RUN if [ -f pnpm-lock.yaml ]; then \
+      pnpm install --frozen-lockfile; \
+    elif [ -f package-lock.json ]; then \
+      npm ci; \
+    else \
+      npm install; \
+    fi
+COPY . .
+RUN npm run build
+
+# Stage: production deps only
+FROM base AS prod-deps
+COPY package.json pnpm-lock.yaml* package-lock.json* ./
+RUN if [ -f pnpm-lock.yaml ]; then \
+      pnpm install --frozen-lockfile --prod; \
+    elif [ -f package-lock.json ]; then \
+      npm ci --omit=dev; \
+    else \
+      npm install --omit=dev; \
+    fi
+
+# Stage: final runtime image
+FROM node:22-alpine
+WORKDIR /app
+ENV NODE_ENV=production
+ENV PORT=8080
+COPY --from=prod-deps /app/node_modules ./node_modules
+COPY --from=build /app/package.json ./package.json
+COPY --from=build /app/build ./build
+EXPOSE $PORT
+CMD ["./node_modules/.bin/react-router-serve", "./build/server/index.js"]

package/template/_DOT_dockerignore

@@ -0,0 +1,6 @@
+node_modules
+build
+.react-router
+.git
+.env
+.env.*

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

@@ -5,7 +5,7 @@ import {
   useNavigation,
   type ShouldRevalidateFunctionArgs,
 } from "react-router";
-import { useEffect, useReducer, useState } from "react";
+import { useEffect, useReducer, useRef, useState } from "react";
 import invariant from "tiny-invariant";
 import { serialize } from "@effing/serde";
 import {
@@ -57,40 +57,72 @@ type ActionResult =
   | { intent: "reload"; success: false; error: string };
 
 type RenderState =
-  | { step: "idle" }
-  | { step: "started"; startedAt: number }
-  | { step: "ready"; startedAt: number; videoUrl: string; scale: number }
+  | { step: "idle"; error: string | null }
+  | { step: "starting"; startedAt: number }
   | {
-      step: "done";
+      step: "streaming";
+      startedAt: number;
+      videoUrl: string;
+      scale: number;
+    }
+  | {
+      step: "playing";
       startedAt: number;
       videoUrl: string;
       scale: number;
       playbackAt: number;
+    }
+  | {
+      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: "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() };
+      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" };
   }
 }
 
@@ -284,24 +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
@@ -315,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();
     });
 
@@ -381,6 +429,19 @@ export default function EffiePreviewPage() {
 
   const handleRenderSubmit = () => {
     dispatch({ type: "start" });
+    if (prevDownloadUrlRef.current) {
+      URL.revokeObjectURL(prevDownloadUrlRef.current);
+      prevDownloadUrlRef.current = null;
+    }
+  };
+
+  const handleFullyBuffered = (blob: Blob) => {
+    if (prevDownloadUrlRef.current) {
+      URL.revokeObjectURL(prevDownloadUrlRef.current);
+    }
+    const downloadUrl = URL.createObjectURL(blob);
+    prevDownloadUrlRef.current = downloadUrl;
+    dispatch({ type: "finish", downloadUrl });
   };
 
   const formatSourceUrl = (url: string, maxLen = 70) => {
@@ -459,8 +520,15 @@ 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={{
               border: "1px solid black",
               backgroundColor: "#eee",
@@ -593,12 +661,51 @@ export default function EffiePreviewPage() {
                 issues={actionData.issues}
               />
             )}
+            {render.step === "idle" && render.error && (
+              <div style={{ color: "#E44444" }}>{render.error}</div>
+            )}
+
+            {/* Render Progress */}
+            {(render.step === "starting" || render.step === "streaming") &&
+              elapsedToPlay !== null && (
+                <div style={{ color: "#4CAE4C" }}>
+                  Rendering... {elapsedToPlay.toFixed(1)}s
+                </div>
+              )}
 
             {/* Render Success */}
-            {render.step === "done" && elapsedToPlay !== null && (
-              <div style={{ color: "#4CAE4C" }}>
-                Started playing after {elapsedToPlay.toFixed(1)}s (at{" "}
-                {Math.round(render.scale * 100)}%)
+            {(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>
             )}
 

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.14.1",
-    "@effing/annie-player": "^0.14.1",
-    "@effing/effie": "^0.14.1",
-    "@effing/effie-preview": "^0.14.1",
-    "@effing/ffs": "^0.14.1",
-    "@effing/satori": "^0.14.1",
+    "@effing/annie": "^0.15.1",
+    "@effing/annie-player": "^0.15.1",
+    "@effing/effie": "^0.15.1",
+    "@effing/effie-preview": "^0.15.1",
+    "@effing/ffs": "^0.15.1",
+    "@effing/satori": "^0.15.1",
     "@resvg/resvg-js": "^2.6.2",
-    "@effing/serde": "^0.14.1",
-    "@effing/tween": "^0.14.1",
+    "@effing/serde": "^0.15.1",
+    "satori": "^0.19.2",
+    "@effing/tween": "^0.15.1",
     "@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

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