Every new release breaks deployed apps

[gyzerok]

Hello there!

Every new release you are making is causing us breakage before we update to it. This is because you are pointing to the latest version in your code

thorvg.web/src/lottie-player.ts

Line 34 in e189798

const _wasmUrl = 'https://unpkg.com/@thorvg/lottie-player@latest/dist/thorvg-wasm.wasm';

The best solution would be of course to use local copy of the wasm file from node_modules, so projects do not depend on 3rd-party cdn and have reproducible builds. But even using appropriate version from unpkg would already go a long way.

Thank you!

[tinyjin]

@gyzerok Yes, we were aware of this point. That's why we introduce wasmUrl property #80. When using CDN, it'd be hard to ensure consistent loading time and reproducible builds as you mentioned.

The _wasmUrl should be fallback link, and users should be able to handle origin of WASM binary.
The update enabling custom WasmURL will soon be shipped. Would it be answer for you?

[gyzerok]

@tinyjin yeah, thank you! I'll wait for the next version, check that everything works with and will close the issue if so.

[gyzerok]

One thing though: it'd be nice if fallback would point to the concrete version from unpkg instead of always latest. Otherwise fallback will still break in production on releases.

[tinyjin]

@gyzerok ThankPlz check this ;)

Custom WASM URL has just shipped to v1.0.0-pre.9

Web Component

<lottie-player
      autoPlay
      loop
      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
      wasmUrl="/dist/thorvg-wasm.wasm"
      style="width: 300px; height: 300px"
></lottie-player>

JS-creation

player = document.createElement('lottie-player');
player.autoPlay = true;
player.loop = true;
player.wasmUrl = '/thorvg-wasm.wasm'; // Set Custom WASM URL
player.renderConfig = { renderer };

React/NextJS

bedd5c0

[tinyjin]

it'd be nice if fallback would point to the concrete version from unpkg instead of always latest. Otherwise fallback will still break in production on releases.

Agree, will fix it soon. You can follow up this issue.

[gyzerok]

@tinyjin when trying to import it with vite like so import wasmUrl from '@thorvg/lottie-player/dist/thorvg-wasm.wasm?url' I am getting Missing "./dist/thorvg-wasm.wasm" specifier in "@thorvg/lottie-player" package [plugin vite:dep-scan]

[gyzerok]

Seems like what you are missing is this in package.json:

  "exports": {
    ".": {
      "import": "./dist/lottie-player.cjs.js",
      "require": "./dist/lottie-player.esm.js"
    },
    "./dist/thorvg-wasm.wasm": {
      "import": "./dist/thorvg-wasm.wasm",
      "require": "./dist/thorvg-wasm.wasm"
    }
  },

[tinyjin]

@gyzerok
Can you try this?

import wasmUrl from "../node_modules/@thorvg/lottie-player/dist/thorvg-wasm.wasm"

I think WASM binary file doesn't have to be handled by module bundler. Thus that is easy way to go.