WOC 3.0 project - Convert the editor from Flow to TypeScript

[Maniktherana]

Background

I got selected as a mentee for Winter of Code 3.0! My proposal is to convert the editor from JavaScript+Flow to TypeScript using a codemod script and to switch from Create React App (CRA) to Vite. The idea is relatively straightforward:

• Prepare the codebase for type-checking using TypeScript:
  • Remove any checked-in types and config
  • Install TypeScript
  • Remove the Flow package
  • Set up a tsconfig.json file for configuring TypeScript
  • Update the linter to support TypeScript
  • Update the build step to support TypeScript
• Run the codemod script
• Review the code changes manually and fix bugs
• Thoroughly test the codebase to ensure everything is working

Quite a few big names have done this in the past, namely Airtable, Stripe, and Khan Academy. Luckily they also open-sourced their scripts. They also shared their experiences migrating and that came in handy when researching for my proposal.

Resources

• Khan Academy's Codemod scripts (This might be the one to use)
• Airtable's Codemod scripts
• Stripe's Codemod scripts
• Airtable's Blog Post
• Stripe's Blog Post
• Mentimeter's Blog Post
• Factorial's Blog Post

CRA to Vite

I think Vite is great and there's value in using it over CRA. Vite tends to be more performant as the codebase grows in size and complexity. It could lead to shorter build times which is a big plus.

If you need more details, you can find my proposal here

[4ian]

Thanks again @Maniktherana for posting this and making this project :)

Basically, we have two things to figure out:

1. How to convert the whole editor sources to TypeScript.
2. How to run it.

For 1, I recommend to start that you try a few codemod and that for each of them, you list:

• If it runs. If not, what is needed to make them run.
• By reading the code, what seems to be the result. What's missing, what's good:
  • Any //ts-ignore added?
  • Are types converted properly?

For 2, I agree that migrating to Vite would be the best. This being said it might be a fairly complicated task. So I recommend that for now we investigate how to enable TypeScript in create-react-app (https://create-react-app.dev/docs/adding-typescript/) and use it first to test the codemods.

Once we have something running with create-react-app in TypeScript, we can think about using Vite :)

Thanks!