framer-motion 5.4.3 → 5.4.4

package/dist/cjs/three-entry.js

@@ -7,11 +7,15 @@ var useMotionValue = require('./use-motion-value-73ed7c77.js');
 var React = require('react');
 var popmotion = require('popmotion');
 var three = require('three');
+var mergeRefs = require('react-merge-refs');
+var useMeasure = require('react-use-measure');
 var fiber = require('@react-three/fiber');
 require('hey-listen');
 require('framesync');
 require('style-value-types');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
@@ -31,6 +35,8 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+var useMeasure__default = /*#__PURE__*/_interopDefaultLegacy(useMeasure);
 
 function useHover(isStatic, _a, visualElement) {
     var whileHover = _a.whileHover, onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, onPointerOver = _a.onPointerOver, onPointerOut = _a.onPointerOut;
@@ -287,12 +293,63 @@ var motion = new Proxy(custom, {
     },
 });
 
-function MotionCanvas(_a) {
-    var children = _a.children, props = tslib.__rest(_a, ["children"]);
+function Block(_a) {
+    var set = _a.set;
+    useMotionValue.useIsomorphicLayoutEffect(function () {
+        set(new Promise(function () { return null; }));
+        return function () { return set(false); };
+    }, []);
+    return null;
+}
+var ErrorBoundary = /** @class */ (function (_super) {
+    tslib.__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__namespace.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 = _a.events, props = tslib.__rest(_a, ["children", "fallback", "tabIndex", "resize", "id", "style", "className", "events"]);
     var motionContext = React.useContext(useMotionValue.MotionContext);
-    return (React__namespace.createElement(fiber.Canvas, tslib.__assign({}, props),
-        React__namespace.createElement(useMotionValue.MotionContext.Provider, { value: motionContext }, children)));
+    var _b = tslib.__read(useMeasure__default["default"](tslib.__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__namespace.useRef(null);
+    var _d = tslib.__read(React__namespace.useState(false), 2), block = _d[0], setBlock = _d[1];
+    var _e = tslib.__read(React__namespace.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) {
+        fiber.render(React__namespace.createElement(ErrorBoundary, { set: setError },
+            React__namespace.createElement(React__namespace.Suspense, { fallback: React__namespace.createElement(Block, { set: setBlock }) },
+                React__namespace.createElement(useMotionValue.MotionContext.Provider, { value: motionContext }, children))), canvasRef.current, tslib.__assign(tslib.__assign({}, props), { size: { width: width, height: height }, events: events || fiber.events }));
+    }
+    useMotionValue.useIsomorphicLayoutEffect(function () {
+        var container = canvasRef.current;
+        return function () { return fiber.unmountComponentAtNode(container); };
+    }, []);
+    return (React__namespace.createElement("div", { ref: containerRef, id: id, className: className, tabIndex: tabIndex, style: tslib.__assign({ position: "relative", width: "100%", height: "100%", overflow: "hidden" }, style) },
+        React__namespace.createElement("canvas", { ref: mergeRefs__default["default"]([canvasRef, forwardedRef]), style: { display: "block" } }, fallback)));
 }
+var MotionCanvas = React.forwardRef(SyncCanvasComponent);
 
 function useTime() {
     var time = useMotionValue.useMotionValue(0);

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,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "5.4.3",
+    "version": "5.4.4",
     "description": "A simple and powerful React animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -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>>;