@remotion/transitions 4.0.148 → 4.0.150

package/bundle.ts

@@ -1,7 +1,21 @@
-const presentations = ['slide', 'flip', 'wipe', 'fade', 'clock-wipe'];
-import {build} from 'bun';
+import {build, revision} from 'bun';
 import path from 'path';
 
+if (process.env.NODE_ENV !== 'production') {
+	throw new Error('This script must be run using NODE_ENV=production');
+}
+
+if (!revision.startsWith('07ce')) {
+	// eslint-disable-next-line no-console
+	console.warn('warn: Remotion currently uses a fork of Bun to bundle.');
+	// eslint-disable-next-line no-console
+	console.log(
+		'You dont currently run the fork, this could lead to duplicate key warnings in React.',
+	);
+}
+
+const presentations = ['slide', 'flip', 'wipe', 'fade', 'clock-wipe'];
+
 const output = await build({
 	entrypoints: [
 		'src/index.ts',
@@ -22,9 +36,7 @@ const output = await build({
 
 for (const file of output.outputs) {
 	const str = await file.text();
-	const newStr = str
-		.replace(/jsxDEV/g, 'jsx')
-		.replace(/react\/jsx-dev-runtime/g, 'react/jsx-runtime');
+	const newStr = str;
 
 	Bun.write(path.join('dist', 'esm', file.path), newStr);
 }

package/dist/TransitionSeries.d.ts

@@ -13,7 +13,7 @@ type SeriesSequenceProps = PropsWithChildren<{
      */
     readonly stack?: string;
 } & LayoutBasedProps & Pick<SequencePropsWithoutDuration, 'name'>>;
-declare const SeriesSequence: ({ children }: SeriesSequenceProps) => import("react/jsx-runtime.js").JSX.Element;
+declare const SeriesSequence: ({ children }: SeriesSequenceProps) => import("react").ReactNode;
 /**
  * @description A React component designed to manage a series of transitions and sequences where each transition may have specific timing and presentation components. It extends the capabilities of `<Sequence>` and is specifically structured to handle transitions that involve entering and exiting sequences.
  * @see [Documentation](https://remotion.dev/docs/transitions/transitionseries)

package/dist/TransitionSeries.js

@@ -16,7 +16,7 @@ _props) {
 };
 const SeriesSequence = ({ children }) => {
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    return children;
 };
 const TransitionSeriesChildren = ({ children, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
@@ -123,19 +123,27 @@ const TransitionSeriesChildren = ({ children, }) => {
                 const prevPresentation = (_c = prev.props.presentation) !== null && _c !== void 0 ? _c : (0, slide_js_1.slide)();
                 const UppercaseNextPresentation = nextPresentation.component;
                 const UppercasePrevPresentation = prevPresentation.component;
-                return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: child }) }) }));
+                return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
+                // eslint-disable-next-line react/no-array-index-key
+                , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: child }) }) }, i));
             }
             if (prevProgress !== null && prev) {
                 const prevPresentation = (_f = prev.props.presentation) !== null && _f !== void 0 ? _f : (0, slide_js_1.slide)();
                 const UppercasePrevPresentation = prevPresentation.component;
-                return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: child }) }));
+                return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
+                // eslint-disable-next-line react/no-array-index-key
+                , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: child }) }, i));
             }
             if (nextProgress !== null && next) {
                 const nextPresentation = (_h = next.props.presentation) !== null && _h !== void 0 ? _h : (0, slide_js_1.slide)();
                 const UppercaseNextPresentation = nextPresentation.component;
-                return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: child }) }));
+                return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
+                // eslint-disable-next-line react/no-array-index-key
+                , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: child }) }, i));
             }
-            return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: child }));
+            return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
+            // eslint-disable-next-line react/no-array-index-key
+            , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: child }, i));
         });
     }, [children, fps, frame]);
     // eslint-disable-next-line react/jsx-no-useless-fragment

package/dist/esm/clock-wipe.mjs

@@ -4,7 +4,8 @@ import {makePie} from "@remotion/shapes";
 import {useMemo, useState} from "react";
 import {AbsoluteFill, random} from "remotion";
 import {
-jsx
+jsx,
+jsxs
 } from "react/jsx-runtime";
 var ClockWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
   const finishedRadius = Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
@@ -34,13 +35,13 @@ var ClockWipePresentation = ({ children, presentationDirection, presentationProg
     passedProps.outerExitStyle,
     presentationDirection
   ]);
-  return jsx(AbsoluteFill, {
+  return jsxs(AbsoluteFill, {
     style: outerStyle,
     children: [
       jsx(AbsoluteFill, {
         style,
         children
-      }, undefined, false, undefined, this),
+      }),
       presentationDirection === "exiting" ? null : jsx(AbsoluteFill, {
         children: jsx("svg", {
           children: jsx("defs", {
@@ -49,13 +50,13 @@ var ClockWipePresentation = ({ children, presentationDirection, presentationProg
               children: jsx("path", {
                 d: translatedPath,
                 fill: "black"
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
+              })
+            })
+          })
+        })
+      })
     ]
-  }, undefined, true, undefined, this);
+  });
 };
 var clockWipe = (props) => {
   return { component: ClockWipePresentation, props: props ?? {} };

package/dist/esm/fade.mjs

@@ -21,7 +21,7 @@ var FadePresentation = ({ children, presentationDirection, presentationProgress,
   return jsx(AbsoluteFill, {
     style,
     children
-  }, undefined, false, undefined, this);
+  });
 };
 var fade = (props) => {
   return {

package/dist/esm/flip.mjs

@@ -49,8 +49,8 @@ var Flip = ({
     children: jsx(AbsoluteFill, {
       style,
       children
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+    })
+  });
 };
 var flip = (props) => {
   return { component: Flip, props: props ?? {} };

package/dist/esm/index.mjs

@@ -13,7 +13,6 @@ var SlidePresentation = ({
 }) => {
   const directionStyle = useMemo(() => {
     const presentationProgressWithEpsilonCorrection = presentationProgress === 1 ? presentationProgress * 100 : presentationProgress * 100 - epsilon;
-    console.log(presentationProgressWithEpsilonCorrection);
     if (presentationDirection === "exiting") {
       switch (direction) {
         case "from-left":
@@ -70,7 +69,7 @@ var SlidePresentation = ({
   return jsx(AbsoluteFill, {
     style,
     children
-  }, undefined, false, undefined, this);
+  });
 };
 var slide = (props) => {
   return {
@@ -158,9 +157,7 @@ var TransitionSeriesTransition = function(_props) {
   return null;
 };
 var SeriesSequence = ({ children }) => {
-  return jsx2(Fragment, {
-    children
-  }, undefined, false, undefined, this);
+  return children;
 };
 var TransitionSeriesChildren = ({
   children
@@ -265,9 +262,9 @@ var TransitionSeriesChildren = ({
               presentationDirection: "entering",
               presentationProgress: prevProgress,
               children: child
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
+            })
+          })
+        }, i);
       }
       if (prevProgress !== null && prev) {
         const prevPresentation = prev.props.presentation ?? slide();
@@ -282,8 +279,8 @@ var TransitionSeriesChildren = ({
             presentationDirection: "entering",
             presentationProgress: prevProgress,
             children: child
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
+          })
+        }, i);
       }
       if (nextProgress !== null && next) {
         const nextPresentation = next.props.presentation ?? slide();
@@ -298,8 +295,8 @@ var TransitionSeriesChildren = ({
             presentationDirection: "exiting",
             presentationProgress: nextProgress,
             children: child
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this);
+          })
+        }, i);
       }
       return jsx2(Sequence, {
         from: Math.floor(actualStartFrame),
@@ -307,12 +304,12 @@ var TransitionSeriesChildren = ({
         ...passedProps,
         name: passedProps.name || "<TS.Sequence>",
         children: child
-      }, undefined, false, undefined, this);
+      }, i);
     });
   }, [children, fps, frame]);
   return jsx2(Fragment, {
     children: childrenValue
-  }, undefined, false, undefined, this);
+  });
 };
 var TransitionSeries = ({ children, name, layout: passedLayout, ...otherProps }) => {
   const displayName = name ?? "<TransitionSeries>";
@@ -326,8 +323,8 @@ var TransitionSeries = ({ children, name, layout: passedLayout, ...otherProps })
     ...otherProps,
     children: jsx2(TransitionSeriesChildren, {
       children
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+    })
+  });
 };
 TransitionSeries.Sequence = SeriesSequence;
 TransitionSeries.Transition = TransitionSeriesTransition;

package/dist/esm/slide.mjs

@@ -13,7 +13,6 @@ var SlidePresentation = ({
 }) => {
   const directionStyle = useMemo(() => {
     const presentationProgressWithEpsilonCorrection = presentationProgress === 1 ? presentationProgress * 100 : presentationProgress * 100 - epsilon;
-    console.log(presentationProgressWithEpsilonCorrection);
     if (presentationDirection === "exiting") {
       switch (direction) {
         case "from-left":
@@ -70,7 +69,7 @@ var SlidePresentation = ({
   return jsx(AbsoluteFill, {
     style,
     children
-  }, undefined, false, undefined, this);
+  });
 };
 var slide = (props) => {
   return {

package/dist/esm/wipe.mjs

@@ -2,7 +2,8 @@
 import {useMemo, useState} from "react";
 import {AbsoluteFill, random} from "remotion";
 import {
-jsx
+jsx,
+jsxs
 } from "react/jsx-runtime";
 var makePathIn = (progress, direction) => {
   switch (direction) {
@@ -155,13 +156,13 @@ var WipePresentation = ({
       pointerEvents: "none"
     };
   }, []);
-  return jsx(AbsoluteFill, {
+  return jsxs(AbsoluteFill, {
     style: outerStyle,
     children: [
       jsx(AbsoluteFill, {
         style,
         children
-      }, undefined, false, undefined, this),
+      }),
       jsx(AbsoluteFill, {
         children: jsx("svg", {
           viewBox: "0 0 1 1",
@@ -173,13 +174,13 @@ var WipePresentation = ({
               children: jsx("path", {
                 d: path,
                 fill: "black"
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
+              })
+            })
+          })
+        })
+      })
     ]
-  }, undefined, true, undefined, this);
+  });
 };
 var wipe = (props) => {
   return {

package/dist/presentations/slide.js

@@ -12,7 +12,6 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
         const presentationProgressWithEpsilonCorrection = presentationProgress === 1
             ? presentationProgress * 100
             : presentationProgress * 100 - epsilon;
-        console.log(presentationProgressWithEpsilonCorrection);
         if (presentationDirection === 'exiting') {
             switch (direction) {
                 case 'from-left':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/transitions",
-  "version": "4.0.148",
+  "version": "4.0.150",
   "description": "Transition presets for Remotion",
   "sideEffects": false,
   "main": "dist/esm/index.mjs",
@@ -16,9 +16,9 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.148",
-    "@remotion/shapes": "4.0.148",
-    "@remotion/paths": "4.0.148"
+    "remotion": "4.0.150",
+    "@remotion/paths": "4.0.150",
+    "@remotion/shapes": "4.0.150"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.281",
@@ -32,8 +32,8 @@
     "@types/react-dom": "18.3.0",
     "@types/bun": "^1.0.12",
     "@vitejs/plugin-react": "^2.0.0",
-    "remotion": "4.0.148",
-    "@remotion/test-utils": "4.0.148"
+    "remotion": "4.0.150",
+    "@remotion/test-utils": "4.0.150"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -108,7 +108,6 @@
     "test": "vitest src --run",
     "lint": "eslint src --ext ts,tsx",
     "formatting": "prettier src --check",
-    "watch": "tsc -w",
-    "build": "tsc -d && bun bundle.ts"
+    "build": "bun --env-file=../.env.bundle bundle.ts"
   }
 }