Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Switch to tsup for building and update dependencies #298

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

csandman
Copy link
Owner

@csandman csandman commented Oct 27, 2023

closes #260


This PR switches away from babel + tsc for the build process to tsup for building the package. tsup is a build tool based on esbuild, which is built using golang for fast build times. The old build process was basically copied directly from Chakra UI's old build process, and they have since switched to tsup, so I figured it would be good to update: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/input/package.json#L53

This motivation to make this switch was originally sparked by arethetypeswrong, which shows that the ESM exports aren't actually working properly (only the CJS files will ever actually be imported). tsup has the benefit of outputting the the ESM version of the files using the necessary .mjs file extension, which allows for the exports field in the package.json to work properly, as this package is using the default of "type": "commonjs" in the package.json. (if this project was using "type": "module" the ESM files would be compiled to .js files while the commonjs files would be exported as .cjs). I also switched the "module" field in the "exports" field to be "import", as I realized the ESM version still wasn't being imported without this. I'm really not sure what the difference between these two options are, as I see different projects use each of them differently.

This updated build strategy also appears to solve the problem mentioned in #260, where the id prop coming from Chakra's useFormControl hook were not defined on the server. I realized that the id issue should not actually have been happening, as the useFormControl hook uses the built-in useId hook, which is supposed to provide an isomorphic id across the server and client. Previously however, the id field from the form control hook was coming back undefined in the initial Next.js load. Here's the example CodeSandbox from the original issue (see the generated CodeSandbox below for the now working version): https://codesandbox.io/s/9089o6


Here are the results from arethetypeswrong:

Before

https://arethetypeswrong.github.io/?p=chakra-react-select%404.7.5

image

After

image

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 27, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6b86b61:

Sandbox Source
chakra-react-select demo Configuration
chakra-react-select TS demo Configuration
chakra-react-select + next.js Configuration
chakra-react-select + next.js + typescript Configuration
holy-sun-ytfjxs PR
elastic-archimedes-p8zxx5 Issue #260
gallant-matan-wcf6rs Issue #260

@github-actions
Copy link

github-actions bot commented Oct 27, 2023

📊 Package size report   107%↑

File Before After
dist/chakra-components/containers.d.mts 783 B
dist/chakra-components/containers.d.ts 783 B
dist/chakra-components/containers.js 2.4 kB
dist/chakra-components/containers.js.map 8.8 kB
dist/chakra-components/containers.mjs 185 B
dist/chakra-components/containers.mjs.map 71 B
dist/chakra-components/control.d.mts 2.0 kB
dist/chakra-components/control.d.ts 2.0 kB
dist/chakra-components/control.js 4.7 kB
dist/chakra-components/control.js.map 16.8 kB
dist/chakra-components/control.mjs 258 B
dist/chakra-components/control.mjs.map 71 B
dist/chakra-components/index.d.mts 5.1 kB
dist/chakra-components/index.d.ts 5.1 kB
dist/chakra-components/index.js 14.7 kB
dist/chakra-components/index.js.map 57.4 kB
dist/chakra-components/index.mjs 333 B
dist/chakra-components/index.mjs.map 71 B
dist/chakra-components/input.d.mts 306 B
dist/chakra-components/input.d.ts 306 B
dist/chakra-components/input.js 1.7 kB
dist/chakra-components/input.js.map 6.9 kB
dist/chakra-components/input.mjs 123 B
dist/chakra-components/input.mjs.map 71 B
dist/chakra-components/menu.d.mts 1.5 kB
dist/chakra-components/menu.d.ts 1.5 kB
dist/chakra-components/menu.js 5.3 kB
dist/chakra-components/menu.js.map 20.4 kB
dist/chakra-components/menu.mjs 231 B
dist/chakra-components/menu.mjs.map 71 B
dist/chakra-components/multi-value.d.mts 1.2 kB
dist/chakra-components/multi-value.d.ts 1.2 kB
dist/chakra-components/multi-value.js 3.3 kB
dist/chakra-components/multi-value.js.map 12.7 kB
dist/chakra-components/multi-value.mjs 203 B
dist/chakra-components/multi-value.mjs.map 71 B
dist/chakra-components/placeholder.d.mts 330 B
dist/chakra-components/placeholder.d.ts 330 B
dist/chakra-components/placeholder.js 887 B
dist/chakra-components/placeholder.js.map 1.8 kB
dist/chakra-components/placeholder.mjs 99 B
dist/chakra-components/placeholder.mjs.map 71 B
dist/chakra-components/single-value.d.mts 330 B
dist/chakra-components/single-value.d.ts 330 B
dist/chakra-components/single-value.js 961 B
dist/chakra-components/single-value.js.map 2.0 kB
dist/chakra-components/single-value.mjs 100 B
dist/chakra-components/single-value.mjs.map 71 B
dist/chunk-5OMQWWF5.mjs 3.7 kB
dist/chunk-5OMQWWF5.mjs.map 13.7 kB
dist/chunk-7E62ALGA.mjs 277 B
dist/chunk-7E62ALGA.mjs.map 1.8 kB
dist/chunk-BXPDHIG2.mjs 4.1 kB
dist/chunk-BXPDHIG2.mjs.map 16.9 kB
dist/chunk-D7FT2UIO.mjs 589 B
dist/chunk-D7FT2UIO.mjs.map 3.6 kB
dist/chunk-HVH3KR6D.mjs 438 B
dist/chunk-HVH3KR6D.mjs.map 1.7 kB
dist/chunk-IBX22SZY.mjs 2.3 kB
dist/chunk-IBX22SZY.mjs.map 9.6 kB
dist/chunk-KIIS3YNW.mjs 511 B
dist/chunk-KIIS3YNW.mjs.map 1.8 kB
dist/chunk-LMQO3LIO.mjs 261 B
dist/chunk-LMQO3LIO.mjs.map 1.5 kB
dist/chunk-LZIOX252.mjs 1.5 kB
dist/chunk-LZIOX252.mjs.map 5.6 kB
dist/chunk-MDHVKILE.mjs 267 B
dist/chunk-MDHVKILE.mjs.map 1.7 kB
dist/chunk-MVQH3DNO.mjs 1.2 kB
dist/chunk-MVQH3DNO.mjs.map 5.2 kB
dist/chunk-OJWLCELL.mjs 271 B
dist/chunk-OJWLCELL.mjs.map 1.7 kB
dist/chunk-RNFC24V5.mjs 796 B
dist/chunk-RNFC24V5.mjs.map 1.9 kB
dist/chunk-WCT27Q55.mjs 1.1 kB
dist/chunk-WCT27Q55.mjs.map 3.7 kB
dist/cjs/chakra-components/containers.js 4.0 kB
dist/cjs/chakra-components/containers.js.map 8.1 kB
dist/cjs/chakra-components/control.js 10.6 kB
dist/cjs/chakra-components/control.js.map 19.6 kB
dist/cjs/chakra-components/index.js 2.7 kB
dist/cjs/chakra-components/index.js.map 3.8 kB
dist/cjs/chakra-components/input.js 3.3 kB
dist/cjs/chakra-components/input.js.map 6.2 kB
dist/cjs/chakra-components/menu.js 12.3 kB
dist/cjs/chakra-components/menu.js.map 23.8 kB
dist/cjs/chakra-components/multi-value.js 6.3 kB
dist/cjs/chakra-components/multi-value.js.map 13.1 kB
dist/cjs/chakra-components/placeholder.js 1.4 kB
dist/cjs/chakra-components/placeholder.js.map 2.8 kB
dist/cjs/chakra-components/single-value.js 1.5 kB
dist/cjs/chakra-components/single-value.js.map 3.0 kB
dist/cjs/index.js 2.0 kB
dist/cjs/index.js.map 2.9 kB
dist/cjs/module-augmentation.js 61 B
dist/cjs/module-augmentation.js.map 10.7 kB
dist/cjs/select/async-creatable-select.js 2.3 kB
dist/cjs/select/async-creatable-select.js.map 3.8 kB
dist/cjs/select/async-select.js 2.2 kB
dist/cjs/select/async-select.js.map 3.6 kB
dist/cjs/select/creatable-select.js 2.3 kB
dist/cjs/select/creatable-select.js.map 3.7 kB
dist/cjs/select/select.js 2.2 kB
dist/cjs/select/select.js.map 3.5 kB
dist/cjs/types.js 47 B
dist/cjs/types.js.map 3.8 kB
dist/cjs/use-chakra-select-props.js 5.1 kB
dist/cjs/use-chakra-select-props.js.map 8.0 kB
dist/cjs/utils.js 3.0 kB
dist/cjs/utils.js.map 5.6 kB
dist/esm/chakra-components/containers.js 3.6 kB
dist/esm/chakra-components/containers.js.map 7.4 kB
dist/esm/chakra-components/control.js 9.9 kB
dist/esm/chakra-components/control.js.map 18.3 kB
dist/esm/chakra-components/index.js 1.3 kB
dist/esm/chakra-components/index.js.map 2.5 kB
dist/esm/chakra-components/input.js 3.0 kB
dist/esm/chakra-components/input.js.map 5.1 kB
dist/esm/chakra-components/menu.js 11.6 kB
dist/esm/chakra-components/menu.js.map 22.5 kB
dist/esm/chakra-components/multi-value.js 5.9 kB
dist/esm/chakra-components/multi-value.js.map 12.3 kB
dist/esm/chakra-components/placeholder.js 1.1 kB
dist/esm/chakra-components/placeholder.js.map 2.1 kB
dist/esm/chakra-components/single-value.js 1.2 kB
dist/esm/chakra-components/single-value.js.map 2.3 kB
dist/esm/index.js 687 B
dist/esm/index.js.map 2.0 kB
dist/esm/module-augmentation.js 58 B
dist/esm/module-augmentation.js.map 10.7 kB
dist/esm/select/async-creatable-select.js 856 B
dist/esm/select/async-creatable-select.js.map 1.9 kB
dist/esm/select/async-select.js 800 B
dist/esm/select/async-select.js.map 1.8 kB
dist/esm/select/creatable-select.js 824 B
dist/esm/select/creatable-select.js.map 1.9 kB
dist/esm/select/select.js 768 B
dist/esm/select/select.js.map 1.7 kB
dist/esm/types.js 44 B
dist/esm/types.js.map 3.8 kB
dist/esm/use-chakra-select-props.js 4.8 kB
dist/esm/use-chakra-select-props.js.map 7.0 kB
dist/esm/utils.js 2.9 kB
dist/esm/utils.js.map 4.6 kB
dist/index.d.mts 11.5 kB
dist/index.d.ts 11.5 kB
dist/index.js 17.2 kB
dist/index.js.map 81.1 kB
dist/index.mjs 798 B
dist/index.mjs.map 12.0 kB
dist/select/async-creatable-select.d.mts 595 B
dist/select/async-creatable-select.d.ts 595 B
dist/select/async-creatable-select.js 16.2 kB
dist/select/async-creatable-select.js.map 64.2 kB
dist/select/async-creatable-select.mjs 410 B
dist/select/async-creatable-select.mjs.map 71 B
dist/select/async-select.d.mts 522 B
dist/select/async-select.d.ts 522 B
dist/select/async-select.js 16.2 kB
dist/select/async-select.js.map 64.0 kB
dist/select/async-select.mjs 400 B
dist/select/async-select.mjs.map 71 B
dist/select/creatable-select.d.mts 554 B
dist/select/creatable-select.d.ts 554 B
dist/select/creatable-select.js 16.2 kB
dist/select/creatable-select.js.map 64.1 kB
dist/select/creatable-select.mjs 404 B
dist/select/creatable-select.mjs.map 71 B
dist/select/select.d.mts 450 B
dist/select/select.d.ts 450 B
dist/select/select.js 16.2 kB
dist/select/select.js.map 63.9 kB
dist/select/select.mjs 394 B
dist/select/select.mjs.map 71 B
dist/types.d.mts 3.6 kB
dist/types.d.ts 3.6 kB
dist/types.js 430 B
dist/types.js.map 3.8 kB
dist/types.mjs 34 B
dist/types.mjs.map 71 B
dist/types/chakra-components/containers.d.ts 716 B
dist/types/chakra-components/control.d.ts 1.9 kB
dist/types/chakra-components/index.d.ts 5.7 kB
dist/types/chakra-components/input.d.ts 256 B
dist/types/chakra-components/menu.d.ts 1.5 kB
dist/types/chakra-components/multi-value.d.ts 1.2 kB
dist/types/chakra-components/placeholder.d.ts 280 B
dist/types/chakra-components/single-value.d.ts 280 B
dist/types/index.d.ts 1.2 kB
dist/types/module-augmentation.d.ts 10.9 kB
dist/types/select/async-creatable-select.d.ts 572 B
dist/types/select/async-select.d.ts 508 B
dist/types/select/creatable-select.d.ts 536 B
dist/types/select/select.d.ts 436 B
dist/types/types.d.ts 3.5 kB
dist/types/use-chakra-select-props.d.ts 574 B
dist/types/utils.d.ts 678 B
dist/use-chakra-select-props.d.mts 578 B
dist/use-chakra-select-props.d.ts 578 B
dist/use-chakra-select-props.js 15.8 kB
dist/use-chakra-select-props.js.map 62.4 kB
dist/use-chakra-select-props.mjs 371 B
dist/use-chakra-select-props.mjs.map 71 B
dist/utils.d.mts 726 B
dist/utils.d.ts 725 B
dist/utils.js 1.1 kB
dist/utils.js.map 3.7 kB
dist/utils.mjs 116 B
dist/utils.mjs.map 71 B
package.json 4.0 kB -15.8%↓3.4 kB
Total (Includes all files) 426.2 kB 107%↑882.6 kB
Tarball size 71.2 kB 155%↑181.3 kB
Unchanged files
File Size
LICENSE.md 1.1 kB
README.md 45.9 kB

🤖 This report was automatically generated by pkg-size-action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG] Warning: Prop id did not match. Server:
1 participant