@remotion/cli 3.1.7 → 3.1.11

package/dist/editor/components/Timeline/TimelineList.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const is_collapsed_1 = require("./is-collapsed");
 const TimelineListItem_1 = require("./TimelineListItem");
 const container = {
     flex: 1,
     display: 'flex',
     flexDirection: 'column',
+    background: colors_1.BACKGROUND,
 };
 const TimelineList = ({ timeline, viewState, dispatchStateChange }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: container, children: timeline.map((track, i) => {

package/dist/editor/components/Timeline/TimelineScrollable.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const TimelineScrollable: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/Timeline/TimelineScrollable.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineScrollable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_refs_1 = require("./timeline-refs");
+const outer = {
+    width: '100%',
+    height: '100%',
+    overflowX: 'auto',
+    position: 'relative',
+    backgroundColor: '#111',
+};
+const TimelineScrollable = ({ children }) => {
+    const containerStyle = (0, react_1.useMemo)(() => {
+        return {
+            width: '100%',
+            height: '100%',
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.scrollableRef, style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: children }) }));
+};
+exports.TimelineScrollable = TimelineScrollable;

package/dist/editor/components/Timeline/TimelineZoomControls.d.ts

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

package/dist/editor/components/Timeline/TimelineZoomControls.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineZoomControls = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
+const ControlButton_1 = require("../ControlButton");
+const container = {
+    color: 'black',
+    flexDirection: 'row',
+    display: 'flex',
+};
+const buttonStyle = {
+    fontSize: 24,
+};
+const TimelineZoomControls = () => {
+    const { setZoom, zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const onMinusClicked = (0, react_1.useCallback)(() => {
+        setZoom((z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2));
+    }, [setZoom]);
+    const onPlusClicked = (0, react_1.useCallback)(() => {
+        setZoom((z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2));
+    }, [setZoom]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        setZoom(Number(e.target.value));
+    }, [setZoom]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", children: "-" }), (0, jsx_runtime_1.jsx)("input", { type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", children: "+" })] }));
+};
+exports.TimelineZoomControls = TimelineZoomControls;

package/dist/editor/components/Timeline/timeline-scroll-logic.d.ts

@@ -0,0 +1,4 @@
+export declare const canScrollTimelineIntoDirection: () => {
+    canScrollRight: boolean;
+    canScrollLeft: boolean;
+};

package/dist/editor/components/Timeline/timeline-scroll-logic.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canScrollTimelineIntoDirection = void 0;
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const timeline_refs_1 = require("./timeline-refs");
+const canScrollTimelineIntoDirection = () => {
+    const current = timeline_refs_1.scrollableRef.current;
+    const { scrollWidth, scrollLeft, clientWidth } = current;
+    const canScrollRight = scrollWidth - scrollLeft - clientWidth > timeline_layout_1.TIMELINE_PADDING;
+    const canScrollLeft = scrollLeft > timeline_layout_1.TIMELINE_PADDING;
+    return { canScrollRight, canScrollLeft };
+};
+exports.canScrollTimelineIntoDirection = canScrollTimelineIntoDirection;

package/dist/editor/state/timeline-zoom.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const TIMELINE_MIN_ZOOM = 1;
+export declare const TIMELINE_MAX_ZOOM = 5;
+export declare const TimelineZoomCtx: React.Context<{
+    zoom: number;
+    setZoom: React.Dispatch<React.SetStateAction<number>>;
+}>;
+export declare const TimelineZoomContext: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/state/timeline-zoom.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineZoomContext = exports.TimelineZoomCtx = exports.TIMELINE_MAX_ZOOM = exports.TIMELINE_MIN_ZOOM = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.TIMELINE_MIN_ZOOM = 1;
+exports.TIMELINE_MAX_ZOOM = 5;
+exports.TimelineZoomCtx = (0, react_1.createContext)({
+    zoom: -1,
+    setZoom: () => {
+        throw new Error('has no context');
+    },
+});
+const TimelineZoomContext = ({ children }) => {
+    const [zoom, setZoom] = (0, react_1.useState)(exports.TIMELINE_MIN_ZOOM);
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            zoom,
+            setZoom,
+        };
+    }, [zoom]);
+    return ((0, jsx_runtime_1.jsx)(exports.TimelineZoomCtx.Provider, { value: value, children: children }));
+};
+exports.TimelineZoomContext = TimelineZoomContext;

package/dist/prepare-entry-point.d.ts

@@ -0,0 +1,11 @@
+import { RenderStep } from './step';
+export declare const prepareEntryPoint: ({ file, otherSteps, publicPath, outDir, }: {
+    file: string;
+    otherSteps: RenderStep[];
+    outDir: string | null;
+    publicPath: string | null;
+}) => Promise<{
+    urlOrBundle: string;
+    steps: RenderStep[];
+    shouldDelete: boolean;
+}>;

package/dist/prepare-entry-point.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepareEntryPoint = void 0;
+const renderer_1 = require("@remotion/renderer");
+const promises_1 = require("fs/promises");
+const path_1 = __importDefault(require("path"));
+const process_1 = require("process");
+const log_1 = require("./log");
+const setup_cache_1 = require("./setup-cache");
+const prepareEntryPoint = async ({ file, otherSteps, publicPath, outDir, }) => {
+    if (renderer_1.RenderInternals.isServeUrl(file)) {
+        return { urlOrBundle: file, steps: otherSteps, shouldDelete: false };
+    }
+    const joined = path_1.default.resolve(process.cwd(), file);
+    try {
+        const stats = await (0, promises_1.stat)(joined);
+        if (stats.isDirectory()) {
+            return { urlOrBundle: joined, steps: otherSteps, shouldDelete: false };
+        }
+    }
+    catch (err) {
+        log_1.Log.error(`No file or directory exists at ${joined}.`);
+        (0, process_1.exit)(1);
+    }
+    const urlOrBundle = await (0, setup_cache_1.bundleOnCli)({
+        fullPath: joined,
+        steps: ['bundling', ...otherSteps],
+        outDir,
+        publicPath,
+    });
+    return { urlOrBundle, steps: ['bundling', ...otherSteps], shouldDelete: true };
+};
+exports.prepareEntryPoint = prepareEntryPoint;

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,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const colors_1 = require("../../../editor/helpers/colors");
 const button = {
     border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
@@ -18,7 +19,13 @@ const buttonContainer = {
     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", { style: buttonContainer, children: children }) }));
 };
 exports.Button = Button;

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

@@ -6,6 +6,10 @@ 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');
@@ -26,6 +30,6 @@ const HelpLink = ({ canHaveKeyboardShortcuts, link }) => {
         });
         return () => unregister();
     }, [canHaveKeyboardShortcuts, openLink, registerKeybinding]);
-    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: openLink, children: ["Help: ", '"', link.title, '"', canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "h", cmdOrCtrl: true })) : null] }));
+    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/get-help-link.js

@@ -14,6 +14,30 @@ const getHelpLink = (message) => {
             url: 'https://remotion.dev/docs/wrong-composition-mount',
         };
     }
+    if (message.includes('https://remotion.dev/docs/staticfile-relative-paths')) {
+        return {
+            title: 'staticFile() relative paths',
+            url: 'https://remotion.dev/docs/staticfile-relative-paths',
+        };
+    }
+    if (message.includes('https://remotion.dev/docs/staticfile-remote-urls')) {
+        return {
+            title: 'staticFile() remote URLs',
+            url: 'https://remotion.dev/docs/staticfile-remote-urls',
+        };
+    }
+    if (message.includes('https://remotion.dev/docs/non-seekable-media')) {
+        return {
+            title: 'Non-seekable media',
+            url: 'https://remotion.dev/docs/non-seekable-media',
+        };
+    }
+    if (message.includes('https://remotion.dev/docs/media-playback-error')) {
+        return {
+            title: 'Media playback error',
+            url: 'https://remotion.dev/docs/media-playback-error',
+        };
+    }
     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;