8000 Web Development · thorvg/thorvg Wiki · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Web Development

Jump to bottom
Jinny You edited this page Jan 29, 2025 · 13 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 Emscripten
$ ./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 ./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.

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.
cd ./thorvg.web
cp ./dist/thorvg-wasm.wasm ./dist/lottie-player.js /path/to/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

Performance test with ThorVG perf-test

You can test the latest WASM binary with hosted perf-test here.

  1. Proceed Instructions for building the web component part
  2. Build local perf-test
# Install local lottie-player component in perf-test
cd ./thorvg.web/perf-test
npm install --save ../
    
# Build perf-test
npm run build
    
# After Build step, you should have ./out directory in ./perf-test
    
# Host index.html from perf-test directory
{absolute path}/emsdk/upstream/emscripten/emrun --browser chrome(or firefox) ./out/index.html
Clone this wiki locally
0