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 23 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.

@github-actions
Copy link

github-actions bot commented Oct 27, 2023

📊 Package size report   -31.4%↓

File Before After
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.4 kB
dist/cjs/chakra-components/control.js.map 19.4 kB
dist/cjs/chakra-components/index.js 2.4 kB
dist/cjs/chakra-components/index.js.map 3.7 kB
dist/cjs/chakra-components/input.js 3.1 kB
dist/cjs/chakra-components/input.js.map 6.1 kB
dist/cjs/chakra-components/menu.js 12.1 kB
dist/cjs/chakra-components/menu.js.map 23.5 kB
dist/cjs/chakra-components/multi-value.js 6.2 kB
dist/cjs/chakra-components/multi-value.js.map 13.0 kB
dist/cjs/chakra-components/placeholder.js 1.3 kB
dist/cjs/chakra-components/placeholder.js.map 2.7 kB
dist/cjs/chakra-components/single-value.js 1.4 kB
dist/cjs/chakra-components/single-value.js.map 3.0 kB
dist/cjs/index.js 1.9 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 1.9 kB
dist/cjs/select/async-creatable-select.js.map 3.6 kB
dist/cjs/select/async-select.js 1.8 kB
dist/cjs/select/async-select.js.map 3.5 kB
dist/cjs/select/creatable-select.js 1.9 kB
dist/cjs/select/creatable-select.js.map 3.5 kB
dist/cjs/select/select.js 1.8 kB
dist/cjs/select/select.js.map 3.4 kB
dist/cjs/types.js 47 B
dist/cjs/types.js.map 3.8 kB
dist/cjs/use-chakra-select-props.js 4.9 kB
dist/cjs/use-chakra-select-props.js.map 7.9 kB
dist/cjs/utils.js 2.9 kB
dist/cjs/utils.js.map 5.4 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.7 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 2.9 kB
dist/esm/chakra-components/input.js.map 5.2 kB
dist/esm/chakra-components/menu.js 11.4 kB
dist/esm/chakra-components/menu.js.map 22.4 kB
dist/esm/chakra-components/multi-value.js 5.8 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.4 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 793 B
dist/esm/select/async-creatable-select.js.map 2.0 kB
dist/esm/select/async-select.js 737 B
dist/esm/select/async-select.js.map 1.8 kB
dist/esm/select/creatable-select.js 761 B
dist/esm/select/creatable-select.js.map 1.9 kB
dist/esm/select/select.js 705 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.7 kB
dist/esm/use-chakra-select-props.js.map 7.0 kB
dist/esm/utils.js 2.7 kB
dist/esm/utils.js.map 4.7 kB
dist/index.cjs 17.2 kB
dist/index.cjs.map 81.0 kB
dist/index.d.cts 21.1 kB
dist/index.d.ts 21.1 kB
dist/index.js 16.0 kB
dist/index.js.map 81.4 kB
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
package.json 4.0 kB -17.2%↓3.3 kB
Total (Includes all files) 420.6 kB -31.4%↓288.5 kB
Tarball size 70.8 kB -4.65%↓67.5 kB
Unchanged files
File Size
LICENSE.md 1.1 kB
README.md 46.3 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:
2 participants