Add hooks & utils to package.json exports?

[ryanburns23]

Hello! First off... thanks for the great library!

I am the maintainer of a large UI Kit that uses headless UI under the hood to structure its components. Some of the use-cases in this kit get advanced and we try to re-use logic from headless UI where possible.

For example, we wanted to re-create this useScrollLock() hook which is found in the dialog component. This scroll lock function depends on a few helpers like disposables() & isIOS()

We do not want to duplicate all the hooks and utils from headlessUI and would rather use them directly by importing them. The files are available in the published build which is great, there may just be one minor tweak needed to make linters like eslint-import happy.

Let's take the isIOS function as an example.

• This function is exported from @headlessui/react/dist/utils/platform.js
• Exporting this function like import { isIOS } from '@headlessui/react/dist/utils/platform'; works, but there is a lint error
• The linting error reported is: Unable to resolve path to module @headlessui/react/dist/utils/platform. eslint[import/no-unresolved]

I diagnosed this error stemming from the fact that in the package.json, there are no exports to these utils or hooks folders.
Currently the package.json has exports listed as:

"exports": {
    "import": "./dist/headlessui.esm.js",
    "require": "./dist/index.cjs",
    "types": "./dist/index.d.ts"
}

To resolve this I updated the exports to:

"exports": {
    ".": {
      "import": "./dist/headlessui.esm.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    },
    "./dist/hooks/*": {
      "import": "./dist/hooks/*.js",
      "types": "./dist/hooks/*.d.ts"
    },
    "./dist/utils/*": {
      "import": "./dist/utils/*.js",
      "types": "./dist/utils/*.d.ts"
    }
 }

Are these exports something you would consider adding to the library?

Thanks

[ryanburns23]

In case anyone needs a workaround:

// update-headlessui-package-json.js
const fs = require('fs');
const path = require('path');
const packageJsonPath = path.join(__dirname, '..', 'node_modules', '@headlessui', 'react', 'package.json');
const packageJson = require(packageJsonPath);

packageJson.exports = {
  '.': {
    import: './dist/headlessui.esm.js',
    require: './dist/index.cjs',
    types: './dist/index.d.ts',
  },
  './dist/hooks/*': {
    import: './dist/hooks/*.js',
    types: './dist/hooks/*.d.ts',
  },
  './dist/utils/*': {
    import: './dist/utils/*.js',
    types: './dist/utils/*.d.ts',
  },
};
fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));

"scripts": {
  "postinstall": "node scripts/update-headlessui-package-json.js",
}

[lukasvice]

This would be a great addition.

We want to use the "useId" hook for our own components. We managed to import it with "import { useId } from "@headlessui/react/dist/hooks/use-id".
However, the problem is that this is only the ESM version. When we want to use it with CJS projects it doesn't work.

If the hooks were exported, there would be a pre-built ESM and CJS version.

[hdk-pd]

Adding my voice here. Thanks for the workaround @ryanburns23, would love to be able to remove this from my project though in a future version :)

[serudda]

Same from our side... this would be awesome

[aufdenpunkt]

Would be great! 🙂