Self host WASM with dotlottie-wc?

[AlanBreck]

I've noticed that the WASM file is served from https://www.jsdelivr.com/ when using @lottiefiles/dotlottie-wc, and it's not downloaded with the package. Is there any way of self-hosting the WASM?

I also see that there's a static method setWasmUrl, but I'm not sure how to properly obtain the WASM in order to self host.

[miszo]

I have the same question about the @lottiefiles/dotlottie-web and @lottiefiles/dotlottie-react.
Tried to do the following, but it doesn't seem to work

import { DotLottie } from '@lottiefiles/dotlottie-web';
import lottieWasmUrl from '@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm'; // this is loaded as a url by the bundler

export function setLottieWasmUrl() {
  DotLottie.setWasmUrl(lottieWasmUrl);
}

I was trying to use it on the component level and when bootstrapping the application but every time I get the WASM file loaded from the jsdelivr.com.

I'm using the following versions:

• @lottiefiles/dotlottie-web: 0.20.1 (didn't include it in my package.json, used as a dependency from the react package)
• @lottiefiles/dotlottie-react: 0.5.5

[theashraf]

We currently do not have a self-contained bundle that embeds the WASM file within the JavaScript, making it self-contained. The downside of this approach is the increased JavaScript bundle size, which could reach approximately 1 MB. To keep the bundle size smaller, we preferred shipping the WASM file independently and asynchronously loading it from the CDN (jsdelivr). As a fallback, we also added unpkg CDN.

If you want to self-host the WASM file, you can use dotlottie-web directly and load the dotlottie-player with a URL loader.

Using as a React Component

import { DotLottie } from "@lottiefiles/dotlottie-web";
import wasmUrl from "@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm?url";
import { useRef, useEffect } from "react";

// Set the WASM URL
DotLottie.setWasmUrl(wasmUrl);

function DotLottiePlayer() {
  const ref = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    new DotLottie({
      canvas: ref.current!,
      src: "https://lottie.host/242ebeec-6277-4937-afa6-3a1f9f54f0c0/UFK246mvwd.lottie",
      autoplay: true,
      loop: true,
    });
  }, []);

  return (
    <canvas
      ref={ref}
      style={{
        width: 300,
        height: 300,
      }}
    />
  );
}

export default DotLottiePlayer;

Using as a Web Component

import { DotLottie } from "@lottiefiles/dotlottie-web";
import wasmUrl from "@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm?url";

// Set the WASM URL
DotLottie.setWasmUrl(wasmUrl);

class DotLottiePlayer extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.canvas = document.createElement("canvas");
    this.canvas.style.width = "300px";
    this.canvas.style.height = "300px";
    this.shadowRoot.appendChild(this.canvas);
  }

  static get observedAttributes() {
    return ["src", "loop", "autoplay"];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "src" || name === "loop" || name === "autoplay") {
      this.loadAnimation();
    }
  }

  connectedCallback() {
    this.loadAnimation();
  }

  loadAnimation() {
    const src = this.getAttribute("src");
    const loop = this.getAttribute("loop") === "true";
    const autoplay = this.getAttribute("autoplay") === "true";

    new DotLottie({
      canvas: this.canvas,
      src: src,
      autoplay: autoplay,
      loop: loop,
    });
  }
}

customElements.define("dotlottie-player", DotLottiePlayer);

[AlanBreck]

Thanks, @theashraf! Is there any possibility in future development that this could be configured via a prop for the various packages (React, WC, Svelte, etc)?

[theashraf]

@miszo @AlanBreck Sure, I think we can export a util function called setWasmUrl from all the dotlottie-web wrappers, I'll keep you updated

[theashraf]

@AlanBreck @miszo I've raised a PR for this feature: #204. Please have a look and let me know if it works for you 👀

[theashraf]

@AlanBreck @miszo This update has landed in dotlottie-react@0.6.0 and dotlottie-wc@0.2.0, please have a look and let me know

[adelegard]

@theashraf this is awesome. However when using a local url/file I'm seeing both the local file as well as the backup be loaded. I'm on version "@lottiefiles/dotlottie-react": "0.6.3",

import { DotLottie, DotLottieReact, setWasmUrl } from '@lottiefiles/dotlottie-react'
setWasmUrl('/lottie/dotlottie-player.wasm')

[AlanBreck]

@adelegard, I believe that means that it can't find the WASM at the path you've provided. I'd recommend confirming that /lottie/dotlottie-player.wasm is indeed the correct path by accessing via a fetch, or something.

NM, I didn't look at your screenshots closely enough. Sorry for noise.

[theashraf]

@adelegard The backup WASM URL will be used only if loading the WASM file from the provided URL in the setWasmUrl method fails. It would be very helpful if you could provide a CodeSandbox with this issue replicated. I'd be happy to take a look and assist further

[pclarke-coursera]

We currently do not have a self-contained bundle that embeds the WASM file within the JavaScript, making it self-contained. The downside of this approach is the increased JavaScript bundle size, which could reach approximately 1 MB. To keep the bundle size smaller, we preferred shipping the WASM file independently and asynchronously loading it from the CDN (jsdelivr). As a fallback, we also added unpkg CDN.

If you want to self-host the WASM file, you can use dotlottie-web directly and load the dotlottie-player with a URL loader.

Using as a React Component

import { DotLottie } from "@lottiefiles/dotlottie-web";
import wasmUrl from "@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm?url";
import { useRef, useEffect } from "react";

// Set the WASM URL
DotLottie.setWasmUrl(wasmUrl);

function DotLottiePlayer() {
  const ref = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    new DotLottie({
      canvas: ref.current!,
      src: "https://lottie.host/242ebeec-6277-4937-afa6-3a1f9f54f0c0/UFK246mvwd.lottie",
      autoplay: true,
      loop: true,
    });
  }, []);

  return (
    <canvas
      ref={ref}
      style={{
        width: 300,
        height: 300,
      }}
    />
  );
}

export default DotLottiePlayer;

@theashraf Is there typescript support for import wasmUrl from "@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm?url";?