The Zulip open-source project is undergoing a migration of its JavaScript web codebase to TypeScript. This summer, I contributed significantly to this effort by migrating a substantial portion of the codebase. TypeScript has proven to be an excellent language, greatly enhancing the developer experience. We are now very close to reaching the 100% mark, which will be beneficial as the project continues to grow rapidly. In addition to the TypeScript migration, I also addressed several bugs, rewrote and refactored parts of the codebase, and prepared for the future migration of node tests to TypeScript.
My work was mostly related to migrating the codebase to TypeScript. Still, during the GSoC period, I also worked on fixing issues when the migration was blocked due to lack of availability of files in the dependency cycle.
For this Report I'll divide my work at Zulip into 5 parts:
- TypeScript Migrations
- Codebase Refactors and preparatory commits for migration
- Bug fixes
- Planning for migration of Node tests
- Buddy reviews
PRs on which I worked on during community bonding period are maked with *
Migrating files to TypeScript has been the central focus of this project. Identifying accurate types throughout the codebase proved to
be a significant challenge, as it required a deep understanding of every function, class, and variable in the files. This work involved
determining precise types, using Zod to parse data coming from the server, improving functions and classes to make them fit for
migration and addressing any issues with node tests that failed due to incorrect types in the test data.
-
#30018 settings_profile_field: Convert Module to TypeScript.*
-
#30755 user_profile: Convert Module to TypeScript.
-
#29823 add_subscribers_pill: Convert Module to TypeScript.*
-
#30123 navbar_alerts: Convert Module to TypeScript.
-
#30176 muted_users_ui: Convert Module to TypeScript.*
-
#30233 compose_call_ui: Convert Module to TypeScript.
-
#30599 left_sidebar_navigation_area_popover: Convert Module to TypeScript.
-
#30601 compose_popovers: Convert Module to TypeScript.
-
#30685 user_group_create: Convert Module to TypeScript.
-
#30899 landing_page: Convert Module to TypeScript.
-
#30873 help: Convert Module to TypeScript.
-
#31142 integrations_dev_panel: Convert Module to TypeScript.
-
#30509 message_fetch: Convert Module to TypeScript.
-
#31384 settings_bots: Convert Module to TypeScript.
-
#29323 giphy: Convert Module to TypeScript.
We still have 60+ files left to migrate and more than 300 files have already been migrated.
-
#30090 settings_components: Split functions to improve type checking.*
This PR improves the type checking in the settings_components by breaking bigger functions with multiple data attributes and higher data into multiple small functions to improve the types. This was done to remove the unnecessary type assertions and improve the readability of the code.
-
#29947 Combining HTMLSelectElement & {type: "select-one"} into HTMLSelectOneElement.*
-
#31321 Show System bots in the typeahead list.
-
#31372 user_profile: Set original_values in show_user_profile.
-
#30997 Fix property name starred_message_counts
-
#30875 edit_embedded_bot: Check if service is defined.
-
#30734 user_profile: Pass correct element to toggle_submit_button.
-
#30154 settings_profile_field: Fix class selector.
Was introduced by me in #30018 because I forgot a
.resulting in css selector failing. -
#30145 settings_components: Rename subsection to $subsection_elem.
We planned to make some dummy data with consistent types, to make the migration easy in the future and to be able to pass the accurate data types in the functions to avoid any unnecessary errors.
#30831 test_stream: Setup make_stream function to create streams in node tests.
#frontend > typescript node tests
There's a lot of preparatory work left to do before node test migration including using the dummy data consistently over the node tests, figuring out a way instantiate the migration work etc.
Buddy reviews were an important part of our work, where we use to review the PRs of our peers. This helped us find bugs and mistakes in the PRs before getting reviewed by the maintainers and to understand the part of codebase in which we aren't even working. I reviewed multiple TS migration and other bug fixes PRs.
-
#30702 echo: Convert Module to TypeScript.
-
#31145 message_events_util: Convert Module to TypeScript.
-
#30412 stream_edit_subscribers: Convert Module to TypeScript.
-
#30018 stream_create_subscribers: Convert Module to TypeScript.
Migrating files to TypeScript was an exceptionally challenging task, primarily due to the complexity involved in understanding the existing JavaScript codebase and accurately translating it into TypeScript. Each file presented its own set of difficulties—understanding the logic, tracing type relationships, and ensuring compatibility with existing code. This wasn't just about changing file extensions; it required deep dives into the code, extensive debugging, and thorough reading of APIs to uncover the correct types.
The project was marked as "difficult" from the outset because every file needed careful preparation before it could be migrated. I had to consider whether functions could be rewritten to simplify the migration process, identify discrepancies between previously migrated types and the new ones, and sometimes even rewrite parts of the code to ensure smooth integration.
Finding the correct types was often the hardest part. It required not just relying on documentation but also digging deep into the code, using tools like console.log to trace how functions and objects interacted.
We are nearing the completion of this project after years of dedicated effort. We have successfully migrated a significant portion of the codebase to TypeScript, and I am optimistic that we will complete the project within the next few months. Looking ahead, I plan to continue contributing to ensure we reach the 100% mark and beyond, and to keep enhancing the project further.
My experience with Zulip over the past few months has been nothing short of transformative. Working on this project has been a journey filled with learning and growth, and the memories I've created with the community during my GSOC period are ones I will always cherish.
The project itself was incredibly engaging—migrating a codebase from JavaScript to TypeScript is no small feat and requires deep patience and understanding. This challenge only heightened my interest, as it allowed me to explore major parts of the codebase and truly grasp its intricacies.
What made this experience even more rewarding was the Zulip community. The support and warmth from everyone involved were exceptional. The admins, maintainers, and core team were all incredibly encouraging and kind, which motivated me to put forth my best effort and contribute meaningfully to the project.
A special thanks to Tim Abbott for his meticulous PR reviews and invaluable feedback, which helped refine my work to its best iteration. Additionally, I’m grateful to my buddy, Varun Singh, for reviewing my PRs, pointing out my mistakes, and being a supportive guide throughout my GSOC journey.