lukeed/clsxPublic

A tiny (239B) utility for constructing `className` strings conditionally.

Avoid having to use esModuleInterop

DA

danikaze opened ·

ES6 modules are supposed to be an object, however this package exports a function by default. To make it work in TypeScript it requires [this option](https://www.typescriptlang.org/tsconfig#esModuleInterop) set to `true`, which means extra code in the build... and would be nice not requiring it.

now: ```ts import clsx from 'clsx'; ``` after: ```ts import { clsx } from 'clsx'; ```

Since this would be a breaking change, I would suggest applying this _fix_ in a way that the old version is also supported -_which requires a bit of dirty code_- and then apply the clean version in a major version up release :)

```ts // the dirty hack would look like this (types also required) module.exports.clsx = module.exports;

// so you actually can do both in this version preserving compatibility import clsx from 'clsx'; import { clsx } from 'clsx'; ```

next version (let's say a major version up) could just export the function like this: ```ts function clsx () { var i=0, tmp, x, str=''; while (i < arguments.length) { if (tmp = arguments[i++]) { if (x = toVal(tmp)) { str && (str += ' '); str += x } } } return str; }

module.exports = { clsx }; ```

With this _migration_ we are achieving two things: 1. Following ES6 standards 2. Requiring less code when compiling in typescript since `esModuleInterop` wouldn't be required anymore

  1. LU
    lukeed

    This module mirrors `classnames` for drop-in usage.

    You should be using a bundler, not `tsc` directly for application outputs. All bundlers can find & resolve `clsx` as ad default export just fine w/o use of an interop layer. This is because the `"module"` field exists and is respected by all of them.

  2. danikazereferenced this in Provide named export for clsx #444 years ago on GitHub

  3. DA
    danikaze
    Author

    And with this change it will still acting the same, with the difference that it will comply with ES6 modules as well.

    I tried it in a project without typescript `esModuleInterop` option and this is the result: ``` TypeError: (0 , clsx_1.default) is not a function ```

    So yes, a bundler (webpack) is used, but in this project (big company one, hard to change configs) is not working properly. Anyways, consider the open PR since it's a small change and 100% backwards-compatible :)

  4. SL
    scott-lc

    Can't use `clsx` with the upcoming TypeScript 4.7 `nodenext` resolution mode. PR #44 would fix this.

    https://github.com/microsoft/TypeScript/issues/49189

  5. CA
    CanRau

    One workaround might be `import {default as clsx} from "clsx"`, not sure that works in all cases though

  6. lukeedclosed4 years ago on GitHub

  7. akphireferenced this in Usage in typescript without esModuleInterop #5414 years ago on GitHub

  8. akphireferenced this in add ESM exports in package.json #6924 years ago on GitHub

  9. remcohaszingreferenced this in fix: fix esm support and types #574 years ago on GitHub

  10. favnareferenced this in fix: add proper ESM exports in package.json #7273 years ago on GitHub

  11. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19022 years ago on GitHub

  12. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19072 years ago on GitHub

  13. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19122 years ago on GitHub

  14. snyk-io[bot]botreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #32 years ago on GitHub

  15. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19172 years ago on GitHub

  16. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19222 years ago on GitHub

  17. flaan4mereferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #32 years ago on GitHub

  18. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19272 years ago on GitHub

  19. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19322 years ago on GitHub

  20. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19372 years ago on GitHub

  21. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19422 years ago on GitHub

  22. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19502 years ago on GitHub

  23. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19552 years ago on GitHub

  24. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19602 years ago on GitHub

  25. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19652 years ago on GitHub

  26. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19702 years ago on GitHub

  27. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19752 years ago on GitHub

  28. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19802 years ago on GitHub

  29. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19852 years ago on GitHub

  30. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19902 years ago on GitHub

  31. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19952 years ago on GitHub

  32. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20002 years ago on GitHub

  33. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20052 years ago on GitHub

  34. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20102 years ago on GitHub

  35. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20152 years ago on GitHub

  36. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20202 years ago on GitHub

  37. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20252 years ago on GitHub

  38. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20302 years ago on GitHub

  39. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20352 years ago on GitHub

  40. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20402 years ago on GitHub

  41. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20452 years ago on GitHub

  42. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20502 years ago on GitHub

  43. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20552 years ago on GitHub

  44. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20602 years ago on GitHub

  45. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20652 years ago on GitHub

  46. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20702 years ago on GitHub

  47. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20752 years ago on GitHub

  48. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20802 years ago on GitHub

  49. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20852 years ago on GitHub

  50. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20902 years ago on GitHub

  51. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20952 years ago on GitHub

  52. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21002 years ago on GitHub

  53. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21052 years ago on GitHub

  54. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21102 years ago on GitHub

  55. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21152 years ago on GitHub

  56. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21202 years ago on GitHub

  57. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21252 years ago on GitHub

  58. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21302 years ago on GitHub

  59. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21352 years ago on GitHub

  60. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21402 years ago on GitHub

  61. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21452 years ago on GitHub

  62. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21502 years ago on GitHub

  63. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21552 years ago on GitHub

  64. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21602 years ago on GitHub

  65. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21652 years ago on GitHub

  66. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21702 years ago on GitHub

  67. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21752 years ago on GitHub

  68. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21802 years ago on GitHub

  69. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21852 years ago on GitHub

  70. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21902 years ago on GitHub

  71. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21952 years ago on GitHub

  72. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22002 years ago on GitHub

  73. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22052 years ago on GitHub

  74. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22102 years ago on GitHub

  75. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22182 years ago on GitHub

  76. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22232 years ago on GitHub

  77. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22282 years ago on GitHub

  78. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22332 years ago on GitHub

  79. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22382 years ago on GitHub

  80. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22432 years ago on GitHub

  81. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22482 years ago on GitHub

  82. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22532 years ago on GitHub

  83. udilbarreferenced this in [Snyk] Upgrade: , , prop-types, clsx, , , , formik, history, react-feather, react-router, react-router-dom, react-scripts, yup #1492 years ago on GitHub

  84. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22582 years ago on GitHub

  85. NOUIYreferenced this in [Snyk] Upgrade: , , react, react-dom, semver, , , clsx, , , cross-fetch, file-loader, lunr, next, raw-loader, react-syntax-highlighter, url-loader #4782 years ago on GitHub

  86. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22632 years ago on GitHub

  87. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22682 years ago on GitHub

  88. stuxMYreferenced this in [Snyk] Upgrade: react, react-dom, , async, clsx, eventemitter2, fontfaceobserver, handlebars, image-size, jquery, neo4j-driver, prop-types, react-alert-template-basic, react-draggable, react-transition-group, stream-chain, stream-json, unzipper #152 years ago on GitHub

  89. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22732 years ago on GitHub

  90. udilbarreferenced this in [Snyk] Upgrade: , , prop-types, clsx, , , , formik, history, react-feather, react-router, react-router-dom, react-scripts, yup #1522 years ago on GitHub

  91. josias-devvvreferenced this in [Snyk] Upgrade: , , , , , , atropos, autoprefixer, clsx, contentful, fs-extra, globby, postcss, next, node-fetch, postcss-import, posthtml, unified, remark-html, rxjs, stylelint, swiper, tailwindcss, typedoc, typescript #232 years ago on GitHub

  92. josias-devvvreferenced this in [Snyk] Upgrade: , , , , , , atropos, autoprefixer, clsx, contentful, fs-extra, globby, postcss, next, node-fetch, postcss-import, posthtml, unified, remark-html, rxjs, stylelint, swiper, tailwindcss, typedoc, typescript #242 years ago on GitHub

  93. black-da-bullreferenced this in [Snyk] Upgrade: , , clsx, docusaurus-plugin-sass, sass #152 years ago on GitHub

  94. Mhmonicoxreferenced this in [Snyk] Upgrade: , , , clsx, #22772 years ago on GitHub

  95. udilbarreferenced this in [Snyk] Upgrade: , , prop-types, clsx, , , , formik, history, react-feather, react-router, react-router-dom, react-scripts, yup #1532 years ago on GitHub

  96. josias-devvvreferenced this in [Snyk] Upgrade: , , , , , , atropos, autoprefixer, clsx, contentful, fs-extra, globby, postcss, next, node-fetch, postcss-import, posthtml, unified, remark-html, rxjs, stylelint, swiper, tailwindcss, typedoc, typescript #252 years ago on GitHub

  97. mkotsollarisreferenced this in [Snyk] Upgrade: , , react, react-dom, , clsx, , , aws-amplify, chalk, css-loader, dotenv, eslint-plugin-flowtype, html-webpack-plugin, jquery, notistack, promise, react-copy-to-clipboard, react-hook-form, react-router-dom, styled-components, webpack, webpack-dev-server, webpack-manifest-plugin #6282 years ago on GitHub

  98. Mhmonicoxreferenced this in [Snyk] Upgrade: , , , clsx, #22782 years ago on GitHub

  99. udilbarreferenced this in [Snyk] Upgrade: , , prop-types, clsx, , , , formik, history, react-feather, react-router, react-router-dom, react-scripts, yup #1542 years ago on GitHub

  100. josias-devvvreferenced this in [Snyk] Upgrade: , , , , , , atropos, autoprefixer, clsx, contentful, fs-extra, globby, postcss, next, node-fetch, postcss-import, posthtml, unified, remark-html, rxjs, stylelint, swiper, tailwindcss, typedoc, typescript #262 years ago on GitHub