@remotion/browser-bundler 4.0.527

package/dist/runtime.js

@@ -0,0 +1,689 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/create-browser-bundle-runtime.ts
+import { Internals } from "remotion";
+
+// src/browser-module-scope.ts
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import * as ReactDOMClient from "react-dom/client";
+import * as JSXDevRuntime from "react/jsx-dev-runtime";
+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) => {
+  let root = null;
+  let registrations = 0;
+  const registerRoot = (component) => {
+    if (!component || React.isValidElement(component) || typeof component !== "function" && (typeof component !== "object" || !("$$typeof" in component))) {
+      throw new Error("registerRoot() must receive a React component.");
+    }
+    if (registrations > 0) {
+      throw new Error("registerRoot() was called more than once.");
+    }
+    registrations++;
+    root = component;
+  };
+  const sharedModules = new Map([
+    ["react", React],
+    ["react-dom", ReactDOM],
+    ["react-dom/client", ReactDOMClient],
+    ["react/jsx-runtime", JSXRuntime],
+    ["react/jsx-dev-runtime", JSXDevRuntime],
+    ["remotion", { ...Remotion, registerRoot }],
+    ["remotion/no-react", RemotionNoReact],
+    ["remotion/version", RemotionVersion],
+    ...additionalModules ?? []
+  ]);
+  const resolveModule = (id) => {
+    if (!sharedModules.has(id)) {
+      throw new Error(`The browser bundle requested an unavailable shared module: "${id}".`);
+    }
+    return sharedModules.get(id);
+  };
+  return {
+    resolveModule,
+    beginUpdate: () => {
+      registrations = 0;
+    },
+    getRoot: () => {
+      if (root === null) {
+        throw new Error("The browser bundle did not call registerRoot(). Use a normal Remotion project entry point.");
+      }
+      return root;
+    },
+    evaluate: (code) => {
+      registrations = 0;
+      try {
+        const evaluate = new Function("require", `${code}
+//# sourceURL=remotion-browser-bundle.js`);
+        evaluate(resolveModule);
+      } catch (error) {
+        throw new Error(`Could not evaluate the browser bundle: ${error instanceof Error ? error.message : String(error)}`, { cause: error });
+      }
+    }
+  };
+};
+
+// src/fast-refresh-bridge.ts
+var browserBundleHmrBridgeName = "remotion_browserBundlerHmr";
+var browserBundleHotUpdateName = "remotion_browserBundlerHotUpdate";
+
+// src/hmr-assets.ts
+var getAssetName = (nameOrUrl) => {
+  const url = new URL(nameOrUrl, "https://remotion.invalid");
+  return url.pathname.split("/").at(-1) ?? "";
+};
+var createBrowserHmrAssetManager = ({
+  createObjectUrl,
+  revokeObjectUrl
+}) => {
+  const assets = new Map;
+  const updateAssets = (newAssets) => {
+    const nextAssetNames = new Set(newAssets.map((asset) => getAssetName(asset.name)));
+    for (const [name, asset] of assets) {
+      if (nextAssetNames.has(name)) {
+        continue;
+      }
+      if (asset.objectUrl) {
+        revokeObjectUrl(asset.objectUrl);
+      }
+      assets.delete(name);
+    }
+    for (const asset of newAssets) {
+      const name = getAssetName(asset.name);
+      const previous = assets.get(name);
+      if (previous?.objectUrl) {
+        revokeObjectUrl(previous.objectUrl);
+      }
+      assets.set(name, { content: asset.content, objectUrl: null });
+    }
+  };
+  const bridge = {
+    getManifest: (name) => {
+      const asset = assets.get(getAssetName(name));
+      if (!asset) {
+        return Promise.resolve(undefined);
+      }
+      return Promise.resolve(JSON.parse(asset.content));
+    },
+    resolveScriptUrl: (name) => {
+      const assetName = getAssetName(name);
+      const asset = assets.get(assetName);
+      if (!asset) {
+        throw new Error(`Missing browser HMR asset: ${assetName}`);
+      }
+      asset.objectUrl ??= createObjectUrl(new Blob([asset.content], { type: "text/javascript" }));
+      return asset.objectUrl;
+    }
+  };
+  return {
+    bridge,
+    dispose: () => {
+      for (const asset of assets.values()) {
+        if (asset.objectUrl) {
+          revokeObjectUrl(asset.objectUrl);
+        }
+      }
+      assets.clear();
+    },
+    updateAssets
+  };
+};
+
+// src/create-browser-bundle-runtime.ts
+var createBrowserBundleRuntime = () => {
+  if (typeof document === "undefined" || !document.body) {
+    throw new Error("createBrowserBundleRuntime() must be called in a browser.");
+  }
+  if (Object.hasOwn(globalThis, browserBundleHmrBridgeName)) {
+    throw new Error("Only one Fast Refresh runtime can use a preview document.");
+  }
+  const assets = createBrowserHmrAssetManager({
+    createObjectUrl: (blob) => URL.createObjectURL(blob),
+    revokeObjectUrl: (url) => URL.revokeObjectURL(url)
+  });
+  let hotRuntime = null;
+  let scope = null;
+  let sessionId = null;
+  let disposed = false;
+  let ownsComponentIdentityResolver = false;
+  let queue = Promise.resolve();
+  const previousRequire = Object.getOwnPropertyDescriptor(globalThis, "require");
+  const previousHotUpdate = Object.getOwnPropertyDescriptor(globalThis, browserBundleHotUpdateName);
+  const bridge = {
+    ...assets.bridge,
+    setHotRuntime: (runtime) => {
+      hotRuntime = runtime;
+    }
+  };
+  Object.defineProperty(globalThis, browserBundleHmrBridgeName, {
+    configurable: true,
+    value: bridge
+  });
+  const getHotRuntime = () => {
+    if (hotRuntime === null) {
+      throw new Error("The browser bundle did not initialize its HMR runtime.");
+    }
+    return hotRuntime;
+  };
+  return {
+    applyBundle: (bundle) => {
+      const run = queue.then(async () => {
+        if (disposed) {
+          throw new Error("The browser bundle runtime was disposed.");
+        }
+        const update = bundle.fastRefresh;
+        if (!update) {
+          throw new Error("Create the bundler with enableFastRefresh: true before applying bundles.");
+        }
+        if (sessionId !== null && sessionId !== update.sessionId) {
+          throw new Error("The compiler session changed. Create a new preview runtime for the new project.");
+        }
+        const { default: refresh } = await import("react-refresh/runtime");
+        if (disposed) {
+          throw new Error("The browser bundle runtime was disposed.");
+        }
+        if (typeof refresh.performReactRefresh !== "function") {
+          throw new Error("Fast Refresh requires a development React renderer in the preview document.");
+        }
+        if (scope === null) {
+          const hook = Reflect.get(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__");
+          if (hook === null || typeof hook !== "object" || !("renderers" in hook) || !(hook.renderers instanceof Map) || "isDisabled" in hook && hook.isDisabled) {
+            throw new Error("Inject the React Refresh hook before importing the development preview renderer.");
+          }
+          const renderers = [...hook.renderers.values()];
+          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);
+          ownsComponentIdentityResolver = true;
+          Object.defineProperty(globalThis, "require", {
+            configurable: true,
+            value: initialScope.resolveModule
+          });
+          initialScope.evaluate(bundle.code);
+          initialScope.getRoot();
+          scope = initialScope;
+          sessionId = update.sessionId;
+        } else {
+          const hot = getHotRuntime();
+          if (hot.getHash() === update.hash) {
+            return scope.getRoot();
+          }
+          if (hot.getHash() !== update.previousHash) {
+            throw new Error("Fast Refresh bundles must be applied in compilation order. A compiled update was skipped.");
+          }
+          if (hot.status() !== "idle") {
+            throw new Error(`Cannot apply a Fast Refresh update while HMR is "${hot.status()}".`);
+          }
+          assets.updateAssets(update.assets);
+          scope.beginUpdate();
+          const changedModules = await hot.check();
+          if (disposed) {
+            throw new Error("The browser bundle runtime was disposed.");
+          }
+          if (changedModules === null) {
+            throw new Error("Rspack could not find the Fast Refresh update.");
+          }
+          await hot.apply();
+          if (disposed) {
+            throw new Error("The browser bundle runtime was disposed.");
+          }
+          refresh.performReactRefresh();
+        }
+        if (disposed) {
+          throw new Error("The browser bundle runtime was disposed.");
+        }
+        if (getHotRuntime().getHash() !== update.hash) {
+          throw new Error("Rspack did not apply the expected Fast Refresh update.");
+        }
+        return scope.getRoot();
+      });
+      queue = run.then(() => {
+        return;
+      }, () => {
+        return;
+      });
+      return run;
+    },
+    dispose: () => {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      if (ownsComponentIdentityResolver) {
+        Internals.setComponentIdentityResolver(null);
+      }
+      assets.dispose();
+      Reflect.deleteProperty(globalThis, browserBundleHmrBridgeName);
+      if (previousRequire) {
+        Object.defineProperty(globalThis, "require", previousRequire);
+      } else {
+        Reflect.deleteProperty(globalThis, "require");
+      }
+      if (previousHotUpdate) {
+        Object.defineProperty(globalThis, browserBundleHotUpdateName, previousHotUpdate);
+      } else {
+        Reflect.deleteProperty(globalThis, browserBundleHotUpdateName);
+      }
+    }
+  };
+};
+// 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 { jsx, jsxs } from "react/jsx-runtime";
+var environment = {
+  isClientSideRendering: false,
+  isPlayer: false,
+  isReadOnlyStudio: false,
+  isRendering: false,
+  isStudio: false
+};
+
+class RegistrationErrorBoundary extends React2.Component {
+  state = { failed: false, revision: this.props.revision };
+  static getDerivedStateFromProps(props, state) {
+    return props.revision === state.revision ? null : { failed: false, revision: props.revision };
+  }
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error) {
+    this.props.onError(error, this.props.revision);
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+var RegistrationCommitted = ({ revision, onCommit }) => {
+  useEffect(() => onCommit(revision), [onCommit, revision]);
+  return null;
+};
+var ObserveMetadata = ({
+  composition,
+  compositionId,
+  inputProps,
+  revision,
+  registeredRevision,
+  onChange,
+  onError
+}) => {
+  useEffect(() => {
+    if (registeredRevision !== revision) {
+      return;
+    }
+    if (!composition) {
+      onError(new Error(`No composition with ID "${compositionId}" is registered.`), revision);
+      return;
+    }
+    const controller = new AbortController;
+    const defaultProps = composition.defaultProps ?? {};
+    try {
+      const config = Internals2.resolveVideoConfig({
+        compositionId,
+        compositionWidth: composition.width ?? null,
+        compositionHeight: composition.height ?? null,
+        compositionFps: composition.fps ?? null,
+        compositionDurationInFrames: composition.durationInFrames ?? null,
+        calculateMetadata: composition.calculateMetadata,
+        defaultProps,
+        inputProps: { ...defaultProps, ...inputProps },
+        signal: controller.signal
+      });
+      Promise.resolve(config).then((videoConfig) => {
+        if (!controller.signal.aborted) {
+          onChange({ ...videoConfig, component: composition.component }, revision);
+        }
+      }, (error) => {
+        if (!controller.signal.aborted) {
+          onError(error, revision);
+        }
+      });
+    } catch (error) {
+      onError(error, revision);
+    }
+    return () => controller.abort();
+  }, [
+    composition,
+    compositionId,
+    inputProps,
+    onChange,
+    onError,
+    registeredRevision,
+    revision
+  ]);
+  return null;
+};
+var ObserveComposition = ({
+  root: RegisteredRoot,
+  compositionId,
+  inputProps,
+  revision,
+  onChange,
+  onError
+}) => {
+  const [registeredRevision, setRegisteredRevision] = useState(null);
+  const [compositions, setCompositions] = useState([]);
+  const setters = useMemo(() => ({
+    registerComposition: (composition) => {
+      setCompositions((current) => {
+        if (current.some(({ id }) => id === composition.id)) {
+          throw new Error(`A composition with ID "${composition.id}" was registered more than once.`);
+        }
+        return [...current, composition];
+      });
+    },
+    unregisterComposition: (id) => {
+      setCompositions((current) => current.filter((composition) => composition.id !== id));
+    },
+    registerFolder: () => {
+      return;
+    },
+    unregisterFolder: () => {
+      return;
+    },
+    setCanvasContent: () => {
+      return;
+    },
+    setCurrentAssetMetadata: () => {
+      return;
+    },
+    onlyRenderComposition: null
+  }), []);
+  const registration = useMemo(() => /* @__PURE__ */ jsxs(Suspense, {
+    fallback: null,
+    children: [
+      /* @__PURE__ */ jsx(RegisteredRoot, {}),
+      /* @__PURE__ */ jsx(RegistrationCommitted, {
+        revision,
+        onCommit: setRegisteredRevision
+      })
+    ]
+  }), [RegisteredRoot, revision]);
+  return /* @__PURE__ */ jsx(Internals2.RemotionEnvironmentContext.Provider, {
+    value: environment,
+    children: /* @__PURE__ */ jsxs(Internals2.CompositionSetters.Provider, {
+      value: setters,
+      children: [
+        registration,
+        /* @__PURE__ */ jsx(ObserveMetadata, {
+          composition: compositions.find(({ id }) => id === compositionId) ?? null,
+          compositionId,
+          inputProps,
+          revision,
+          registeredRevision,
+          onChange,
+          onError
+        })
+      ]
+    })
+  });
+};
+var createBrowserCompositionObserver = ({
+  onChange,
+  onError
+}) => {
+  if (typeof document === "undefined" || !document.body) {
+    throw new Error("Composition observation requires a browser document.");
+  }
+  const container = document.createElement("div");
+  container.hidden = true;
+  document.body.appendChild(container);
+  let disposed = false;
+  let revision = 0;
+  let lastError = null;
+  const reportError = (error, errorRevision) => {
+    if (!disposed && errorRevision === revision) {
+      if (lastError !== null && lastError.error === error && lastError.revision === errorRevision) {
+        return;
+      }
+      lastError = { error, revision: errorRevision };
+      onError(error instanceof Error ? error : new Error(String(error)));
+    }
+  };
+  const onComposition = (composition, resolvedRevision) => {
+    if (disposed || resolvedRevision !== revision) {
+      return;
+    }
+    try {
+      onChange(composition);
+    } catch (error) {
+      reportError(error, resolvedRevision);
+    }
+  };
+  const root = createRoot(container, {
+    onCaughtError: (error) => reportError(error, revision),
+    onUncaughtError: (error) => reportError(error, revision)
+  });
+  return {
+    update: (selection) => {
+      if (disposed) {
+        throw new Error("The composition observer was disposed.");
+      }
+      revision++;
+      root.render(/* @__PURE__ */ jsx(RegistrationErrorBoundary, {
+        revision,
+        onError: reportError,
+        children: /* @__PURE__ */ jsx(ObserveComposition, {
+          ...selection,
+          revision,
+          onChange: onComposition,
+          onError: reportError
+        })
+      }));
+    },
+    dispose: () => {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      try {
+        root.unmount();
+      } finally {
+        container.remove();
+      }
+    }
+  };
+};
+// 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 { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+class RegistrationErrorBoundary2 extends React3.Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error) {
+    this.props.onError(error);
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+var RegistrationComplete = ({ onComplete }) => {
+  useEffect2(onComplete, [onComplete]);
+  return null;
+};
+var getBrowserComposition = async ({
+  root: RegisteredRoot,
+  compositionId,
+  inputProps,
+  signal
+}) => {
+  if (signal?.aborted) {
+    throw signal.reason;
+  }
+  if (typeof document === "undefined" || !document.body) {
+    throw new Error("getBrowserComposition() must be called in a browser.");
+  }
+  const container = document.createElement("div");
+  container.hidden = true;
+  document.body.appendChild(container);
+  const controller = new AbortController;
+  const abort = () => controller.abort(signal?.reason);
+  signal?.addEventListener("abort", abort, { once: true });
+  const compositions = new Map;
+  let reactRoot = null;
+  let finished = false;
+  let resolving = false;
+  try {
+    return await new Promise((resolve, reject) => {
+      const onError = (error) => {
+        if (finished) {
+          return;
+        }
+        finished = true;
+        reject(error instanceof Error ? error : new Error(String(error)));
+      };
+      controller.signal.addEventListener("abort", () => {
+        if (finished) {
+          return;
+        }
+        finished = true;
+        reject(controller.signal.reason);
+      }, { once: true });
+      const onComplete = () => {
+        queueMicrotask(() => {
+          if (finished || resolving) {
+            return;
+          }
+          resolving = true;
+          try {
+            const composition = compositions.get(compositionId);
+            if (!composition) {
+              throw new Error(`No composition with ID "${compositionId}" was registered. Available IDs: ${[...compositions.keys()].join(", ") || "(none)"}.`);
+            }
+            const defaultProps = composition.defaultProps ?? {};
+            const config = Internals3.resolveVideoConfig({
+              compositionId,
+              compositionWidth: composition.width ?? null,
+              compositionHeight: composition.height ?? null,
+              compositionFps: composition.fps ?? null,
+              compositionDurationInFrames: composition.durationInFrames ?? null,
+              calculateMetadata: composition.calculateMetadata,
+              defaultProps,
+              inputProps: { ...defaultProps, ...inputProps },
+              signal: controller.signal
+            });
+            Promise.resolve(config).then((videoConfig) => {
+              if (finished) {
+                return;
+              }
+              finished = true;
+              resolve({ ...videoConfig, component: composition.component });
+            }, onError);
+          } catch (error) {
+            onError(error);
+          }
+        });
+      };
+      const setters = {
+        registerComposition: (composition) => {
+          if (compositions.has(composition.id)) {
+            throw new Error(`A composition with ID "${composition.id}" was registered more than once.`);
+          }
+          compositions.set(composition.id, composition);
+        },
+        unregisterComposition: (id) => {
+          compositions.delete(id);
+        },
+        registerFolder: () => {
+          return;
+        },
+        unregisterFolder: () => {
+          return;
+        },
+        setCanvasContent: () => {
+          return;
+        },
+        setCurrentAssetMetadata: () => {
+          return;
+        },
+        onlyRenderComposition: null
+      };
+      reactRoot = createRoot2(container, {
+        onCaughtError: onError,
+        onUncaughtError: onError
+      });
+      reactRoot.render(/* @__PURE__ */ jsx2(RegistrationErrorBoundary2, {
+        onError,
+        children: /* @__PURE__ */ jsx2(Internals3.RemotionEnvironmentContext.Provider, {
+          value: {
+            isClientSideRendering: false,
+            isPlayer: false,
+            isReadOnlyStudio: false,
+            isRendering: false,
+            isStudio: false
+          },
+          children: /* @__PURE__ */ jsx2(Internals3.CompositionSetters.Provider, {
+            value: setters,
+            children: /* @__PURE__ */ jsxs2(Suspense2, {
+              fallback: null,
+              children: [
+                /* @__PURE__ */ jsx2(RegisteredRoot, {}),
+                /* @__PURE__ */ jsx2(RegistrationComplete, {
+                  onComplete
+                })
+              ]
+            })
+          })
+        })
+      }));
+    });
+  } finally {
+    finished = true;
+    signal?.removeEventListener("abort", abort);
+    controller.abort();
+    try {
+      reactRoot?.unmount();
+    } finally {
+      compositions.clear();
+      container.remove();
+    }
+  }
+};
+// src/load-browser-bundle.ts
+var loadBrowserBundle = ({ bundle }) => {
+  if (bundle.fastRefresh) {
+    throw new Error("Use createBrowserBundleRuntime() to load a Fast Refresh bundle.");
+  }
+  const scope = createBrowserModuleScope(null);
+  scope.evaluate(bundle.code);
+  return scope.getRoot();
+};
+export {
+  loadBrowserBundle,
+  getBrowserComposition,
+  createBrowserCompositionObserver,
+  createBrowserBundleRuntime
+};