@remotion/bundler
Version:
Bundle Remotion compositions using Webpack
232 lines (231 loc) • 10.3 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.webpackConfig = void 0;
const node_crypto_1 = require("node:crypto");
const node_path_1 = __importDefault(require("node:path"));
const react_dom_1 = __importDefault(require("react-dom"));
const no_react_1 = require("remotion/no-react");
const webpack_1 = __importStar(require("webpack"));
const case_sensitive_paths_1 = require("./case-sensitive-paths");
const fast_refresh_1 = require("./fast-refresh");
const hide_expression_dependency_1 = require("./hide-expression-dependency");
const ignore_packfilecache_warnings_1 = require("./ignore-packfilecache-warnings");
const optional_dependencies_1 = require("./optional-dependencies");
const stringify_with_circular_references_1 = require("./stringify-with-circular-references");
const webpack_cache_1 = require("./webpack-cache");
const esbuild = require("esbuild");
if (!(react_dom_1.default === null || react_dom_1.default === void 0 ? void 0 : react_dom_1.default.version)) {
throw new Error('Could not find "react-dom" package. Did you install it?');
}
const reactDomVersion = react_dom_1.default.version.split('.')[0];
if (reactDomVersion === '0') {
throw new Error(`Version ${reactDomVersion} of "react-dom" is not supported by Remotion`);
}
const shouldUseReactDomClient = no_react_1.NoReactInternals.ENABLE_V5_BREAKING_CHANGES
? true
: parseInt(reactDomVersion, 10) >= 18;
function truthy(value) {
return Boolean(value);
}
const webpackConfig = async ({ entry, userDefinedComponent, outDir, environment, webpackOverride = (f) => f, onProgress, enableCaching = true, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, bufferStateDelayInMilliseconds, poll, }) => {
const esbuildLoaderOptions = {
target: 'chrome85',
loader: 'tsx',
implementation: esbuild,
remotionRoot,
};
let lastProgress = 0;
const isBun = typeof Bun !== 'undefined';
const define = new webpack_1.default.DefinePlugin({
'process.env.MAX_TIMELINE_TRACKS': maxTimelineTracks,
'process.env.KEYBOARD_SHORTCUTS_ENABLED': keyboardShortcutsEnabled,
'process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS': bufferStateDelayInMilliseconds,
});
const conf = await webpackOverride({
optimization: {
minimize: false,
},
experiments: {
lazyCompilation: isBun
? false
: environment === 'production'
? false
: {
entries: false,
},
},
watchOptions: {
poll: poll !== null && poll !== void 0 ? poll : undefined,
aggregateTimeout: 0,
ignored: ['**/.git/**', '**/.turbo/**', '**/node_modules/**'],
},
// Higher source map quality in development to power line numbers for stack traces
devtool: environment === 'development' ? 'source-map' : 'cheap-module-source-map',
entry: [
// Fast Refresh must come first,
// because setup-environment imports ReactDOM.
// If React DOM is imported before Fast Refresh, Fast Refresh does not work
environment === 'development'
? require.resolve('./fast-refresh/runtime.js')
: null,
require.resolve('./setup-environment'),
userDefinedComponent,
require.resolve('../react-shim.js'),
entry,
].filter(Boolean),
mode: environment,
plugins: environment === 'development'
? [
new fast_refresh_1.ReactFreshWebpackPlugin(),
new case_sensitive_paths_1.CaseSensitivePathsPlugin(),
new webpack_1.default.HotModuleReplacementPlugin(),
define,
new optional_dependencies_1.AllowOptionalDependenciesPlugin(),
new hide_expression_dependency_1.AllowDependencyExpressionPlugin(),
new ignore_packfilecache_warnings_1.IgnorePackFileCacheWarningsPlugin(),
]
: [
new webpack_1.ProgressPlugin((p) => {
if (onProgress) {
if ((p === 1 && p > lastProgress) || p - lastProgress > 0.05) {
lastProgress = p;
onProgress(Number((p * 100).toFixed(2)));
}
}
}),
define,
new optional_dependencies_1.AllowOptionalDependenciesPlugin(),
new hide_expression_dependency_1.AllowDependencyExpressionPlugin(),
new ignore_packfilecache_warnings_1.IgnorePackFileCacheWarningsPlugin(),
],
output: {
hashFunction: 'xxhash64',
filename: no_react_1.NoReactInternals.bundleName,
devtoolModuleFilenameTemplate: '[resource-path]',
assetModuleFilename: environment === 'development' ? '[path][name][ext]' : '[hash][ext]',
},
resolve: {
extensions: ['.ts', '.tsx', '.web.js', '.js', '.jsx', '.mjs', '.cjs'],
alias: {
// Only one version of react
'react/jsx-runtime': require.resolve('react/jsx-runtime'),
'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
react: require.resolve('react'),
// Needed to not fail on this: https://github.com/remotion-dev/remotion/issues/5045
'remotion/no-react': node_path_1.default.resolve(require.resolve('remotion'), '..', '..', 'esm', 'no-react.mjs'),
remotion: node_path_1.default.resolve(require.resolve('remotion'), '..', '..', 'esm', 'index.mjs'),
'@remotion/media-parser/worker': node_path_1.default.resolve(require.resolve('@remotion/media-parser'), '..', 'esm', 'worker.mjs'),
// test visual controls before removing this
'@remotion/studio': require.resolve('@remotion/studio'),
'react-dom/client': shouldUseReactDomClient
? require.resolve('react-dom/client')
: require.resolve('react-dom'),
},
},
module: {
rules: [
{
test: /\.css$/i,
use: [require.resolve('style-loader'), require.resolve('css-loader')],
type: 'javascript/auto',
},
{
test: /\.(png|svg|jpg|jpeg|webp|gif|bmp|webm|mp4|mov|mp3|m4a|wav|aac)$/,
type: 'asset/resource',
},
{
test: /\.tsx?$/,
use: [
{
loader: require.resolve('./esbuild-loader/index.js'),
options: esbuildLoaderOptions,
},
// Keep the order to match babel-loader
environment === 'development'
? {
loader: require.resolve('./fast-refresh/loader.js'),
}
: null,
].filter(truthy),
},
{
test: /\.(woff(2)?|otf|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
type: 'asset/resource',
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('./esbuild-loader/index.js'),
options: esbuildLoaderOptions,
},
environment === 'development'
? {
loader: require.resolve('./fast-refresh/loader.js'),
}
: null,
].filter(truthy),
},
],
},
});
const hash = (0, node_crypto_1.createHash)('md5')
.update((0, stringify_with_circular_references_1.jsonStringifyWithCircularReferences)(conf))
.digest('hex');
return [
hash,
{
...conf,
cache: enableCaching
? {
type: 'filesystem',
name: (0, webpack_cache_1.getWebpackCacheName)(environment, hash),
version: hash,
}
: false,
output: {
...conf.output,
...(outDir ? { path: outDir } : {}),
},
context: remotionRoot,
},
];
};
exports.webpackConfig = webpackConfig;