fix(types)(middleware/devtools): avoid copying types

[dai-shi]

Related Issues or Discussions

follow-up #1207

Summary

We found a better solution in pmndrs/valtio#777

Check List

• yarn run prettier for formatting code and docs

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
zustand-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 29, 2023 1:14pm

[codesandbox-ci]

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 e486530:

Sandbox	Source
React	Configuration
React TypeScript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
React Parcel	Configuration
Next.js	Configuration
@pavlobu/zustand demo	Configuration

[github-actions]

Size Change: -1 B (0%)

Total Size: 43.5 kB

Filename	Size	Change
dist/system/middleware.production.js	2.62 kB	-1 B (0%)

ℹ️ View Unchanged

Filename	Size
dist/context.js	782 B
dist/esm/context.js	590 B
dist/esm/index.js	706 B
dist/esm/middleware.js	3.87 kB
dist/esm/middleware/immer.js	210 B
dist/esm/shallow.js	509 B
dist/esm/traditional.js	392 B
dist/esm/vanilla.js	629 B
dist/index.js	868 B
dist/middleware.js	4.43 kB
dist/middleware/immer.js	328 B
dist/shallow.js	1.11 kB
dist/system/context.development.js	697 B
dist/system/context.production.js	386 B
dist/system/index.development.js	873 B
dist/system/index.production.js	402 B
dist/system/middleware.development.js	4 kB
dist/system/middleware/immer.development.js	292 B
dist/system/middleware/immer.production.js	187 B
dist/system/shallow.development.js	558 B
dist/system/shallow.production.js	344 B
dist/system/traditional.development.js	505 B
dist/system/traditional.production.js	342 B
dist/system/vanilla.development.js	672 B
dist/system/vanilla.production.js	310 B
dist/traditional.js	433 B
dist/umd/context.development.js	887 B
dist/umd/context.production.js	556 B
dist/umd/index.development.js	999 B
dist/umd/index.production.js	543 B
dist/umd/middleware.development.js	4.58 kB
dist/umd/middleware.production.js	2.97 kB
dist/umd/middleware/immer.development.js	482 B
dist/umd/middleware/immer.production.js	342 B
dist/umd/shallow.development.js	1.23 kB
dist/umd/shallow.production.js	883 B
dist/umd/traditional.development.js	613 B
dist/umd/traditional.production.js	447 B
dist/umd/vanilla.development.js	800 B
dist/umd/vanilla.production.js	410 B
dist/vanilla.js	683 B

_{compressed-size-action}

[birtles]

@dai-shi What's the upgrade path here for going from 4.4.1 to 4.4.2? I've manually added @redux-devtools/extension but it doesn't seem to help.

For the following code:

  const store = useReduxDevTools
    ? createStore(
        devtools(stateCreator, {
          enabled: true,
          name: 'app',
          serialize: {
            options: {
              symbol: true,
            },
            replacer: (_key, value) => {
              // ...
          },
        })
      )
    : createStore(stateCreator);

after updating to 4.4.2 I get:

ERROR in /home/birtles/project/src/app/store.ts
./src/app/store.ts 74:10-19
[tsl] ERROR in /home/project/src/app/store.ts(74,11)
      TS2345: Argument of type '{ enabled: true; name: string; serialize: { options: { symbol: boolean; }; replacer: (_key: any, value: any) => any; }; }' is not assignable to parameter of type 'DevtoolsOptions'.
  Object literal may only specify known properties, and 'serialize' does not exist in type 'DevtoolsOptions'.
 @ ./src/app/dispatch.ts 9:0-39 11:11-22
 @ ./src/i18n/provider.tsx 5:0-43 70:8-16
 @ ./src/index.tsx 15:0-47 18:12-24

According to pmndrs/valtio#777 (comment), however, installing @redux-devtools/extension should be enough to ensure __REDUX_DEVTOOLS_EXTENSION__ is declared (which would presumably cause DevtoolsOptions to be defined correctly?)

Is there something else I need to do here?

[dai-shi]

Thanks for reporting.
Sorry, I should have written the migration guide in the release note.
We need to add this line in the app code explicitly:
https://github.com/pmndrs/zustand/pull/1991/files#diff-5a831ea67cf5cf8703b0de46901ab25bd191f56b320053be9332d9a3b0d01d15R498

[birtles]

Perfect! Thank you!

[razzeee]

I guess we also need to add @redux-devtools/extension to our package.json? As that isn't mentioned in the readme yet?

[dai-shi]

It doesn't appear after the build. Yeah, only one line is added in readme.
Our rule is the readme is intentionally for JavaScript, so we should write detailed instruction in ./docs. Feel free to help improving it.
BTW, this gives me an idea to mitigate it. We can infer to any if the type isn't found. I think it makes more sense in this specific case.

[dai-shi]

#2099

Hope if someone can try it: https://ci.codesandbox.io/status/pmndrs/zustand/pr/2099 (Find "Local Install Instructions")