Wasm fallback and min safari version

### This PR
- fixes WASM not loading on older Apple devices/browsers
- adds a fallback mechanism

#### Fix for older devices
The addition of `MIN_SAFARI_VERSION` is the only flag that resolved the issue on the affected devices (see discussion: https://2dimensions.slack.com/archives/CLLCU09T6/p1714494911457529)

#### Fallback
This PR is meant to showcase a way to introduce a fallback mechanism quickly. Can it be merged? Yes. But we need to consider the impact and alternatives (see below). _Also note that this PR makes an assumption about the best way to handle our single packages, which needs to be discussed before merging (see below)._

#### Problem with this fallback
We'll increase the NPM package size by having two WASM files: `rive.wasm` and `rive_fallback.wasm`. To alleviate any concern, this can be resolved with proper documentation. The packages that load the WASM remotely do so through `unpkg` or `jsdelvr` (or overridden manually). It would not have an impact on the actual end client (to my knowledge), but maybe the perception of the "increased" NPM package size is something we want to avoid.

#### Benefit of this approach
Quick, with minimal change. We continue to use `unpkg` and `jsdelvr` to host.

#### TODO
Adaptive Loading: Implement more sophisticated loading strategies, such as loading different WASM modules based on the user's browser capabilities or preferences. This draft PR only loads the fallback if the current one failed. This does not need to be part of this PR and can be a future enhancement.

### Single vs Non-Single versions
**This fallback mechanism will only work for the non-single packages where we load the WASM bundle separately**. Not the **-single versions, where WASM is bundled with the JS. In my testing during the call to `loadRuntime` the callback for `locateFile` will not be called if Emscripten is built with `-sSINGLE_FILE=1`.

At the time of making the draft PR I've not come up with a solution for this. It might not be possible.

TODO: This needs to be investigated more. Or we should reach out to Emscripten.

#### What this means
If we can't create a fallback for these, then we should make a decision around our single libraries:
- Should they prefer to support older architecture and we recommend that people use the non-single packages to benefit from the fallback mechanism.
- Or the alternative and we still recommend using the non-single packages to benefit from a fallback.

**There are other benefits to using the non-single:**
- Streaming Compilation: Newer browsers can start compiling the WASM file as soon as it starts downloading, which could lead to faster execution start times.
- Better Cache Control: JavaScript and WASM can be cached separately. If you update one, users may not need to re-download the other. With the single version, I can see how people may end up using it in a way where any update to their site might then be bundling everything again.

### Alternative One
_Most of the above still apply._

Instead of adding `rive_fallback.wasm` to the current packages, we create another NPM package called `rive_fallback` or something. And all this package is responsible for is to distribute the fallback WASM files, for example, `rive_canvas_fallback.wasm` and `rive_webgl_fallback.wasm`.

**Benefit**
We do not increase the perceived NPM package size for our published packages. And we can continue to use `unpkg` and `jsdelivr` for hosting.

### Alternative Two
_Most of the above still apply._
We build our own hosting with versioning, etc.

Diffs=
4342a3f04 Wasm fallback and min safari version (#7214)

Co-authored-by: Gordon <pggordonhayes@gmail.com>
Co-authored-by: Maxwell Talbot <talbot.maxwell@gmail.com>

.gitignore

@@ -48,6 +48,7 @@ node_modules
 /js/npm/canvas_advanced/canvas_advanced.mjs
 /js/npm/canvas_advanced_lite/canvas_advanced.mjs
 /js/npm/**/rive.wasm
+/js/npm/**/rive_fallback.wasm
 /js/npm/**/rive.js
 /js/npm/**/rive.js.map
 /js/npm/**/rive.d.ts

.rive_head

@@ -1 +1 @@
-1d0d2b6acd58a8541bf0fa01a9ac0b5bb761e65a
+4342a3f049632b640b5522c1fabf7aef781423af

js/npm/canvas/package.json

@@ -25,6 +25,7 @@
     "rive.js",
     "rive.js.map",
     "rive.wasm",
+    "rive_fallback.wasm",
     "rive.d.ts",
     "rive_advanced.mjs.d.ts"
   ],
@@ -34,4 +35,4 @@
     "fs": false,
     "path": false
   }
-}
+}

js/npm/canvas_advanced/package.json

@@ -24,6 +24,7 @@
   "files": [
     "canvas_advanced.mjs",
     "rive.wasm",
+    "rive_fallback.wasm",
     "rive_advanced.mjs.d.ts"
   ],
   "types": "rive_advanced.mjs.d.ts",
@@ -32,4 +33,4 @@
     "fs": false,
     "path": false
   }
-}
+}

js/npm/canvas_advanced_lite/package.json

@@ -24,6 +24,7 @@
   "files": [
     "canvas_advanced.mjs",
     "rive.wasm",
+    "rive_fallback.wasm",
     "rive_advanced.mjs.d.ts"
   ],
   "typings": "rive_advanced.d.ts",
@@ -32,4 +33,4 @@
     "fs": false,
     "path": false
   }
-}
+}

js/npm/canvas_lite/package.json

@@ -25,6 +25,7 @@
     "rive.js",
     "rive.js.map",
     "rive.wasm",
+    "rive_fallback.wasm",
     "rive.d.ts",
     "rive_advanced.mjs.d.ts"
   ],
@@ -34,4 +35,4 @@
     "fs": false,
     "path": false
   }
-}
+}

js/npm/webgl/package.json

@@ -24,6 +24,7 @@
   "files": [
     "rive.js",
     "rive.wasm",
+    "rive_fallback.wasm",
     "rive.js.map",
     "rive.d.ts",
     "rive_advanced.mjs.d.ts"
@@ -34,4 +35,4 @@
     "fs": false,
     "path": false
   }
-}
+}

js/npm/webgl_advanced/package.json

@@ -24,6 +24,7 @@
   "files": [
     "webgl_advanced.mjs",
     "rive.wasm",
+    "rive_fallback.wasm",
     "rive_advanced.mjs.d.ts"
   ],
   "types": "rive_advanced.mjs.d.ts",
@@ -32,4 +33,4 @@
     "fs": false,
     "path": false
   }
-}
+}

js/src/rive.ts

@@ -210,8 +210,10 @@ export class RuntimeLoader {
         }
       })
       .catch(() => {
-        // In case unpkg fails or goes down, we should try to load from jsdelivr
-        const backupJsdelivrUrl = `https://cdn.jsdelivr.net/npm/${packageData.name}@${packageData.version}/rive.wasm`;
+        // In case unpkg fails, or the wasm was not supported, we try to load the fallback module from jsdelivr.
+        // This `rive_fallback.wasm` is compiled to support older architecture.
+        // TODO: (Gordon): preemptively test browser support and load the correct wasm file. Then use jsdelvr only if unpkg fails.
+        const backupJsdelivrUrl = `https://cdn.jsdelivr.net/npm/${packageData.name}@${packageData.version}/rive_fallback.wasm`;
         if (RuntimeLoader.wasmURL.toLowerCase() !== backupJsdelivrUrl) {
           console.warn(
             `Failed to load WASM from ${RuntimeLoader.wasmURL}, trying jsdelivr as a backup`,
@@ -1197,10 +1199,10 @@ type ObservedObject = {
 };
 
 type MyResizeObserverType = {
-  observe: Function,
-  unobserve: Function,
-  disconnect: Function,
-}
+  observe: Function;
+  unobserve: Function;
+  disconnect: Function;
+};
 
 class FakeResizeObserver {
   observe() {}

wasm/build_all_wasm.sh

@@ -63,18 +63,32 @@ echo
 rm -fR ./build
 
 echo
-echo "::::: building @rive-app/canvas_advanced"
+echo "::::: building @rive-app/canvas_advanced fallback"
 echo
 OUT_DIR=build/canvas_advanced/bin/release ./build_wasm.sh -c release
+cp build/canvas_advanced/bin/release/canvas_advanced.wasm ../js/npm/canvas_advanced/rive_fallback.wasm
+cp build/canvas_advanced/bin/release/canvas_advanced.wasm ../js/npm/canvas/rive_fallback.wasm
+
+echo
+echo "::::: building @rive-app/canvas_advanced"
+echo
+OUT_DIR=build/canvas_advanced/bin/release ./build_wasm.sh release
 cp build/canvas_advanced/bin/release/canvas_advanced.mjs ../js/npm/canvas_advanced/canvas_advanced.mjs
 cp build/canvas_advanced/bin/release/canvas_advanced.wasm ../js/npm/canvas_advanced/rive.wasm
 cp build/canvas_advanced/bin/release/canvas_advanced.wasm ../js/npm/canvas/rive.wasm
 cp ../js/src/rive_advanced.mjs.d.ts ../js/npm/canvas_advanced/rive_advanced.mjs.d.ts
 
 echo
-echo "::::: building @rive-app/canvas_advanced_lite"
+echo "::::: building @rive-app/canvas_advanced_lite fallback"
 echo
 OUT_DIR=build/canvas_advanced_lite/bin/release ./build_wasm.sh -c -l release
+cp build/canvas_advanced_lite/bin/release/canvas_advanced.wasm ../js/npm/canvas_advanced_lite/rive_fallback.wasm
+cp build/canvas_advanced_lite/bin/release/canvas_advanced.wasm ../js/npm/canvas_lite/rive_fallback.wasm
+
+echo
+echo "::::: building @rive-app/canvas_advanced_lite"
+echo
+OUT_DIR=build/canvas_advanced_lite/bin/release ./build_wasm.sh -l release
 cp build/canvas_advanced_lite/bin/release/canvas_advanced.mjs ../js/npm/canvas_advanced_lite/canvas_advanced.mjs
 cp build/canvas_advanced_lite/bin/release/canvas_advanced.wasm ../js/npm/canvas_advanced_lite/rive.wasm
 cp build/canvas_advanced_lite/bin/release/canvas_advanced.wasm ../js/npm/canvas_lite/rive.wasm
@@ -96,9 +110,16 @@ OUT_DIR=build/canvas_advanced_lite_single/bin/release ./build_wasm.sh -c -l -s r
 # build for testing purposes, and let webpack reference the wasm/build for this package here
 
 echo
-echo "::::: building @rive-app/webgl_advanced"
+echo "::::: building @rive-app/webgl_advanced fallback"
 echo
 OUT_DIR=build/webgl_advanced/bin/release ./build_wasm.sh -c -r skia release
+cp build/webgl_advanced/bin/release/webgl_advanced.wasm ../js/npm/webgl_advanced/rive_fallback.wasm
+cp build/webgl_advanced/bin/release/webgl_advanced.wasm ../js/npm/webgl/rive_fallback.wasm
+
+echo
+echo "::::: building @rive-app/webgl_advanced"
+echo
+OUT_DIR=build/webgl_advanced/bin/release ./build_wasm.sh -r skia release
 cp build/webgl_advanced/bin/release/webgl_advanced.mjs ../js/npm/webgl_advanced/webgl_advanced.mjs
 cp build/webgl_advanced/bin/release/webgl_advanced.wasm ../js/npm/webgl_advanced/rive.wasm
 cp build/webgl_advanced/bin/release/webgl_advanced.wasm ../js/npm/webgl/rive.wasm
@@ -107,7 +128,7 @@ cp ../js/src/rive_advanced.mjs.d.ts ../js/npm/webgl_advanced/rive_advanced.mjs.d
 echo
 echo "::::: building @rive-app/webgl_advanced_single"
 echo
-OUT_DIR=build/webgl_advanced_single/bin/release ./build_wasm.sh -c -r skia -s release
+OUT_DIR=build/webgl_advanced_single/bin/release ./build_wasm.sh -r skia -s release
 cp build/webgl_advanced_single/bin/release/webgl_advanced_single.mjs ../js/npm/webgl_advanced_single/webgl_advanced_single.mjs
 cp ../js/src/rive_advanced.mjs.d.ts ../js/npm/webgl_advanced_single/rive_advanced.mjs.d.ts