8000 refactor: drop support for dev_* methods (#180) · jotaijs/jotai-devtools@2ab02e2 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content 8000

Commit 2ab02e2

Browse files
arjunvegdaarjunvegda
authored
refactor: drop support for dev_* methods (#180)
* refactor: drop support for dev_* methods * chore: update jotai dev version for testing purposes * docs: update docs * refactor: remove tree-shaking * chore: update jotai package
1 parent fadae1c commit 2ab02e2

File tree

8 files changed

+124
-58
lines changed

8 files changed

+124
-58
lines changed

‎README.md

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,13 @@
88

99
- Debug 🐞 atom values with ease
1010
- ⏳ Time-travel through your atoms and find bugs faster than before
11-
- Out-of-the-box 🔌 support for async/suspendible atoms
11+
- Out-of-the-box 🔌 support for async/suspendable atoms
1212
- Built-in Dark mode 🌗
1313
- ✅ Supports custom `store`
1414
- ✅ Works with provider-less mode
1515
- ✅ Works with Next.js
1616
- ✅ Supports custom `nonce` for CSP
1717
- ✅ Hides private atoms with ability to configure
18-
- ✅ Tree-shakable and built for non-production environments
1918
- ✅ Parses all the JavaScript values with JSON Tree view
2019
- ✅ Diff checking with additions and deletion highlights
2120

@@ -29,7 +28,7 @@
2928

3029
## ☝️ Prerequisites
3130

32-
- Jotai version `>=2.9.0`
31+
- Jotai version `>=v2.12.3`
3332
- React version `>=17.0.0`
3433

3534
## 📦 Setup
@@ -124,7 +123,6 @@ type DevToolsProps = {
124123

125124
```tsx
126125
import { DevTools } from 'jotai-devtools';
127-
// Note that this may get included in your production builds. Please import it conditionally if you want to avoid that
128126
import 'jotai-devtools/styles.css';
129127

130128
const App = () => {
@@ -142,7 +140,6 @@ const App = () => {
142140
```tsx
143141
import { createStore } from 'jotai';
144142
import { DevTools } from 'jotai-devtools';
145-
// Note that this may get included in your production builds. Please import it conditionally if you want to avoid that
146143
import 'jotai-devtools/styles.css';
147144

148145
const customStore = createStore();

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,6 @@
140140
"jest": "^29.7.0",
141141
"jest-environment-jsdom": "^29.7.0",
142142
"jest-watch-typeahead": "^2.2.2",
143-
"jotai": "^2.11.3",
144143
"jotai-tanstack-query": "^0.7.2",
145144
"lint-staged": "^15.3.0",
146145
"postcss": "^8.4.49",
@@ -172,10 +171,12 @@
172171
"@redux-devtools/extension": "^3.3.0",
173172
"clsx": "^2.1.1",
174173
"javascript-stringify": "^2.1.0",
174+
"jotai": "^2.12.3",
175175
"jsondiffpatch": "^0.5.0",
176176
"react-base16-styling": "^0.9.1",
177177
"react-error-boundary": "^5.0.0",
178178
"react-json-tree": "^0.18.0",
179179
"react-resizable-panels": "2.0.10"
180-
}
180+
},
181+
"packageManager": "pnpm@8.5.1+sha512.5ba7a52fb370c346bf302202933a646f15ba7fdf5342e5f80ee2680e35a9dfd5f4f0f283904a60e1c823ddde84b606000dc7505a5fde33c35d94b255137460a4"
181182
}

‎pnpm-lock.yaml

Lines changed: 12 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/DevTools/DevTools.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -126,14 +126,10 @@ const DevToolsProvider = ({ children }: React.PropsWithChildren) => {
126126
);
127127
};
128128

129-
export const InternalDevTools = (props: DevToolsProps): JSX.Element | null => {
130-
if (__DEV__) {
131-
return (
132-
<DevToolsProvider>
133-
<DevToolsMain {...props} />
134-
</DevToolsProvider>
135-
);
136-
}
137-
138-
return <></>;
129+
export const DevTools = (props: DevToolsProps): JSX.Element | null => {
130+
return (
131+
<DevToolsProvider>
132+
<DevToolsMain {...props} />
133+
</DevToolsProvider>
134+
);
139135
};

‎src/index.ts

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
import { InternalDevTools } from './DevTools';
21
export type { DevToolsProps } from './DevTools';
3-
4-
// This is a workaround to make DevTools tree-shakable in production builds
5-
// This is due to a limitation in tsup where it does not support preserving signatures
6-
// of exports or generating seperate chunks for exports
7-
export const DevTools: typeof InternalDevTools = __DEV__
8-
? InternalDevTools
9-
: () => null;
2+
export { DevTools } from './DevTools';
103

114
export * from './utils';

‎src/types.ts

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import { useStore } from 'jotai/react';
22
import type { Atom, WritableAtom, createStore } from 'jotai/vanilla';
33
import type {
4-
INTERNAL_DevStoreRev4,
5-
INTERNAL_PrdStore,
6-
} from 'jotai/vanilla/store';
4+
INTERNAL_AtomState,
5+
INTERNAL_Store,
6+
} from 'jotai/vanilla/internals';
7+
8+
export type DevStore = {
9+
get_internal_weak_map: () => {
10+
get: (atom: Atom<unknown>) => INTERNAL_AtomState | undefined;
11+
};
12+
get_mounted_atoms: () => Set<Atom<unknown>>;
13+
restore_atoms: (values: Iterable<readonly [Atom<unknown>, unknown]>) => void;
14+
};
715

816
export type StoreWithoutDevMethods = ReturnType<typeof createStore>;
9-
export type StoreWithDevMethods = INTERNAL_DevStoreRev4 & INTERNAL_PrdStore;
17+
export type StoreWithDevMethods = INTERNAL_Store & DevStore;
1018

1119
export type Store = StoreWithoutDevMethods | StoreWithDevMethods;
1220

‎src/utils/internals/compose-with-devtools.ts

Lines changed: 88 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1-
import { Atom } from 'jotai';
1+
import { Atom, WritableAtom } from 'jotai';
2+
import { INTERNAL_overrideCreateStore } from 'jotai/vanilla';
3+
import {
4+
INTERNAL_buildStoreRev1 as INTERNAL_buildStore,
5+
INTERNAL_initializeStoreHooks,
6+
} from 'jotai/vanilla/internals';
27
import {
38
AnyAtom,
49
AnyAtomError,
510
AnyAtomValue,
11+
DevStore,
612
Store,
713
StoreWithDevMethods,
814
} from '../../types';
@@ -33,17 +39,13 @@ type DevToolsStoreMethods = {
3339

3440
type WithDevToolsStore<S extends Store> = S & DevToolsStoreMethods;
3541

36-
const isDevStore = (store: Store | undefined): store is StoreWithDevMethods => {
37-
return store ? 'dev4_get_internal_weak_map' in store : false;
38-
};
39-
4042
export const isDevToolsStore = (
4143
store: Store | WithDevToolsStore<Store>,
4244
): store is WithDevToolsStore<Store> => {
4345
return 'subscribeStore' in store;
4446
};
4547

46-
const __composeDevTools = (
48+
const __composeWithDevTools = (
4749
store: StoreWithDevMethods,
4850
): WithDevToolsStore<StoreWithDevMethods> => {
4951
const { sub, set, get } = store;
@@ -120,11 +122,11 @@ const __composeDevTools = (
120122
};
121123

122124
(store as WithDevToolsStore<typeof store>).getMountedAtoms = () => {
123-
return store.dev4_get_mounted_atoms();
125+
return store.get_mounted_atoms();
124126
};
125127

126128
(store as WithDevToolsStore<typeof store>).getAtomState = (atom) => {
127-
const aState = store.dev4_get_internal_weak_map().get(atom);
129+
const aState = store.get_internal_weak_map().get(atom);
128130

129131
if (aState) {
130132
return { v: aState.v, e: aState.e, d: new Set(aState.d.keys()) };
@@ -134,26 +136,98 @@ const __composeDevTools = (
134136
};
135137

136138
(store as WithDevToolsStore<typeof store>).getMountedAtomState = (atom) => {
137-
const aState = store.dev4_get_internal_weak_map().get(atom);
139+
const aState = store.get_internal_weak_map().get(atom);
138140

139-
if (aState && aState.m) {
141+
if (aState && 'm' in aState) {
140142
return {
141-
l: aState.m.l,
142-
t: aState.m.t,
143+
l: (aState.m as any).l,
144+
t: (aState.m as any).t,
143145
};
144146
}
145147

146148
return undefined;
147149
};
148150

149151
(store as WithDevToolsStore<typeof store>).restoreAtoms = (values) => {
150-
store.dev4_restore_atoms(values);
152+
store.restore_atoms(values);
151153
storeListeners.forEach((l) => l({ type: 'restore' }));
152154
};
153155

154156
return store as typeof store & DevToolsStoreMethods;
155157
};
156158

159+
const createDevStore = (): StoreWithDevMethods => {
160+
let inRestoreAtom = 0;
161+
const storeHooks = INTERNAL_initializeStoreHooks({});
162+
const atomStateMap = new WeakMap();
163+
const mountedAtoms = new WeakMap();
164+
const store = INTERNAL_buildStore(
165+
atomStateMap,
166+
mountedAtoms,
167+
undefined,
168+
undefined,
169+
undefined,
170+
undefined,
171+
storeHooks,
172+
undefined,
173+
(atom, get, set, ...args) => {
174+
if (inRestoreAtom) {
175+
return set(atom, ...(args as any));
176+
}
177+
return atom.write(get, set, ...(args as any));
178+
},
179+
);
180+
const debugMountedAtoms = new Set<Atom<unknown>>();
181+
storeHooks.m.add(undefined, (atom) => {
182+
debugMountedAtoms.add(atom);
183+
const atomState = atomStateMap.get(atom);
184+
// For DevStoreRev4 compatibility
185+
(atomState as any).m = mountedAtoms.get(atom);
186+
});
187+
storeHooks.u.add(undefined, (atom) => {
188+
debugMountedAtoms.delete(atom);
189+
const atomState = atomStateMap.get(atom);
190+
// For DevStoreRev4 compatibility
191+
delete (atomState as any).m;
192+
});
193+
const devStore: DevStore = {
194+
// store dev methods (these are tentative and subject to change without notice)
195+
get_internal_weak_map: () => atomStateMap,
196+
get_mounted_atoms: () => debugMountedAtoms,
197+
restore_atoms: (values) => {
198+
const restoreAtom: WritableAtom<null, [], void> = {
199+
read: () => null,
200+
write: (_get, set) => {
201+
++inRestoreAtom;
202+
try {
203+
for (const [atom, value] of values) {
204+
if ('init' in atom) {
205+
set(atom as never, value);
206+
}
207+
}
208+
} finally {
209+
--inRestoreAtom;
210+
}
211+
},
212+
};
213+
store.set(restoreAtom);
214+
},
215+
};
216+
217+
return {
218+
...store,
219+
...devStore,
220+
};
221+
};
222+
223+
const isDevStore = (store: Store): store is StoreWithDevMethods => {
224+
return 'get_internal_weak_map' in store;
225+
};
226+
227+
INTERNAL_overrideCreateStore((prev) => {
228+
return createDevStore;
229+
});
230+
157231
export const composeWithDevTools = (
158232
store: Store,
159233
): typeof store | WithDevToolsStore<typeof store> => {
@@ -163,7 +237,7 @@ export const composeWithDevTools = (
163237
}
164238

165239
if (isDevStore(store)) {
166-
return __composeDevTools(store);
240+
return __composeWithDevTools(store);
167241
}
168242

169243
return store;

‎tsup.config.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ const baseConfig: Options = {
1919
// Outputs `dist/index.js` and `dist/utils.js`
2020
entry: {
2121
index: 'src/index.ts',
22-
// Workaround to generate seperate chunks for DevTools so we could export a null component for production builds
23-
internal__devtools: 'src/DevTools/index.ts',
2422
utils: 'src/utils/index.ts',
2523
},
2624
loader: {

0 commit comments

Comments
 (0)
0