@openremote/or-rive-renderer 1.22.0-snapshot.20260407154359

package/lib/index.d.ts

@@ -0,0 +1,46 @@
+import { LitElement, PropertyValues } from "lit";
+import { Rive } from "@rive-app/webgl2";
+export declare class OrRiveRenderer extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    /**
+     * A string representing the URL or path to the public asset .riv file.
+     * For more details, refer to Rive Parameters on how to properly use this property.
+     */
+    url?: string;
+    /**
+     * The string representing the artboard you want to display.
+     * When not supplied, the default artboard from the .riv file is selected.
+     * Docs: https://rive.app/docs/runtimes/web/artboards
+     */
+    artboard?: string;
+    /**
+     * A list of strings (`["My State Machine"]`) you wish to display.
+     * Look up the Rive documentation for more info: https://rive.app/docs/runtimes/web/state-machines.
+     * By default, the state machine will autoplay.
+     */
+    stateMachines?: string[];
+    protected _canvas?: HTMLCanvasElement;
+    protected _rive?: Rive;
+    protected _resizeObserver?: ResizeObserver;
+    protected _valueQueue: (() => void)[];
+    /**
+     * Public function for updating data within the animation using "View Models".
+     * For example, if the animation has a state property named "myValue", you can use this function to update the value to "100".
+     * Full documentation can be found here: https://rive.app/docs/runtimes/web/data-binding
+     * @param name - Name of the state property inside the .riv animation
+     * @param value - Value to set. It will auto-detect the object {@link type}.
+     * @param type - (optional) the value type to set. Currently, the supported types are: string, boolean, number, color and enum. Everything else will be converted to a trigger.
+     */
+    setValue(name: string, value?: any, type?: string): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProps: PropertyValues): void;
+    render(): import("lit").TemplateResult<1>;
+    /**
+     * Callback function when this web component changes in size.
+     * In this case, it is used for calling a Rive JS function to calibrate using the new canvas size.
+     * @protected
+     */
+    protected _onResize: import("lodash").DebouncedFunc<(entries: ResizeObserverEntry[]) => void>;
+}
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAY,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAC,IAAI,EAAmC,MAAM,kBAAkB,CAAC;AASxE,qBACa,cAAe,SAAQ,UAAU;IAE1C,MAAM,KAAK,MAAM,8BAmBhB;IAED;;;OAGG;IAEI,GAAG,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IAEI,QAAQ,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IAEI,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAGhC,SAAS,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAEtC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;IACvB,SAAS,CAAC,eAAe,CAAC,EAAE,cAAc,CAAC;IAC3C,SAAS,CAAC,WAAW,EAAE,CAAC,MAAM,IAAI,CAAC,EAAE,CAAM;IAE3C;;;;;;;OAOG;IACU,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,IAAI,GAAE,MAAqB,GAAG,OAAO,CAAC,IAAI,CAAC;IA2B5F,iBAAiB;IAMjB,oBAAoB;IAOpB,OAAO,CAAC,YAAY,EAAE,cAAc;IAyBpC,MAAM;IAMN;;;;OAIG;IACH,SAAS,CAAC,SAAS,2CAAsB,mBAAmB,EAAE,WAMtD;CAEX"}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@openremote/or-rive-renderer",
+  "version": "1.22.0-snapshot.20260407154359",
+  "description": "A web component for displaying Rive animations using WebGL",
+  "customElements": "custom-elements.json",
+  "main": "dist/umd/index.bundle.js",
+  "module": "lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./*": "./lib/*.js"
+  },
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "clean": "npx tsc -b --clean && npx shx rm -rf dist lib",
+    "analyze": "npx cem analyze --config ../custom-elements-manifest.config.mjs",
+    "build": "npx tsc -b",
+    "test": "npx tsc -b && npx playwright test",
+    "prepack": "npx rspack"
+  },
+  "author": "OpenRemote",
+  "repository": "https://github.com/openremote/openremote",
+  "license": "AGPL-3.0-or-later",
+  "dependencies": {
+    "@rive-app/webgl2": "^2.35.4",
+    "lit": "^3.3.1",
+    "lodash.debounce": "^4.0.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/stories/or-rive-renderer.stories.ts

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import {setCustomElementsManifest, type Meta, type StoryObj} from "@storybook/web-components";
+import {getORStorybookHelpers} from "../../storybook-utils.js";
+import customElements from "../custom-elements.json" with {type: "json"};
+import packageJson from "../package.json" with {type: "json"};
+import "../src/index";
+import { html } from "lit";
+
+const tagName = "or-rive-renderer";
+type Story = StoryObj;
+setCustomElementsManifest(customElements);
+
+const { events, args, argTypes, template } = getORStorybookHelpers(tagName);
+
+const meta: Meta = {
+    title: "Playground/or-rive-renderer",
+    component: tagName,
+    args: args,
+    argTypes: argTypes,
+    render: storyArgs => template(storyArgs),
+    excludeStories: /^[a-z].*/,
+    parameters: {
+        actions: {
+            handles: events
+        },
+        docs: {
+            subtitle: `<${tagName}>`,
+            description: "A Web Component for displaying `.riv` files from the [Rive](https://rive.app) ecosystem.",
+            story: {
+                height: "370px"
+            }
+        }
+    }
+};
+
+export const Primary: Story = {
+    render: args => html`
+        <style>or-rive-renderer { height: 256px; }</style>
+        ${template(args)}
+    `,
+    args: {
+        url: "https://cdn.rive.app/animations/vehicles.riv"
+    }
+};
+
+export const examples: Story[] = [];
+
+export { customElements, packageJson };
+
+export default meta;