@remotion/transitions 4.0.137 → 4.0.139

package/build.ts

@@ -0,0 +1,30 @@
+const presentations = ['slide', 'flip', 'wipe', 'fade', 'clock-wipe'];
+import {build} from 'bun';
+import path from 'path';
+
+const output = await build({
+	entrypoints: [
+		'src/index.ts',
+		...presentations.map((p) => `src/presentations/${p}.tsx`),
+	],
+	external: [
+		'remotion',
+		'remotion/no-react',
+		'react',
+		'react/jsx-runtime',
+		'react/jsx-runtime',
+		'react/jsx-dev-runtime',
+		'@remotion/paths',
+		'@remotion/shapes',
+	],
+	naming: '[name].mjs',
+});
+
+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');
+
+	Bun.write(path.join('dist', 'esm', file.path), newStr);
+}

package/dist/esm/clock-wipe.mjs

@@ -1,45 +1,65 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { translatePath } from '@remotion/paths';
-import { makePie } from '@remotion/shapes';
-import { useState, useMemo } from 'react';
-import { random, AbsoluteFill } from 'remotion';
-
-const ClockWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
-    const finishedRadius = Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
-    const { path } = makePie({
-        radius: finishedRadius,
-        progress: presentationProgress,
-    });
-    const translatedPath = translatePath(path, -(finishedRadius * 2 - passedProps.width) / 2, -(finishedRadius * 2 - passedProps.height) / 2);
-    const [clipId] = useState(() => String(random(null)));
-    const style = useMemo(() => {
-        return {
-            width: '100%',
-            height: '100%',
-            clipPath: presentationDirection === 'exiting' ? undefined : `url(#${clipId})`,
-            ...(presentationDirection === 'entering'
-                ? passedProps.innerEnterStyle
-                : passedProps.innerExitStyle),
-        };
-    }, [
-        clipId,
-        passedProps.innerEnterStyle,
-        passedProps.innerExitStyle,
-        presentationDirection,
-    ]);
-    const outerStyle = useMemo(() => {
-        return presentationDirection === 'entering'
-            ? passedProps.outerEnterStyle
-            : passedProps.outerExitStyle;
-    }, [
-        passedProps.outerEnterStyle,
-        passedProps.outerExitStyle,
-        presentationDirection,
-    ]);
-    return (jsxs(AbsoluteFill, { style: outerStyle, children: [jsx(AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (jsx(AbsoluteFill, { children: jsx("svg", { children: jsx("defs", { children: jsx("clipPath", { id: clipId, children: jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
+// src/presentations/clock-wipe.tsx
+import {translatePath} from "@remotion/paths";
+import {makePie} from "@remotion/shapes";
+import {useMemo, useState} from "react";
+import {AbsoluteFill, random} from "remotion";
+import {
+jsx
+} from "react/jsx-runtime";
+var ClockWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const finishedRadius = Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
+  const { path } = makePie({
+    radius: finishedRadius,
+    progress: presentationProgress
+  });
+  const translatedPath = translatePath(path, -(finishedRadius * 2 - passedProps.width) / 2, -(finishedRadius * 2 - passedProps.height) / 2);
+  const [clipId] = useState(() => String(random(null)));
+  const style = useMemo(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      clipPath: presentationDirection === "exiting" ? undefined : `url(#${clipId})`,
+      ...presentationDirection === "entering" ? passedProps.innerEnterStyle : passedProps.innerExitStyle
+    };
+  }, [
+    clipId,
+    passedProps.innerEnterStyle,
+    passedProps.innerExitStyle,
+    presentationDirection
+  ]);
+  const outerStyle = useMemo(() => {
+    return presentationDirection === "entering" ? passedProps.outerEnterStyle : passedProps.outerExitStyle;
+  }, [
+    passedProps.outerEnterStyle,
+    passedProps.outerExitStyle,
+    presentationDirection
+  ]);
+  return jsx(AbsoluteFill, {
+    style: outerStyle,
+    children: [
+      jsx(AbsoluteFill, {
+        style,
+        children
+      }, undefined, false, undefined, this),
+      presentationDirection === "exiting" ? null : jsx(AbsoluteFill, {
+        children: jsx("svg", {
+          children: jsx("defs", {
+            children: jsx("clipPath", {
+              id: clipId,
+              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);
 };
-const clockWipe = (props) => {
-    return { component: ClockWipePresentation, props: props !== null && props !== void 0 ? props : {} };
+var clockWipe = (props) => {
+  return { component: ClockWipePresentation, props: props ?? {} };
+};
+export {
+  clockWipe
 };
-
-export { clockWipe };

package/dist/esm/fade.mjs

@@ -1,30 +1,34 @@
-import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { AbsoluteFill } from 'remotion';
-
-const FadePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
-    const isEntering = presentationDirection === 'entering';
-    const style = useMemo(() => {
-        return {
-            opacity: isEntering ? presentationProgress : 1,
-            ...(presentationDirection === 'entering'
-                ? passedProps.enterStyle
-                : passedProps.exitStyle),
-        };
-    }, [
-        isEntering,
-        passedProps.enterStyle,
-        passedProps.exitStyle,
-        presentationDirection,
-        presentationProgress,
-    ]);
-    return jsx(AbsoluteFill, { style: style, children: children });
-};
-const fade = (props) => {
+// src/presentations/fade.tsx
+import {useMemo} from "react";
+import {AbsoluteFill} from "remotion";
+import {
+jsx
+} from "react/jsx-runtime";
+var FadePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const isEntering = presentationDirection === "entering";
+  const style = useMemo(() => {
     return {
-        component: FadePresentation,
-        props: props !== null && props !== void 0 ? props : {},
+      opacity: isEntering ? presentationProgress : 1,
+      ...presentationDirection === "entering" ? passedProps.enterStyle : passedProps.exitStyle
     };
+  }, [
+    isEntering,
+    passedProps.enterStyle,
+    passedProps.exitStyle,
+    presentationDirection,
+    presentationProgress
+  ]);
+  return jsx(AbsoluteFill, {
+    style,
+    children
+  }, undefined, false, undefined, this);
+};
+var fade = (props) => {
+  return {
+    component: FadePresentation,
+    props: props ?? {}
+  };
+};
+export {
+  fade
 };
-
-export { fade };

package/dist/esm/flip.mjs

@@ -1,48 +1,60 @@
-import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { interpolate, AbsoluteFill } from 'remotion';
-
-const Flip = ({ children, presentationDirection, presentationProgress, passedProps: { direction = 'from-left', perspective = 1000, innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
-    const style = useMemo(() => {
-        const startRotationEntering = direction === 'from-right' || direction === 'from-top' ? 180 : -180;
-        const endRotationEntering = direction === 'from-right' || direction === 'from-top' ? -180 : 180;
-        const rotation = presentationDirection === 'entering'
-            ? interpolate(presentationProgress, [0, 1], [startRotationEntering, 0])
-            : interpolate(presentationProgress, [0, 1], [0, endRotationEntering]);
-        const rotateProperty = direction === 'from-top' || direction === 'from-bottom'
-            ? 'rotateX'
-            : 'rotateY';
-        return {
-            width: '100%',
-            height: '100%',
-            transform: `${rotateProperty}(${rotation}deg)`,
-            backfaceVisibility: 'hidden',
-            WebkitBackfaceVisibility: 'hidden',
-            ...(presentationDirection === 'entering'
-                ? innerEnterStyle
-                : innerExitStyle),
-        };
-    }, [
-        direction,
-        innerEnterStyle,
-        innerExitStyle,
-        presentationDirection,
-        presentationProgress,
-    ]);
-    const outer = useMemo(() => {
-        return {
-            perspective,
-            // Make children also their backface hidden
-            transformStyle: 'preserve-3d',
-            ...(presentationDirection === 'entering'
-                ? outerEnterStyle
-                : outerExitStyle),
-        };
-    }, [outerEnterStyle, outerExitStyle, perspective, presentationDirection]);
-    return (jsx(AbsoluteFill, { style: outer, children: jsx(AbsoluteFill, { style: style, children: children }) }));
+// src/presentations/flip.tsx
+import {useMemo} from "react";
+import {AbsoluteFill, interpolate} from "remotion";
+import {
+jsx
+} from "react/jsx-runtime";
+var Flip = ({
+  children,
+  presentationDirection,
+  presentationProgress,
+  passedProps: {
+    direction = "from-left",
+    perspective = 1000,
+    innerEnterStyle,
+    innerExitStyle,
+    outerEnterStyle,
+    outerExitStyle
+  }
+}) => {
+  const style = useMemo(() => {
+    const startRotationEntering = direction === "from-right" || direction === "from-top" ? 180 : -180;
+    const endRotationEntering = direction === "from-right" || direction === "from-top" ? -180 : 180;
+    const rotation = presentationDirection === "entering" ? interpolate(presentationProgress, [0, 1], [startRotationEntering, 0]) : interpolate(presentationProgress, [0, 1], [0, endRotationEntering]);
+    const rotateProperty = direction === "from-top" || direction === "from-bottom" ? "rotateX" : "rotateY";
+    return {
+      width: "100%",
+      height: "100%",
+      transform: `${rotateProperty}(${rotation}deg)`,
+      backfaceVisibility: "hidden",
+      WebkitBackfaceVisibility: "hidden",
+      ...presentationDirection === "entering" ? innerEnterStyle : innerExitStyle
+    };
+  }, [
+    direction,
+    innerEnterStyle,
+    innerExitStyle,
+    presentationDirection,
+    presentationProgress
+  ]);
+  const outer = useMemo(() => {
+    return {
+      perspective,
+      transformStyle: "preserve-3d",
+      ...presentationDirection === "entering" ? outerEnterStyle : outerExitStyle
+    };
+  }, [outerEnterStyle, outerExitStyle, perspective, presentationDirection]);
+  return jsx(AbsoluteFill, {
+    style: outer,
+    children: jsx(AbsoluteFill, {
+      style,
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
 };
-const flip = (props) => {
-    return { component: Flip, props: props !== null && props !== void 0 ? props : {} };
+var flip = (props) => {
+  return { component: Flip, props: props ?? {} };
+};
+export {
+  flip
 };
-
-export { flip };