headless rendering (#4)

This PR introduces the renderer package, which makes it possible to render videos via a function call (using a headless browser).

commitlint.config.js

@@ -14,6 +14,7 @@ module.exports = {
         'examples',
         'legacy',
         'player',
+        'renderer',
         'ui',
         'vite-plugin',
       ],

package.json

@@ -38,6 +38,7 @@
   "devDependencies": {
     "@commitlint/cli": "^18.4.2",
     "@commitlint/config-conventional": "^18.4.2",
+    "@types/node": "~18.14.0",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
@@ -49,13 +50,15 @@
     "prettier": "^3.1.0",
     "prettier-plugin-organize-imports": "^3.2.4",
     "typescript": "^5.2.2",
-    "vite": "^4.5.0"
+    "vite": "^4.5.2"
   },
   "lint-staged": {
     "*.{ts,tsx}": "eslint --fix",
     "*.{js,jsx,ts,tsx,md,scss}": "prettier --write"
   },
   "dependencies": {
+    "@wooorm/starry-night": "^3.3.0",
+    "shiki": "^1.1.7",
     "uuid": "^9.0.1"
   }
 }

packages/2d/src/editor/Provider.tsx

@@ -65,13 +65,12 @@ export function Provider({children}: {children?: ComponentChildren}) {
 
   state.scene.value = currentScene as Scene2D;
 
-  useSignalEffect(
-    () =>
-      state.scene.value?.onRenderLifecycle.subscribe(([event]) => {
-        if (event === SceneRenderEvent.AfterRender) {
-          state.afterRender.value++;
-        }
-      }),
+  useSignalEffect(() =>
+    state.scene.value?.onRenderLifecycle.subscribe(([event]) => {
+      if (event === SceneRenderEvent.AfterRender) {
+        state.afterRender.value++;
+      }
+    }),
   );
 
   useSignalEffect(() => {

packages/2d/src/lib/components/types.ts

@@ -14,11 +14,12 @@ export type ComponentChild =
 export type ComponentChildren = ComponentChild | ComponentChild[];
 export type NodeChildren = Node | Node[];
 
-export type PropsOf<T> = T extends NodeConstructor<infer P>
-  ? P
-  : T extends FunctionComponent<infer P>
+export type PropsOf<T> =
+  T extends NodeConstructor<infer P>
     ? P
-    : never;
+    : T extends FunctionComponent<infer P>
+      ? P
+      : never;
 
 export interface JSXProps {
   children?: ComponentChildren;

packages/core/src/scenes/Scene.ts

@@ -90,9 +90,8 @@ export interface SceneDescriptionReload<T = unknown> {
   stack?: string;
 }
 
-export type DescriptionOf<TScene> = TScene extends Scene<infer TConfig>
-  ? SceneDescription<TConfig>
-  : never;
+export type DescriptionOf<TScene> =
+  TScene extends Scene<infer TConfig> ? SceneDescription<TConfig> : never;
 
 /**
  * Describes cached information about the timing of a scene.

packages/create/template-2d-ts/package.json

@@ -15,6 +15,6 @@
     "@motion-canvas/ui": "*",
     "@motion-canvas/vite-plugin": "*",
     "typescript": "^5.2.2",
-    "vite": "^4.0.0"
+    "vite": "^5.0"
   }
 }

packages/ffmpeg/package.json

@@ -30,6 +30,6 @@
     "fluent-ffmpeg": "^2.1.2",
     "@motion-canvas/core": "^3.14.1",
     "@motion-canvas/vite-plugin": "^3.14.1",
-    "vite": "4.x"
+    "vite": "^4.5"
   }
 }

packages/renderer/client/motion-canvas.d.ts

@@ -0,0 +1 @@
+/// <reference types="@motion-canvas/core/project" />

packages/renderer/client/render.ts

@@ -0,0 +1,20 @@
+import type {Project} from '@motion-canvas/core';
+import {Renderer} from '@motion-canvas/core';
+
+declare global {
+  interface Window {
+    onRenderComplete: () => void;
+  }
+}
+
+export const render = async (project: Project) => {
+  try {
+    const renderer = new Renderer(project);
+    await renderer.render({
+      ...project.meta.getFullRenderingSettings(),
+      name: project.name,
+    });
+  } finally {
+    window.onRenderComplete();
+  }
+};

packages/renderer/client/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "outDir": "../dist/client",
+    "strict": true,
+    "module": "es2020",
+    "target": "es2020",
+    "moduleResolution": "node",
+    "declaration": true,
+    "inlineSourceMap": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["*"]
+}

packages/renderer/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@motion-canvas/renderer",
+  "version": "3.14.1",
+  "description": "A headless renderer for Motion Canvas",
+  "main": "dist/index.js",
+  "author": "motion-canvas",
+  "homepage": "https://motioncanvas.io/",
+  "bugs": "https://github.com/motion-canvas/motion-canvas/issues",
+  "license": "MIT",
+  "scripts": {
+    "build": "npm run client:build && npm run server:build",
+    "client:build": "tsc --project client/tsconfig.json",
+    "client:dev": "tsc -w --project client/tsconfig.json",
+    "server:build": "tsc --project server/tsconfig.json",
+    "server:dev": "tsc -w --project server/tsconfig.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "devDependencies": {
+    "@motion-canvas/core": "*",
+    "puppeteer": "^22.3.0"
+  }
+}

packages/renderer/renderer.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Motion Canvas Renderer</title>
+  </head>
+  <body>
+    <h1>RENDERING!</h1>
+    <script type="module" src="{{source}}"></script>
+  </body>
+</html>

packages/renderer/server/index.ts

@@ -0,0 +1,2 @@
+export * from './main';
+export * from './plugin';

packages/renderer/server/main.ts

@@ -0,0 +1,35 @@
+import * as path from 'path';
+import puppeteer from 'puppeteer';
+import {createServer} from 'vite';
+
+export const renderVideo = async (configFile: string) => {
+  console.log('Rendering...');
+
+  const resolvedConfigPath = path.resolve(process.cwd(), configFile);
+
+  const [browser, server] = await Promise.all([
+    puppeteer.launch({headless: true}),
+    createServer({
+      configFile: resolvedConfigPath,
+      server: {
+        port: 9000,
+      },
+    }).then(server => server.listen()),
+  ]);
+
+  const page = await browser.newPage();
+  if (!server.httpServer) {
+    throw new Error('HTTP server is not initialized');
+  }
+  const address = server.httpServer.address();
+  const port = address && typeof address === 'object' ? address.port : null;
+  if (port === null) {
+    throw new Error('Server address is null');
+  }
+
+  await page.goto(`http://localhost:${port}/render`);
+  await page.exposeFunction('onRenderComplete', async () => {
+    await Promise.all([browser.close(), server.close()]);
+    console.log('Rendering complete.');
+  });
+};

packages/renderer/server/motion-canvas.d.ts

@@ -0,0 +1 @@
+/// <reference types="@motion-canvas/core/project" />

packages/renderer/server/plugin.ts

@@ -0,0 +1,34 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import {Plugin} from 'vite';
+
+const RendererPath = path.resolve(__dirname, '../renderer.html');
+const Content = fs.readFileSync(RendererPath, 'utf-8');
+const HtmlParts = Content.toString().split('{{source}}');
+
+function createHtml(src: string) {
+  return HtmlParts[0] + src + HtmlParts[1];
+}
+
+export function rendererPlugin(): Plugin {
+  return {
+    name: 'motion-canvas-renderer-plugin',
+
+    async load(id) {
+      if (id.startsWith('\x00virtual:renderer')) {
+        return `\
+            import {render} from '@motion-canvas/renderer/client/render';
+            import project from './src/project.ts?project';
+            render(project);
+            `;
+      }
+    },
+
+    configureServer(server) {
+      server.middlewares.use('/render', (_req, res) => {
+        res.setHeader('Content-Type', 'text/html');
+        res.end(createHtml(`/@id/__x00__virtual:renderer`));
+      });
+    },
+  };
+}

packages/renderer/server/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "outDir": "../dist",
+    "strict": true,
+    "module": "CommonJS",
+    "target": "es2020",
+    "moduleResolution": "node",
+    "declaration": true,
+    "inlineSourceMap": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["*", "../index.ts", "../main.ts", "../motion-canvas.d.ts"]
+}

packages/template/package.json

@@ -8,11 +8,13 @@
   "main": "src/project.ts",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build"
+    "build": "tsc && vite build",
+    "render": "tsc && node dist/renderScript.mjs"
   },
   "dependencies": {
     "@motion-canvas/core": "*",
     "@motion-canvas/2d": "*",
+    "@motion-canvas/renderer": "*",
     "@motion-canvas/ffmpeg": "*"
   },
   "devDependencies": {

packages/template/src/renderScript.ts

@@ -0,0 +1,3 @@
+import {renderVideo} from '@motion-canvas/renderer';
+
+renderVideo('./vite.config.ts');

packages/template/tsconfig.json

@@ -1,7 +1,10 @@
 {
   "extends": "@motion-canvas/2d/tsconfig.project.json",
   "compilerOptions": {
-    "types": ["node"]
+    "types": ["node"],
+    "noEmit": false,
+    "outDir": "dist",
+    "module": "CommonJS"
   },
   "include": ["src"]
 }

packages/template/vite.config.ts

@@ -1,5 +1,6 @@
 import ffmpeg from '@motion-canvas/ffmpeg';
 import markdown from '@motion-canvas/internal/vite/markdown-literals';
+import {rendererPlugin} from '@motion-canvas/renderer';
 import preact from '@preact/preset-vite';
 import {defineConfig} from 'vite';
 import motionCanvas from '../vite-plugin/src/main';
@@ -24,6 +25,7 @@ export default defineConfig({
   },
   plugins: [
     markdown(),
+    rendererPlugin(),
     ffmpeg(),
     preact({
       include: [

packages/vite-plugin/package.json

@@ -19,12 +19,12 @@
     "lib"
   ],
   "peerDependencies": {
-    "vite": "4.x || 5.x"
+    "vite": "^4.5"
   },
   "devDependencies": {
     "@types/follow-redirects": "^1.14.1",
     "@types/mime-types": "^2.1.1",
-    "@types/node": "^18.14.0"
+    "@types/node": "~18.14.0"
   },
   "dependencies": {
     "fast-glob": "^3.3.1",

packages/vite-plugin/src/main.ts

@@ -117,12 +117,11 @@ export default ({
             .map(plugin => plugin[PLUGIN_OPTIONS]),
         );
         await Promise.all(
-          plugins.map(
-            plugin =>
-              plugin.config?.({
-                output: outputPath,
-                projects: projects.list,
-              }),
+          plugins.map(plugin =>
+            plugin.config?.({
+              output: outputPath,
+              projects: projects.list,
+            }),
           ),
         );
       },