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

fix: Fix module augmentation and install latest version of react-select again #292

Merged
merged 4 commits into from
Oct 17, 2023

Conversation

csandman
Copy link
Owner

This PR is a part two to #284 in which I fixed the broken module augmentation for projects using TypeScript with moduleResolution="bundler". I finally got some replies on my PR to the react select project: JedWatson/react-select#5762 (comment)

And the maintainers basically explained that the method for implementing the module augmentation in the docs was outdated. The new approach is to augment them from the higher level (and already public) package react-select/base:

Thanks for the PR but these internal files aren't really intended to be public API and be augmented directly like this so I don't think this makes sense to merge.

The various types here can already be augmented by using the place where they're exported publicly. e.g. the Props type can already be augmented via react-select/base

import Select, { GroupBase } from "react-select";
import type {} from "react-select/base";

declare module "react-select/base" {
  export interface Props<
    Option,
    IsMulti extends boolean,
    Group extends GroupBase<Option>
  > {
    something?: string;
  }
}

<Select something="" />;

Here is an example project with broken module augmentation in v4.7.2, before I pushed a temporary fix that downgraded React Select's version to v5.7.0: https://codesandbox.io/s/323lhc?file=/app.tsx

You can see the working version generated below.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 17, 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 3e74e23:

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
chakra-react-select Broken Module Augmentation with moduleResolution="bundler" PR

@github-actions
Copy link

github-actions bot commented Oct 17, 2023

📊 Package size report   0.1%↑

File Before After
dist/cjs/module-augmentation.js.map 10.3 kB 1%↑10.4 kB
dist/esm/module-augmentation.js.map 10.3 kB 1%↑10.4 kB
dist/types/module-augmentation.d.ts 10.4 kB 1%↑10.6 kB
Total (Includes all files) 421.0 kB 0.1%↑421.4 kB
Tarball size 70.3 kB 0.2%↑70.4 kB
Unchanged files
File Size
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.3 kB
dist/cjs/chakra-components/control.js.map 19.1 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.5 kB
dist/cjs/chakra-components/input.js.map 6.5 kB
dist/cjs/chakra-components/menu.js 11.7 kB
dist/cjs/chakra-components/menu.js.map 22.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/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.7 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.1 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.6 kB
dist/esm/chakra-components/control.js.map 17.8 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.2 kB
dist/esm/chakra-components/input.js.map 5.4 kB
dist/esm/chakra-components/menu.js 10.9 kB
dist/esm/chakra-components/menu.js.map 21.9 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 1.9 kB
dist/esm/module-augmentation.js 58 B
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.7 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.7 kB
dist/types/chakra-components/containers.d.ts 716 B
dist/types/chakra-components/control.d.ts 1.8 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/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.4 kB
dist/types/use-chakra-select-props.d.ts 574 B
dist/types/utils.d.ts 711 B
LICENSE.md 1.1 kB
package.json 4.0 kB
README.md 45.9 kB

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

@FabianFrank
Copy link

This is great news for ESM projects, thank you!

@csandman csandman merged commit f12e5b3 into main Oct 17, 2023
5 checks passed
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.

Property "size" does not exist on type [BUG] selectedOptionStyle and variant are missing from Select types.
2 participants