@remotion/cli 3.0.18 → 3.0.19

package/dist/preview-server/routes.js

@@ -0,0 +1,121 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleRoutes = void 0;
+const bundler_1 = require("@remotion/bundler");
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const url_1 = require("url");
+const get_file_source_1 = require("./error-overlay/react-overlay/utils/get-file-source");
+const open_in_editor_1 = require("./error-overlay/react-overlay/utils/open-in-editor");
+const project_info_1 = require("./project-info");
+const serve_static_1 = require("./serve-static");
+const update_available_1 = require("./update-available");
+const handleUpdate = async (_, response) => {
+    const data = await (0, update_available_1.isUpdateAvailableWithTimeout)();
+    response.setHeader('content-type', 'application/json');
+    response.writeHead(200);
+    response.end(JSON.stringify(data));
+};
+const editorGuess = (0, open_in_editor_1.guessEditor)();
+const handleFallback = async (hash, _, response) => {
+    const edit = await editorGuess;
+    const displayName = (0, open_in_editor_1.getDisplayNameForEditor)(edit[0]);
+    response.setHeader('content-type', 'text/html');
+    response.writeHead(200);
+    response.end(bundler_1.BundlerInternals.indexHtml(hash, '/', displayName));
+};
+const handleProjectInfo = async (_, response) => {
+    const data = await (0, project_info_1.getProjectInfo)();
+    response.setHeader('content-type', 'application/json');
+    response.writeHead(200);
+    response.end(JSON.stringify(data));
+};
+const handleFileSource = async (search, _, response) => {
+    if (!search.startsWith('?')) {
+        throw new Error('query must start with ?');
+    }
+    const query = new url_1.URLSearchParams(search);
+    const f = query.get('f');
+    if (typeof f !== 'string') {
+        throw new Error('must pass `f` parameter');
+    }
+    const data = await (0, get_file_source_1.getFileSource)(decodeURIComponent(f));
+    response.writeHead(200);
+    response.write(data);
+    return response.end();
+};
+const handleOpenInEditor = async (req, res) => {
+    try {
+        const b = await new Promise((_resolve) => {
+            let data = '';
+            req.on('data', (chunk) => {
+                data += chunk;
+            });
+            req.on('end', () => {
+                _resolve(data.toString());
+            });
+        });
+        const body = JSON.parse(b);
+        if (!('stack' in body)) {
+            throw new TypeError('Need to pass stack');
+        }
+        const stack = body.stack;
+        const guess = await editorGuess;
+        const didOpen = await (0, open_in_editor_1.launchEditor)({
+            colNumber: stack.originalColumnNumber,
+            editor: guess[0],
+            fileName: path_1.default.resolve(process.cwd(), stack.originalFileName),
+            lineNumber: stack.originalLineNumber,
+            vsCodeNewWindow: false,
+        });
+        res.setHeader('content-type', 'application/json');
+        res.writeHead(200);
+        res.end(JSON.stringify({
+            success: didOpen,
+        }));
+    }
+    catch (err) {
+        res.setHeader('content-type', 'application/json');
+        res.writeHead(200);
+        res.end(JSON.stringify({
+            success: false,
+        }));
+    }
+};
+const handleFavicon = (_, response) => {
+    const filePath = path_1.default.join(__dirname, '..', 'web', 'favicon.png');
+    const stat = (0, fs_1.statSync)(filePath);
+    response.writeHead(200, {
+        'Content-Type': 'image/png',
+        'Content-Length': stat.size,
+    });
+    const readStream = (0, fs_1.createReadStream)(filePath);
+    readStream.pipe(response);
+};
+const handleRoutes = (hash, request, response) => {
+    const url = new URL(request.url, 'http://localhost');
+    if (url.pathname === '/api/update') {
+        return handleUpdate(request, response);
+    }
+    if (url.pathname === '/api/project-info') {
+        return handleProjectInfo(request, response);
+    }
+    if (url.pathname === '/api/file-source') {
+        return handleFileSource(url.search, request, response);
+    }
+    if (url.pathname === '/api/open-in-editor') {
+        return handleOpenInEditor(request, response);
+    }
+    if (url.pathname === '/remotion.png') {
+        return handleFavicon(request, response);
+    }
+    if (url.pathname.startsWith(hash)) {
+        const root = path_1.default.join(process.cwd(), 'public');
+        return (0, serve_static_1.serveStatic)(root, hash, request, response);
+    }
+    return handleFallback(hash, request, response);
+};
+exports.handleRoutes = handleRoutes;

package/dist/preview-server/serve-static.d.ts

@@ -0,0 +1,9 @@
+/*!
+ * serve-static
+ * Copyright(c) 2010 Sencha Inc.
+ * Copyright(c) 2011 TJ Holowaychuk
+ * Copyright(c) 2014-2016 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+import { IncomingMessage, ServerResponse } from 'http';
+export declare const serveStatic: (root: string, hash: string, req: IncomingMessage, res: ServerResponse) => Promise<void>;

package/dist/preview-server/serve-static.js

@@ -0,0 +1,77 @@
+"use strict";
+/*!
+ * serve-static
+ * Copyright(c) 2010 Sencha Inc.
+ * Copyright(c) 2011 TJ Holowaychuk
+ * Copyright(c) 2014-2016 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serveStatic = void 0;
+const renderer_1 = require("@remotion/renderer");
+const fs_1 = require("fs");
+const path_1 = require("path");
+const middleware_1 = require("./dev-middleware/middleware");
+const range_parser_1 = require("./dev-middleware/range-parser");
+const serveStatic = async function (root, hash, req, res) {
+    if (req.method !== 'GET' && req.method !== 'HEAD') {
+        // method not allowed
+        res.statusCode = 405;
+        res.setHeader('Allow', 'GET, HEAD');
+        res.setHeader('Content-Length', '0');
+        res.end();
+        return;
+    }
+    const path = (0, path_1.join)(root, new URL(req.url, 'http://localhost').pathname.replace(new RegExp(`^${hash}`), ''));
+    if (!renderer_1.RenderInternals.isPathInside(path, root)) {
+        res.writeHead(500);
+        res.write('Not allowed to read');
+        res.end();
+        return;
+    }
+    const exists = (0, fs_1.existsSync)(path);
+    if (!exists) {
+        res.writeHead(404);
+        res.write('Not found');
+        res.end();
+        return;
+    }
+    const lstat = await fs_1.promises.lstat(path);
+    const isDirectory = lstat.isDirectory();
+    if (isDirectory) {
+        res.writeHead(500);
+        res.write('Is a directory');
+        res.end();
+        return;
+    }
+    const hasRange = req.headers.range && lstat.size;
+    if (!hasRange) {
+        const readStream = (0, fs_1.createReadStream)(path);
+        res.setHeader('content-type', renderer_1.RenderInternals.mime.lookup(path) || 'application/octet-stream');
+        res.setHeader('content-length', lstat.size);
+        res.writeHead(200);
+        readStream.pipe(res);
+        return;
+    }
+    const range = (0, range_parser_1.parseRange)(lstat.size, req.headers.range);
+    if (typeof range === 'object' && range.type === 'bytes') {
+        const { start, end } = range[0];
+        res.setHeader('content-type', renderer_1.RenderInternals.mime.lookup(path) || 'application/octet-stream');
+        res.setHeader('content-range', (0, middleware_1.getValueContentRangeHeader)('bytes', lstat.size, {
+            end,
+            start,
+        }));
+        res.setHeader('content-length', end - start + 1);
+        res.writeHead(206);
+        const readStream = (0, fs_1.createReadStream)(path, {
+            start,
+            end,
+        });
+        readStream.pipe(res);
+        return;
+    }
+    res.statusCode = 416;
+    res.setHeader('Content-Range', `bytes */${lstat.size}`);
+    res.end();
+};
+exports.serveStatic = serveStatic;

package/dist/preview-server/start-server.d.ts

@@ -0,0 +1,8 @@
+import { WebpackOverrideFn } from 'remotion';
+export declare const startServer: (entry: string, userDefinedComponent: string, options?: {
+    webpackOverride?: WebpackOverrideFn;
+    inputProps?: object;
+    envVariables?: Record<string, string>;
+    port: number | null;
+    maxTimelineTracks?: number;
+}) => Promise<number>;

package/dist/preview-server/start-server.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startServer = void 0;
+const bundler_1 = require("@remotion/bundler");
+const renderer_1 = require("@remotion/renderer");
+const crypto_1 = __importDefault(require("crypto"));
+const fs_1 = __importDefault(require("fs"));
+const http_1 = __importDefault(require("http"));
+const os_1 = __importDefault(require("os"));
+const path_1 = __importDefault(require("path"));
+const remotion_1 = require("remotion");
+const dev_middleware_1 = require("./dev-middleware");
+const hot_middleware_1 = require("./hot-middleware");
+const routes_1 = require("./routes");
+const startServer = async (entry, userDefinedComponent, options) => {
+    var _a, _b, _c, _d, _e;
+    const tmpDir = await fs_1.default.promises.mkdtemp(path_1.default.join(os_1.default.tmpdir(), 'react-motion-graphics'));
+    const config = bundler_1.BundlerInternals.webpackConfig({
+        entry,
+        userDefinedComponent,
+        outDir: tmpDir,
+        environment: 'development',
+        webpackOverride: (_a = options === null || options === void 0 ? void 0 : options.webpackOverride) !== null && _a !== void 0 ? _a : remotion_1.Internals.getWebpackOverrideFn(),
+        inputProps: (_b = options === null || options === void 0 ? void 0 : options.inputProps) !== null && _b !== void 0 ? _b : {},
+        envVariables: (_c = options === null || options === void 0 ? void 0 : options.envVariables) !== null && _c !== void 0 ? _c : {},
+        maxTimelineTracks: (_d = options === null || options === void 0 ? void 0 : options.maxTimelineTracks) !== null && _d !== void 0 ? _d : 15,
+        entryPoints: [
+            require.resolve('./hot-middleware/client'),
+            require.resolve('./error-overlay/entry-basic.js'),
+        ],
+    });
+    const compiler = (0, bundler_1.webpack)(config);
+    const hash = `/static-${crypto_1.default.randomBytes(6).toString('hex')}`;
+    const wdmMiddleware = (0, dev_middleware_1.wdm)(compiler);
+    const whm = (0, hot_middleware_1.webpackHotMiddleware)(compiler);
+    const server = http_1.default.createServer((request, response) => {
+        new Promise((resolve) => {
+            wdmMiddleware(request, response, () => {
+                resolve();
+            });
+        })
+            .then(() => {
+            return new Promise((resolve) => {
+                whm(request, response, () => {
+                    resolve();
+                });
+            });
+        })
+            .then(() => {
+            (0, routes_1.handleRoutes)(hash, request, response);
+        })
+            .catch((err) => {
+            response.setHeader('content-type', 'application/json');
+            response.writeHead(500);
+            response.end(JSON.stringify({
+                err: err.message,
+            }));
+        });
+    });
+    const desiredPort = (_e = options === null || options === void 0 ? void 0 : options.port) !== null && _e !== void 0 ? _e : undefined;
+    const port = await renderer_1.RenderInternals.getDesiredPort(desiredPort, 3000, 3100);
+    server.listen(port);
+    return port;
+};
+exports.startServer = startServer;

package/dist/preview-server/static-preview.d.ts

@@ -0,0 +1 @@
+export declare const indexHtml: (staticHash: string, baseDir: string, editorName: string | null) => string;

package/dist/preview-server/static-preview.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.indexHtml = void 0;
+const path_1 = __importDefault(require("path"));
+const indexHtml = (staticHash, baseDir, editorName) => `
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" />
+		<link rel="icon" type="image/png" href="/remotion.png" />
+		<title>Remotion Preview</title>
+	</head>
+	<body>
+    <script>window.remotion_staticBase = "${staticHash}";</script>
+		<div id="video-container"></div>
+		<div id="explainer-container"></div>
+		${editorName
+    ? `<script>window.remotion_editorName = "${editorName}";</script>`
+    : '<script>window.remotion_editorName = null;</script>'}
+		<script>window.remotion_projectName = ${JSON.stringify(path_1.default.basename(process.cwd()))};</script>
+		<script>window.remotion_cwd = ${JSON.stringify(process.cwd())};</script>
+		
+		<div id="container"></div>
+		<div id="menuportal-0"></div>
+		<div id="menuportal-1"></div>
+		<div id="menuportal-2"></div>
+		<div id="menuportal-3"></div>
+		<div id="menuportal-4"></div>
+		<div id="menuportal-5"></div>
+		<div id="remotion-error-overlay"></div>
+		<script src="${baseDir}bundle.js"></script>
+	</body>
+</html>
+`.trim();
+exports.indexHtml = indexHtml;

package/dist/preview-server/update-available.d.ts

@@ -0,0 +1,11 @@
+import { PackageManager } from './get-package-manager';
+declare type Info = {
+    currentVersion: string;
+    latestVersion: string;
+    updateAvailable: boolean;
+    timedOut: boolean;
+    packageManager: PackageManager | 'unknown';
+};
+export declare const getRemotionVersion: () => any;
+export declare const isUpdateAvailableWithTimeout: () => Promise<Info>;
+export {};

package/dist/preview-server/update-available.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isUpdateAvailableWithTimeout = exports.getRemotionVersion = void 0;
+const semver_1 = __importDefault(require("semver"));
+const get_latest_remotion_version_1 = require("../get-latest-remotion-version");
+const get_package_manager_1 = require("./get-package-manager");
+const isUpdateAvailable = async (currentVersion) => {
+    const latest = await (0, get_latest_remotion_version_1.getLatestRemotionVersion)();
+    const pkgManager = (0, get_package_manager_1.getPackageManager)();
+    return {
+        updateAvailable: semver_1.default.lt(currentVersion, latest),
+        currentVersion,
+        latestVersion: latest,
+        timedOut: false,
+        packageManager: pkgManager === 'unknown' ? 'unknown' : pkgManager.manager,
+    };
+};
+const getRemotionVersion = () => {
+    // careful when refactoring this file, path must be adjusted
+    const packageJson = require('../../package.json');
+    const { version } = packageJson;
+    return version;
+};
+exports.getRemotionVersion = getRemotionVersion;
+const isUpdateAvailableWithTimeout = () => {
+    const version = (0, exports.getRemotionVersion)();
+    const threeSecTimeout = new Promise((resolve) => {
+        const pkgManager = (0, get_package_manager_1.getPackageManager)();
+        setTimeout(() => {
+            resolve({
+                currentVersion: version,
+                latestVersion: version,
+                updateAvailable: false,
+                timedOut: true,
+                packageManager: pkgManager === 'unknown' ? 'unknown' : pkgManager.manager,
+            });
+        }, 3000);
+    });
+    return Promise.race([threeSecTimeout, isUpdateAvailable(version)]);
+};
+exports.isUpdateAvailableWithTimeout = isUpdateAvailableWithTimeout;

package/dist/preview-server/webpack-cache.d.ts

@@ -0,0 +1,12 @@
+declare type Environment = 'development' | 'production';
+declare global {
+    namespace NodeJS {
+        interface ProcessVersions {
+            pnp?: string;
+        }
+    }
+}
+export declare const clearCache: (environment: Environment, inputProps: object | null) => Promise<void>;
+export declare const getWebpackCacheName: (environment: Environment, inputProps: object | null) => string;
+export declare const cacheExists: (environment: Environment, inputProps: object | null) => boolean;
+export {};

package/dist/preview-server/webpack-cache.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cacheExists = exports.getWebpackCacheName = exports.clearCache = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const remotion_1 = require("remotion");
+// Inlined from https://github.com/webpack/webpack/blob/4c2ee7a4ddb8db2362ca83b6c4190523387ba7ee/lib/config/defaults.js#L265
+// An algorithm to determine where Webpack will cache the depencies
+const getWebpackCacheDir = () => {
+    const cwd = process.cwd();
+    let dir = cwd;
+    for (;;) {
+        try {
+            if (fs_1.default.statSync(path_1.default.join(dir, 'package.json')).isFile()) {
+                break;
+            }
+            // eslint-disable-next-line no-empty
+        }
+        catch (e) { }
+        const parent = path_1.default.dirname(dir);
+        if (dir === parent) {
+            dir = undefined;
+            break;
+        }
+        dir = parent;
+    }
+    if (!dir) {
+        return path_1.default.resolve(cwd, '.cache/webpack');
+    }
+    if (process.versions.pnp === '1') {
+        return path_1.default.resolve(dir, '.pnp/.cache/webpack');
+    }
+    if (process.versions.pnp === '3') {
+        return path_1.default.resolve(dir, '.yarn/.cache/webpack');
+    }
+    return path_1.default.resolve(dir, 'node_modules/.cache/webpack');
+};
+const remotionCacheLocation = (environment, inputProps) => {
+    return path_1.default.join(getWebpackCacheDir(), (0, exports.getWebpackCacheName)(environment, inputProps));
+};
+const clearCache = (environment, inputProps) => {
+    var _a;
+    return ((_a = fs_1.default.promises.rm) !== null && _a !== void 0 ? _a : fs_1.default.promises.rmdir)(remotionCacheLocation(environment, inputProps), {
+        recursive: true,
+    });
+};
+exports.clearCache = clearCache;
+const getWebpackCacheName = (environment, inputProps) => {
+    // In development, let's reset the cache when input props
+    // are changing, because they are injected using Webpack and if changed,
+    // it will get the cached version
+    if (environment === 'development') {
+        return `remotion-v3-${environment}-${(0, remotion_1.random)(JSON.stringify(inputProps))}`;
+    }
+    // In production, the cache is independent from input props because
+    // they are passed over URL params. Speed is mostly important in production.
+    return `remotion-v3-${environment}`;
+};
+exports.getWebpackCacheName = getWebpackCacheName;
+const cacheExists = (environment, inputProps) => {
+    return fs_1.default.existsSync(remotionCacheLocation(environment, inputProps));
+};
+exports.cacheExists = cacheExists;

package/dist/webpack-cache.d.ts

@@ -0,0 +1,12 @@
+declare type Environment = 'development' | 'production';
+declare global {
+    namespace NodeJS {
+        interface ProcessVersions {
+            pnp?: string;
+        }
+    }
+}
+export declare const clearCache: (environment: Environment, inputProps: object | null) => Promise<void>;
+export declare const getWebpackCacheName: (environment: Environment, inputProps: object | null) => string;
+export declare const cacheExists: (environment: Environment, inputProps: object | null) => boolean;
+export {};

package/dist/webpack-cache.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cacheExists = exports.getWebpackCacheName = exports.clearCache = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const remotion_1 = require("remotion");
+// Inlined from https://github.com/webpack/webpack/blob/4c2ee7a4ddb8db2362ca83b6c4190523387ba7ee/lib/config/defaults.js#L265
+// An algorithm to determine where Webpack will cache the depencies
+const getWebpackCacheDir = () => {
+    const cwd = process.cwd();
+    let dir = cwd;
+    for (;;) {
+        try {
+            if (fs_1.default.statSync(path_1.default.join(dir, 'package.json')).isFile()) {
+                break;
+            }
+            // eslint-disable-next-line no-empty
+        }
+        catch (e) { }
+        const parent = path_1.default.dirname(dir);
+        if (dir === parent) {
+            dir = undefined;
+            break;
+        }
+        dir = parent;
+    }
+    if (!dir) {
+        return path_1.default.resolve(cwd, '.cache/webpack');
+    }
+    if (process.versions.pnp === '1') {
+        return path_1.default.resolve(dir, '.pnp/.cache/webpack');
+    }
+    if (process.versions.pnp === '3') {
+        return path_1.default.resolve(dir, '.yarn/.cache/webpack');
+    }
+    return path_1.default.resolve(dir, 'node_modules/.cache/webpack');
+};
+const remotionCacheLocation = (environment, inputProps) => {
+    return path_1.default.join(getWebpackCacheDir(), (0, exports.getWebpackCacheName)(environment, inputProps));
+};
+const clearCache = (environment, inputProps) => {
+    var _a;
+    return ((_a = fs_1.default.promises.rm) !== null && _a !== void 0 ? _a : fs_1.default.promises.rmdir)(remotionCacheLocation(environment, inputProps), {
+        recursive: true,
+    });
+};
+exports.clearCache = clearCache;
+const getWebpackCacheName = (environment, inputProps) => {
+    // In development, let's reset the cache when input props
+    // are changing, because they are injected using Webpack and if changed,
+    // it will get the cached version
+    if (environment === 'development') {
+        return `remotion-v3-${environment}-${(0, remotion_1.random)(JSON.stringify(inputProps))}`;
+    }
+    // In production, the cache is independent from input props because
+    // they are passed over URL params. Speed is mostly important in production.
+    return `remotion-v3-${environment}`;
+};
+exports.getWebpackCacheName = getWebpackCacheName;
+const cacheExists = (environment, inputProps) => {
+    return fs_1.default.existsSync(remotionCacheLocation(environment, inputProps));
+};
+exports.cacheExists = cacheExists;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.0.18",
+	"version": "3.0.19",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -23,16 +23,16 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.0.18",
-		"@remotion/media-utils": "3.0.18",
-		"@remotion/player": "3.0.18",
-		"@remotion/renderer": "3.0.18",
+		"@remotion/bundler": "3.0.19",
+		"@remotion/media-utils": "3.0.19",
+		"@remotion/player": "3.0.19",
+		"@remotion/renderer": "3.0.19",
 		"better-opn": "2.1.1",
 		"chalk": "4.1.2",
 		"dotenv": "9.0.2",
 		"execa": "5.1.1",
 		"minimist": "1.2.6",
-		"remotion": "3.0.18",
+		"remotion": "3.0.19",
 		"semver": "7.3.5"
 	},
 	"peerDependencies": {
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "64eadd48b303d0f627ed5883f9200345af002ee2"
+	"gitHead": "388ef0a2eacf9dbadbc860fdb8d6b3e32acb10f3"
 }