Validate package.json exports (#246)

I noticed that there are some broken `package.json` exports. This is
something that can be automatically checked.

This PR adds a new script to run
[`attw`](https://arethetypeswrong.github.io/) CLI to check if
`package.json` exports are valid.

---------

Co-authored-by: Sergio Xalambrí <hello@sergiodxa.com>

.github/workflows/ci.yml

@@ -12,6 +12,15 @@ jobs:
       - run: bun install
       - run: bun run build
 
+  exports:
+    name: Verify Exports
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+      - run: bun install
+      - run: bun run test:exports
+
   typecheck:
     name: Typechecker
     runs-on: ubuntu-latest

.github/workflows/publish.yml

@@ -13,6 +13,7 @@ jobs:
       - uses: oven-sh/setup-bun@v1
       - run: bun install
       - run: bun run build
+      - run: bun run test:exports
 
       - uses: actions/setup-node@v3
         with:

README.md

@@ -716,7 +716,7 @@ return (
 This hook allows you to read the value of `transition.state`, every `fetcher.state` in the app, and `revalidator.state`.
 
 ```ts
-import { useGlobalNavigationState } from "remix-utils/use-global-pending-state";
+import { useGlobalNavigationState } from "remix-utils/use-global-navigation-state";
 
 export function GlobalPendingUI() {
 	let states = useGlobalNavigationState();
@@ -744,7 +744,7 @@ The return value of `useGlobalNavigationState` can be `"idle"`, `"loading"` or `
 This hook lets you know if the global navigation, if one of any active fetchers is either loading or submitting, or if the revalidator is running.
 
 ```ts
-import { useGlobalPendingState } from "remix-utils/use-global-pending-state";
+import { useGlobalPendingState } from "remix-utils/use-global-navigation-state";
 
 export function GlobalPendingUI() {
   let globalState = useGlobalPendingState();
@@ -767,7 +767,7 @@ The return value of `useGlobalPendingState` is either `"idle"` or `"pending"`.
 This hook lets you know if the global transition or if one of any active fetchers is submitting.
 
 ```ts
-import { useGlobalSubmittingState } from "remix-utils/use-global-pending-state";
+import { useGlobalSubmittingState } from "remix-utils/use-global-navigation-state";
 
 export function GlobalPendingUI() {
   let globalState = useGlobalSubmittingState();
@@ -786,7 +786,7 @@ The return value of `useGlobalSubmittingState` is either `"idle"` or `"submittin
 This hook lets you know if the global transition, if one of any active fetchers is loading, or if the revalidator is running
 
 ```ts
-import { useGlobalLoadingState } from "remix-utils/use-global-pending-state";
+import { useGlobalLoadingState } from "remix-utils/use-global-navigation-state";
 
 export function GlobalPendingUI() {
   let globalState = useGlobalLoadingState();

package.json

@@ -48,12 +48,13 @@
 		"prepare": "npm run build",
 		"build": "tsc --project tsconfig.json --outDir ./build",
 		"postbuild": "prettier --write \"build/**/*.js\" \"build/**/*.d.ts\"",
-		"format": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\" \"test/**/*.ts\" \"test/**/*.tsx\" \"*.md\"",
+		"format": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\" \"test/**/*.ts\" \"test/**/*.tsx\" \"*.md\" \"package.json\"",
 		"typecheck": "tsc --project tsconfig.json --noEmit",
 		"lint": "eslint --ext .ts,.tsx src/",
 		"test": "vitest --run",
 		"test:watch": "vitest",
-		"test:coverage": "vitest --coverage"
+		"test:coverage": "vitest --coverage",
+		"test:exports": "bun scripts/check-pkg-exports.ts"
 	},
 	"author": {
 		"name": "Sergio Xalambrí",
@@ -132,6 +133,7 @@
 		}
 	},
 	"devDependencies": {
+		"@arethetypeswrong/cli": "^0.12.1",
 		"@remix-run/node": "^2.0.0",
 		"@remix-run/react": "^2.0.0",
 		"@remix-run/router": "^1.7.2",

scripts/check-pkg-exports.ts

@@ -0,0 +1,61 @@
+/* eslint-disable unicorn/no-process-exit */
+
+async function main() {
+	const proc = Bun.spawn([
+		"bunx",
+		"attw",
+		"-f",
+		"table-flipped",
+		"--no-emoji",
+		"--no-color",
+		"--pack",
+	]);
+
+	const text = await new Response(proc.stdout).text();
+
+	const entrypointLines = text
+		.slice(text.indexOf('"remix-utils/'))
+		.split("\n")
+		.filter(Boolean)
+		.filter((line) => !line.includes("─"))
+		.map((line) =>
+			line
+				.replaceAll(/[^\d "()/A-Za-z│-]/g, "")
+				.replaceAll("90m│39m", "│")
+				.replaceAll(/^│/g, "")
+				.replaceAll(/│$/g, ""),
+		);
+
+	const pkg = await Bun.file("package.json").json();
+	const entrypoints = entrypointLines.map((entrypointLine) => {
+		const [entrypoint, ...resolutionColumns] = entrypointLine.split("│");
+		return {
+			entrypoint: entrypoint.replace(pkg.name, ".").trim(),
+			esm: resolutionColumns[2].trim(),
+			bundler: resolutionColumns[3].trim(),
+		};
+	});
+
+	const entrypointsWithProblems = entrypoints.filter(
+		(item) => item.esm.includes("fail") || item.bundler.includes("fail"),
+	);
+	if (entrypointsWithProblems.length > 0) {
+		console.error("Entrypoints with problems:");
+		console.log(
+			`---\n${entrypointsWithProblems
+				.map(
+					({ entrypoint, esm, bundler }) =>
+						`entrypoint: ${entrypoint}\nesm: ${esm}\nbundler: ${bundler}`,
+				)
+				.join("\n---\n")}\n---`,
+		);
+		process.exit(1);
+	} else {
+		console.log("No problems found.");
+	}
+}
+
+await main().catch((error) => {
+	console.error(error);
+	process.exit(1);
+});

scripts/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["bun-types"]
+  },
+  "include": ["./*.ts"]
+}