@effing/create 0.17.0 → 0.18.0

package/package.json

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

package/template/app/annies/text-typewriter.annie.tsx

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { interBold, loadFonts } from "~/fonts.server";
 import { tween } from "@effing/tween";
-import { satoriPool } from "~/pool.server";
+import { createCanvas, renderReactElement } from "@effing/canvas";
 import type { AnnieRendererArgs } from ".";
 
 export const propsSchema = z.object({
@@ -50,7 +50,10 @@ export async function* renderer({
   yield* tween(typingFrameCount, async ({ lower: p }) => {
     const charsShown = Math.floor(p * text.length);
     const textToShow = text.slice(0, charsShown);
-    return satoriPool.renderToPng(
+    const canvas = createCanvas(width, height);
+    const ctx = canvas.getContext("2d");
+    await renderReactElement(
+      ctx,
       <TextTypewriterOverlay
         text={textToShow}
         fontSize={fontSize}
@@ -60,14 +63,18 @@ export async function* renderer({
         verticalAlignment={verticalAlignment}
         cursorShown={true}
       />,
-      { width, height, fonts },
+      { fonts },
     );
+    return canvas.encode("png");
   });
 
   // Blinking cursor phase
   yield* tween(blinkingFrameCount, async ({ lower: p }) => {
     const cursorShown = Math.floor(p * 5) % 2 === 1;
-    return satoriPool.renderToPng(
+    const canvas = createCanvas(width, height);
+    const ctx = canvas.getContext("2d");
+    await renderReactElement(
+      ctx,
       <TextTypewriterOverlay
         text={text}
         fontSize={fontSize}
@@ -77,8 +84,9 @@ export async function* renderer({
         verticalAlignment={verticalAlignment}
         cursorShown={cursorShown}
       />,
-      { width, height, fonts },
+      { fonts },
     );
+    return canvas.encode("png");
   });
 }
 

package/template/app/effies/simple-slideshow.effie.tsx

@@ -1,6 +1,6 @@
 import { z } from "zod";
 import { effieData, effieSegment } from "@effing/effie";
-import { annieUrl, pngUrlFromSatori } from "~/urls.server";
+import { annieUrl, pngUrlFromReactElement } from "~/urls.server";
 import type { EffieRendererArgs } from ".";
 import { loadFonts, interSemiBold } from "~/fonts.server";
 import type { PhotoZoomProps } from "~/annies/photo-zoom.annie";
@@ -49,7 +49,7 @@ export async function renderer({
   const fonts = await loadFonts([interSemiBold]);
 
   // Generate cover from first slide
-  const cover = await pngUrlFromSatori(
+  const cover = await pngUrlFromReactElement(
     <div
       style={{
         width,

package/template/app/fonts.server.ts

@@ -1,4 +1,4 @@
-import type { FontData } from "@effing/satori";
+import type { FontData } from "@effing/canvas";
 
 export type { FontData };
 

package/template/app/routes/an.$segment.tsx

@@ -23,10 +23,12 @@ export async function loader({ params, request }: Route.LoaderArgs) {
   const width = parseInt(url.searchParams.get("w") || "1080", 10);
   const height = parseInt(url.searchParams.get("h") || "1080", 10);
 
+  const noCache = url.searchParams.get("cache") === "no";
   const frames = renderer({ props, width, height });
 
   return annieResponse(frames, {
     signal: request.signal,
     filename: annieId,
+    ...(noCache && { cacheControl: "no-store" }),
   });
 }

package/template/app/routes/pan.$annieId.tsx

@@ -46,7 +46,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 
   return {
     annieId: params.annieId,
-    annieUrl: url,
+    annieUrl: `${url}&cache=no`,
     width,
     height,
   };

package/template/app/urls.server.ts

@@ -1,18 +1,26 @@
+import type { ReactNode } from "react";
 import { effieWebUrl } from "@effing/effie";
-import { pngFromSatori } from "@effing/satori";
-import type { PngFromSatoriOptions } from "@effing/satori";
+import { createCanvas, renderReactElement } from "@effing/canvas";
+import type { FontData } from "@effing/canvas";
 import { serialize } from "@effing/serde";
 
-export type { FontData, PngFromSatoriOptions } from "@effing/satori";
+export type { FontData } from "@effing/canvas";
 
 /**
- * Generate a data URL for a PNG image from a React/JSX template using Satori
+ * Generate a data URL for a PNG image from a React/JSX element
  */
-export async function pngUrlFromSatori(
-  template: Parameters<typeof pngFromSatori>[0],
-  options: PngFromSatoriOptions,
+export async function pngUrlFromReactElement(
+  element: ReactNode,
+  {
+    width,
+    height,
+    fonts,
+  }: { width: number; height: number; fonts: FontData[] },
 ) {
-  const buffer = await pngFromSatori(template, options);
+  const canvas = createCanvas(width, height);
+  const ctx = canvas.getContext("2d");
+  await renderReactElement(ctx, element, { fonts });
+  const buffer = await canvas.encode("png");
   return effieWebUrl(`data:image/png;base64,${buffer.toString("base64")}`);
 }
 

package/template/package.json

@@ -3,9 +3,7 @@
   "type": "module",
   "sideEffects": false,
   "scripts": {
-    "build": "run-s build:app build:satori",
-    "build:app": "react-router build",
-    "build:satori": "vite build -c vite.config.satori.ts",
+    "build": "react-router build",
     "dev": "run-p dev:*",
     "dev:app": "react-router dev",
     "dev:ffs": "ffs",
@@ -13,16 +11,14 @@
     "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {
-    "@effing/annie": "^0.17.0",
-    "@effing/annie-player": "^0.17.0",
-    "@effing/effie": "^0.17.0",
-    "@effing/effie-preview": "^0.17.0",
-    "@effing/ffs": "^0.17.0",
-    "@effing/satori": "^0.17.0",
-    "@resvg/resvg-js": "^2.6.2",
-    "@effing/serde": "^0.17.0",
-    "satori": "^0.19.2",
-    "@effing/tween": "^0.17.0",
+    "@effing/annie": "^0.18.0",
+    "@effing/annie-player": "^0.18.0",
+    "@effing/effie": "^0.18.0",
+    "@effing/effie-preview": "^0.18.0",
+    "@effing/ffs": "^0.18.0",
+    "@effing/canvas": "^0.18.0",
+    "@effing/serde": "^0.18.0",
+    "@effing/tween": "^0.18.0",
     "@react-router/node": "^7.0.0",
     "@react-router/serve": "^7.0.0",
     "cross-env": "^7.0.3",

package/template/vite.config.ts

@@ -6,6 +6,9 @@ export default defineConfig({
   server: { port: 3839 }, // 3839 = 0xEFF, how effing cool is that? ʘ‿ʘ
   plugins: [reactRouter(), tsconfigPaths()],
   optimizeDeps: {
-    exclude: ["@resvg/resvg-js"],
+    exclude: ["@effing/canvas"],
+  },
+  ssr: {
+    external: ["@effing/canvas"],
   },
 });

package/template/app/pool.server.ts

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

package/template/vite.config.satori.ts

@@ -1,34 +0,0 @@
-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,
-  },
-});