This repository contains scripts that Figma used to migrate its TypeScript codebase to use --strictNullChecks.

These scripts were originally forked from https://github.com/mjbvz/vscode-strict-null-check-migration-tools

How to use

These are scripts used in the incremental migration approach described in [https://www.figma.com/blog/inside-figma-a-case-study-on-strict-null-checks/].

Find Candidates

• npm run find-candidates -- <your_project_path>/tsconfig.strictNullChecks.json lists all the files whose dependencies have all been whitelisted. These files can be safely whitelisted too (once their strict null check errors have been fixed). It generates an output like this:

These files only depend on other files for which strictNullCheck has already been enabled.
The dependency count is approximate (this script only resolves up to third order imports).
- [ ] `"./figma_app/views/controls/scrubbable_control.tsx"` — Depended on by >**55** files (2 direct imports)
- [ ] `"./figma_app/plugin/jsvm_node_properties.ts"` — Depended on by >**52** files (3 direct imports)
- [ ] `"./figma_app/views/payments/banners/banners.tsx"` — Depended on by >**28** files (6 direct imports)
- [ ] `"./figma_app/views/file_browser/file_action_dropdown.tsx"` — Depended on by >**14** files (8 direct imports)
...

Auto Add Files

• npm run auto-add -- <your_project_path>/tsconfig.strictNullChecks.json tries to automatically add to tsconfig.strictNullChecks.json every file that can already compile with strictNullChecks without further modifications. It generates an output like this:

...
Trying to auto add 'figma_app/views/cart/address_elements.tsx' (file 25/48)
💥 - 25
Trying to auto add 'figma_app/views/cart/cart_celebration.tsx' (file 26/48)
💥 - 7
Trying to auto add 'figma_app/views/cart/number_of_editors.tsx' (file 27/48)
💥 - 7
...

Note:

• This script uses tsc --watch, but the file system does not always inform the watcher of file changes. This can lead to the auto-add script hanging.

• To fix this, in a separate terminal window, in the Extension project, run touch tsconfig.json. This should unfreeze the auto-add script.

  • You may have to do this multiple times before the script finishes running.

Find Dependency Cycles

• npm run find-cycles -- <your_project_path>/tsconfig.json finds all dependency cycles that need to be strict null checked together. Generates an output like this:

...
Found strongly connected component of size 3
    figma_app/lib/stripe.ts
    figma_app/models/payment.ts
    lib/initial_options.ts
Found strongly connected component of size 3
    figma_app/models/community_hub.ts
    figma_app/models/hub_file.ts
    figma_app/models/plugins.ts
Found 24 strongly connected components
Files not part of a strongly connected components (1974)
    admin_app/admin_app_entry.tsx
    admin_app/admin_middleware.ts
...

Visualize Progress

• npm run visualize generates visualization data for strict null check progress in data.js. In order to view that data, open progress.html, a self-contained HTML file. You can also run a more expensive version of this script npm run visualize -- --countErrors that tells you how many errors are needed to fix each eligible file, though it takes a long time to run because it needs to compile the codebase multiple times.