Skip to content

Web Development

Jump to bottom
Hermet Park edited this page May 6, 2024 · 7 revisions

This document provides guidance on:

  • Steps for locally Building the @thorvg/lottie-player web Library.
  • Methods for testing the @thorvg/lottie-player web library.

Generate WebAssembly code

  1. Setup Enscripten

Note: you may need to add one more path.

$ export PATH={absolute path}/emsdk/upstream/bin:$PATH

  1. Build ThorVG
# Enter ThorVG directory
$ cd ./thorvg

# If build_wasm exists, remove it
$ rm -rf ./build_wasm

# Build ThorVG using Enscripten
$ ./wasm_build.sh {absolute path}/emsdk/
  • You will get following build results thorvg-wasm.js in build_wasm/src/wasm folder

Instructions for building the web component

We can use npm package manager to build and package web components.

# Enter the ThorVG web directory
cd ./web

# Build library
npm run build

You will have these files on ./dist folder

  • lottie-player.js : web component for browsers
  • lottie-player.js.map : source map for lottie-player.js
  • lottie-player.esm.js : web component for NPM, using ECMAScript module format
  • lottie-player.esm.js.map : source map for lottie-player.esm.js
  • lottie-player.cjs.js : web component for NPM, using CommonJS module format
  • lottie-player.cjs.js.map : source map for lottie-player.cjs.js
  • lottie-player.d.ts : TypeScript type declaration file

To verify the results in the web library, you can use three different testing methods.

Local test procedures

Build the library in watch mode, which will automatically rebuild it whenever files are changed.

# Build with watch mode
npm run build:watch

# Run local server to test (localhost:8080/example)
npx http-server .

Test procedures with frontend frameworks

Framework testing might be necessary to ensure that new updates do not compromise the library's stability.

You can replace it with your own library path:

cd /path/to/any/npm-project
npm uninstall @thorvg/lottie-player
npm install /path/to/thorvg/web

Check out these examples; we strongly recommend testing with major frameworks:

Test procedures with ThorVG Viewer

You can test the ThorVG Viewer with the new WebAssembly code.

# Prepare the thorvg viewer.
$ git clone https://github.com/thorvg/thorvg.viewer.git

# Copy the ThorVG WebAssembly code to the thorvg viewer.
$ cp ./thorvg/web/dist/lottie-player.js ./thorvg.viewer

# Move to the thorvg.viewer repo and run index.html on your browser
$ {absolute path}/emsdk/upstream/emscripten/emrun --browser chrome(or firefox) ./index.html
Clone this wiki locally