@remotion/browser-bundler 4.0.529 → 4.0.530

package/dist/browser-bundler-worker.js

@@ -1417,4 +1417,4 @@ require(${JSON.stringify(Y)});
 module.hot.accept(${JSON.stringify(Y)}, () => {
   require(${JSON.stringify(Y)});
 });
-`}:{},onProgress:($)=>vB({type:"progress",...$}),configure:($)=>({context:NY(Q.rootDir),mode:"development",devtool:"inline-cheap-module-source-map",entry:{bundle:{asyncChunks:!1,import:J?[QG.entry,wD]:[Y]}},experiments:{buildHttp:{allowedUris:["https://esm.sh/",`${self.location.origin}/`],cacheLocation:!1,httpClient:kD({fetchImplementation:fetch})}},externals:Object.fromEntries([...Ug,...J?["react-refresh/runtime"]:[]].map((U)=>[U,`commonjs ${U}`])),module:{rules:[{parser:{worker:!1},test:/\.[cm]?[jt]sx?$/},...J?[{exclude:[/node_modules/,/__remotion_browser_bundler__/],test:/\.[jt]sx?$/,use:[{loader:"builtin:react-refresh-loader"}]}]:[],{test:/\.[jt]sx?$/,use:[{loader:"builtin:swc-loader",options:{env:{targets:"Chrome >= 111"},jsc:{parser:{syntax:"typescript",tsx:!0},transform:{react:{development:J,refresh:J,runtime:"automatic"}}}}}]}]},optimization:{emitOnErrors:!J,runtimeChunk:!1,splitChunks:!1},output:{chunkFilename:"[name].js",chunkFormat:"array-push",chunkLoading:"jsonp",filename:"bundle.js",path:"/dist",publicPath:"",hashFunction:"xxhash64",uniqueName:"remotion-browser-bundler",...J?{hotUpdateGlobal:WD}:{}},plugins:[...J?[PD({rspack:$,refreshRuntime:QG.runtime,refreshUtils:QG.utils}),new $.HotModuleReplacementPlugin,ID({rspack:$,bridgeName:mB})]:[],TD({rspack:$,development:J,external:["react","react-dom","remotion",...J?["react-refresh"]:[]],resolvedUrls:{},resolvedVersions:{...{react:"19.2.3","react-dom":"19.2.3",remotion:"4.0.529"},...X.dependencyVersions},resolvePackage:null}),new $.optimize.LimitChunkCountPlugin({maxChunks:1})],resolve:{extensions:[".tsx",".ts",".jsx",".js",".json"]}})}),hB=Q;let K=await C6.compile(Q);if(K.bundle===null)throw new ZG("Rspack compilation failed",K.errors);if(J&&(!K.hash||XG===null))throw Error("Rspack did not return a Fast Refresh build hash.");vB({type:"bundle",id:X.id,bundle:{code:K.bundle,warnings:K.warnings,fastRefresh:J&&K.hash&&XG!==null?{sessionId:XG,hash:K.hash,previousHash:_B,assets:K.assets.filter(($)=>$.name.includes(".hot-update."))}:null}}),_B=K.hash??null}catch(Q){vB({type:"error",id:X.id,error:DD(Q)})}})});
+`}:{},onProgress:($)=>vB({type:"progress",...$}),configure:($)=>({context:NY(Q.rootDir),mode:"development",devtool:"inline-cheap-module-source-map",entry:{bundle:{asyncChunks:!1,import:J?[QG.entry,wD]:[Y]}},experiments:{buildHttp:{allowedUris:["https://esm.sh/",`${self.location.origin}/`],cacheLocation:!1,httpClient:kD({fetchImplementation:fetch})}},externals:Object.fromEntries([...Ug,...J?["react-refresh/runtime"]:[]].map((U)=>[U,`commonjs ${U}`])),module:{rules:[{parser:{worker:!1},test:/\.[cm]?[jt]sx?$/},...J?[{exclude:[/node_modules/,/__remotion_browser_bundler__/],test:/\.[jt]sx?$/,use:[{loader:"builtin:react-refresh-loader"}]}]:[],{test:/\.[jt]sx?$/,use:[{loader:"builtin:swc-loader",options:{env:{targets:"Chrome >= 111"},jsc:{parser:{syntax:"typescript",tsx:!0},transform:{react:{development:J,refresh:J,runtime:"automatic"}}}}}]}]},optimization:{emitOnErrors:!J,runtimeChunk:!1,splitChunks:!1},output:{chunkFilename:"[name].js",chunkFormat:"array-push",chunkLoading:"jsonp",filename:"bundle.js",path:"/dist",publicPath:"",hashFunction:"xxhash64",uniqueName:"remotion-browser-bundler",...J?{hotUpdateGlobal:WD}:{}},plugins:[...J?[PD({rspack:$,refreshRuntime:QG.runtime,refreshUtils:QG.utils}),new $.HotModuleReplacementPlugin,ID({rspack:$,bridgeName:mB})]:[],TD({rspack:$,development:J,external:["react","react-dom","remotion",...J?["react-refresh"]:[]],resolvedUrls:{},resolvedVersions:{...{react:"19.2.3","react-dom":"19.2.3",remotion:"4.0.530"},...X.dependencyVersions},resolvePackage:null}),new $.optimize.LimitChunkCountPlugin({maxChunks:1})],resolve:{extensions:[".tsx",".ts",".jsx",".js",".json"]}})}),hB=Q;let K=await C6.compile(Q);if(K.bundle===null)throw new ZG("Rspack compilation failed",K.errors);if(J&&(!K.hash||XG===null))throw Error("Rspack did not return a Fast Refresh build hash.");vB({type:"bundle",id:X.id,bundle:{code:K.bundle,warnings:K.warnings,fastRefresh:J&&K.hash&&XG!==null?{sessionId:XG,hash:K.hash,previousHash:_B,assets:K.assets.filter(($)=>$.name.includes(".hot-update."))}:null}}),_B=K.hash??null}catch(Q){vB({type:"error",id:X.id,error:DD(Q)})}})});

package/dist/browser-module-scope.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-export declare const createBrowserModuleScope: (additionalModules: ReadonlyMap<string, unknown> | null) => {
+export declare const createBrowserModuleScope: ({ additionalModules, addSourceLocations, }: {
+    additionalModules: ReadonlyMap<string, unknown> | null;
+    addSourceLocations: boolean;
+}) => {
     resolveModule: (id: string) => unknown;
     beginUpdate: () => void;
     getRoot: () => React.FC<{}>;

package/dist/runtime.js

@@ -23,7 +23,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/create-browser-bundle-runtime.ts
-import { Internals } from "remotion";
+import { Internals as Internals2 } from "remotion";
 
 // src/browser-module-scope.ts
 import * as React from "react";
@@ -34,7 +34,80 @@ import * as JSXRuntime from "react/jsx-runtime";
 import * as Remotion from "remotion";
 import * as RemotionNoReact from "remotion/no-react";
 import * as RemotionVersion from "remotion/version";
-var createBrowserModuleScope = (additionalModules) => {
+
+// src/source-location-jsx.ts
+import { Internals } from "remotion";
+var withSourceLocation = (factory, {
+  isCreateElement,
+  sourceArgumentIndex
+}) => {
+  const componentsToAddStacksTo = Internals.getComponentsToAddStacksTo();
+  const sequenceComponent = Internals.getSequenceComponent();
+  const internalStackProp = Internals.REMOTION_INTERNAL_STACK_PROP;
+  return new Proxy(factory, {
+    apply(target, thisArg, argArray) {
+      const [component, props, ...rest] = argArray;
+      if (!componentsToAddStacksTo.includes(component)) {
+        return Reflect.apply(target, thisArg, argArray);
+      }
+      const source = sourceArgumentIndex === null ? null : argArray[sourceArgumentIndex];
+      const stack = source && typeof source.fileName === "string" && typeof source.lineNumber === "number" && typeof source.columnNumber === "number" ? Internals.makeOriginalSourceStack({
+        fileName: source.fileName,
+        lineNumber: source.lineNumber,
+        columnNumber: source.columnNumber
+      }) : new Error().stack;
+      const newProps = props?.[internalStackProp] ? { ...props } : { ...props ?? {}, [internalStackProp]: stack };
+      if (component === sequenceComponent) {
+        const children = isCreateElement ? rest.length === 0 ? newProps.children : rest : newProps.children;
+        newProps._remotionInternalSingleChildComponent = Internals.getSingleChildComponent(children);
+      }
+      return Reflect.apply(target, thisArg, [component, newProps, ...rest]);
+    }
+  });
+};
+var withOverrides = (module, overrides) => {
+  const wrapped = { ...module, ...overrides };
+  if (module.default !== null && typeof module.default === "object") {
+    wrapped.default = { ...module.default, ...overrides };
+  }
+  return wrapped;
+};
+var addSourceLocationsToJsxModules = ({
+  react,
+  jsxRuntime,
+  jsxDevRuntime
+}) => {
+  return {
+    react: withOverrides(react, {
+      createElement: withSourceLocation(react.createElement, {
+        isCreateElement: true,
+        sourceArgumentIndex: null
+      })
+    }),
+    jsxRuntime: withOverrides(jsxRuntime, {
+      jsx: withSourceLocation(jsxRuntime.jsx, {
+        isCreateElement: false,
+        sourceArgumentIndex: null
+      }),
+      jsxs: withSourceLocation(jsxRuntime.jsxs, {
+        isCreateElement: false,
+        sourceArgumentIndex: null
+      })
+    }),
+    jsxDevRuntime: withOverrides(jsxDevRuntime, {
+      jsxDEV: withSourceLocation(jsxDevRuntime.jsxDEV, {
+        isCreateElement: false,
+        sourceArgumentIndex: 4
+      })
+    })
+  };
+};
+
+// src/browser-module-scope.ts
+var createBrowserModuleScope = ({
+  additionalModules,
+  addSourceLocations
+}) => {
   let root = null;
   let registrations = 0;
   const registerRoot = (component) => {
@@ -47,12 +120,17 @@ var createBrowserModuleScope = (additionalModules) => {
     registrations++;
     root = component;
   };
+  const jsxModules = addSourceLocations ? addSourceLocationsToJsxModules({
+    react: React,
+    jsxRuntime: JSXRuntime,
+    jsxDevRuntime: JSXDevRuntime
+  }) : { react: React, jsxRuntime: JSXRuntime, jsxDevRuntime: JSXDevRuntime };
   const sharedModules = new Map([
-    ["react", React],
+    ["react", jsxModules.react],
     ["react-dom", ReactDOM],
     ["react-dom/client", ReactDOMClient],
-    ["react/jsx-runtime", JSXRuntime],
-    ["react/jsx-dev-runtime", JSXDevRuntime],
+    ["react/jsx-runtime", jsxModules.jsxRuntime],
+    ["react/jsx-dev-runtime", jsxModules.jsxDevRuntime],
     ["remotion", { ...Remotion, registerRoot }],
     ["remotion/no-react", RemotionNoReact],
     ["remotion/version", RemotionVersion],
@@ -219,8 +297,11 @@ var createBrowserBundleRuntime = () => {
           if (renderers.length > 0 && !renderers.some((renderer) => renderer !== null && typeof renderer === "object" && ("scheduleRefresh" in renderer) && typeof renderer.scheduleRefresh === "function" && ("setRefreshHandler" in renderer) && typeof renderer.setRefreshHandler === "function")) {
             throw new Error("Fast Refresh requires development React DOM. Inject the React Refresh hook before importing the preview renderer.");
           }
-          const initialScope = createBrowserModuleScope(new Map([["react-refresh/runtime", refresh]]));
-          Internals.setComponentIdentityResolver((component) => refresh.getFamilyByType(component) ?? component);
+          const initialScope = createBrowserModuleScope({
+            additionalModules: new Map([["react-refresh/runtime", refresh]]),
+            addSourceLocations: true
+          });
+          Internals2.setComponentIdentityResolver((component) => refresh.getFamilyByType(component) ?? component);
           ownsComponentIdentityResolver = true;
           Object.defineProperty(globalThis, "require", {
             configurable: true,
@@ -277,7 +358,7 @@ var createBrowserBundleRuntime = () => {
       }
       disposed = true;
       if (ownsComponentIdentityResolver) {
-        Internals.setComponentIdentityResolver(null);
+        Internals2.setComponentIdentityResolver(null);
       }
       assets.dispose();
       Reflect.deleteProperty(globalThis, browserBundleHmrBridgeName);
@@ -297,7 +378,7 @@ var createBrowserBundleRuntime = () => {
 // src/create-browser-composition-observer.tsx
 import React2, { Suspense, useEffect, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
-import { Internals as Internals2 } from "remotion";
+import { Internals as Internals3 } from "remotion";
 import { jsx, jsxs } from "react/jsx-runtime";
 var environment = {
   isClientSideRendering: false,
@@ -346,7 +427,7 @@ var ObserveMetadata = ({
     const controller = new AbortController;
     const defaultProps = composition.defaultProps ?? {};
     try {
-      const config = Internals2.resolveVideoConfig({
+      const config = Internals3.resolveVideoConfig({
         compositionId,
         compositionWidth: composition.width ?? null,
         compositionHeight: composition.height ?? null,
@@ -427,9 +508,9 @@ var ObserveComposition = ({
       })
     ]
   }), [RegisteredRoot, revision]);
-  return /* @__PURE__ */ jsx(Internals2.RemotionEnvironmentContext.Provider, {
+  return /* @__PURE__ */ jsx(Internals3.RemotionEnvironmentContext.Provider, {
     value: environment,
-    children: /* @__PURE__ */ jsxs(Internals2.CompositionSetters.Provider, {
+    children: /* @__PURE__ */ jsxs(Internals3.CompositionSetters.Provider, {
       value: setters,
       children: [
         registration,
@@ -515,7 +596,7 @@ var createBrowserCompositionObserver = ({
 // src/get-browser-composition.tsx
 import React3, { Suspense as Suspense2, useEffect as useEffect2 } from "react";
 import { createRoot as createRoot2 } from "react-dom/client";
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals4 } from "remotion";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 
 class RegistrationErrorBoundary2 extends React3.Component {
@@ -584,7 +665,7 @@ var getBrowserComposition = async ({
               throw new Error(`No composition with ID "${compositionId}" was registered. Available IDs: ${[...compositions.keys()].join(", ") || "(none)"}.`);
             }
             const defaultProps = composition.defaultProps ?? {};
-            const config = Internals3.resolveVideoConfig({
+            const config = Internals4.resolveVideoConfig({
               compositionId,
               compositionWidth: composition.width ?? null,
               compositionHeight: composition.height ?? null,
@@ -637,7 +718,7 @@ var getBrowserComposition = async ({
       });
       reactRoot.render(/* @__PURE__ */ jsx2(RegistrationErrorBoundary2, {
         onError,
-        children: /* @__PURE__ */ jsx2(Internals3.RemotionEnvironmentContext.Provider, {
+        children: /* @__PURE__ */ jsx2(Internals4.RemotionEnvironmentContext.Provider, {
           value: {
             isClientSideRendering: false,
             isPlayer: false,
@@ -645,7 +726,7 @@ var getBrowserComposition = async ({
             isRendering: false,
             isStudio: false
           },
-          children: /* @__PURE__ */ jsx2(Internals3.CompositionSetters.Provider, {
+          children: /* @__PURE__ */ jsx2(Internals4.CompositionSetters.Provider, {
             value: setters,
             children: /* @__PURE__ */ jsxs2(Suspense2, {
               fallback: null,
@@ -677,7 +758,10 @@ var loadBrowserBundle = ({ bundle }) => {
   if (bundle.fastRefresh) {
     throw new Error("Use createBrowserBundleRuntime() to load a Fast Refresh bundle.");
   }
-  const scope = createBrowserModuleScope(null);
+  const scope = createBrowserModuleScope({
+    additionalModules: null,
+    addSourceLocations: false
+  });
   scope.evaluate(bundle.code);
   return scope.getRoot();
 };

package/dist/source-location-jsx.d.ts

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import type * as JSXDevRuntime from 'react/jsx-dev-runtime';
+import type * as JSXRuntime from 'react/jsx-runtime';
+type ModuleRecord = Record<string, unknown> & {
+    default?: unknown;
+};
+export declare const addSourceLocationsToJsxModules: ({ react, jsxRuntime, jsxDevRuntime, }: {
+    react: typeof React;
+    jsxRuntime: typeof JSXRuntime;
+    jsxDevRuntime: typeof JSXDevRuntime;
+}) => {
+    react: ModuleRecord;
+    jsxRuntime: ModuleRecord;
+    jsxDevRuntime: ModuleRecord;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/browser-bundler",
-	"version": "4.0.529",
+	"version": "4.0.530",
 	"description": "Compile virtual Remotion projects in the browser",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -26,7 +26,7 @@
 	"dependencies": {
 		"@rspack/browser": "2.1.1",
 		"react-refresh": "0.18.0",
-		"remotion": "4.0.529"
+		"remotion": "4.0.530"
 	},
 	"peerDependencies": {
 		"react": ">=18.0.0",
@@ -53,8 +53,8 @@
 	"devDependencies": {
 		"@rspack/plugin-react-refresh": "1.6.1",
 		"@happy-dom/global-registrator": "14.5.1",
-		"@remotion/eslint-config-internal": "4.0.529",
-		"@remotion/player": "4.0.529",
+		"@remotion/eslint-config-internal": "4.0.530",
+		"@remotion/player": "4.0.530",
 		"@testing-library/react": "16.1.0",
 		"@types/react": "19.2.7",
 		"@types/react-dom": "19.2.3",