search

trendmicro-frontend / tonic-ui

Tonic UI is a UI component library for React, built with Emotion and Styled System. It is designed to be easy to use and easy to customize.
https://trendmicro-frontend.github.io/tonic-ui
MIT License
123 stars 28 forks source link

WIP: Gradual Transition to Typescript #889

Open trend-albert-shala opened 2 weeks ago

trend-albert-shala commented 2 weeks ago

WIP/Idea discussion: Adding Typescript Support to Tonic UI for Gradual Migration

Many teams, especially in Canada (Ottawa), build Tonic UI components using Typescript. While this works well in the short term, it would be beneficial for Tonic UI to fully integrate Typescript into its codebase and export component types.

Path to Migration

Step 1: Start by introducing Typescript to core Tonic components gradually. Begin with adding the Rollup Typescript plugin and configuring Rollup to support .ts and .tsx files.

Step 2: Currently, Tonic UI uses Babel to support older browsers. We can adopt a hybrid approach: keep using Babel and introduce the Typescript compiler as a separate command to type-check and transpile .ts and .tsx files to JavaScript.

Step 3: Transpile Typescript code to ES6 using the Typescript compiler, then use Babel to re-transpile it to ES5/ES3 for broader compatibility. This allows for [tree-shaking](https://webpack.js.org/guides/tree-shaking/), which optimizes the code by removing unused parts. After tree-shaking, compile the ES6 JavaScript down to ES5 to ensure it works in most JavaScript environments.

trend-albert-shala commented 1 week ago

Since Typescript will always convert to just Javascript, and by configuring babel or utilizing the Typescript compiler directly to convert typescript to Javascript, we can also consider an alternative approach to simply rename all .js files to either .ts or .tsx and turn off TypeScript compiler warnings by default. This allows for TypeScript file support while enabling a gradual migration. Temporarily disabling TypeScript warnings permits incremental migration of files and components to fully utilize TypeScript types. Contributors can enable type checking while working on specific files or components, making it more manageable to address issues across numerous components in the library.

cheton commented 1 week ago

Hi @trend-albert-shala

Thank you for the great sharing. We may decide to split Tonic UI into separate versions: one for open source and one for internal use. This approach is similar to Nginx open-source and Nginx Plus. It will enable us to accelerate development to address internal requirements and align with security policies, while ensuring the open-source version remains updated as needed.

Sorry, I can't share too many details here as this is a public space. Kevin will keep you updated once we finalize our direction. I think the TypeScript support can be implemented first in the internal version of Tonic UI (a.k.a. Tonic One).

trend-albert-shala commented 1 week ago

Thanks for sharing those details @cheton, i'd like to offer some help on the internal version where possible.