From c65b87ee687d54b159b29b23b81516c194c12bdc Mon Sep 17 00:00:00 2001 From: Robin Malfait <malfait.robin@gmail.com> Date: Mon, 31 Jan 2022 00:10:06 +0100 Subject: [PATCH 1/4] improve build files Based on: https://nodejs.org/api/packages.html#conditional-exports --- packages/@headlessui-react/build/index.cjs | 7 +++++++ packages/@headlessui-react/build/index.js | 7 ------- packages/@headlessui-react/package.json | 13 +++++-------- packages/@headlessui-vue/build/index.cjs | 7 +++++++ packages/@headlessui-vue/build/index.js | 7 ------- packages/@headlessui-vue/package.json | 13 +++++-------- scripts/build.sh | 7 +++---- 7 files changed, 27 insertions(+), 34 deletions(-) create mode 100644 packages/@headlessui-react/build/index.cjs delete mode 100644 packages/@headlessui-react/build/index.js create mode 100644 packages/@headlessui-vue/build/index.cjs delete mode 100644 packages/@headlessui-vue/build/index.js diff --git a/packages/@headlessui-react/build/index.cjs b/packages/@headlessui-react/build/index.cjs new file mode 100644 index 0000000000..92466f4507 --- /dev/null +++ b/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') +} diff --git a/packages/@headlessui-react/build/index.js b/packages/@headlessui-react/build/index.js deleted file mode 100644 index 473f46702e..0000000000 --- a/packages/@headlessui-react/build/index.js +++ /dev/null @@ -1,7 +0,0 @@ -'use strict' - -if (process.env.NODE_ENV === 'production') { - module.exports = require('./headlessui.prod.cjs.js') -} else { - module.exports = require('./headlessui.dev.cjs.js') -} diff --git a/packages/@headlessui-react/package.json b/packages/@headlessui-react/package.json index 63d805cfe5..ec2c90fc99 100644 --- a/packages/@headlessui-react/package.json +++ b/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" diff --git a/packages/@headlessui-vue/build/index.cjs b/packages/@headlessui-vue/build/index.cjs new file mode 100644 index 0000000000..92466f4507 --- /dev/null +++ b/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') +} diff --git a/packages/@headlessui-vue/build/index.js b/packages/@headlessui-vue/build/index.js deleted file mode 100644 index 473f46702e..0000000000 --- a/packages/@headlessui-vue/build/index.js +++ /dev/null @@ -1,7 +0,0 @@ -'use strict' - -if (process.env.NODE_ENV === 'production') { - module.exports = require('./headlessui.prod.cjs.js') -} else { - module.exports = require('./headlessui.dev.cjs.js') -} diff --git a/packages/@headlessui-vue/package.json b/packages/@headlessui-vue/package.json index 6d26c210d9..bd83d12ba9 100644 --- a/packages/@headlessui-vue/package.json +++ b/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" diff --git a/scripts/build.sh b/scripts/build.sh index 76c8b88e70..860a8c0298 100755 --- a/scripts/build.sh +++ b/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 & From 39751cda4bee94b6fc6d9ed2073b505791a45b61 Mon Sep 17 00:00:00 2001 From: Robin Malfait <malfait.robin@gmail.com> Date: Mon, 31 Jan 2022 12:17:02 +0100 Subject: [PATCH 2/4] update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e02468b748..e8414b8ad0 100644 --- a/CHANGELOG.md +++ b/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 From 6174c47291765038bccba36df08eacb7c6693e82 Mon Sep 17 00:00:00 2001 From: Robin Malfait <malfait.robin@gmail.com> Date: Mon, 31 Jan 2022 12:29:27 +0100 Subject: [PATCH 3/4] convert .js to .cjs --- jest.config.cjs | 3 +++ jest.config.js | 3 --- jest/{create-jest-config.js => create-jest-config.cjs} | 0 packages/@headlessui-react/{jest.config.js => jest.config.cjs} | 3 +-- packages/@headlessui-vue/{jest.config.js => jest.config.cjs} | 3 +-- 5 files changed, 5 insertions(+), 7 deletions(-) create mode 100644 jest.config.cjs delete mode 100644 jest.config.js rename jest/{create-jest-config.js => create-jest-config.cjs} (100%) rename packages/@headlessui-react/{jest.config.js => jest.config.cjs} (50%) rename packages/@headlessui-vue/{jest.config.js => jest.config.cjs} (50%) diff --git a/jest.config.cjs b/jest.config.cjs new file mode 100644 index 0000000000..8333297a4b --- /dev/null +++ b/jest.config.cjs @@ -0,0 +1,3 @@ +module.exports = { + projects: ['<rootDir>/packages/*/jest.config.cjs'], +} diff --git a/jest.config.js b/jest.config.js deleted file mode 100644 index 1acc73533d..0000000000 --- a/jest.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - projects: ['<rootDir>/packages/*/jest.config.js'], -} diff --git a/jest/create-jest-config.js b/jest/create-jest-config.cjs similarity index 100% rename from jest/create-jest-config.js rename to jest/create-jest-config.cjs diff --git a/packages/@headlessui-react/jest.config.js b/packages/@headlessui-react/jest.config.cjs similarity index 50% rename from packages/@headlessui-react/jest.config.js rename to packages/@headlessui-react/jest.config.cjs index 95fe4bfa1a..8dc6875268 100644 --- a/packages/@headlessui-react/jest.config.js +++ b/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' }) diff --git a/packages/@headlessui-vue/jest.config.js b/packages/@headlessui-vue/jest.config.cjs similarity index 50% rename from packages/@headlessui-vue/jest.config.js rename to packages/@headlessui-vue/jest.config.cjs index 4596442e75..7dcc0d44a3 100644 --- a/packages/@headlessui-vue/jest.config.js +++ b/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 ' }) From 47756e2f5ac5e76275dbadfd05db3e96ca6455a7 Mon Sep 17 00:00:00 2001 From: Robin Malfait <malfait.robin@gmail.com> Date: Mon, 31 Jan 2022 12:40:19 +0100 Subject: [PATCH 4/4] make vue & react playground pages similar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A bit out of scope for this issue, but bothered me while testing around 🙃 --- packages/playground-vue/src/components/Home.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/playground-vue/src/components/Home.vue b/packages/playground-vue/src/components/Home.vue index cde352323d..3d2f30493e 100644 --- a/packages/playground-vue/src/components/Home.vue +++ b/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>