breaking(middleware/devtools): use official devtools extension types #819

dai-shi · 2022-02-22T00:35:56Z

Wouldn't this be more maintainable?

github-actions · 2022-02-22T00:37:27Z

Size Change: -384 B (-1%)

Total Size: 29.7 kB

Filename	Size	Change
`dist/esm/middleware.js`	3.35 kB	-62 B (-2%)
`dist/middleware.js`	3.44 kB	-61 B (-2%)
`dist/system/middleware.development.js`	3.46 kB	-61 B (-2%)
`dist/system/middleware.production.js`	2.4 kB	-63 B (-3%)
`dist/umd/middleware.development.js`	3.55 kB	-60 B (-2%)
`dist/umd/middleware.production.js`	2.38 kB	-77 B (-3%)

ℹ️ View Unchanged

Filename	Size
`dist/context.js`	518 B
`dist/esm/context.js`	448 B
`dist/esm/index.js`	558 B
`dist/esm/shallow.js`	272 B
`dist/esm/vanilla.js`	353 B
`dist/index.js`	661 B
`dist/shallow.js`	318 B
`dist/system/context.development.js`	572 B
`dist/system/context.production.js`	393 B
`dist/system/index.development.js`	666 B
`dist/system/index.production.js`	430 B
`dist/system/shallow.development.js`	338 B
`dist/system/shallow.production.js`	253 B
`dist/system/vanilla.development.js`	421 B
`dist/system/vanilla.production.js`	263 B
`dist/umd/context.development.js`	662 B
`dist/umd/context.production.js`	488 B
`dist/umd/index.development.js`	802 B
`dist/umd/index.production.js`	538 B
`dist/umd/shallow.development.js`	447 B
`dist/umd/shallow.production.js`	344 B
`dist/umd/vanilla.development.js`	562 B
`dist/umd/vanilla.production.js`	364 B
`dist/vanilla.js`	424 B

_{compressed-size-action}

dai-shi

@devanshj Hi, can you check this please?

dai-shi · 2022-02-22T00:36:46Z

src/middleware/devtools.ts

+        symbol?: boolean
+        map?: boolean
+        set?: boolean
+      }


So, this is breaking. Why did we have options in the first place?

Not sure why there was the options thing but this is a good change. We can deprecate the existing shape and support both shapes old and new in 3.x. (Like detect with serialize.options !== undefined or something and have another overload for the new options to add the deprecation jsdoc hint on the old ones)

nice idea. i'll try.

dai-shi · 2022-02-22T00:37:31Z

src/middleware/devtools.ts

-      extensionConnector =
-        (window as any).__REDUX_DEVTOOLS_EXTENSION__ ||
-        (window as any).top.__REDUX_DEVTOOLS_EXTENSION__
+      extensionConnector = window.__REDUX_DEVTOOLS_EXTENSION__


Not sure why we need top. The official '@redux-devtools/extension' doesn't seem to have one.
This is breaking too.

Probably so that the devtools work in codesandbox etc (as __REDUX_DEVTOOLS_EXTENSION__ would only be in the parent window)

hmm, let me experiment. (jotai/valtio doesn't do this, so we want to make three consistent.)

https://codesandbox.io/s/cool-sun-bnowv5
window.top doesn't work anyway in codesandbox.

devanshj · 2022-02-23T18:22:51Z

(can't comment on an unchanged line)

- let extension = Object.create(extensionConnector.connect(devtoolsOptions))
+ let extension = (Object.create as <T>(t: T) => T)(extensionConnector.connect(devtoolsOptions))

Object.create returns any but connect returns the correct type.

devanshj · 2022-02-23T18:25:24Z

src/middleware/devtools.ts

@@ -27,21 +29,19 @@ type StoreSetStateWithAction<S> = S extends { getState: () => infer T }
 interface DevtoolsOptions {


See if we can use the exported EnhancerOptions type too (We'd also get the jsdoc for free). Something like...

interface DevtoolsOptions extends Pick<EnhancerOptions, "name" | "serialize"> { anonymousActionType?: string }

This works, but now TS users have to install some devDependencies (very counter-intuitive), which isn't very handy. Let's keep it as is.

Yeah that's fair. One could write a postinstall script that fetches the .d.ts files from unpkg and writes it to the filesystem but I think that would be going too far.

devanshj · 2022-02-23T18:33:09Z

src/middleware/devtools.ts

@@ -1,3 +1,5 @@
+import '@redux-devtools/extension'


Perhaps you'd know this better but just make sure this doesn't add any unused runtime code.

yeah, the final app code should be fine, but we should actually remove in dist. I'll see how I can do it.

e9cf15e this should do.

dai-shi · 2022-02-23T23:49:38Z

Object.create returns any but connect returns the correct type.

Thanks. 06123b1

Now, I get type errors...

dai-shi · 2022-02-24T03:21:58Z

src/middleware/devtools.ts

-              if (action.type === '__setState') {
-                setStateFromDevtools(action.state as PartialState<S>)
-                return
+    ;(extension as any) // FIXME no-any


It would be nice if we could use this type definition: https://github.com/reduxjs/redux-devtools/blob/b82de745928211cd9b7daa7a61b197ad9e11ec36/extension/src/app/api/index.ts#L522-L536

export interface ConnectResponse { init: <S, A extends Action<unknown>>( state: S, liftedData?: LiftedState<S, A, unknown> ) => void; subscribe: <S, A extends Action<unknown>>( listener: (message: ListenerMessage<S, A>) => void ) => (() => void) | undefined; unsubscribe: () => void; send: <S, A extends Action<unknown>>( action: A, state: LiftedState<S, A, unknown> ) => void; error: (payload: string) => void; }

Yeah. It's a little weird that ConnectResponse in @redux-devtools/extension only has init and send, one could consider opening an issue to write the actual type definition too.

filed: reduxjs/redux-devtools#1097

…tension-types

codesandbox-ci · 2022-03-04T02:31:26Z

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 0efb349:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
React Parcel	Configuration
Next.js	Configuration

…tension-types

breaking(middleware/devtools): use official devtools extension types

be51c33

dai-shi commented Feb 22, 2022

View reviewed changes

devanshj reviewed Feb 23, 2022

View reviewed changes

dai-shi added 2 commits February 24, 2022 08:41

type object.create

06123b1

avoid emitting @redux-devtools/extension

e9cf15e

fix type with any

4a30a95

dai-shi commented Feb 24, 2022

View reviewed changes

refactor

86d4f97

dai-shi mentioned this pull request Feb 24, 2022

fix(middleware/devtools): deprecate serialize.options #828

Merged

dai-shi added 2 commits February 28, 2022 11:51

Merge branch 'main' into breaking/middleware/devtools/use-devtools-ex…

4241357

…tension-types

lock date-fns version

cda217f

Merge branch 'main' into breaking/middleware/devtools/use-devtools-ex…

053063c

…tension-types

dai-shi added this to the v4.0.0 milestone Mar 4, 2022

refactor

cd9e011

This was referenced Mar 10, 2022

fix(devtools): better types with official devtools extension types pmndrs/jotai#1049

Merged

fix(utils): devtools better types pmndrs/valtio#389

Merged

dai-shi added 2 commits April 7, 2022 23:13

Merge branch 'main' into breaking/middleware/devtools/use-devtools-ex…

b07489f

…tension-types

Merge branch 'main' into breaking/middleware/devtools/use-devtools-ex…

0efb349

…tension-types

dai-shi merged commit f65a25a into main Apr 7, 2022

dai-shi deleted the breaking/middleware/devtools/use-devtools-extension-types branch April 7, 2022 14:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

breaking(middleware/devtools): use official devtools extension types #819

breaking(middleware/devtools): use official devtools extension types #819

dai-shi commented Feb 22, 2022

github-actions bot commented Feb 22, 2022 •

edited

dai-shi left a comment

dai-shi Feb 22, 2022

devanshj Feb 23, 2022 •

edited

dai-shi Feb 23, 2022

dai-shi Feb 24, 2022

dai-shi Feb 22, 2022

devanshj Feb 23, 2022

dai-shi Feb 23, 2022

dai-shi Feb 24, 2022

devanshj commented Feb 23, 2022

devanshj Feb 23, 2022 •

edited

dai-shi Feb 23, 2022

devanshj Feb 24, 2022

devanshj Feb 23, 2022 •

edited

dai-shi Feb 23, 2022

dai-shi Feb 23, 2022

dai-shi commented Feb 23, 2022

dai-shi Feb 24, 2022

devanshj Feb 24, 2022

dai-shi Feb 25, 2022

codesandbox-ci bot commented Mar 4, 2022 •

edited

		@@ -27,21 +29,19 @@ type StoreSetStateWithAction<S> = S extends { getState: () => infer T }
		interface DevtoolsOptions {

breaking(middleware/devtools): use official devtools extension types #819

breaking(middleware/devtools): use official devtools extension types #819

Conversation

dai-shi commented Feb 22, 2022

github-actions bot commented Feb 22, 2022 • edited

dai-shi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devanshj Feb 23, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devanshj commented Feb 23, 2022

devanshj Feb 23, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devanshj Feb 23, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dai-shi commented Feb 23, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codesandbox-ci bot commented Mar 4, 2022 • edited

github-actions bot commented Feb 22, 2022 •

edited

devanshj Feb 23, 2022 •

edited

devanshj Feb 23, 2022 •

edited

devanshj Feb 23, 2022 •

edited

codesandbox-ci bot commented Mar 4, 2022 •

edited