From ce601c043a880f6a2414b4ae4211ac6a1aeb75b3 Mon Sep 17 00:00:00 2001 From: Tianning Li Date: Mon, 27 Feb 2023 10:00:32 -0800 Subject: [PATCH 1/7] Add migration --- pages/compare/{index.js => index.ts} | 0 .../{index.js => index.ts} | 0 .../{index.js => index.ts} | 0 .../InterLinksSection/{index.js => index.ts} | 0 .../{index.js => index.ts} | 0 types/index.ts | 82 ++++++++++++++++++- 6 files changed, 78 insertions(+), 4 deletions(-) rename pages/compare/{index.js => index.ts} (100%) rename pages/package/[...packageString]/components/ExportAnalysisSection/{index.js => index.ts} (100%) rename pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/{index.js => index.ts} (100%) rename pages/package/[...packageString]/components/InterLinksSection/{index.js => index.ts} (100%) rename pages/package/[...packageString]/components/SimilarPackagesSection/{index.js => index.ts} (100%) diff --git a/pages/compare/index.js b/pages/compare/index.ts similarity index 100% rename from pages/compare/index.js rename to pages/compare/index.ts diff --git a/pages/package/[...packageString]/components/ExportAnalysisSection/index.js b/pages/package/[...packageString]/components/ExportAnalysisSection/index.ts similarity index 100% rename from pages/package/[...packageString]/components/ExportAnalysisSection/index.js rename to pages/package/[...packageString]/components/ExportAnalysisSection/index.ts diff --git a/pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/index.js b/pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/index.ts similarity index 100% rename from pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/index.js rename to pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/index.ts diff --git a/pages/package/[...packageString]/components/InterLinksSection/index.js b/pages/package/[...packageString]/components/InterLinksSection/index.ts similarity index 100% rename from pages/package/[...packageString]/components/InterLinksSection/index.js rename to pages/package/[...packageString]/components/InterLinksSection/index.ts diff --git a/pages/package/[...packageString]/components/SimilarPackagesSection/index.js b/pages/package/[...packageString]/components/SimilarPackagesSection/index.ts similarity index 100% rename from pages/package/[...packageString]/components/SimilarPackagesSection/index.js rename to pages/package/[...packageString]/components/SimilarPackagesSection/index.ts diff --git a/types/index.ts b/types/index.ts index 9bbdecc8..4872b8b2 100644 --- a/types/index.ts +++ b/types/index.ts @@ -1,12 +1,86 @@ import React from 'react' export type PackageInfo = { - name: string - description: string - repository: string + isTreeShakeable?: boolean + + assets: Asset[] dependencyCount: number - isTreeShakeable: boolean + dependencySizes: DependencySize[] + description: string + gzip: number + hasJSModule: string + hasJSNext: boolean hasSideEffects: string[] | boolean + isModuleType: boolean + name: string + parse: any + peerDependencies: string[] + repository: string + scoped: boolean + size: number + version: string +} + +export type Asset = { + gzip: number + name: string + parse: any // TODO: fix type + size: number + type: string +} + +export type DependencySize = { + approximateSize: number + name: string + isSelf?: boolean + percentShare?: number + sizeShare?: number +} + +export type Tag = { + tag: string + weight: number +} + +type Score = { + detail: { + maintenance: number + popularity: number + quality: number + } + final: number +} + +type Maintainer = { + email: string + username: string +} + +type Package = { + author: { + email: string + name: string + username: string + } + date: string + description: string + links: { + bugs: string + homepage: string + npm: string + repository: string + } + maintainers: Maintainer[] + name: string + publisher: Maintainer + scope: string + version: string } +export type PackageSuggestion = { + highlight: string + package: Package + score: Score + searchScore: number +} export type WithClassName = Pick, 'className'> From 7e4b96676248608b5bf4f8d5009f2830544591c6 Mon Sep 17 00:00:00 2001 From: Tianning Li Date: Mon, 27 Feb 2023 10:02:44 -0800 Subject: [PATCH 2/7] Add similar packages section migration --- ...ilarPackagesSection.js => SimilarPackagesSection.tsx} | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) rename pages/package/[...packageString]/components/SimilarPackagesSection/{SimilarPackagesSection.js => SimilarPackagesSection.tsx} (80%) diff --git a/pages/package/[...packageString]/components/SimilarPackagesSection/SimilarPackagesSection.js b/pages/package/[...packageString]/components/SimilarPackagesSection/SimilarPackagesSection.tsx similarity index 80% rename from pages/package/[...packageString]/components/SimilarPackagesSection/SimilarPackagesSection.js rename to pages/package/[...packageString]/components/SimilarPackagesSection/SimilarPackagesSection.tsx index 6210b43d..c7260654 100644 --- a/pages/package/[...packageString]/components/SimilarPackagesSection/SimilarPackagesSection.js +++ b/pages/package/[...packageString]/components/SimilarPackagesSection/SimilarPackagesSection.tsx @@ -1,7 +1,14 @@ import React, { Component } from 'react' import SimilarPackageCard from '../../../../../client/components/SimilarPackageCard/SimilarPackageCard' +import { PackageInfo } from '../../../../../types' -class SimilarPackagesSection extends Component { +type SimilarPackagesSectionProps = { + packs: PackageInfo[] + category: string + comparisonGzip: number +} + +class SimilarPackagesSection extends Component { render() { const { packs, category, comparisonGzip } = this.props return ( From 577d1c5882cd26e33be1b5c6f4908642fb739048 Mon Sep 17 00:00:00 2001 From: Tianning Li Date: Mon, 27 Feb 2023 10:14:04 -0800 Subject: [PATCH 3/7] Add treemapsection migrations --- .../{TreemapSection.js => TreemapSection.tsx} | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) rename pages/package/[...packageString]/components/{TreemapSection.js => TreemapSection.tsx} (87%) diff --git a/pages/package/[...packageString]/components/TreemapSection.js b/pages/package/[...packageString]/components/TreemapSection.tsx similarity index 87% rename from pages/package/[...packageString]/components/TreemapSection.js rename to pages/package/[...packageString]/components/TreemapSection.tsx index 9689dd69..988acddb 100644 --- a/pages/package/[...packageString]/components/TreemapSection.js +++ b/pages/package/[...packageString]/components/TreemapSection.tsx @@ -2,8 +2,15 @@ import React, { Component } from 'react' import { formatSize } from 'utils' import colors from 'client/config/colors' import { Treemap, TreemapSquare } from 'client/components/Treemap' +import { DependencySize } from '../../../../types' -class TreemapSection extends Component { +type TreemapSectionProps = { + packageName: string + packageSize: number + dependencySizes: DependencySize[] +} + +class TreemapSection extends Component { state = { width: 0, height: 0, @@ -77,7 +84,7 @@ class TreemapSection extends Component { })) depdendenciesCopy.sort((depA, depB) => { - return depB.percentShare - depA.percentShare + return (depB.percentShare || 0) - (depA.percentShare || 0) }) let compactedDependencies = [] @@ -93,11 +100,11 @@ class TreemapSection extends Component { 0 ) const percentShare = otherDependencies.reduce( - (acc, dep) => acc + dep.percentShare, + (acc, dep) => acc + (dep.percentShare || 0), 0 ) const sizeShare = otherDependencies.reduce( - (acc, dep) => acc + dep.sizeShare, + (acc, dep) => acc + (dep.sizeShare || 0), 0 ) @@ -110,7 +117,7 @@ class TreemapSection extends Component { tooltip: otherDependencies .map( dep => - `${dep.name} ｜ ${dep.percentShare.toFixed( + `${dep.name} ｜ ${(dep.percentShare || 0).toFixed( 1 )}% ｜ ~ ${getFormattedSize(dep.sizeShare)} min` ) @@ -136,8 +143,9 @@ class TreemapSection extends Component { data-balloon-pos="top" className="treemap__square" > - {dep.percentShare > ellipsizeLimit && - dep.name.length < dep.percentShare * (12 / ellipsizeLimit) ? ( + {(dep.percentShare || 0) > ellipsizeLimit && + dep.name.length < + (dep.percentShare || 0) * (12 / ellipsizeLimit) ? (
{dep.isSelf || dep.isOthers ? ( @@ -156,11 +164,11 @@ class TreemapSection extends Component { className="treemap__percent" style={{ fontSize: `${ - 14 + Math.min(dep.percentShare * 1.2, 25) + 14 + Math.min((dep.percentShare || 0) * 1.2, 25) }px`, }} > - {dep.percentShare.toFixed(1)} + {(dep.percentShare || 0).toFixed(1)} %
From 4615e856eb3eb36bf90c9867d3b2f5dcb78892ec Mon Sep 17 00:00:00 2001 From: Tianning Li Date: Mon, 27 Feb 2023 10:26:35 -0800 Subject: [PATCH 4/7] Add more migration --- ...rLinksSection.js => InterLinksSection.tsx} | 13 ++++++--- ...ctionCard.js => InterLinksSectionCard.tsx} | 10 ++++++- pages/scan/{Scan.js => Scan.tsx} | 27 ++++++++++++++----- 3 files changed, 38 insertions(+), 12 deletions(-) rename pages/package/[...packageString]/components/InterLinksSection/{InterLinksSection.js => InterLinksSection.tsx} (81%) rename pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/{InterLinksSectionCard.js => InterLinksSectionCard.tsx} (80%) rename pages/scan/{Scan.js => Scan.tsx} (90%) diff --git a/pages/package/[...packageString]/components/InterLinksSection/InterLinksSection.js b/pages/package/[...packageString]/components/InterLinksSection/InterLinksSection.tsx similarity index 81% rename from pages/package/[...packageString]/components/InterLinksSection/InterLinksSection.js rename to pages/package/[...packageString]/components/InterLinksSection/InterLinksSection.tsx index 54626507..ee8fa557 100644 --- a/pages/package/[...packageString]/components/InterLinksSection/InterLinksSection.js +++ b/pages/package/[...packageString]/components/InterLinksSection/InterLinksSection.tsx @@ -5,12 +5,13 @@ import { } from '../../../../../utils/common.utils' import API from '../../../../../client/api' import InterLinksSectionCard from './InterLinksSectionCard' +import { PackageSuggestion } from '../../../../../types' -function usePackagesFromSameScope(packageName) { +function usePackagesFromSameScope(packageName: string) { const { scope } = parsePackageString(packageName) - const [morePackages, setMorePackages] = useState([]) - const getAgeScore = result => + const [morePackages, setMorePackages] = useState([]) + const getAgeScore = (result: PackageSuggestion) => Math.min(1 / Math.log(daysFromToday(result.package.date)), 1) useEffect(() => { @@ -29,7 +30,11 @@ function usePackagesFromSameScope(packageName) { return morePackages } -const InterLinksSection = props => { +interface InterLinksSectionProps { + packageName: string +} + +const InterLinksSection: React.FC = props => { const { scope } = parsePackageString(props.packageName) const morePackages = usePackagesFromSameScope(props.packageName) diff --git a/pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/InterLinksSectionCard.js b/pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/InterLinksSectionCard.tsx similarity index 80% rename from pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/InterLinksSectionCard.js rename to pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/InterLinksSectionCard.tsx index 36092757..3752344b 100644 --- a/pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/InterLinksSectionCard.js +++ b/pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/InterLinksSectionCard.tsx @@ -3,7 +3,15 @@ import Link from 'next/link' import { formatDistanceToNow } from 'date-fns' import React from 'react' -export default function InterLinksSectionCard(props) { +interface InterLinksSectionCardProps { + description: string + name: string + date: string | number | Date +} + +export default function InterLinksSectionCard( + props: InterLinksSectionCardProps +) { const { description, name, date } = props return ( diff --git a/pages/scan/Scan.js b/pages/scan/Scan.tsx similarity index 90% rename from pages/scan/Scan.js rename to pages/scan/Scan.tsx index 112a6a4a..4a0a4181 100644 --- a/pages/scan/Scan.js +++ b/pages/scan/Scan.tsx @@ -8,7 +8,18 @@ import Dropzone from 'react-dropzone' import Router from 'next/router' import * as semver from 'semver' -export default class Scan extends Component { +type Package = { + name: string + resolvedVersion: string + versionRange: string +} + +type ScanState = { + packages: Package | null + selectedPackages: Package[] +} + +export default class Scan extends Component<_, ScanState> { state = { packages: null, selectedPackages: [], @@ -18,7 +29,7 @@ export default class Scan extends Component { Analytics.pageView('scan') } - resolveVersionFromRange = range => { + resolveVersionFromRange = (range: string) => { const rangeSet = new semver.Range(range).set return rangeSet[0][0].semver.version } @@ -27,10 +38,12 @@ export default class Scan extends Component { const checkedInputs = this.packageSelectionContainer.querySelectorAll('input:checked') - const selectedPackages = Array.from(checkedInputs).map(({ value }) => { - const [name, resolvedVersion] = value.split('#') - return { name, resolvedVersion } - }) + const selectedPackages: Package[] = Array.from(checkedInputs).map( + ({ value }) => { + const [name, resolvedVersion] = value.split('#') + return { name, resolvedVersion } + } + ) this.setState({ selectedPackages }) } @@ -39,7 +52,7 @@ export default class Scan extends Component { this.setSelectedPackages() } - handleDropAccepted = ([file]) => { + handleDropAccepted = ([file]: [file: File]) => { const reader = new FileReader() reader.onload = () => { try { From f0f072d1fbb27d312ef8b31697ce6aa8f3d61a6a Mon Sep 17 00:00:00 2001 From: Tianning Li Date: Mon, 27 Feb 2023 10:59:21 -0800 Subject: [PATCH 5/7] Add more migrations --- ...isSection.js => ExportAnalysisSection.tsx} | 63 ++++++++++++++++--- .../{index.page.js => index.page.tsx} | 0 .../{index.page.js => index.page.tsx} | 0 pages/scan/{index.page.js => index.page.tsx} | 0 types/index.ts | 8 +-- 5 files changed, 59 insertions(+), 12 deletions(-) rename pages/package/[...packageString]/components/ExportAnalysisSection/{ExportAnalysisSection.js => ExportAnalysisSection.tsx} (87%) rename pages/package/[...packageString]/{index.page.js => index.page.tsx} (100%) rename pages/scan-results/{index.page.js => index.page.tsx} (100%) rename pages/scan/{index.page.js => index.page.tsx} (100%) diff --git a/pages/package/[...packageString]/components/ExportAnalysisSection/ExportAnalysisSection.js b/pages/package/[...packageString]/components/ExportAnalysisSection/ExportAnalysisSection.tsx similarity index 87% rename from pages/package/[...packageString]/components/ExportAnalysisSection/ExportAnalysisSection.js rename to pages/package/[...packageString]/components/ExportAnalysisSection/ExportAnalysisSection.tsx index c5883a1b..63c7e16a 100644 --- a/pages/package/[...packageString]/components/ExportAnalysisSection/ExportAnalysisSection.js +++ b/pages/package/[...packageString]/components/ExportAnalysisSection/ExportAnalysisSection.tsx @@ -5,6 +5,7 @@ import API from '../../../../../client/api' import SearchIcon from '../../../../../client/components/Icons/SearchIcon' import JumpingDots from '../../../../../client/components/JumpingDots' import { formatSize, resolveBuildError } from '../../../../../utils' +import { Asset } from '../../../../../types' const State = { TBD: 'tbd', @@ -14,7 +15,7 @@ const State = { REJECTED: 'rejected', } -function getBGClass(ratio) { +function getBGClass(ratio: number) { if (ratio < 0.05) { return 'low-1' } else if (ratio < 0.15) { @@ -32,7 +33,14 @@ function getBGClass(ratio) { } } -class ExportPill extends React.Component { +type ExportPillProps = { + name: string + size: number + totalSize: number + isLoading: boolean +} + +class ExportPill extends React.Component { render() { const { name, size, totalSize, isLoading } = this.props return ( @@ -63,9 +71,15 @@ class ExportPill extends React.Component { } } -function ExportList({ exports, totalSize, isLoading }) { +type ExportListProps = { + exports: Asset[] + totalSize: number + isLoading: boolean +} + +function ExportList({ exports, totalSize, isLoading }: ExportListProps) { const shouldShowLabels = exports.length > 20 - const exportDictionary = {} + const exportDictionary: { [x: string]: (Asset | { name: string })[] } = {} let curIndex = 0 exports.forEach(exp => { @@ -117,7 +131,11 @@ function ExportList({ exports, totalSize, isLoading }) { ) } -function InputExportFilter({ onChange }) { +type InputExportFilterProps = { + onChange: (text: string) => void +} + +function InputExportFilter({ onChange }: InputExportFilterProps) { return (
{ state = { analysisState: State.TBD, exports: {}, @@ -153,7 +200,7 @@ class ExportAnalysisSection extends Component { const { name, version } = result const packageString = `${name}@${version}` const startTime = Date.now() - let sizeStartTime + let sizeStartTime: number this.setState({ analysisState: State.IN_PROGRESS }) @@ -215,7 +262,7 @@ class ExportAnalysisSection extends Component { }) } - handleFilterInputChange = value => { + handleFilterInputChange = (value: string) => { this.setState({ filterText: value }) } diff --git a/pages/package/[...packageString]/index.page.js b/pages/package/[...packageString]/index.page.tsx similarity index 100% rename from pages/package/[...packageString]/index.page.js rename to pages/package/[...packageString]/index.page.tsx diff --git a/pages/scan-results/index.page.js b/pages/scan-results/index.page.tsx similarity index 100% rename from pages/scan-results/index.page.js rename to pages/scan-results/index.page.tsx diff --git a/pages/scan/index.page.js b/pages/scan/index.page.tsx similarity index 100% rename from pages/scan/index.page.js rename to pages/scan/index.page.tsx diff --git a/types/index.ts b/types/index.ts index 4872b8b2..dc1d29ad 100644 --- a/types/index.ts +++ b/types/index.ts @@ -22,11 +22,11 @@ export type PackageInfo = { } export type Asset = { - gzip: number + gzip?: number name: string - parse: any // TODO: fix type - size: number - type: string + parse?: any // TODO: fix type + size?: number + type?: string } export type DependencySize = { From 66c771a4fe8fec9cf7999f52bf9769ab22c9861d Mon Sep 17 00:00:00 2001 From: Tianning Li Date: Mon, 27 Feb 2023 11:11:03 -0800 Subject: [PATCH 6/7] Add migrations --- .../{ResultPage.js => ResultPage.tsx} | 0 .../{ScanResults.js => ScanResults.tsx} | 21 +++++++++++++++---- 2 files changed, 17 insertions(+), 4 deletions(-) rename pages/package/[...packageString]/{ResultPage.js => ResultPage.tsx} (100%) rename pages/scan-results/{ScanResults.js => ScanResults.tsx} (95%) diff --git a/pages/package/[...packageString]/ResultPage.js b/pages/package/[...packageString]/ResultPage.tsx similarity index 100% rename from pages/package/[...packageString]/ResultPage.js rename to pages/package/[...packageString]/ResultPage.tsx diff --git a/pages/scan-results/ScanResults.js b/pages/scan-results/ScanResults.tsx similarity index 95% rename from pages/scan-results/ScanResults.js rename to pages/scan-results/ScanResults.tsx index 8c8b5196..80a7e156 100644 --- a/pages/scan-results/ScanResults.js +++ b/pages/scan-results/ScanResults.tsx @@ -13,8 +13,21 @@ import { parsePackageString } from '../../utils/common.utils' import API from '../../client/api' import { getTimeFromSize } from '../../utils' +import { Asset } from '../../types' + +type ResultCardProps = { + pack: { + result: Asset + promiseState: string + error: { + code: string + message: string + } + } + index: number +} -class ResultCard extends Component { +class ResultCard extends Component { render() { const { pack, index } = this.props @@ -32,14 +45,14 @@ class ResultCard extends Component {
{ const successfulBuildCount = packages.reduce( - (curSum, nextPack) => + (curSum: number, nextPack) => nextPack.promiseState === 'fulfilled' ? curSum + 1 : curSum, 0 ) From a0be45718684bb58055125117803296618f72136 Mon Sep 17 00:00:00 2001 From: Tianning Li Date: Mon, 27 Feb 2023 11:39:08 -0800 Subject: [PATCH 7/7] Add more types --- .../ExportAnalysisSection/ExportAnalysisSection.tsx | 10 +++++----- pages/scan-results/ScanResults.tsx | 6 ++++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/pages/package/[...packageString]/components/ExportAnalysisSection/ExportAnalysisSection.tsx b/pages/package/[...packageString]/components/ExportAnalysisSection/ExportAnalysisSection.tsx index 63c7e16a..7bfabd7e 100644 --- a/pages/package/[...packageString]/components/ExportAnalysisSection/ExportAnalysisSection.tsx +++ b/pages/package/[...packageString]/components/ExportAnalysisSection/ExportAnalysisSection.tsx @@ -35,14 +35,14 @@ function getBGClass(ratio: number) { type ExportPillProps = { name: string - size: number + size?: number totalSize: number isLoading: boolean } class ExportPill extends React.Component { render() { - const { name, size, totalSize, isLoading } = this.props + const { name, size = 0, totalSize, isLoading } = this.props return (
  • 20 - const exportDictionary: { [x: string]: (Asset | { name: string })[] } = {} + const exportDictionary: { [x: string]: Asset[] } = {} let curIndex = 0 exports.forEach(exp => { @@ -106,7 +106,7 @@ function ExportList({ exports, totalSize, isLoading }: ExportListProps) { size={exportDictionary[letter][0].gzip} totalSize={totalSize} name={exportDictionary[letter][0].name} - path={exportDictionary[letter][0].path} + // path={exportDictionary[letter][0].path} key={exportDictionary[letter][0].name} isLoading={curIndex++ < 40 && isLoading} /> @@ -119,7 +119,7 @@ function ExportList({ exports, totalSize, isLoading }: ExportListProps) { size={exp.gzip} totalSize={totalSize} name={exp.name} - path={exp.path} + // path={exp.path} key={exp.name} isLoading={curIndex++ < 40 && isLoading} /> diff --git a/pages/scan-results/ScanResults.tsx b/pages/scan-results/ScanResults.tsx index 80a7e156..a83b53fc 100644 --- a/pages/scan-results/ScanResults.tsx +++ b/pages/scan-results/ScanResults.tsx @@ -248,12 +248,14 @@ class ScanResults extends Component { const packages = this.sortPackages() const totalMinSize = packages.reduce( - (curTotal, pack) => curTotal + (pack.result ? pack.result.size : 0), + (curTotal: number, pack) => + curTotal + (pack.result ? pack.result.size : 0), 0 ) const totalGZIPSize = packages.reduce( - (curTotal, pack) => curTotal + (pack.result ? pack.result.gzip : 0), + (curTotal: number, pack) => + curTotal + (pack.result ? pack.result.gzip : 0), 0 )