framer-motion 5.4.1 → 5.4.4

package/dist/es/components/MotionCanvas/index.mjs

@@ -1,14 +1,68 @@
-import { __rest, __assign } from 'tslib';
+import { __extends, __rest, __read, __assign } from 'tslib';
 import * as React from 'react';
-import { useContext } from 'react';
-import { Canvas } from '@react-three/fiber';
+import { forwardRef, useContext } from 'react';
 import { MotionContext } from '../../context/MotionContext/index.mjs';
+import mergeRefs from 'react-merge-refs';
+import useMeasure from 'react-use-measure';
+import { render, events, unmountComponentAtNode } from '@react-three/fiber';
+import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 
-function MotionCanvas(_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
+function Block(_a) {
+    var set = _a.set;
+    useIsomorphicLayoutEffect(function () {
+        set(new Promise(function () { return null; }));
+        return function () { return set(false); };
+    }, []);
+    return null;
+}
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { error: false };
+        return _this;
+    }
+    ErrorBoundary.prototype.componentDidCatch = function (error) {
+        this.props.set(error);
+    };
+    ErrorBoundary.prototype.render = function () {
+        return this.state.error ? null : this.props.children;
+    };
+    ErrorBoundary.getDerivedStateFromError = function () { return ({ error: true }); };
+    return ErrorBoundary;
+}(React.Component));
+/**
+ * A synchronously rendering version of R3F's Canvas component. We call render
+ * within the render function itself to ensure lifecycle events are called before
+ * parent reconcilers. This can be replaced with a simple MotionContext provider
+ * when R3F moves to the same model.
+ */
+function SyncCanvasComponent(_a, forwardedRef) {
+    var children = _a.children, fallback = _a.fallback, tabIndex = _a.tabIndex, resize = _a.resize, id = _a.id, style = _a.style, className = _a.className, events$1 = _a.events, props = __rest(_a, ["children", "fallback", "tabIndex", "resize", "id", "style", "className", "events"]);
     var motionContext = useContext(MotionContext);
-    return (React.createElement(Canvas, __assign({}, props),
-        React.createElement(MotionContext.Provider, { value: motionContext }, children)));
+    var _b = __read(useMeasure(__assign({ scroll: true, debounce: { scroll: 50, resize: 0 } }, resize)), 2), containerRef = _b[0], _c = _b[1], width = _c.width, height = _c.height;
+    var canvasRef = React.useRef(null);
+    var _d = __read(React.useState(false), 2), block = _d[0], setBlock = _d[1];
+    var _e = __read(React.useState(false), 2), error = _e[0], setError = _e[1];
+    // Suspend this component if block is a promise (2nd run)
+    if (block)
+        throw block;
+    // Throw exception outwards if anything within canvas throws
+    if (error)
+        throw error;
+    // Execute JSX in the reconciler as a layout-effect
+    if (width > 0 && height > 0) {
+        render(React.createElement(ErrorBoundary, { set: setError },
+            React.createElement(React.Suspense, { fallback: React.createElement(Block, { set: setBlock }) },
+                React.createElement(MotionContext.Provider, { value: motionContext }, children))), canvasRef.current, __assign(__assign({}, props), { size: { width: width, height: height }, events: events$1 || events }));
+    }
+    useIsomorphicLayoutEffect(function () {
+        var container = canvasRef.current;
+        return function () { return unmountComponentAtNode(container); };
+    }, []);
+    return (React.createElement("div", { ref: containerRef, id: id, className: className, tabIndex: tabIndex, style: __assign({ position: "relative", width: "100%", height: "100%", overflow: "hidden" }, style) },
+        React.createElement("canvas", { ref: mergeRefs([canvasRef, forwardedRef]), style: { display: "block" } }, fallback)));
 }
+var MotionCanvas = forwardRef(SyncCanvasComponent);
 
 export { MotionCanvas };

package/package.json

@@ -1,19 +1,19 @@
 {
     "name": "framer-motion",
-    "version": "5.4.1",
+    "version": "5.4.4",
     "description": "A simple and powerful React animation library",
-    "main": "dist/framer-motion.cjs.js",
+    "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
     "exports": {
         ".": {
-            "require": "./dist/framer-motion.cjs.js",
+            "require": "./dist/cjs/index.js",
             "import": "./dist/es/index.mjs",
-            "default": "./dist/framer-motion.cjs.js"
+            "default": "./dist/cjs/index.js"
         },
         "./three": {
-            "require": "./dist/framer-motion-three.cjs.js",
+            "require": "./dist/cjs/three-entry.js",
             "import": "./dist/es/three-entry.mjs",
-            "default": "./dist/framer-motion-three.cjs.js"
+            "default": "./dist/cjs/three-entry.js"
         },
         "./package.json": "./package.json"
     },
@@ -135,6 +135,8 @@
         "framesync": "6.0.1",
         "hey-listen": "^1.0.8",
         "popmotion": "11.0.3",
+        "react-merge-refs": "^1.1.0",
+        "react-use-measure": "^2.1.1",
         "style-value-types": "5.0.0",
         "tslib": "^2.1.0"
     },

package/types/components/MotionCanvas/index.d.ts

@@ -1,4 +1,5 @@
+import * as React from "react";
 import { Props } from "@react-three/fiber";
-export interface MotionCanvasProps {
+export interface MotionCanvasProps extends Props {
 }
-export declare function MotionCanvas({ children, ...props }: Props & MotionCanvasProps): JSX.Element;
+export declare const MotionCanvas: React.ForwardRefExoticComponent<MotionCanvasProps & React.RefAttributes<HTMLCanvasElement>>;