ESM support #4092

TkDodo · 2022-08-28T09:38:27Z

* fix: restore missing `exports` declarations * fix: restore package.json exports[C * fix: reexport types used by vue-query * fix: react-native uSES usage * fix: emit mjs for esm * fix: uSES build * fix: devtools exports to allow devtools in prod * fix: cjs and esm build bundled to lib dir * fix: sideEffect in react-query, better files paths * fix: generate declarations to lib * fix: lint and tests * fix: use the same ts build method for tests * fix: change force prod import

* - Fix UMD build getting overwritten - Updating "browser" field for @tanstack/react-query-devtools * Updating the "browser" field to be the same as "main"

# Conflicts: # examples/react/auto-refetching/package.json # examples/react/basic-graphql-request/package.json # examples/react/basic-typescript/package.json # examples/react/basic/package.json # examples/react/custom-hooks/package.json # examples/react/default-query-function/package.json # examples/react/focus-refetching/package.json # examples/react/load-more-infinite-scroll/package.json # examples/react/nextjs/package.json # examples/react/offline/package.json # examples/react/optimistic-updates-typescript/package.json # examples/react/optimistic-updates/package.json # examples/react/pagination/package.json # examples/react/playground/package.json # examples/react/prefetching/package.json # examples/react/react-native/package.json # examples/react/rick-morty/package.json # examples/react/simple/package.json # examples/react/star-wars/package.json # examples/react/suspense/package.json # package-lock.json # packages/query-broadcast-client-experimental/package.json # packages/query-broadcast-client-experimental/yarn.lock # packages/query-core/package.json # packages/react-query/package.json

* fix: remove browser entry, fix umd size * fix: bundle query-core with react-query for umd * fix: remove missed browser entry

because it doesn't exist anymore

# Conflicts: # examples/react/auto-refetching/package.json # examples/react/basic-graphql-request/package.json # examples/react/basic-typescript/package.json # examples/react/basic/package.json # examples/react/default-query-function/package.json # examples/react/load-more-infinite-scroll/package.json # examples/react/nextjs/package.json # examples/react/offline/package.json # examples/react/optimistic-updates-typescript/package.json # examples/react/pagination/package.json # examples/react/playground/package.json # examples/react/prefetching/package.json # examples/react/react-native/package.json # examples/react/rick-morty/package.json # examples/react/simple/package.json # examples/react/star-wars/package.json # examples/react/suspense/package.json # package-lock.json # packages/query-async-storage-persister/package.json # packages/query-broadcast-client-experimental/package.json # packages/query-core/package.json # packages/query-sync-storage-persister/package.json # packages/react-query-devtools/package.json # packages/react-query-persist-client/package.json # packages/react-query/package.json

I don't think we can have single quotes in commit message when passing them to --notes

* fix: umd build size * fix: devtools force production

# Conflicts: # examples/react/auto-refetching/package.json # examples/react/basic-graphql-request/package.json # examples/react/basic-typescript/package.json # examples/react/basic/package.json # examples/react/default-query-function/package.json # examples/react/load-more-infinite-scroll/package.json # examples/react/nextjs/package.json # examples/react/offline/package.json # examples/react/optimistic-updates-typescript/package.json # examples/react/pagination/package.json # examples/react/playground/package.json # examples/react/prefetching/package.json # examples/react/react-native/package.json # examples/react/rick-morty/package.json # examples/react/simple/package.json # examples/react/star-wars/package.json # examples/react/suspense/package.json # package-lock.json # packages/query-async-storage-persister/package.json # packages/query-broadcast-client-experimental/package.json # packages/query-core/package.json # packages/query-sync-storage-persister/package.json # packages/react-query-devtools/package.json # packages/react-query/package.json

no effect runs on the server, and there is no real advantage to useLayoutEffect on the client; somehow, this dynamic check creates problems with the production build of the devtools

nodenext needs 4.7

TkDodo · 2022-08-28T09:39:42Z

@sachinraja could you have a look a this PR please to see if we're missing something? All the reported issues and things we've identified seems to be resolved with this. It is also already available as beta release:

"@tanstack/react-query": "4.3.0-beta.4",
"@tanstack/react-query-devtools": "4.3.0-beta.7",

Thank you

codesandbox-ci · 2022-08-28T09:40:18Z

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 712475b:

Sandbox	Source
@tanstack/query-example-react-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration

sachinraja

Looks mostly good but had a few concerns

sachinraja · 2022-08-28T15:05:56Z

packages/react-query-devtools/src/useSyncExternalStore.native.ts

@@ -0,0 +1,3 @@
+// Temporary workaround due to an issue with react-native uSES - https://github.com/TanStack/query/pull/3601
+// @ts-ignore
+export { useSyncExternalStore } from 'use-sync-external-store/shim/index.native.js'


This doesn't work since the code is bundled. Since rollup only sees useSyncExternalStore.ts, it just bundle it into build/lib/index.mjs and build/lib/index.js.

How can we fix it?

I guess we could create a proxy package with proper exports so we would not need to think about bundling.

But there are two more .native. files in source. One for logger and one for batched updates.

The logger is not needed anymore as someone mentioned in some ticket. And even if so it can be configured with QueryClient.

Not sure about batched updates though.

sachinraja · 2022-08-28T15:12:20Z

packages/react-query-devtools/package.json

+      "default": "./build/lib/index.js"
+    },
+    "./production": {
+      "types": "./build/lib/index.d.ts",


These exports won't work with TypeScript versions < 4.7 or bundlers that don't support exports (older bundlers and React Native). Not sure what platforms/versions we're targeting but something to keep in mind.

If we do want to support them, we'll need to match the top level file structure of the package with the entry points in exports.

yep, we are aware of that. I've documented that here: Do you think it's good enough?

https://github.com/TanStack/query/blob/beta/docs/devtools.md#modern-bundlers

Ah yeah that's good

sachinraja · 2022-08-28T15:13:04Z

packages/react-query/src/useSyncExternalStore.native.ts

@@ -0,0 +1,3 @@
+// Temporary workaround due to an issue with react-native uSES - https://github.com/TanStack/query/pull/3601
+// @ts-ignore
+export { useSyncExternalStore } from 'use-sync-external-store/shim/index.native.js'


Same issue as what I mentioned before for react-query-devtools

* fix: support react-native * chore: remove banner from build

RELEASE ALL

codecov-commenter · 2022-09-10T09:53:36Z

Codecov Report

Base: 96.36% // Head: 96.82% // Increases project coverage by +0.46% 🎉

Coverage data is based on head (712475b) compared to base (eab6e2c).
Patch has no changes to coverable lines.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4092      +/-   ##
==========================================
+ Coverage   96.36%   96.82%   +0.46%     
==========================================
  Files          45       58      +13     
  Lines        2281     2676     +395     
  Branches      640      786     +146     
==========================================
+ Hits         2198     2591     +393     
- Misses         80       83       +3     
+ Partials        3        2       -1

Impacted Files	Coverage Δ
src/core/mutationObserver.ts
src/core/onlineManager.ts
src/devtools/useMediaQuery.ts
src/devtools/devtools.tsx
src/devtools/styledComponents.ts
src/react/QueryErrorResetBoundary.tsx
src/devtools/useLocalStorage.ts
src/react/Hydrate.tsx
src/core/notifyManager.ts
src/react/useIsMutating.ts
... and 93 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

DamianOsipiuk and others added 30 commits July 28, 2022 10:52

fix: subpackage dependencies (#4013)

9172eab

fix: umd-build (#3924)

dc8aec7

* - Fix UMD build getting overwritten - Updating "browser" field for @tanstack/react-query-devtools * Updating the "browser" field to be the same as "main"

Merge remote-tracking branch 'tannerlinsley/main' into beta

a3cdf51

release: v4.0.11-beta.0

4a4543c

release: v4.0.11-beta.1

a047974

fix(react-query-devtools): cjs devtools fallback (#4048)

d4cd620

release: v4.0.11-beta.2

36aa41e

fix: remove browser entry, fix umd size (#4044)

58e3ae3

* fix: remove browser entry, fix umd size * fix: bundle query-core with react-query for umd * fix: remove missed browser entry

chore: remove 'browser' field from package validation

103e169

because it doesn't exist anymore

release: v4.0.11-beta.3

eba6c93

release: v4.0.11-beta.4

086a9e4

chore: react-query should be a peerDependency of the devtools

64656c3

release: v4.0.11-beta.5

ad0a378

Merge remote-tracking branch 'tannerlinsley/main' into beta

e9f7944

release: v4.3.0-beta.0

53964b6

fix: webpack 4 fallback to cjs (#4069)

e8d6d11

fix: publish script shouldn't check against module anymore

7753fd3

fix: publish script

272a37e

I don't think we can have single quotes in commit message when passing them to --notes

release: v4.3.0-beta.2

39fa4a4

release: v4.3.0-beta.3

2452ec1

fix: umd build size, force prod devtools (#4074)

b40b7c3

* fix: umd build size * fix: devtools force production

release: v4.3.0-beta.4

6753551

Merge remote-tracking branch 'tannerlinsley/main' into beta

f6fd7d6

release: v4.3.0-beta.5

6725aaf

fix: reintroduce production export (#4090)

897a397

release: v4.3.0-beta.6

0b979fa

TkDodo and others added 6 commits August 28, 2022 08:29

Merge remote-tracking branch 'tannerlinsley/main' into beta

aab8e1e

fix(react-query-devtools): always useEffect for the mounted check

3e3a04e

no effect runs on the server, and there is no real advantage to useLayoutEffect on the client; somehow, this dynamic check creates problems with the production build of the devtools

release: v4.3.0-beta.7

1118fac

docs: document devtools in production

294337a

docs: document devtools in production

5e145fc

docs: document devtools in production

40c3491

nodenext needs 4.7

sachinraja reviewed Aug 28, 2022

View reviewed changes

DamianOsipiuk and others added 2 commits September 10, 2022 11:33

fix: support react-native (#4125)

0bb7605

* fix: support react-native * chore: remove banner from build

Merge remote-tracking branch 'tannerlinsley/main' into beta

712475b

RELEASE ALL

TkDodo merged commit ea80700 into main Sep 10, 2022

TkDodo deleted the beta branch July 23, 2023 07:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ESM support #4092

ESM support #4092

TkDodo commented Aug 28, 2022

TkDodo commented Aug 28, 2022

codesandbox-ci bot commented Aug 28, 2022 •

edited

sachinraja left a comment

sachinraja Aug 28, 2022

TkDodo Aug 29, 2022

DamianOsipiuk Aug 29, 2022

sachinraja Aug 28, 2022

TkDodo Aug 28, 2022

sachinraja Aug 28, 2022

sachinraja Aug 28, 2022

codecov-commenter commented Sep 10, 2022

ESM support #4092

ESM support #4092

Conversation

TkDodo commented Aug 28, 2022

TkDodo commented Aug 28, 2022

codesandbox-ci bot commented Aug 28, 2022 • edited

sachinraja left a comment

Choose a reason for hiding this comment

sachinraja Aug 28, 2022

Choose a reason for hiding this comment

TkDodo Aug 29, 2022

Choose a reason for hiding this comment

DamianOsipiuk Aug 29, 2022

Choose a reason for hiding this comment

sachinraja Aug 28, 2022

Choose a reason for hiding this comment

TkDodo Aug 28, 2022

Choose a reason for hiding this comment

sachinraja Aug 28, 2022

Choose a reason for hiding this comment

sachinraja Aug 28, 2022

Choose a reason for hiding this comment

codecov-commenter commented Sep 10, 2022

Codecov Report

codesandbox-ci bot commented Aug 28, 2022 •

edited