-
Notifications
You must be signed in to change notification settings - Fork 104
Web Development
This document provides guidance on:
- Steps for locally Building the @thorvg/lottie-player web Library.
- Methods for testing the @thorvg/lottie-player web library.
- Setup Enscripten
-
We compile ThorVG to WebAssembly using Enscripten.
-
You can find installation instructions from Download and install
Note: you may need to add one more path.
$ export PATH={absolute path}/emsdk/upstream/bin:$PATH
- 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
We can use npm package manager to build and package web components.
# Enter the ThorVG web directory
cd ./thorvg.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.
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 .
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:
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