@remotion/cli 4.0.0-lambda.1 → 4.0.0-newpathfunctions.13

package/dist/preview-server/error-overlay/react-overlay/utils/open-in-editor.js

@@ -28,15 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.launchEditor = exports.guessEditor = exports.getDisplayNameForEditor = void 0;
-/*
-    Source code adapted from https://github.com/facebook/create-react-app/tree/main/packages/react-error-overlay and refactored in Typescript. This file is MIT-licensed.
-*/
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 const child_process_1 = __importStar(require("child_process"));
 const fs_1 = __importDefault(require("fs"));
 const os_1 = __importDefault(require("os"));
@@ -89,6 +80,7 @@ const editorNames = [
     'phpstorm',
     'pycharm',
     'rubymine',
+    'subl',
     'sublime_text',
     'vim',
     'webstorm',
@@ -170,6 +162,7 @@ const displayNameForEditor = {
     pycharm: 'PyCharm',
     rider: 'Rider',
     rubymine: 'RubyMine',
+    subl: 'Sublime Text',
     sublime_text: 'Sublime Text',
     vim: 'vim',
     vscodium: 'VS Codium',
@@ -224,7 +217,7 @@ const COMMON_EDITORS_LINUX = {
     'phpstorm.sh': 'phpstorm',
     'pycharm.sh': 'pycharm',
     'rubymine.sh': 'rubymine',
-    sublime_text: 'sublime_text',
+    sublime_text: 'subl',
     vim: 'vim',
     'webstorm.sh': 'webstorm',
     'goland.sh': 'goland',
@@ -261,6 +254,7 @@ const COMMON_EDITORS_WIN = [
 const WINDOWS_FILE_NAME_WHITELIST = /^([A-Za-z]:[/\\])?(?:[\x2D-9A-Z\\_a-z\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0560-\u0588\u05D0-\u05EA\u05EF-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16F1-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1878\u1880-\u1884\u1887-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1C80-\u1C88\u1C90-\u1CBA\u1CBD-\u1CBF\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312F\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FEF\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA7B9\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA8FE\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDE80-\uDE9C\uDEA0-\uDED0\uDF00-\uDF1F\uDF2D-\uDF40\uDF42-\uDF49\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF]|\uD801[\uDC00-\uDC9D\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE35\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE4\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2\uDD00-\uDD23\uDF00-\uDF1C\uDF27\uDF30-\uDF45]|\uD804[\uDC03-\uDC37\uDC83-\uDCAF\uDCD0-\uDCE8\uDD03-\uDD26\uDD44\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE2B\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC00-\uDC34\uDC47-\uDC4A\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE80-\uDEAA\uDF00-\uDF1A]|\uD806[\uDC00-\uDC2B\uDCA0-\uDCDF\uDCFF\uDE00\uDE0B-\uDE32\uDE3A\uDE50\uDE5C-\uDE83\uDE86-\uDE89\uDE9D\uDEC0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC2E\uDC40\uDC72-\uDC8F\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD30\uDD46\uDD60-\uDD65\uDD67\uDD68\uDD6A-\uDD89\uDD98\uDEE0-\uDEF2]|\uD808[\uDC00-\uDF99]|\uD809[\uDC80-\uDD43]|[\uD80C\uD81C-\uD820\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDE40-\uDE7F\uDF00-\uDF44\uDF50\uDF93-\uDF9F\uDFE0\uDFE1]|\uD821[\uDC00-\uDFF1]|\uD822[\uDC00-\uDEF2]|\uD82C[\uDC00-\uDD1E\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB]|\uD83A[\uDC00-\uDCC4\uDD00-\uDD43]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D])+$/;
 function getArgumentsForLineNumber(editor, fileName, lineNumber, colNumber) {
     const editorBasename = path_1.default.basename(editor).replace(/\.(exe|cmd|bat)$/i, '');
+    const isFolder = fs_1.default.existsSync(fileName) && fs_1.default.lstatSync(fileName).isDirectory();
     switch (editorBasename) {
         case 'atom':
         case 'Atom':
@@ -268,7 +262,9 @@ function getArgumentsForLineNumber(editor, fileName, lineNumber, colNumber) {
         case 'subl':
         case 'sublime':
         case 'sublime_text':
-            return [fileName + ':' + lineNumber + ':' + colNumber];
+            return isFolder
+                ? [fileName]
+                : [fileName + ':' + lineNumber + ':' + colNumber];
         case 'wstorm':
         case 'charm':
             return [fileName + ':' + lineNumber];
@@ -330,7 +326,10 @@ async function guessEditor() {
             for (let i = 0; i < processNames.length; i++) {
                 const processName = processNames[i];
                 if (output.indexOf(processName) !== -1) {
-                    availableEditors.push(COMMON_EDITORS_OSX[processName]);
+                    availableEditors.push({
+                        process: processName,
+                        command: COMMON_EDITORS_OSX[processName],
+                    });
                 }
             }
             return availableEditors;
@@ -344,7 +343,10 @@ async function guessEditor() {
                 const processPath = runningProcesses[i].trim();
                 const processName = path_1.default.basename(processPath);
                 if (COMMON_EDITORS_WIN.indexOf(processName) !== -1) {
-                    availableEditors.push(processPath);
+                    availableEditors.push({
+                        process: processPath,
+                        command: processPath,
+                    });
                 }
             }
             return availableEditors;
@@ -358,7 +360,10 @@ async function guessEditor() {
             for (let i = 0; i < processNames.length; i++) {
                 const processName = processNames[i];
                 if (output.indexOf(processName) !== -1) {
-                    availableEditors.push(COMMON_EDITORS_LINUX[processName]);
+                    availableEditors.push({
+                        process: processName,
+                        command: COMMON_EDITORS_LINUX[processName],
+                    });
                 }
             }
             return availableEditors;
@@ -369,32 +374,42 @@ async function guessEditor() {
     }
     // Last resort, use old skool env vars
     if (process.env.VISUAL) {
-        return [process.env.VISUAL];
+        return [
+            {
+                process: process.env.VISUAL,
+                command: process.env.VISUAL,
+            },
+        ];
     }
     if (process.env.EDITOR) {
-        return [process.env.EDITOR];
+        return [
+            {
+                process: process.env.EDITOR,
+                command: process.env.EDITOR,
+            },
+        ];
     }
     return [];
 }
 exports.guessEditor = guessEditor;
 let _childProcess = null;
-function launchEditor({ colNumber, editor, fileName, lineNumber, vsCodeNewWindow, }) {
+async function launchEditor({ colNumber, editor, fileName, lineNumber, vsCodeNewWindow, }) {
     if (!fs_1.default.existsSync(fileName)) {
-        return Promise.resolve(false);
+        return false;
     }
     // Sanitize lineNumber to prevent malicious use on win32
     // via: https://github.com/nodejs/node/blob/c3bb4b1aa5e907d489619fb43d233c3336bfc03d/lib/child_process.js#L333
     // and it should be a positive integer
     if (!(Number.isInteger(lineNumber) && lineNumber > 0)) {
-        return Promise.resolve(false);
+        return false;
     }
     // colNumber is optional, but should be a positive integer too
     // default is 1
     if (!(Number.isInteger(colNumber) && colNumber > 0)) {
         colNumber = 1;
     }
-    if (editor.toLowerCase() === 'none') {
-        return Promise.resolve(false);
+    if (editor.command.toLowerCase() === 'none') {
+        return false;
     }
     if (process.platform === 'linux' &&
         fileName.startsWith('/mnt/') &&
@@ -421,40 +436,58 @@ function launchEditor({ colNumber, editor, fileName, lineNumber, vsCodeNewWindow
             'consist only of alphanumeric characters (all languages), periods, ' +
             'dashes, slashes, and underscores.');
         log_1.Log.error();
-        return Promise.resolve(false);
+        return false;
     }
-    const shouldOpenVsCodeNewWindow = isVsCodeDerivative(editor) && vsCodeNewWindow;
+    const shouldOpenVsCodeNewWindow = isVsCodeDerivative(editor.command) && vsCodeNewWindow;
     const args = shouldOpenVsCodeNewWindow
         ? ['--new-window', fileName]
         : lineNumber
-            ? getArgumentsForLineNumber(editor, fileName, String(lineNumber), colNumber)
+            ? getArgumentsForLineNumber(editor.command, fileName, String(lineNumber), colNumber)
             : [fileName];
-    if (_childProcess && isTerminalEditor(editor)) {
+    if (_childProcess && isTerminalEditor(editor.command)) {
         // There's an existing editor process already and it's attached
         // to the terminal, so go kill it. Otherwise two separate editor
         // instances attach to the stdin/stdout which gets confusing.
         _childProcess.kill('SIGKILL');
     }
-    if (process.platform === 'win32') {
-        // On Windows, launch the editor in a shell because spawn can only
-        // launch .exe files.
-        _childProcess = child_process_1.default.spawn('cmd.exe', ['/C', editor].concat(args), { stdio: 'inherit' });
-    }
-    else {
-        _childProcess = child_process_1.default.spawn(editor, args, {
-            stdio: 'inherit',
-            detached: true,
-        });
-    }
-    _childProcess.on('exit', (errorCode) => {
-        _childProcess = null;
-        if (errorCode) {
-            log_1.Log.error(`Process exited with code ${errorCode}`);
+    const isWin = os_1.default.platform() === 'win32';
+    const where = isWin ? 'where' : 'which';
+    const binaryToUse = await new Promise((resolve) => {
+        if (editor.command === editor.process) {
+            resolve(editor.command);
+            return;
         }
+        child_process_1.default.exec(`${where} "${editor.command}"`, (err) => {
+            if (err) {
+                resolve(editor.process);
+            }
+            else {
+                resolve(editor.command);
+            }
+        });
     });
-    _childProcess.on('error', (error) => {
-        log_1.Log.error('Error opening file in editor', fileName, error.message);
+    return new Promise((resolve, reject) => {
+        if (process.platform === 'win32') {
+            // On Windows, launch the editor in a shell because spawn can only
+            // launch .exe files.
+            _childProcess = child_process_1.default.spawn('cmd.exe', ['/C', binaryToUse].concat(args), { stdio: 'inherit', detached: true });
+        }
+        else {
+            _childProcess = child_process_1.default.spawn(binaryToUse, args, {
+                stdio: 'inherit',
+            });
+        }
+        _childProcess.on('exit', (errorCode) => {
+            _childProcess = null;
+            if (errorCode) {
+                log_1.Log.error(`Process exited with code ${errorCode}`);
+            }
+        });
+        _childProcess.on('error', (error) => {
+            log_1.Log.error('Error opening file in editor', fileName, error.message);
+            reject(new Error('Error opening file in editor'));
+        });
+        resolve(true);
     });
-    return Promise.resolve(true);
 }
 exports.launchEditor = launchEditor;

package/dist/preview-server/error-overlay/react-overlay/utils/parser.d.ts

@@ -1,2 +1,2 @@
-import { SomeStackFrame } from './stack-frame';
+import type { SomeStackFrame } from './stack-frame';
 export declare const parseError: (error: Error | string | string[], contextLines: number) => Promise<SomeStackFrame[]>;

package/dist/preview-server/error-overlay/react-overlay/utils/unmapper.d.ts

@@ -1,2 +1,2 @@
-import { SomeStackFrame, SymbolicatedStackFrame } from './stack-frame';
+import type { SomeStackFrame, SymbolicatedStackFrame } from './stack-frame';
 export declare const unmap: (frames: SomeStackFrame[], contextLines: number) => Promise<SymbolicatedStackFrame[]>;

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

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const AskOnDiscord: React.FC;
+export declare const AskOnDiscord: React.FC<{
+    canHaveKeyboardShortcuts: boolean;
+}>;

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

@@ -2,13 +2,32 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AskOnDiscord = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DISCORD_LINK = 'https://discord.gg/6VzzNDwUwV';
+const DISCORD_LINK = 'https://remotion.dev/discord';
 const react_1 = require("react");
+const use_keybinding_1 = require("../../../editor/helpers/use-keybinding");
 const Button_1 = require("./Button");
-const AskOnDiscord = () => {
+const ShortcutHint_1 = require("./ShortcutHint");
+const AskOnDiscord = ({ canHaveKeyboardShortcuts }) => {
     const openInBrowser = (0, react_1.useCallback)(() => {
         window.open(DISCORD_LINK, '_blank');
     }, []);
-    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openInBrowser, children: "Ask on Discord" });
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const onEditor = () => {
+            openInBrowser();
+        };
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 'd',
+            callback: onEditor,
+            commandCtrlKey: true,
+            preventDefault: true,
+        });
+        return () => unregister();
+    }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: openInBrowser, children: ["Ask on Discord", ' ', canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "d", cmdOrCtrl: true })) : null] }));
 };
 exports.AskOnDiscord = AskOnDiscord;

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

@@ -3,4 +3,5 @@ export declare const Button: React.FC<{
     onClick: () => void;
     disabled?: boolean;
     children: React.ReactNode;
+    style?: React.CSSProperties;
 }>;

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

@@ -2,23 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
-const INPUT_BACKGROUND = '#2f363d';
+const react_1 = require("react");
+const colors_1 = require("../../../editor/helpers/colors");
 const button = {
-    border: `1px solid ${INPUT_BORDER_COLOR_UNHOVERED}`,
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
     borderRadius: 4,
-    backgroundColor: INPUT_BACKGROUND,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
     appearance: 'none',
     fontFamily: 'inherit',
     fontSize: 14,
     color: 'white',
+    flexDirection: 'row',
 };
 const buttonContainer = {
     padding: 10,
     cursor: 'pointer',
     fontSize: 14,
 };
-const Button = ({ children, onClick, disabled }) => {
-    return ((0, jsx_runtime_1.jsx)("button", { style: button, type: "button", disabled: disabled, onClick: onClick, children: (0, jsx_runtime_1.jsx)("div", { style: buttonContainer, children: children }) }));
+const Button = ({ children, onClick, disabled, style }) => {
+    const combined = (0, react_1.useMemo)(() => {
+        return {
+            ...button,
+            ...(style !== null && style !== void 0 ? style : {}),
+        };
+    }, [style]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: combined, type: "button", disabled: disabled, onClick: onClick, children: (0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: buttonContainer, children: children }) }));
 };
 exports.Button = Button;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScriptLine } from '../react-overlay/utils/stack-frame';
+import type { ScriptLine } from '../react-overlay/utils/stack-frame';
 export declare const CodeFrame: React.FC<{
     source: ScriptLine[];
     lineNumberWidth: number;

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

@@ -13,6 +13,8 @@ const lineNumber = {
     paddingLeft: 10,
     paddingRight: 12,
     marginRight: 12,
+    color: 'inherit',
+    fontSize: 14,
 };
 const CodeFrame = ({ source, lineNumberWidth }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: frame, children: source.map((s, j) => {

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { ErrorRecord } from '../react-overlay/listen-to-runtime-errors';
+import type { ErrorRecord } from '../react-overlay/listen-to-runtime-errors';
 export declare const ErrorDisplay: React.FC<{
     display: ErrorRecord;
+    keyboardShortcuts: boolean;
 }>;

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

@@ -6,6 +6,8 @@ const react_1 = require("react");
 const map_error_to_react_stack_1 = require("../react-overlay/effects/map-error-to-react-stack");
 const AskOnDiscord_1 = require("./AskOnDiscord");
 const ErrorTitle_1 = require("./ErrorTitle");
+const get_help_link_1 = require("./get-help-link");
+const HelpLink_1 = require("./HelpLink");
 const OpenInEditor_1 = require("./OpenInEditor");
 const SearchGitHubIssues_1 = require("./SearchGitHubIssues");
 const StackFrame_1 = require("./StackFrame");
@@ -18,7 +20,7 @@ const spacer = {
     width: 5,
     display: 'inline-block',
 };
-const ErrorDisplay = ({ display }) => {
+const ErrorDisplay = ({ display, keyboardShortcuts }) => {
     const highestLineNumber = Math.max(...display.stackFrames
         .map((s) => s.originalScriptCode)
         .flat(1)
@@ -36,7 +38,8 @@ const ErrorDisplay = ({ display }) => {
             .trim();
     }, [display.error]);
     const lineNumberWidth = String(highestLineNumber).length;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: display.error.name, message: message }), display.stackFrames.length > 0 && window.remotion_editorName ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OpenInEditor_1.OpenInEditor, { stack: display.stackFrames[0] }), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)(SearchGitHubIssues_1.SearchGithubIssues, { message: display.error.message }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(AskOnDiscord_1.AskOnDiscord, {}), (0, jsx_runtime_1.jsx)("div", { style: stack, children: display.stackFrames.map((s, i) => {
+    const helpLink = (0, get_help_link_1.getHelpLink)(message);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: display.error.name, message: message }), helpLink ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HelpLink_1.HelpLink, { link: helpLink, canHaveKeyboardShortcuts: keyboardShortcuts }), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, display.stackFrames.length > 0 && window.remotion_editorName ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, stack: display.stackFrames[0] }), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), (0, jsx_runtime_1.jsx)("div", { style: stack, children: display.stackFrames.map((s, i) => {
                     return ((0, jsx_runtime_1.jsx)(StackFrame_1.StackElement
                     // eslint-disable-next-line react/no-array-index-key
                     , { isFirst: i === 0, s: s, lineNumberWidth: lineNumberWidth, defaultFunctionName: '(anonymous function)' }, i));

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

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const ErrorLoader: React.FC<{
     error: Error;
+    keyboardShortcuts: boolean;
 }>;

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

@@ -21,7 +21,7 @@ const errorWhileErrorStyle = {
     lineHeight: 1.5,
     whiteSpace: 'pre',
 };
-const ErrorLoader = ({ error }) => {
+const ErrorLoader = ({ error, keyboardShortcuts }) => {
     const [state, setState] = (0, react_1.useState)({
         type: 'loading',
     });
@@ -56,6 +56,6 @@ const ErrorLoader = ({ error }) => {
     if (state.type === 'no-record') {
         return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Check the Terminal and browser console for error messages." })] }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(ErrorDisplay_1.ErrorDisplay, { display: state.record }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: state.record }) }));
 };
 exports.ErrorLoader = ErrorLoader;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ErrorMessage: React.FC<{
+    message: string;
+}>;

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const colors_1 = require("../../../editor/helpers/colors");
+const carets_1 = require("./carets");
+const fontSize = 24;
+const lineHeight = 1.5;
+const maxLines = 2;
+const buttonSize = 32;
+const maskImage = 'linear-gradient(to bottom, white 60%, transparent)';
+const container = {
+    position: 'relative',
+    marginBottom: 15,
+};
+const messageContainer = {
+    overflow: 'hidden',
+};
+const textContainer = {
+    fontSize,
+    lineHeight,
+};
+const moreLine = {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    position: 'absolute',
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_HOVERED}`,
+    height: 0,
+    marginTop: 4,
+};
+const moreButton = {
+    height: buttonSize,
+    width: buttonSize,
+    borderRadius: buttonSize / 2,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    marginTop: -buttonSize / 2,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    color: 'white',
+};
+const ErrorMessage = ({ message }) => {
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        shouldApplyCssTransforms: false,
+        triggerOnWindowResize: true,
+    });
+    const errorLines = size ? size.height / (lineHeight * fontSize) : null;
+    const style = (0, react_1.useMemo)(() => {
+        const isExpanded = expanded || (errorLines !== null && errorLines <= maxLines);
+        return {
+            ...messageContainer,
+            maxHeight: isExpanded ? undefined : fontSize * lineHeight * maxLines,
+            maskImage: isExpanded ? undefined : maskImage,
+            WebkitMaskImage: isExpanded ? undefined : maskImage,
+        };
+    }, [errorLines, expanded]);
+    const toggle = (0, react_1.useCallback)(() => {
+        setExpanded((e) => !e);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: textContainer, children: message }) }), errorLines !== null && errorLines > maxLines ? ((0, jsx_runtime_1.jsx)("div", { style: moreLine, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggle, style: moreButton, children: (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { invert: expanded }) }) })) : null] }));
+};
+exports.ErrorMessage = ErrorMessage;

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

@@ -4,6 +4,7 @@ exports.ErrorTitle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_overlay_1 = require("../react-overlay");
 const DismissButton_1 = require("./DismissButton");
+const ErrorMessage_1 = require("./ErrorMessage");
 const Symbolicating_1 = require("./Symbolicating");
 const title = {
     marginBottom: 8,
@@ -14,17 +15,12 @@ const title = {
 const left = {
     flex: 1,
     paddingRight: 14,
-    lineHeight: 1.5,
-    whiteSpace: 'pre',
-    fontSize: '1.5em',
     fontWeight: 'bold',
-    overflowX: 'auto',
+    maxWidth: '100%',
 };
 const errName = {
-    fontSize: '0.8em',
-    background: 'linear-gradient(90deg,#4290f5,#42e9f5)',
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
+    fontSize: 18,
+    color: '#4290f5',
     display: 'inline-block',
 };
 const row = {
@@ -36,6 +32,6 @@ const spacer = {
     width: 5,
 };
 const ErrorTitle = ({ name, message, symbolicating }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: title, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("span", { style: errName, children: name }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [symbolicating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Symbolicating_1.Symbolicating, {}), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)("div", { children: message })] })] }), (0, react_overlay_1.didUnmountReactApp)() ? null : (0, jsx_runtime_1.jsx)(DismissButton_1.DismissButton, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: title, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("span", { style: errName, children: name }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [symbolicating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Symbolicating_1.Symbolicating, {}), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { message: message })] })] }), (0, react_overlay_1.didUnmountReactApp)() ? null : (0, jsx_runtime_1.jsx)(DismissButton_1.DismissButton, {})] }));
 };
 exports.ErrorTitle = ErrorTitle;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { THelpLink } from './get-help-link';
+export declare const HelpLink: React.FC<{
+    canHaveKeyboardShortcuts: boolean;
+    link: THelpLink;
+}>;

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelpLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_keybinding_1 = require("../../../editor/helpers/use-keybinding");
+const Button_1 = require("./Button");
+const ShortcutHint_1 = require("./ShortcutHint");
+const buttonStyle = {
+    backgroundColor: 'var(--blue)',
+    color: 'white',
+};
+const HelpLink = ({ canHaveKeyboardShortcuts, link }) => {
+    const openLink = (0, react_1.useCallback)(() => {
+        window.open(link.url, '_blank');
+    }, [link]);
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const onEditor = () => {
+            openLink();
+        };
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 'h',
+            callback: onEditor,
+            commandCtrlKey: true,
+            preventDefault: true,
+        });
+        return () => unregister();
+    }, [canHaveKeyboardShortcuts, openLink, registerKeybinding]);
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { style: buttonStyle, onClick: openLink, children: ["Help: ", '"', link.title, '"', canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "h", cmdOrCtrl: true })) : null] }));
+};
+exports.HelpLink = HelpLink;

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { SymbolicatedStackFrame } from '../react-overlay/utils/stack-frame';
+import type { SymbolicatedStackFrame } from '../react-overlay/utils/stack-frame';
 export declare const OpenInEditor: React.FC<{
     stack: SymbolicatedStackFrame;
+    canHaveKeyboardShortcuts: boolean;
 }>;