@openremote/or-rive-renderer 1.14.0-snapshot

package/README.md

@@ -0,0 +1,21 @@
+# @openremote/or-rive-renderer
+[![NPM Version][npm-image]][npm-url]
+
+Package containing a Web Component, built with [Lit](https://lit.dev), for displaying `.riv` files from the [Rive](https://rive.app) ecosystem.
+
+## Install
+```bash
+npm i @openremote/or-rive-renderer
+yarn add @openremote/or-rive-renderer
+```
+
+## Example usage
+```html
+<or-rive-renderer url="animations/my-animation.riv"></or-rive-renderer>
+```
+
+## License
+[GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)
+
+[npm-image]: https://img.shields.io/npm/v/@openremote/or-rive-renderer.svg
+[npm-url]: https://npmjs.org/package/@openremote/or-rive-renderer

package/custom-elements-jsx.d.ts

@@ -0,0 +1,229 @@
+import type { OrRiveRenderer } from "./lib/index.d.ts";
+
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
+ *
+ * declare module "my-library" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'test-', ''> {}
+ *   }
+ * }
+ * ```
+ *
+ * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
+ */
+export type ScopedElements<
+  Prefix extends string = "",
+  Suffix extends string = ""
+> = {
+  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
+};
+
+type BaseProps<T extends HTMLElement> = {
+  /** Content added between the opening and closing tags of the element */
+  children?: any;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  className?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** For <label> and <output>, lets you associate the label with some control. */
+  htmlFor?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Keys tell React which array item each component corresponds to */
+  key?: string | number;
+  /** Specifies the language of the element. */
+  lang?: string;
+  /** Defines the element's semantic role for accessibility APIs. */
+  role?: string;
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: T | ((e: T) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: Record<string, string | number>;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+  /** The popover global attribute is used to designate an element as a popover element. */
+  popover?: "auto" | "hint" | "manual";
+  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
+  popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
+  /** Specifies the action to be performed on a popover element being controlled by a control element. */
+  popovertargetaction?: "show" | "hide" | "toggle";
+};
+
+type BaseEvents = {};
+
+export type OrRiveRendererProps = {
+  /** 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?: OrRiveRenderer["url"];
+  /** 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?: OrRiveRenderer["artboard"];
+  /** 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?: OrRiveRenderer["stateMachines"];
+};
+
+export type OrRiveRendererSolidJsProps = {
+  /** 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. */
+  "prop:url"?: OrRiveRenderer["url"];
+  /** 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 */
+  "prop:artboard"?: OrRiveRenderer["artboard"];
+  /** 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. */
+  "prop:stateMachines"?: OrRiveRenderer["stateMachines"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
+export type CustomElements = {
+  /**
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `url`: 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.
+   * - `artboard`: 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
+   * - `stateMachines`: 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.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `setValue(name: string, value?: any, type: string = typeof value) => Promise<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
+   */
+  "or-rive-renderer": Partial<
+    OrRiveRendererProps & BaseProps<OrRiveRenderer> & BaseEvents
+  >;
+};
+
+export type CustomElementsSolidJs = {
+  /**
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `url`: 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.
+   * - `artboard`: 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
+   * - `stateMachines`: 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.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `setValue(name: string, value?: any, type: string = typeof value) => Promise<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
+   */
+  "or-rive-renderer": Partial<
+    OrRiveRendererProps &
+      OrRiveRendererSolidJsProps &
+      BaseProps<OrRiveRenderer> &
+      BaseEvents
+  >;
+};
+
+export type CustomCssProperties = {};
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "preact" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "@builder.io/qwik" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "@stencil/core" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "hono/jsx" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "react-native" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "solid-js" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElementsSolidJs {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}

package/custom-elements.json

@@ -0,0 +1,179 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "OrRiveRenderer",
+          "members": [
+            {
+              "kind": "field",
+              "name": "url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "A string representing the URL or path to the public asset .riv file.\nFor more details, refer to Rive Parameters on how to properly use this property.",
+              "attribute": "url"
+            },
+            {
+              "kind": "field",
+              "name": "artboard",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "The string representing the artboard you want to display.\nWhen not supplied, the default artboard from the .riv file is selected.\nDocs: https://rive.app/docs/runtimes/web/artboards",
+              "attribute": "artboard"
+            },
+            {
+              "kind": "field",
+              "name": "stateMachines",
+              "type": {
+                "text": "string[] | undefined"
+              },
+              "privacy": "public",
+              "description": "A list of strings (`[\"My State Machine\"]`) you wish to display.\nLook up the Rive documentation for more info: https://rive.app/docs/runtimes/web/state-machines.\nBy default, the state machine will autoplay.",
+              "attribute": "stateMachines"
+            },
+            {
+              "kind": "field",
+              "name": "_canvas",
+              "type": {
+                "text": "HTMLCanvasElement | undefined"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "_rive",
+              "type": {
+                "text": "Rive | undefined"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "_resizeObserver",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "_valueQueue",
+              "type": {
+                "text": "(() => void)[]"
+              },
+              "privacy": "protected",
+              "default": "[]"
+            },
+            {
+              "kind": "method",
+              "name": "setValue",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "Name of the state property inside the .riv animation"
+                },
+                {
+                  "name": "value",
+                  "optional": true,
+                  "type": {
+                    "text": "any"
+                  },
+                  "description": "Value to set. It will auto-detect the object {@link type}.\n     * "
+                },
+                {
+                  "name": "type",
+                  "default": "typeof value",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "(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."
+                }
+              ],
+              "description": "Public function for updating data within the animation using \"View Models\".\nFor example, if the animation has a state property named \"myValue\", you can use this function to update the value to \"100\".\nFull documentation can be found here: https://rive.app/docs/runtimes/web/data-binding",
+              "type": {
+                "text": "setValue(name: string, value?: any, type: string = typeof value) => Promise<void>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_onResize",
+              "privacy": "protected",
+              "description": "Callback function when this web component changes in size.\nIn this case, it is used for calling a Rive JS function to calibrate using the new canvas size."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "A string representing the URL or path to the public asset .riv file.\nFor more details, refer to Rive Parameters on how to properly use this property.",
+              "fieldName": "url"
+            },
+            {
+              "name": "artboard",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The string representing the artboard you want to display.\nWhen not supplied, the default artboard from the .riv file is selected.\nDocs: https://rive.app/docs/runtimes/web/artboards",
+              "fieldName": "artboard"
+            },
+            {
+              "name": "stateMachines",
+              "type": {
+                "text": "string[] | undefined"
+              },
+              "description": "A list of strings (`[\"My State Machine\"]`) you wish to display.\nLook up the Rive documentation for more info: https://rive.app/docs/runtimes/web/state-machines.\nBy default, the state machine will autoplay.",
+              "fieldName": "stateMachines"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "or-rive-renderer",
+          "customElement": true,
+          "modulePath": "src/index.ts",
+          "definitionPath": "src/index.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "OrRiveRenderer",
+          "declaration": {
+            "name": "OrRiveRenderer",
+            "module": "src/index.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "or-rive-renderer",
+          "declaration": {
+            "name": "OrRiveRenderer",
+            "module": "src/index.ts"
+          }
+        }
+      ]
+    }
+  ]
+}