@remotion/cli 3.0.28 → 3.0.31

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

@@ -4,7 +4,9 @@ exports.OpenInEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable no-console */
 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 initialState = { type: 'idle' };
 const reducer = (state, action) => {
     if (action.type === 'start') {
@@ -29,9 +31,10 @@ const reducer = (state, action) => {
     }
     return state;
 };
-const OpenInEditor = ({ stack }) => {
+const OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
     const isMounted = (0, react_1.useRef)(true);
     const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
     const dispatchIfMounted = (0, react_1.useCallback)((payload) => {
         if (isMounted.current === false)
             return;
@@ -72,6 +75,21 @@ const OpenInEditor = ({ stack }) => {
             isMounted.current = false;
         };
     }, []);
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const onEditor = () => {
+            openInBrowser();
+        };
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 'o',
+            callback: onEditor,
+            commandCtrlKey: true,
+        });
+        return () => unregister();
+    }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);
     const label = (0, react_1.useMemo)(() => {
         switch (state.type) {
             case 'error':
@@ -86,6 +104,6 @@ const OpenInEditor = ({ stack }) => {
                 throw new Error('invalid state');
         }
     }, [state.type]);
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openInBrowser, disabled: state.type !== 'idle', children: label }));
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: openInBrowser, disabled: state.type !== 'idle', children: [label, canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "o", cmdOrCtrl: true })) : null] }));
 };
 exports.OpenInEditor = OpenInEditor;

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

@@ -4,6 +4,7 @@ exports.Overlay = exports.setErrorsRef = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const keybindings_1 = require("../../../editor/state/keybindings");
 const ErrorLoader_1 = require("./ErrorLoader");
 exports.setErrorsRef = (0, react_1.createRef)();
 const errorsAreTheSame = (first, second) => {
@@ -38,12 +39,12 @@ const Overlay = () => {
     if (errors.errors.length === 0) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: {
-            backgroundColor: BACKGROUND_COLOR,
-            overflow: 'auto',
-            color: 'white',
-        }, children: errors.errors.map((err) => {
-            return (0, jsx_runtime_1.jsx)(ErrorLoader_1.ErrorLoader, { error: err }, err.stack);
-        }) }));
+    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: {
+                backgroundColor: BACKGROUND_COLOR,
+                overflow: 'auto',
+                color: 'white',
+            }, children: errors.errors.map((err, i) => {
+                return ((0, jsx_runtime_1.jsx)(ErrorLoader_1.ErrorLoader, { keyboardShortcuts: i === 0, error: err }, err.stack));
+            }) }) }));
 };
 exports.Overlay = Overlay;

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

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

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

@@ -3,11 +3,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchGithubIssues = 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 SearchGithubIssues = ({ message }) => {
+const ShortcutHint_1 = require("./ShortcutHint");
+const SearchGithubIssues = ({ message, canHaveKeyboardShortcuts }) => {
     const openInBrowser = (0, react_1.useCallback)(() => {
         window.open(`https://github.com/remotion-dev/remotion/issues?q=${encodeURIComponent(message)}`, '_blank');
     }, [message]);
-    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openInBrowser, children: "Search GitHub Issues" });
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const onEditor = () => {
+            openInBrowser();
+        };
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 'g',
+            callback: onEditor,
+            commandCtrlKey: true,
+        });
+        return () => unregister();
+    }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: openInBrowser, children: ["Search GitHub Issues", ' ', canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "g", cmdOrCtrl: true })) : null] }));
 };
 exports.SearchGithubIssues = SearchGithubIssues;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ShortcutHint: React.FC<{
+    keyToPress: string;
+    cmdOrCtrl: boolean;
+}>;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShortcutHint = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cmdOrCtrlCharacter = window.navigator.platform.startsWith('Mac')
+    ? '⌘'
+    : 'Ctrl';
+const container = {
+    display: 'inline-block',
+    marginLeft: 6,
+    opacity: 0.6,
+};
+const ShortcutHint = ({ keyToPress, cmdOrCtrl }) => {
+    return ((0, jsx_runtime_1.jsxs)("span", { style: container, children: [cmdOrCtrl ? `${cmdOrCtrlCharacter}+` : '', keyToPress.toUpperCase()] }));
+};
+exports.ShortcutHint = ShortcutHint;

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

@@ -41,7 +41,7 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
     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 &&
+    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, { invert: false }) : (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 })] }));
 };

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

@@ -1,3 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const CaretRight: () => JSX.Element;
-export declare const CaretDown: () => JSX.Element;
+export declare const CaretDown: React.FC<{
+    invert: boolean;
+}>;

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

@@ -6,7 +6,7 @@ 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" }) }));
+const CaretDown = ({ invert }) => {
+    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, transform: invert ? `rotate(180deg)` : '' }, 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/get-help-link.d.ts

@@ -0,0 +1,5 @@
+export declare type THelpLink = {
+    url: string;
+    title: string;
+};
+export declare const getHelpLink: (message: string) => THelpLink | null;

package/dist/preview-server/error-overlay/remotion-overlay/get-help-link.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHelpLink = void 0;
+const getHelpLink = (message) => {
+    if (message.includes('See https://www.remotion.dev/docs/the-fundamentals#defining-compositions')) {
+        return {
+            title: 'Defining compositions',
+            url: 'See https://www.remotion.dev/docs/the-fundamentals#defining-compositions',
+        };
+    }
+    if (message.includes('https://remotion.dev/docs/wrong-composition-mount')) {
+        return {
+            title: 'Wrongly mounted <Composition>',
+            url: 'https://remotion.dev/docs/wrong-composition-mount',
+        };
+    }
+    return null;
+};
+exports.getHelpLink = getHelpLink;

package/dist/preview-server/fast-refresh/helpers.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Source code is adapted from https://github.com/WebHotelier/webpack-fast-refresh#readme and rewritten in Typescript. This file is MIT licensed.
+ */
+/**
+ * MIT License
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+declare function registerExportsForReactRefresh(moduleExports: unknown, moduleID: unknown): void;
+declare function isReactRefreshBoundary(moduleExports: unknown): boolean;
+declare function shouldInvalidateReactRefreshBoundary(prevExports: unknown, nextExports: unknown): boolean;
+declare function getRefreshBoundarySignature(moduleExports: unknown): any[];
+declare function scheduleUpdate(): void;
+declare const _default: {
+    registerExportsForReactRefresh: typeof registerExportsForReactRefresh;
+    isReactRefreshBoundary: typeof isReactRefreshBoundary;
+    shouldInvalidateReactRefreshBoundary: typeof shouldInvalidateReactRefreshBoundary;
+    getRefreshBoundarySignature: typeof getRefreshBoundarySignature;
+    scheduleUpdate: typeof scheduleUpdate;
+};
+export default _default;

package/dist/preview-server/fast-refresh/helpers.js

@@ -0,0 +1,145 @@
+"use strict";
+/**
+ * Source code is adapted from https://github.com/WebHotelier/webpack-fast-refresh#readme and rewritten in Typescript. This file is MIT licensed.
+ */
+/**
+ * MIT License
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+// This file is copied from the Metro JavaScript bundler, with minor tweaks for
+// webpack compatibility.
+//
+// https://github.com/facebook/metro/blob/d6b9685c730d0d63577db40f41369157f28dfa3a/packages/metro/src/lib/polyfills/require.js
+const RefreshRuntime = require('react-refresh/runtime');
+function isSafeExport(key) {
+    return (key === '__esModule' ||
+        key === '__N_SSG' ||
+        key === '__N_SSP' ||
+        key === 'config');
+}
+function registerExportsForReactRefresh(moduleExports, moduleID) {
+    RefreshRuntime.register(moduleExports, moduleID + ' %exports%');
+    if (moduleExports === null ||
+        moduleExports === undefined ||
+        typeof moduleExports !== 'object') {
+        // Exit if we can't iterate over exports.
+        // (This is important for legacy environments.)
+        return;
+    }
+    for (const key in moduleExports) {
+        if (isSafeExport(key)) {
+            continue;
+        }
+        // @ts-expect-error
+        const exportValue = moduleExports[key];
+        const typeID = moduleID + ' %exports% ' + key;
+        RefreshRuntime.register(exportValue, typeID);
+    }
+}
+function isReactRefreshBoundary(moduleExports) {
+    if (RefreshRuntime.isLikelyComponentType(moduleExports)) {
+        return true;
+    }
+    if (moduleExports === null ||
+        moduleExports === undefined ||
+        typeof moduleExports !== 'object') {
+        // Exit if we can't iterate over exports.
+        return false;
+    }
+    let hasExports = false;
+    let areAllExportsComponents = true;
+    for (const key in moduleExports) {
+        hasExports = true;
+        if (isSafeExport(key)) {
+            continue;
+        }
+        // @ts-expect-error
+        const exportValue = moduleExports[key];
+        if (!RefreshRuntime.isLikelyComponentType(exportValue)) {
+            areAllExportsComponents = false;
+        }
+    }
+    return hasExports && areAllExportsComponents;
+}
+function shouldInvalidateReactRefreshBoundary(prevExports, nextExports) {
+    const prevSignature = getRefreshBoundarySignature(prevExports);
+    const nextSignature = getRefreshBoundarySignature(nextExports);
+    if (prevSignature.length !== nextSignature.length) {
+        return true;
+    }
+    for (let i = 0; i < nextSignature.length; i++) {
+        if (prevSignature[i] !== nextSignature[i]) {
+            return true;
+        }
+    }
+    return false;
+}
+function getRefreshBoundarySignature(moduleExports) {
+    const signature = [];
+    signature.push(RefreshRuntime.getFamilyByType(moduleExports));
+    if (moduleExports === null ||
+        moduleExports === undefined ||
+        typeof moduleExports !== 'object') {
+        // Exit if we can't iterate over exports.
+        // (This is important for legacy environments.)
+        return signature;
+    }
+    for (const key in moduleExports) {
+        if (isSafeExport(key)) {
+            continue;
+        }
+        // @ts-expect-error
+        const exportValue = moduleExports[key];
+        signature.push(key);
+        signature.push(RefreshRuntime.getFamilyByType(exportValue));
+    }
+    return signature;
+}
+function scheduleUpdate() {
+    var _a, _b;
+    const execute = () => {
+        try {
+            RefreshRuntime.performReactRefresh();
+        }
+        catch (err) {
+            console.warn('Warning: Failed to re-render. We will retry on the next Fast Refresh event.\n' +
+                err);
+        }
+    };
+    // Only trigger refresh if the webpack HMR state is idle
+    if (((_a = module.hot) === null || _a === void 0 ? void 0 : _a.status()) === 'idle') {
+        return;
+    }
+    (_b = module.hot) === null || _b === void 0 ? void 0 : _b.addStatusHandler((status) => {
+        if (status === 'idle') {
+            execute();
+        }
+    });
+}
+exports.default = {
+    registerExportsForReactRefresh,
+    isReactRefreshBoundary,
+    shouldInvalidateReactRefreshBoundary,
+    getRefreshBoundarySignature,
+    scheduleUpdate,
+};

package/dist/preview-server/fast-refresh/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Source code is adapted from https://github.com/WebHotelier/webpack-fast-refresh#readme and rewritten in Typescript. This file is MIT licensed.
+ */
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2020 Vercel, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import webpack from 'webpack';
+export declare class ReactFreshWebpackPlugin {
+    apply(compiler: webpack.Compiler): void;
+}

package/dist/preview-server/fast-refresh/index.js

@@ -0,0 +1,86 @@
+"use strict";
+/**
+ * Source code is adapted from https://github.com/WebHotelier/webpack-fast-refresh#readme and rewritten in Typescript. This file is MIT licensed.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactFreshWebpackPlugin = void 0;
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2020 Vercel, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+// This file is copied from the @vercel/next.js, with removed TS annotations
+// minor tweaks, and removed all webpack v4-related functionality
+//
+// https://github.com/vercel/next.js/blob/canary/packages/react-refresh-utils/ReactRefreshWebpackPlugin.ts
+const webpack_1 = require("webpack");
+class ReactRefreshRuntimeModule extends webpack_1.RuntimeModule {
+    constructor() {
+        super('react refresh', 5);
+    }
+    generate() {
+        const { runtimeTemplate } = this.compilation;
+        return webpack_1.Template.asString([
+            `${webpack_1.RuntimeGlobals.interceptModuleExecution}.push(${runtimeTemplate.basicFunction('options', [
+                `const originalFactory = options.factory;`,
+                `options.factory = ${runtimeTemplate.basicFunction('moduleObject, moduleExports, webpackRequire', [
+                    // Legacy CSS implementations will `eval` browser code in a Node.js
+                    // context to extract CSS. For backwards compatibility, we need to check
+                    // we're in a browser context before continuing.
+                    `const hasRefresh = typeof self !== "undefined" && !!self.$RefreshInterceptModuleExecution$;`,
+                    `const cleanup = hasRefresh ? self.$RefreshInterceptModuleExecution$(moduleObject.id) : () => {};`,
+                    'try {',
+                    webpack_1.Template.indent('originalFactory.call(this, moduleObject, moduleExports, webpackRequire);'),
+                    '} finally {',
+                    webpack_1.Template.indent(`cleanup();`),
+                    '}',
+                ])}`,
+            ])})`,
+        ]);
+    }
+}
+class ReactFreshWebpackPlugin {
+    apply(compiler) {
+        const webpackMajorVersion = parseInt(webpack_1.version !== null && webpack_1.version !== void 0 ? webpack_1.version : '', 10);
+        if (webpackMajorVersion < 5) {
+            throw new Error(`ReactFreshWebpackPlugin does not support webpack v${webpackMajorVersion}.`);
+        }
+        compiler.hooks.compilation.tap(this.constructor.name, (compilation) => {
+            compilation.mainTemplate.hooks.localVars.tap(this.constructor.name, (source) => webpack_1.Template.asString([
+                source,
+                '',
+                '// noop fns to prevent runtime errors during initialization',
+                'if (typeof self !== "undefined") {',
+                webpack_1.Template.indent('self.$RefreshReg$ = function () {};'),
+                webpack_1.Template.indent('self.$RefreshSig$ = function () {'),
+                webpack_1.Template.indent(webpack_1.Template.indent('return function (type) {')),
+                webpack_1.Template.indent(webpack_1.Template.indent(webpack_1.Template.indent('return type;'))),
+                webpack_1.Template.indent(webpack_1.Template.indent('};')),
+                webpack_1.Template.indent('};'),
+                '}',
+            ]));
+            compilation.hooks.additionalTreeRuntimeRequirements.tap(this.constructor.name, (chunk) => {
+                compilation.addRuntimeModule(chunk, new ReactRefreshRuntimeModule());
+            });
+        });
+    }
+}
+exports.ReactFreshWebpackPlugin = ReactFreshWebpackPlugin;

package/dist/preview-server/fast-refresh/loader.d.ts

@@ -0,0 +1,35 @@
+/**
+ * ⚠️ Be careful when refactoring this file!
+ * This gets injected into every file of the browser.
+ * You cannot have returns, optional chains, inverse the if statement etc.
+ * Check the Typescript output in dist/ to see that no extra `var` statements were produced
+ */
+/**
+ * Source code is adapted from https://github.com/WebHotelier/webpack-fast-refresh#readme and rewritten in Typescript. This file is MIT licensed.
+ */
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2020 Vercel, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { LoaderDefinition } from 'webpack';
+declare const ReactRefreshLoader: LoaderDefinition;
+export default ReactRefreshLoader;

package/dist/preview-server/fast-refresh/loader.js

@@ -0,0 +1,81 @@
+"use strict";
+/**
+ * ⚠️ Be careful when refactoring this file!
+ * This gets injected into every file of the browser.
+ * You cannot have returns, optional chains, inverse the if statement etc.
+ * Check the Typescript output in dist/ to see that no extra `var` statements were produced
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+// This file is copied from the @vercel/next.js, with removed TS annotations
+//
+// https://github.com/vercel/next.js/blob/canary/packages/react-refresh-utils/loader.ts
+// This function gets unwrapped into global scope, which is why we don't invert
+// if-blocks. Also, you cannot use `return`.
+function RefreshModuleRuntime() {
+    // Legacy CSS implementations will `eval` browser code in a Node.js context
+    // to extract CSS. For backwards compatibility, we need to check we're in a
+    // browser context before continuing.
+    if (typeof self !== 'undefined' &&
+        // AMP / No-JS mode does not inject these helpers:
+        '$RefreshHelpers$' in self) {
+        // @ts-expect-error
+        // eslint-disable-next-line no-proto
+        const currentExports = module.__proto__.exports;
+        let prevExports = null;
+        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+        if (module.hot && module.hot.data && module.hot.data.prevExports) {
+            prevExports = module.hot.data.prevExports;
+        }
+        // This cannot happen in MainTemplate because the exports mismatch between
+        // templating and execution.
+        self.$RefreshHelpers$.registerExportsForReactRefresh(currentExports, module.id);
+        // A module can be accepted automatically based on its exports, e.g. when
+        // it is a Refresh Boundary.
+        if (self.$RefreshHelpers$.isReactRefreshBoundary(currentExports)) {
+            // Save the previous exports on update so we can compare the boundary
+            // signatures.
+            module.hot.dispose((data) => {
+                data.prevExports = currentExports;
+            });
+            // Unconditionally accept an update to this module, we'll check if it's
+            // still a Refresh Boundary later.
+            module.hot.accept();
+            // This field is set when the previous version of this module was a
+            // Refresh Boundary, letting us know we need to check for invalidation or
+            // enqueue an update.
+            if (prevExports !== null) {
+                // A boundary can become ineligible if its exports are incompatible
+                // with the previous exports.
+                //
+                // For example, if you add/remove/change exports, we'll want to
+                // re-execute the importing modules, and force those components to
+                // re-render. Similarly, if you convert a class component to a
+                // function, we want to invalidate the boundary.
+                if (self.$RefreshHelpers$.shouldInvalidateReactRefreshBoundary(prevExports, currentExports)) {
+                    // @ts-expect-error
+                    module.hot.invalidate();
+                }
+                else {
+                    self.$RefreshHelpers$.scheduleUpdate();
+                }
+            }
+        }
+        else {
+            // Since we just executed the code for the module, it's possible that the
+            // new exports made it ineligible for being a boundary.
+            // We only care about the case when we were _previously_ a boundary,
+            // because we already accepted this update (accidental side effect).
+            const isNoLongerABoundary = prevExports !== null;
+            if (isNoLongerABoundary) {
+                // @ts-expect-error
+                module.hot.invalidate();
+            }
+        }
+    }
+}
+let refreshModuleRuntime = RefreshModuleRuntime.toString();
+refreshModuleRuntime = refreshModuleRuntime.slice(refreshModuleRuntime.indexOf('{') + 1, refreshModuleRuntime.lastIndexOf('}'));
+const ReactRefreshLoader = function (source, inputSourceMap) {
+    this.callback(null, `${source}\n\n;${refreshModuleRuntime}`, inputSourceMap);
+};
+exports.default = ReactRefreshLoader;