@openremote/or-rive-renderer 1.24.0 → 1.24.1

package/custom-elements-jsx.d.ts

@@ -1,4 +1,3 @@
-
 import type { OrRiveRenderer } from "./lib/index.d.ts";
 
 /**
@@ -27,7 +26,6 @@ export type ScopedElements<
 };
 
 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) */
@@ -50,6 +48,8 @@ type BaseProps<T extends HTMLElement> = {
   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. */
@@ -70,105 +70,153 @@ type BaseProps<T extends HTMLElement> = {
   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 = {
-
-
 };
 
-
+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'];
+  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'];
+  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'];
-
+  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"];
 
-  export type CustomElements = {
+  /** 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 & BaseProps<OrRiveRenderer> & BaseEvents>;
-  }
+   *
+   *
+   * ## 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 = {
+export type CustomCssProperties = {};
 
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
 }
 
-
-declare module 'react' {
+declare module "preact" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'preact' {
+declare module "@builder.io/qwik" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module '@builder.io/qwik' {
+declare module "@stencil/core" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module '@stencil/core' {
+declare module "hono/jsx" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'hono/jsx' {
+declare module "react-native" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'react-native' {
+declare module "solid-js" {
   namespace JSX {
-    interface IntrinsicElements extends CustomElements {}
+    interface IntrinsicElements extends CustomElementsSolidJs {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openremote/or-rive-renderer",
-  "version": "1.24.0",
+  "version": "1.24.1",
   "description": "A web component for displaying Rive animations using WebGL",
   "customElements": "custom-elements.json",
   "main": "dist/umd/index.bundle.js",
@@ -25,6 +25,9 @@
     "lit": "^3.3.1",
     "lodash.debounce": "^4.0.8"
   },
+  "devDependencies": {
+    "@openremote/util": "1.24.1"
+  },
   "publishConfig": {
     "access": "public"
   }