@remotion/transitions 4.0.136 → 4.0.138

package/dist/esm/slide.mjs

@@ -1,75 +1,82 @@
-import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { AbsoluteFill } from 'remotion';
-
-const epsilon = 0.01;
-const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', enterStyle, exitStyle }, }) => {
-    const directionStyle = useMemo(() => {
-        // Overlay the two slides barely to avoid a white line between them
-        // Remove the correction once the presentation progress is 1
-        const presentationProgressWithEpsilonCorrection = presentationProgress === 1
-            ? presentationProgress * 100
-            : presentationProgress * 100 - epsilon;
-        if (presentationDirection === 'exiting') {
-            switch (direction) {
-                case 'from-left':
-                    return {
-                        transform: `translateX(${presentationProgressWithEpsilonCorrection}%)`,
-                    };
-                case 'from-right':
-                    return {
-                        transform: `translateX(-${presentationProgress * 100}%)`,
-                    };
-                case 'from-top':
-                    return {
-                        transform: `translateY(${presentationProgressWithEpsilonCorrection}%)`,
-                    };
-                case 'from-bottom':
-                    return {
-                        transform: `translateY(-${presentationProgress * 100}%)`,
-                    };
-                default:
-                    throw new Error(`Invalid direction: ${direction}`);
-            }
-        }
-        switch (direction) {
-            case 'from-left':
-                return {
-                    transform: `translateX(${-100 + presentationProgress * 100}%)`,
-                };
-            case 'from-right':
-                return {
-                    transform: `translateX(${100 - presentationProgressWithEpsilonCorrection}%)`,
-                };
-            case 'from-top':
-                return {
-                    transform: `translateY(${-100 + presentationProgress * 100}%)`,
-                };
-            case 'from-bottom':
-                return {
-                    transform: `translateY(${100 - presentationProgressWithEpsilonCorrection}%)`,
-                };
-            default:
-                throw new Error(`Invalid direction: ${direction}`);
-        }
-    }, [presentationDirection, presentationProgress, direction]);
-    const style = useMemo(() => {
+// src/presentations/slide.tsx
+import {useMemo} from "react";
+import {AbsoluteFill} from "remotion";
+import {
+jsx
+} from "react/jsx-runtime";
+var epsilon = 0.01;
+var SlidePresentation = ({
+  children,
+  presentationProgress,
+  presentationDirection,
+  passedProps: { direction = "from-left", enterStyle, exitStyle }
+}) => {
+  const directionStyle = useMemo(() => {
+    const presentationProgressWithEpsilonCorrection = presentationProgress === 1 ? presentationProgress * 100 : presentationProgress * 100 - epsilon;
+    if (presentationDirection === "exiting") {
+      switch (direction) {
+        case "from-left":
+          return {
+            transform: `translateX(${presentationProgressWithEpsilonCorrection}%)`
+          };
+        case "from-right":
+          return {
+            transform: `translateX(-${presentationProgress * 100}%)`
+          };
+        case "from-top":
+          return {
+            transform: `translateY(${presentationProgressWithEpsilonCorrection}%)`
+          };
+        case "from-bottom":
+          return {
+            transform: `translateY(-${presentationProgress * 100}%)`
+          };
+        default:
+          throw new Error(`Invalid direction: ${direction}`);
+      }
+    }
+    switch (direction) {
+      case "from-left":
         return {
-            width: '100%',
-            height: '100%',
-            justifyContent: 'center',
-            alignItems: 'center',
-            ...directionStyle,
-            ...(presentationDirection === 'entering' ? enterStyle : exitStyle),
+          transform: `translateX(${-100 + presentationProgress * 100}%)`
         };
-    }, [directionStyle, enterStyle, exitStyle, presentationDirection]);
-    return jsx(AbsoluteFill, { style: style, children: children });
-};
-const slide = (props) => {
+      case "from-right":
+        return {
+          transform: `translateX(${100 - presentationProgressWithEpsilonCorrection}%)`
+        };
+      case "from-top":
+        return {
+          transform: `translateY(${-100 + presentationProgress * 100}%)`
+        };
+      case "from-bottom":
+        return {
+          transform: `translateY(${100 - presentationProgressWithEpsilonCorrection}%)`
+        };
+      default:
+        throw new Error(`Invalid direction: ${direction}`);
+    }
+  }, [presentationDirection, presentationProgress, direction]);
+  const style = useMemo(() => {
     return {
-        component: SlidePresentation,
-        props: props !== null && props !== void 0 ? props : {},
+      width: "100%",
+      height: "100%",
+      justifyContent: "center",
+      alignItems: "center",
+      ...directionStyle,
+      ...presentationDirection === "entering" ? enterStyle : exitStyle
     };
+  }, [directionStyle, enterStyle, exitStyle, presentationDirection]);
+  return jsx(AbsoluteFill, {
+    style,
+    children
+  }, undefined, false, undefined, this);
+};
+var slide = (props) => {
+  return {
+    component: SlidePresentation,
+    props: props ?? {}
+  };
+};
+export {
+  slide
 };
-
-export { slide };

package/dist/esm/wipe.mjs

@@ -1,162 +1,192 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useMemo } from 'react';
-import { random, AbsoluteFill } from 'remotion';
-
-const makePathIn = (progress, direction) => {
-    switch (direction) {
-        case 'from-left':
-            return `
+// src/presentations/wipe.tsx
+import {useMemo, useState} from "react";
+import {AbsoluteFill, random} from "remotion";
+import {
+jsx
+} from "react/jsx-runtime";
+var makePathIn = (progress, direction) => {
+  switch (direction) {
+    case "from-left":
+      return `
 M 0 0
 L ${progress} 0
 L ${progress} 1
 L 0 1
 Z`;
-        case 'from-top-left':
-            return `
+    case "from-top-left":
+      return `
 M 0 0
 L ${progress * 2} 0
 L 0 ${progress * 2}
 Z`;
-        case 'from-top':
-            return `
+    case "from-top":
+      return `
 M 0 0
 L 1 0
 L 1 ${progress}
 L 0 ${progress}
 Z`;
-        case 'from-top-right':
-            return `
+    case "from-top-right":
+      return `
 M 1 0
 L ${1 - progress * 2} 0
 L 1 ${progress * 2}
 Z`;
-        case 'from-right':
-            return `
+    case "from-right":
+      return `
 M 1 0
 L 1 1
 L ${1 - progress} 1
 L ${1 - progress} 0
 Z`;
-        case 'from-bottom-right':
-            return `
+    case "from-bottom-right":
+      return `
 M 1 1
 L ${1 - progress * 2} 1
 L 1 ${1 - progress * 2}
 Z`;
-        case 'from-bottom':
-            return `
+    case "from-bottom":
+      return `
 M 0 1
 L 1 1
 L 1 ${1 - progress}
 L 0 ${1 - progress}
 Z`;
-        case 'from-bottom-left':
-            return `
+    case "from-bottom-left":
+      return `
 M 0 1
 L 0 ${1 - progress * 2}
 L ${progress * 2} 1
 Z`;
-        default:
-            throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
-    }
+    default:
+      throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
+  }
 };
-const makePathOut = (progress, direction) => {
-    switch (direction) {
-        case 'from-left':
-            return `
+var makePathOut = (progress, direction) => {
+  switch (direction) {
+    case "from-left":
+      return `
 M 1 1
 L ${1 - progress} 1
 L ${1 - progress} 0
 L 1 0
 Z`;
-        case 'from-top-left':
-            return `
+    case "from-top-left":
+      return `
 M 1 1
 L ${1 - 2 * progress} 1
 L 1 ${1 - 2 * progress}
 Z`;
-        case 'from-top':
-            return `
+    case "from-top":
+      return `
 M 1 1
 L 0 1
 L 0 ${1 - progress}
 L 1 ${1 - progress}
 Z`;
-        case 'from-top-right':
-            return `
+    case "from-top-right":
+      return `
 M 0 1
 L ${progress * 2} 1
 L 0 ${1 - progress * 2}
 Z`;
-        case 'from-right':
-            return `
+    case "from-right":
+      return `
 M 0 0
 L ${progress} 0
 L ${progress} 1
 L 0 1
 Z`;
-        case 'from-bottom-right':
-            return `
+    case "from-bottom-right":
+      return `
 M 0 0
 L ${progress * 2} 0
 L 0 ${progress * 2}
 Z`;
-        case 'from-bottom':
-            return `
+    case "from-bottom":
+      return `
 M 1 0
 L 0 0
 L 0 ${progress}
 L 1 ${progress}
 Z`;
-        case 'from-bottom-left':
-            return `
+    case "from-bottom-left":
+      return `
 M 1 0
 L ${1 - progress * 2} 0
 L 1 ${progress * 2}
 Z`;
-        default:
-            throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
-    }
+    default:
+      throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
+  }
 };
-const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
-    const [clipId] = useState(() => String(random(null)));
-    const progressInDirection = presentationDirection === 'entering'
-        ? presentationProgress
-        : 1 - presentationProgress;
-    const path = presentationDirection === 'entering'
-        ? makePathIn(progressInDirection, direction)
-        : makePathOut(progressInDirection, direction);
-    const style = useMemo(() => {
-        return {
-            width: '100%',
-            height: '100%',
-            justifyContent: 'center',
-            alignItems: 'center',
-            clipPath: `url(#${clipId})`,
-            ...(presentationDirection === 'entering'
-                ? innerEnterStyle
-                : innerExitStyle),
-        };
-    }, [clipId, innerEnterStyle, innerExitStyle, presentationDirection]);
-    const outerStyle = useMemo(() => {
-        return presentationDirection === 'entering'
-            ? outerEnterStyle
-            : outerExitStyle;
-    }, [outerEnterStyle, outerExitStyle, presentationDirection]);
-    const svgStyle = useMemo(() => {
-        return {
-            width: '100%',
-            height: '100%',
-            pointerEvents: 'none',
-        };
-    }, []);
-    return (jsxs(AbsoluteFill, { style: outerStyle, children: [jsx(AbsoluteFill, { style: style, children: children }), jsx(AbsoluteFill, { children: jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: jsx("defs", { children: jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsx("path", { d: path, fill: "black" }) }) }) }) })] }));
-};
-const wipe = (props) => {
+var WipePresentation = ({
+  children,
+  presentationProgress,
+  presentationDirection,
+  passedProps: {
+    direction = "from-left",
+    innerEnterStyle,
+    innerExitStyle,
+    outerEnterStyle,
+    outerExitStyle
+  }
+}) => {
+  const [clipId] = useState(() => String(random(null)));
+  const progressInDirection = presentationDirection === "entering" ? presentationProgress : 1 - presentationProgress;
+  const path = presentationDirection === "entering" ? makePathIn(progressInDirection, direction) : makePathOut(progressInDirection, direction);
+  const style = useMemo(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      justifyContent: "center",
+      alignItems: "center",
+      clipPath: `url(#${clipId})`,
+      ...presentationDirection === "entering" ? innerEnterStyle : innerExitStyle
+    };
+  }, [clipId, innerEnterStyle, innerExitStyle, presentationDirection]);
+  const outerStyle = useMemo(() => {
+    return presentationDirection === "entering" ? outerEnterStyle : outerExitStyle;
+  }, [outerEnterStyle, outerExitStyle, presentationDirection]);
+  const svgStyle = useMemo(() => {
     return {
-        component: WipePresentation,
-        props: props !== null && props !== void 0 ? props : {},
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none"
     };
+  }, []);
+  return jsx(AbsoluteFill, {
+    style: outerStyle,
+    children: [
+      jsx(AbsoluteFill, {
+        style,
+        children
+      }, undefined, false, undefined, this),
+      jsx(AbsoluteFill, {
+        children: jsx("svg", {
+          viewBox: "0 0 1 1",
+          style: svgStyle,
+          children: jsx("defs", {
+            children: jsx("clipPath", {
+              id: clipId,
+              clipPathUnits: "objectBoundingBox",
+              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 {
+    component: WipePresentation,
+    props: props ?? {}
+  };
+};
+export {
+  wipe
 };
-
-export { wipe };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/transitions",
-  "version": "4.0.136",
+  "version": "4.0.138",
   "description": "Transition presets for Remotion",
   "sideEffects": false,
   "main": "dist/esm/index.mjs",
@@ -16,25 +16,24 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.136",
-    "@remotion/shapes": "4.0.136",
-    "@remotion/paths": "4.0.136"
+    "remotion": "4.0.138",
+    "@remotion/shapes": "4.0.138",
+    "@remotion/paths": "4.0.138"
   },
   "devDependencies": {
-    "@jonny/eslint-config": "3.0.276",
-    "eslint": "8.42.0",
-    "prettier": "3.1.1",
+    "@jonny/eslint-config": "3.0.281",
+    "eslint": "8.56.0",
+    "prettier": "3.2.5",
     "prettier-plugin-organize-imports": "3.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vitest": "0.31.1",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
+    "@types/bun": "^1.0.12",
     "@vitejs/plugin-react": "^2.0.0",
-    "rollup": "^2.70.1",
-    "@rollup/plugin-typescript": "^8.2.0",
-    "remotion": "4.0.136",
-    "@remotion/test-utils": "4.0.136"
+    "remotion": "4.0.138",
+    "@remotion/test-utils": "4.0.138"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -110,6 +109,6 @@
     "lint": "eslint src --ext ts,tsx",
     "formatting": "prettier src --check",
     "watch": "tsc -w",
-    "build": "tsc -d && rollup --config rollup.config.js"
+    "build": "tsc -d && bun build.ts"
   }
 }

package/dist/cjs/TransitionSeries.d.ts

@@ -1,15 +0,0 @@
-import type { FC, PropsWithChildren } from 'react';
-import type { LayoutAndStyle, SequencePropsWithoutDuration } from 'remotion';
-import type { TransitionSeriesTransitionProps } from './types.js';
-declare const TransitionSeriesTransition: <PresentationProps extends Record<string, unknown>>(_props: TransitionSeriesTransitionProps<PresentationProps>) => null;
-type SeriesSequenceProps = PropsWithChildren<{
-    durationInFrames: number;
-    offset?: number;
-    className?: number;
-} & LayoutAndStyle & Pick<SequencePropsWithoutDuration, 'name'>>;
-declare const SeriesSequence: ({ children }: SeriesSequenceProps) => JSX.Element;
-declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
-    Sequence: typeof SeriesSequence;
-    Transition: typeof TransitionSeriesTransition;
-};
-export { TransitionSeries };

package/dist/cjs/fade.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var remotion = require('remotion');
-
-const FadePresentation = ({ children, presentationDirection, presentationProgress }) => {
-    const isEntering = presentationDirection === 'entering';
-    const style = react.useMemo(() => {
-        return {
-            opacity: isEntering ? presentationProgress : 1,
-        };
-    }, [isEntering, presentationProgress]);
-    return (jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }) }));
-};
-const fade = (props) => {
-    return {
-        component: FadePresentation,
-        props: props !== null && props !== void 0 ? props : {},
-    };
-};
-
-exports.fade = fade;

package/dist/cjs/flatten-children.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const flattenChildren: (children: React.ReactNode) => (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];

package/dist/cjs/flip.js

@@ -1,40 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var remotion = require('remotion');
-
-const Flip = ({ children, presentationDirection, presentationProgress, passedProps: { direction = 'from-left', perspective = 1000 }, }) => {
-    const style = react.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'
-            ? remotion.interpolate(presentationProgress, [0, 1], [startRotationEntering, 0])
-            : remotion.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',
-        };
-    }, [direction, presentationDirection, presentationProgress]);
-    const outer = react.useMemo(() => {
-        return {
-            perspective,
-            // Make children also their backface hidden
-            transformStyle: 'preserve-3d',
-        };
-    }, [perspective]);
-    return (jsxRuntime.jsx(remotion.AbsoluteFill, { style: outer, children: jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }) }));
-};
-const flip = (props) => {
-    return { component: Flip, props: props !== null && props !== void 0 ? props : {} };
-};
-
-exports.flip = flip;

package/dist/cjs/index.d.ts

@@ -1,4 +0,0 @@
-export { linearTiming } from './timings/linear-timing.js';
-export { springTiming } from './timings/spring-timing.js';
-export { TransitionSeries } from './TransitionSeries.js';
-export { TransitionPresentation, TransitionPresentationComponentProps, TransitionTiming, } from './types.js';