fix: upgrade [email protected] and fix type import (#1022)

- fix types by using explicit export and import (instead of implicit
global declarations)
- upgrade `[email protected]` 
- remove `test` in favor of native `node --test`

package.json

@@ -8,7 +8,7 @@
     "prettier": "prettier \"./**/*.ts\" \"./**/*.tsx\" --write",
     "git-pre-commit": "npm run prettier && git add -A",
     "lint": "npm run prettier && git diff --exit-code",
-    "test": "tsc && rm -f test/hardlink/link && ln test/hardlink/orig.txt test/hardlink/link && node--test dist/test/"
+    "test": "tsc && rm -f test/hardlink/link && ln test/hardlink/orig.txt test/hardlink/link && node --test dist/test/"
   },
   "repository": "styfle/packagephobia",
   "author": "styfle",
@@ -21,14 +21,13 @@
     "semver": "^7.5.2"
   },
   "devDependencies": {
-    "@types/node": "^18.15.3",
+    "@types/node": "^18.18.9",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/semver": "^7.3.10",
     "npm": "^10.2.3",
     "prettier": "^3.0.0",
-    "test": "^3.0.1",
-    "typescript": "^5.0.2"
+    "typescript": "^5.2.2"
   },
   "packageManager": "[email protected]"
 }

src/components/BarGraph.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { getReadableFileSize } from '../util/npm-parser';
+import type { PkgSize } from '../types';
 const stylesheet = `
 .bar-graph{
     height:55vh;

src/components/LinkedLogos.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { escape } from 'querystring';
 import LinkedLogo from './LinkedLogo';
+import type { PkgSize } from '../types';
 
 interface Props {
     pkgSize: PkgSize;

src/components/Stats.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { SizeWithUnit } from '../types';
 
 interface Props {
     publish: SizeWithUnit;

src/page-props/common.ts

@@ -2,6 +2,7 @@ import { findOne, insert } from '../util/backend/db';
 import { getAllDistTags, getAllVersions, getPublishDate } from '../util/npm-api';
 import { calculatePackageSize } from '../util/backend/npm-stats';
 import { versionUnknown } from '../util/constants';
+import type { NpmManifest, PkgSize } from '../types';
 
 export async function getPkgDetails(
     manifest: NpmManifest | null,

src/page-props/compare.ts

@@ -1,5 +1,6 @@
 import { fetchManifest } from '../util/npm-api';
 import { getPkgDetails } from './common';
+import type { CompareProps, PackageVersion } from '../types';
 
 export async function getCompareProps(
     inputStr: string,

src/page-props/results.ts

@@ -3,6 +3,7 @@ import { findAll } from '../util/backend/db';
 import { getAllDistTags, getVersionsForChart, getPublishDate } from '../util/npm-api';
 import { getPkgDetails } from './common';
 import { NotFoundError } from '../util/not-found-error';
+import type { NpmManifest, PackageVersion, ResultProps } from '../types';
 
 export async function getResultProps(
     inputStr: string,

src/pages/_document.tsx

@@ -18,6 +18,7 @@ import Logo from '../components/Logo';
 import { fetchManifest } from '../util/npm-api';
 import { parsePackageString } from '../util/npm-parser';
 import { NotFoundError } from '../util/not-found-error';
+import type { NpmManifest, PackageVersion, ParsedUrlQuery } from '../types';
 
 const existingPaths = new Set(Object.values(pages));
 const logoSize = 108;

src/pages/compare.tsx

@@ -7,6 +7,7 @@ import { getBadgeUrl } from '../util/badge';
 import { Stat } from '../components/Stats';
 import SearchBar from '../components/SearchBar';
 import Sponsors from '../components/Sponsors';
+import type { CompareProps } from '../types';
 
 export default ({ inputStr, results }: CompareProps) => {
     const resultsToPrint = results.map(({ pkgSize, isLatest }) => {

src/pages/result.tsx

@@ -12,6 +12,7 @@ import Sponsors from '../components/Sponsors';
 import { pages, versionUnknown } from '../util/constants';
 import { getReadableFileSize } from '../util/npm-parser';
 import { getBadgeSvg, getBadgeMarkdown } from '../util/badge';
+import type { PkgSize, ResultProps } from '../types';
 
 const error: React.CSSProperties = {
     fontSize: '2.3rem',

src/server.ts

@@ -9,6 +9,7 @@ import { parsePackageString } from './util/npm-parser';
 import semver from 'semver';
 import { fetchManifest } from './util/npm-api';
 import { NotFoundError } from './util/not-found-error';
+import type { ApiResponseV1, ApiResponseV2, PackageJson } from './types';
 
 const { TMPDIR = '/tmp', GA_ID = '', NODE_ENV } = process.env;
 process.env.HOME = TMPDIR;

src/interfaces/types.d.ts → src/types.ts

@@ -1,16 +1,16 @@
-interface PackageVersion {
+export interface PackageVersion {
     name: string;
     version: string | null;
     scoped: boolean;
 }
 
-interface SizeWithUnit {
+export interface SizeWithUnit {
     size: string;
     unit: string;
     pretty: string;
 }
 
-interface PkgSize {
+export interface PkgSize {
     name: string;
     version: string;
     publishDate: string;
@@ -21,49 +21,49 @@ interface PkgSize {
     disabled?: boolean;
 }
 
-interface ApiResponseV1 {
+export interface ApiResponseV1 {
     publishSize: number;
     installSize: number;
 }
 
-interface ApiResponseV2 {
+export interface ApiResponseV2 {
     name: string;
     version: string;
     publish: ApiResponseSize;
     install: ApiResponseSize;
 }
 
-interface ApiResponseSize {
+export interface ApiResponseSize {
     bytes: number;
     files: number;
     pretty: string;
     color: string;
 }
 
-interface ResultProps {
+export interface ResultProps {
     pkgSize: PkgSize;
     readings: PkgSize[];
     cacheResult: boolean;
     isLatest: boolean;
     inputStr: string;
 }
 
-interface ComparePackage {
+export interface ComparePackage {
     pkgSize: PkgSize;
     cacheResult: boolean;
     isLatest: boolean;
 }
 
-interface CompareProps {
+export interface CompareProps {
     inputStr: string;
     results: ComparePackage[];
 }
 
-interface ParsedUrlQuery {
+export interface ParsedUrlQuery {
     [key: string]: string | string[] | undefined;
 }
 
-interface NpmManifest {
+export interface NpmManifest {
     name: string;
     description: string;
     versions: { [version: string]: any };
@@ -74,7 +74,7 @@ interface NpmManifest {
     };
 }
 
-interface PackageJson {
+export interface PackageJson {
     dependencies: {
         [key: string]: string;
     };

src/util/backend/db.ts

@@ -1,4 +1,5 @@
 import Redis from 'ioredis';
+import type { PkgSize } from '../../types';
 
 const { REDIS_URL = '' } = process.env;
 delete process.env.REDIS_URL;

src/util/backend/npm-stats.ts

@@ -6,6 +6,7 @@ const mkdirAsync = promisify(mkdir);
 const writeFileAsync = promisify(writeFile);
 const execFileAsync = promisify(execFile);
 import { npmInstall, packageString } from './npm-wrapper';
+import type { PkgSize } from '../../types';
 
 // TODO: Can this be optimized by changing sync to async?
 export function getDirSize(root: string, seen: Set<number>): number {

src/util/badge.ts

@@ -1,6 +1,7 @@
 import { badgen } from 'badgen';
 import { getReadableFileSize, getHexColor, color } from './npm-parser';
 import { pages, productionHostname } from '../util/constants';
+import type { ApiResponseSize, PkgSize } from '../types';
 
 export function getBadgeSvg(pkgSize: PkgSize) {
     const { installSize } = pkgSize;

src/util/npm-api.ts

@@ -1,6 +1,7 @@
 import https from 'https';
 import semver from 'semver';
 import { NotFoundError } from './not-found-error';
+import type { NpmManifest } from '../types';
 
 const { NPM_REGISTRY_URL = 'https://registry.npmjs.com' } = process.env;
 

src/util/npm-parser.ts

@@ -1,3 +1,5 @@
+import type { PackageVersion, SizeWithUnit } from '../types';
+
 export function parsePackageString(packageString: string): PackageVersion {
     let name: string;
     let version: string | null;

test/npm-api-test.ts

@@ -1,5 +1,5 @@
 import * as npmapi from '../src/util/npm-api';
-import test from 'test';
+import test from 'node:test';
 import assert from 'assert/strict';
 
 const manifest = {

test/npm-parser-test.ts

@@ -1,5 +1,5 @@
 import * as npmparser from '../src/util/npm-parser';
-import test from 'test';
+import test from 'node:test';
 import assert from 'assert/strict';
 
 const kilobyte = 1024;

test/npm-stats-test.ts

@@ -1,6 +1,6 @@
 import { getDirSize } from '../src/util/backend/npm-stats';
 import { join } from 'path';
-import test from 'test';
+import test from 'node:test';
 import assert from 'assert/strict';
 
 test('getDirSize top level', () => {

tsconfig.json

@@ -2,9 +2,9 @@
     "compilerOptions": {
         "esModuleInterop": true,
         "outDir": "./dist",
-        "module": "commonjs",
-        "target": "es2019",
-        "moduleResolution": "node",
+        "target": "es2022",
+        "module": "nodenext",
+        "moduleResolution": "nodenext",
         "jsx": "react",
         "sourceMap": true,
         "strict": true,