FEI-4957.7: Generate .js.flow files from .d.ts files (#529)

## Summary:
We want to generate .js.flow files from our .d.ts files so that wonder-stuff packages can be used in codebases that are still using Flow.  This PR adds a build script to run flowgen on each .d.ts file in the dist folder of each package.

It also adds a script for removing .d.ts files that were generated from .test.ts files.  Both scripts are written in TypeScript and use swc-node/register to run.  I've added package.json scripts to make this easier.  I'll research this further to see if there's a nice shebang approach we can use in the future, but this should suffice for now.

Issue: FEI-4957

## Test plan:
- yarn clean
- yarn build:types
- yarn build:flowtypes
- See that .d.ts and .js.flow files have been added to each packages' dist folder
- See that there are no __tests__ folders in the dist folder
- Copy the dist folders for wonder-stuff-core and wonder-stuff-testing into the node_modules folder of wonder-blocks
- Restart flow in wonder-blocks, see that there are two Flow errors in wonder-blocks-icon (this is expected since the Flow types generated from the .d.ts files are different from the Flow types in the original code)

Author: kevinbarabash

Reviewers: jeresig, github-code-scanning[bot]

Required Reviewers:

Approved By: jeresig

Checks: ✅ CodeQL, ⌛ Lint, typecheck, and coverage check (ubuntu-latest, 16.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ✅ gerald, ⏭  dependabot, ✅ Analyze (javascript)

Pull Request URL: #529

.changeset/modern-turtles-invent.md

@@ -0,0 +1,10 @@
+---
+"@khanacademy/wonder-stuff-server-google": patch
+"@khanacademy/wonder-stuff-testing": patch
+"@khanacademy/wonder-stuff-sentry": patch
+"@khanacademy/wonder-stuff-server": patch
+"@khanacademy/wonder-stuff-core": patch
+"@khanacademy/wonder-stuff-i18n": patch
+---
+
+Generate Flow types from TypeScript types

.github/workflows/node-ci.yml

@@ -73,11 +73,10 @@ jobs:
       run: yarn build
 
     - name: Build Types
-      # There isn't an easy way for us to type check our tests without
-      # also including them in dist folder when we build the .d.ts files
-      # so we have to manually remove them.
-      # TODO(kevin): Figure out how to have the `build:types` script do this.
-      run: yarn build:types && rm -rf packages/*/dist/**/__tests__
+      run: yarn build:types
+
+    - name: Build Flow Types
+      run: yarn build:flowtypes
 
     # Linting / type checking
     - name: Eslint

build-scripts/gen-flow-types.ts

@@ -0,0 +1,18 @@
+import {execSync} from "child_process";
+import * as fg from "fast-glob";
+import * as path from "path";
+
+const rootDir = path.join(__dirname, "..");
+const files = fg.sync("packages/wonder-stuff-*/dist/**/*.d.ts", {cwd: rootDir});
+
+for (const inFile of files) {
+    const outFile = inFile.replace(".d.ts", ".js.flow");
+    const command = `yarn flowgen ${inFile} -o ${outFile} --add-flow-header`;
+
+    try {
+        execSync(command, {cwd: rootDir});
+        console.log(`✅ wrote: ${outFile}`);
+    } catch (e) {
+        console.log(`❌ error processing: ${inFile}: ${e}`);
+    }
+}

build-scripts/remove-test-types-from-dist.ts

@@ -0,0 +1,21 @@
+import * as fs from "fs";
+import * as fg from "fast-glob";
+import * as path from "path";
+
+const rootDir = path.join(__dirname, "..");
+const files = fg.sync("packages/wonder-stuff-*/dist/**/__tests__/*.d.ts", {
+    cwd: rootDir,
+});
+
+for (const file of files) {
+    fs.unlinkSync(path.join(rootDir, file));
+}
+
+const dirs = fg.sync("packages/wonder-stuff-*/dist/**/__tests__", {
+    cwd: rootDir,
+    onlyFiles: false,
+});
+
+for (const dir of dirs) {
+    fs.rmdirSync(path.join(rootDir, dir));
+}

package.json

@@ -28,6 +28,8 @@
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
+    "@swc-node/register": "^1.6.2",
+    "@swc/core": "^1.3.35",
     "@types/express": "^4.17.17",
     "@types/express-winston": "^4.0.0",
     "@types/jest": "^29.4.0",
@@ -53,6 +55,7 @@
     "fast-glob": "^3.2.12",
     "flow-bin": "^0.199.1",
     "flow-enums-runtime": "^0.0.6",
+    "flowgen": "^1.21.0",
     "heapdump": "^0.3.15",
     "jest": "^29.4.3",
     "jest-extended": "^3.2.3",
@@ -73,14 +76,15 @@
   "scripts": {
     "build": "rollup -c build-settings/rollup.config.js",
     "build:prodsizecheck": "rollup -c build-settings/rollup.config.js --configPlatforms='browser' --configFormats='esm' --configEnvironment='production'",
-    "build:types": "yarn tsc --build --verbose tsconfig-build.json",
+    "build:types": "yarn tsc --build --verbose tsconfig-build.json && node -r @swc-node/register build-scripts/remove-test-types-from-dist.ts",
+    "build:flowtypes": "node -r @swc-node/register build-scripts/gen-flow-types.ts",
     "watch": "rollup -c build-settings/rollup.config.js --watch",
     "clean": "rm -rf packages/wonder-stuff-*/dist && rm -rf packages/wonder-stuff-*/node_modules && rm -f packages/*/tsconfig.tsbuildinfo",
     "coverage": "yarn run jest --coverage",
     "format": "prettier --write .",
     "lint": "eslint --config .eslintrc.js packages",
     "lint:ci": "eslint --config .eslintrc.js",
-    "publish:ci": "node utils/pre-publish-check-ci.js && git diff --stat --exit-code HEAD && yarn build && changeset publish",
+    "publish:ci": "node utils/pre-publish-check-ci.js && git diff --stat --exit-code HEAD && yarn build && yarn build:types && yarn build:flowtypes && changeset publish",
     "test": "yarn jest",
     "typecheck": "tsc --project tsconfig-check.json",
     "nochangeset": "yarn changeset add --empty"