@rive-app/webgl 2.35.3 → 2.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/webgl",
-  "version": "2.35.3",
+  "version": "2.36.0",
   "description": "Rive's webgl based web api.",
   "main": "rive.js",
   "homepage": "https://rive.app",

package/rive.d.ts

@@ -73,6 +73,11 @@ export declare class RuntimeLoader {
     private static rive;
     private static wasmURL;
     private constructor();
+    /**
+     * When true, performance.mark / performance.measure entries are emitted for
+     * WASM initialization.
+     */
+    static enablePerfMarks: boolean;
     private static loadRuntime;
     static getInstance(callback: RuntimeCallback): void;
     static awaitInstance(): Promise<rc.RiveCanvas>;
@@ -270,6 +275,13 @@ export interface RiveParameters {
      * Enum with drawing options for optimizations
      */
     drawingOptions?: DrawOptimizationOptions;
+    /**
+     * Emit performance.mark / performance.measure entries for load lifecycle
+     * events and the first 3 render frames. Useful for profiling Rive's
+     * contribution to load and render time in browser devtools.
+     * False by default.
+     */
+    enablePerfMarks?: boolean;
     onLoad?: EventCallback;
     onLoadError?: EventCallback;
     onPlay?: EventCallback;
@@ -334,6 +346,11 @@ export interface RiveFileParameters {
     enableRiveAssetCDN?: boolean;
     onLoad?: EventCallback;
     onLoadError?: EventCallback;
+    /**
+     * Emit performance.mark / performance.measure entries for load lifecycle
+     * events. False by default.
+     */
+    enablePerfMarks?: boolean;
 }
 export declare class RiveFile implements rc.FinalizableTarget {
     private static readonly missingErrorMessage;
@@ -344,6 +361,7 @@ export declare class RiveFile implements rc.FinalizableTarget {
     private file;
     private assetLoader;
     private enableRiveAssetCDN;
+    private enablePerfMarks;
     private eventManager;
     private referenceCount;
     private destroyed;
@@ -353,6 +371,8 @@ export declare class RiveFile implements rc.FinalizableTarget {
     private releaseFile;
     private releaseBindableArtboards;
     private initData;
+    private loadRiveFileBytes;
+    private loadRuntime;
     init(): Promise<void>;
     private fireLoadError;
     /**
@@ -436,6 +456,7 @@ export declare class Rive {
     private _viewModelInstance;
     private _dataEnums;
     private drawOptimization;
+    private enablePerfMarks;
     durations: number[];
     frameTimes: number[];
     frameCount: number;
@@ -792,6 +813,21 @@ export declare class Rive {
     getBindableArtboard(name: string): BindableArtboard | null;
     getDefaultBindableArtboard(): BindableArtboard | null;
 }
+export declare enum DataType {
+    none = "none",
+    string = "string",
+    number = "number",
+    boolean = "boolean",
+    color = "color",
+    list = "list",
+    enumType = "enumType",
+    trigger = "trigger",
+    viewModel = "viewModel",
+    integer = "integer",
+    listIndex = "listIndex",
+    image = "image",
+    artboard = "artboard"
+}
 export declare class ViewModel {
     private _viewModel;
     constructor(viewModel: rc.ViewModel);
@@ -800,7 +836,7 @@ export declare class ViewModel {
     instanceByIndex(index: number): ViewModelInstance | null;
     instanceByName(name: string): ViewModelInstance | null;
     defaultInstance(): ViewModelInstance | null;
-    instance(): ViewModelInstance | null;
+    instance(): ViewModelInstance;
     get properties(): rc.ViewModelProperty[];
     get instanceNames(): string[];
 }
@@ -903,6 +939,10 @@ export declare class ViewModelInstance {
     incrementReferenceCount(): void;
     decrementReferenceCount(): void;
     get properties(): rc.ViewModelProperty[];
+    /**
+     * Get the name of the ViewModel definition this instance was created from.
+     */
+    get viewModelName(): string;
     internalIncrementReferenceCount(): void;
     cleanup(): void;
 }

package/rive.js

@@ -393,7 +393,7 @@ function Ra(a, b) {
     return Qa(c, a, b);
   }));
 }
-var Sa, Ta, Xa = {727842:(a, b, c, d, e) => {
+var Sa, Ta, Xa = {728434:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -456,11 +456,11 @@ var Sa, Ta, Xa = {727842:(a, b, c, d, e) => {
   }
   window.h.Ca += 1;
   return 1;
-}, 730020:() => {
+}, 730612:() => {
   "undefined" !== typeof window.h && (window.h.Ra.map(function(a) {
     document.removeEventListener(a, window.h.unlock, !0);
   }), --window.h.Ca, 0 === window.h.Ca && delete window.h);
-}, 730324:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 730428:() => {
+}, 730916:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 731020:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -468,7 +468,7 @@ var Sa, Ta, Xa = {727842:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 730599:(a, b, c, d, e, f) => {
+}, 731191:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -514,7 +514,7 @@ var Sa, Ta, Xa = {727842:(a, b, c, d, e) => {
   a == window.h.H.Aa && g.W.connect(g.J.destination);
   g.kb = f;
   return window.h.fc(g);
-}, 733476:a => window.h.ra(a).J.sampleRate, 733549:a => {
+}, 734068:a => window.h.ra(a).J.sampleRate, 734141:a => {
   a = window.h.ra(a);
   void 0 !== a.W && (a.W.onaudioprocess = function() {
   }, a.W.disconnect(), a.W = void 0);
@@ -522,13 +522,13 @@ var Sa, Ta, Xa = {727842:(a, b, c, d, e) => {
   a.J.close();
   a.J = void 0;
   a.kb = void 0;
-}, 733949:a => {
+}, 734541:a => {
   window.h.ub(a);
-}, 733999:a => {
+}, 734591:a => {
   a = window.h.ra(a);
   a.J.resume();
   a.state = window.h.ga.qb;
-}, 734138:a => {
+}, 734730:a => {
   a = window.h.ra(a);
   a.J.suspend();
   a.state = window.h.ga.stopped;
@@ -3935,7 +3935,7 @@ moduleRtn = ca;
 /* 2 */
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/webgl","version":"2.35.3","description":"Rive\'s webgl based web api.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)"],"license":"MIT","files":["rive.js","rive.wasm","rive_fallback.wasm","rive.js.map","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/webgl","version":"2.36.0","description":"Rive\'s webgl based web api.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)"],"license":"MIT","files":["rive.js","rive.wasm","rive_fallback.wasm","rive.js.map","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -4750,6 +4750,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   Alignment: () => (/* binding */ Alignment),
 /* harmony export */   DataEnum: () => (/* binding */ DataEnum),
+/* harmony export */   DataType: () => (/* binding */ DataType),
 /* harmony export */   DrawOptimizationOptions: () => (/* binding */ DrawOptimizationOptions),
 /* harmony export */   EventType: () => (/* binding */ EventType),
 /* harmony export */   Fit: () => (/* binding */ Fit),
@@ -4998,12 +4999,18 @@ var RuntimeLoader = /** @class */ (function () {
     }
     // Loads the runtime
     RuntimeLoader.loadRuntime = function () {
+        if (RuntimeLoader.enablePerfMarks)
+            performance.mark('rive:wasm-init:start');
         _rive_advanced_mjs__WEBPACK_IMPORTED_MODULE_0__["default"]({
             // Loads Wasm bundle
             locateFile: function () { return RuntimeLoader.wasmURL; },
         })
             .then(function (rive) {
             var _a;
+            if (RuntimeLoader.enablePerfMarks) {
+                performance.mark('rive:wasm-init:end');
+                performance.measure('rive:wasm-init', 'rive:wasm-init:start', 'rive:wasm-init:end');
+            }
             RuntimeLoader.runtime = rive;
             // Fire all the callbacks
             while (RuntimeLoader.callBackQueue.length > 0) {
@@ -5086,6 +5093,11 @@ var RuntimeLoader = /** @class */ (function () {
     // Path to the Wasm file; default path works for testing only;
     // if embedded wasm is used then this is never used.
     RuntimeLoader.wasmURL = "https://unpkg.com/".concat(package_json__WEBPACK_IMPORTED_MODULE_1__.name, "@").concat(package_json__WEBPACK_IMPORTED_MODULE_1__.version, "/rive.wasm");
+    /**
+     * When true, performance.mark / performance.measure entries are emitted for
+     * WASM initialization.
+     */
+    RuntimeLoader.enablePerfMarks = false;
     return RuntimeLoader;
 }());
 
@@ -6023,6 +6035,8 @@ var RiveFile = /** @class */ (function () {
     function RiveFile(params) {
         // Allow the runtime to automatically load assets hosted in Rive's runtime.
         this.enableRiveAssetCDN = true;
+        // When true, emits performance.mark/measure entries during RiveFile load.
+        this.enablePerfMarks = false;
         this.referenceCount = 0;
         this.destroyed = false;
         this.selfUnref = false;
@@ -6035,6 +6049,9 @@ var RiveFile = /** @class */ (function () {
             typeof params.enableRiveAssetCDN == "boolean"
                 ? params.enableRiveAssetCDN
                 : true;
+        this.enablePerfMarks = !!params.enablePerfMarks;
+        if (this.enablePerfMarks)
+            RuntimeLoader.enablePerfMarks = true;
         // New event management system
         this.eventManager = new EventManager();
         if (params.onLoad)
@@ -6060,7 +6077,7 @@ var RiveFile = /** @class */ (function () {
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
-                        if (!this.src) return [3 /*break*/, 2];
+                        if (!(this.src && !this.buffer)) return [3 /*break*/, 2];
                         _a = this;
                         return [4 /*yield*/, loadRiveFile(this.src)];
                     case 1:
@@ -6075,11 +6092,16 @@ var RiveFile = /** @class */ (function () {
                             loader = loaderWrapper.assetLoader;
                         }
                         // Load the Rive file
+                        if (this.enablePerfMarks)
+                            performance.mark('rive:file-load:start');
                         _b = this;
                         return [4 /*yield*/, this.runtime.load(new Uint8Array(this.buffer), loader, this.enableRiveAssetCDN)];
                     case 3:
-                        // Load the Rive file
                         _b.file = _c.sent();
+                        if (this.enablePerfMarks) {
+                            performance.mark('rive:file-load:end');
+                            performance.measure('rive:file-load', 'rive:file-load:start', 'rive:file-load:end');
+                        }
                         fileFinalizer = new _utils__WEBPACK_IMPORTED_MODULE_3__.FileFinalizer(this.file);
                         _utils__WEBPACK_IMPORTED_MODULE_3__.finalizationRegistry.register(this, fileFinalizer);
                         if (this.destroyed) {
@@ -6100,9 +6122,45 @@ var RiveFile = /** @class */ (function () {
             });
         });
     };
+    RiveFile.prototype.loadRiveFileBytes = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var bufferPromise;
+            return __generator(this, function (_a) {
+                if (this.enablePerfMarks)
+                    performance.mark('rive:fetch-riv:start');
+                bufferPromise = this.src
+                    ? loadRiveFile(this.src)
+                    : Promise.resolve(this.buffer);
+                if (this.enablePerfMarks && this.src) {
+                    bufferPromise.then(function () {
+                        performance.mark('rive:fetch-riv:end');
+                        performance.measure('rive:fetch-riv', 'rive:fetch-riv:start', 'rive:fetch-riv:end');
+                    });
+                }
+                return [2 /*return*/, bufferPromise];
+            });
+        });
+    };
+    RiveFile.prototype.loadRuntime = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var runtimePromise;
+            return __generator(this, function (_a) {
+                if (this.enablePerfMarks)
+                    performance.mark('rive:await-wasm:start');
+                runtimePromise = RuntimeLoader.awaitInstance();
+                if (this.enablePerfMarks) {
+                    runtimePromise.then(function () {
+                        performance.mark('rive:await-wasm:end');
+                        performance.measure('rive:await-wasm', 'rive:await-wasm:start', 'rive:await-wasm:end');
+                    });
+                }
+                return [2 /*return*/, runtimePromise];
+            });
+        });
+    };
     RiveFile.prototype.init = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, error_1;
+            var _a, bufferResolved, runtimeResolved, error_1;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
@@ -6114,16 +6172,24 @@ var RiveFile = /** @class */ (function () {
                         _b.label = 1;
                     case 1:
                         _b.trys.push([1, 4, , 5]);
-                        _a = this;
-                        return [4 /*yield*/, RuntimeLoader.awaitInstance()];
+                        return [4 /*yield*/, Promise.all([this.loadRiveFileBytes(), this.loadRuntime()])];
                     case 2:
-                        _a.runtime = _b.sent();
+                        _a = _b.sent(), bufferResolved = _a[0], runtimeResolved = _a[1];
                         if (this.destroyed) {
                             return [2 /*return*/];
                         }
+                        // .riv file buffer and WASM runtime instance
+                        this.buffer = bufferResolved;
+                        this.runtime = runtimeResolved;
+                        if (this.enablePerfMarks)
+                            performance.mark('rive:init-data:start');
                         return [4 /*yield*/, this.initData()];
                     case 3:
                         _b.sent();
+                        if (this.enablePerfMarks) {
+                            performance.mark('rive:init-data:end');
+                            performance.measure('rive:init-data', 'rive:init-data:start', 'rive:init-data:end');
+                        }
                         return [3 /*break*/, 5];
                     case 4:
                         error_1 = _b.sent();
@@ -6291,6 +6357,8 @@ var Rive = /** @class */ (function () {
         this._viewModelInstance = null;
         this._dataEnums = null;
         this.drawOptimization = DrawOptimizationOptions.DrawOnChanged;
+        // When true, emits performance.mark/measure entries for load and render.
+        this.enablePerfMarks = false;
         // Durations to generate a frame for the last second. Used for performance profiling.
         this.durations = [];
         this.frameTimes = [];
@@ -6337,6 +6405,9 @@ var Rive = /** @class */ (function () {
             params.enableRiveAssetCDN === undefined
                 ? true
                 : params.enableRiveAssetCDN;
+        this.enablePerfMarks = !!params.enablePerfMarks;
+        if (this.enablePerfMarks)
+            RuntimeLoader.enablePerfMarks = true;
         // New event management system
         this.eventManager = new EventManager();
         if (params.onLoad)
@@ -6438,7 +6509,13 @@ var Rive = /** @class */ (function () {
             _this.removeRiveListeners();
             _this.deleteRiveRenderer();
             // Get the canvas where you want to render the animation and create a renderer
+            if (_this.enablePerfMarks)
+                performance.mark('rive:make-renderer:start');
             _this.renderer = _this.runtime.makeRenderer(_this.canvas, useOffscreenRenderer);
+            if (_this.enablePerfMarks) {
+                performance.mark('rive:make-renderer:end');
+                performance.measure('rive:make-renderer', 'rive:make-renderer:start', 'rive:make-renderer:end');
+            }
             // Initial size adjustment based on devicePixelRatio if no width/height are
             // specified explicitly
             if (!(_this.canvas.width || _this.canvas.height)) {
@@ -6550,6 +6627,7 @@ var Rive = /** @class */ (function () {
                             buffer: this.buffer,
                             enableRiveAssetCDN: this.enableRiveAssetCDN,
                             assetLoader: this.assetLoader,
+                            enablePerfMarks: this.enablePerfMarks,
                         });
                         this.riveFile = riveFile;
                         return [4 /*yield*/, riveFile.init()];
@@ -6716,6 +6794,9 @@ var Rive = /** @class */ (function () {
         // - Advance non-paused state machines by the elapsed number of seconds
         // - Advance to the first frame even when autoplay is false
         var activeStateMachines = this.animator.stateMachines.filter(function (a) { return a.playing; });
+        // Instrument the first 3 frames so the Performance timeline shows precise
+        // per-call latency for advance, draw, and flush without polluting the trace.
+        var _perfFrame = this.enablePerfMarks && this.frameCount < 3 ? this.frameCount : -1;
         for (var _b = 0, activeStateMachines_1 = activeStateMachines; _b < activeStateMachines_1.length; _b++) {
             var stateMachine = activeStateMachines_1[_b];
             // Check for events before the current frame's state machine advance
@@ -6750,7 +6831,13 @@ var Rive = /** @class */ (function () {
                     }
                 }
             }
+            if (_perfFrame >= 0)
+                performance.mark("rive:sm-advance:start:f".concat(_perfFrame));
             stateMachine.advanceAndApply(elapsedTime);
+            if (_perfFrame >= 0) {
+                performance.mark("rive:sm-advance:end:f".concat(_perfFrame));
+                performance.measure("rive:sm-advance:f".concat(_perfFrame), "rive:sm-advance:start:f".concat(_perfFrame), "rive:sm-advance:end:f".concat(_perfFrame));
+            }
             // stateMachine.instance.apply(this.artboard);
         }
         // Once the animations have been applied to the artboard, advance it
@@ -6770,10 +6857,28 @@ var Rive = /** @class */ (function () {
                 renderer.clear();
                 renderer.save();
                 // Update the renderer alignment if necessary
+                if (_perfFrame >= 0)
+                    performance.mark("rive:align-renderer:start:f".concat(_perfFrame));
                 this.alignRenderer();
+                if (_perfFrame >= 0) {
+                    performance.mark("rive:align-renderer:end:f".concat(_perfFrame));
+                    performance.measure("rive:align-renderer:f".concat(_perfFrame), "rive:align-renderer:start:f".concat(_perfFrame), "rive:align-renderer:end:f".concat(_perfFrame));
+                }
+                if (_perfFrame >= 0)
+                    performance.mark("rive:artboard-draw:start:f".concat(_perfFrame));
                 this.artboard.draw(renderer);
+                if (_perfFrame >= 0) {
+                    performance.mark("rive:artboard-draw:end:f".concat(_perfFrame));
+                    performance.measure("rive:artboard-draw:f".concat(_perfFrame), "rive:artboard-draw:start:f".concat(_perfFrame), "rive:artboard-draw:end:f".concat(_perfFrame));
+                }
                 renderer.restore();
+                if (_perfFrame >= 0)
+                    performance.mark("rive:renderer-flush:start:f".concat(_perfFrame));
                 renderer.flush();
+                if (_perfFrame >= 0) {
+                    performance.mark("rive:renderer-flush:end:f".concat(_perfFrame));
+                    performance.measure("rive:renderer-flush:f".concat(_perfFrame), "rive:renderer-flush:start:f".concat(_perfFrame), "rive:renderer-flush:end:f".concat(_perfFrame));
+                }
                 this._needsRedraw = false;
             }
         }
@@ -7745,6 +7850,22 @@ var Rive = /** @class */ (function () {
     return Rive;
 }());
 
+var DataType;
+(function (DataType) {
+    DataType["none"] = "none";
+    DataType["string"] = "string";
+    DataType["number"] = "number";
+    DataType["boolean"] = "boolean";
+    DataType["color"] = "color";
+    DataType["list"] = "list";
+    DataType["enumType"] = "enumType";
+    DataType["trigger"] = "trigger";
+    DataType["viewModel"] = "viewModel";
+    DataType["integer"] = "integer";
+    DataType["listIndex"] = "listIndex";
+    DataType["image"] = "image";
+    DataType["artboard"] = "artboard";
+})(DataType || (DataType = {}));
 var ViewModel = /** @class */ (function () {
     function ViewModel(viewModel) {
         this._viewModel = viewModel;
@@ -8223,6 +8344,17 @@ var ViewModelInstance = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(ViewModelInstance.prototype, "viewModelName", {
+        /**
+         * Get the name of the ViewModel definition this instance was created from.
+         */
+        get: function () {
+            var _a, _b;
+            return (_b = (_a = this._runtimeInstance) === null || _a === void 0 ? void 0 : _a.getViewModelName()) !== null && _b !== void 0 ? _b : "";
+        },
+        enumerable: false,
+        configurable: true
+    });
     ViewModelInstance.prototype.internalIncrementReferenceCount = function () {
         this._referenceCount++;
     };