remotion 4.0.0-alpha8 → 4.0.0-alpha9

package/dist/cjs/Composition.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType, PropsWithChildren } from 'react';
 import React from 'react';
-import type { z } from 'zod';
+import type { AnyZodObject } from 'zod';
 import type { PropsIfHasProps } from './props-if-has-props.js';
 declare type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
 export declare type CompProps<Props> = {
@@ -10,13 +10,13 @@ export declare type CompProps<Props> = {
 } | {
     component: LooseComponentType<Props>;
 };
-export declare type StillProps<Schema extends z.ZodTypeAny, Props> = {
+export declare type StillProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = {
     width: number;
     height: number;
     id: string;
     schema?: Schema;
 } & CompProps<Props> & PropsIfHasProps<Schema, Props>;
-export declare type CompositionProps<Schema extends z.ZodTypeAny, Props> = StillProps<Schema, Props> & {
+export declare type CompositionProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = StillProps<Schema, Props> & {
     fps: number;
     durationInFrames: number;
 };
@@ -24,6 +24,6 @@ export declare type CompositionProps<Schema extends z.ZodTypeAny, Props> = Still
  * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
  * @see [Documentation](https://www.remotion.dev/docs/composition)
  */
-export declare const Composition: <Schema extends z.ZodTypeAny, Props>({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }: CompositionProps<Schema, Props>) => React.ReactPortal | null;
+export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined>({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }: CompositionProps<Schema, Props>) => React.ReactPortal | null;
 export declare const ClipComposition: React.FC<PropsWithChildren>;
 export {};

package/dist/cjs/Composition.js

@@ -19,6 +19,7 @@ const portal_node_js_1 = require("./portal-node.js");
 const use_lazy_component_js_1 = require("./use-lazy-component.js");
 const use_video_js_1 = require("./use-video.js");
 const validate_composition_id_js_1 = require("./validation/validate-composition-id.js");
+const validate_default_props_js_1 = require("./validation/validate-default-props.js");
 const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
 const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
 const validate_fps_js_1 = require("./validation/validate-fps.js");
@@ -64,6 +65,7 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
             allowFloats: false,
         });
         (0, validate_fps_js_1.validateFps)(fps, 'as a prop of the <Composition/> component', false);
+        (0, validate_default_props_js_1.validateDefaultAndInputProps)(defaultProps, 'defaultProps', id);
         registerComposition({
             durationInFrames,
             fps,

package/dist/cjs/CompositionManager.d.ts

@@ -1,9 +1,9 @@
 import type { ComponentType, LazyExoticComponent } from 'react';
 import React from 'react';
-import type { z } from 'zod';
+import type { AnyZodObject } from 'zod';
 import type { TFolder } from './Folder.js';
 import type { PropsIfHasProps } from './props-if-has-props.js';
-export declare type TComposition<Schema extends z.ZodTypeAny, Props> = {
+export declare type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = {
     width: number;
     height: number;
     fps: number;
@@ -15,11 +15,11 @@ export declare type TComposition<Schema extends z.ZodTypeAny, Props> = {
     nonce: number;
     schema: Schema | null;
 } & PropsIfHasProps<Schema, Props>;
-export declare type AnyComposition = TComposition<z.ZodTypeAny, unknown>;
-export declare type TCompMetadata<Schema extends z.ZodTypeAny, Props> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
-export declare type AnyCompMetadata = TCompMetadata<z.ZodTypeAny, unknown>;
-export declare type SmallTCompMetadata<T extends z.ZodTypeAny, Props> = Pick<TComposition<T, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition<T, Props>, 'defaultProps'>>;
-export declare type AnySmallCompMetadata = SmallTCompMetadata<z.ZodTypeAny, unknown>;
+export declare type AnyComposition = TComposition<AnyZodObject, Record<string, unknown> | undefined>;
+export declare type TCompMetadata<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
+export declare type AnyCompMetadata = TCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
+export declare type SmallTCompMetadata<T extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<T, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition<T, Props>, 'defaultProps'>>;
+export declare type AnySmallCompMetadata = SmallTCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
 declare type EnhancedTSequenceData = {
     type: 'sequence';
 } | {
@@ -66,7 +66,7 @@ export declare type TAsset = {
 declare type BaseMetadata = Pick<AnyCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
 export declare type CompositionManagerContext = {
     compositions: AnyComposition[];
-    registerComposition: <Schema extends z.ZodTypeAny, Props>(comp: TComposition<Schema, Props>) => void;
+    registerComposition: <Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined>(comp: TComposition<Schema, Props>) => void;
     unregisterComposition: (name: string) => void;
     registerFolder: (name: string, parent: string | null) => void;
     unregisterFolder: (name: string, parent: string | null) => void;
@@ -84,7 +84,7 @@ export declare type CompositionManagerContext = {
 };
 export declare const CompositionManager: React.Context<CompositionManagerContext>;
 export declare const compositionsRef: React.RefObject<{
-    getCompositions: () => TCompMetadata<z.ZodTypeAny, unknown>[];
+    getCompositions: () => TCompMetadata<AnyZodObject, Record<string, unknown> | undefined>[];
 }>;
 export declare const CompositionManagerProvider: React.FC<{
     children: React.ReactNode;

package/dist/cjs/EditorProps.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-declare type Props = Record<string, object>;
+declare type Props = Record<string, Record<string, unknown>>;
 export declare type EditorPropsContextType = {
     props: Props;
     updateProps: (options: {
         id: string;
-        defaultProps: object;
-        newProps: object;
+        defaultProps: Record<string, unknown>;
+        newProps: Record<string, unknown> | ((oldProps: Record<string, unknown>) => Record<string, unknown>);
     }) => void;
 };
 export declare const EditorPropsContext: React.Context<EditorPropsContextType>;

package/dist/cjs/Still.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { z } from 'zod';
+import type { AnyZodObject } from 'zod';
 import type { StillProps } from './Composition.js';
 /**
  * @description A <Still /> is a <Composition /> that is only 1 frame long.
  * @see [Documentation](https://www.remotion.dev/docs/still)
  */
-export declare const Still: <Schema extends z.ZodTypeAny, Props>(props: StillProps<Schema, Props>) => React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export declare const Still: <Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined>(props: StillProps<Schema, Props>) => React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

package/dist/cjs/index.d.ts

@@ -40,7 +40,7 @@ export declare type BundleState = {
 } | {
     type: 'composition';
     compositionName: string;
-    compositionDefaultProps: unknown;
+    compositionDefaultProps: Record<string, unknown>;
     compositionHeight: number;
     compositionDurationInFrames: number;
     compositionWidth: number;

package/dist/cjs/internals.d.ts

@@ -23,13 +23,13 @@ export declare const Internals: {
         width: number;
         fps: number;
         durationInFrames: number;
-        defaultProps?: unknown;
+        defaultProps?: Record<string, unknown> | undefined;
         id: string;
         folderName: string | null;
         parentFolderName: string | null;
-        component: import("react").LazyExoticComponent<import("react").ComponentType<unknown>>;
+        component: import("react").LazyExoticComponent<import("react").ComponentType<Record<string, unknown> | undefined>>;
         nonce: number;
-        schema: import("zod").ZodTypeAny | null;
+        schema: import("zod").AnyZodObject | null;
     } | null;
     getRoot: () => import("react").FC<{}> | null;
     useMediaVolumeState: () => readonly [number, (u: number) => void];
@@ -52,6 +52,7 @@ export declare const Internals: {
         allowFloats: boolean;
     }) => void;
     validateFps: (fps: number, location: string, isGif: boolean) => void;
+    validateDefaultAndInputProps: (defaultProps: unknown, name: "defaultProps" | "inputProps", compositionId: string | null) => void;
     validateDimension: (amount: number, nameOfProp: string, location: string) => void;
     getRemotionEnvironment: () => RemotionEnvironment;
     SharedAudioContext: import("react").Context<{
@@ -79,7 +80,7 @@ export declare const Internals: {
     isCompositionIdValid: (id: string) => RegExpMatchArray | null;
     getPreviewDomElement: () => HTMLElement | null;
     compositionsRef: import("react").RefObject<{
-        getCompositions: () => TCompMetadata<import("zod").ZodTypeAny, unknown>[];
+        getCompositions: () => TCompMetadata<import("zod").AnyZodObject, Record<string, unknown> | undefined>[];
     }>;
     DELAY_RENDER_CALLSTACK_TOKEN: string;
     portalNode: () => HTMLElement;

package/dist/cjs/internals.js

@@ -49,6 +49,7 @@ const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 const use_video_js_1 = require("./use-video.js");
 const validate_frame_js_1 = require("./validate-frame.js");
 const validate_composition_id_js_1 = require("./validation/validate-composition-id.js");
+const validate_default_props_js_1 = require("./validation/validate-default-props.js");
 const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
 const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
 const validate_fps_js_1 = require("./validation/validate-fps.js");
@@ -79,6 +80,7 @@ exports.Internals = {
     SetMediaVolumeContext: volume_position_state_js_1.SetMediaVolumeContext,
     validateDurationInFrames: validate_duration_in_frames_js_1.validateDurationInFrames,
     validateFps: validate_fps_js_1.validateFps,
+    validateDefaultAndInputProps: validate_default_props_js_1.validateDefaultAndInputProps,
     validateDimension: validate_dimensions_js_1.validateDimension,
     getRemotionEnvironment: get_environment_js_1.getRemotionEnvironment,
     SharedAudioContext: shared_audio_tags_js_1.SharedAudioContext,

package/dist/cjs/props-if-has-props.d.ts

@@ -1,5 +1,5 @@
-import type { z } from 'zod';
-export declare type PropsIfHasProps<Schema extends z.ZodTypeAny, Props> = z.ZodTypeAny extends Schema ? {} extends Props ? {
+import type { AnyZodObject, z } from 'zod';
+export declare type PropsIfHasProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = AnyZodObject extends Schema ? {} extends Props ? {
     defaultProps?: Props;
 } : {
     defaultProps: Props;

package/dist/cjs/spring/index.js

@@ -50,15 +50,14 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
                 throw new Error('did not calculate natural duration, this is an error with Remotion. Please report');
             },
         };
-    const frame = reverse
+    const frame = (reverse
         ? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
-        : passedFrame;
+        : passedFrame) - delay;
     const spr = (0, spring_utils_js_1.springCalculation)({
         fps,
-        frame: (passedDurationInFrames === undefined
+        frame: passedDurationInFrames === undefined
             ? frame
-            : frame / (passedDurationInFrames / naturalDurationGetter.get())) -
-            delay,
+            : frame / (passedDurationInFrames / naturalDurationGetter.get()),
         config,
         from,
         to,

package/dist/cjs/use-video.d.ts

@@ -4,11 +4,11 @@ export declare const useVideo: () => {
     width: number;
     fps: number;
     durationInFrames: number;
-    defaultProps?: unknown;
+    defaultProps?: Record<string, unknown> | undefined;
     id: string;
     folderName: string | null;
     parentFolderName: string | null;
-    component: import("react").LazyExoticComponent<import("react").ComponentType<unknown>>;
+    component: import("react").LazyExoticComponent<import("react").ComponentType<Record<string, unknown> | undefined>>;
     nonce: number;
-    schema: import("zod").ZodTypeAny | null;
+    schema: import("zod").AnyZodObject | null;
 } | null;

package/dist/cjs/validation/validate-default-props.d.ts

@@ -0,0 +1 @@
+export declare const validateDefaultAndInputProps: (defaultProps: unknown, name: 'defaultProps' | 'inputProps', compositionId: string | null) => void;

package/dist/cjs/validation/validate-default-props.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateDefaultAndInputProps = void 0;
+const validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
+    if (!defaultProps) {
+        return;
+    }
+    if (typeof defaultProps !== 'object') {
+        throw new Error(`"${name}" must be an object, but you passed a value of type ${typeof defaultProps}`);
+    }
+    if (Array.isArray(defaultProps)) {
+        throw new Error(`"${name}" must be an object, an array was passed ${compositionId ? `for composition "${compositionId}"` : ''}`);
+    }
+};
+exports.validateDefaultAndInputProps = validateDefaultAndInputProps;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.0-alpha8";
+export declare const VERSION = "4.0.0-alpha9";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '4.0.0-alpha8';
+exports.VERSION = '4.0.0-alpha9';

package/dist/esm/index.mjs

@@ -58,7 +58,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.0-alpha8';
+const VERSION = '4.0.0-alpha9';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -2140,6 +2140,18 @@ const getRegex = () => /^([a-zA-Z0-9-])+$/g;
 const isCompositionIdValid = (id) => id.match(getRegex());
 const invalidCompositionErrorMessage = `Composition ID must match ${String(getRegex())}`;
 
+const validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
+    if (!defaultProps) {
+        return;
+    }
+    if (typeof defaultProps !== 'object') {
+        throw new Error(`"${name}" must be an object, but you passed a value of type ${typeof defaultProps}`);
+    }
+    if (Array.isArray(defaultProps)) {
+        throw new Error(`"${name}" must be an object, an array was passed ${compositionId ? `for composition "${compositionId}"` : ''}`);
+    }
+};
+
 const validateDimension = (amount, nameOfProp, location) => {
     if (typeof amount !== 'number') {
         throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
@@ -2218,6 +2230,7 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
             allowFloats: false,
         });
         validateFps(fps, 'as a prop of the <Composition/> component', false);
+        validateDefaultAndInputProps(defaultProps, 'defaultProps', id);
         registerComposition({
             durationInFrames,
             fps,
@@ -3290,6 +3303,7 @@ const Internals = {
     SetMediaVolumeContext,
     validateDurationInFrames,
     validateFps,
+    validateDefaultAndInputProps,
     validateDimension,
     getRemotionEnvironment,
     SharedAudioContext,
@@ -3614,15 +3628,14 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
                 throw new Error('did not calculate natural duration, this is an error with Remotion. Please report');
             },
         };
-    const frame = reverse
+    const frame = (reverse
         ? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
-        : passedFrame;
+        : passedFrame) - delay;
     const spr = springCalculation({
         fps,
-        frame: (passedDurationInFrames === undefined
+        frame: passedDurationInFrames === undefined
             ? frame
-            : frame / (passedDurationInFrames / naturalDurationGetter.get())) -
-            delay,
+            : frame / (passedDurationInFrames / naturalDurationGetter.get()),
         config,
         from,
         to,

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.0.0-alpha8';
+const VERSION = '4.0.0-alpha9';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.0-alpha8",
+  "version": "4.0.0-alpha9",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -21,7 +21,7 @@
     "@jonny/eslint-config": "3.0.273",
     "@rollup/plugin-typescript": "^8.2.0",
     "@testing-library/react": "14.0.0",
-    "@types/node": "^16.7.5",
+    "@types/node": "18.14.6",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
     "@vitejs/plugin-react": "^2.0.0",
@@ -35,8 +35,8 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.70.1",
     "typescript": "^4.7.0",
-    "vitest": "0.24.3",
-    "webpack": "5.76.1",
+    "vitest": "0.31.1",
+    "webpack": "5.83.1",
     "zod": "3.21.4"
   },
   "keywords": [
@@ -72,9 +72,10 @@
     }
   },
   "scripts": {
+    "formatting": "prettier src --check",
     "lint": "eslint src --ext ts,tsx",
     "test": "vitest --run",
-    "build": "rollup --config rollup-version.config.js && rollup --config rollup.config.js && tsc -d",
+    "build": "tsc -d && rollup --config rollup-version.config.js && rollup --config rollup.config.js",
     "watch": "tsc -w"
   }
 }