Improve maintainability and feature parity between dotlottie-web components wrappers

[theashraf]

Background: dotLottie-web is a JavaScript library that includes several packages in a monorepo, which wrap its APIs into neat component packages for various frameworks such as React, Vue, Solid, Svelte, and WebComponent. As the number of these wrappers has increased, maintaining them has become increasingly challenging. Initially, we only supported Web Component, Vue, and React. Now, we have added Solid and Svelte, with the potential for more in the future.

Problem: The maintenance burden grows as we expand the number of wrappers. Each new framework requires us to manually implement and update components, which is time-consuming and prone to inconsistencies.

Proposed Solution: We can utilize Mitosis to overcome this maintenance burden. Mitosis provides a unified development experience across all frameworks, allowing us to build components in a single codebase and compile them to React, Vue, Angular, Svelte, Solid, Alpine, Qwik, and more.

Approach:

• Develop an internal package in the monorepo for the base Mitosis component. This component package will serve as the single source of truth for all framework-specific components
• Compile the base component to the target frameworks/libraries we support (react/vue/svelte/solid/wc)
• Use Mitosis overrides to add any necessary customizations specific to each framework
• Ensure that the components' APIs remain backward compatible and do not introduce any regressions during this migration process

Considerations: The migration to Mitosis should be gradual, ensuring that each component is thoroughly tested before replacing the existing implementation.

Next Steps:

• Evaluate the feasibility of integrating Mitosis into our current build process
• Start with a small, non-critical component to test the migration process. According to npm trends, dotlottie-solid and dotlottie-svelte are the least used and thus the least critical to start with. Reference: https://npmtrends.com/@lottiefiles/dotlottie-react-vs-@lottiefiles/dotlottie-solid-vs-@lottiefiles/dotlottie-svelte-vs-@lottiefiles/dotlottie-wc-vs-@lottiefiles/dotlottie-web
• Gradually migrate other components to Mitosis, ensuring thorough testing and backward compatibility at each step

[github-actions[bot]]

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.

[github-actions[bot]]

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.