@remotion/cli 4.0.0-imgloading.2 → 4.0.0-lambda.3

package/dist/preview-server/error-overlay/remotion-overlay/StackFrame.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackElement = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("./Button");
+const carets_1 = require("./carets");
+const CodeFrame_1 = require("./CodeFrame");
+const format_location_1 = require("./format-location");
+const location = {
+    color: 'rgba(255, 255, 255, 0.6)',
+    fontFamily: 'monospace',
+};
+const header = {
+    paddingLeft: 14,
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingRight: 14,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottom: '1px solid rgb(66, 144, 245)',
+    backgroundColor: 'black',
+};
+const left = {
+    paddingRight: 14,
+    flex: 1,
+};
+const fnName = {
+    fontSize: 14,
+    marginBottom: 3,
+};
+const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
+    var _a;
+    const [showCodeFrame, setShowCodeFrame] = (0, react_1.useState)(() => {
+        var _a, _b;
+        return (!((_a = s.originalFileName) === null || _a === void 0 ? void 0 : _a.includes('node_modules')) &&
+            !((_b = s.originalFileName) === null || _b === void 0 ? void 0 : _b.startsWith('webpack/'))) ||
+            isFirst;
+    });
+    const toggleCodeFrame = (0, react_1.useCallback)(() => {
+        setShowCodeFrame((f) => !f);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: header, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? ((0, jsx_runtime_1.jsxs)("div", { style: location, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? (0, jsx_runtime_1.jsx)(carets_1.CaretDown, {}) : (0, jsx_runtime_1.jsx)(carets_1.CaretRight, {}) })) : null] }), (0, jsx_runtime_1.jsx)("div", { children: s.originalScriptCode &&
+                    s.originalScriptCode.length > 0 &&
+                    showCodeFrame ? ((0, jsx_runtime_1.jsx)(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })] }));
+};
+exports.StackElement = StackElement;

package/dist/preview-server/error-overlay/remotion-overlay/Symbolicating.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Symbolicating: React.FC;

package/dist/preview-server/error-overlay/remotion-overlay/Symbolicating.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Symbolicating = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Symbolicating = (props) => {
+    return ((0, jsx_runtime_1.jsxs)("svg", { id: "loading", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "16", height: "16", fill: "white", ...props, children: [(0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(0 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(45 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.125s" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(90 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.25s" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(135 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.375s" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(180 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.5s" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(225 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.675s" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(270 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.75s" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(315 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.875s" }) })] }));
+};
+exports.Symbolicating = Symbolicating;

package/dist/preview-server/error-overlay/remotion-overlay/carets.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const CaretRight: () => JSX.Element;
+export declare const CaretDown: () => JSX.Element;

package/dist/preview-server/error-overlay/remotion-overlay/carets.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaretDown = exports.CaretRight = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CaretRight = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { style: { height: 20 }, "aria-hidden": "true", focusable: "false", role: "img", viewBox: "0 0 192 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }) }));
+};
+exports.CaretRight = CaretRight;
+const CaretDown = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: { height: 20 }, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
+};
+exports.CaretDown = CaretDown;

package/dist/preview-server/error-overlay/remotion-overlay/format-location.d.ts

@@ -0,0 +1 @@
+export declare const formatLocation: (location: string) => string;

package/dist/preview-server/error-overlay/remotion-overlay/format-location.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatLocation = void 0;
+const formatLocation = (location) => {
+    if (location.startsWith('webpack://')) {
+        return location.replace('webpack://', '');
+    }
+    return location;
+};
+exports.formatLocation = formatLocation;

package/dist/preview-server/error-overlay/remotion-overlay/index.d.ts

@@ -0,0 +1 @@
+export declare const mountRemotionOverlay: () => void;

package/dist/preview-server/error-overlay/remotion-overlay/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mountRemotionOverlay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = __importDefault(require("react-dom/client"));
+const Overlay_1 = require("./Overlay");
+const mountRemotionOverlay = () => {
+    if (client_1.default.createRoot) {
+        client_1.default.createRoot(document.getElementById('remotion-error-overlay')).render((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, {}));
+    }
+    else {
+        client_1.default.render((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, {}), document.getElementById('remotion-error-overlay'));
+    }
+};
+exports.mountRemotionOverlay = mountRemotionOverlay;

package/dist/preview-server/get-package-manager.d.ts

@@ -0,0 +1,9 @@
+export declare type PackageManager = 'npm' | 'yarn' | 'pnpm';
+declare type LockfilePath = {
+    manager: PackageManager;
+    path: string;
+    installCommand: string;
+};
+export declare const lockFilePaths: LockfilePath[];
+export declare const getPackageManager: () => LockfilePath | 'unknown';
+export {};

package/dist/preview-server/get-package-manager.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.getPackageManager = exports.lockFilePaths = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+exports.lockFilePaths = [
+    { path: 'package-lock.json', manager: 'npm', installCommand: 'npm i' },
+    {
+        path: 'yarn.lock',
+        manager: 'yarn',
+        installCommand: 'yarn add',
+    },
+    {
+        path: 'pnpm-lock.yaml',
+        manager: 'pnpm',
+        installCommand: 'pnpm i',
+    },
+];
+const getPackageManager = () => {
+    const existingPkgManagers = exports.lockFilePaths.filter((p) => fs_1.default.existsSync(path_1.default.join(process.cwd(), p.path)));
+    if (existingPkgManagers.length === 0) {
+        return 'unknown';
+    }
+    if (existingPkgManagers.length > 1) {
+        const error = [
+            `Found multiple lockfiles:`,
+            ...existingPkgManagers.map((m) => {
+                return `- ${m.path}`;
+            }),
+            '',
+            'This can lead to bugs, delete all but one of these files and run this command again.',
+        ].join('\n');
+        throw new Error(error);
+    }
+    return existingPkgManagers[0];
+};
+exports.getPackageManager = getPackageManager;

package/dist/preview-server/hot-middleware/client.d.ts

@@ -0,0 +1,19 @@
+import { HotMiddlewareMessage } from './types';
+declare function eventSourceWrapper(): {
+    addMessageListener(fn: (msg: MessageEvent) => void): void;
+};
+declare global {
+    interface Window {
+        __whmEventSourceWrapper: {
+            [key: string]: ReturnType<typeof eventSourceWrapper>;
+        };
+        __webpack_hot_middleware_reporter__: Reporter;
+    }
+}
+declare type Reporter = ReturnType<typeof createReporter>;
+declare function createReporter(): {
+    cleanProblemsCache(): void;
+    problems(type: 'errors' | 'warnings', obj: HotMiddlewareMessage): boolean;
+    success: () => undefined;
+};
+export {};

package/dist/preview-server/hot-middleware/client.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable no-console */
+/**
+ * Source code is adapted from
+ * https://github.com/webpack-contrib/webpack-hot-middleware#readme
+ * and rewritten in TypeScript. This file is MIT licensed
+ */
+const process_update_1 = require("./process-update");
+const strip_ansi_1 = require("./strip-ansi");
+const types_1 = require("./types");
+if (typeof window === 'undefined') {
+    // do nothing
+}
+else if (typeof window.EventSource === 'undefined') {
+    console.warn('Unsupported browser: You need a browser that supports EventSource ');
+}
+else {
+    connect();
+}
+function eventSourceWrapper() {
+    let source;
+    let lastActivity = Date.now();
+    const listeners = [];
+    init();
+    const timer = setInterval(() => {
+        if (Date.now() - lastActivity > types_1.hotMiddlewareOptions.timeout) {
+            handleDisconnect();
+        }
+    }, types_1.hotMiddlewareOptions.timeout / 2);
+    function init() {
+        source = new window.EventSource(types_1.hotMiddlewareOptions.path);
+        source.onopen = handleOnline;
+        source.onerror = handleDisconnect;
+        source.onmessage = handleMessage;
+    }
+    function handleOnline() {
+        lastActivity = Date.now();
+    }
+    function handleMessage(event) {
+        lastActivity = Date.now();
+        for (let i = 0; i < listeners.length; i++) {
+            listeners[i](event);
+        }
+    }
+    function handleDisconnect() {
+        clearInterval(timer);
+        source.close();
+        setTimeout(init, types_1.hotMiddlewareOptions.timeout);
+    }
+    return {
+        addMessageListener(fn) {
+            listeners.push(fn);
+        },
+    };
+}
+function getEventSourceWrapper() {
+    if (!window.__whmEventSourceWrapper) {
+        window.__whmEventSourceWrapper = {};
+    }
+    if (!window.__whmEventSourceWrapper[types_1.hotMiddlewareOptions.path]) {
+        // cache the wrapper for other entries loaded on
+        // the same page with the same hotMiddlewareOptions.path
+        window.__whmEventSourceWrapper[types_1.hotMiddlewareOptions.path] =
+            eventSourceWrapper();
+    }
+    return window.__whmEventSourceWrapper[types_1.hotMiddlewareOptions.path];
+}
+function connect() {
+    getEventSourceWrapper().addMessageListener(handleMessage);
+    function handleMessage(event) {
+        if (event.data === '\uD83D\uDC93') {
+            return;
+        }
+        try {
+            processMessage(JSON.parse(event.data));
+        }
+        catch (ex) {
+            if (types_1.hotMiddlewareOptions.warn) {
+                console.warn('Invalid HMR message: ' + event.data + '\n' + ex);
+            }
+        }
+    }
+}
+// the reporter needs to be a singleton on the page
+// in case the client is being used by multiple bundles
+// we only want to report once.
+// all the errors will go to all clients
+const singletonKey = '__webpack_hot_middleware_reporter__';
+let reporter;
+if (typeof window !== 'undefined') {
+    if (!window[singletonKey]) {
+        window[singletonKey] = createReporter();
+    }
+    reporter = window[singletonKey];
+}
+function createReporter() {
+    const styles = {
+        errors: 'color: #ff0000;',
+        warnings: 'color: #999933;',
+    };
+    let previousProblems = null;
+    function log(type, obj) {
+        if (obj.action === 'building') {
+            console.log('[Fast Refresh] Building');
+            return;
+        }
+        const newProblems = obj[type]
+            .map((msg) => {
+            return (0, strip_ansi_1.stripAnsi)(msg);
+        })
+            .join('\n');
+        if (previousProblems === newProblems) {
+            return;
+        }
+        previousProblems = newProblems;
+        const style = styles[type];
+        const name = obj.name ? "'" + obj.name + "' " : '';
+        const title = '[Fast Refresh] bundle ' + name + 'has ' + obj[type].length + ' ' + type;
+        // NOTE: console.warn or console.error will print the stack trace
+        // which isn't helpful here, so using console.log to escape it.
+        if (console.group && console.groupEnd) {
+            console.group('%c' + title, style);
+            console.log('%c' + newProblems, style);
+            console.groupEnd();
+        }
+        else {
+            console.log('%c' + title + '\n\t%c' + newProblems.replace(/\n/g, '\n\t'), style + 'font-weight: bold;', style + 'font-weight: normal;');
+        }
+    }
+    return {
+        cleanProblemsCache() {
+            previousProblems = null;
+        },
+        problems(type, obj) {
+            if (types_1.hotMiddlewareOptions.warn) {
+                log(type, obj);
+            }
+            return true;
+        },
+        success: () => undefined,
+    };
+}
+function processMessage(obj) {
+    var _a, _b;
+    switch (obj.action) {
+        case 'building':
+            (_a = window.remotion_isBuilding) === null || _a === void 0 ? void 0 : _a.call(window);
+            break;
+        case 'sync':
+        case 'built': {
+            let applyUpdate = true;
+            if (obj.errors.length > 0) {
+                if (reporter)
+                    reporter.problems('errors', obj);
+                applyUpdate = false;
+            }
+            else if (obj.warnings.length > 0) {
+                if (reporter) {
+                    const overlayShown = reporter.problems('warnings', obj);
+                    applyUpdate = overlayShown;
+                }
+            }
+            else if (reporter) {
+                reporter.cleanProblemsCache();
+                reporter.success();
+            }
+            if (applyUpdate) {
+                (_b = window.remotion_finishedBuilding) === null || _b === void 0 ? void 0 : _b.call(window);
+                (0, process_update_1.processUpdate)(obj.hash, obj.modules, types_1.hotMiddlewareOptions);
+            }
+            break;
+        }
+        default:
+            break;
+    }
+}

package/dist/preview-server/hot-middleware/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Source code is adapted from
+ * https://github.com/webpack-contrib/webpack-hot-middleware#readme
+ * and rewritten in TypeScript. This file is MIT licensed
+ */
+import { webpack } from '@remotion/bundler';
+import { IncomingMessage, ServerResponse } from 'http';
+export declare const webpackHotMiddleware: (compiler: webpack.Compiler) => (req: IncomingMessage, res: ServerResponse, next: () => void) => void;

package/dist/preview-server/hot-middleware/index.js

@@ -0,0 +1,150 @@
+"use strict";
+/**
+ * Source code is adapted from
+ * https://github.com/webpack-contrib/webpack-hot-middleware#readme
+ * and rewritten in TypeScript. This file is MIT licensed
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.webpackHotMiddleware = void 0;
+const url_1 = require("url");
+const log_1 = require("../../log");
+const types_1 = require("./types");
+const pathMatch = function (url, path) {
+    try {
+        return (0, url_1.parse)(url).pathname === path;
+    }
+    catch (e) {
+        return false;
+    }
+};
+const webpackHotMiddleware = (compiler) => {
+    const eventStream = createEventStream(types_1.hotMiddlewareOptions.heartbeat);
+    let latestStats = null;
+    compiler.hooks.invalid.tap('remotion', onInvalid);
+    compiler.hooks.done.tap('remotion', onDone);
+    function onInvalid() {
+        latestStats = null;
+        log_1.Log.info('webpack building...');
+        eventStream === null || eventStream === void 0 ? void 0 : eventStream.publish({
+            action: 'building',
+        });
+    }
+    function onDone(statsResult) {
+        // Keep hold of latest stats so they can be propagated to new clients
+        latestStats = statsResult;
+        publishStats('built', latestStats, eventStream);
+    }
+    const middleware = function (req, res, next) {
+        if (!pathMatch(req.url, types_1.hotMiddlewareOptions.path))
+            return next();
+        eventStream === null || eventStream === void 0 ? void 0 : eventStream.handler(req, res);
+        if (latestStats) {
+            publishStats('sync', latestStats, eventStream);
+        }
+    };
+    return middleware;
+};
+exports.webpackHotMiddleware = webpackHotMiddleware;
+function createEventStream(heartbeat) {
+    let clientId = 0;
+    let clients = {};
+    function everyClient(fn) {
+        Object.keys(clients).forEach((id) => {
+            fn(clients[id]);
+        });
+    }
+    const interval = setInterval(() => {
+        everyClient((client) => {
+            client.write('data: \uD83D\uDC93\n\n');
+        });
+    }, heartbeat).unref();
+    return {
+        close() {
+            clearInterval(interval);
+            everyClient((client) => {
+                if (!client.finished)
+                    client.end();
+            });
+            clients = {};
+        },
+        handler(req, res) {
+            const headers = {
+                'Access-Control-Allow-Origin': '*',
+                'Content-Type': 'text/event-stream;charset=utf-8',
+                'Cache-Control': 'no-cache, no-transform',
+            };
+            const isHttp1 = !(parseInt(req.httpVersion, 10) >= 2);
+            if (isHttp1) {
+                req.socket.setKeepAlive(true);
+                Object.assign(headers, {
+                    Connection: 'keep-alive',
+                });
+            }
+            res.writeHead(200, headers);
+            res.write('\n');
+            const id = clientId++;
+            clients[id] = res;
+            req.on('close', () => {
+                if (!res.finished)
+                    res.end();
+                delete clients[id];
+            });
+        },
+        publish(payload) {
+            everyClient((client) => {
+                client.write('data: ' + JSON.stringify(payload) + '\n\n');
+            });
+        },
+    };
+}
+function publishStats(action, statsResult, eventStream) {
+    const stats = statsResult.toJson({
+        all: false,
+        cached: true,
+        children: true,
+        modules: true,
+        timings: true,
+        hash: true,
+    });
+    // For multi-compiler, stats will be an object with a 'children' array of stats
+    const bundles = extractBundles(stats);
+    bundles.forEach((_stats) => {
+        let name = _stats.name || '';
+        // Fallback to compilation name in case of 1 bundle (if it exists)
+        if (bundles.length === 1 && !name && statsResult.compilation) {
+            name = statsResult.compilation.name || '';
+        }
+        log_1.Log.info(`webpack built in ${_stats.time}ms`);
+        eventStream === null || eventStream === void 0 ? void 0 : eventStream.publish({
+            name,
+            action,
+            time: _stats.time,
+            hash: _stats.hash,
+            warnings: _stats.warnings || [],
+            errors: _stats.errors || [],
+            modules: buildModuleMap(_stats.modules),
+        });
+    });
+}
+function extractBundles(stats) {
+    var _a;
+    // Stats has modules, single bundle
+    if (stats.modules)
+        return [stats];
+    // Stats has children, multiple bundles
+    if ((_a = stats.children) === null || _a === void 0 ? void 0 : _a.length)
+        return stats.children;
+    // Not sure, assume single
+    return [stats];
+}
+function buildModuleMap(modules) {
+    const map = {};
+    if (!modules) {
+        return map;
+    }
+    modules.forEach((module) => {
+        const id = module.id;
+        map[id] = module.name;
+    });
+    return map;
+}

package/dist/preview-server/hot-middleware/process-update.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Source code is adapted from
+ * https://github.com/webpack-contrib/webpack-hot-middleware#readme
+ * and rewritten in TypeScript. This file is MIT licensed
+ */
+/**
+ * Based heavily on https://github.com/webpack/webpack/blob/
+ *  c0afdf9c6abc1dd70707c594e473802a566f7b6e/hot/only-dev-server.js
+ * Original copyright Tobias Koppers @sokra (MIT license)
+ */
+import { HotMiddlewareOptions, ModuleMap } from './types';
+export declare const processUpdate: (hash: string | undefined, moduleMap: ModuleMap, options: HotMiddlewareOptions) => void;