Merge pull request #1078 from tailwindlabs/improve-build

Improve build files

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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))
+- Improve build files ([#1078](https://github.com/tailwindlabs/headlessui/pull/1078))
 
 ### Added
 
@@ -25,6 +26,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))
+- Improve build files ([#1078](https://github.com/tailwindlabs/headlessui/pull/1078))
 
 ### Added
 

jest.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  projects: ['<rootDir>/packages/*/jest.config.cjs'],
+}

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

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

packages/@headlessui-react/jest.config.js → packages/@headlessui-react/jest.config.cjs

@@ -1,3 +1,2 @@
-const create = require('../../jest/create-jest-config.js')
-
+let create = require('../../jest/create-jest-config.cjs')
 module.exports = create(__dirname, { displayName: 'React' })

packages/@headlessui-react/package.json

@@ -2,7 +2,7 @@
   "name": "@headlessui/react",
   "version": "1.4.3",
   "description": "A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "typings": "dist/index.d.ts",
   "module": "dist/headlessui.esm.js",
   "license": "MIT",
@@ -11,14 +11,11 @@
     "dist"
   ],
   "exports": {
-    ".": {
-      "import": {
-        "default": "./dist/headlessui.esm.js"
-      },
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    }
+    "import": "./dist/headlessui.esm.js",
+    "require": "./dist/index.cjs",
+    "types": "./dist/index.d.ts"
   },
+  "type": "module",
   "sideEffects": false,
   "engines": {
     "node": ">=10"

packages/@headlessui-vue/build/index.cjs

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

packages/@headlessui-vue/jest.config.js → packages/@headlessui-vue/jest.config.cjs

@@ -1,3 +1,2 @@
-const create = require('../../jest/create-jest-config.js')
-
+let create = require('../../jest/create-jest-config.cjs')
 module.exports = create(__dirname, { displayName: ' Vue ' })

packages/@headlessui-vue/package.json

@@ -2,7 +2,7 @@
   "name": "@headlessui/vue",
   "version": "1.4.3",
   "description": "A set of completely unstyled, fully accessible UI components for Vue 3, designed to integrate beautifully with Tailwind CSS.",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "typings": "dist/index.d.ts",
   "module": "dist/headlessui.esm.js",
   "license": "MIT",
@@ -11,14 +11,11 @@
     "dist"
   ],
   "exports": {
-    ".": {
-      "import": {
-        "default": "./dist/headlessui.esm.js"
-      },
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    }
+    "import": "./dist/headlessui.esm.js",
+    "require": "./dist/index.cjs",
+    "types": "./dist/index.d.ts"
   },
+  "type": "module",
   "sideEffects": false,
   "engines": {
     "node": ">=10"

packages/playground-vue/src/components/Home.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="container my-24">
-    <div class="prose mx-auto">
+  <div class="container mx-auto my-24">
+    <div class="prose">
       <h2>Examples</h2>
       <Examples :examples="examples" />
     </div>

scripts/build.sh

@@ -17,10 +17,9 @@ 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[@]} $@ &
+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  --minify ${sharedOptions[@]} $@ &
+NODE_ENV=development $esbuild $input --format=cjs  --outfile=$outdir/$name.dev.cjs            ${sharedOptions[@]} $@ &
 
 # Generate types
 tsc --emitDeclarationOnly --outDir $outdir &