Skip to content

Commit

Permalink
Add deprecation notice to webgl packages
Browse files Browse the repository at this point in the history
  • Loading branch information
lancesnider committed Dec 10, 2024
1 parent 4489228 commit 42d3576
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 14 deletions.
16 changes: 7 additions & 9 deletions WEB_RUNTIMES.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ See more context below on which package you may want to install in your web appl

This repository provides various packages which are published to npm. For simple usage, we recommend starting with `@rive-app/canvas` (more on that below).

**Note:** The high-level API and the logic for creating a Rive instance in your script remains the same for all of the non-advanced packages. That means if you decide later on you want to switch from a backing `CanvasRenderingContext2D` context to `WebGL`, you can switch from for instance, `@rive-app/canvas` to `@rive-app/webgl` without any breaking changes needed to your existing code.
**Note:** The high-level API and the logic for creating a Rive instance in your script remains the same for all of the non-advanced packages. That means if you decide later on you want to switch from a backing `CanvasRenderingContext2D` context to `WebGL`, you can switch from for instance, `@rive-app/canvas` to `@rive-app/webgl2` without any breaking changes needed to your existing code.

### **(Recommended)** @rive-app/canvas ![npm](https://img.shields.io/npm/v/@rive-app/canvas)

Expand All @@ -21,10 +21,10 @@ An easy to use high-level Rive API using the [CanvasRenderingContext2D](https://
- Support for simple vector graphics animations, raster, and mesh deformations
- Requests the backing web assembly code for you as a network request

### @rive-app/webgl ![npm](https://img.shields.io/npm/v/@rive-app/webgl)
### @rive-app/webgl2 ![npm](https://img.shields.io/npm/v/@rive-app/webgl2)

```
npm install @rive-app/webgl
npm install @rive-app/webgl2
```

An easy-to-use high-level Rive API using the WebGL renderer. This runtime will eventually support some newer advanced rendering features which may not be available to the Canvas renderers. Some benefits of this package:
Expand Down Expand Up @@ -52,13 +52,13 @@ A low-level Rive API using the [CanvasRenderingContext2D](https://developer.mozi

Want to see an example? Check out this [CodeSandbox](https://codesandbox.io/s/rive-canvas-advanced-api-centaur-example-exh2os) for some inspiration!

### @rive-app/webgl-advanced ![npm](https://img.shields.io/npm/v/@rive-app/webgl-advanced)
### @rive-app/webgl2-advanced ![npm](https://img.shields.io/npm/v/@rive-app/webgl2-advanced)

```
npm install @rive-app/webgl-advanced
npm install @rive-app/webgl2-advanced
```

A low-level Rive API using the [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) renderer. It has the same benefits as the regular `@rive-app/webgl` package plus:
A low-level Rive API using the [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) renderer. It has the same benefits as the regular `@rive-app/webgl2` package plus:

- Full control over the update and render loop.
- Allows for rendering multiple Rive artboards to a single canvas.
Expand All @@ -67,13 +67,11 @@ A low-level Rive API using the [WebGL](https://developer.mozilla.org/en-US/docs/

## Single Versions

Each of the above NPM packages includes the `rive.wasm` file in the bundle that powers the Rive render loop. In the high-level APIs (`@rive-app/canvas` and `@rive-app/webgl`), the runtime requests this for you so you don't have to, as opposed to their `-advanced` counterpart packages.
Each of the above NPM packages includes the `rive.wasm` file in the bundle that powers the Rive render loop. In the high-level APIs (`@rive-app/canvas` and `@rive-app/webgl2`), the runtime requests this for you so you don't have to, as opposed to their `-advanced` counterpart packages.

We also have alternative versions of each of the above packages on NPM that have the WASM encoded in the JS bundle. This means you won't have to make a network request for the WASM that powers the Rive animations, as it's all in one main JS file.

- [@rive-app/canvas-single](https://www.npmjs.com/package/@rive-app/canvas-single)
- [@rive-app/canvas-advanced-single](https://www.npmjs.com/package/@rive-app/canvas-advanced-single)
- [@rive-app/webgl-single](https://www.npmjs.com/package/@rive-app/webgl-single)
- [@rive-app/webgl-advanced-single](https://www.npmjs.com/package/@rive-app/webgl-advanced-single)

While there is no request for WASM file here, the JS bundle will be larger. The non-single versions may cache better on your web applications, as the WASM gets loaded from the same CDN source if loaded from multiple pages.
9 changes: 8 additions & 1 deletion js/npm/webgl/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
# 🚨 Deprecated Package Notice

**This package, `@rive-app/webgl`, is deprecated and will no longer receive updates or maintenance.**

We highly recommend switching to the newer package for improved features, performance, and support:
👉 **[@rive-app/webgl2](https://www.npmjs.com/package/@rive-app/webgl2)**

![npm](https://img.shields.io/npm/v/@rive-app/webgl)

# Rive
# Rive
High-level Rive API using WebGL. Please see https://github.com/rive-app/rive-wasm for a list of all the available web runtimes and their details.

## WebGL
Expand Down
9 changes: 8 additions & 1 deletion js/npm/webgl_advanced/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
# 🚨 Deprecated Package Notice

**This package, `@rive-app/webgl-advanced`, is deprecated and will no longer receive updates or maintenance.**

We highly recommend switching to the newer package for improved features, performance, and support:
👉 **[@rive-app/webgl2-advanced](https://www.npmjs.com/package/@rive-app/webgl2-advanced)**

![npm](https://img.shields.io/npm/v/@rive-app/webgl-advanced)

# Rive
# Rive
Low-level Rive API using WebGL. Please see https://github.com/rive-app/rive-wasm for a list of all the available web runtimes and their details.

## WebGL Advanced
Expand Down
9 changes: 8 additions & 1 deletion js/npm/webgl_advanced_single/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
# 🚨 Deprecated Package Notice

**This package, `@rive-app/webgl-advanced-single`, is deprecated and will no longer receive updates or maintenance.**

We highly recommend switching to the newer package for improved features, performance, and support:
👉 **[@rive-app/webgl2-advanced](https://www.npmjs.com/package/@rive-app/webgl2-advanced)**

![npm](https://img.shields.io/npm/v/@rive-app/webgl-advanced-single)

# Rive
# Rive
Low-level Rive API using WebGL and inline WASM. Please see https://github.com/rive-app/rive-wasm for a list of all the available web runtimes and their details.

## WebGL Advanced Single
Expand Down
9 changes: 8 additions & 1 deletion js/npm/webgl_single/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
# 🚨 Deprecated Package Notice

**This package, `@rive-app/webgl-single`, is deprecated and will no longer receive updates or maintenance.**

We highly recommend switching to the newer package for improved features, performance, and support:
👉 **[@rive-app/webgl2](https://www.npmjs.com/package/@rive-app/webgl2)**

![npm](https://img.shields.io/npm/v/@rive-app/webgl-single)

# Rive
# Rive
High-level Rive API using WebGL and inline WASM. Please see https://github.com/rive-app/rive-wasm for a list of all the available web runtimes and their details.

## WebGL Single
Expand Down
5 changes: 4 additions & 1 deletion js/src/rive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2251,7 +2251,10 @@ export class Rive {
});
return;
}
this.animator.stop(animationNames);
// If there is no artboard, this.animator will be undefined
if (this.animator) {
this.animator.stop(animationNames);
}
if (this.eventCleanup) {
this.eventCleanup();
}
Expand Down

0 comments on commit 42d3576

Please sign in to comment.