@rive-app/webgl2 2.35.3 → 2.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/webgl2",
-  "version": "2.35.3",
+  "version": "2.36.0",
   "description": "Rive's webgl2 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

@@ -427,7 +427,7 @@ function Na(a, b) {
     return Ma(c, a, b);
   }));
 }
-var Oa, Pa, Ta = {562193:(a, b, c, d, e) => {
+var Oa, Pa, Ta = {563121:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -490,11 +490,11 @@ var Oa, Pa, Ta = {562193:(a, b, c, d, e) => {
   }
   window.h.Ea += 1;
   return 1;
-}, 564371:() => {
+}, 565299:() => {
   "undefined" !== typeof window.h && (window.h.Xa.map(function(a) {
     document.removeEventListener(a, window.h.unlock, !0);
   }), --window.h.Ea, 0 === window.h.Ea && delete window.h);
-}, 564675:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 564779:() => {
+}, 565603:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 565707:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -502,7 +502,7 @@ var Oa, Pa, Ta = {562193:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 564950:(a, b, c, d, e, f) => {
+}, 565878:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -548,7 +548,7 @@ var Oa, Pa, Ta = {562193:(a, b, c, d, e) => {
   a == window.h.I.Ca && g.Y.connect(g.K.destination);
   g.nb = f;
   return window.h.lc(g);
-}, 567827:a => window.h.ta(a).K.sampleRate, 567900:a => {
+}, 568755:a => window.h.ta(a).K.sampleRate, 568828:a => {
   a = window.h.ta(a);
   void 0 !== a.Y && (a.Y.onaudioprocess = function() {
   }, a.Y.disconnect(), a.Y = void 0);
@@ -556,13 +556,13 @@ var Oa, Pa, Ta = {562193:(a, b, c, d, e) => {
   a.K.close();
   a.K = void 0;
   a.nb = void 0;
-}, 568300:a => {
+}, 569228:a => {
   window.h.yb(a);
-}, 568350:a => {
+}, 569278:a => {
   a = window.h.ta(a);
   a.K.resume();
   a.state = window.h.ia.ub;
-}, 568489:a => {
+}, 569417:a => {
   a = window.h.ta(a);
   a.K.suspend();
   a.state = window.h.ia.stopped;
@@ -3546,7 +3546,7 @@ moduleRtn = ca;
 /* 2 */
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/webgl2","version":"2.35.3","description":"Rive\'s webgl2 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)","Chris Dalton <chris@rive.app> (https://rive.app)"],"license":"MIT","files":["rive.js","rive.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/webgl2","version":"2.36.0","description":"Rive\'s webgl2 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)","Chris Dalton <chris@rive.app> (https://rive.app)"],"license":"MIT","files":["rive.js","rive.wasm","rive.js.map","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -4361,6 +4361,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),
@@ -4609,12 +4610,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) {
@@ -4697,6 +4704,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;
 }());
 
@@ -5634,6 +5646,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;
@@ -5646,6 +5660,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)
@@ -5671,7 +5688,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:
@@ -5686,11 +5703,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) {
@@ -5711,9 +5733,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:
@@ -5725,16 +5783,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();
@@ -5902,6 +5968,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 = [];
@@ -5948,6 +6016,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)
@@ -6049,7 +6120,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)) {
@@ -6161,6 +6238,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()];
@@ -6327,6 +6405,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
@@ -6361,7 +6442,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
@@ -6381,10 +6468,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;
             }
         }
@@ -7356,6 +7461,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;
@@ -7834,6 +7955,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++;
     };