diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index ec656436ee7..ac81a5f8194 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1080,6 +1080,7 @@ playwright.storybook.config.ts @grafana/grafana-frontend-platform /scripts/**/generate-transformations* @grafana/datapro /scripts/webpack/ @grafana/frontend-ops /scripts/generate-a11y-report.sh @grafana/grafana-frontend-platform +/scripts/ts-dependency-grapher @grafana/plugins-platform-frontend eslint-suppressions.json @grafanabot # Design system diff --git a/scripts/ts-dependency-grapher/.gitignore b/scripts/ts-dependency-grapher/.gitignore new file mode 100644 index 00000000000..596d37fe7d4 --- /dev/null +++ b/scripts/ts-dependency-grapher/.gitignore @@ -0,0 +1,32 @@ +node_modules +npm-debug.log +yarn-error.log +coverage/ +.aws-config.json +awsconfig +/.awcache +/dist +/public/build +/emails/dist +/reports +/e2e/tmp +/scripts/grafana-server/tmp +vendor/ +/docs/menu.yaml +/requests +tsconfig.tsbuildinfo +__debug_bin* +*.cov +/out + +# yarn +.yarn +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +# Ignore OSX indexing +.DS_Store + diff --git a/scripts/ts-dependency-grapher/LICENSE_APACHE2 b/scripts/ts-dependency-grapher/LICENSE_APACHE2 new file mode 100644 index 00000000000..373dde574a0 --- /dev/null +++ b/scripts/ts-dependency-grapher/LICENSE_APACHE2 @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright 2015 Grafana Labs + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/scripts/ts-dependency-grapher/README.md b/scripts/ts-dependency-grapher/README.md new file mode 100644 index 00000000000..4f02649e7b0 --- /dev/null +++ b/scripts/ts-dependency-grapher/README.md @@ -0,0 +1,74 @@ +# ts-dependency-grapher + +A small utility for analyzing TypeScript dependency relationships. It searches for a given symbol and outputs its dependencies in [DOT](https://en.wikipedia.org/wiki/DOT_%28graph_description_language%29) format. + +This can be useful when exploring complex dependency trees or when planning refactors. + +> [!WARNING] +> Currently only tested on macOS + +## Installation + +```bash +cd scripts/ts-dependency-grapher +yarn +``` + +## Usage + +The tool expects two arguments: + +1. The name of the function, variable, or class to search for +2. The path to the file where the symbol is declared + +```bash +node index.ts getExtensionPointPluginDependencies ../../public/app/features/plugins/extensions/utils.tsx +``` + +### Options + +#### --level + +Controls how many levels of dependencies are traversed. + +- Default: 1 +- Higher values will increase processing time + +```bash +node index.ts getExtensionPointPluginDependencies ../../public/app/features/plugins/extensions/utils.tsx --level=3 +``` + +#### --svg + +Generates an SVG visualization in addition to the .gv file. +Requires [Graphviz](https://graphviz.org/download/) to be installed and available in your PATH. + +```bash +node index.ts getExtensionPointPluginDependencies ../../public/app/features/plugins/extensions/utils.tsx --svg +``` + +#### --debug + +Generates more log output + +```bash +node index.ts getExtensionPointPluginDependencies ../../public/app/features/plugins/extensions/utils.tsx --debug +``` + +## Output + +`.gv` files are written to the out directory + +When `--svg` is enabled, a corresponding `.svg` file is generated. + +You can also output to many other [formats](https://graphviz.org/docs/outputs/) by calling `dot` manually like + +```bash +dot -Tpng getExtensionPointPluginDependencies.gv > getExtensionPointPluginDependencies.png +``` + +Read more about output formats [here](https://graphviz.org/docs/outputs/). + +## License + +Apache License v2 diff --git a/scripts/ts-dependency-grapher/dot.ts b/scripts/ts-dependency-grapher/dot.ts new file mode 100644 index 00000000000..e706dff405b --- /dev/null +++ b/scripts/ts-dependency-grapher/dot.ts @@ -0,0 +1,109 @@ +import type { DotNode } from './types.ts'; + +export function generateHTMLStringLabel(node: DotNode) { + return `< + + +
${node.name}
(${node.type})
>`; +} + +export function generateNodeColor(node: DotNode) { + if (node.type === 'hook') { + return 'aliceblue'; + } + + if (node.type === 'component') { + return 'cornsilk'; + } + + if (node.type === 'variable') { + return 'bisque'; + } + + if (node.type === 'class') { + return 'pink'; + } + + return ''; +} + +export function generateDotStart({ + outputDPI = 96, + outputHeight = 1080, + outputWidth = 1920, +}: { + outputDPI?: number; + outputHeight?: number; + outputWidth?: number; +}) { + let output = ''; + const width = outputWidth / outputDPI; + const height = outputHeight / outputDPI; + output += `digraph graphname {\n`; + output += `\trankdir="LR"\n`; + output += `\tgraph [size="${width},${height}!" dpi=${outputDPI}];\n`; + + return output; +} + +export function generateDotEnd() { + return `}\n`; +} + +export function generateDotNode(node: DotNode) { + const label = generateHTMLStringLabel(node); + const color = generateNodeColor(node); + return `\t${node.name} [style="filled" fillcolor="${color}" shape=rect label=${label} URL="file://${node.file}" tooltip="${node.file}"]\n`; +} + +export function generateDotEdge(parent: DotNode, dependant: DotNode) { + return `${parent.name} -> ${dependant.name}`; +} + +export function generateDotContent({ + level = 0, + output, + outputDPI, + outputHeight, + outputWidth, + parent, + seen, +}: { + level?: number; + output: string; + outputDPI?: number; + outputHeight?: number; + outputWidth?: number; + parent: DotNode; + seen: Set; +}) { + if (level === 0) { + output += generateDotStart({ outputDPI, outputHeight, outputWidth }); + } + + output += generateDotNode(parent); + for (const dependant of parent.dependants) { + const edge = generateDotEdge(parent, dependant); + if (seen.has(edge)) { + continue; + } + seen.add(edge); + const depOutput = generateDotContent({ + output, + outputDPI, + outputHeight, + outputWidth, + parent: dependant, + seen, + level: level + 1, + }); + output = depOutput; + output += `${edge} [dir=back]\n`; + } + + if (level === 0) { + output += generateDotEnd(); + } + + return output; +} diff --git a/scripts/ts-dependency-grapher/helpers.ts b/scripts/ts-dependency-grapher/helpers.ts new file mode 100644 index 00000000000..d6fb6dfa641 --- /dev/null +++ b/scripts/ts-dependency-grapher/helpers.ts @@ -0,0 +1,272 @@ +import chalk from 'chalk'; +import { + type ClassDeclaration, + type FunctionDeclaration, + Node, + type SourceFile, + SyntaxKind, + type VariableDeclaration, +} from 'ts-morph'; + +import type { DotNode, NodeType } from './types.ts'; + +const hookNameRegex = /^use[A-Z]/; +const classNameRegex = /^[A-Z]/; + +export function getFunction(source: SourceFile, name: string): FunctionDeclaration | undefined { + const fn = source.getFunction(name); + + return fn; +} + +export function getVariable(source: SourceFile, name: string): VariableDeclaration | undefined { + const v = source.getVariableDeclaration(name); + + return v; +} + +export function getClass(source: SourceFile, name: string): ClassDeclaration | undefined { + const v = source.getClass(name); + + return v; +} + +export function getFile(node: Node): string { + return node.getSourceFile().getFilePath(); +} + +export function getName(node: Node): string { + if (Node.isVariableDeclaration(node)) { + return node.getName(); + } + + if (Node.isVariableStatement(node)) { + return node.getDeclarations()[0]?.getName(); + } + + if (Node.isFunctionDeclaration(node)) { + return node.getNameOrThrow(); + } + + if (Node.isMethodDeclaration(node)) { + return node.getName(); + } + + if (Node.isArrowFunction(node)) { + const parent = node.getParent(); + + if (Node.isVariableDeclaration(parent)) { + return parent.getName(); + } + + if (Node.isPropertyAssignment(parent)) { + return parent.getName(); + } + + if (Node.isPropertyDeclaration(parent)) { + return parent.getName(); + } + + if (Node.isCallExpression(parent)) { + const expression = parent.getExpression(); + + if (Node.isIdentifier(expression)) { + return expression.getText(); + } + + if (Node.isPropertyAccessExpression(expression)) { + return expression.getName(); + } + } + + return 'unknown'; + } + + if (Node.isClassDeclaration(node)) { + return node.getNameOrThrow(); + } + + return 'unknown'; +} + +function hasJsxTypeReturns(node: Node): boolean { + if (!Node.isFunctionDeclaration(node) && !Node.isMethodDeclaration(node) && !Node.isArrowFunction(node)) { + return false; + } + + const returnType = node.getReturnType(); + const returnTypeText = returnType.getText(); + + // Check for common React return types + const reactReturnTypes = [ + 'JSX.Element', + 'ReactElement', + 'ReactNode', + 'React.ReactElement', + 'React.ReactNode', + 'Element', + ]; + + return reactReturnTypes.some((r) => returnTypeText.includes(r)); +} + +function hasJsxReturn(node: Node): boolean { + const jsxElements = node.getDescendantsOfKind(SyntaxKind.JsxElement); + const jsxSelfClosing = node.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement); + const jsxFragment = node.getDescendantsOfKind(SyntaxKind.JsxFragment); + + if (jsxElements.length > 0 || jsxSelfClosing.length > 0 || jsxFragment.length > 0) { + return true; + } + + return hasJsxTypeReturns(node); +} + +function getClassType(node: Node, name: string): NodeType | undefined { + if (classNameRegex.test(name) && hasJsxReturn(node)) { + return 'component'; + } + + return 'class'; +} + +function getFunctionType(node: Node, name: string, defaultType: NodeType = 'function'): NodeType | undefined { + if (hookNameRegex.test(name)) { + return 'hook'; + } + + if (classNameRegex.test(name) && hasJsxReturn(node)) { + return 'component'; + } + + return defaultType; +} + +export function getType(node: Node, name: string): NodeType | undefined { + if (Node.isClassDeclaration(node)) { + return getClassType(node, name); + } + + if (Node.isFunctionDeclaration(node) || Node.isMethodDeclaration(node) || Node.isArrowFunction(node)) { + return getFunctionType(node, name); + } + + if (Node.isVariableDeclaration(node)) { + const arrowFunction = node.getInitializerIfKind(SyntaxKind.ArrowFunction); + if (arrowFunction) { + return getFunctionType(arrowFunction, name); + } + + const functionDeclaration = node.getInitializerIfKind(SyntaxKind.FunctionDeclaration); + if (functionDeclaration) { + return getFunctionType(functionDeclaration, name); + } + + const callExpression = node.getInitializerIfKind(SyntaxKind.CallExpression); + if (callExpression) { + return getFunctionType(callExpression, name, 'variable'); + } + + const classDeclaration = node.getInitializerIfKind(SyntaxKind.ClassDeclaration); + if (classDeclaration) { + return getClassType(classDeclaration, name); + } + + return 'variable'; + } +} + +function equals(first: DotNode, second: DotNode) { + return first.name === second.name && first.file === second.file && first.kind === second.kind; +} + +function getTopMostAncestor(ref: Node) { + const ancestor = ref.getFirstAncestor( + (node) => + node.getKind() === SyntaxKind.FunctionDeclaration || + node.getKind() === SyntaxKind.MethodDeclaration || + node.getKind() === SyntaxKind.VariableDeclaration || + node.getKind() === SyntaxKind.ClassDeclaration + ); + + if (!ancestor) { + return ref; + } + + return getTopMostAncestor(ancestor); +} + +function shouldFilterFile(file: string) { + return ( + file.includes('.test.') || + file.includes('.spec.') || + file.includes('/mocks/') || + file.includes('/node_modules/') || + file.includes('/dist/') || + file.includes('/build/') || + file.includes('/out/') + ); +} + +export function traverse({ + dotNode, + tsObj, + level = 0, + maxLevel = 0, + debug = false, +}: { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + tsObj: any; + dotNode: DotNode; + level?: number; + maxLevel?: number; + debug?: boolean; +}) { + if (!tsObj?.findReferencesAsNodes) { + return; + } + + const refs = tsObj?.findReferencesAsNodes() || []; + if (debug) { + console.log(`searching for ${chalk.green(dotNode.name)}`); + } + + for (const ref of refs) { + const ancestor = getTopMostAncestor(ref); + if (!ancestor) { + continue; + } + + const file = getFile(ancestor); + if (shouldFilterFile(file)) { + continue; + } + + const name = getName(ancestor); + if (name === 'unknown') { + continue; + } + + const type = getType(ancestor, name); + const kind = ancestor.getKindName(); + const dependant: DotNode = { dependants: [], file, name, type, kind }; + + if (equals(dependant, dotNode)) { + continue; + } + + if (dotNode.dependants.find((d) => equals(d, dependant))) { + continue; + } + + dotNode.dependants.push(dependant); + if (debug) { + console.log( + `${chalk.yellow(dependant.name)} references ${chalk.yellow(dotNode.name)} at level ${chalk.green(level)} of ${chalk.green(maxLevel)} (${chalk.green(dependant.file)})` + ); + } + if (level < maxLevel) { + traverse({ dotNode: dependant, tsObj: ancestor, level: level + 1, maxLevel, debug }); + } + } +} diff --git a/scripts/ts-dependency-grapher/index.ts b/scripts/ts-dependency-grapher/index.ts new file mode 100644 index 00000000000..fd090f01c0f --- /dev/null +++ b/scripts/ts-dependency-grapher/index.ts @@ -0,0 +1,74 @@ +import chalk from 'chalk'; +import { globSync } from 'glob'; +import minimist from 'minimist'; +import { Project } from 'ts-morph'; + +import { generateDotContent } from './dot.ts'; +import { getClass, getFile, getFunction, getName, getType, getVariable, traverse } from './helpers.ts'; +import { outputToSvg, writeToFile } from './io.ts'; +import type { DotNode } from './types.ts'; + +const argv: minimist.ParsedArgs = minimist(process.argv.slice(2)); +const searchingFor = argv._[0]; +const searchingIn = argv._[1]; +const maxLevel = argv.level ? Number(argv.level) : 0; +const svg = Boolean(argv.svg) || false; +const debug = Boolean(argv.debug) || false; + +if (!searchingFor) { + throw new Error(chalk.red(`Did you forget to supply an argument for what we should search for?`)); +} + +if (!searchingIn) { + throw new Error(chalk.red(`Did you forget to supply an argument for the file we should start from?`)); +} + +console.log(`ts-dependency-grapher started with: +\t- Name to look for: ${chalk.green(searchingFor)} +\t- Start in file: ${chalk.green(searchingIn)} +\t- Maximum levels to traverse: ${chalk.green(maxLevel)} +\t- Save to svg (requires Graphwiz https://graphviz.org/download/): ${chalk.green(svg)} +\t- Debug: ${chalk.green(debug)} +`); + +const tsconfigs = globSync('../../**/tsconfig.json', { ignore: ['../../node_modules/**', '../../data/**'] }); +if (tsconfigs.length < 1) { + throw new Error(chalk.red(`couldn't find any tsconfig files`)); +} + +console.log(`creating ts project from ${chalk.green(tsconfigs[0])}`); +const project = new Project({ tsConfigFilePath: tsconfigs[0] }); + +for (let index = 1; index < tsconfigs.length; index++) { + const tsconfig = tsconfigs[index]; + if (debug) { + console.log(`Adding source files from ${chalk.green(tsconfig)}`); + } + project.addSourceFilesFromTsConfig(tsconfig); +} + +const source = project.getSourceFileOrThrow(searchingIn); + +const start = getFunction(source, searchingFor) || getVariable(source, searchingFor) || getClass(source, searchingFor); + +if (!start) { + throw new Error(`couldn't find ${chalk.red(searchingFor)} in ${chalk.red(searchingIn)}`); +} + +const file = getFile(start); +const name = getName(start); +const type = getType(start, name); +const kind = start.getKindName(); +const dotNode: DotNode = { dependants: [], file, kind, name, type }; + +traverse({ dotNode, tsObj: start, level: 0, maxLevel, debug }); +const output = generateDotContent({ + parent: dotNode, + output: '', + seen: new Set(), +}); + +writeToFile(searchingFor, output); +if (svg) { + outputToSvg(searchingFor); +} diff --git a/scripts/ts-dependency-grapher/io.ts b/scripts/ts-dependency-grapher/io.ts new file mode 100644 index 00000000000..eeb1ccf636a --- /dev/null +++ b/scripts/ts-dependency-grapher/io.ts @@ -0,0 +1,38 @@ +import chalk from 'chalk'; +import { execFileSync } from 'node:child_process'; +import { existsSync, mkdirSync, writeFileSync } from 'node:fs'; +import path from 'node:path'; + +function getOutputPath() { + return path.join(process.cwd(), 'out'); +} + +function getFilePath(name: string) { + return path.join(getOutputPath(), name); +} + +export function writeToFile(name: string, output: string) { + const outputPath = getOutputPath(); + if (!existsSync(outputPath)) { + mkdirSync(outputPath); + } + + const filePath = getFilePath(`${name}.gv`); + writeFileSync(filePath, output, { encoding: 'utf8' }); + console.log(`dot file ${chalk.green(filePath)} successfully created`); +} + +export function outputToSvg(name: string) { + try { + const input = getFilePath(`${name}.gv`); + const output = getFilePath(`${name}.svg`); + const svgoutput = execFileSync('dot', ['-Tsvg', input], { encoding: 'utf8' }); + writeFileSync(output, svgoutput, { encoding: 'utf-8' }); + console.log(`svg file ${chalk.green(output)} successfully created`); + } catch (error) { + if (error instanceof Error && 'status' in error && error.status === 1) { + return; + } + throw error; + } +} diff --git a/scripts/ts-dependency-grapher/package.json b/scripts/ts-dependency-grapher/package.json new file mode 100644 index 00000000000..73ce3783352 --- /dev/null +++ b/scripts/ts-dependency-grapher/package.json @@ -0,0 +1,21 @@ +{ + "name": "ts-dependency-grapher", + "version": "1.0.0", + "description": "", + "license": "Apache-2.0", + "author": "", + "type": "module", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "dependencies": { + "chalk": "^5.6.2", + "glob": "^13.0.0", + "minimist": "^1.2.8", + "ts-morph": "^27.0.2" + }, + "devDependencies": { + "@types/minimist": "^1.2.5" + } +} diff --git a/scripts/ts-dependency-grapher/types.ts b/scripts/ts-dependency-grapher/types.ts new file mode 100644 index 00000000000..f301ae95ebb --- /dev/null +++ b/scripts/ts-dependency-grapher/types.ts @@ -0,0 +1,9 @@ +export type NodeType = 'variable' | 'function' | 'class' | 'hook' | 'component'; + +export interface DotNode { + file: string; + name: string; + type?: NodeType; + kind: string; + dependants: DotNode[]; +} diff --git a/scripts/ts-dependency-grapher/yarn.lock b/scripts/ts-dependency-grapher/yarn.lock new file mode 100644 index 00000000000..73b4eb3d9dd --- /dev/null +++ b/scripts/ts-dependency-grapher/yarn.lock @@ -0,0 +1,163 @@ +# This file is generated by running "yarn install" inside your project. +# Manual changes might be lost - proceed with caution! + +__metadata: + version: 8 + cacheKey: 10 + +"@isaacs/balanced-match@npm:^4.0.1": + version: 4.0.1 + resolution: "@isaacs/balanced-match@npm:4.0.1" + checksum: 10/102fbc6d2c0d5edf8f6dbf2b3feb21695a21bc850f11bc47c4f06aa83bd8884fde3fe9d6d797d619901d96865fdcb4569ac2a54c937992c48885c5e3d9967fe8 + languageName: node + linkType: hard + +"@isaacs/brace-expansion@npm:^5.0.0": + version: 5.0.0 + resolution: "@isaacs/brace-expansion@npm:5.0.0" + dependencies: + "@isaacs/balanced-match": "npm:^4.0.1" + checksum: 10/cf3b7f206aff12128214a1df764ac8cdbc517c110db85249b945282407e3dfc5c6e66286383a7c9391a059fc8e6e6a8ca82262fc9d2590bd615376141fbebd2d + languageName: node + linkType: hard + +"@ts-morph/common@npm:~0.28.1": + version: 0.28.1 + resolution: "@ts-morph/common@npm:0.28.1" + dependencies: + minimatch: "npm:^10.0.1" + path-browserify: "npm:^1.0.1" + tinyglobby: "npm:^0.2.14" + checksum: 10/d5c6ed11cf046c186c7263c28c7e9b5fbefb61c65b99f66cfe6a3b249f70f3fbf116b5aace2980602a7ceabecdc399065d5a7f14aabe5475eb43fd573a3cc665 + languageName: node + linkType: hard + +"@types/minimist@npm:^1.2.5": + version: 1.2.5 + resolution: "@types/minimist@npm:1.2.5" + checksum: 10/477047b606005058ab0263c4f58097136268007f320003c348794f74adedc3166ffc47c80ec3e94687787f2ab7f4e72c468223946e79892cf0fd9e25e9970a90 + languageName: node + linkType: hard + +"chalk@npm:^5.6.2": + version: 5.6.2 + resolution: "chalk@npm:5.6.2" + checksum: 10/1b2f48f6fba1370670d5610f9cd54c391d6ede28f4b7062dd38244ea5768777af72e5be6b74fb6c6d54cb84c4a2dff3f3afa9b7cb5948f7f022cfd3d087989e0 + languageName: node + linkType: hard + +"code-block-writer@npm:^13.0.3": + version: 13.0.3 + resolution: "code-block-writer@npm:13.0.3" + checksum: 10/771546224f38610eecee0598e83c9e0f86dcd600ea316dbf27c2cfebaab4fed51b042325aa460b8e0f131fac5c1de208f6610a1ddbffe4b22e76f9b5256707cb + languageName: node + linkType: hard + +"fdir@npm:^6.5.0": + version: 6.5.0 + resolution: "fdir@npm:6.5.0" + peerDependencies: + picomatch: ^3 || ^4 + peerDependenciesMeta: + picomatch: + optional: true + checksum: 10/14ca1c9f0a0e8f4f2e9bf4e8551065a164a09545dae548c12a18d238b72e51e5a7b39bd8e5494b56463a0877672d0a6c1ef62c6fa0677db1b0c847773be939b1 + languageName: node + linkType: hard + +"glob@npm:^13.0.0": + version: 13.0.0 + resolution: "glob@npm:13.0.0" + dependencies: + minimatch: "npm:^10.1.1" + minipass: "npm:^7.1.2" + path-scurry: "npm:^2.0.0" + checksum: 10/de390721d29ee1c9ea41e40ec2aa0de2cabafa68022e237dc4297665a5e4d650776f2573191984ea1640aba1bf0ea34eddef2d8cbfbfc2ad24b5fb0af41d8846 + languageName: node + linkType: hard + +"lru-cache@npm:^11.0.0": + version: 11.2.4 + resolution: "lru-cache@npm:11.2.4" + checksum: 10/3b2da74c0b6653767f8164c38c4c4f4d7f0cc10c62bfa512663d94a830191ae6a5af742a8d88a8b30d5f9974652d3adae53931f32069139ad24fa2a18a199aca + languageName: node + linkType: hard + +"minimatch@npm:^10.0.1, minimatch@npm:^10.1.1": + version: 10.1.1 + resolution: "minimatch@npm:10.1.1" + dependencies: + "@isaacs/brace-expansion": "npm:^5.0.0" + checksum: 10/110f38921ea527022e90f7a5f43721838ac740d0a0c26881c03b57c261354fb9a0430e40b2c56dfcea2ef3c773768f27210d1106f1f2be19cde3eea93f26f45e + languageName: node + linkType: hard + +"minimist@npm:^1.2.8": + version: 1.2.8 + resolution: "minimist@npm:1.2.8" + checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f + languageName: node + linkType: hard + +"minipass@npm:^7.1.2": + version: 7.1.2 + resolution: "minipass@npm:7.1.2" + checksum: 10/c25f0ee8196d8e6036661104bacd743785b2599a21de5c516b32b3fa2b83113ac89a2358465bc04956baab37ffb956ae43be679b2262bf7be15fce467ccd7950 + languageName: node + linkType: hard + +"path-browserify@npm:^1.0.1": + version: 1.0.1 + resolution: "path-browserify@npm:1.0.1" + checksum: 10/7e7368a5207e7c6b9051ef045711d0dc3c2b6203e96057e408e6e74d09f383061010d2be95cb8593fe6258a767c3e9fc6b2bfc7ce8d48ae8c3d9f6994cca9ad8 + languageName: node + linkType: hard + +"path-scurry@npm:^2.0.0": + version: 2.0.1 + resolution: "path-scurry@npm:2.0.1" + dependencies: + lru-cache: "npm:^11.0.0" + minipass: "npm:^7.1.2" + checksum: 10/1e9c74e9ccf94d7c16056a5cb2dba9fa23eec1bc221ab15c44765486b9b9975b4cd9a4d55da15b96eadf67d5202e9a2f1cec9023fbb35fe7d9ccd0ff1891f88b + languageName: node + linkType: hard + +"picomatch@npm:^4.0.3": + version: 4.0.3 + resolution: "picomatch@npm:4.0.3" + checksum: 10/57b99055f40b16798f2802916d9c17e9744e620a0db136554af01d19598b96e45e2f00014c91d1b8b13874b80caa8c295b3d589a3f72373ec4aaf54baa5962d5 + languageName: node + linkType: hard + +"tinyglobby@npm:^0.2.14": + version: 0.2.15 + resolution: "tinyglobby@npm:0.2.15" + dependencies: + fdir: "npm:^6.5.0" + picomatch: "npm:^4.0.3" + checksum: 10/d72bd826a8b0fa5fa3929e7fe5ba48fceb2ae495df3a231b6c5408cd7d8c00b58ab5a9c2a76ba56a62ee9b5e083626f1f33599734bed1ffc4b792406408f0ca2 + languageName: node + linkType: hard + +"ts-dependency-grapher@workspace:.": + version: 0.0.0-use.local + resolution: "ts-dependency-grapher@workspace:." + dependencies: + "@types/minimist": "npm:^1.2.5" + chalk: "npm:^5.6.2" + glob: "npm:^13.0.0" + minimist: "npm:^1.2.8" + ts-morph: "npm:^27.0.2" + languageName: unknown + linkType: soft + +"ts-morph@npm:^27.0.2": + version: 27.0.2 + resolution: "ts-morph@npm:27.0.2" + dependencies: + "@ts-morph/common": "npm:~0.28.1" + code-block-writer: "npm:^13.0.3" + checksum: 10/b9bd8ed86d4b76ca23446d3f808787cfe95a3bcb2316769a2f3fa262ea9ab4043bb76bf8aef677f9be0d758576f074df2926e701a535f84fd21946fdbf465148 + languageName: node + linkType: hard