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
feature/default_network_editable
Elliot Winkler
2 years ago
committed by
GitHub
parent
3694afd41e
commit
a7d98b695f
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,336 @@ |
||||
import fs from 'fs'; |
||||
import path from 'path'; |
||||
import fg from 'fast-glob'; |
||||
import madge from 'madge'; |
||||
import { |
||||
BASE_DIRECTORY, |
||||
ENTRYPOINT_PATTERNS, |
||||
FILES_TO_CONVERT_PATH, |
||||
} from './constants'; |
||||
|
||||
/** |
||||
* Represents a module that has been imported somewhere in the codebase. |
||||
* |
||||
* @property id - The name of a file or NPM module.
|
||||
* @property dependents - The modules which are imported by this module.
|
||||
* @property level - How many modules it takes to import this module (from the |
||||
* root of the dependency tree). |
||||
* @property isExternal - Whether the module refers to a NPM module.
|
||||
* @property hasBeenConverted - Whether the module was one of the files we |
||||
* wanted to convert to TypeScript and has been converted. |
||||
*/ |
||||
type Module = { |
||||
id: string; |
||||
dependents: Module[]; |
||||
level: number; |
||||
isExternal: boolean; |
||||
hasBeenConverted: boolean; |
||||
}; |
||||
|
||||
/** |
||||
* Represents a set of modules that sit at a certain level within the final |
||||
* dependency tree. |
||||
* |
||||
* @property level - How many modules it takes to import this module (from the |
||||
* root of the dependency tree). |
||||
* @property children - The modules that share this same level. |
||||
* @property children[].name - The name of the item being imported. |
||||
* @property children[].hasBeenConverted - Whether or not the module (assuming |
||||
* that it is a file in our codebase) has been converted to TypeScript. |
||||
*/ |
||||
export type ModulePartition = { |
||||
level: number; |
||||
children: { |
||||
name: string; |
||||
hasBeenConverted: boolean; |
||||
}[]; |
||||
}; |
||||
|
||||
/** |
||||
* Uses the `madge` package to traverse the dependency graphs assembled from a |
||||
* set of entrypoints (a combination of the entrypoints that the build script |
||||
* uses to build the extension as well as a manually picked list), builds a |
||||
* combined dependency tree, then arranges the nodes of that tree by level, |
||||
* which is the number of files it takes to reach a file within the whole tree. |
||||
* |
||||
* @returns An array of objects which can be used to render the dashboard, where |
||||
* each object represents a group of files at a certain level in the dependency |
||||
* tree. |
||||
*/ |
||||
export default async function buildModulePartitions(): Promise< |
||||
ModulePartition[] |
||||
> { |
||||
const allowedFilePaths = readFilesToConvert(); |
||||
|
||||
const possibleEntryFilePaths = ( |
||||
await Promise.all( |
||||
ENTRYPOINT_PATTERNS.map((entrypointPattern) => { |
||||
return fg( |
||||
path.resolve(BASE_DIRECTORY, `${entrypointPattern}.{js,ts,tsx}`), |
||||
); |
||||
}), |
||||
) |
||||
).flat(); |
||||
|
||||
const entryFilePaths = filterFilePaths( |
||||
possibleEntryFilePaths.map((possibleEntrypoint) => |
||||
path.relative(BASE_DIRECTORY, possibleEntrypoint), |
||||
), |
||||
allowedFilePaths, |
||||
); |
||||
|
||||
const result = await madge(entryFilePaths, { |
||||
baseDir: BASE_DIRECTORY, |
||||
tsConfig: path.join(BASE_DIRECTORY, 'tsconfig.json'), |
||||
}); |
||||
const dependenciesByFilePath = result.obj(); |
||||
const modulesById = buildModulesWithLevels( |
||||
dependenciesByFilePath, |
||||
entryFilePaths, |
||||
allowedFilePaths, |
||||
); |
||||
return partitionModulesByLevel(modulesById); |
||||
} |
||||
|
||||
/** |
||||
* Returns the contents of a JSON file that stores the names of the files that |
||||
* we plan on converting to TypeScript. All of the dependency information |
||||
* will be filtered through this list. |
||||
*/ |
||||
function readFilesToConvert(): string[] { |
||||
try { |
||||
return JSON.parse(fs.readFileSync(FILES_TO_CONVERT_PATH, 'utf-8')); |
||||
} catch (error: unknown) { |
||||
throw new Error( |
||||
'Could not read or parse list of files to convert. ' + |
||||
'Have you tried running the following command?\n\n' + |
||||
' yarn ts-migration:enumerate\n\n' + |
||||
`Original error: ${error}`, |
||||
); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Filters the given set of file paths according to the given allow list. As the |
||||
* entry file paths could refer to TypeScript files, and the allow list is |
||||
* guaranteed to be JavaScript files, the entry file paths are normalized to end |
||||
* in `.js` before being filtered. |
||||
* |
||||
* @param filePaths - A set of file paths. |
||||
* @param allowedFilePaths - A set of allowed file paths. |
||||
* @returns The filtered file paths. |
||||
*/ |
||||
function filterFilePaths(filePaths: string[], allowedFilePaths: string[]) { |
||||
return filePaths.filter((filePath) => |
||||
allowedFilePaths.includes(filePath.replace(/\.tsx?$/u, '.js')), |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* This function takes a flat data structure that represents the dependency |
||||
* graph of a system. It traverses the graph, converting it to a tree (i.e., |
||||
* resolving circular dependencies), but where any node of the tree is |
||||
* accessible immediately. The "level" of a dependency — how many other |
||||
* dependencies it takes to reach that dependency — is also recorded. |
||||
* |
||||
* @param dependenciesByModuleId - An object that maps a file path in the |
||||
* dependency graph to the dependencies that it imports. This information is |
||||
* provided by the `madge` package. |
||||
* @param entryModuleIds - File paths which will initiate the traversal through |
||||
* the dependency graph. These file paths will always be level 0. |
||||
* @param allowedFilePaths - The list of original JavaScript files to |
||||
* convert to TypeScript; governs which files will end up in the final |
||||
* dependency graph. |
||||
* @returns A data structure that maps the id of a module in the dependency |
||||
* graph to an object that represents that module.
|
||||
*/ |
||||
function buildModulesWithLevels( |
||||
dependenciesByModuleId: Record<string, string[]>, |
||||
entryModuleIds: string[], |
||||
allowedFilePaths: string[], |
||||
): Record<string, Module> { |
||||
// Our overall goal is that we want to partition the graph into different
|
||||
// sections. We want to find the leaves of the graph — that is, files that
|
||||
// depend on no other files — then the dependents of the leaves — those files
|
||||
// that depend on the leaves — then the dependents of the dependents, etc. We
|
||||
// can derive this information by traversing the graph, and for each module we
|
||||
// encounter, recording the number of modules it takes to reach that module.
|
||||
// We call this number the **level**.
|
||||
//
|
||||
// We will discuss a couple of optimizations we've made to ensure that graph
|
||||
// traversal is performant.
|
||||
//
|
||||
// Naively, in order to calculate the level of each module, we need to follow
|
||||
// that module's dependencies, then the dependencies of the dependencies,
|
||||
// etc., until we hit leaves. Essentially, we need to follow each connection
|
||||
// in the graph. However, this creates a performance problem, because in a
|
||||
// large system a file could get imported multiple ways (this is the nature of
|
||||
// a graph: each node can have multiple incoming connections and multiple
|
||||
// outgoing connections). For instance:
|
||||
//
|
||||
// - `foo.js` could import `bar.js` which could import `baz.js`
|
||||
// - `foo.js` could also import `baz.js` directly
|
||||
// - `foo.js` could also import `bar.js` which imports `qux.js` which imports `baz.js`
|
||||
//
|
||||
// In this case, even if there are few modules in a system, a subset of those
|
||||
// modules may be visited multiple times in the course of traversing
|
||||
// connections between all of them. This is costly and unnecessary.
|
||||
//
|
||||
// To address this, as we are traversing the graph, we record modules we've
|
||||
// visited along with the level when we visited it. If we encounter a module
|
||||
// again through some other path, and the level this time is less than the
|
||||
// level we've already recorded, then we know we don't need to revisit that
|
||||
// module or — crucially — any of its dependencies. Therefore we can skip
|
||||
// whole sections of the graph.
|
||||
//
|
||||
// In addition, in a large enough system, some files could import files that end
|
||||
// up importing themselves later on:
|
||||
//
|
||||
// - `foo.js` could import `bar.js`, which imports `baz.js`, which imports `foo.js`, which...
|
||||
//
|
||||
// These are called circular dependencies, and we detect them by tracking the
|
||||
// files that depend on a file (dependents) in addition to the files on which
|
||||
// that file depends (dependencies). In the example above, `baz.js` has a
|
||||
// dependency `foo.js`, and its chain of dependents is `bar.js` -> `foo.js`
|
||||
// (working backward from `baz.js`). The chain of dependents of `baz.js`
|
||||
// includes `foo.js`, so we say `foo.js` is a circular dependency of `baz.js`,
|
||||
// and we don't need to follow it.
|
||||
|
||||
const modulesToFill: Module[] = entryModuleIds.map((moduleId) => { |
||||
return { |
||||
id: moduleId, |
||||
dependents: [], |
||||
level: 0, |
||||
isExternal: false, |
||||
hasBeenConverted: /\.tsx?$/u.test(moduleId), |
||||
}; |
||||
}); |
||||
const modulesById: Record<string, Module> = {}; |
||||
|
||||
while (modulesToFill.length > 0) { |
||||
const currentModule = modulesToFill.shift() as Module; |
||||
const childModulesToFill: Module[] = []; |
||||
(dependenciesByModuleId[currentModule.id] ?? []).forEach( |
||||
(givenChildModuleId) => { |
||||
const npmPackageMatch = givenChildModuleId.match( |
||||
/^node_modules\/(?:(@[^/]+)\/)?([^/]+)\/.+$/u, |
||||
); |
||||
|
||||
let childModuleId; |
||||
if (npmPackageMatch) { |
||||
childModuleId = |
||||
npmPackageMatch[1] === undefined |
||||
? `${npmPackageMatch[2]}` |
||||
: `${npmPackageMatch[1]}/${npmPackageMatch[2]}`; |
||||
} else { |
||||
childModuleId = givenChildModuleId; |
||||
} |
||||
|
||||
// Skip circular dependencies
|
||||
if ( |
||||
findDirectAndIndirectDependentIdsOf(currentModule).has(childModuleId) |
||||
) { |
||||
return; |
||||
} |
||||
|
||||
// Skip files that weren't on the original list of JavaScript files to
|
||||
// convert, as we don't want them to show up on the status dashboard
|
||||
if ( |
||||
!npmPackageMatch && |
||||
!allowedFilePaths.includes(childModuleId.replace(/\.tsx?$/u, '.js')) |
||||
) { |
||||
return; |
||||
} |
||||
|
||||
const existingChildModule = modulesById[childModuleId]; |
||||
|
||||
if (existingChildModule === undefined) { |
||||
const childModule: Module = { |
||||
id: childModuleId, |
||||
dependents: [currentModule], |
||||
level: currentModule.level + 1, |
||||
isExternal: Boolean(npmPackageMatch), |
||||
hasBeenConverted: /\.tsx?$/u.test(childModuleId), |
||||
}; |
||||
childModulesToFill.push(childModule); |
||||
} else { |
||||
if (currentModule.level + 1 > existingChildModule.level) { |
||||
existingChildModule.level = currentModule.level + 1; |
||||
// Update descendant modules' levels
|
||||
childModulesToFill.push(existingChildModule); |
||||
} else { |
||||
// There is no point in descending into dependencies of this module
|
||||
// if the new level of the module would be <= the existing level,
|
||||
// because all of the dependencies from this point on are guaranteed
|
||||
// to have a higher level and are therefore already at the right
|
||||
// level.
|
||||
} |
||||
|
||||
if (!existingChildModule.dependents.includes(currentModule)) { |
||||
existingChildModule.dependents.push(currentModule); |
||||
} |
||||
} |
||||
}, |
||||
); |
||||
if (childModulesToFill.length > 0) { |
||||
modulesToFill.push(...childModulesToFill); |
||||
} |
||||
if (!(currentModule.id in modulesById)) { |
||||
modulesById[currentModule.id] = currentModule; |
||||
} |
||||
} |
||||
|
||||
return modulesById; |
||||
} |
||||
|
||||
/** |
||||
* Given a file in the dependency graph, returns all of the names of the files |
||||
* which import that file directly or through some other file. |
||||
* |
||||
* @param module - A module in the graph. |
||||
* @returns The ids of the modules which are incoming connections to |
||||
* the module.
|
||||
*/ |
||||
function findDirectAndIndirectDependentIdsOf(module: Module): Set<string> { |
||||
const modulesToProcess = [module]; |
||||
const allDependentIds = new Set<string>(); |
||||
while (modulesToProcess.length > 0) { |
||||
const currentModule = modulesToProcess.shift() as Module; |
||||
currentModule.dependents.forEach((dependent) => { |
||||
if (!allDependentIds.has(dependent.id)) { |
||||
allDependentIds.add(dependent.id); |
||||
modulesToProcess.push(dependent); |
||||
} |
||||
}); |
||||
} |
||||
return allDependentIds; |
||||
} |
||||
|
||||
/** |
||||
* Partitions modules in the dependency graph by level (see {@link buildModulesWithLevels} |
||||
* for an explanation). This will be used to render those modules on the |
||||
* dashboard in groups. |
||||
* |
||||
* @param modulesById - An object that maps the id of a module to an object that |
||||
* represents that module.
|
||||
* @returns An array where each item represents a level and is the module ids
|
||||
* that match that level, sorted by largest level (leaves) to smallest level |
||||
* (roots). |
||||
*/ |
||||
function partitionModulesByLevel( |
||||
modulesById: Record<string, Module>, |
||||
): ModulePartition[] { |
||||
const levels = Object.values(modulesById).map((module) => module.level); |
||||
const maxLevel = Math.max(...levels); |
||||
const modulePartitions: ModulePartition[] = []; |
||||
for (let i = 0; i <= maxLevel; i++) { |
||||
modulePartitions[i] = { level: i + 1, children: [] }; |
||||
} |
||||
Object.values(modulesById).forEach((module) => { |
||||
modulePartitions[module.level].children.push({ |
||||
name: module.id, |
||||
hasBeenConverted: module.hasBeenConverted, |
||||
}); |
||||
}); |
||||
return modulePartitions.reverse(); |
||||
} |
||||
@ -0,0 +1,227 @@ |
||||
import path from 'path'; |
||||
import fs from 'fs-extra'; |
||||
import yargs from 'yargs/yargs'; |
||||
import { hideBin } from 'yargs/helpers'; |
||||
import chokidar from 'chokidar'; |
||||
import browserify from 'browserify'; |
||||
import pify from 'pify'; |
||||
import endOfStream from 'end-of-stream'; |
||||
import pump from 'pump'; |
||||
import gulp from 'gulp'; |
||||
import gulpDartSass from 'gulp-dart-sass'; |
||||
import sourcemaps from 'gulp-sourcemaps'; |
||||
import autoprefixer from 'gulp-autoprefixer'; |
||||
import fg from 'fast-glob'; |
||||
import buildModulePartitions from './build-module-partitions'; |
||||
|
||||
const promisifiedPump = pify(pump); |
||||
const projectDirectoryPath = path.resolve(__dirname, '../'); |
||||
const sourceDirectoryPath = path.join(projectDirectoryPath, 'src'); |
||||
const intermediateDirectoryPath = path.join( |
||||
projectDirectoryPath, |
||||
'intermediate', |
||||
); |
||||
const buildDirectoryPath = path.join(projectDirectoryPath, 'build'); |
||||
|
||||
main().catch((error) => { |
||||
console.error(error); |
||||
process.exit(1); |
||||
}); |
||||
|
||||
/** |
||||
* Compiles a set of files that we want to convert to TypeScript, divided by |
||||
* level in the dependency tree. |
||||
* |
||||
* @param dest - The directory in which to hold the file. |
||||
*/ |
||||
async function generateIntermediateFiles(dest: string) { |
||||
const partitions = await buildModulePartitions(); |
||||
const partitionsFile = path.resolve(dest, 'partitions.json'); |
||||
await pify(fs.writeFile)( |
||||
partitionsFile, |
||||
JSON.stringify(partitions, null, ' '), |
||||
); |
||||
|
||||
console.log( |
||||
`- Wrote intermediate partitions file: ${path.relative( |
||||
projectDirectoryPath, |
||||
partitionsFile, |
||||
)}`,
|
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Compiles the JavaScript code for the dashboard. |
||||
* |
||||
* @param src - The path to the JavaScript entrypoint. |
||||
* @param dest - The path to the compiled and bundled JavaScript file. |
||||
*/ |
||||
async function compileScripts(src: string, dest: string) { |
||||
const extensions = ['.js', '.ts', '.tsx']; |
||||
const browserifyOptions: Record<string, unknown> = { |
||||
extensions, |
||||
// Use entryFilepath for moduleIds, easier to determine origin file
|
||||
fullPaths: true, |
||||
// For sourcemaps
|
||||
debug: true, |
||||
}; |
||||
const bundler = browserify(browserifyOptions); |
||||
bundler.add(src); |
||||
// Run TypeScript files through Babel
|
||||
bundler.transform('babelify', { extensions }); |
||||
// Inline `fs.readFileSync` files
|
||||
bundler.transform('brfs'); |
||||
|
||||
const bundleStream = bundler.bundle(); |
||||
bundleStream.pipe(fs.createWriteStream(dest)); |
||||
bundleStream.on('error', (error: Error) => { |
||||
throw error; |
||||
}); |
||||
await pify(endOfStream(bundleStream)); |
||||
|
||||
console.log( |
||||
`- Compiled scripts: ${path.relative( |
||||
projectDirectoryPath, |
||||
src, |
||||
)} -> ${path.relative(projectDirectoryPath, dest)}`,
|
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Compiles the CSS code for the dashboard. |
||||
* |
||||
* @param src - The path to the CSS file. |
||||
* @param dest - The path to the compiled CSS file. |
||||
*/ |
||||
async function compileStylesheets(src: string, dest: string): Promise<void> { |
||||
await promisifiedPump( |
||||
gulp.src(src), |
||||
sourcemaps.init(), |
||||
gulpDartSass().on('error', (error: unknown) => { |
||||
throw error; |
||||
}), |
||||
autoprefixer(), |
||||
sourcemaps.write(), |
||||
gulp.dest(dest), |
||||
); |
||||
console.log( |
||||
`- Compiled stylesheets: ${path.relative( |
||||
projectDirectoryPath, |
||||
src, |
||||
)} -> ${path.relative(projectDirectoryPath, dest)}`,
|
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Copies static files (images and the index HTML file) to the build directory. |
||||
* |
||||
* @param src - The path to the directory that holds the static files. |
||||
* @param dest - The path where they should be copied. |
||||
*/ |
||||
async function copyStaticFiles(src: string, dest: string): Promise<void> { |
||||
const entries = await fg([path.join(src, '*')], { |
||||
onlyFiles: false, |
||||
}); |
||||
await Promise.all( |
||||
entries.map(async (srcEntry) => { |
||||
const destEntry = path.join(dest, path.basename(srcEntry)); |
||||
await fs.copy(srcEntry, destEntry); |
||||
console.log( |
||||
`- Copied static files: ${path.relative( |
||||
projectDirectoryPath, |
||||
srcEntry, |
||||
)} -> ${path.relative(projectDirectoryPath, destEntry)}`,
|
||||
); |
||||
}), |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Generates a compiled and bundled version of the dashboard ready for |
||||
* distribution. |
||||
* |
||||
* @param options - The options. |
||||
* @param options.isInitial - Whether this is the first time this function has |
||||
* been called (if we are watching for file changes, we may call this function |
||||
* multiple times). |
||||
* @param options.isOnly - Whether this will be the only time this function will |
||||
* be called (if we are not watching for file changes, then this will never be |
||||
* called again). |
||||
*/ |
||||
async function rebuild({ |
||||
isInitial = false, |
||||
isOnly = false, |
||||
} = {}): Promise<void> { |
||||
if (isInitial && !isOnly) { |
||||
console.log('Running initial build, please wait (may take a bit)...'); |
||||
} |
||||
|
||||
if (!isInitial) { |
||||
console.log('Detected change, rebuilding...'); |
||||
} |
||||
|
||||
await fs.emptyDir(buildDirectoryPath); |
||||
|
||||
try { |
||||
if (isInitial) { |
||||
await fs.emptyDir(intermediateDirectoryPath); |
||||
await generateIntermediateFiles(intermediateDirectoryPath); |
||||
} |
||||
|
||||
await compileScripts( |
||||
path.join(sourceDirectoryPath, 'index.tsx'), |
||||
path.join(buildDirectoryPath, 'index.js'), |
||||
); |
||||
await compileStylesheets( |
||||
path.join(sourceDirectoryPath, 'index.scss'), |
||||
path.join(buildDirectoryPath), |
||||
); |
||||
await copyStaticFiles( |
||||
path.join(sourceDirectoryPath, 'public'), |
||||
path.join(buildDirectoryPath), |
||||
); |
||||
} catch (error: unknown) { |
||||
console.error(error); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* The entrypoint to this script. Parses command-line arguments, then, depending |
||||
* on whether `--watch` was given, either starts a file watcher, after which the |
||||
* dashboard will be built on file changes, or builds the dashboard immediately. |
||||
*/ |
||||
async function main() { |
||||
const opts = yargs(hideBin(process.argv)) |
||||
.usage('Usage: $0 [options]') |
||||
.option('watch', { |
||||
alias: 'w', |
||||
type: 'boolean', |
||||
description: 'Automatically build when there are changes', |
||||
}) |
||||
.help('h') |
||||
.alias('h', 'help') |
||||
.parseSync(); |
||||
|
||||
console.log(`Working directory: ${projectDirectoryPath}`); |
||||
|
||||
if (opts.watch) { |
||||
const rebuildIgnoringErrors = () => { |
||||
rebuild().catch((error: Error) => { |
||||
console.error(error); |
||||
}); |
||||
}; |
||||
chokidar |
||||
.watch(path.join(sourceDirectoryPath, '**/*.{html,ts,tsx,scss}'), { |
||||
ignoreInitial: true, |
||||
}) |
||||
.on('add', rebuildIgnoringErrors) |
||||
.on('change', rebuildIgnoringErrors) |
||||
.on('unlink', rebuildIgnoringErrors) |
||||
.on('error', (error: unknown) => { |
||||
console.error(error); |
||||
}); |
||||
await rebuild({ isInitial: true, isOnly: false }); |
||||
} else { |
||||
await rebuild({ isInitial: true, isOnly: true }); |
||||
} |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
import path from 'path'; |
||||
|
||||
export const BASE_DIRECTORY = path.resolve(__dirname, '../../..'); |
||||
export const ENTRYPOINT_PATTERNS = [ |
||||
'app/scripts/background', |
||||
'app/scripts/contentscript', |
||||
'app/scripts/disable-console', |
||||
'app/scripts/inpage', |
||||
'app/scripts/phishing-detect', |
||||
'app/scripts/sentry-install', |
||||
'app/scripts/ui', |
||||
'development/build/index', |
||||
'**/*.stories', |
||||
'**/*.test', |
||||
]; |
||||
export const FILES_TO_CONVERT_PATH = path.join( |
||||
__dirname, |
||||
'../files-to-convert.json', |
||||
); |
||||
@ -0,0 +1,59 @@ |
||||
import path from 'path'; |
||||
import fs from 'fs'; |
||||
import fg from 'fast-glob'; |
||||
import madge from 'madge'; |
||||
import { |
||||
BASE_DIRECTORY, |
||||
ENTRYPOINT_PATTERNS, |
||||
FILES_TO_CONVERT_PATH, |
||||
} from './constants'; |
||||
|
||||
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(BASE_DIRECTORY, `${entrypointPattern}.{js,ts,tsx}`), |
||||
); |
||||
}), |
||||
) |
||||
).flat(); |
||||
console.log( |
||||
`Traversing dependency trees for ${entrypoints.length} entrypoints, please wait...`, |
||||
); |
||||
const result = await madge(entrypoints, { |
||||
baseDir: BASE_DIRECTORY, |
||||
}); |
||||
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.`,
|
||||
); |
||||
} |
||||
@ -0,0 +1,157 @@ |
||||
import React from 'react'; |
||||
import classnames from 'classnames'; |
||||
import { Tooltip as ReactTippy } from 'react-tippy'; |
||||
import { ModulePartition } from '../scripts/build-module-partitions'; |
||||
|
||||
// The `brfs` transform for browserify calls `fs.readLineSync` and
|
||||
// `path.resolve` at build time and inlines file contents into the source code.
|
||||
// To accomplish this we have to bring in `fs` and `path` using `require` and
|
||||
// not `import`. This is weird in a TypeScript file, and typescript-eslint
|
||||
// (rightly) complains about this, but it's actually okay because the above
|
||||
// `import` lines will actually get turned into `require`s anyway before passing
|
||||
// through the rest of browserify. However, `brfs` should handle this. There is
|
||||
// an active bug for this, but there isn't a known workaround yet:
|
||||
// <https://github.com/browserify/brfs/issues/39>
|
||||
/* eslint-disable-next-line @typescript-eslint/no-require-imports,@typescript-eslint/no-var-requires */ |
||||
const fs = require('fs'); |
||||
/* eslint-disable-next-line @typescript-eslint/no-require-imports,@typescript-eslint/no-var-requires */ |
||||
const path = require('path'); |
||||
|
||||
type Summary = { |
||||
numConvertedFiles: number; |
||||
numFiles: number; |
||||
}; |
||||
|
||||
function calculatePercentageComplete(summary: Summary) { |
||||
return ((summary.numConvertedFiles / summary.numFiles) * 100).toFixed(1); |
||||
} |
||||
|
||||
export default function App() { |
||||
const partitions = JSON.parse( |
||||
fs.readFileSync( |
||||
path.resolve(__dirname, '../intermediate/partitions.json'), |
||||
{ |
||||
encoding: 'utf-8', |
||||
}, |
||||
), |
||||
) as ModulePartition[]; |
||||
|
||||
const allFiles = partitions.flatMap((partition) => { |
||||
return partition.children; |
||||
}); |
||||
const overallTotal = { |
||||
numConvertedFiles: allFiles.filter((file) => file.hasBeenConverted).length, |
||||
numFiles: allFiles.length, |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
<h1 className="page-header"> |
||||
<img src="images/metamask-fox.svg" className="page-header__icon" /> |
||||
Extension TypeScript Migration Status |
||||
</h1> |
||||
<h2 |
||||
className="overall-summary" |
||||
style={{ |
||||
'--progress': `${calculatePercentageComplete(overallTotal)}%`, |
||||
}} |
||||
> |
||||
OVERALL: {overallTotal.numConvertedFiles}/{overallTotal.numFiles} ( |
||||
{calculatePercentageComplete(overallTotal)}%) |
||||
</h2> |
||||
<details className="help"> |
||||
<summary className="help__question">What is this?</summary> |
||||
<div className="help__answer"> |
||||
<p> |
||||
This is a dashboard that tracks the status of converting the |
||||
extension codebase from JavaScript to TypeScript. It is updated |
||||
whenever a new commit is pushed to the codebase, so it always |
||||
represents the current work. |
||||
</p> |
||||
|
||||
<p> |
||||
Each box |
||||
<div className="file file--inline file--to-be-converted"> |
||||
|
||||
</div> |
||||
on this page represents a file that either we want to convert or |
||||
we've already converted to TypeScript (hover over a box to see the |
||||
filename). Boxes that are |
||||
<div className="file file--inline file--to-be-converted file--test"> |
||||
|
||||
</div> |
||||
greyed out are test or Storybook files. |
||||
</p> |
||||
|
||||
<p> |
||||
These boxes are further partitioned by <em>level</em>. The level of |
||||
a file is how many files you have to import before you reach that |
||||
file in the whole codebase. For instance, if we have a file{' '} |
||||
<code>foo.js</code>, and that file imports <code>bar.js</code> and{' '} |
||||
<code>baz.js</code>, and <code>baz.js</code> imports{' '} |
||||
<code>qux.js</code>, then: |
||||
</p> |
||||
|
||||
<ul> |
||||
<li> |
||||
<code>foo.js</code> would be at <em>level 1</em> |
||||
</li> |
||||
<li> |
||||
<code>bar.js</code> and <code>baz.js</code> would be at{' '} |
||||
<em>level 2</em> |
||||
</li> |
||||
<li> |
||||
<code>qux.js</code> would be at <em>level 3</em> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
This level assignment can be used to determine a priority for |
||||
converting the remaining JavaScript files. Files which have fewer |
||||
dependencies should in theory be easier to convert, so files with a |
||||
higher level should be converted first. In other words,{' '} |
||||
<strong> |
||||
you should be able to start from the top and go down |
||||
</strong> |
||||
. |
||||
</p> |
||||
</div> |
||||
</details> |
||||
<div className="levels"> |
||||
{partitions.map((partition) => { |
||||
return ( |
||||
<div key={partition.level} className="level"> |
||||
<div className="level__name">level {partition.level}</div> |
||||
<div className="level__children"> |
||||
{partition.children.map(({ name, hasBeenConverted }) => { |
||||
const isTest = /\.test\.(?:js|tsx?)/u.test(name); |
||||
const isStorybookFile = /\.stories\.(?:js|tsx?)/u.test(name); |
||||
return ( |
||||
<ReactTippy |
||||
key={name} |
||||
title={name} |
||||
arrow={true} |
||||
animation="fade" |
||||
duration={250} |
||||
className="file__tooltipped" |
||||
style={{ display: 'block' }} |
||||
> |
||||
<div |
||||
className={classnames('file', { |
||||
'file--has-been-converted': hasBeenConverted, |
||||
'file--to-be-converted': !hasBeenConverted, |
||||
'file--test': isTest, |
||||
'file--storybook': isStorybookFile, |
||||
})} |
||||
/> |
||||
</ReactTippy> |
||||
); |
||||
})} |
||||
</div> |
||||
</div> |
||||
); |
||||
})} |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,191 @@ |
||||
@import '../../../ui/css/reset'; |
||||
@import './tippy'; |
||||
|
||||
/* Native elements */ |
||||
|
||||
* { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
html { |
||||
font-family: |
||||
-apple-system, |
||||
BlinkMacSystemFont, |
||||
"Segoe UI", |
||||
Helvetica, |
||||
Arial, |
||||
sans-serif, |
||||
"Apple Color Emoji", |
||||
"Segoe UI Emoji"; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
body { |
||||
padding: 2rem; |
||||
} |
||||
|
||||
p:not(:last-child) { |
||||
margin-bottom: 1rem; |
||||
} |
||||
|
||||
code { |
||||
font-size: 0.85em; |
||||
font-family: |
||||
ui-monospace, |
||||
SFMono-Regular, |
||||
SF Mono, |
||||
Menlo, |
||||
Consolas, |
||||
Liberation Mono, |
||||
monospace; |
||||
} |
||||
|
||||
strong { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
em { |
||||
font-style: italic; |
||||
} |
||||
|
||||
ul { |
||||
list-style: disc; |
||||
margin-bottom: 1rem; |
||||
margin-left: 1rem; |
||||
} |
||||
|
||||
/* Custom elements */ |
||||
|
||||
:root { |
||||
--blue-gray-350: hsl(209deg 13.7% 62.4%); |
||||
--blue-gray-100: hsl(209.8deg 16.5% 89%); |
||||
--green: hsl(113deg 100% 38%); |
||||
} |
||||
|
||||
.page-header { |
||||
font-size: 2rem; |
||||
font-weight: bold; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
&__icon { |
||||
height: 1em; |
||||
margin-right: 0.5em; |
||||
} |
||||
} |
||||
|
||||
.overall-summary { |
||||
font-size: 1.5rem; |
||||
line-height: 1.5rem; |
||||
padding: 1rem; |
||||
margin: 2rem 0; |
||||
background: linear-gradient(90deg, var(--green) 0% var(--progress), var(--blue-gray-350) var(--progress) 100%) no-repeat; |
||||
border: 2px solid rgb(0 0 0 / 50%); |
||||
color: white; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.help { |
||||
margin-bottom: 2rem; |
||||
color: black; |
||||
line-height: 1.5rem; |
||||
background-color: #ffffc8; |
||||
border: 1px solid rgb(0 0 0 / 25%); |
||||
max-width: 40rem; |
||||
|
||||
[open] { |
||||
padding: 1rem; |
||||
} |
||||
|
||||
&__question { |
||||
font-weight: bold; |
||||
cursor: pointer; |
||||
font-size: 1.1rem; |
||||
padding: 1rem; |
||||
} |
||||
|
||||
&__answer { |
||||
padding: 0 1rem 1rem; |
||||
} |
||||
} |
||||
|
||||
.section-header { |
||||
font-size: 1.25rem; |
||||
line-height: 1.25rem; |
||||
padding: 0.75rem; |
||||
color: white; |
||||
background: linear-gradient(90deg, var(--green) 0% var(--progress), var(--blue-gray-350) var(--progress) 100%) no-repeat; |
||||
border-bottom: 1px solid rgb(0 0 0 / 50%); |
||||
|
||||
&--primary { |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
|
||||
.section { |
||||
margin-bottom: 2rem; |
||||
border: 1px solid rgb(0 0 0 / 50%); |
||||
} |
||||
|
||||
.level { |
||||
display: flex; |
||||
gap: 0.5rem; |
||||
margin-bottom: 1rem; |
||||
|
||||
&__name { |
||||
writing-mode: vertical-rl; |
||||
font-size: 0.75rem; |
||||
padding: 0.75rem 0; |
||||
} |
||||
|
||||
&__children { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 0.75rem; |
||||
padding: 1rem; |
||||
border: 1px dotted gray; |
||||
border-radius: 0.5rem; |
||||
height: fit-content; |
||||
} |
||||
} |
||||
|
||||
.file { |
||||
width: 1.5rem; |
||||
height: 1.5rem; |
||||
border: 1px solid rgba(0 0 0 / 25%); |
||||
border-radius: 0.25rem; |
||||
|
||||
&--inline { |
||||
display: inline-block; |
||||
margin: 0 0.5rem; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
&__tooltipped { |
||||
width: 1.5rem; |
||||
height: 1.5rem; |
||||
} |
||||
|
||||
&--has-been-converted { |
||||
background-color: var(--green); |
||||
} |
||||
|
||||
&--to-be-converted { |
||||
background-color: var(--blue-gray-100); |
||||
} |
||||
|
||||
&--test, |
||||
&--storybook { |
||||
opacity: 0.3; |
||||
} |
||||
} |
||||
|
||||
/* Package overrides */ |
||||
|
||||
.tippy-tooltip { |
||||
padding: 0.4rem 0.6rem; |
||||
} |
||||
|
||||
.tippy-tooltip-content { |
||||
font-size: 0.8rem; |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
import * as React from 'react'; |
||||
import ReactDOM from 'react-dom'; |
||||
import App from './App'; |
||||
|
||||
const appElement = document.querySelector('#app'); |
||||
|
||||
ReactDOM.render(<App />, appElement); |
||||
|
After Width: | Height: | Size: 3.2 KiB |
@ -0,0 +1,13 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no"> |
||||
<title>Extension TypeScript Migration Status</title> |
||||
<link rel="stylesheet" type="text/css" href="index.css"> |
||||
</head> |
||||
<body> |
||||
<div id="app"></div> |
||||
<script src="index.js" type="text/javascript" charset="utf-8"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,655 @@ |
||||
.tippy-touch { |
||||
cursor: pointer !important; |
||||
} |
||||
|
||||
.tippy-notransition { |
||||
transition: none !important; |
||||
} |
||||
|
||||
.tippy-popper { |
||||
max-width: 400px; |
||||
-webkit-perspective: 800px; |
||||
perspective: 800px; |
||||
z-index: 9999; |
||||
outline: 0; |
||||
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.tippy-popper.html-template { |
||||
max-width: 96%; |
||||
max-width: calc(100% - 20px); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [x-arrow] { |
||||
border-top: 7px solid #333; |
||||
border-right: 7px solid transparent; |
||||
border-left: 7px solid transparent; |
||||
bottom: -7px; |
||||
margin: 0 9px; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [x-arrow].arrow-small { |
||||
border-top: 5px solid #333; |
||||
border-right: 5px solid transparent; |
||||
border-left: 5px solid transparent; |
||||
bottom: -5px; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [x-arrow].arrow-big { |
||||
border-top: 10px solid #333; |
||||
border-right: 10px solid transparent; |
||||
border-left: 10px solid transparent; |
||||
bottom: -10px; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [x-circle] { |
||||
-webkit-transform-origin: 0 33%; |
||||
transform-origin: 0 33%; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [x-circle].enter { |
||||
-webkit-transform: scale(1) translate(-50%, -55%); |
||||
transform: scale(1) translate(-50%, -55%); |
||||
opacity: 1; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [x-circle].leave { |
||||
-webkit-transform: scale(0.15) translate(-50%, -50%); |
||||
transform: scale(0.15) translate(-50%, -50%); |
||||
opacity: 0; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] .tippy-tooltip.light-theme [x-circle] { |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] .tippy-tooltip.light-theme [x-arrow] { |
||||
border-top: 7px solid #fff; |
||||
border-right: 7px solid transparent; |
||||
border-left: 7px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] .tippy-tooltip.light-theme [x-arrow].arrow-small { |
||||
border-top: 5px solid #fff; |
||||
border-right: 5px solid transparent; |
||||
border-left: 5px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] .tippy-tooltip.light-theme [x-arrow].arrow-big { |
||||
border-top: 10px solid #fff; |
||||
border-right: 10px solid transparent; |
||||
border-left: 10px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] .tippy-tooltip.transparent-theme [x-circle] { |
||||
background-color: rgba(0, 0, 0, 0.7); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] .tippy-tooltip.transparent-theme [x-arrow] { |
||||
border-top: 7px solid rgba(0, 0, 0, 0.7); |
||||
border-right: 7px solid transparent; |
||||
border-left: 7px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { |
||||
border-top: 5px solid rgba(0, 0, 0, 0.7); |
||||
border-right: 5px solid transparent; |
||||
border-left: 5px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { |
||||
border-top: 10px solid rgba(0, 0, 0, 0.7); |
||||
border-right: 10px solid transparent; |
||||
border-left: 10px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [data-animation='perspective'] { |
||||
-webkit-transform-origin: bottom; |
||||
transform-origin: bottom; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [data-animation='perspective'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateY(-10px) rotateX(0); |
||||
transform: translateY(-10px) rotateX(0); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [data-animation='perspective'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateY(0) rotateX(90deg); |
||||
transform: translateY(0) rotateX(90deg); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [data-animation='fade'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateY(-10px); |
||||
transform: translateY(-10px); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [data-animation='fade'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateY(-10px); |
||||
transform: translateY(-10px); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [data-animation='shift'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateY(-10px); |
||||
transform: translateY(-10px); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [data-animation='shift'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateY(0); |
||||
transform: translateY(0); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [data-animation='scale'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateY(-10px) scale(1); |
||||
transform: translateY(-10px) scale(1); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='top'] [data-animation='scale'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateY(0) scale(0); |
||||
transform: translateY(0) scale(0); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [x-arrow] { |
||||
border-bottom: 7px solid #333; |
||||
border-right: 7px solid transparent; |
||||
border-left: 7px solid transparent; |
||||
top: -7px; |
||||
margin: 0 9px; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [x-arrow].arrow-small { |
||||
border-bottom: 5px solid #333; |
||||
border-right: 5px solid transparent; |
||||
border-left: 5px solid transparent; |
||||
top: -5px; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [x-arrow].arrow-big { |
||||
border-bottom: 10px solid #333; |
||||
border-right: 10px solid transparent; |
||||
border-left: 10px solid transparent; |
||||
top: -10px; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [x-circle] { |
||||
-webkit-transform-origin: 0 -50%; |
||||
transform-origin: 0 -50%; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [x-circle].enter { |
||||
-webkit-transform: scale(1) translate(-50%, -45%); |
||||
transform: scale(1) translate(-50%, -45%); |
||||
opacity: 1; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [x-circle].leave { |
||||
-webkit-transform: scale(0.15) translate(-50%, -5%); |
||||
transform: scale(0.15) translate(-50%, -5%); |
||||
opacity: 0; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] .tippy-tooltip.light-theme [x-circle] { |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] .tippy-tooltip.light-theme [x-arrow] { |
||||
border-bottom: 7px solid #fff; |
||||
border-right: 7px solid transparent; |
||||
border-left: 7px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] .tippy-tooltip.light-theme [x-arrow].arrow-small { |
||||
border-bottom: 5px solid #fff; |
||||
border-right: 5px solid transparent; |
||||
border-left: 5px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] .tippy-tooltip.light-theme [x-arrow].arrow-big { |
||||
border-bottom: 10px solid #fff; |
||||
border-right: 10px solid transparent; |
||||
border-left: 10px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] .tippy-tooltip.transparent-theme [x-circle] { |
||||
background-color: rgba(0, 0, 0, 0.7); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] .tippy-tooltip.transparent-theme [x-arrow] { |
||||
border-bottom: 7px solid rgba(0, 0, 0, 0.7); |
||||
border-right: 7px solid transparent; |
||||
border-left: 7px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { |
||||
border-bottom: 5px solid rgba(0, 0, 0, 0.7); |
||||
border-right: 5px solid transparent; |
||||
border-left: 5px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { |
||||
border-bottom: 10px solid rgba(0, 0, 0, 0.7); |
||||
border-right: 10px solid transparent; |
||||
border-left: 10px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [data-animation='perspective'] { |
||||
-webkit-transform-origin: top; |
||||
transform-origin: top; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [data-animation='perspective'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateY(10px) rotateX(0); |
||||
transform: translateY(10px) rotateX(0); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [data-animation='perspective'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateY(0) rotateX(-90deg); |
||||
transform: translateY(0) rotateX(-90deg); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [data-animation='fade'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateY(10px); |
||||
transform: translateY(10px); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [data-animation='fade'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateY(10px); |
||||
transform: translateY(10px); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [data-animation='shift'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateY(10px); |
||||
transform: translateY(10px); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [data-animation='shift'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateY(0); |
||||
transform: translateY(0); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [data-animation='scale'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateY(10px) scale(1); |
||||
transform: translateY(10px) scale(1); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='bottom'] [data-animation='scale'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateY(0) scale(0); |
||||
transform: translateY(0) scale(0); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [x-arrow] { |
||||
border-left: 7px solid #333; |
||||
border-top: 7px solid transparent; |
||||
border-bottom: 7px solid transparent; |
||||
right: -7px; |
||||
margin: 6px 0; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [x-arrow].arrow-small { |
||||
border-left: 5px solid #333; |
||||
border-top: 5px solid transparent; |
||||
border-bottom: 5px solid transparent; |
||||
right: -5px; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [x-arrow].arrow-big { |
||||
border-left: 10px solid #333; |
||||
border-top: 10px solid transparent; |
||||
border-bottom: 10px solid transparent; |
||||
right: -10px; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [x-circle] { |
||||
-webkit-transform-origin: 50% 0; |
||||
transform-origin: 50% 0; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [x-circle].enter { |
||||
-webkit-transform: scale(1) translate(-50%, -50%); |
||||
transform: scale(1) translate(-50%, -50%); |
||||
opacity: 1; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [x-circle].leave { |
||||
-webkit-transform: scale(0.15) translate(-50%, -50%); |
||||
transform: scale(0.15) translate(-50%, -50%); |
||||
opacity: 0; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] .tippy-tooltip.light-theme [x-circle] { |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] .tippy-tooltip.light-theme [x-arrow] { |
||||
border-left: 7px solid #fff; |
||||
border-top: 7px solid transparent; |
||||
border-bottom: 7px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] .tippy-tooltip.light-theme [x-arrow].arrow-small { |
||||
border-left: 5px solid #fff; |
||||
border-top: 5px solid transparent; |
||||
border-bottom: 5px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] .tippy-tooltip.light-theme [x-arrow].arrow-big { |
||||
border-left: 10px solid #fff; |
||||
border-top: 10px solid transparent; |
||||
border-bottom: 10px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] .tippy-tooltip.transparent-theme [x-circle] { |
||||
background-color: rgba(0, 0, 0, 0.7); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] .tippy-tooltip.transparent-theme [x-arrow] { |
||||
border-left: 7px solid rgba(0, 0, 0, 0.7); |
||||
border-top: 7px solid transparent; |
||||
border-bottom: 7px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { |
||||
border-left: 5px solid rgba(0, 0, 0, 0.7); |
||||
border-top: 5px solid transparent; |
||||
border-bottom: 5px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { |
||||
border-left: 10px solid rgba(0, 0, 0, 0.7); |
||||
border-top: 10px solid transparent; |
||||
border-bottom: 10px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [data-animation='perspective'] { |
||||
-webkit-transform-origin: right; |
||||
transform-origin: right; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [data-animation='perspective'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateX(-10px) rotateY(0); |
||||
transform: translateX(-10px) rotateY(0); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [data-animation='perspective'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateX(0) rotateY(-90deg); |
||||
transform: translateX(0) rotateY(-90deg); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [data-animation='fade'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateX(-10px); |
||||
transform: translateX(-10px); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [data-animation='fade'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateX(-10px); |
||||
transform: translateX(-10px); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [data-animation='shift'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateX(-10px); |
||||
transform: translateX(-10px); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [data-animation='shift'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateX(0); |
||||
transform: translateX(0); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [data-animation='scale'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateX(-10px) scale(1); |
||||
transform: translateX(-10px) scale(1); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='left'] [data-animation='scale'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateX(0) scale(0); |
||||
transform: translateX(0) scale(0); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [x-arrow] { |
||||
border-right: 7px solid #333; |
||||
border-top: 7px solid transparent; |
||||
border-bottom: 7px solid transparent; |
||||
left: -7px; |
||||
margin: 6px 0; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [x-arrow].arrow-small { |
||||
border-right: 5px solid #333; |
||||
border-top: 5px solid transparent; |
||||
border-bottom: 5px solid transparent; |
||||
left: -5px; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [x-arrow].arrow-big { |
||||
border-right: 10px solid #333; |
||||
border-top: 10px solid transparent; |
||||
border-bottom: 10px solid transparent; |
||||
left: -10px; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [x-circle] { |
||||
-webkit-transform-origin: -50% 0; |
||||
transform-origin: -50% 0; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [x-circle].enter { |
||||
-webkit-transform: scale(1) translate(-50%, -50%); |
||||
transform: scale(1) translate(-50%, -50%); |
||||
opacity: 1; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [x-circle].leave { |
||||
-webkit-transform: scale(0.15) translate(-50%, -50%); |
||||
transform: scale(0.15) translate(-50%, -50%); |
||||
opacity: 0; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] .tippy-tooltip.light-theme [x-circle] { |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] .tippy-tooltip.light-theme [x-arrow] { |
||||
border-right: 7px solid #fff; |
||||
border-top: 7px solid transparent; |
||||
border-bottom: 7px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] .tippy-tooltip.light-theme [x-arrow].arrow-small { |
||||
border-right: 5px solid #fff; |
||||
border-top: 5px solid transparent; |
||||
border-bottom: 5px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] .tippy-tooltip.light-theme [x-arrow].arrow-big { |
||||
border-right: 10px solid #fff; |
||||
border-top: 10px solid transparent; |
||||
border-bottom: 10px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] .tippy-tooltip.transparent-theme [x-circle] { |
||||
background-color: rgba(0, 0, 0, 0.7); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] .tippy-tooltip.transparent-theme [x-arrow] { |
||||
border-right: 7px solid rgba(0, 0, 0, 0.7); |
||||
border-top: 7px solid transparent; |
||||
border-bottom: 7px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { |
||||
border-right: 5px solid rgba(0, 0, 0, 0.7); |
||||
border-top: 5px solid transparent; |
||||
border-bottom: 5px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { |
||||
border-right: 10px solid rgba(0, 0, 0, 0.7); |
||||
border-top: 10px solid transparent; |
||||
border-bottom: 10px solid transparent; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [data-animation='perspective'] { |
||||
-webkit-transform-origin: left; |
||||
transform-origin: left; |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [data-animation='perspective'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateX(10px) rotateY(0); |
||||
transform: translateX(10px) rotateY(0); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [data-animation='perspective'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateX(0) rotateY(90deg); |
||||
transform: translateX(0) rotateY(90deg); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [data-animation='fade'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateX(10px); |
||||
transform: translateX(10px); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [data-animation='fade'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateX(10px); |
||||
transform: translateX(10px); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [data-animation='shift'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateX(10px); |
||||
transform: translateX(10px); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [data-animation='shift'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateX(0); |
||||
transform: translateX(0); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [data-animation='scale'].enter { |
||||
opacity: 1; |
||||
-webkit-transform: translateX(10px) scale(1); |
||||
transform: translateX(10px) scale(1); |
||||
} |
||||
|
||||
.tippy-popper[x-placement^='right'] [data-animation='scale'].leave { |
||||
opacity: 0; |
||||
-webkit-transform: translateX(0) scale(0); |
||||
transform: translateX(0) scale(0); |
||||
} |
||||
|
||||
.tippy-popper .tippy-tooltip.transparent-theme { |
||||
background-color: rgba(0, 0, 0, 0.7); |
||||
} |
||||
|
||||
.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill] { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.tippy-popper .tippy-tooltip.light-theme { |
||||
color: #26323d; |
||||
box-shadow: |
||||
0 4px 20px 4px rgba(0, 20, 60, 0.1), |
||||
0 4px 80px -8px rgba(0, 20, 60, 0.2); |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.tippy-popper .tippy-tooltip.light-theme[data-animatefill] { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.tippy-tooltip { |
||||
position: relative; |
||||
color: #fff; |
||||
border-radius: 4px; |
||||
font-size: 0.95rem; |
||||
padding: 0.4rem 0.8rem; |
||||
text-align: center; |
||||
will-change: transform; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
background-color: #333; |
||||
} |
||||
|
||||
.tippy-tooltip--small { |
||||
padding: 0.25rem 0.5rem; |
||||
font-size: 0.8rem; |
||||
} |
||||
|
||||
.tippy-tooltip--big { |
||||
padding: 0.6rem 1.2rem; |
||||
font-size: 1.2rem; |
||||
} |
||||
|
||||
.tippy-tooltip[data-animatefill] { |
||||
overflow: hidden; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.tippy-tooltip[data-interactive] { |
||||
pointer-events: auto; |
||||
} |
||||
|
||||
.tippy-tooltip[data-inertia] { |
||||
transition-timing-function: cubic-bezier(0.53, 2, 0.36, 0.85); |
||||
} |
||||
|
||||
.tippy-tooltip [x-arrow] { |
||||
position: absolute; |
||||
width: 0; |
||||
height: 0; |
||||
} |
||||
|
||||
.tippy-tooltip [x-circle] { |
||||
position: absolute; |
||||
will-change: transform; |
||||
background-color: #333; |
||||
border-radius: 50%; |
||||
width: 130%; |
||||
width: calc(110% + 2rem); |
||||
left: 50%; |
||||
top: 50%; |
||||
z-index: -1; |
||||
overflow: hidden; |
||||
transition: all ease; |
||||
} |
||||
|
||||
.tippy-tooltip [x-circle]::before { |
||||
content: ''; |
||||
padding-top: 90%; |
||||
float: left; |
||||
} |
||||
|
||||
@media (max-width: 450px) { |
||||
.tippy-popper { |
||||
max-width: 96%; |
||||
max-width: calc(100% - 20px); |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,16 @@ |
||||
diff --git a/node_modules/@types/madge/index.d.ts b/node_modules/@types/madge/index.d.ts
|
||||
index f2a8652..3a26bfe 100755
|
||||
--- a/node_modules/@types/madge/index.d.ts
|
||||
+++ b/node_modules/@types/madge/index.d.ts
|
||||
@@ -265,6 +265,10 @@ declare namespace madge {
|
||||
*
|
||||
* @default undefined
|
||||
*/
|
||||
- dependencyFilter?: (id: string) => boolean;
|
||||
+ dependencyFilter?: (
|
||||
+ dependencyFilePath: string,
|
||||
+ traversedFilePath: string,
|
||||
+ baseDir: string,
|
||||
+ ) => boolean;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@ |
||||
declare module 'classnames' { |
||||
export default function classnames( |
||||
...args: (string | Record<string, boolean>)[] |
||||
): string; |
||||
} |
||||
@ -0,0 +1,71 @@ |
||||
// Copied from <https://github.com/tvkhoa/react-tippy/blob/c6e6169e3f2cabe05f1bfbd7e0dea1ddef4debe8/index.d.ts>
|
||||
// which for some reason is not included in the distributed version
|
||||
declare module 'react-tippy' { |
||||
import * as React from 'react'; |
||||
|
||||
export type Position = |
||||
| 'top' |
||||
| 'top-start' |
||||
| 'top-end' |
||||
| 'bottom' |
||||
| 'bottom-start' |
||||
| 'bottom-end' |
||||
| 'left' |
||||
| 'left-start' |
||||
| 'left-end' |
||||
| 'right' |
||||
| 'right-start' |
||||
| 'right-end'; |
||||
export type Trigger = 'mouseenter' | 'focus' | 'click' | 'manual'; |
||||
export type Animation = 'shift' | 'perspective' | 'fade' | 'scale' | 'none'; |
||||
export type Size = 'small' | 'regular' | 'big'; |
||||
export type Theme = 'dark' | 'light' | 'transparent'; |
||||
|
||||
export interface TooltipProps { |
||||
title?: string; |
||||
disabled?: boolean; |
||||
open?: boolean; |
||||
useContext?: boolean; |
||||
onRequestClose?: () => void; |
||||
position?: Position; |
||||
trigger?: Trigger; |
||||
tabIndex?: number; |
||||
interactive?: boolean; |
||||
interactiveBorder?: number; |
||||
delay?: number; |
||||
hideDelay?: number; |
||||
animation?: Animation; |
||||
arrow?: boolean; |
||||
arrowSize?: Size; |
||||
animateFill?: boolean; |
||||
duration?: number; |
||||
hideDuration?: number; |
||||
distance?: number; |
||||
offset?: number; |
||||
hideOnClick?: boolean | 'persistent'; |
||||
multiple?: boolean; |
||||
followCursor?: boolean; |
||||
inertia?: boolean; |
||||
transitionFlip?: boolean; |
||||
popperOptions?: any; |
||||
html?: React.ReactElement<any>; |
||||
unmountHTMLWhenHide?: boolean; |
||||
size?: Size; |
||||
sticky?: boolean; |
||||
stickyDuration?: boolean; |
||||
beforeShown?: () => void; |
||||
shown?: () => void; |
||||
beforeHidden?: () => void; |
||||
hidden?: () => void; |
||||
theme?: Theme; |
||||
className?: string; |
||||
style?: React.CSSProperties; |
||||
} |
||||
|
||||
export class Tooltip extends React.Component<TooltipProps> {} |
||||
|
||||
export function withTooltip<P>( |
||||
component: React.ComponentType<P>, |
||||
options: TooltipProps, |
||||
): JSX.Element; |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
declare namespace React { |
||||
/* eslint-disable-next-line import/no-extraneous-dependencies */ |
||||
import * as CSS from 'csstype'; |
||||
|
||||
// Add custom CSS properties so that they can be used in `style` props
|
||||
export interface CSSProperties extends CSS.Properties<string | number> { |
||||
'--progress'?: string; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue