1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-23 02:10:12 +01:00
metamask-extension/development/ts-migration-dashboard/scripts/write-list-of-files-to-convert.ts

60 lines
1.6 KiB
TypeScript
Raw Normal View History

Add TypeScript migration dashboard (#13820) As we convert parts of the codebase to TypeScript, we will want a way to track progress. This commit adds a dashboard which displays all of the files that we wish to convert to TypeScript and which files we've already converted. The list of all possible files to convert is predetermined by walking the dependency graph of each entrypoint the build system uses to compile the extension (the files that the entrypoint imports, the files that the imports import, etc). The list should not need to be regenerated, but you can do it by running: yarn ts-migration:enumerate The dashboard is implemented as a separate React app. The CircleCI configuration has been updated so that when a new commit is pushed, the React app is built and stored in the CircleCI artifacts. When a PR is merged, the built files will be pushed to a separate repo whose sole purpose is to serve the dashboard via GitHub Pages (this is the same way that the Storybook works). All of the app code and script to build the app are self-contained under `development/ts-migration-dashboard`. To build this app yourself, you can run: yarn ts-migration:dashboard:build or if you want to build automatically as you change files, run: yarn ts-migration:dashboard:watch Then open the following file in your browser (there is no server component): development/ts-migration-dashboard/build/index.html Finally, although you shouldn't have to do this, to manually deploy the dashboard once built, you can run: git remote add ts-migration-dashboard git@github.com:MetaMask/metamask-extension-ts-migration-dashboard.git yarn ts-migration:dashboard:deploy
2022-08-09 22:16:08 +02:00
import path from 'path';
import fs from 'fs';
import fg from 'fast-glob';
import madge from 'madge';
import {
ROOT_DIRECTORY_PATH,
Add TypeScript migration dashboard (#13820) As we convert parts of the codebase to TypeScript, we will want a way to track progress. This commit adds a dashboard which displays all of the files that we wish to convert to TypeScript and which files we've already converted. The list of all possible files to convert is predetermined by walking the dependency graph of each entrypoint the build system uses to compile the extension (the files that the entrypoint imports, the files that the imports import, etc). The list should not need to be regenerated, but you can do it by running: yarn ts-migration:enumerate The dashboard is implemented as a separate React app. The CircleCI configuration has been updated so that when a new commit is pushed, the React app is built and stored in the CircleCI artifacts. When a PR is merged, the built files will be pushed to a separate repo whose sole purpose is to serve the dashboard via GitHub Pages (this is the same way that the Storybook works). All of the app code and script to build the app are self-contained under `development/ts-migration-dashboard`. To build this app yourself, you can run: yarn ts-migration:dashboard:build or if you want to build automatically as you change files, run: yarn ts-migration:dashboard:watch Then open the following file in your browser (there is no server component): development/ts-migration-dashboard/build/index.html Finally, although you shouldn't have to do this, to manually deploy the dashboard once built, you can run: git remote add ts-migration-dashboard git@github.com:MetaMask/metamask-extension-ts-migration-dashboard.git yarn ts-migration:dashboard:deploy
2022-08-09 22:16:08 +02:00
ENTRYPOINT_PATTERNS,
FILES_TO_CONVERT_PATH,
} from '../common/constants';
Add TypeScript migration dashboard (#13820) As we convert parts of the codebase to TypeScript, we will want a way to track progress. This commit adds a dashboard which displays all of the files that we wish to convert to TypeScript and which files we've already converted. The list of all possible files to convert is predetermined by walking the dependency graph of each entrypoint the build system uses to compile the extension (the files that the entrypoint imports, the files that the imports import, etc). The list should not need to be regenerated, but you can do it by running: yarn ts-migration:enumerate The dashboard is implemented as a separate React app. The CircleCI configuration has been updated so that when a new commit is pushed, the React app is built and stored in the CircleCI artifacts. When a PR is merged, the built files will be pushed to a separate repo whose sole purpose is to serve the dashboard via GitHub Pages (this is the same way that the Storybook works). All of the app code and script to build the app are self-contained under `development/ts-migration-dashboard`. To build this app yourself, you can run: yarn ts-migration:dashboard:build or if you want to build automatically as you change files, run: yarn ts-migration:dashboard:watch Then open the following file in your browser (there is no server component): development/ts-migration-dashboard/build/index.html Finally, although you shouldn't have to do this, to manually deploy the dashboard once built, you can run: git remote add ts-migration-dashboard git@github.com:MetaMask/metamask-extension-ts-migration-dashboard.git yarn ts-migration:dashboard:deploy
2022-08-09 22:16:08 +02:00
main().catch((error) => {
console.error(error);
process.exit(1);
});
/**
* The entrypoint to this script.
*
* Uses the `madge` package to traverse the dependency graph of a set of
* entrypoints (a combination of the ones that the build script uses to build
* the extension as well as a manually picked list), outputting a JSON array
* containing all JavaScript files that need to be converted to TypeScript.
*/
async function main(): Promise<void> {
const entrypoints = (
await Promise.all(
ENTRYPOINT_PATTERNS.map((entrypointPattern) => {
return fg(
path.resolve(ROOT_DIRECTORY_PATH, `${entrypointPattern}.{js,ts,tsx}`),
Add TypeScript migration dashboard (#13820) As we convert parts of the codebase to TypeScript, we will want a way to track progress. This commit adds a dashboard which displays all of the files that we wish to convert to TypeScript and which files we've already converted. The list of all possible files to convert is predetermined by walking the dependency graph of each entrypoint the build system uses to compile the extension (the files that the entrypoint imports, the files that the imports import, etc). The list should not need to be regenerated, but you can do it by running: yarn ts-migration:enumerate The dashboard is implemented as a separate React app. The CircleCI configuration has been updated so that when a new commit is pushed, the React app is built and stored in the CircleCI artifacts. When a PR is merged, the built files will be pushed to a separate repo whose sole purpose is to serve the dashboard via GitHub Pages (this is the same way that the Storybook works). All of the app code and script to build the app are self-contained under `development/ts-migration-dashboard`. To build this app yourself, you can run: yarn ts-migration:dashboard:build or if you want to build automatically as you change files, run: yarn ts-migration:dashboard:watch Then open the following file in your browser (there is no server component): development/ts-migration-dashboard/build/index.html Finally, although you shouldn't have to do this, to manually deploy the dashboard once built, you can run: git remote add ts-migration-dashboard git@github.com:MetaMask/metamask-extension-ts-migration-dashboard.git yarn ts-migration:dashboard:deploy
2022-08-09 22:16:08 +02:00
);
}),
)
).flat();
console.log(
`Traversing dependency trees for ${entrypoints.length} entrypoints, please wait...`,
);
const result = await madge(entrypoints, {
baseDir: ROOT_DIRECTORY_PATH,
Add TypeScript migration dashboard (#13820) As we convert parts of the codebase to TypeScript, we will want a way to track progress. This commit adds a dashboard which displays all of the files that we wish to convert to TypeScript and which files we've already converted. The list of all possible files to convert is predetermined by walking the dependency graph of each entrypoint the build system uses to compile the extension (the files that the entrypoint imports, the files that the imports import, etc). The list should not need to be regenerated, but you can do it by running: yarn ts-migration:enumerate The dashboard is implemented as a separate React app. The CircleCI configuration has been updated so that when a new commit is pushed, the React app is built and stored in the CircleCI artifacts. When a PR is merged, the built files will be pushed to a separate repo whose sole purpose is to serve the dashboard via GitHub Pages (this is the same way that the Storybook works). All of the app code and script to build the app are self-contained under `development/ts-migration-dashboard`. To build this app yourself, you can run: yarn ts-migration:dashboard:build or if you want to build automatically as you change files, run: yarn ts-migration:dashboard:watch Then open the following file in your browser (there is no server component): development/ts-migration-dashboard/build/index.html Finally, although you shouldn't have to do this, to manually deploy the dashboard once built, you can run: git remote add ts-migration-dashboard git@github.com:MetaMask/metamask-extension-ts-migration-dashboard.git yarn ts-migration:dashboard:deploy
2022-08-09 22:16:08 +02:00
});
const dependenciesByFilePath = result.obj();
const sortedFilePaths = Object.keys(dependenciesByFilePath)
.sort()
.filter((filePath) => {
return (
/\.(?:js|tsx?)$/u.test(filePath) &&
!/^(?:\.storybook|node_modules)\//u.test(filePath)
);
});
fs.writeFileSync(
FILES_TO_CONVERT_PATH,
JSON.stringify(sortedFilePaths, null, ' '),
);
console.log(
`${path.relative(process.cwd(), FILES_TO_CONVERT_PATH)} written with ${
sortedFilePaths.length
} modules.`,
);
}