Improve overal codebase, use modern tech like esbuild and TypeScript 4! (#1055)

* use esbuild for React instead of tsdx

* remove tsdx from Vue

* use consistent names

* add jest and prettier

* update scripts

* ignore some folders for prettier

* run lint script instead of tsdx lint

* run prettier en-masse

This has a few changes because of the new prettier version.

* bump typescript to latest version

* make typescript happy

* cleanup playground package.json

* make esbuild a dev dependency

* make scripts consistent

* fix husky hooks

* add dedicated watch script

* add `yarn playground-react` and `yarn react-playground` (alias)

This will make sure to run a watcher for the actual @headlessui/react
package, and start a development server in the playground-react package.

* ignore formatting in the .next folder

* run prettier on playground-react package

* setup playground-vue

Still not 100% working, but getting there!

* add playground aliases in @headlessui/vue and @headlessui/react

This allows you to run `yarn react playground` or `yarn vue playground`
from the root.

* add `clean` script

* move examples folder in playground-vue to root

* ensure new lines for consistency in scripts

* fix typescript issue

* fix typescript issues in playgrounds

* make sure to run prettier on everything it can

* run prettier on all files

* improve error output

If you minify the code, then it could happen that the errors are a bit
obscure. This will hardcode the component name to improve errors.

* add the `prettier-plugin-tailwindcss` plugin, party!

* update changelog

Author: RobinMalfait

.github/CONTRIBUTING.md

@@ -46,4 +46,3 @@ yarn vue test
 ```
 
 Please ensure that the tests are passing when submitting a pull request. If you're adding new features to Headless UI, please include tests.
-

.github/ISSUE_TEMPLATE/config.yml

@@ -12,4 +12,3 @@ contact_links:
   - name: Documentation Issue
     url: https://github.com/tailwindlabs/headlessui/issues/new?title=%5BDOCS%5D:%20
     about: 'For documentation issues, suggest changes on our documentation repository.'
-

.github/workflows/release-insiders.yml

@@ -44,12 +44,11 @@ jobs:
         id: vars
         run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
 
-      - name: "Version based on commit: 0.0.0-insiders.${{ steps.vars.outputs.sha_short }}"
+      - name: 'Version based on commit: 0.0.0-insiders.${{ steps.vars.outputs.sha_short }}'
         run: npm version -w packages 0.0.0-insiders.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version
 
       - name: Publish
         run: npm publish -w packages --tag insiders
         env:
           CI: true
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-

.prettierignore

@@ -0,0 +1,4 @@
+dist/
+node_modules/
+coverage/
+.next/

.swcrc

@@ -0,0 +1,11 @@
+{
+  "minify": false,
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    }
+  }
+}

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure correct order when conditionally rendering `Menu.Item`, `Listbox.Option` and `RadioGroup.Option` ([#1045](https://github.com/tailwindlabs/headlessui/pull/1045))
 - Improve controlled Tabs behaviour ([#1050](https://github.com/tailwindlabs/headlessui/pull/1050))
 - Improve typeahead search logic ([#1051](https://github.com/tailwindlabs/headlessui/pull/1051))
+- Improve overal codebase, use modern tech like `esbuild` and TypeScript 4! ([#1055](https://github.com/tailwindlabs/headlessui/pull/1055))
 
 ### Added
 
@@ -23,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Ensure correct order when conditionally rendering `MenuItem`, `ListboxOption` and `RadioGroupOption` ([#1045](https://github.com/tailwindlabs/headlessui/pull/1045))
 - Improve typeahead search logic ([#1051](https://github.com/tailwindlabs/headlessui/pull/1051))
+- Improve overal codebase, use modern tech like `esbuild` and TypeScript 4! ([#1055](https://github.com/tailwindlabs/headlessui/pull/1055))
 
 ### Added
 
@@ -107,7 +109,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [@headlessui/react@v1.3.0] - 2021-06-21
 
-### Added 
+### Added
 
 - Ensure that you can use `Transition.Child` when using implicit Transitions ([#503](https://github.com/tailwindlabs/headlessui/pull/503))
 - Add new `entered` prop for `Transition` and `Transition.Child` components ([#504](https://github.com/tailwindlabs/headlessui/pull/504))
@@ -127,7 +129,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [@headlessui/vue@v1.3.0] - 2021-06-21
 
-### Added 
+### Added
 
 - Ensure that you can use `TransitionChild` when using implicit Transitions ([#503](https://github.com/tailwindlabs/headlessui/pull/503))
 - Add new `entered` prop for `Transition` and `TransitionChild` components ([#504](https://github.com/tailwindlabs/headlessui/pull/504))
@@ -141,7 +143,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [@headlessui/react@v1.2.0] - 2021-05-10
 
-### Added 
+### Added
 
 - Introduce Open/Closed state, to simplify component communication ([#466](https://github.com/tailwindlabs/headlessui/pull/466))
 
@@ -153,7 +155,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [@headlessui/vue@v1.2.0] - 2021-05-10
 
-### Added 
+### Added
 
 - Introduce Open/Closed state, to simplify component communication ([#466](https://github.com/tailwindlabs/headlessui/pull/466))
 

README.md

@@ -49,4 +49,3 @@ For casual chit-chat with others using the library:
 ## Contributing
 
 If you're interested in contributing to Headless UI, please read our [contributing docs](https://github.com/tailwindlabs/headlessui/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
-

jest/create-jest-config.js

@@ -1,17 +1,10 @@
-const { createJestConfig: create } = require('tsdx/dist/createJestConfig')
-
 module.exports = function createJestConfig(root, options) {
   return Object.assign(
-    {},
-    create(undefined, root),
     {
       rootDir: root,
       setupFilesAfterEnv: ['<rootDir>../../jest/custom-matchers.ts'],
-      globals: {
-        'ts-jest': {
-          isolatedModules: true,
-          tsConfig: '<rootDir>/tsconfig.tsdx.json',
-        },
+      transform: {
+        '^.+\\.(t|j)sx?$': '@swc/jest',
       },
     },
     options

package.json

@@ -14,18 +14,21 @@
     "react-playground": "yarn workspace playground-react dev",
     "playground-react": "yarn workspace playground-react dev",
     "vue": "yarn workspace @headlessui/vue",
-    "shared": "yarn workspace @headlessui/shared",
+    "playground-vue": "yarn workspace playground-vue dev",
+    "vue-playground": "yarn workspace playground-vue dev",
+    "clean": "yarn workspaces run clean",
     "build": "yarn workspaces run build",
     "test": "./scripts/test.sh",
-    "lint": "./scripts/lint.sh"
+    "lint": "./scripts/lint.sh",
+    "lint-check": "CI=true ./scripts/lint.sh"
   },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": "tsdx lint"
+    "*": "yarn lint-check"
   },
   "prettier": {
     "printWidth": 100,
@@ -34,12 +37,21 @@
     "trailingComma": "es5"
   },
   "devDependencies": {
+    "@swc/core": "^1.2.131",
+    "@swc/jest": "^0.2.17",
     "@testing-library/jest-dom": "^5.11.9",
     "@types/node": "^14.14.22",
+    "esbuild": "^0.14.11",
     "husky": "^4.3.8",
+    "jest": "26",
     "lint-staged": "^12.2.1",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.1.0",
-    "typescript": "^3.9.7"
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.5.1",
+    "rimraf": "^3.0.2",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.4"
+  },
+  "dependencies": {
+    "prettier-plugin-tailwindcss": "^0.1.4"
   }
 }

packages/@headlessui-react/README.md

@@ -36,4 +36,3 @@ For help, discussion about best practices, or any other conversation that would
 For casual chit-chat with others using the library:
 
 [Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe)
-

packages/@headlessui-react/build/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./headlessui.prod.cjs.js')
+} else {
+  module.exports = require('./headlessui.dev.cjs.js')
+}

packages/@headlessui-react/package.json

@@ -4,12 +4,21 @@
   "description": "A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "module": "dist/index.esm.js",
+  "module": "dist/headlessui.esm.js",
   "license": "MIT",
   "files": [
     "README.md",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "import": {
+        "default": "./dist/headlessui.esm.js"
+      },
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "sideEffects": false,
   "engines": {
     "node": ">=10"
@@ -24,10 +33,12 @@
   },
   "scripts": {
     "prepublishOnly": "npm run build",
+    "build": "../../scripts/build.sh --external:react --external:react-dom",
+    "watch": "../../scripts/watch.sh --external:react --external:react-dom",
     "test": "../../scripts/test.sh",
-    "build": "../../scripts/build.sh",
-    "watch": "../../scripts/watch.sh",
-    "lint": "../../scripts/lint.sh"
+    "lint": "../../scripts/lint.sh",
+    "playground": "yarn workspace playground-react dev",
+    "clean": "rimraf ./dist"
   },
   "peerDependencies": {
     "react": "^16 || ^17 || ^18",
@@ -39,6 +50,7 @@
     "@types/react-dom": "^16.9.10",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "snapshot-diff": "^0.8.1"
+    "snapshot-diff": "^0.8.1",
+    "esbuild": "^0.11.18"
   }
 }