wasm: apply TypeScript bindings and d.ts to lottie-player.ts #118

kunyoungparkk · 2025-08-02T16:35:42Z

This PR updates lottie-player.ts to adopt the new TypeScript bindings introduced in thorvg#3678.

These updates are related to thorvg.web#16, which requests better TypeScript support for the WASM output.

vercel · 2025-08-02T16:35:46Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
thorvg-perf-test	Ready	Preview	Comment	Sep 29, 2025 3:37am

tinyjin

Thank you please check comments

src/lottie-player.ts

kang-hyuck · 2025-08-06T08:45:21Z

I run this patch and found that there is some error.

test environmts:

ubunu 22.04 LTS (wsl2)
bash (user shell, echo $SHELL)

error log:


## npm run build

> @thorvg/[email protected] build
> npm run clean && npm run copy:wasm && npm run copy:js && THORVG_VERSION=$(sed -n -e 4p ./thorvg/meson.build | sed 's/..$//' | sed -r 's/.{19}//') rollup -c --bundleConfigAsCjs && rm -rf ./dist/thorvg-wasm.js


> @thorvg/[email protected] clean
> rm -rf dist && mkdir dist && touch dist/index.js


> @thorvg/[email protected] copy:wasm
> cp ./thorvg/build_wasm/src/bindings/wasm/thorvg-wasm.wasm ./dist


> @thorvg/[email protected] copy:js
> cp ./thorvg/build_wasm/src/bindings/wasm/thorvg-wasm.{js,d.ts} ./dist

cp: cannot stat './thorvg/build_wasm/src/bindings/wasm/thorvg-wasm.{js,d.ts}': No such file or directory

comment:
I think ubuntu 22.04 doesn't use bash or user's shell when running cp ./thorvg/build_wasm/src/bindings/wasm/thorvg-wasm.{js,d.ts} ./dist command in npm, and the shell (not bash) doesn't seem to handle brace patterns like {js, d.ts}.

Is there no such error log in Mac environment?

kunyoungparkk · 2025-08-06T09:14:13Z

@kang-hyuck Thanks for pointing that out!
I didn’t encounter this issue on macOS. The build script worked without problems there.

I’ll test it on Ubuntu and update the script to avoid relying on brace expansion.

kunyoungparkk · 2025-08-06T13:35:52Z

@kang-hyuck I tested it again on my WSL2 and confirmed the same issue. Thanks to your insight, I was able to resolve it. Much appreciated!

tinyjin

Need tsd generation script here

kunyoungparkk · 2025-08-15T00:34:06Z

@tinyjin Based on the shell script you provided, I modified this PR to create an emit_tsd folder internally and copy only the .d.ts file to the dist folder during the build process.

tinyjin

Thank you. Please check comments

src/lottie-player.ts

package.json

Copilot

Pull Request Overview

This PR updates the TypeScript bindings for lottie-player.ts to use proper type definitions from the WASM module, addressing the need for better TypeScript support in the WASM output.

Key changes:

Adds proper TypeScript type definitions by importing MainModule and TvgLottieAnimation types
Replaces generic any types with specific type annotations throughout the codebase
Adds null safety checks for module initialization and operations

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
wasm_emit_tsd.sh	Adds script to generate TypeScript definition files during WASM build process
src/lottie-player.ts	Updates type annotations and adds null safety checks for WASM module usage
package.json	Modifies build script to copy generated TypeScript definition files

Comments suppressed due to low confidence (1)

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

wasm_emit_tsd.sh

package.json

kunyoungparkk · 2025-08-21T12:37:44Z

@tinyjin
I made two changes that I think were necessary:
1. Stopped moving thorvg-wasm.d.ts into the dist folder during the build process.
I believe the thorvg-wasm.d.ts file doesn’t need to be included in the build output folder.
2. Reverted the ts-ignore.
I think that import is only accessible during the build process, so ts-ignore should remain.

src/lottie-player.ts

kunyoungparkk · 2025-08-28T16:09:23Z

lottie: clean up code
Regarding this change(about overloaded load function), I’ve submitted a PR to thorvg that adds support for overload bindings:
thorvg/thorvg#3760

That PR should be merged first in order to properly keep the current code structure here.

kunyoungparkk · 2025-09-16T06:39:08Z

@tinyjin
The previously mentioned issue has now been resolved.
I have updated this branch accordingly and pushed the revised changes.

Could you re-review the PR at your convenience? Thank you.

vercel · 2025-10-08T04:52:05Z

@kunyoungparkk is attempting to deploy a commit to the thorvg-web Team on Vercel.

A member of the Team first needs to authorize it.

tinyjin · 2025-10-14T18:24:01Z

This project relies on lottie-player.d.ts as the main type definition, however the WASM generated type definition is separated. These should be unified, and types should be arranged in a single source definition for API consistency and user-side hinting.

We can re-export the WASM type definitions in lottie-player.d.ts, so users won't miss the WASM types.

// lottie-player.d.ts

// re-export WASM types
export type { 
  MainModule, 
  TvgLottieAnimation, 
  ClassHandle,
  EmbindString 
} from './thorvg';

Package main type def

thorvg.d.ts isn't integrated with the main type definition

tinyjin

Thank you for contribution. Please check comments as well as above suggestion

tinyjin · 2025-10-14T17:47:07Z

src/base-lottie-player.ts


  private _loadBytes(data: Uint8Array): void {
-    const isLoaded = this.TVG.load(data, this.fileType, this.canvas!.width, this.canvas!.height, '');
+    const isLoaded = this.TVG!.load(data, this.fileType, this.canvas!.width, this.canvas!.height);


This looks unrelated changes to TypeScript binding support. Removing unused parameter could be separated in another patch.

tinyjin · 2025-10-14T18:10:15Z

src/base-lottie-player.ts

    this.pause();
    this.currentFrame = curFrame;
-    this.TVG.frame(curFrame);
+    this.TVG!.frame(curFrame);


Overuse of the ! operator may cause unexpected runtime errors.

Please add an if (!this.TVG) check at the beginning of the function and remove the non-null assertion.

tinyjin · 2025-10-14T18:27:45Z

rollup.config.js

      alias({
        entries: [
-          { find: 'thorvg', replacement: path.join('..', presetMap[preset].path, 'thorvg')  },
+          { find: '../dist/thorvg.js', replacement: path.join('..', presetMap[preset].path, 'thorvg')  },


wrong alias...
There is no case ../dist/thorvg.js in import statement.

tinyjin · 2025-10-14T18:34:23Z

src/base-lottie-player.ts

-// @ts-ignore: WASM Glue code doesn't have type & Only available on build progress
-import Module from 'thorvg';
+import Module from '../dist/thorvg';
+import type { MainModule, TvgLottieAnimation } from '../dist/thorvg';


import Module, { type MainModule, type TvgLottieAnimation } from '../dist/thorvg';

tinyjin · 2025-10-14T18:36:10Z

src/base-lottie-player.ts


 type LottieJson = Map<PropertyKey, any>;
-type TvgModule = any;
+type TvgModule = TvgLottieAnimation;


Now we have type support, we don't actually need this type (No need wrapper type). Instead, let's replace TvgModule with TvgLottieAnimation.

tinyjin · 2025-10-14T19:13:40Z

src/base-lottie-player.ts

-    const buffer = this.TVG.render();
-    const clampedBuffer = new Uint8ClampedArray(buffer.buffer, buffer.byteOffset, buffer.byteLength);
+    const buffer = this.TVG!.render();
+    const clampedBuffer = new Uint8ClampedArray(buffer.buffer as ArrayBuffer, buffer.byteOffset, buffer.byteLength);


as is a signal that the data type of a value has been wrongly chosen. There is no point in introducing type safety if we bypass it.

see: thorvg/thorvg#3887

check:

const buffer = this.TVG!.render(); const clampedBuffer = new Uint8ClampedArray(buffer, 0, buffer.byteLength);

vercel bot deployed to Preview August 2, 2025 16:36 View deployment

tinyjin self-requested a review August 3, 2025 15:30

tinyjin assigned tinyjin and kunyoungparkk and unassigned tinyjin Aug 3, 2025

tinyjin added the javascript Pull requests that update javascript code label Aug 3, 2025

tinyjin reviewed Aug 3, 2025

View reviewed changes

src/lottie-player.ts Outdated Show resolved Hide resolved

src/lottie-player.ts Outdated Show resolved Hide resolved

src/lottie-player.ts Outdated Show resolved Hide resolved

vercel bot deployed to Preview August 3, 2025 17:11 View deployment

vercel bot deployed to Preview August 3, 2025 18:35 View deployment

hermet requested a review from Copilot August 4, 2025 03:52

This comment was marked as outdated.

Sign in to view

vercel bot deployed to Preview August 4, 2025 05:14 View deployment

kunyoungparkk force-pushed the wasm_type_def branch from 8b721fb to 69aab05 Compare August 5, 2025 05:20

vercel bot deployed to Preview August 5, 2025 05:20 View deployment

kunyoungparkk requested a review from tinyjin August 5, 2025 05:21

kunyoungparkk force-pushed the wasm_type_def branch from 69aab05 to cef0962 Compare August 6, 2025 13:27

vercel bot deployed to Preview August 6, 2025 13:28 View deployment

tinyjin requested changes Aug 14, 2025

View reviewed changes

kunyoungparkk force-pushed the wasm_type_def branch from cef0962 to 4746f88 Compare August 15, 2025 00:30

vercel bot deployed to Preview August 15, 2025 00:30 View deployment

kunyoungparkk requested a review from tinyjin August 15, 2025 00:34

tinyjin reviewed Aug 17, 2025

View reviewed changes

src/lottie-player.ts Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

tinyjin requested a review from Copilot August 17, 2025 13:04

This comment was marked as outdated.

Sign in to view

kunyoungparkk force-pushed the wasm_type_def branch from 4746f88 to 94fc49d Compare August 18, 2025 04:37

kunyoungparkk force-pushed the wasm_type_def branch from d1476c7 to 00fa236 Compare August 18, 2025 11:27

vercel bot deployed to Preview August 18, 2025 11:28 View deployment

tinyjin requested a review from Copilot August 19, 2025 03:52

Copilot AI reviewed Aug 19, 2025

View reviewed changes

wasm_emit_tsd.sh Outdated Show resolved Hide resolved

wasm_emit_tsd.sh Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

kunyoungparkk force-pushed the wasm_type_def branch from 00fa236 to 70888fa Compare August 21, 2025 12:36

vercel bot deployed to Preview August 21, 2025 12:36 View deployment

kunyoungparkk force-pushed the wasm_type_def branch from 70888fa to 147d31b Compare August 23, 2025 02:58

vercel bot deployed to Preview August 23, 2025 02:58 View deployment

tinyjin reviewed Aug 25, 2025

View reviewed changes

src/lottie-player.ts Outdated Show resolved Hide resolved

src/lottie-player.ts Outdated Show resolved Hide resolved

src/lottie-player.ts Outdated Show resolved Hide resolved

src/lottie-player.ts Outdated Show resolved Hide resolved

kunyoungparkk force-pushed the wasm_type_def branch from 147d31b to 267ecc5 Compare August 25, 2025 13:54

vercel bot deployed to Preview August 25, 2025 13:55 View deployment

kunyoungparkk requested a review from tinyjin August 25, 2025 13:58

kunyoungparkk force-pushed the wasm_type_def branch from 267ecc5 to 3c0885f Compare August 28, 2025 13:01

vercel bot had a problem deploying to Preview August 28, 2025 13:01 Failure

kunyoungparkk marked this pull request as draft August 28, 2025 14:46

kunyoungparkk force-pushed the wasm_type_def branch from 3c0885f to 44e3192 Compare September 16, 2025 06:32

vercel bot deployed to Preview September 16, 2025 06:33 View deployment

kunyoungparkk marked this pull request as ready for review September 16, 2025 06:34

kunyoungparkk force-pushed the wasm_type_def branch from 44e3192 to 0fac99e Compare September 29, 2025 03:22

vercel bot deployed to Preview September 29, 2025 03:24 View deployment

kunyoungparkk force-pushed the wasm_type_def branch from 0fac99e to ec2a354 Compare September 29, 2025 03:36

vercel bot deployed to Preview September 29, 2025 03:37 View deployment

wasm: apply TypeScript bindings and d.ts to lottie-player.ts

01a3ded

kunyoungparkk force-pushed the wasm_type_def branch from ec2a354 to 01a3ded Compare October 8, 2025 04:52

tinyjin reviewed Oct 14, 2025

View reviewed changes

Uh oh!

wasm: apply TypeScript bindings and d.ts to lottie-player.ts #118

Are you sure you want to change the base?

wasm: apply TypeScript bindings and d.ts to lottie-player.ts #118

Conversation

kunyoungparkk commented Aug 2, 2025

Uh oh!

vercel bot commented Aug 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tinyjin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

kang-hyuck commented Aug 6, 2025

Uh oh!

kunyoungparkk commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kunyoungparkk commented Aug 6, 2025

Uh oh!

tinyjin left a comment

Choose a reason for hiding this comment

Uh oh!

kunyoungparkk commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tinyjin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kunyoungparkk commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kunyoungparkk commented Aug 28, 2025

Uh oh!

kunyoungparkk commented Sep 16, 2025

Uh oh!

vercel bot commented Oct 8, 2025

Uh oh!

tinyjin commented Oct 14, 2025

Package main type def

thorvg.d.ts isn't integrated with the main type definition

Uh oh!

tinyjin left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tinyjin Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

tinyjin Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

tinyjin Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

tinyjin Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

tinyjin Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

vercel bot commented Aug 2, 2025 •

edited

Loading

kunyoungparkk commented Aug 6, 2025 •

edited

Loading

kunyoungparkk commented Aug 15, 2025 •

edited

Loading

kunyoungparkk commented Aug 21, 2025 •

edited

Loading

tinyjin left a comment •

edited

Loading

tinyjin Oct 14, 2025 •

edited

Loading