Fix CJS types (#2880)

* Fix Vue type error

* Add separate CTS types

* Add “Are The Types Wrong” CLI

* wip

* Bump node versions in workflows

* wip

* wip

* wip

* yolo

* yolo (again?)

* wip

* wip

.github/workflows/main.yml

@@ -10,7 +10,7 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  NODE_VERSION: 16.x
+  NODE_VERSION: 18.x
 
 jobs:
   install:
@@ -80,3 +80,19 @@ jobs:
         run: yarn build
         env:
           CI: true
+
+  check-types:
+    runs-on: ubuntu-latest
+    needs: [build]
+
+    steps:
+      - name: Begin CI...
+        uses: actions/checkout@v3
+      - uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Check Types
+        run: yarn lint-types
+        env:
+          CI: true

.github/workflows/prepare-release.yml

@@ -26,6 +26,13 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - name: Check Types
+        run: |
+          yarn build
+          yarn lint-types
+        env:
+          CI: true
+
       - run: git fetch --tags -f
 
       - name: Resolve version

.github/workflows/release-insiders.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
 
     steps:
       - uses: actions/checkout@v3

.github/workflows/release.yml

@@ -20,7 +20,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
 
     steps:
       - uses: actions/checkout@v3

package.json

@@ -21,6 +21,7 @@
     "test": "./scripts/test.sh",
     "lint": "./scripts/lint.sh",
     "lint-check": "CI=true ./scripts/lint.sh",
+    "lint-types": "CI=true yarn workspaces run lint-types",
     "release-channel": "node ./scripts/release-channel.js",
     "release-notes": "node ./scripts/release-notes.js",
     "package-path": "node ./scripts/package-path.js"
@@ -44,6 +45,7 @@
     ]
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.13.3",
     "@swc/core": "^1.2.131",
     "@swc/jest": "^0.2.17",
     "@testing-library/jest-dom": "^5.16.4",

packages/@headlessui-react/package.json

@@ -11,7 +11,10 @@
     "dist"
   ],
   "exports": {
-    "types": "./dist/index.d.ts",
+    "types": {
+      "import": "./dist/index.d.ts",
+      "require": "./dist/index.d.cts"
+    },
     "import": "./dist/headlessui.esm.js",
     "require": "./dist/index.cjs"
   },
@@ -34,6 +37,7 @@
     "watch": "../../scripts/watch.sh --external:react --external:react-dom",
     "test": "../../scripts/test.sh",
     "lint": "../../scripts/lint.sh",
+    "lint-types": "yarn run attw -P",
     "playground": "yarn workspace playground-react dev",
     "clean": "rimraf ./dist"
   },

packages/@headlessui-tailwindcss/package.json

@@ -11,7 +11,10 @@
     "dist"
   ],
   "exports": {
-    "types": "./dist/index.d.ts",
+    "types": {
+      "import": "./dist/index.d.ts",
+      "require": "./dist/index.d.cts"
+    },
     "import": "./dist/headlessui.esm.js",
     "require": "./dist/index.cjs"
   },
@@ -33,6 +36,7 @@
     "watch": "../../scripts/watch.sh --external:tailwindcss",
     "test": "../../scripts/test.sh",
     "lint": "../../scripts/lint.sh",
+    "lint-types": "yarn run attw -P",
     "clean": "rimraf ./dist"
   },
   "peerDependencies": {

packages/@headlessui-tailwindcss/scripts/fix-types.js

@@ -12,12 +12,13 @@ let path = require('path')
  * CommonJs environment.
  **/
 
-let types = path.resolve(__dirname, '..', 'dist', 'index.d.ts')
+let esmTypes = path.resolve(__dirname, '..', 'dist', 'index.d.ts')
+let cjsTypes = path.resolve(__dirname, '..', 'dist', 'index.d.cts')
 
 async function run() {
-  let contents = await fs.readFile(types, 'utf8')
+  let contents = await fs.readFile(esmTypes, 'utf8')
   contents = contents.replace('export default', 'export =')
-  await fs.writeFile(types, contents, 'utf8')
+  await fs.writeFile(cjsTypes, contents, 'utf8')
 }
 
 run()

packages/@headlessui-vue/package.json

@@ -11,7 +11,10 @@
     "dist"
   ],
   "exports": {
-    "types": "./dist/index.d.ts",
+    "types": {
+      "import": "./dist/index.d.ts",
+      "require": "./dist/index.d.cts"
+    },
     "import": "./dist/headlessui.esm.js",
     "require": "./dist/index.cjs"
   },
@@ -34,6 +37,7 @@
     "watch": "../../scripts/watch.sh --external:vue",
     "test": "../../scripts/test.sh",
     "lint": "../../scripts/lint.sh",
+    "lint-types": "yarn run attw -P",
     "playground": "yarn workspace playground-vue dev",
     "clean": "rimraf ./dist"
   },

packages/@headlessui-vue/src/utils/owner.ts

@@ -8,7 +8,7 @@ export function getOwnerDocument<T extends Element | Ref<Element | null>>(
   if (env.isServer) return null
   if (element instanceof Node) return element.ownerDocument
   if (element?.hasOwnProperty('value')) {
-    let domElement = dom(element)
+    let domElement = dom(element as any)
     if (domElement) return domElement.ownerDocument
   }
 

packages/playground-react/package.json

@@ -11,6 +11,7 @@
     "dev": "npm-run-all -p dev:*",
     "build": "next build",
     "start": "next start",
+    "lint-types": "echo",
     "clean": "rimraf ./.next"
   },
   "dependencies": {

packages/playground-vue/package.json

@@ -13,6 +13,7 @@
     "dev:next": "vite serve",
     "dev": "npm-run-all -p dev:*",
     "build": "NODE_ENV=production vite build",
+    "lint-types": "echo",
     "clean": "rimraf ./dist"
   },
   "dependencies": {

scripts/build.sh

@@ -35,11 +35,17 @@ NODE_ENV=production  $esbuild $input       --format=esm --outfile=$DST/$name.esm
 NODE_ENV=production  $esbuild $input --format=cjs --outfile=$DST/$name.prod.cjs --minify --bundle --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER="false" --define:__DEV__="false" ${sharedOptions[@]} $@ &
 NODE_ENV=development $esbuild $input --format=cjs --outfile=$DST/$name.dev.cjs           --bundle --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER="false" --define:__DEV__="true" ${sharedOptions[@]} $@ &
 
-# Generate types
+# Generate ESM types
 tsc --emitDeclarationOnly --outDir $DST &
 
+wait
+
+# Generate CJS types
+# This is a bit of a hack, but it works because the same output works for both
+cp $DST/index.d.ts $DST/index.d.cts
+
 # Copy build files over
-cp -rf ./build/ $DST
+cp -rf ./build/* $DST/
 
 # Wait for all the scripts to finish
 wait