[pull] main from remotion-dev:main

.claude/skills/web-renderer-test/SKILL.md

@@ -76,3 +76,4 @@ test('should render background-color', async () => {
 2. **Important**: Add the fixture to `packages/web-renderer/src/test/Root.tsx` to add a way to preview it.
 3. Add a new test in `packages/web-renderer/src/test`.
 4. Run `bunx vitest src/test/video.test.tsx` to execute the test.
+5. **Important**: Update `packages/docs/docs/client-side-rendering/limitations.mdx` to reflect the newly supported property.

.github/workflows/changelog.yml

@@ -2,6 +2,10 @@ on:
   release:
     types: [published]
   workflow_dispatch:
+    inputs:
+      tag:
+        description: 'Release tag to post (e.g. v4.0.422). Leave empty for latest.'
+        required: false
 name: Publish latest release
 
 jobs:
@@ -18,4 +22,4 @@ jobs:
           DISCORD_TOKEN: ${{ secrets.DISCORD_TOKEN }}
         run: |
           cd packages/discord-poster
-          bun post.ts
+          bun post.ts ${{ github.event.inputs.tag }}

.github/workflows/pullfrog.yml

@@ -0,0 +1,46 @@
+# PULLFROG ACTION — DO NOT EDIT EXCEPT WHERE INDICATED
+name: Pullfrog
+run-name: ${{ inputs.name || github.workflow }}
+on:
+  workflow_dispatch:
+    inputs:
+      prompt:
+        type: string
+        description: Agent prompt
+      name:
+        type: string
+        description: Run name
+
+permissions:
+  id-token: write
+  contents: write
+  pull-requests: write
+  issues: write
+  actions: read
+  checks: read
+
+jobs:
+  pullfrog:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 1
+      - name: Run agent
+        uses: pullfrog/pullfrog@v0
+        with:
+          prompt: ${{ inputs.prompt }}
+        env:
+          # add any additional keys your agent(s) need
+          # optionally, comment out any you won't use
+          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}
+          GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}
+          CURSOR_API_KEY: ${{ secrets.CURSOR_API_KEY }}
+          MISTRAL_API_KEY: ${{ secrets.MISTRAL_API_KEY }}
+          GROQ_API_KEY: ${{ secrets.GROQ_API_KEY }}
+          DEEPSEEK_API_KEY: ${{ secrets.DEEPSEEK_API_KEY }}
+          OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
+

packages/bundler/package.json

@@ -19,6 +19,8 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
+		"@rspack/core": "1.7.6",
+		"@rspack/plugin-react-refresh": "1.6.1",
 		"css-loader": "5.2.7",
 		"esbuild": "0.25.0",
 		"react-refresh": "0.9.0",

packages/bundler/src/bundle.ts

@@ -9,6 +9,7 @@ import webpack from 'webpack';
 import {copyDir} from './copy-dir';
 import {indexHtml} from './index-html';
 import {readRecursively} from './read-recursively';
+import {rspackConfig} from './rspack-config';
 import type {WebpackOverrideFn} from './webpack-config';
 import {webpackConfig} from './webpack-config';
 
@@ -52,6 +53,7 @@ export type MandatoryLegacyBundleOptions = {
 	onSymlinkDetected: (path: string) => void;
 	keyboardShortcutsEnabled: boolean;
 	askAIEnabled: boolean;
+	rspack: boolean;
 };
 
 export type LegacyBundleOptions = Partial<MandatoryLegacyBundleOptions>;
@@ -72,10 +74,10 @@ export const getConfig = ({
 	bufferStateDelayInMilliseconds: number | null;
 	experimentalClientSideRenderingEnabled: boolean;
 	maxTimelineTracks: number | null;
-	onProgress?: (progress: number) => void;
-	options?: LegacyBundleOptions;
+	onProgress: (progress: number) => void;
+	options: MandatoryLegacyBundleOptions;
 }) => {
-	return webpackConfig({
+	const configArgs = {
 		entry: path.join(
 			require.resolve('@remotion/studio/renderEntry'),
 			'..',
@@ -84,9 +86,9 @@ export const getConfig = ({
 		),
 		userDefinedComponent: entryPoint,
 		outDir,
-		environment: 'production',
+		environment: 'production' as const,
 		webpackOverride: options?.webpackOverride ?? ((f) => f),
-		onProgress: (p) => {
+		onProgress: (p: number) => {
 			onProgress?.(p);
 		},
 		enableCaching: options?.enableCaching ?? true,
@@ -97,7 +99,13 @@ export const getConfig = ({
 		poll: null,
 		experimentalClientSideRenderingEnabled,
 		askAIEnabled: options?.askAIEnabled ?? true,
-	});
+	};
+
+	if (options.rspack) {
+		return rspackConfig(configArgs);
+	}
+
+	return webpackConfig(configArgs);
 };
 
 type NewBundleOptions = {
@@ -229,20 +237,59 @@ export const internalBundle = async (
 			actualArgs.experimentalClientSideRenderingEnabled,
 	});
 
-	const output = (await promisified([config])) as
-		| webpack.MultiStats
-		| undefined;
-	if (isMainThread) {
-		process.chdir(currentCwd);
-	}
+	if (actualArgs.rspack) {
+		const {rspack: rspackFn} = require('@rspack/core');
+		const rspackCompiler = rspackFn(config);
+		const rspackOutput = await new Promise<{
+			toJson: (opts: unknown) => {
+				errors?: Array<{message: string; details: string}>;
+			};
+		}>((resolve, reject) => {
+			rspackCompiler.run(
+				(
+					err: Error | null,
+					stats: {
+						toJson: (opts: unknown) => {
+							errors?: Array<{message: string; details: string}>;
+						};
+					},
+				) => {
+					if (err) {
+						reject(err);
+						return;
+					}
+
+					rspackCompiler.close(() => {
+						resolve(stats);
+					});
+				},
+			);
+		});
 
-	if (!output) {
-		throw new Error('Expected webpack output');
-	}
+		if (isMainThread) {
+			process.chdir(currentCwd);
+		}
 
-	const {errors} = output.toJson();
-	if (errors !== undefined && errors.length > 0) {
-		throw new Error(errors[0].message + '\n' + errors[0].details);
+		const {errors} = rspackOutput.toJson({});
+		if (errors !== undefined && errors.length > 0) {
+			throw new Error(errors[0].message + '\n' + errors[0].details);
+		}
+	} else {
+		const output = (await promisified([config as webpack.Configuration])) as
+			| webpack.MultiStats
+			| undefined;
+		if (isMainThread) {
+			process.chdir(currentCwd);
+		}
+
+		if (!output) {
+			throw new Error('Expected webpack output');
+		}
+
+		const {errors} = output.toJson();
+		if (errors !== undefined && errors.length > 0) {
+			throw new Error(errors[0].message + '\n' + errors[0].details);
+		}
 	}
 
 	const publicPath = actualArgs?.publicPath ?? '/';
@@ -368,6 +415,7 @@ export async function bundle(...args: Arguments): Promise<string> {
 		renderDefaults: actualArgs.renderDefaults ?? null,
 		askAIEnabled: actualArgs.askAIEnabled ?? true,
 		keyboardShortcutsEnabled: actualArgs.keyboardShortcutsEnabled ?? true,
+		rspack: actualArgs.rspack ?? false,
 	});
 	return result;
 }

packages/bundler/src/define-plugin-definitions.ts

@@ -0,0 +1,21 @@
+export const getDefinePluginDefinitions = ({
+	maxTimelineTracks,
+	askAIEnabled,
+	keyboardShortcutsEnabled,
+	bufferStateDelayInMilliseconds,
+	experimentalClientSideRenderingEnabled,
+}: {
+	maxTimelineTracks: number | null;
+	askAIEnabled: boolean;
+	keyboardShortcutsEnabled: boolean;
+	bufferStateDelayInMilliseconds: number | null;
+	experimentalClientSideRenderingEnabled: boolean;
+}) => ({
+	'process.env.MAX_TIMELINE_TRACKS': maxTimelineTracks,
+	'process.env.ASK_AI_ENABLED': askAIEnabled,
+	'process.env.KEYBOARD_SHORTCUTS_ENABLED': keyboardShortcutsEnabled,
+	'process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS':
+		bufferStateDelayInMilliseconds,
+	'process.env.EXPERIMENTAL_CLIENT_SIDE_RENDERING_ENABLED':
+		experimentalClientSideRenderingEnabled,
+});

packages/bundler/src/index.ts

@@ -1,6 +1,7 @@
 import {findClosestFolderWithItem, getConfig, internalBundle} from './bundle';
 import {indexHtml} from './index-html';
 import {readRecursively} from './read-recursively';
+import {createRspackCompiler, rspackConfig} from './rspack-config';
 import {cacheExists, clearCache} from './webpack-cache';
 import {webpackConfig} from './webpack-config';
 import esbuild = require('esbuild');
@@ -9,6 +10,8 @@ import webpack = require('webpack');
 export const BundlerInternals = {
 	esbuild,
 	webpackConfig,
+	rspackConfig,
+	createRspackCompiler,
 	indexHtml,
 	cacheExists,
 	clearCache,