Merge pull request #1071 from tailwindlabs/develop

Next release

.github/CONTRIBUTING.md

@@ -2,6 +2,14 @@
 
 Thanks for your interest in contributing to Headless UI! Please take a moment to review this document **before submitting a pull request**.
 
+- [Pull requests](#pull-requests)
+- [Monorepo](#monorepo)
+- [Installation](#installation)
+- [Coding standards](#coding-standards)
+- [Running tests](#running-tests)
+- [Running playgrounds](#running-playgrounds)
+- [Scripts summary](#scripts-summary)
+
 ## Pull requests
 
 **Please ask first before starting work on any significant new features.**
@@ -11,22 +19,28 @@ Also make sure that you are making changes to both the `React` and `Vue` version
 
 ## Monorepo
 
-The Headless UI repo is a monorepo using `yarn` workspaces. Note that we are using `yarn` version 1.
+The Headless UI repo is a monorepo using `yarn` workspaces. Note that we are using `yarn` **version 1**.
 
-## Coding standards
+## Installation
 
-Our code formatting rules are defined by TSDX, which uses `eslint` and we also use `prettier`. You can check your code against these standards by running:
+You only require a `yarn install` in the root directory to install everything you need.
 
 ```sh
-yarn lint
+yarn install
 ```
 
+## Coding standards
+
+We use `prettier` for making sure that the codebase is formatted consistently.
 To automatically fix any style violations in your code, you can run:
 
 ```sh
-yarn lint --fix
+yarn lint
 ```
 
+**Note**: Whenever you commit, the lint check will run on all staged files.
+**Note**: In CI, we will only check your code, and not write with the formatted files. If you want to just check, then you can either run `yarn lint-check` or `CI=true yarn lint`
+
 ## Running tests
 
 You can run the test suite using the following commands:
@@ -47,3 +61,61 @@ 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.
 
+## Running playgrounds
+
+Currently the `React` playground (located in `packages/playground-react`) is a Next.js app that contains some examples which you can find in the `pages` directory. The `Vue` playground (located in `packages/playground-vue`) is a Vite app that contains some examples which you can find in the `src/components` directory.
+
+You can launch them by running:
+
+```sh
+yarn react playground
+
+# or
+
+yarn vue playground
+```
+
+This will also start the necessary watchers so that you don't have to care about them.
+
+## Scripts summary
+
+Global scripts, and some aliases:
+
+- `yarn install`: install all dependencies for all packages
+- `yarn clean`: this will call all `yarn {package} clean` commands
+- `yarn build`: this will call all `yarn {package} build` commands
+- `yarn lint`: this will `lint` all packages
+- `yarn test`: this will `test` all packages
+  - `yarn test`: run all jest tests
+  - `yarn test --watch`: run all jest tests in interactive mode
+  - `yarn test tabs`: run all jest tests filtered by `tabs`
+  - `yarn test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`
+
+Scripts per package:
+
+- `yarn react`: Prefix to run anything in the `@headlessui/react` package
+  - `yarn react test`: run all jest tests
+  - `yarn react test --watch`: run all jest tests in interactive mode
+  - `yarn react test tabs`: run all jest tests filtered by `tabs`
+  - `yarn react test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`
+  - `yarn react build`: build the final artefacts
+  - `yarn react lint`: validate and fix the react codebase using prettier
+  - `yarn react watch`: start a watcher for the react esm build
+    - **Note**: this will be executed for you when using the `yarn react playground`
+    - **Note**: this is not required for jest. You will probably never need this
+  - `yarn react playground`: (alias) start a development server in the `playground-react` package
+    - **Note**: this will also run `yarn react watch` for you, which means that you only need to execute `yarn react playground`
+  - `yarn react clean`: this will remove `dist` files
+- `yarn vue`: Prefix to run anything in the `@headlessui/vue` package
+  - `yarn vue test`: run all jest tests
+  - `yarn vue test --watch`: run all jest tests in interactive mode
+  - `yarn vue test tabs`: run all jest tests filtered by `tabs`
+  - `yarn vue test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`
+  - `yarn vue build`: build the final artefacts
+  - `yarn vue lint`: validate and fix the vue codebase using prettier
+  - `yarn vue watch`: start a watcher for the vue esm build
+    - **Note**: this will be executed for you when using the `yarn vue playground`
+    - **Note**: this is not required for jest. You will probably never need this
+  - `yarn vue playground`: (alias) start a development server in the `playground-vue` package
+    - **Note**: this will also run `yarn vue watch` for you, which means that you only need to execute `yarn react playground`
+  - `yarn vue clean`: this will remove `dist` files

.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,13 +12,23 @@ 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
+
+- Add `Combobox` component ([#1047](https://github.com/tailwindlabs/headlessui/pull/1047))
 
 ## [Unreleased - @headlessui/vue]
 
 ### Fixed
 
 - 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
+
+- Add `Combobox` component ([#1047](https://github.com/tailwindlabs/headlessui/pull/1047))
 
 ## [@headlessui/react@v1.4.3] - 2022-01-14
 
@@ -88,7 +98,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `aria-orientation` to `Listbox`, which swaps Up/Down with Left/Right keys ([#683](https://github.com/tailwindlabs/headlessui/pull/683))
 - Expose `close` function from the render prop for `Disclosure`, `Disclosure.Panel`, `Popover` and `Popover.Panel` ([#697](https://github.com/tailwindlabs/headlessui/pull/697))
 
-
 ## [@headlessui/vue@v1.4.0] - 2021-07-29
 
 ### Added
@@ -100,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))
@@ -120,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))
@@ -134,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))
 
@@ -146,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

@@ -11,19 +11,24 @@
   ],
   "scripts": {
     "react": "yarn workspace @headlessui/react",
+    "react-playground": "yarn workspace playground-react dev",
+    "playground-react": "yarn workspace playground-react dev",
     "vue": "yarn workspace @headlessui/vue",
-    "shared": "yarn workspace @headlessui/shared",
-    "build": "yarn workspaces run build",
+    "playground-vue": "yarn workspace playground-vue dev",
+    "vue-playground": "yarn workspace playground-vue dev",
+    "clean": "yarn workspaces run clean",
+    "build": "npm-run-all -p 'react build' 'vue 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,
@@ -32,12 +37,19 @@
     "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",
+    "prettier-plugin-tailwindcss": "^0.1.4",
+    "rimraf": "^3.0.2",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.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,9 +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",
-    "lint": "../../scripts/lint.sh"
+    "lint": "../../scripts/lint.sh",
+    "playground": "yarn workspace playground-react dev",
+    "clean": "rimraf ./dist"
   },
   "peerDependencies": {
     "react": "^16 || ^17 || ^18",
@@ -38,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"
   }
 }