@effing/create 0.14.1 → 0.15.0

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.0",
   "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/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 {
@@ -59,20 +59,28 @@ type ActionResult =
 type RenderState =
   | { step: "idle" }
   | { step: "started"; startedAt: number }
-  | { step: "ready"; startedAt: number; videoUrl: string; scale: number }
+  | {
+      step: "ready";
+      startedAt: number;
+      videoUrl: string;
+      scale: number;
+      downloadUrl?: string;
+    }
   | {
       step: "done";
       startedAt: number;
       videoUrl: string;
       scale: number;
       playbackAt: number;
+      downloadUrl?: string;
     };
 
 type RenderAction =
   | { type: "start" }
   | { type: "ready"; videoUrl: string; scale: number }
   | { type: "play" }
-  | { type: "error" };
+  | { type: "error" }
+  | { type: "buffered"; downloadUrl: string };
 
 function renderReducer(state: RenderState, action: RenderAction): RenderState {
   switch (action.type) {
@@ -89,6 +97,10 @@ function renderReducer(state: RenderState, action: RenderAction): RenderState {
     case "play":
       if (state.step !== "ready") return state;
       return { ...state, step: "done", playbackAt: Date.now() };
+    case "buffered":
+      if (state.step === "ready" || state.step === "done")
+        return { ...state, downloadUrl: action.downloadUrl };
+      return state;
     case "error":
       return { step: "idle" };
   }
@@ -286,6 +298,7 @@ export default function EffiePreviewPage() {
 
   const [render, dispatch] = useReducer(renderReducer, { step: "idle" });
   const [elapsedToPlay, setElapsedToPlay] = useState<number | null>(null);
+  const prevDownloadUrlRef = useRef<string | null>(null);
 
   // Update elapsed time while rendering is in progress
   useEffect(() => {
@@ -381,6 +394,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: "buffered", downloadUrl });
   };
 
   const formatSourceUrl = (url: string, maxLen = 70) => {
@@ -461,6 +487,7 @@ export default function EffiePreviewPage() {
             resolution={coverResolution}
             video={"videoUrl" in render ? render.videoUrl : null}
             onPlay={handleVideoPlay}
+            onFullyBuffered={handleFullyBuffered}
             style={{
               border: "1px solid black",
               backgroundColor: "#eee",
@@ -594,13 +621,50 @@ export default function EffiePreviewPage() {
               />
             )}
 
+            {/* Render Progress */}
+            {(render.step === "started" || render.step === "ready") &&
+              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)}%)
-              </div>
-            )}
+            {(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>
+              )}
 
             {/* Downloading Status */}
             {warmupDownloadingItems.length > 0 && (

package/template/package.json

@@ -11,15 +11,15 @@
     "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.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",
     "@resvg/resvg-js": "^2.6.2",
-    "@effing/serde": "^0.14.1",
-    "@effing/tween": "^0.14.1",
+    "@effing/serde": "^0.15.0",
+    "@effing/tween": "^0.15.0",
     "@react-router/node": "^7.0.0",
     "@react-router/serve": "^7.0.0",
     "cross-env": "^7.0.3",

package/template/vite.config.ts

@@ -1,11 +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()],
+  plugins: [reactRouter(), tsconfigPaths()],
   ssr: {
     noExternal: ["yoga-wasm-web", "yoga-wasm-web/asm", "satori", "emoji-regex"],
     external: ["@resvg/resvg-js"],