LottieFiles / lottie-interactivity

A small javascript library to enable interactivity with Lottie animations
https://lottiefiles.com/interactivity
MIT License
430 stars 55 forks source link

Declare a simple "Module" for TypeScripe usage in Angular #98

Closed Johannes-Schiel closed 1 year ago

Johannes-Schiel commented 1 year ago

Overview

...

Motivation

What inspired this enhancement? What makes you think this should be included?

I love this projects and use it in a few Vue projects with a realy simple update we can make it work in angular just as well :).

The Problem

If you install the project in angular you get this error message.

Error: src/app/shared/components/lottie/lottie.component.ts:3:24 - error TS7016: Could not find a declaration file for module '@lottiefiles/lottie-interactivity'. 'C:/Dev/.../node_modules/@lottiefiles/lottie-interactivity/dist/lottie-interactivity.min.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/lottiefiles__lottie-interactivity` if it exists or add a new declaration (.d.ts) file containing `declare module '@lottiefiles/lottie-interactivity';`

3 import { create } from '@lottiefiles/lottie-interactivity';

We need a new file in a new directory

types/lottie-interactivity.d.ts

declare module '@lottiefiles/lottie-interactivity';

after that the types has to be defined in the package.json

{
   ...
   "types": "./types/lottie-interactivity.d.ts",
   ...
}

After that in the release/build step the new folder with the new d.ts file has to be exported to the npm package. I tested it on my projects with npm link its just work with not further changes.

I hope this is a nice improvement :) and thx for your work

Labels

samuelOsborne commented 1 year ago

Thanks for submitting this @Johannes-Schiel , I'll try and implement it asap :)

Johannes-Schiel commented 1 year ago

thx if i can help i can easly create a pull request

Johannes-Schiel commented 1 year ago

@samuelOsborne i dont wont to rush but do you have a plan when you have time to create a new version? If you have no time at this moment, i could create a PR so you just have to check the code ? I need that feature for my new project :D

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

Andreea-G commented 1 year ago

Hi any updates on this? I also need it for my project. Thanks!

Johannes-Schiel commented 1 year ago

I don't think thats a fix has been added yet, so i created a fork of this package and fixed it myself

samuelOsborne commented 1 year ago

Hey @Andreea-G @Johannes-Schiel types should be added in version v.1.6.2!

Johannes-Schiel commented 1 year ago

Hello @samuelOsborne ahh nice, do you have a timeline when this will be release? or as i asked in a previous comment i can help :)

samuelOsborne commented 1 year ago

ah my b @Johannes-Schiel its out now via npm

Johannes-Schiel commented 1 year ago

sooo sadly after update to 1.6.2 i get another error

Error: node_modules/@lottiefiles/lottie-interactivity/dist/lottie-interactivity.d.ts:5:39 - error TS2339: Property 'mode' does not exist on type '{ player: string; }'

any idear where this is coming from?

jockgu commented 1 year ago

sooo sadly after update to 1.6.2 i get another error

Error: node_modules/@lottiefiles/lottie-interactivity/dist/lottie-interactivity.d.ts:5:39 - error TS2339: Property 'mode' does not exist on type '{ player: string; }'

any idear where this is coming from?

This needs to be updated to

constructor({ actions, container, mode, player, ...options }?: { actions: any; container: any; mode: any; player: string; });

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.