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

scripts/build.sh

@@ -1,14 +1,33 @@
 #!/bin/bash
 set -e
 
-node="yarn node"
-tsdxArgs=()
+# Known variables
+outdir="./dist"
+name="headlessui"
+input="./src/index.ts"
 
-# Add script name
-tsdxArgs+=("build" "--name" "headlessui" "--format" "cjs,esm,umd" "--tsconfig" "./tsconfig.tsdx.json")
+# Find executables
+esbuild=$(yarn bin esbuild)
+tsc=$(yarn bin tsc)
 
-# Passthrough arguments and flags
-tsdxArgs+=($@)
+# Setup shared options for esbuild
+sharedOptions=()
+sharedOptions+=("--bundle")
+sharedOptions+=("--platform=browser")
+sharedOptions+=("--target=es2020")
+
+# Generate actual builds
+NODE_ENV=production  $esbuild $input --format=esm  --outfile=$outdir/$name.esm.js      --minify ${sharedOptions[@]} $@ &
+NODE_ENV=production  $esbuild $input --format=cjs  --outfile=$outdir/$name.prod.cjs.js --minify ${sharedOptions[@]} $@ &
+NODE_ENV=production  $esbuild $input --format=iife --outfile=$outdir/$name.iife.js     --minify ${sharedOptions[@]} $@ &
+NODE_ENV=development $esbuild $input --format=cjs  --outfile=$outdir/$name.dev.cjs.js           ${sharedOptions[@]} $@ &
+
+# Generate types
+tsc --emitDeclarationOnly --outDir $outdir &
+
+# Copy build files over
+cp -rf ./build/ $outdir
+
+# Wait for all the scripts to finish
+wait
 
-# Execute
-$node "$(yarn bin tsdx)" "${tsdxArgs[@]}"

scripts/lint.sh

@@ -10,19 +10,23 @@ RELATIVE_TARGET_DIR="${TARGET_DIR/$ROOT_DIR/}"
 
 pushd $ROOT_DIR > /dev/null
 
-node="yarn node"
-tsdxArgs=()
+prettierArgs=()
 
-# Add script name
-tsdxArgs+=("lint")
+if ! [ -z "$CI" ]; then
+  prettierArgs+=("--check")
+else
+  prettierArgs+=("--write")
+  prettierArgs+=("$RELATIVE_TARGET_DIR")
+fi
 
 # Add default arguments
-tsdxArgs+=($RELATIVE_TARGET_DIR)
+prettierArgs+=('--ignore-unknown')
 
 # Passthrough arguments and flags
-tsdxArgs+=($@)
+prettierArgs+=($@)
 
 # Execute
-$node "$(yarn bin tsdx)" "${tsdxArgs[@]}"
+yarn prettier "${prettierArgs[@]}"
 
 popd > /dev/null
+

scripts/test.sh

@@ -8,7 +8,7 @@ jestArgs=()
 jestArgs+=("--passWithNoTests")
 
 # Add arguments based on environment variables
-if [ -n "$CI" ]; then
+if ! [ -z "$CI" ]; then
   jestArgs+=("--maxWorkers=4")
   jestArgs+=("--ci")
 fi
@@ -18,3 +18,4 @@ jestArgs+=($@)
 
 # Execute
 $node "$(yarn bin jest)" "${jestArgs[@]}"
+

scripts/watch.sh

@@ -1,14 +1,21 @@
 #!/bin/bash
 set -e
 
-node="yarn node"
-tsdxArgs=()
+# Known variables
+outdir="./dist"
+name="headlessui"
+input="./src/index.ts"
 
-# Add script name
-tsdxArgs+=("watch" "--name" "headlessui" "--format" "cjs,esm,umd" "--tsconfig" "./tsconfig.tsdx.json")
+# Find executables
+esbuild=$(yarn bin esbuild)
+tsc=$(yarn bin tsc)
 
-# Passthrough arguments and flags
-tsdxArgs+=($@)
+# Setup shared options for esbuild
+sharedOptions=()
+sharedOptions+=("--bundle")
+sharedOptions+=("--platform=browser")
+sharedOptions+=("--target=es2020")
+
+# Generate actual builds
+$esbuild $input --format=esm  --outfile=$outdir/$name.esm.js --sourcemap ${sharedOptions[@]} $@ --watch
 
-# Execute
-$node "$(yarn bin tsdx)" "${tsdxArgs[@]}"