@rive-app/canvas-lite 2.35.4 → 2.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/canvas-lite",
-  "version": "2.35.4",
+  "version": "2.36.0",
   "description": "A lite version of Rive's canvas 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;
@@ -918,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

@@ -2210,7 +2210,7 @@ moduleRtn = da;
 /* 2 */
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.35.4","description":"A lite version of Rive\'s canvas 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.js.map","rive.wasm","rive_fallback.wasm","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/canvas-lite","version":"2.36.0","description":"A lite version of Rive\'s canvas 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.js.map","rive.wasm","rive_fallback.wasm","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -3274,12 +3274,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) {
@@ -3362,6 +3368,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;
 }());
 
@@ -4299,6 +4310,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;
@@ -4311,6 +4324,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)
@@ -4336,7 +4352,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:
@@ -4351,11 +4367,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) {
@@ -4376,9 +4397,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:
@@ -4390,16 +4447,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();
@@ -4567,6 +4632,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 = [];
@@ -4613,6 +4680,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)
@@ -4714,7 +4784,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)) {
@@ -4826,6 +4902,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()];
@@ -4992,6 +5069,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
@@ -5026,7 +5106,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
@@ -5046,10 +5132,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;
             }
         }
@@ -6515,6 +6619,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++;
     };