test things

.gitignore

@@ -1,8 +1,10 @@
 node_modules
-dist
+dist/types
+package.json
 .DS_Store
 .env
 .idea
 .vscode
 examples/**/package-lock.json
-package-lock.json
+package-lock.json
+npm

dist/index.esm.js

@@ -0,0 +1,350 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Rive as Rive$1, EventType } from '@rive-app/canvas';
+export * from '@rive-app/canvas';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function useWindowSize() {
+    var _a = useState({
+        width: 0,
+        height: 0,
+    }), windowSize = _a[0], setWindowSize = _a[1];
+    useEffect(function () {
+        if (typeof window !== 'undefined') {
+            var handleResize_1 = function () {
+                setWindowSize({
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                });
+            };
+            window.addEventListener('resize', handleResize_1);
+            handleResize_1();
+            return function () { return window.removeEventListener('resize', handleResize_1); };
+        }
+    }, []);
+    return windowSize;
+}
+// grabbed from: https://stackoverflow.com/questions/19999388/check-if-user-is-using-ie
+// There is a shorter version, but that one ran into type issues with typescript.
+function isIE() {
+    /**
+     * detect IEEdge
+     * returns version of IE/Edge or false, if browser is not a Microsoft browser
+     */
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf('MSIE ');
+    if (msie > 0) {
+        // IE 10 or older => return version number
+        return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
+    }
+    var trident = ua.indexOf('Trident/');
+    if (trident > 0) {
+        // IE 11 => return version number
+        var rv = ua.indexOf('rv:');
+        return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
+    }
+    var edge = ua.indexOf('Edge/');
+    if (edge > 0) {
+        // Edge => return version number
+        return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
+    }
+    // other browser
+    return false;
+}
+
+function RiveComponent(_a) {
+    var setContainerRef = _a.setContainerRef, setCanvasRef = _a.setCanvasRef, _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style, rest = __rest(_a, ["setContainerRef", "setCanvasRef", "className", "style"]);
+    var containerStyle = __assign({ width: '100%', height: '100%' }, style);
+    return (React.createElement("div", __assign({ ref: setContainerRef, className: className }, (!className && { style: containerStyle })),
+        React.createElement("canvas", __assign({ ref: setCanvasRef, style: { verticalAlign: 'top' } }, rest))));
+}
+var defaultOptions = {
+    useDevicePixelRatio: true,
+    fitCanvasToArtboardHeight: false,
+    useOffscreenRenderer: true,
+};
+/**
+ * Returns options, with defaults set.
+ *
+ * @param opts
+ * @returns
+ */
+function getOptions(opts) {
+    return Object.assign({}, defaultOptions, opts);
+}
+/**
+ * Custom Hook for loading a Rive file.
+ *
+ * Waits until the load event has fired before returning it.
+ * We can then listen for changes to this animation in other hooks to detect
+ * when it has loaded.
+ *
+ * @param riveParams - Object containing parameters accepted by the Rive object
+ *   in the rive-js runtime, with the exception of Canvas as that is attached
+ *   via the ref callback `setCanvasRef`.
+ *
+ * @param opts - Optional list of options that are specific for this hook.
+ * @returns {RiveAnimationState}
+ */
+function useRive(riveParams, opts) {
+    if (opts === void 0) { opts = {}; }
+    var canvasRef = useRef(null);
+    var containerRef = useRef(null);
+    var _a = useState(null), rive = _a[0], setRive = _a[1];
+    var _b = useState({
+        height: 0,
+        width: 0,
+    }), dimensions = _b[0], setDimensions = _b[1];
+    // Listen to changes in the window sizes and update the bounds when changes
+    // occur.
+    var windowSize = useWindowSize();
+    // when the container dimensions change, we need to re evaluate our dimensions.
+    var _c = useState({
+        height: 0,
+        width: 0,
+    }), containerDimensions = _c[0], setContainerDimensions = _c[1];
+    var isParamsLoaded = Boolean(riveParams);
+    var options = getOptions(opts);
+    /**
+     * Gets the intended dimensions of the canvas element.
+     *
+     * The intended dimensions are those of the container element, unless the
+     * option `fitCanvasToArtboardHeight` is true, then they are adjusted to
+     * the height of the artboard.
+     *
+     * @returns Dimensions object.
+     */
+    function getCanvasDimensions() {
+        var _a, _b;
+        var _c = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : new DOMRect(0, 0, 0, 0), width = _c.width, height = _c.height;
+        if (rive && options.fitCanvasToArtboardHeight) {
+            var _d = rive.bounds, maxY = _d.maxY, maxX = _d.maxX;
+            return { width: width, height: width * (maxY / maxX) };
+        }
+        return { width: width, height: height };
+    }
+    /**
+     * Updates the width and height of the canvas.
+     */
+    function updateBounds() {
+        if (!containerRef.current) {
+            return;
+        }
+        var _a = getCanvasDimensions(), width = _a.width, height = _a.height;
+        var boundsChanged = width !== dimensions.width || height !== dimensions.height;
+        if (canvasRef.current && rive && boundsChanged) {
+            if (options.fitCanvasToArtboardHeight) {
+                containerRef.current.style.height = height + 'px';
+            }
+            if (options.useDevicePixelRatio) {
+                var dpr = window.devicePixelRatio || 1;
+                canvasRef.current.width = dpr * width;
+                canvasRef.current.height = dpr * height;
+                canvasRef.current.style.width = width + 'px';
+                canvasRef.current.style.height = height + 'px';
+            }
+            else {
+                canvasRef.current.width = width;
+                canvasRef.current.height = height;
+            }
+            setDimensions({ width: width, height: height });
+            // Updating the canvas width or height will clear the canvas, so call
+            // startRendering() to redraw the current frame as the animation might
+            // be paused and not advancing.
+            rive.startRendering();
+        }
+        // Always resize to Canvas
+        if (rive) {
+            rive.resizeToCanvas();
+        }
+    }
+    /**
+     * Listen to changes on the windowSize and the rive file being loaded
+     * and update the canvas bounds as needed.
+     *
+     * ie does not support ResizeObservers, so we fallback to the window listener there
+     */
+    useEffect(function () {
+        if (isIE() && rive) {
+            updateBounds();
+        }
+    }, [rive, windowSize]);
+    var observer = useRef(new ResizeObserver(function (entries) {
+        setContainerDimensions(entries[entries.length - 1].contentRect);
+    }));
+    useEffect(function () {
+        if (!isIE() && rive) {
+            updateBounds();
+        }
+    }, [rive, containerDimensions]);
+    useEffect(function () {
+        if (!isIE() && containerRef.current) {
+            observer.current.observe(containerRef.current);
+        }
+        return function () {
+            observer.current.disconnect();
+        };
+    }, [containerRef.current, observer]);
+    /**
+     * Ref callback called when the canvas element mounts and unmounts.
+     */
+    var setCanvasRef = useCallback(function (canvas) {
+        if (canvas && riveParams) {
+            var useOffscreenRenderer = options.useOffscreenRenderer;
+            var r_1 = new Rive$1(__assign(__assign({ useOffscreenRenderer: useOffscreenRenderer }, riveParams), { canvas: canvas }));
+            r_1.on(EventType.Load, function () { return setRive(r_1); });
+        }
+        else if (canvas === null && canvasRef.current) {
+            canvasRef.current.height = 0;
+            canvasRef.current.width = 0;
+        }
+        canvasRef.current = canvas;
+    }, [isParamsLoaded]);
+    /**
+     * Ref callback called when the container element mounts
+     */
+    var setContainerRef = useCallback(function (container) {
+        containerRef.current = container;
+    }, []);
+    /**
+     * Set up IntersectionObserver to stop rendering if the animation is not in
+     * view.
+     */
+    useEffect(function () {
+        var observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            entry.isIntersecting
+                ? rive && rive.startRendering()
+                : rive && rive.stopRendering();
+        });
+        if (canvasRef.current) {
+            observer.observe(canvasRef.current);
+        }
+        return function () {
+            observer.disconnect();
+        };
+    }, [rive]);
+    /**
+     * On unmount, stop rive from rendering.
+     */
+    useEffect(function () {
+        return function () {
+            if (rive) {
+                rive.stop();
+                setRive(null);
+            }
+        };
+    }, [rive]);
+    /**
+     * Listen for changes in the animations params
+     */
+    var animations = riveParams === null || riveParams === void 0 ? void 0 : riveParams.animations;
+    useEffect(function () {
+        if (rive && animations) {
+            if (rive.isPlaying) {
+                rive.stop(rive.animationNames);
+                rive.play(animations);
+            }
+            else if (rive.isPaused) {
+                rive.stop(rive.animationNames);
+                rive.pause(animations);
+            }
+        }
+    }, [animations, rive]);
+    var Component = useCallback(function (props) {
+        return (React.createElement(RiveComponent, __assign({ setContainerRef: setContainerRef, setCanvasRef: setCanvasRef }, props)));
+    }, []);
+    return {
+        canvas: canvasRef.current,
+        setCanvasRef: setCanvasRef,
+        setContainerRef: setContainerRef,
+        rive: rive,
+        RiveComponent: Component,
+    };
+}
+
+var Rive = function (_a) {
+    var src = _a.src, artboard = _a.artboard, animations = _a.animations, stateMachines = _a.stateMachines, layout = _a.layout, _b = _a.useOffscreenRenderer, useOffscreenRenderer = _b === void 0 ? true : _b, rest = __rest(_a, ["src", "artboard", "animations", "stateMachines", "layout", "useOffscreenRenderer"]);
+    var params = {
+        src: src,
+        artboard: artboard,
+        animations: animations,
+        layout: layout,
+        stateMachines: stateMachines,
+        autoplay: true,
+    };
+    var options = {
+        useOffscreenRenderer: useOffscreenRenderer,
+    };
+    var RiveComponent = useRive(params, options).RiveComponent;
+    return React.createElement(RiveComponent, __assign({}, rest));
+};
+
+/**
+ * Custom hook for fetching a stateMachine input from a rive file.
+ *
+ * @param rive - Rive instance
+ * @param stateMachineName - Name of the state machine
+ * @param inputName - Name of the input
+ * @returns
+ */
+function useStateMachineInput(rive, stateMachineName, inputName, initialValue) {
+    var _a = useState(null), input = _a[0], setInput = _a[1];
+    useEffect(function () {
+        if (!rive || !stateMachineName || !inputName) {
+            setInput(null);
+        }
+        if (rive && stateMachineName && inputName) {
+            var inputs = rive.stateMachineInputs(stateMachineName);
+            if (inputs) {
+                var selectedInput = inputs.find(function (input) { return input.name === inputName; });
+                if (initialValue !== undefined && selectedInput) {
+                    selectedInput.value = initialValue;
+                }
+                setInput(selectedInput || null);
+            }
+        }
+        else {
+            setInput(null);
+        }
+    }, [rive]);
+    return input;
+}
+
+export { Rive as default, useRive, useStateMachineInput };

dist/index.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@rive-app/canvas");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),i=function(){return i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n}var u=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}(),o=globalThis.ResizeObserver||u,s=void 0!==globalThis.ResizeObserver;function c(e){var t=e.setContainerRef,n=e.setCanvasRef,u=e.className,o=void 0===u?"":u,s=e.style,c=a(e,["setContainerRef","setCanvasRef","className","style"]),f=i({width:"100%",height:"100%"},s);return r.default.createElement("div",i({ref:t,className:o},!o&&{style:f}),r.default.createElement("canvas",i({ref:n,style:{verticalAlign:"top"}},c)))}var f={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0};function l(n,a){void 0===a&&(a={});var u=e.useRef(null),l=e.useRef(null),d=e.useState(null),v=d[0],h=d[1],p=e.useState({height:0,width:0}),g=p[0],w=p[1],y=function(t){var n=e.useState({width:0,height:0}),r=n[0],i=n[1];e.useEffect(function(){if("undefined"!=typeof window){var e=function(){i({width:window.innerWidth,height:window.innerHeight})};return s||(window.addEventListener("resize",e),e()),function(){return window.removeEventListener("resize",e)}}},[]);var a=e.useRef(new o(function(e){i({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})}));return e.useEffect(function(){var e=a.current;return t.current&&e.observe(t.current),function(){e.disconnect()}},[t,a]),r}(l),b=Boolean(n),R=function(e){return Object.assign({},f,e)}(a);function O(){if(l.current){var e=function(){var e,t,n,r,i=null!==(t=null===(e=l.current)||void 0===e?void 0:e.clientWidth)&&void 0!==t?t:0,a=null!==(r=null===(n=l.current)||void 0===n?void 0:n.clientHeight)&&void 0!==r?r:0;if(v&&R.fitCanvasToArtboardHeight){var u=v.bounds;return{width:i,height:i*(u.maxY/u.maxX)}}return{width:i,height:a}}(),t=e.width,n=e.height,r=t!==g.width||n!==g.height;if(u.current&&v&&r){if(R.fitCanvasToArtboardHeight&&(l.current.style.height=n+"px"),R.useDevicePixelRatio){var i=window.devicePixelRatio||1;u.current.width=i*t,u.current.height=i*n,u.current.style.width=t+"px",u.current.style.height=n+"px"}else u.current.width=t,u.current.height=n;w({width:t,height:n}),v.startRendering()}v&&v.resizeToCanvas()}}e.useEffect(function(){v&&O()},[v,y]);var m=e.useCallback(function(e){if(e&&n&&b){var r=R.useOffscreenRenderer,a=new t.Rive(i(i({useOffscreenRenderer:r},n),{canvas:e}));a.on(t.EventType.Load,function(){return h(a)})}else null===e&&u.current&&(u.current.height=0,u.current.width=0);u.current=e},[b]),C=e.useCallback(function(e){l.current=e},[]);e.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?v&&v.startRendering():v&&v.stopRendering()});return u.current&&e.observe(u.current),function(){e.disconnect()}},[v]),e.useEffect(function(){return function(){v&&(v.stop(),h(null))}},[v]);var x=null==n?void 0:n.animations;e.useEffect(function(){v&&x&&(v.isPlaying?(v.stop(v.animationNames),v.play(x)):v.isPaused&&(v.stop(v.animationNames),v.pause(x)))},[x,v]);var E=e.useCallback(function(e){return r.default.createElement(c,i({setContainerRef:C,setCanvasRef:m},e))},[]);return{canvas:u.current,setCanvasRef:m,setContainerRef:C,rive:v,RiveComponent:E}}exports.default=function(e){var t=e.src,n=e.artboard,u=e.animations,o=e.stateMachines,s=e.layout,c=e.useOffscreenRenderer,f=void 0===c||c,d=a(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer"]),v=l({src:t,artboard:n,animations:u,layout:s,stateMachines:o,autoplay:!0},{useOffscreenRenderer:f}).RiveComponent;return r.default.createElement(v,i({},d))},exports.useRive=l,exports.useStateMachineInput=function(t,n,r,i){var a=e.useState(null),u=a[0],o=a[1];return e.useEffect(function(){if(t&&n&&r||o(null),t&&n&&r){var e=t.stateMachineInputs(n);if(e){var a=e.find(function(e){return e.name===r});void 0!==i&&a&&(a.value=i),o(a||null)}}else o(null)},[t]),u},Object.keys(t).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})});