Add types for ImageAsset and FontAsset

Community contribution PR: #337 Building on top of this contribution to expose the FontAsset types to the high-level API, which doesn't come by default when including it in `rive_advanced.mjs.d.ts` because the types exposed on high-level currently have to be set in `rive.ts` (otherwise, only the low-level API runtimes can access the types from `rive_advanced.mjs.d.ts`). Switched the OOB assets example to use TS to test this Diffs= 237f41f2a Add types for ImageAsset and FontAsset (#6213) Co-authored-by: Zachary Plata <[email protected]> Co-authored-by: cdelguercio <[email protected]>
rive-app · Nov 7, 2023 · 9e54b20 · 9e54b20
1 parent bddcd7b
commit 9e54b20
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 12 deletions.
diff --git 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
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <script src="./index.js"></script>
+    <script src="./index.ts"></script>
   </body>
 </html>
diff --git a/.../_frameworks/out_of_band_example/index.js → .../_frameworks/out_of_band_example/index.ts b/.../_frameworks/out_of_band_example/index.js → .../_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
@@ -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
@@ -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 {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		f21ebc98ccb32677eae36f23f89391f93767ca51
		237f41f2ab8a33d1bda0eea9b0d00f7ca3f5bf66