diff --git a/.rive_head b/.rive_head
index c9622a79..1fe2d7c0 100644
--- a/.rive_head
+++ b/.rive_head
@@ -1 +1 @@
-f21ebc98ccb32677eae36f23f89391f93767ca51
+237f41f2ab8a33d1bda0eea9b0d00f7ca3f5bf66
diff --git a/js/examples/_frameworks/out_of_band_example/index.html b/js/examples/_frameworks/out_of_band_example/index.html
index f0690deb..f2e98333 100644
--- a/js/examples/_frameworks/out_of_band_example/index.html
+++ b/js/examples/_frameworks/out_of_band_example/index.html
@@ -1,6 +1,6 @@
-
+
diff --git a/js/examples/_frameworks/out_of_band_example/index.js b/js/examples/_frameworks/out_of_band_example/index.ts
similarity index 82%
rename from js/examples/_frameworks/out_of_band_example/index.js
rename to js/examples/_frameworks/out_of_band_example/index.ts
index 8d193c53..a406da5d 100644
--- a/js/examples/_frameworks/out_of_band_example/index.js
+++ b/js/examples/_frameworks/out_of_band_example/index.ts
@@ -5,6 +5,9 @@ import {
Alignment,
Layout,
EventType,
+ FileAsset,
+ ImageAsset,
+ FontAsset,
decodeImage,
decodeFont,
} from "@rive-app/canvas";
@@ -14,6 +17,9 @@ import {
// Alignment,
// Layout,
// EventType,
+// FileAsset,
+// ImageAsset,
+// FontAsset,
// decodeImage,
// decodeFont, } from "@rive-app/webgl";
import SampleFile from "./asset_load_check.riv";
@@ -26,7 +32,7 @@ async function loadFile() {
}
-const randomImageAsset = (asset) => {
+const randomImageAsset = (asset: ImageAsset) => {
fetch("https://picsum.photos/1000/1500").then(
async (res) => {
const image = await decodeImage(new Uint8Array(await res.arrayBuffer()));
@@ -35,7 +41,7 @@ const randomImageAsset = (asset) => {
}
);
};
-const randomFontAsset = (asset) => {
+const randomFontAsset = (asset: FontAsset) => {
const urls = [
"https://cdn.rive.app/runtime/flutter/IndieFlower-Regular.ttf",
@@ -56,16 +62,16 @@ const randomFontAsset = (asset) => {
async function main() {
const bytes = await loadFile();
- const body = document.querySelector("body");
- const el = document.createElement("canvas");
+ const body = document.querySelector("body") as HTMLBodyElement;
+ const el = document.createElement("canvas") as HTMLCanvasElement;
el.onclick = () => {
randomImageAsset(imageAsset);
randomFontAsset(fontAsset);
};
el.id = `canvas`;
- el.width = "1600";
- el.height = "800";
+ el.width = 1600;
+ el.height = 800;
body.appendChild(el);
let imageAsset, fontAsset;
@@ -78,8 +84,7 @@ async function main() {
fit: Fit.Contain,
alignment: Alignment.Center,
}),
- loadCDNAssets: true,
- assetLoader: (asset, bytes) => {
+ assetLoader: (asset: FileAsset, bytes: Uint8Array) => {
console.log("Tell our asset importer if we are going to load the asset contents", {
name: asset.name,
fileExtension: asset.fileExtension,
@@ -95,11 +100,11 @@ async function main() {
if (asset.isImage) {
imageAsset = asset;
- randomImageAsset(asset);
+ randomImageAsset(asset as ImageAsset);
return true;
} else if (asset.isFont) {
fontAsset = asset;
- randomFontAsset(asset);
+ randomFontAsset(asset as FontAsset);
return true;
}
return false;
diff --git a/js/src/rive.ts b/js/src/rive.ts
index 813285f6..abe8be88 100644
--- a/js/src/rive.ts
+++ b/js/src/rive.ts
@@ -2,6 +2,12 @@ import * as rc from "./rive_advanced.mjs";
import * as packageData from "package.json";
import { registerTouchInteractions, sanitizeUrl, BLANK_URL } from "./utils";
+// Note: Re-exporting a few types from rive_advanced.mjs to expose for high-level
+// API usage without re-defining their type definition here. May want to revisit
+// and see if we want to expose both types from rive.ts and rive_advanced.mjs in
+// the future
+export type { FileAsset, FontAsset, ImageAsset } from './rive_advanced.mjs';
+
/**
* Generic type for a parameterless void callback
*/
diff --git a/js/src/rive_advanced.mjs.d.ts b/js/src/rive_advanced.mjs.d.ts
index 0aa534fe..3f597932 100644
--- a/js/src/rive_advanced.mjs.d.ts
+++ b/js/src/rive_advanced.mjs.d.ts
@@ -875,6 +875,10 @@ export declare class Vec2D {
delete(): void;
}
+/**
+ * Rive class representing a FileAsset with relevant metadata fields to describe
+ * an asset associated wtih the Rive File
+ */
export declare class FileAsset {
name: string;
fileExtension: string;
@@ -883,6 +887,22 @@ export declare class FileAsset {
cdnUuid: string;
}
+/**
+ * Rive class extending the FileAsset that exposes a `setRenderImage()` API with a
+ * decoded Image (via the `decodeImage()` API) to set a new Image on the Rive FileAsset
+ */
+export declare class ImageAsset extends FileAsset {
+ setRenderImage(image: Image): void;
+}
+
+/**
+ * Rive class extending the FileAsset that exposes a `setFont()` API with a
+ * decoded Font (via the `decodeFont()` API) to set a new Font on the Rive FileAsset
+ */
+export declare class FontAsset extends FileAsset {
+ setFont(font: Font): void;
+}
+
export declare class FileAssetLoader {}
export declare class CustomFileAssetLoader extends FileAssetLoader {