@remotion/studio 4.0.153 → 4.0.154

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @remotion/studio@4.0.152 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.153 build /Users/jonathanburger/remotion/packages/studio
 > bun --env-file=../.env.bundle bundle.ts
 
 warn: Remotion currently uses a fork of Bun to bundle.

package/.turbo/turbo-test.log

@@ -0,0 +1,85 @@
+
+> @remotion/studio@4.0.149 test /Users/jonathanburger/remotion/packages/studio
+> bun test src
+
+bun test v1.1.7 (07cefe63)
+
+src/test/stringify-default-props.test.ts:
+✓ Should stringify default props correctly [1.64ms]
+✓ Should stringify default props correctly [1.24ms]
+
+src/test/sequenced-timeline.test.ts:
+✓ Should calculate sequences correctly [3.46ms]
+
+src/test/create-zod-values.test.ts:
+✓ Should be able to create a string [12.48ms]
+✓ Should be able to create a number [0.48ms]
+✓ Should be able to create an object [0.28ms]
+✓ Should be able to create an array [0.36ms]
+✓ Should be able to create a union [0.20ms]
+✓ Zod literal [0.09ms]
+✓ Should be able to create a discriminated union [0.50ms]
+✓ Zod instanceof [0.13ms]
+✓ Zod intersection [0.29ms]
+✓ Zod tuples [0.16ms]
+✓ Zod record [0.27ms]
+✓ Zod map [0.08ms]
+✓ Zod lazy [0.08ms]
+✓ Zod set [0.10ms]
+✓ Zod function [0.15ms]
+✓ Zod undefined [0.07ms]
+✓ Zod null [0.07ms]
+✓ Zod enum [0.06ms]
+✓ Zod nativeEnum [0.09ms]
+✓ Zod optional [0.07ms]
+✓ Zod nullable [0.07ms]
+✓ Zod undefined [0.07ms]
+✓ Zod catch [0.06ms]
+✓ Zod promise [0.11ms]
+✓ Zod transform [0.07ms]
+✓ Zod branded [0.10ms]
+✓ Zod lazy [0.41ms]
+✓ Zod coerce [0.37ms]
+✓ Zod strict [0.12ms]
+✓ Should create a color [0.09ms]
+✓ Should create a textarea [0.05ms]
+
+src/test/folder-tree.test.ts:
+✓ Should create a good folder tree with 1 item inside and 1 item outside [1.66ms]
+✓ Should handle nested folders well [0.49ms]
+✓ Should throw if two folders with the same name [0.30ms]
+
+src/test/big-timeline.test.ts:
+✓ Should calculate timeline as expected [6.91ms]
+
+src/test/smooth-zoom.test.ts:
+✓ Smoothen zoom [0.04ms]
+✓ Unsmoothen zoom [0.04ms]
+
+src/test/validate-gui-output-filename.test.ts:
+✓ Should catch dot after slash [2.97ms]
+✓ Should catch dot in front  [0.03ms]
+
+src/test/timeline-sequence-layout.test.ts:
+✓ Should test timeline sequence layout without max media duration [0.31ms]
+✓ Should test timeline sequence layout with max media duration [0.05ms]
+
+src/test/extract-zod-enums.test.ts:
+✓ Extract Zod enums [0.13ms]
+✓ Extract Zod enums #2 [0.42ms]
+
+src/test/color-math.test.ts:
+✓ Color math [0.74ms]
+
+src/test/format-time.test.ts:
+✓ Format time [0.24ms]
+
+src/test/timeline.test.ts:
+✓ Should calculate timeline with no sequences [0.05ms]
+✓ Should calculate a basic timeline [0.14ms]
+✓ Should follow order of nesting [0.13ms]
+
+ 51 pass
+ 0 fail
+ 67 expect() calls
+Ran 51 tests across 12 files. [119.00ms]

package/dist/api/delete-static-file.d.ts

@@ -0,0 +1,3 @@
+import type { DeleteStaticFileResponse } from '@remotion/studio-shared';
+export declare const deleteStaticFile: (relativePath: string) => Promise<DeleteStaticFileResponse>;
+export { DeleteStaticFileResponse };

package/dist/api/delete-static-file.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteStaticFile = void 0;
+const remotion_1 = require("remotion");
+const call_api_1 = require("../components/call-api");
+const deleteStaticFile = async (relativePath) => {
+    if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+        throw new Error('deleteStaticFile() is only available in the Studio');
+    }
+    if (relativePath.startsWith(window.remotion_staticBase)) {
+        relativePath = relativePath.substring(window.remotion_staticBase.length + 1);
+    }
+    const res = await (0, call_api_1.callApi)('/api/delete-static-file', { relativePath });
+    return res;
+};
+exports.deleteStaticFile = deleteStaticFile;

package/dist/api/helpers/calc-new-props.d.ts

@@ -0,0 +1,11 @@
+import type { AnyComposition } from 'remotion';
+import type { AnyZodObject } from 'zod';
+export type UpdateDefaultPropsFunction = (currentValues: {
+    schema: AnyZodObject | null;
+    savedDefaultProps: Record<string, unknown>;
+    unsavedDefaultProps: Record<string, unknown>;
+}) => Record<string, unknown>;
+export declare const calcNewProps: (compositionId: string, defaultProps: UpdateDefaultPropsFunction) => {
+    composition: AnyComposition;
+    generatedDefaultProps: Record<string, unknown>;
+};

package/dist/api/helpers/calc-new-props.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcNewProps = void 0;
+const remotion_1 = require("remotion");
+const calcNewProps = (compositionId, defaultProps) => {
+    var _a, _b;
+    if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+        throw new Error('saveDefaultProps can only be called in the Remotion Studio.');
+    }
+    const { compositionsRef, editorPropsProviderRef } = remotion_1.Internals;
+    const compositionsStore = compositionsRef.current;
+    if (!compositionsStore) {
+        throw new Error('No compositions ref found. Are you in the Remotion Studio and are the Remotion versions aligned?');
+    }
+    const compositions = compositionsStore.getCompositions();
+    const composition = compositions.find((c) => c.id === compositionId);
+    if (!composition) {
+        throw new Error(`No composition with the ID ${compositionId} found. Available compositions: ${compositions.map((c) => c.id).join(', ')}`);
+    }
+    const propsStore = editorPropsProviderRef.current;
+    if (!propsStore) {
+        throw new Error('No props store found. Are you in the Remotion Studio and are the Remotion versions aligned?');
+    }
+    const savedDefaultProps = (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {};
+    const unsavedDefaultProps = (_b = propsStore.getProps()[compositionId]) !== null && _b !== void 0 ? _b : savedDefaultProps;
+    const generatedDefaultProps = defaultProps({
+        schema: composition.schema,
+        savedDefaultProps,
+        unsavedDefaultProps,
+    });
+    return {
+        composition,
+        generatedDefaultProps,
+    };
+};
+exports.calcNewProps = calcNewProps;

package/dist/api/save-default-props.d.ts

@@ -1,10 +1,10 @@
-import type { AnyZodObject } from 'zod';
-export type SafeDefaultPropsFunction = (currentValues: {
-    schema: AnyZodObject | null;
-    savedDefaultProps: Record<string, unknown>;
-    unsavedDefaultProps: Record<string, unknown>;
-}) => Record<string, unknown>;
+import type { UpdateDefaultPropsFunction } from './helpers/calc-new-props';
+/**
+ * Saves the defaultProps for a composition back to the root file.
+ * @param {string} compositionId The ID of the composition to save the defaultProps for.
+ * @param {SafeDefaultPropsFunction} defaultProps A function that returns the new defaultProps for the composition.
+ */
 export declare const saveDefaultProps: ({ compositionId, defaultProps, }: {
     compositionId: string;
-    defaultProps: SafeDefaultPropsFunction;
+    defaultProps: UpdateDefaultPropsFunction;
 }) => Promise<void>;

package/dist/api/save-default-props.js

@@ -24,42 +24,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveDefaultProps = void 0;
-const remotion_1 = require("remotion");
 const extract_enum_json_paths_1 = require("../components/RenderModal/SchemaEditor/extract-enum-json-paths");
 const actions_1 = require("../components/RenderQueue/actions");
+const calc_new_props_1 = require("./helpers/calc-new-props");
+/**
+ * Saves the defaultProps for a composition back to the root file.
+ * @param {string} compositionId The ID of the composition to save the defaultProps for.
+ * @param {SafeDefaultPropsFunction} defaultProps A function that returns the new defaultProps for the composition.
+ */
 const saveDefaultProps = async ({ compositionId, defaultProps, }) => {
-    var _a, _b;
-    if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
-        throw new Error('saveDefaultProps can only be called in the Remotion Studio.');
-    }
     try {
         await Promise.resolve().then(() => __importStar(require('zod')));
     }
-    catch (_c) {
+    catch (_a) {
         throw new Error('"zod" is required to use saveDefaultProps(), but is not installed.');
     }
     const z = await Promise.resolve().then(() => __importStar(require('zod')));
-    const { compositionsRef, editorPropsProviderRef } = remotion_1.Internals;
-    const compositionsStore = compositionsRef.current;
-    if (!compositionsStore) {
-        throw new Error('No compositions ref found. Are you in the Remotion Studio and are the Remotion versions aligned?');
-    }
-    const compositions = compositionsStore.getCompositions();
-    const composition = compositions.find((c) => c.id === compositionId);
-    if (!composition) {
-        throw new Error(`No composition with the ID ${compositionId} found. Available compositions: ${compositions.map((c) => c.id).join(', ')}`);
-    }
-    const propsStore = editorPropsProviderRef.current;
-    if (!propsStore) {
-        throw new Error('No props store found. Are you in the Remotion Studio and are the Remotion versions aligned?');
-    }
-    const savedDefaultProps = (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {};
-    const unsavedDefaultProps = (_b = propsStore.getProps()[compositionId]) !== null && _b !== void 0 ? _b : savedDefaultProps;
-    const generatedDefaultProps = defaultProps({
-        schema: composition.schema,
-        savedDefaultProps,
-        unsavedDefaultProps,
-    });
+    const { generatedDefaultProps, composition } = (0, calc_new_props_1.calcNewProps)(compositionId, defaultProps);
     const res = await (0, actions_1.callUpdateDefaultPropsApi)(compositionId, generatedDefaultProps, composition.schema ? (0, extract_enum_json_paths_1.extractEnumJsonPaths)(composition.schema, z, []) : []);
     if (res.success) {
         return Promise.resolve();

package/dist/api/update-default-props.d.ts

@@ -0,0 +1,6 @@
+import type { UpdateDefaultPropsFunction } from './helpers/calc-new-props';
+export declare const PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally";
+export declare const updateDefaultProps: ({ compositionId, defaultProps, }: {
+    compositionId: string;
+    defaultProps: UpdateDefaultPropsFunction;
+}) => void;

package/dist/api/update-default-props.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateDefaultProps = exports.PROPS_UPDATED_EXTERNALLY = void 0;
+const remotion_1 = require("remotion");
+const calc_new_props_1 = require("./helpers/calc-new-props");
+exports.PROPS_UPDATED_EXTERNALLY = 'remotion.propsUpdatedExternally';
+const updateDefaultProps = ({ compositionId, defaultProps, }) => {
+    const { generatedDefaultProps, composition } = (0, calc_new_props_1.calcNewProps)(compositionId, defaultProps);
+    const propsStore = remotion_1.Internals.editorPropsProviderRef.current;
+    if (!propsStore) {
+        throw new Error('No props store found. Are you in the Remotion Studio and are the Remotion versions aligned?');
+    }
+    propsStore.setProps((prev) => {
+        return {
+            ...prev,
+            [composition.id]: generatedDefaultProps,
+        };
+    });
+    window.dispatchEvent(new CustomEvent(exports.PROPS_UPDATED_EXTERNALLY));
+};
+exports.updateDefaultProps = updateDefaultProps;

package/dist/api/watch-public-folder.d.ts

@@ -0,0 +1,13 @@
+import { type StaticFile } from './get-static-files';
+type WatcherCallback = (newFiles: StaticFile[]) => void;
+export declare const WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
+/**
+ * @description Watch for changes in the public folder.
+ * @param {Function} callback - A callback function to be called when the file changes.
+ * @returns {{cancel: () => void}} A function that can be used to cancel the event listener.
+ * @see [Documentation](https://remotion.dev/docs/studio/watch-public-folder)
+ */
+export declare const watchPublicFolder: (callback: WatcherCallback) => {
+    cancel: () => void;
+};
+export {};

package/dist/api/watch-public-folder.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.watchPublicFolder = exports.WATCH_REMOTION_STATIC_FILES = void 0;
+const remotion_1 = require("remotion");
+const get_static_files_1 = require("./get-static-files");
+exports.WATCH_REMOTION_STATIC_FILES = 'remotion_staticFilesChanged';
+/**
+ * @description Watch for changes in the public folder.
+ * @param {Function} callback - A callback function to be called when the file changes.
+ * @returns {{cancel: () => void}} A function that can be used to cancel the event listener.
+ * @see [Documentation](https://remotion.dev/docs/studio/watch-public-folder)
+ */
+const watchPublicFolder = (callback) => {
+    if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+        // eslint-disable-next-line no-console
+        console.warn('The API is only available while using the Remotion Studio.');
+        return { cancel: () => undefined };
+    }
+    const emitUpdate = () => {
+        callback((0, get_static_files_1.getStaticFiles)());
+    };
+    window.addEventListener(exports.WATCH_REMOTION_STATIC_FILES, emitUpdate);
+    const cancel = () => {
+        return window.removeEventListener(exports.WATCH_REMOTION_STATIC_FILES, emitUpdate);
+    };
+    return { cancel };
+};
+exports.watchPublicFolder = watchPublicFolder;

package/dist/api/watch-static-file.d.ts

@@ -1,6 +1,5 @@
 import type { StaticFile } from './get-static-files';
 type WatcherCallback = (newData: StaticFile | null) => void;
-export declare const WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 export type WatchRemotionStaticFilesPayload = {
     files: StaticFile[];
 };
@@ -9,7 +8,7 @@ export type WatchRemotionStaticFilesPayload = {
  * @param {string} fileName - The name of the static file to watch for changes.
  * @param {WatcherCallback} callback - A callback function to be called when the file changes.
  * @returns {{cancel: () => void}} A function that can be used to cancel the event listener.
- * @see [Documentation](https://www.remotion.dev/docs/watchstaticfile)
+ * @see [Documentation](https://remotion.dev/docs/studio/watch-static-file)
  */
 export declare const watchStaticFile: (fileName: string, callback: WatcherCallback) => {
     cancel: () => void;

package/dist/api/watch-static-file.js

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.watchStaticFile = exports.WATCH_REMOTION_STATIC_FILES = void 0;
+exports.watchStaticFile = void 0;
 const remotion_1 = require("remotion");
-exports.WATCH_REMOTION_STATIC_FILES = 'remotion_staticFilesChanged';
+const watch_public_folder_1 = require("./watch-public-folder");
 /**
  * @description Watch for changes in a specific static file.
  * @param {string} fileName - The name of the static file to watch for changes.
  * @param {WatcherCallback} callback - A callback function to be called when the file changes.
  * @returns {{cancel: () => void}} A function that can be used to cancel the event listener.
- * @see [Documentation](https://www.remotion.dev/docs/watchstaticfile)
+ * @see [Documentation](https://remotion.dev/docs/studio/watch-static-file)
  */
 const watchStaticFile = (fileName, callback) => {
-    // Check if function is called in Remotion Studio
     if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
         // eslint-disable-next-line no-console
         console.warn('The API is only available while using the Remotion Studio.');
@@ -24,9 +23,7 @@ const watchStaticFile = (fileName, callback) => {
         ? withoutStaticBase.slice(1)
         : withoutStaticBase;
     let prevFileData = window.remotion_staticFiles.find((file) => file.name === withoutLeadingSlash);
-    // Check if the specified static file has updated or deleted
-    const checkFile = (event) => {
-        const staticFiles = event.detail.files;
+    const { cancel } = (0, watch_public_folder_1.watchPublicFolder)((staticFiles) => {
         // Check for user specified file
         const newFileData = staticFiles.find((file) => file.name === withoutLeadingSlash);
         if (!newFileData) {
@@ -42,11 +39,7 @@ const watchStaticFile = (fileName, callback) => {
             callback(newFileData); // File is added or modified
             prevFileData = newFileData;
         }
-    };
-    window.addEventListener(exports.WATCH_REMOTION_STATIC_FILES, checkFile);
-    const cancel = () => {
-        return window.removeEventListener(exports.WATCH_REMOTION_STATIC_FILES, checkFile);
-    };
+    });
     return { cancel };
 };
 exports.watchStaticFile = watchStaticFile;

package/dist/components/Editor.js

@@ -46,7 +46,8 @@ const background = {
     position: 'absolute',
 };
 const DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
-exports.BUFFER_STATE_DELAY_IN_MILLISECONDS = typeof process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === 'undefined'
+exports.BUFFER_STATE_DELAY_IN_MILLISECONDS = typeof process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === 'undefined' ||
+    process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === null
     ? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS
     : Number(process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS);
 const Editor = ({ Root, readOnlyStudio }) => {

package/dist/components/PlayPause.js

@@ -208,6 +208,7 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
         let stopped = false;
         const onBuffer = () => {
             requestAnimationFrame(() => {
+                stopped = false;
                 timeout = setTimeout(() => {
                     if (!stopped) {
                         setShowBufferState(true);

package/dist/components/RenderModal/DataEditor.js

@@ -296,6 +296,6 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, mayS
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: tabWrapper, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), warnings.length > 0 ? ((0, jsx_runtime_1.jsx)(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
                         ? warnings.map((warning) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })] }, warning)))
-                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: defaultProps, setValue: setDefaultProps, schema: schema, zodValidationResult: zodValidationResult, defaultProps: unresolvedComposition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: setDefaultProps, onSave: onUpdate, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
+                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { unsavedDefaultProps: defaultProps, setValue: setDefaultProps, schema: schema, zodValidationResult: zodValidationResult, savedDefaultProps: unresolvedComposition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: setDefaultProps, onSave: onUpdate, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
 };
 exports.DataEditor = DataEditor;

package/dist/components/RenderModal/RenderModalJSONPropsEditor.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import type { SerializedJSONWithCustomFields } from 'remotion';
 import type { z } from 'zod';
 export declare const RenderModalJSONPropsEditor: React.FC<{
-    value: unknown;
-    setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
-    onSave: () => void;
-    showSaveButton: boolean;
-    serializedJSON: SerializedJSONWithCustomFields | null;
-    defaultProps: Record<string, unknown>;
-    schema: z.ZodTypeAny;
+    readonly value: unknown;
+    readonly setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
+    readonly onSave: () => void;
+    readonly showSaveButton: boolean;
+    readonly serializedJSON: SerializedJSONWithCustomFields | null;
+    readonly defaultProps: Record<string, unknown>;
+    readonly schema: z.ZodTypeAny;
 }>;

package/dist/components/RenderModal/SchemaEditor/SchemaEditor.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import type { AnyZodObject, z } from 'zod';
 export declare const SchemaEditor: React.FC<{
-    schema: AnyZodObject;
-    value: Record<string, unknown>;
-    setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
-    zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
-    defaultProps: Record<string, unknown>;
-    onSave: (updater: (oldState: Record<string, unknown>) => Record<string, unknown>) => void;
-    showSaveButton: boolean;
-    saving: boolean;
-    saveDisabledByParent: boolean;
+    readonly schema: AnyZodObject;
+    readonly unsavedDefaultProps: Record<string, unknown>;
+    readonly setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
+    readonly zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
+    readonly savedDefaultProps: Record<string, unknown>;
+    readonly onSave: (updater: (oldState: Record<string, unknown>) => Record<string, unknown>) => void;
+    readonly showSaveButton: boolean;
+    readonly saving: boolean;
+    readonly saveDisabledByParent: boolean;
 }>;

package/dist/components/RenderModal/SchemaEditor/SchemaEditor.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const update_default_props_1 = require("../../../api/update-default-props");
 const document_title_1 = require("../../../helpers/document-title");
 const use_keybinding_1 = require("../../../helpers/use-keybinding");
 const is_menu_item_1 = require("../../Menu/is-menu-item");
@@ -10,30 +11,46 @@ const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const SchemaErrorMessages_1 = require("./SchemaErrorMessages");
 const ZodObjectEditor_1 = require("./ZodObjectEditor");
 const deep_equal_1 = require("./deep-equal");
+const local_state_1 = require("./local-state");
 const scrollable = {
     display: 'flex',
     flexDirection: 'column',
     overflowY: 'auto',
 };
-const SchemaEditor = ({ schema, value, setValue, zodValidationResult, defaultProps, onSave, showSaveButton, saving, saveDisabledByParent, }) => {
+const SchemaEditor = ({ schema, unsavedDefaultProps, setValue, zodValidationResult, savedDefaultProps, onSave, showSaveButton, saving, saveDisabledByParent, }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const [revision, setRevision] = (0, react_1.useState)(0);
+    const revisionState = (0, react_1.useMemo)(() => {
+        return {
+            childResetRevision: revision,
+        };
+    }, [revision]);
+    (0, react_1.useEffect)(() => {
+        const bumpRevision = () => {
+            setRevision((old) => old + 1);
+        };
+        window.addEventListener(update_default_props_1.PROPS_UPDATED_EXTERNALLY, bumpRevision);
+        return () => {
+            window.removeEventListener(update_default_props_1.PROPS_UPDATED_EXTERNALLY, bumpRevision);
+        };
+    }, []);
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
     const hasChanged = (0, react_1.useMemo)(() => {
-        return !(0, deep_equal_1.deepEqual)(defaultProps, value);
-    }, [defaultProps, value]);
+        return !(0, deep_equal_1.deepEqual)(savedDefaultProps, unsavedDefaultProps);
+    }, [savedDefaultProps, unsavedDefaultProps]);
     (0, react_1.useEffect)(() => {
         (0, document_title_1.setUnsavedProps)(hasChanged);
     }, [hasChanged]);
     const onQuickSave = (0, react_1.useCallback)(() => {
         if (hasChanged && showSaveButton) {
             onSave(() => {
-                return value;
+                return unsavedDefaultProps;
             });
         }
-    }, [hasChanged, onSave, showSaveButton, value]);
+    }, [hasChanged, onSave, showSaveButton, unsavedDefaultProps]);
     (0, react_1.useEffect)(() => {
         const save = keybindings.registerKeybinding({
             event: 'keydown',
@@ -52,10 +69,10 @@ const SchemaEditor = ({ schema, value, setValue, zodValidationResult, defaultPro
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const typeName = def.typeName;
     const reset = (0, react_1.useCallback)(() => {
-        setValue(defaultProps);
-    }, [defaultProps, setValue]);
+        setValue(savedDefaultProps);
+    }, [savedDefaultProps, setValue]);
     if (!zodValidationResult.success) {
-        const defaultPropsValid = schema.safeParse(defaultProps);
+        const defaultPropsValid = schema.safeParse(savedDefaultProps);
         if (!defaultPropsValid.success) {
             return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.InvalidDefaultProps, { zodValidationResult: zodValidationResult });
         }
@@ -64,6 +81,6 @@ const SchemaEditor = ({ schema, value, setValue, zodValidationResult, defaultPro
     if (typeName !== z.ZodFirstPartyTypeKind.ZodObject) {
         return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.TopLevelZodValue, { typeReceived: typeName });
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { discriminatedUnionReplacement: null, value: value, setValue: setValue, jsonPath: [], schema: schema, defaultValue: defaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: true }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(local_state_1.RevisionContext.Provider, { value: revisionState, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { discriminatedUnionReplacement: null, unsavedValue: unsavedDefaultProps, setValue: setValue, jsonPath: [], schema: schema, savedValue: savedDefaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: true }) }) }));
 };
 exports.SchemaEditor = SchemaEditor;

package/dist/components/RenderModal/SchemaEditor/ZodArrayEditor.d.ts

@@ -3,15 +3,15 @@ import type { z } from 'zod';
 import type { UpdaterFunction } from './ZodSwitch';
 import type { JSONPath } from './zod-types';
 export declare const ZodArrayEditor: React.FC<{
-    schema: z.ZodTypeAny;
-    jsonPath: JSONPath;
-    value: unknown[];
-    defaultValue: unknown[];
-    setValue: UpdaterFunction<unknown[]>;
-    onSave: UpdaterFunction<unknown[]>;
-    showSaveButton: boolean;
-    onRemove: null | (() => void);
-    saving: boolean;
-    saveDisabledByParent: boolean;
-    mayPad: boolean;
+    readonly schema: z.ZodTypeAny;
+    readonly jsonPath: JSONPath;
+    readonly value: unknown[];
+    readonly defaultValue: unknown[];
+    readonly setValue: UpdaterFunction<unknown[]>;
+    readonly onSave: UpdaterFunction<unknown[]>;
+    readonly showSaveButton: boolean;
+    readonly onRemove: null | (() => void);
+    readonly saving: boolean;
+    readonly saveDisabledByParent: boolean;
+    readonly mayPad: boolean;
 }>;

package/dist/components/RenderModal/SchemaEditor/ZodArrayEditor.js

@@ -38,10 +38,10 @@ const deep_equal_1 = require("./deep-equal");
 const local_state_1 = require("./local-state");
 const ZodArrayEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     const { localValue, onChange, RevisionContextProvider, reset } = (0, local_state_1.useLocalState)({
-        value,
+        unsavedValue: value,
         schema,
         setValue,
-        defaultValue,
+        savedValue: defaultValue,
     });
     const [expanded, setExpanded] = (0, react_1.useState)(true);
     const def = schema._def;

package/dist/components/RenderModal/SchemaEditor/ZodBooleanEditor.d.ts

@@ -3,15 +3,15 @@ import type { z } from 'zod';
 import type { UpdaterFunction } from './ZodSwitch';
 import type { JSONPath } from './zod-types';
 export declare const ZodBooleanEditor: React.FC<{
-    schema: z.ZodTypeAny;
-    jsonPath: JSONPath;
-    value: boolean;
-    setValue: UpdaterFunction<boolean>;
-    defaultValue: boolean;
-    onSave: UpdaterFunction<boolean>;
-    onRemove: null | (() => void);
-    showSaveButton: boolean;
-    saving: boolean;
-    saveDisabledByParent: boolean;
-    mayPad: boolean;
+    readonly schema: z.ZodTypeAny;
+    readonly jsonPath: JSONPath;
+    readonly value: boolean;
+    readonly setValue: UpdaterFunction<boolean>;
+    readonly defaultValue: boolean;
+    readonly onSave: UpdaterFunction<boolean>;
+    readonly onRemove: null | (() => void);
+    readonly showSaveButton: boolean;
+    readonly saving: boolean;
+    readonly saveDisabledByParent: boolean;
+    readonly mayPad: boolean;
 }>;

package/dist/components/RenderModal/SchemaEditor/ZodBooleanEditor.js

@@ -14,8 +14,8 @@ const ZodBooleanEditor = ({ schema, jsonPath, value, setValue, onSave, defaultVa
     const { localValue, onChange, reset } = (0, local_state_1.useLocalState)({
         schema,
         setValue,
-        value,
-        defaultValue,
+        unsavedValue: value,
+        savedValue: defaultValue,
     });
     const onToggle = (0, react_1.useCallback)((e) => {
         onChange(() => e.target.checked, false, false);