@plasmicpkgs/rive 0.0.2

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Plasmic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+Plasmic registration call for Rive code component

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import registerComponent, { CodeComponentMeta } from "@plasmicapp/host/registerComponent";
+import { RiveProps } from "@rive-app/react-canvas";
+import React from "react";
+declare type RiveComponentProps = RiveProps & {
+    className: string;
+    autoplay: boolean;
+    studioAutoplay: boolean;
+    onStateChange?: (event: any) => void;
+};
+interface RiveInputs {
+    setBoolean(name: string, value: boolean): void;
+    setNumber(name: string, value: number): void;
+    fire(name: string): void;
+}
+declare const RivePlayer: React.ForwardRefExoticComponent<RiveProps & {
+    className: string;
+    autoplay: boolean;
+    studioAutoplay: boolean;
+    onStateChange?: ((event: any) => void) | undefined;
+} & React.RefAttributes<RiveInputs>>;
+export declare const riveMetaDescriptor: CodeComponentMeta<RiveComponentProps>;
+export declare function registerPlasmicRive(loader?: {
+    registerComponent: typeof registerComponent;
+}): void;
+export default RivePlayer;

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./rive.cjs.production.min.js')
+} else {
+  module.exports = require('./rive.cjs.development.js')
+}

package/dist/rive.cjs.development.js

@@ -0,0 +1,286 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var host = require('@plasmicapp/host');
+var registerComponent = _interopDefault(require('@plasmicapp/host/registerComponent'));
+var reactCanvas = require('@rive-app/react-canvas');
+var React = _interopDefault(require('react'));
+
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+var _excluded = ["layout", "className", "onStateChange", "stateMachines"];
+var RivePlayer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var layout = _ref.layout,
+    className = _ref.className,
+    _onStateChange = _ref.onStateChange,
+    stateMachines = _ref.stateMachines,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var inEditor = host.usePlasmicCanvasContext();
+  var riveParams = React.useMemo(function () {
+    var riveLayout = layout ? new reactCanvas.Layout({
+      fit: layout.fit,
+      alignment: layout.alignment,
+      minX: layout.minX,
+      minY: layout.minY,
+      maxX: layout.maxX,
+      maxY: layout.maxY
+    }) : undefined;
+    return {
+      src: props.src,
+      artboard: props.artboard,
+      animations: props.animations,
+      stateMachines: stateMachines,
+      layout: riveLayout,
+      autoplay: inEditor ? props.studioAutoplay : props.autoplay,
+      onStateChange: function onStateChange(event) {
+        if (_onStateChange) {
+          _onStateChange(event);
+        }
+      }
+    };
+  }, [props.src, props.artboard, props.animations, props.autoplay, props.studioAutoplay, layout, stateMachines, inEditor, _onStateChange]);
+  var _useRive = reactCanvas.useRive(riveParams),
+    rive = _useRive.rive,
+    RiveComponent = _useRive.RiveComponent;
+  React.useImperativeHandle(ref, function () {
+    function setInput(inputType, inputName, value, stateMachine) {
+      if (value === void 0) {
+        value = null;
+      }
+      if (stateMachine === void 0) {
+        stateMachine = null;
+      }
+      var inputs = rive == null ? void 0 : rive.stateMachineInputs(stateMachine || stateMachines);
+      (inputs || []).forEach(function (i) {
+        if (i.type !== inputType) {
+          console.warn("PlasmicRive: Input type mismatch: expected " + inputType + ", got " + i.type);
+        }
+        if (i.name === inputName) {
+          switch (inputType) {
+            case reactCanvas.StateMachineInputType.Trigger:
+              i.fire();
+              break;
+            case reactCanvas.StateMachineInputType.Number:
+            case reactCanvas.StateMachineInputType.Boolean:
+              i.value = value;
+              break;
+          }
+        }
+      });
+    }
+    return {
+      setBoolean: function setBoolean(name, value, stateMachine) {
+        setInput(reactCanvas.StateMachineInputType.Boolean, name, value, stateMachine);
+      },
+      setNumber: function setNumber(name, value, stateMachine) {
+        setInput(reactCanvas.StateMachineInputType.Number, name, value, stateMachine);
+      },
+      fire: function fire(name, stateMachine) {
+        setInput(reactCanvas.StateMachineInputType.Trigger, name, null, stateMachine);
+      },
+      play: function play(animationName) {
+        rive == null || rive.play(animationName);
+      },
+      pause: function pause(animationName) {
+        rive == null || rive.pause(animationName);
+      }
+    };
+  }, [rive]);
+  // In Plasmic Studio, force a remount by changing the key when any relevant prop changes
+  var studioKey = React.useMemo(function () {
+    return inEditor ? [props.src, props.artboard, props.animations, props.autoplay, props.studioAutoplay, JSON.stringify(layout), stateMachines, Date.now()].join("|") : undefined;
+  }, [inEditor, props.src, props.artboard, props.animations, props.autoplay, props.studioAutoplay, layout, stateMachines]);
+  return React.createElement(RiveComponent, {
+    className: className,
+    key: studioKey
+  });
+});
+var riveMetaDescriptor = {
+  name: "rive",
+  displayName: "Rive",
+  importName: "RivePlayer",
+  importPath: "@plasmicpkgs/rive",
+  description: "Rive animation component",
+  props: {
+    src: {
+      type: "string",
+      defaultValue: "https://cdn.rive.app/animations/vehicles.riv",
+      displayName: "Source URL",
+      description: "URL to the .riv file (exported from Rive)"
+    },
+    stateMachines: {
+      type: "string",
+      displayName: "State Machines",
+      description: "(optional) Name of state machine to load.",
+      advanced: true
+    },
+    autoplay: {
+      type: "boolean",
+      displayName: "Autoplay",
+      description: "Should animation play automatically.",
+      defaultValue: true,
+      advanced: true
+    },
+    studioAutoplay: {
+      type: "boolean",
+      displayName: "Studio Autoplay",
+      description: "Should animation play automatically in Plasmic Studio.",
+      defaultValue: false,
+      advanced: true
+    },
+    artboard: {
+      type: "string",
+      displayName: "Artboard",
+      description: "(optional) Name of the artboard to use.",
+      advanced: true
+    },
+    layout: {
+      type: "object",
+      displayName: "Layout",
+      description: "(optional) Layout object to define how animations are displayed on the canvas.",
+      nameFunc: function nameFunc(item) {
+        return item ? item.fit + " / " + item.alignment : undefined;
+      },
+      advanced: true,
+      fields: {
+        fit: {
+          type: "choice",
+          displayName: "Fit",
+          options: ["cover", "contain", "fill", "fitWidth", "fitHeight", "none", "scaleDown"],
+          description: "How the animation should fit in the canvas."
+        },
+        alignment: {
+          type: "choice",
+          displayName: "Alignment",
+          options: ["center", "topLeft", "topCenter", "topRight", "centerLeft", "centerRight", "bottomLeft", "bottomCenter", "bottomRight"],
+          description: "How the animation should be aligned in the canvas."
+        },
+        minX: {
+          type: "number",
+          displayName: "Min X",
+          advanced: true
+        },
+        minY: {
+          type: "number",
+          displayName: "Min Y",
+          advanced: true
+        },
+        maxX: {
+          type: "number",
+          displayName: "Max X",
+          advanced: true
+        },
+        maxY: {
+          type: "number",
+          displayName: "Max Y",
+          advanced: true
+        }
+      }
+    },
+    animations: {
+      type: "string",
+      displayName: "Animations",
+      description: "(optional) Name or list of names of animations to play.",
+      advanced: true
+    },
+    onStateChange: {
+      type: "eventHandler",
+      displayName: "On State Change",
+      description: "(optional) Callback when the state changes.",
+      advanced: true,
+      argTypes: [{
+        name: "event",
+        type: "object"
+      }]
+    }
+  },
+  defaultStyles: {
+    minHeight: "60vh",
+    width: "stretch"
+  },
+  refActions: {
+    setBoolean: {
+      description: "Set the Rive Input",
+      argTypes: [{
+        name: "name",
+        type: "string",
+        displayName: "Input Name"
+      }, {
+        name: "value",
+        type: "boolean",
+        displayName: "Input Value"
+      }, {
+        name: "stateMachine",
+        type: "string",
+        displayName: "State Machine Name"
+      }]
+    },
+    setNumber: {
+      description: "Set the Rive Input",
+      argTypes: [{
+        name: "name",
+        type: "string",
+        displayName: "Input Name"
+      }, {
+        name: "value",
+        type: "number",
+        displayName: "Input Value"
+      }, {
+        name: "stateMachine",
+        type: "string",
+        displayName: "State Machine Name"
+      }]
+    },
+    fire: {
+      description: "Fire the Rive Input",
+      argTypes: [{
+        name: "name",
+        type: "string",
+        displayName: "Input Name"
+      }, {
+        name: "stateMachine",
+        type: "string",
+        displayName: "State Machine Name"
+      }]
+    },
+    play: {
+      description: "Play the animation",
+      argTypes: [{
+        name: "animationName",
+        type: "string",
+        displayName: "Animation Name"
+      }]
+    },
+    pause: {
+      description: "Pause the animation",
+      argTypes: [{
+        name: "animationName",
+        type: "string",
+        displayName: "Animation Name"
+      }]
+    }
+  }
+};
+function registerPlasmicRive(loader) {
+  if (loader) {
+    loader.registerComponent(RivePlayer, riveMetaDescriptor);
+  } else {
+    registerComponent(RivePlayer, riveMetaDescriptor);
+  }
+}
+
+exports.default = RivePlayer;
+exports.registerPlasmicRive = registerPlasmicRive;
+exports.riveMetaDescriptor = riveMetaDescriptor;
+//# sourceMappingURL=rive.cjs.development.js.map

package/dist/rive.cjs.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rive.cjs.development.js","sources":["../src/index.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n  CodeComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport {\n  Layout,\n  RiveProps,\n  StateMachineInputType,\n  useRive,\n} from \"@rive-app/react-canvas\";\nimport React from \"react\";\n\ntype RiveComponentProps = RiveProps & {\n  className: string;\n  autoplay: boolean;\n  studioAutoplay: boolean;\n  onStateChange?: (event: any) => void;\n};\n\ninterface RiveInputs {\n  setBoolean(name: string, value: boolean): void;\n  setNumber(name: string, value: number): void;\n  fire(name: string): void;\n}\n\nconst RivePlayer = React.forwardRef<RiveInputs, RiveComponentProps>(\n  ({ layout, className, onStateChange, stateMachines, ...props }, ref) => {\n    const inEditor = usePlasmicCanvasContext();\n\n    const riveParams = React.useMemo(() => {\n      const riveLayout = layout\n        ? new Layout({\n            fit: layout.fit,\n            alignment: layout.alignment,\n            minX: layout.minX,\n            minY: layout.minY,\n            maxX: layout.maxX,\n            maxY: layout.maxY,\n          })\n        : undefined;\n\n      return {\n        src: props.src,\n        artboard: props.artboard,\n        animations: props.animations,\n        stateMachines,\n        layout: riveLayout,\n        autoplay: inEditor ? props.studioAutoplay : props.autoplay,\n        onStateChange: (event: any) => {\n          if (onStateChange) {\n            onStateChange(event);\n          }\n        },\n      };\n    }, [\n      props.src,\n      props.artboard,\n      props.animations,\n      props.autoplay,\n      props.studioAutoplay,\n      layout,\n      stateMachines,\n      inEditor,\n      onStateChange,\n    ]);\n\n    const { rive, RiveComponent } = useRive(riveParams);\n\n    React.useImperativeHandle(\n      ref,\n      () => {\n        function setInput(\n          inputType: StateMachineInputType,\n          inputName: string,\n          value: any = null,\n          stateMachine: string | null = null\n        ) {\n          const inputs = rive?.stateMachineInputs(\n            stateMachine || (stateMachines as string)\n          );\n          (inputs || []).forEach((i: any) => {\n            if (i.type !== inputType) {\n              console.warn(\n                `PlasmicRive: Input type mismatch: expected ${inputType}, got ${i.type}`\n              );\n            }\n            if (i.name === inputName) {\n              switch (inputType) {\n                case StateMachineInputType.Trigger:\n                  i.fire();\n                  break;\n                case StateMachineInputType.Number:\n                case StateMachineInputType.Boolean:\n                  i.value = value;\n                  break;\n              }\n            }\n          });\n        }\n\n        return {\n          setBoolean(name: string, value: boolean, stateMachine?: string) {\n            setInput(StateMachineInputType.Boolean, name, value, stateMachine);\n          },\n          setNumber(name: string, value: number, stateMachine?: string) {\n            setInput(StateMachineInputType.Number, name, value, stateMachine);\n          },\n          fire(name: string, stateMachine?: string) {\n            setInput(StateMachineInputType.Trigger, name, null, stateMachine);\n          },\n          play(animationName: string) {\n            rive?.play(animationName);\n          },\n          pause(animationName: string) {\n            rive?.pause(animationName);\n          },\n        };\n      },\n      [rive]\n    );\n\n    // In Plasmic Studio, force a remount by changing the key when any relevant prop changes\n    const studioKey = React.useMemo(\n      () =>\n        inEditor\n          ? [\n              props.src,\n              props.artboard,\n              props.animations,\n              props.autoplay,\n              props.studioAutoplay,\n              JSON.stringify(layout),\n              stateMachines,\n              Date.now(), // ensures a new key on every render in studio\n            ].join(\"|\")\n          : undefined,\n      [\n        inEditor,\n        props.src,\n        props.artboard,\n        props.animations,\n        props.autoplay,\n        props.studioAutoplay,\n        layout,\n        stateMachines,\n      ]\n    );\n\n    return <RiveComponent className={className} key={studioKey} />;\n  }\n);\n\nexport const riveMetaDescriptor: CodeComponentMeta<RiveComponentProps> = {\n  name: \"rive\",\n  displayName: \"Rive\",\n  importName: \"RivePlayer\",\n  importPath: \"@plasmicpkgs/rive\",\n  description: \"Rive animation component\",\n\n  props: {\n    src: {\n      type: \"string\",\n      defaultValue: \"https://cdn.rive.app/animations/vehicles.riv\",\n      displayName: \"Source URL\",\n      description: \"URL to the .riv file (exported from Rive)\",\n    },\n    stateMachines: {\n      type: \"string\",\n      displayName: \"State Machines\",\n      description: \"(optional) Name of state machine to load.\",\n      advanced: true,\n    },\n    autoplay: {\n      type: \"boolean\",\n      displayName: \"Autoplay\",\n      description: \"Should animation play automatically.\",\n      defaultValue: true,\n      advanced: true,\n    },\n    studioAutoplay: {\n      type: \"boolean\",\n      displayName: \"Studio Autoplay\",\n      description: \"Should animation play automatically in Plasmic Studio.\",\n      defaultValue: false,\n      advanced: true,\n    },\n    artboard: {\n      type: \"string\",\n      displayName: \"Artboard\",\n      description: \"(optional) Name of the artboard to use.\",\n      advanced: true,\n    },\n    layout: {\n      type: \"object\",\n      displayName: \"Layout\",\n      description:\n        \"(optional) Layout object to define how animations are displayed on the canvas.\",\n      nameFunc: (item: any) =>\n        item ? `${item.fit} / ${item.alignment}` : undefined,\n      advanced: true,\n      fields: {\n        fit: {\n          type: \"choice\",\n          displayName: \"Fit\",\n          options: [\n            \"cover\",\n            \"contain\",\n            \"fill\",\n            \"fitWidth\",\n            \"fitHeight\",\n            \"none\",\n            \"scaleDown\",\n          ],\n          description: \"How the animation should fit in the canvas.\",\n        },\n        alignment: {\n          type: \"choice\",\n          displayName: \"Alignment\",\n          options: [\n            \"center\",\n            \"topLeft\",\n            \"topCenter\",\n            \"topRight\",\n            \"centerLeft\",\n            \"centerRight\",\n            \"bottomLeft\",\n            \"bottomCenter\",\n            \"bottomRight\",\n          ],\n          description: \"How the animation should be aligned in the canvas.\",\n        },\n        minX: { type: \"number\", displayName: \"Min X\", advanced: true },\n        minY: { type: \"number\", displayName: \"Min Y\", advanced: true },\n        maxX: { type: \"number\", displayName: \"Max X\", advanced: true },\n        maxY: { type: \"number\", displayName: \"Max Y\", advanced: true },\n      },\n    },\n    animations: {\n      type: \"string\",\n      displayName: \"Animations\",\n      description: \"(optional) Name or list of names of animations to play.\",\n      advanced: true,\n    },\n    onStateChange: {\n      type: \"eventHandler\",\n      displayName: \"On State Change\",\n      description: \"(optional) Callback when the state changes.\",\n      advanced: true,\n      argTypes: [\n        {\n          name: \"event\",\n          type: \"object\",\n        },\n      ],\n    },\n  },\n  defaultStyles: {\n    minHeight: \"60vh\",\n    width: \"stretch\",\n  },\n  refActions: {\n    setBoolean: {\n      description: \"Set the Rive Input\",\n      argTypes: [\n        {\n          name: \"name\",\n          type: \"string\",\n          displayName: \"Input Name\",\n        },\n        {\n          name: \"value\",\n          type: \"boolean\",\n          displayName: \"Input Value\",\n        },\n        {\n          name: \"stateMachine\",\n          type: \"string\",\n          displayName: \"State Machine Name\",\n        },\n      ],\n    },\n    setNumber: {\n      description: \"Set the Rive Input\",\n      argTypes: [\n        {\n          name: \"name\",\n          type: \"string\",\n          displayName: \"Input Name\",\n        },\n        {\n          name: \"value\",\n          type: \"number\",\n          displayName: \"Input Value\",\n        },\n        {\n          name: \"stateMachine\",\n          type: \"string\",\n          displayName: \"State Machine Name\",\n        },\n      ],\n    },\n    fire: {\n      description: \"Fire the Rive Input\",\n      argTypes: [\n        {\n          name: \"name\",\n          type: \"string\",\n          displayName: \"Input Name\",\n        },\n        {\n          name: \"stateMachine\",\n          type: \"string\",\n          displayName: \"State Machine Name\",\n        },\n      ],\n    },\n    play: {\n      description: \"Play the animation\",\n      argTypes: [\n        {\n          name: \"animationName\",\n          type: \"string\",\n          displayName: \"Animation Name\",\n        },\n      ],\n    },\n    pause: {\n      description: \"Pause the animation\",\n      argTypes: [\n        {\n          name: \"animationName\",\n          type: \"string\",\n          displayName: \"Animation Name\",\n        },\n      ],\n    },\n  },\n};\n\nexport function registerPlasmicRive(loader?: {\n  registerComponent: typeof registerComponent;\n}) {\n  if (loader) {\n    loader.registerComponent(RivePlayer, riveMetaDescriptor);\n  } else {\n    registerComponent(RivePlayer, riveMetaDescriptor);\n  }\n}\n\nexport default RivePlayer;\n"],"names":["RivePlayer","React","forwardRef","_ref","ref","layout","className","onStateChange","stateMachines","props","_objectWithoutPropertiesLoose","_excluded","inEditor","usePlasmicCanvasContext","riveParams","useMemo","riveLayout","Layout","fit","alignment","minX","minY","maxX","maxY","undefined","src","artboard","animations","autoplay","studioAutoplay","event","_useRive","useRive","rive","RiveComponent","useImperativeHandle","setInput","inputType","inputName","value","stateMachine","inputs","stateMachineInputs","forEach","i","type","console","warn","name","StateMachineInputType","Trigger","fire","Number","Boolean","setBoolean","setNumber","play","animationName","pause","studioKey","JSON","stringify","Date","now","join","key","riveMetaDescriptor","displayName","importName","importPath","description","defaultValue","advanced","nameFunc","item","fields","options","argTypes","defaultStyles","minHeight","width","refActions","registerPlasmicRive","loader","registerComponent"],"mappings":"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"}

package/dist/rive.cjs.production.min.js

@@ -0,0 +1,2 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var a=require("@plasmicapp/host"),t=e(require("@plasmicapp/host/registerComponent")),n=require("@rive-app/react-canvas"),i=e(require("react")),o=["layout","className","onStateChange","stateMachines"],s=i.forwardRef((function(e,t){var s=e.layout,p=e.className,r=e.onStateChange,l=e.stateMachines,m=function(e,a){if(null==e)return{};var t={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==a.indexOf(n))continue;t[n]=e[n]}return t}(e,o),u=a.usePlasmicCanvasContext(),c=i.useMemo((function(){var e=s?new n.Layout({fit:s.fit,alignment:s.alignment,minX:s.minX,minY:s.minY,maxX:s.maxX,maxY:s.maxY}):void 0;return{src:m.src,artboard:m.artboard,animations:m.animations,stateMachines:l,layout:e,autoplay:u?m.studioAutoplay:m.autoplay,onStateChange:function(e){r&&r(e)}}}),[m.src,m.artboard,m.animations,m.autoplay,m.studioAutoplay,s,l,u,r]),d=n.useRive(c),y=d.rive,h=d.RiveComponent;i.useImperativeHandle(t,(function(){function e(e,a,t,i){void 0===t&&(t=null),void 0===i&&(i=null),((null==y?void 0:y.stateMachineInputs(i||l))||[]).forEach((function(i){if(i.type!==e&&console.warn("PlasmicRive: Input type mismatch: expected "+e+", got "+i.type),i.name===a)switch(e){case n.StateMachineInputType.Trigger:i.fire();break;case n.StateMachineInputType.Number:case n.StateMachineInputType.Boolean:i.value=t}}))}return{setBoolean:function(a,t,i){e(n.StateMachineInputType.Boolean,a,t,i)},setNumber:function(a,t,i){e(n.StateMachineInputType.Number,a,t,i)},fire:function(a,t){e(n.StateMachineInputType.Trigger,a,null,t)},play:function(e){null==y||y.play(e)},pause:function(e){null==y||y.pause(e)}}}),[y]);var f=i.useMemo((function(){return u?[m.src,m.artboard,m.animations,m.autoplay,m.studioAutoplay,JSON.stringify(s),l,Date.now()].join("|"):void 0}),[u,m.src,m.artboard,m.animations,m.autoplay,m.studioAutoplay,s,l]);return i.createElement(h,{className:p,key:f})})),p={name:"rive",displayName:"Rive",importName:"RivePlayer",importPath:"@plasmicpkgs/rive",description:"Rive animation component",props:{src:{type:"string",defaultValue:"https://cdn.rive.app/animations/vehicles.riv",displayName:"Source URL",description:"URL to the .riv file (exported from Rive)"},stateMachines:{type:"string",displayName:"State Machines",description:"(optional) Name of state machine to load.",advanced:!0},autoplay:{type:"boolean",displayName:"Autoplay",description:"Should animation play automatically.",defaultValue:!0,advanced:!0},studioAutoplay:{type:"boolean",displayName:"Studio Autoplay",description:"Should animation play automatically in Plasmic Studio.",defaultValue:!1,advanced:!0},artboard:{type:"string",displayName:"Artboard",description:"(optional) Name of the artboard to use.",advanced:!0},layout:{type:"object",displayName:"Layout",description:"(optional) Layout object to define how animations are displayed on the canvas.",nameFunc:function(e){return e?e.fit+" / "+e.alignment:void 0},advanced:!0,fields:{fit:{type:"choice",displayName:"Fit",options:["cover","contain","fill","fitWidth","fitHeight","none","scaleDown"],description:"How the animation should fit in the canvas."},alignment:{type:"choice",displayName:"Alignment",options:["center","topLeft","topCenter","topRight","centerLeft","centerRight","bottomLeft","bottomCenter","bottomRight"],description:"How the animation should be aligned in the canvas."},minX:{type:"number",displayName:"Min X",advanced:!0},minY:{type:"number",displayName:"Min Y",advanced:!0},maxX:{type:"number",displayName:"Max X",advanced:!0},maxY:{type:"number",displayName:"Max Y",advanced:!0}}},animations:{type:"string",displayName:"Animations",description:"(optional) Name or list of names of animations to play.",advanced:!0},onStateChange:{type:"eventHandler",displayName:"On State Change",description:"(optional) Callback when the state changes.",advanced:!0,argTypes:[{name:"event",type:"object"}]}},defaultStyles:{minHeight:"60vh",width:"stretch"},refActions:{setBoolean:{description:"Set the Rive Input",argTypes:[{name:"name",type:"string",displayName:"Input Name"},{name:"value",type:"boolean",displayName:"Input Value"},{name:"stateMachine",type:"string",displayName:"State Machine Name"}]},setNumber:{description:"Set the Rive Input",argTypes:[{name:"name",type:"string",displayName:"Input Name"},{name:"value",type:"number",displayName:"Input Value"},{name:"stateMachine",type:"string",displayName:"State Machine Name"}]},fire:{description:"Fire the Rive Input",argTypes:[{name:"name",type:"string",displayName:"Input Name"},{name:"stateMachine",type:"string",displayName:"State Machine Name"}]},play:{description:"Play the animation",argTypes:[{name:"animationName",type:"string",displayName:"Animation Name"}]},pause:{description:"Pause the animation",argTypes:[{name:"animationName",type:"string",displayName:"Animation Name"}]}}};exports.default=s,exports.registerPlasmicRive=function(e){e?e.registerComponent(s,p):t(s,p)},exports.riveMetaDescriptor=p;
+//# sourceMappingURL=rive.cjs.production.min.js.map

package/dist/rive.cjs.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rive.cjs.production.min.js","sources":["../src/index.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n  CodeComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport {\n  Layout,\n  RiveProps,\n  StateMachineInputType,\n  useRive,\n} from \"@rive-app/react-canvas\";\nimport React from \"react\";\n\ntype RiveComponentProps = RiveProps & {\n  className: string;\n  autoplay: boolean;\n  studioAutoplay: boolean;\n  onStateChange?: (event: any) => void;\n};\n\ninterface RiveInputs {\n  setBoolean(name: string, value: boolean): void;\n  setNumber(name: string, value: number): void;\n  fire(name: string): void;\n}\n\nconst RivePlayer = React.forwardRef<RiveInputs, RiveComponentProps>(\n  ({ layout, className, onStateChange, stateMachines, ...props }, ref) => {\n    const inEditor = usePlasmicCanvasContext();\n\n    const riveParams = React.useMemo(() => {\n      const riveLayout = layout\n        ? new Layout({\n            fit: layout.fit,\n            alignment: layout.alignment,\n            minX: layout.minX,\n            minY: layout.minY,\n            maxX: layout.maxX,\n            maxY: layout.maxY,\n          })\n        : undefined;\n\n      return {\n        src: props.src,\n        artboard: props.artboard,\n        animations: props.animations,\n        stateMachines,\n        layout: riveLayout,\n        autoplay: inEditor ? props.studioAutoplay : props.autoplay,\n        onStateChange: (event: any) => {\n          if (onStateChange) {\n            onStateChange(event);\n          }\n        },\n      };\n    }, [\n      props.src,\n      props.artboard,\n      props.animations,\n      props.autoplay,\n      props.studioAutoplay,\n      layout,\n      stateMachines,\n      inEditor,\n      onStateChange,\n    ]);\n\n    const { rive, RiveComponent } = useRive(riveParams);\n\n    React.useImperativeHandle(\n      ref,\n      () => {\n        function setInput(\n          inputType: StateMachineInputType,\n          inputName: string,\n          value: any = null,\n          stateMachine: string | null = null\n        ) {\n          const inputs = rive?.stateMachineInputs(\n            stateMachine || (stateMachines as string)\n          );\n          (inputs || []).forEach((i: any) => {\n            if (i.type !== inputType) {\n              console.warn(\n                `PlasmicRive: Input type mismatch: expected ${inputType}, got ${i.type}`\n              );\n            }\n            if (i.name === inputName) {\n              switch (inputType) {\n                case StateMachineInputType.Trigger:\n                  i.fire();\n                  break;\n                case StateMachineInputType.Number:\n                case StateMachineInputType.Boolean:\n                  i.value = value;\n                  break;\n              }\n            }\n          });\n        }\n\n        return {\n          setBoolean(name: string, value: boolean, stateMachine?: string) {\n            setInput(StateMachineInputType.Boolean, name, value, stateMachine);\n          },\n          setNumber(name: string, value: number, stateMachine?: string) {\n            setInput(StateMachineInputType.Number, name, value, stateMachine);\n          },\n          fire(name: string, stateMachine?: string) {\n            setInput(StateMachineInputType.Trigger, name, null, stateMachine);\n          },\n          play(animationName: string) {\n            rive?.play(animationName);\n          },\n          pause(animationName: string) {\n            rive?.pause(animationName);\n          },\n        };\n      },\n      [rive]\n    );\n\n    // In Plasmic Studio, force a remount by changing the key when any relevant prop changes\n    const studioKey = React.useMemo(\n      () =>\n        inEditor\n          ? [\n              props.src,\n              props.artboard,\n              props.animations,\n              props.autoplay,\n              props.studioAutoplay,\n              JSON.stringify(layout),\n              stateMachines,\n              Date.now(), // ensures a new key on every render in studio\n            ].join(\"|\")\n          : undefined,\n      [\n        inEditor,\n        props.src,\n        props.artboard,\n        props.animations,\n        props.autoplay,\n        props.studioAutoplay,\n        layout,\n        stateMachines,\n      ]\n    );\n\n    return <RiveComponent className={className} key={studioKey} />;\n  }\n);\n\nexport const riveMetaDescriptor: CodeComponentMeta<RiveComponentProps> = {\n  name: \"rive\",\n  displayName: \"Rive\",\n  importName: \"RivePlayer\",\n  importPath: \"@plasmicpkgs/rive\",\n  description: \"Rive animation component\",\n\n  props: {\n    src: {\n      type: \"string\",\n      defaultValue: \"https://cdn.rive.app/animations/vehicles.riv\",\n      displayName: \"Source URL\",\n      description: \"URL to the .riv file (exported from Rive)\",\n    },\n    stateMachines: {\n      type: \"string\",\n      displayName: \"State Machines\",\n      description: \"(optional) Name of state machine to load.\",\n      advanced: true,\n    },\n    autoplay: {\n      type: \"boolean\",\n      displayName: \"Autoplay\",\n      description: \"Should animation play automatically.\",\n      defaultValue: true,\n      advanced: true,\n    },\n    studioAutoplay: {\n      type: \"boolean\",\n      displayName: \"Studio Autoplay\",\n      description: \"Should animation play automatically in Plasmic Studio.\",\n      defaultValue: false,\n      advanced: true,\n    },\n    artboard: {\n      type: \"string\",\n      displayName: \"Artboard\",\n      description: \"(optional) Name of the artboard to use.\",\n      advanced: true,\n    },\n    layout: {\n      type: \"object\",\n      displayName: \"Layout\",\n      description:\n        \"(optional) Layout object to define how animations are displayed on the canvas.\",\n      nameFunc: (item: any) =>\n        item ? `${item.fit} / ${item.alignment}` : undefined,\n      advanced: true,\n      fields: {\n        fit: {\n          type: \"choice\",\n          displayName: \"Fit\",\n          options: [\n            \"cover\",\n            \"contain\",\n            \"fill\",\n            \"fitWidth\",\n            \"fitHeight\",\n            \"none\",\n            \"scaleDown\",\n          ],\n          description: \"How the animation should fit in the canvas.\",\n        },\n        alignment: {\n          type: \"choice\",\n          displayName: \"Alignment\",\n          options: [\n            \"center\",\n            \"topLeft\",\n            \"topCenter\",\n            \"topRight\",\n            \"centerLeft\",\n            \"centerRight\",\n            \"bottomLeft\",\n            \"bottomCenter\",\n            \"bottomRight\",\n          ],\n          description: \"How the animation should be aligned in the canvas.\",\n        },\n        minX: { type: \"number\", displayName: \"Min X\", advanced: true },\n        minY: { type: \"number\", displayName: \"Min Y\", advanced: true },\n        maxX: { type: \"number\", displayName: \"Max X\", advanced: true },\n        maxY: { type: \"number\", displayName: \"Max Y\", advanced: true },\n      },\n    },\n    animations: {\n      type: \"string\",\n      displayName: \"Animations\",\n      description: \"(optional) Name or list of names of animations to play.\",\n      advanced: true,\n    },\n    onStateChange: {\n      type: \"eventHandler\",\n      displayName: \"On State Change\",\n      description: \"(optional) Callback when the state changes.\",\n      advanced: true,\n      argTypes: [\n        {\n          name: \"event\",\n          type: \"object\",\n        },\n      ],\n    },\n  },\n  defaultStyles: {\n    minHeight: \"60vh\",\n    width: \"stretch\",\n  },\n  refActions: {\n    setBoolean: {\n      description: \"Set the Rive Input\",\n      argTypes: [\n        {\n          name: \"name\",\n          type: \"string\",\n          displayName: \"Input Name\",\n        },\n        {\n          name: \"value\",\n          type: \"boolean\",\n          displayName: \"Input Value\",\n        },\n        {\n          name: \"stateMachine\",\n          type: \"string\",\n          displayName: \"State Machine Name\",\n        },\n      ],\n    },\n    setNumber: {\n      description: \"Set the Rive Input\",\n      argTypes: [\n        {\n          name: \"name\",\n          type: \"string\",\n          displayName: \"Input Name\",\n        },\n        {\n          name: \"value\",\n          type: \"number\",\n          displayName: \"Input Value\",\n        },\n        {\n          name: \"stateMachine\",\n          type: \"string\",\n          displayName: \"State Machine Name\",\n        },\n      ],\n    },\n    fire: {\n      description: \"Fire the Rive Input\",\n      argTypes: [\n        {\n          name: \"name\",\n          type: \"string\",\n          displayName: \"Input Name\",\n        },\n        {\n          name: \"stateMachine\",\n          type: \"string\",\n          displayName: \"State Machine Name\",\n        },\n      ],\n    },\n    play: {\n      description: \"Play the animation\",\n      argTypes: [\n        {\n          name: \"animationName\",\n          type: \"string\",\n          displayName: \"Animation Name\",\n        },\n      ],\n    },\n    pause: {\n      description: \"Pause the animation\",\n      argTypes: [\n        {\n          name: \"animationName\",\n          type: \"string\",\n          displayName: \"Animation Name\",\n        },\n      ],\n    },\n  },\n};\n\nexport function registerPlasmicRive(loader?: {\n  registerComponent: typeof registerComponent;\n}) {\n  if (loader) {\n    loader.registerComponent(RivePlayer, riveMetaDescriptor);\n  } else {\n    registerComponent(RivePlayer, riveMetaDescriptor);\n  }\n}\n\nexport default RivePlayer;\n"],"names":["RivePlayer","React","forwardRef","_ref","ref","layout","className","onStateChange","stateMachines","props","_objectWithoutPropertiesLoose","_excluded","inEditor","usePlasmicCanvasContext","riveParams","useMemo","riveLayout","Layout","fit","alignment","minX","minY","maxX","maxY","undefined","src","artboard","animations","autoplay","studioAutoplay","event","_useRive","useRive","rive","RiveComponent","useImperativeHandle","setInput","inputType","inputName","value","stateMachine","stateMachineInputs","forEach","i","type","console","warn","name","StateMachineInputType","Trigger","fire","Number","Boolean","setBoolean","setNumber","play","animationName","pause","studioKey","JSON","stringify","Date","now","join","key","riveMetaDescriptor","displayName","importName","importPath","description","defaultValue","advanced","nameFunc","item","fields","options","argTypes","defaultStyles","minHeight","width","refActions","loader","registerComponent"],"mappings":"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"}

package/dist/rive.esm.js

@@ -0,0 +1,279 @@
+import { usePlasmicCanvasContext } from '@plasmicapp/host';
+import registerComponent from '@plasmicapp/host/registerComponent';
+import { Layout, useRive, StateMachineInputType } from '@rive-app/react-canvas';
+import React from 'react';
+
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+var _excluded = ["layout", "className", "onStateChange", "stateMachines"];
+var RivePlayer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var layout = _ref.layout,
+    className = _ref.className,
+    _onStateChange = _ref.onStateChange,
+    stateMachines = _ref.stateMachines,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var inEditor = usePlasmicCanvasContext();
+  var riveParams = React.useMemo(function () {
+    var riveLayout = layout ? new Layout({
+      fit: layout.fit,
+      alignment: layout.alignment,
+      minX: layout.minX,
+      minY: layout.minY,
+      maxX: layout.maxX,
+      maxY: layout.maxY
+    }) : undefined;
+    return {
+      src: props.src,
+      artboard: props.artboard,
+      animations: props.animations,
+      stateMachines: stateMachines,
+      layout: riveLayout,
+      autoplay: inEditor ? props.studioAutoplay : props.autoplay,
+      onStateChange: function onStateChange(event) {
+        if (_onStateChange) {
+          _onStateChange(event);
+        }
+      }
+    };
+  }, [props.src, props.artboard, props.animations, props.autoplay, props.studioAutoplay, layout, stateMachines, inEditor, _onStateChange]);
+  var _useRive = useRive(riveParams),
+    rive = _useRive.rive,
+    RiveComponent = _useRive.RiveComponent;
+  React.useImperativeHandle(ref, function () {
+    function setInput(inputType, inputName, value, stateMachine) {
+      if (value === void 0) {
+        value = null;
+      }
+      if (stateMachine === void 0) {
+        stateMachine = null;
+      }
+      var inputs = rive == null ? void 0 : rive.stateMachineInputs(stateMachine || stateMachines);
+      (inputs || []).forEach(function (i) {
+        if (i.type !== inputType) {
+          console.warn("PlasmicRive: Input type mismatch: expected " + inputType + ", got " + i.type);
+        }
+        if (i.name === inputName) {
+          switch (inputType) {
+            case StateMachineInputType.Trigger:
+              i.fire();
+              break;
+            case StateMachineInputType.Number:
+            case StateMachineInputType.Boolean:
+              i.value = value;
+              break;
+          }
+        }
+      });
+    }
+    return {
+      setBoolean: function setBoolean(name, value, stateMachine) {
+        setInput(StateMachineInputType.Boolean, name, value, stateMachine);
+      },
+      setNumber: function setNumber(name, value, stateMachine) {
+        setInput(StateMachineInputType.Number, name, value, stateMachine);
+      },
+      fire: function fire(name, stateMachine) {
+        setInput(StateMachineInputType.Trigger, name, null, stateMachine);
+      },
+      play: function play(animationName) {
+        rive == null || rive.play(animationName);
+      },
+      pause: function pause(animationName) {
+        rive == null || rive.pause(animationName);
+      }
+    };
+  }, [rive]);
+  // In Plasmic Studio, force a remount by changing the key when any relevant prop changes
+  var studioKey = React.useMemo(function () {
+    return inEditor ? [props.src, props.artboard, props.animations, props.autoplay, props.studioAutoplay, JSON.stringify(layout), stateMachines, Date.now()].join("|") : undefined;
+  }, [inEditor, props.src, props.artboard, props.animations, props.autoplay, props.studioAutoplay, layout, stateMachines]);
+  return React.createElement(RiveComponent, {
+    className: className,
+    key: studioKey
+  });
+});
+var riveMetaDescriptor = {
+  name: "rive",
+  displayName: "Rive",
+  importName: "RivePlayer",
+  importPath: "@plasmicpkgs/rive",
+  description: "Rive animation component",
+  props: {
+    src: {
+      type: "string",
+      defaultValue: "https://cdn.rive.app/animations/vehicles.riv",
+      displayName: "Source URL",
+      description: "URL to the .riv file (exported from Rive)"
+    },
+    stateMachines: {
+      type: "string",
+      displayName: "State Machines",
+      description: "(optional) Name of state machine to load.",
+      advanced: true
+    },
+    autoplay: {
+      type: "boolean",
+      displayName: "Autoplay",
+      description: "Should animation play automatically.",
+      defaultValue: true,
+      advanced: true
+    },
+    studioAutoplay: {
+      type: "boolean",
+      displayName: "Studio Autoplay",
+      description: "Should animation play automatically in Plasmic Studio.",
+      defaultValue: false,
+      advanced: true
+    },
+    artboard: {
+      type: "string",
+      displayName: "Artboard",
+      description: "(optional) Name of the artboard to use.",
+      advanced: true
+    },
+    layout: {
+      type: "object",
+      displayName: "Layout",
+      description: "(optional) Layout object to define how animations are displayed on the canvas.",
+      nameFunc: function nameFunc(item) {
+        return item ? item.fit + " / " + item.alignment : undefined;
+      },
+      advanced: true,
+      fields: {
+        fit: {
+          type: "choice",
+          displayName: "Fit",
+          options: ["cover", "contain", "fill", "fitWidth", "fitHeight", "none", "scaleDown"],
+          description: "How the animation should fit in the canvas."
+        },
+        alignment: {
+          type: "choice",
+          displayName: "Alignment",
+          options: ["center", "topLeft", "topCenter", "topRight", "centerLeft", "centerRight", "bottomLeft", "bottomCenter", "bottomRight"],
+          description: "How the animation should be aligned in the canvas."
+        },
+        minX: {
+          type: "number",
+          displayName: "Min X",
+          advanced: true
+        },
+        minY: {
+          type: "number",
+          displayName: "Min Y",
+          advanced: true
+        },
+        maxX: {
+          type: "number",
+          displayName: "Max X",
+          advanced: true
+        },
+        maxY: {
+          type: "number",
+          displayName: "Max Y",
+          advanced: true
+        }
+      }
+    },
+    animations: {
+      type: "string",
+      displayName: "Animations",
+      description: "(optional) Name or list of names of animations to play.",
+      advanced: true
+    },
+    onStateChange: {
+      type: "eventHandler",
+      displayName: "On State Change",
+      description: "(optional) Callback when the state changes.",
+      advanced: true,
+      argTypes: [{
+        name: "event",
+        type: "object"
+      }]
+    }
+  },
+  defaultStyles: {
+    minHeight: "60vh",
+    width: "stretch"
+  },
+  refActions: {
+    setBoolean: {
+      description: "Set the Rive Input",
+      argTypes: [{
+        name: "name",
+        type: "string",
+        displayName: "Input Name"
+      }, {
+        name: "value",
+        type: "boolean",
+        displayName: "Input Value"
+      }, {
+        name: "stateMachine",
+        type: "string",
+        displayName: "State Machine Name"
+      }]
+    },
+    setNumber: {
+      description: "Set the Rive Input",
+      argTypes: [{
+        name: "name",
+        type: "string",
+        displayName: "Input Name"
+      }, {
+        name: "value",
+        type: "number",
+        displayName: "Input Value"
+      }, {
+        name: "stateMachine",
+        type: "string",
+        displayName: "State Machine Name"
+      }]
+    },
+    fire: {
+      description: "Fire the Rive Input",
+      argTypes: [{
+        name: "name",
+        type: "string",
+        displayName: "Input Name"
+      }, {
+        name: "stateMachine",
+        type: "string",
+        displayName: "State Machine Name"
+      }]
+    },
+    play: {
+      description: "Play the animation",
+      argTypes: [{
+        name: "animationName",
+        type: "string",
+        displayName: "Animation Name"
+      }]
+    },
+    pause: {
+      description: "Pause the animation",
+      argTypes: [{
+        name: "animationName",
+        type: "string",
+        displayName: "Animation Name"
+      }]
+    }
+  }
+};
+function registerPlasmicRive(loader) {
+  if (loader) {
+    loader.registerComponent(RivePlayer, riveMetaDescriptor);
+  } else {
+    registerComponent(RivePlayer, riveMetaDescriptor);
+  }
+}
+
+export default RivePlayer;
+export { registerPlasmicRive, riveMetaDescriptor };
+//# sourceMappingURL=rive.esm.js.map

package/dist/rive.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rive.esm.js","sources":["../src/index.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n  CodeComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport {\n  Layout,\n  RiveProps,\n  StateMachineInputType,\n  useRive,\n} from \"@rive-app/react-canvas\";\nimport React from \"react\";\n\ntype RiveComponentProps = RiveProps & {\n  className: string;\n  autoplay: boolean;\n  studioAutoplay: boolean;\n  onStateChange?: (event: any) => void;\n};\n\ninterface RiveInputs {\n  setBoolean(name: string, value: boolean): void;\n  setNumber(name: string, value: number): void;\n  fire(name: string): void;\n}\n\nconst RivePlayer = React.forwardRef<RiveInputs, RiveComponentProps>(\n  ({ layout, className, onStateChange, stateMachines, ...props }, ref) => {\n    const inEditor = usePlasmicCanvasContext();\n\n    const riveParams = React.useMemo(() => {\n      const riveLayout = layout\n        ? new Layout({\n            fit: layout.fit,\n            alignment: layout.alignment,\n            minX: layout.minX,\n            minY: layout.minY,\n            maxX: layout.maxX,\n            maxY: layout.maxY,\n          })\n        : undefined;\n\n      return {\n        src: props.src,\n        artboard: props.artboard,\n        animations: props.animations,\n        stateMachines,\n        layout: riveLayout,\n        autoplay: inEditor ? props.studioAutoplay : props.autoplay,\n        onStateChange: (event: any) => {\n          if (onStateChange) {\n            onStateChange(event);\n          }\n        },\n      };\n    }, [\n      props.src,\n      props.artboard,\n      props.animations,\n      props.autoplay,\n      props.studioAutoplay,\n      layout,\n      stateMachines,\n      inEditor,\n      onStateChange,\n    ]);\n\n    const { rive, RiveComponent } = useRive(riveParams);\n\n    React.useImperativeHandle(\n      ref,\n      () => {\n        function setInput(\n          inputType: StateMachineInputType,\n          inputName: string,\n          value: any = null,\n          stateMachine: string | null = null\n        ) {\n          const inputs = rive?.stateMachineInputs(\n            stateMachine || (stateMachines as string)\n          );\n          (inputs || []).forEach((i: any) => {\n            if (i.type !== inputType) {\n              console.warn(\n                `PlasmicRive: Input type mismatch: expected ${inputType}, got ${i.type}`\n              );\n            }\n            if (i.name === inputName) {\n              switch (inputType) {\n                case StateMachineInputType.Trigger:\n                  i.fire();\n                  break;\n                case StateMachineInputType.Number:\n                case StateMachineInputType.Boolean:\n                  i.value = value;\n                  break;\n              }\n            }\n          });\n        }\n\n        return {\n          setBoolean(name: string, value: boolean, stateMachine?: string) {\n            setInput(StateMachineInputType.Boolean, name, value, stateMachine);\n          },\n          setNumber(name: string, value: number, stateMachine?: string) {\n            setInput(StateMachineInputType.Number, name, value, stateMachine);\n          },\n          fire(name: string, stateMachine?: string) {\n            setInput(StateMachineInputType.Trigger, name, null, stateMachine);\n          },\n          play(animationName: string) {\n            rive?.play(animationName);\n          },\n          pause(animationName: string) {\n            rive?.pause(animationName);\n          },\n        };\n      },\n      [rive]\n    );\n\n    // In Plasmic Studio, force a remount by changing the key when any relevant prop changes\n    const studioKey = React.useMemo(\n      () =>\n        inEditor\n          ? [\n              props.src,\n              props.artboard,\n              props.animations,\n              props.autoplay,\n              props.studioAutoplay,\n              JSON.stringify(layout),\n              stateMachines,\n              Date.now(), // ensures a new key on every render in studio\n            ].join(\"|\")\n          : undefined,\n      [\n        inEditor,\n        props.src,\n        props.artboard,\n        props.animations,\n        props.autoplay,\n        props.studioAutoplay,\n        layout,\n        stateMachines,\n      ]\n    );\n\n    return <RiveComponent className={className} key={studioKey} />;\n  }\n);\n\nexport const riveMetaDescriptor: CodeComponentMeta<RiveComponentProps> = {\n  name: \"rive\",\n  displayName: \"Rive\",\n  importName: \"RivePlayer\",\n  importPath: \"@plasmicpkgs/rive\",\n  description: \"Rive animation component\",\n\n  props: {\n    src: {\n      type: \"string\",\n      defaultValue: \"https://cdn.rive.app/animations/vehicles.riv\",\n      displayName: \"Source URL\",\n      description: \"URL to the .riv file (exported from Rive)\",\n    },\n    stateMachines: {\n      type: \"string\",\n      displayName: \"State Machines\",\n      description: \"(optional) Name of state machine to load.\",\n      advanced: true,\n    },\n    autoplay: {\n      type: \"boolean\",\n      displayName: \"Autoplay\",\n      description: \"Should animation play automatically.\",\n      defaultValue: true,\n      advanced: true,\n    },\n    studioAutoplay: {\n      type: \"boolean\",\n      displayName: \"Studio Autoplay\",\n      description: \"Should animation play automatically in Plasmic Studio.\",\n      defaultValue: false,\n      advanced: true,\n    },\n    artboard: {\n      type: \"string\",\n      displayName: \"Artboard\",\n      description: \"(optional) Name of the artboard to use.\",\n      advanced: true,\n    },\n    layout: {\n      type: \"object\",\n      displayName: \"Layout\",\n      description:\n        \"(optional) Layout object to define how animations are displayed on the canvas.\",\n      nameFunc: (item: any) =>\n        item ? `${item.fit} / ${item.alignment}` : undefined,\n      advanced: true,\n      fields: {\n        fit: {\n          type: \"choice\",\n          displayName: \"Fit\",\n          options: [\n            \"cover\",\n            \"contain\",\n            \"fill\",\n            \"fitWidth\",\n            \"fitHeight\",\n            \"none\",\n            \"scaleDown\",\n          ],\n          description: \"How the animation should fit in the canvas.\",\n        },\n        alignment: {\n          type: \"choice\",\n          displayName: \"Alignment\",\n          options: [\n            \"center\",\n            \"topLeft\",\n            \"topCenter\",\n            \"topRight\",\n            \"centerLeft\",\n            \"centerRight\",\n            \"bottomLeft\",\n            \"bottomCenter\",\n            \"bottomRight\",\n          ],\n          description: \"How the animation should be aligned in the canvas.\",\n        },\n        minX: { type: \"number\", displayName: \"Min X\", advanced: true },\n        minY: { type: \"number\", displayName: \"Min Y\", advanced: true },\n        maxX: { type: \"number\", displayName: \"Max X\", advanced: true },\n        maxY: { type: \"number\", displayName: \"Max Y\", advanced: true },\n      },\n    },\n    animations: {\n      type: \"string\",\n      displayName: \"Animations\",\n      description: \"(optional) Name or list of names of animations to play.\",\n      advanced: true,\n    },\n    onStateChange: {\n      type: \"eventHandler\",\n      displayName: \"On State Change\",\n      description: \"(optional) Callback when the state changes.\",\n      advanced: true,\n      argTypes: [\n        {\n          name: \"event\",\n          type: \"object\",\n        },\n      ],\n    },\n  },\n  defaultStyles: {\n    minHeight: \"60vh\",\n    width: \"stretch\",\n  },\n  refActions: {\n    setBoolean: {\n      description: \"Set the Rive Input\",\n      argTypes: [\n        {\n          name: \"name\",\n          type: \"string\",\n          displayName: \"Input Name\",\n        },\n        {\n          name: \"value\",\n          type: \"boolean\",\n          displayName: \"Input Value\",\n        },\n        {\n          name: \"stateMachine\",\n          type: \"string\",\n          displayName: \"State Machine Name\",\n        },\n      ],\n    },\n    setNumber: {\n      description: \"Set the Rive Input\",\n      argTypes: [\n        {\n          name: \"name\",\n          type: \"string\",\n          displayName: \"Input Name\",\n        },\n        {\n          name: \"value\",\n          type: \"number\",\n          displayName: \"Input Value\",\n        },\n        {\n          name: \"stateMachine\",\n          type: \"string\",\n          displayName: \"State Machine Name\",\n        },\n      ],\n    },\n    fire: {\n      description: \"Fire the Rive Input\",\n      argTypes: [\n        {\n          name: \"name\",\n          type: \"string\",\n          displayName: \"Input Name\",\n        },\n        {\n          name: \"stateMachine\",\n          type: \"string\",\n          displayName: \"State Machine Name\",\n        },\n      ],\n    },\n    play: {\n      description: \"Play the animation\",\n      argTypes: [\n        {\n          name: \"animationName\",\n          type: \"string\",\n          displayName: \"Animation Name\",\n        },\n      ],\n    },\n    pause: {\n      description: \"Pause the animation\",\n      argTypes: [\n        {\n          name: \"animationName\",\n          type: \"string\",\n          displayName: \"Animation Name\",\n        },\n      ],\n    },\n  },\n};\n\nexport function registerPlasmicRive(loader?: {\n  registerComponent: typeof registerComponent;\n}) {\n  if (loader) {\n    loader.registerComponent(RivePlayer, riveMetaDescriptor);\n  } else {\n    registerComponent(RivePlayer, riveMetaDescriptor);\n  }\n}\n\nexport default RivePlayer;\n"],"names":["RivePlayer","React","forwardRef","_ref","ref","layout","className","onStateChange","stateMachines","props","_objectWithoutPropertiesLoose","_excluded","inEditor","usePlasmicCanvasContext","riveParams","useMemo","riveLayout","Layout","fit","alignment","minX","minY","maxX","maxY","undefined","src","artboard","animations","autoplay","studioAutoplay","event","_useRive","useRive","rive","RiveComponent","useImperativeHandle","setInput","inputType","inputName","value","stateMachine","inputs","stateMachineInputs","forEach","i","type","console","warn","name","StateMachineInputType","Trigger","fire","Number","Boolean","setBoolean","setNumber","play","animationName","pause","studioKey","JSON","stringify","Date","now","join","key","riveMetaDescriptor","displayName","importName","importPath","description","defaultValue","advanced","nameFunc","item","fields","options","argTypes","defaultStyles","minHeight","width","refActions","registerPlasmicRive","loader","registerComponent"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAMA,UAAU,gBAAGC,KAAK,CAACC,UAAU,CACjC,UAAAC,IAAA,EAAgEC,GAAG;MAAhEC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAEC,cAAa,GAAAJ,IAAA,CAAbI,aAAa;IAAEC,aAAa,GAAAL,IAAA,CAAbK,aAAa;IAAKC,KAAK,GAAAC,6BAAA,CAAAP,IAAA,EAAAQ,SAAA;EAC1D,IAAMC,QAAQ,GAAGC,uBAAuB,EAAE;EAE1C,IAAMC,UAAU,GAAGb,KAAK,CAACc,OAAO,CAAC;IAC/B,IAAMC,UAAU,GAAGX,MAAM,GACrB,IAAIY,MAAM,CAAC;MACTC,GAAG,EAAEb,MAAM,CAACa,GAAG;MACfC,SAAS,EAAEd,MAAM,CAACc,SAAS;MAC3BC,IAAI,EAAEf,MAAM,CAACe,IAAI;MACjBC,IAAI,EAAEhB,MAAM,CAACgB,IAAI;MACjBC,IAAI,EAAEjB,MAAM,CAACiB,IAAI;MACjBC,IAAI,EAAElB,MAAM,CAACkB;KACd,CAAC,GACFC,SAAS;IAEb,OAAO;MACLC,GAAG,EAAEhB,KAAK,CAACgB,GAAG;MACdC,QAAQ,EAAEjB,KAAK,CAACiB,QAAQ;MACxBC,UAAU,EAAElB,KAAK,CAACkB,UAAU;MAC5BnB,aAAa,EAAbA,aAAa;MACbH,MAAM,EAAEW,UAAU;MAClBY,QAAQ,EAAEhB,QAAQ,GAAGH,KAAK,CAACoB,cAAc,GAAGpB,KAAK,CAACmB,QAAQ;MAC1DrB,aAAa,EAAE,SAAAA,cAACuB,KAAU;QACxB,IAAIvB,cAAa,EAAE;UACjBA,cAAa,CAACuB,KAAK,CAAC;;;KAGzB;GACF,EAAE,CACDrB,KAAK,CAACgB,GAAG,EACThB,KAAK,CAACiB,QAAQ,EACdjB,KAAK,CAACkB,UAAU,EAChBlB,KAAK,CAACmB,QAAQ,EACdnB,KAAK,CAACoB,cAAc,EACpBxB,MAAM,EACNG,aAAa,EACbI,QAAQ,EACRL,cAAa,CACd,CAAC;EAEF,IAAAwB,QAAA,GAAgCC,OAAO,CAAClB,UAAU,CAAC;IAA3CmB,IAAI,GAAAF,QAAA,CAAJE,IAAI;IAAEC,aAAa,GAAAH,QAAA,CAAbG,aAAa;EAE3BjC,KAAK,CAACkC,mBAAmB,CACvB/B,GAAG,EACH;IACE,SAASgC,QAAQA,CACfC,SAAgC,EAChCC,SAAiB,EACjBC,OACAC;UADAD;QAAAA,QAAa,IAAI;;MAAA,IACjBC;QAAAA,eAA8B,IAAI;;MAElC,IAAMC,MAAM,GAAGR,IAAI,oBAAJA,IAAI,CAAES,kBAAkB,CACrCF,YAAY,IAAKhC,aAAwB,CAC1C;MACD,CAACiC,MAAM,IAAI,EAAE,EAAEE,OAAO,CAAC,UAACC,CAAM;QAC5B,IAAIA,CAAC,CAACC,IAAI,KAAKR,SAAS,EAAE;UACxBS,OAAO,CAACC,IAAI,iDACoCV,SAAS,cAASO,CAAC,CAACC,IAAM,CACzE;;QAEH,IAAID,CAAC,CAACI,IAAI,KAAKV,SAAS,EAAE;UACxB,QAAQD,SAAS;YACf,KAAKY,qBAAqB,CAACC,OAAO;cAChCN,CAAC,CAACO,IAAI,EAAE;cACR;YACF,KAAKF,qBAAqB,CAACG,MAAM;YACjC,KAAKH,qBAAqB,CAACI,OAAO;cAChCT,CAAC,CAACL,KAAK,GAAGA,KAAK;cACf;;;OAGP,CAAC;;IAGJ,OAAO;MACLe,UAAU,WAAAA,WAACN,IAAY,EAAET,KAAc,EAAEC,YAAqB;QAC5DJ,QAAQ,CAACa,qBAAqB,CAACI,OAAO,EAAEL,IAAI,EAAET,KAAK,EAAEC,YAAY,CAAC;OACnE;MACDe,SAAS,WAAAA,UAACP,IAAY,EAAET,KAAa,EAAEC,YAAqB;QAC1DJ,QAAQ,CAACa,qBAAqB,CAACG,MAAM,EAAEJ,IAAI,EAAET,KAAK,EAAEC,YAAY,CAAC;OAClE;MACDW,IAAI,WAAAA,KAACH,IAAY,EAAER,YAAqB;QACtCJ,QAAQ,CAACa,qBAAqB,CAACC,OAAO,EAAEF,IAAI,EAAE,IAAI,EAAER,YAAY,CAAC;OAClE;MACDgB,IAAI,WAAAA,KAACC,aAAqB;QACxBxB,IAAI,YAAJA,IAAI,CAAEuB,IAAI,CAACC,aAAa,CAAC;OAC1B;MACDC,KAAK,WAAAA,MAACD,aAAqB;QACzBxB,IAAI,YAAJA,IAAI,CAAEyB,KAAK,CAACD,aAAa,CAAC;;KAE7B;GACF,EACD,CAACxB,IAAI,CAAC,CACP;;EAGD,IAAM0B,SAAS,GAAG1D,KAAK,CAACc,OAAO,CAC7B;IAAA,OACEH,QAAQ,GACJ,CACEH,KAAK,CAACgB,GAAG,EACThB,KAAK,CAACiB,QAAQ,EACdjB,KAAK,CAACkB,UAAU,EAChBlB,KAAK,CAACmB,QAAQ,EACdnB,KAAK,CAACoB,cAAc,EACpB+B,IAAI,CAACC,SAAS,CAACxD,MAAM,CAAC,EACtBG,aAAa,EACbsD,IAAI,CAACC,GAAG,EAAE,CACX,CAACC,IAAI,CAAC,GAAG,CAAC,GACXxC,SAAS;KACf,CACEZ,QAAQ,EACRH,KAAK,CAACgB,GAAG,EACThB,KAAK,CAACiB,QAAQ,EACdjB,KAAK,CAACkB,UAAU,EAChBlB,KAAK,CAACmB,QAAQ,EACdnB,KAAK,CAACoB,cAAc,EACpBxB,MAAM,EACNG,aAAa,CACd,CACF;EAED,OAAOP,oBAACiC,aAAa;IAAC5B,SAAS,EAAEA,SAAS;IAAE2D,GAAG,EAAEN;IAAa;AAChE,CAAC,CACF;IAEYO,kBAAkB,GAA0C;EACvElB,IAAI,EAAE,MAAM;EACZmB,WAAW,EAAE,MAAM;EACnBC,UAAU,EAAE,YAAY;EACxBC,UAAU,EAAE,mBAAmB;EAC/BC,WAAW,EAAE,0BAA0B;EAEvC7D,KAAK,EAAE;IACLgB,GAAG,EAAE;MACHoB,IAAI,EAAE,QAAQ;MACd0B,YAAY,EAAE,8CAA8C;MAC5DJ,WAAW,EAAE,YAAY;MACzBG,WAAW,EAAE;KACd;IACD9D,aAAa,EAAE;MACbqC,IAAI,EAAE,QAAQ;MACdsB,WAAW,EAAE,gBAAgB;MAC7BG,WAAW,EAAE,2CAA2C;MACxDE,QAAQ,EAAE;KACX;IACD5C,QAAQ,EAAE;MACRiB,IAAI,EAAE,SAAS;MACfsB,WAAW,EAAE,UAAU;MACvBG,WAAW,EAAE,sCAAsC;MACnDC,YAAY,EAAE,IAAI;MAClBC,QAAQ,EAAE;KACX;IACD3C,cAAc,EAAE;MACdgB,IAAI,EAAE,SAAS;MACfsB,WAAW,EAAE,iBAAiB;MAC9BG,WAAW,EAAE,wDAAwD;MACrEC,YAAY,EAAE,KAAK;MACnBC,QAAQ,EAAE;KACX;IACD9C,QAAQ,EAAE;MACRmB,IAAI,EAAE,QAAQ;MACdsB,WAAW,EAAE,UAAU;MACvBG,WAAW,EAAE,yCAAyC;MACtDE,QAAQ,EAAE;KACX;IACDnE,MAAM,EAAE;MACNwC,IAAI,EAAE,QAAQ;MACdsB,WAAW,EAAE,QAAQ;MACrBG,WAAW,EACT,gFAAgF;MAClFG,QAAQ,EAAE,SAAAA,SAACC,IAAS;QAAA,OAClBA,IAAI,GAAMA,IAAI,CAACxD,GAAG,WAAMwD,IAAI,CAACvD,SAAS,GAAKK,SAAS;;MACtDgD,QAAQ,EAAE,IAAI;MACdG,MAAM,EAAE;QACNzD,GAAG,EAAE;UACH2B,IAAI,EAAE,QAAQ;UACdsB,WAAW,EAAE,KAAK;UAClBS,OAAO,EAAE,CACP,OAAO,EACP,SAAS,EACT,MAAM,EACN,UAAU,EACV,WAAW,EACX,MAAM,EACN,WAAW,CACZ;UACDN,WAAW,EAAE;SACd;QACDnD,SAAS,EAAE;UACT0B,IAAI,EAAE,QAAQ;UACdsB,WAAW,EAAE,WAAW;UACxBS,OAAO,EAAE,CACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,UAAU,EACV,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,cAAc,EACd,aAAa,CACd;UACDN,WAAW,EAAE;SACd;QACDlD,IAAI,EAAE;UAAEyB,IAAI,EAAE,QAAQ;UAAEsB,WAAW,EAAE,OAAO;UAAEK,QAAQ,EAAE;SAAM;QAC9DnD,IAAI,EAAE;UAAEwB,IAAI,EAAE,QAAQ;UAAEsB,WAAW,EAAE,OAAO;UAAEK,QAAQ,EAAE;SAAM;QAC9DlD,IAAI,EAAE;UAAEuB,IAAI,EAAE,QAAQ;UAAEsB,WAAW,EAAE,OAAO;UAAEK,QAAQ,EAAE;SAAM;QAC9DjD,IAAI,EAAE;UAAEsB,IAAI,EAAE,QAAQ;UAAEsB,WAAW,EAAE,OAAO;UAAEK,QAAQ,EAAE;;;KAE3D;IACD7C,UAAU,EAAE;MACVkB,IAAI,EAAE,QAAQ;MACdsB,WAAW,EAAE,YAAY;MACzBG,WAAW,EAAE,yDAAyD;MACtEE,QAAQ,EAAE;KACX;IACDjE,aAAa,EAAE;MACbsC,IAAI,EAAE,cAAc;MACpBsB,WAAW,EAAE,iBAAiB;MAC9BG,WAAW,EAAE,6CAA6C;MAC1DE,QAAQ,EAAE,IAAI;MACdK,QAAQ,EAAE,CACR;QACE7B,IAAI,EAAE,OAAO;QACbH,IAAI,EAAE;OACP;;GAGN;EACDiC,aAAa,EAAE;IACbC,SAAS,EAAE,MAAM;IACjBC,KAAK,EAAE;GACR;EACDC,UAAU,EAAE;IACV3B,UAAU,EAAE;MACVgB,WAAW,EAAE,oBAAoB;MACjCO,QAAQ,EAAE,CACR;QACE7B,IAAI,EAAE,MAAM;QACZH,IAAI,EAAE,QAAQ;QACdsB,WAAW,EAAE;OACd,EACD;QACEnB,IAAI,EAAE,OAAO;QACbH,IAAI,EAAE,SAAS;QACfsB,WAAW,EAAE;OACd,EACD;QACEnB,IAAI,EAAE,cAAc;QACpBH,IAAI,EAAE,QAAQ;QACdsB,WAAW,EAAE;OACd;KAEJ;IACDZ,SAAS,EAAE;MACTe,WAAW,EAAE,oBAAoB;MACjCO,QAAQ,EAAE,CACR;QACE7B,IAAI,EAAE,MAAM;QACZH,IAAI,EAAE,QAAQ;QACdsB,WAAW,EAAE;OACd,EACD;QACEnB,IAAI,EAAE,OAAO;QACbH,IAAI,EAAE,QAAQ;QACdsB,WAAW,EAAE;OACd,EACD;QACEnB,IAAI,EAAE,cAAc;QACpBH,IAAI,EAAE,QAAQ;QACdsB,WAAW,EAAE;OACd;KAEJ;IACDhB,IAAI,EAAE;MACJmB,WAAW,EAAE,qBAAqB;MAClCO,QAAQ,EAAE,CACR;QACE7B,IAAI,EAAE,MAAM;QACZH,IAAI,EAAE,QAAQ;QACdsB,WAAW,EAAE;OACd,EACD;QACEnB,IAAI,EAAE,cAAc;QACpBH,IAAI,EAAE,QAAQ;QACdsB,WAAW,EAAE;OACd;KAEJ;IACDX,IAAI,EAAE;MACJc,WAAW,EAAE,oBAAoB;MACjCO,QAAQ,EAAE,CACR;QACE7B,IAAI,EAAE,eAAe;QACrBH,IAAI,EAAE,QAAQ;QACdsB,WAAW,EAAE;OACd;KAEJ;IACDT,KAAK,EAAE;MACLY,WAAW,EAAE,qBAAqB;MAClCO,QAAQ,EAAE,CACR;QACE7B,IAAI,EAAE,eAAe;QACrBH,IAAI,EAAE,QAAQ;QACdsB,WAAW,EAAE;OACd;;;;SAMOe,mBAAmBA,CAACC,MAEnC;EACC,IAAIA,MAAM,EAAE;IACVA,MAAM,CAACC,iBAAiB,CAACpF,UAAU,EAAEkE,kBAAkB,CAAC;GACzD,MAAM;IACLkB,iBAAiB,CAACpF,UAAU,EAAEkE,kBAAkB,CAAC;;AAErD;;;;;"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@plasmicpkgs/rive",
+  "version": "0.0.2",
+  "description": "Plasmic registration call for rive animation",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/plasmic-rive.esm.js",
+  "files": [
+    "dist"
+  ],
+  "size-limit": [
+    {
+      "path": "dist/plasmic-rive.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/plasmic-rive.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "scripts": {
+    "build": "tsdx build",
+    "start": "tsdx watch",
+    "test": "TEST_CWD=`pwd` yarn --cwd=../.. test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepublishOnly": "npm run build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "devDependencies": {
+    "@plasmicapp/host": "1.0.216",
+    "@size-limit/preset-small-lib": "^4.11.0",
+    "@types/node": "^14.0.26",
+    "@types/react": "^18.2.33",
+    "size-limit": "^4.11.0",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.2.0"
+  },
+  "dependencies": {
+    "@rive-app/react-canvas": "^4.18.8"
+  },
+  "peerDependencies": {
+    "@plasmicapp/host": ">=1.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "1cfe88423f5a28a0e7755ea81dea25a587c189bd"
+}