UNPKG

14.4 kBJavaScriptView Raw
1System.register(['react', 'jotai'], (function (exports) {
2 'use strict';
3 var useContext, useState, useEffect, useDebugValue, useRef, useCallback, SECRET_INTERNAL_getScopeContext, useAtom;
4 return {
5 setters: [function (module) {
6 useContext = module.useContext;
7 useState = module.useState;
8 useEffect = module.useEffect;
9 useDebugValue = module.useDebugValue;
10 useRef = module.useRef;
11 useCallback = module.useCallback;
12 }, function (module) {
13 SECRET_INTERNAL_getScopeContext = module.SECRET_INTERNAL_getScopeContext;
14 useAtom = module.useAtom;
15 }],
16 execute: (function () {
17
18 exports({
19 useAtomDevtools: useAtomDevtools,
20 useAtomsDevtools: useAtomsDevtools,
21 useAtomsSnapshot: useAtomsSnapshot,
22 useGotoAtomsSnapshot: useGotoAtomsSnapshot
23 });
24
25 const RESTORE_ATOMS = "h";
26 const DEV_SUBSCRIBE_STATE = "n";
27 const DEV_GET_MOUNTED_ATOMS = "l";
28 const DEV_GET_ATOM_STATE = "a";
29 const DEV_GET_MOUNTED = "m";
30
31 const atomToPrintable$1 = (atom) => atom.debugLabel || atom.toString();
32 const stateToPrintable = ([store, atoms]) => Object.fromEntries(atoms.flatMap((atom) => {
33 var _a, _b;
34 const mounted = (_a = store[DEV_GET_MOUNTED]) == null ? void 0 : _a.call(store, atom);
35 if (!mounted) {
36 return [];
37 }
38 const dependents = mounted.t;
39 const atomState = ((_b = store[DEV_GET_ATOM_STATE]) == null ? void 0 : _b.call(store, atom)) || {};
40 return [
41 [
42 atomToPrintable$1(atom),
43 {
44 ..."e" in atomState && { error: atomState.e },
45 ..."p" in atomState && { promise: atomState.p },
46 ..."v" in atomState && { value: atomState.v },
47 dependents: Array.from(dependents).map(atomToPrintable$1)
48 }
49 ]
50 ];
51 }));
52 const useAtomsDebugValue = exports('useAtomsDebugValue', (options) => {
53 var _a;
54 const enabled = (_a = options == null ? void 0 : options.enabled) != null ? _a : true;
55 const ScopeContext = SECRET_INTERNAL_getScopeContext(options == null ? void 0 : options.scope);
56 const { s: store } = useContext(ScopeContext);
57 const [atoms, setAtoms] = useState([]);
58 useEffect(() => {
59 var _a2;
60 if (!enabled) {
61 return;
62 }
63 const callback = () => {
64 var _a3;
65 setAtoms(Array.from(((_a3 = store[DEV_GET_MOUNTED_ATOMS]) == null ? void 0 : _a3.call(store)) || []));
66 };
67 const unsubscribe = (_a2 = store[DEV_SUBSCRIBE_STATE]) == null ? void 0 : _a2.call(store, callback);
68 callback();
69 return unsubscribe;
70 }, [enabled, store]);
71 useDebugValue([store, atoms], stateToPrintable);
72 });
73
74 function useAtomDevtools(anAtom, options, deprecatedScope) {
75 if (typeof options === "string" || typeof deprecatedScope !== "undefined") {
76 console.warn("DEPRECATED [useAtomDevtools] use DevtoolOptions");
77 options = {
78 name: options,
79 scope: deprecatedScope
80 };
81 }
82 const { enabled, name, scope } = options || {};
83 let extension;
84 try {
85 extension = (enabled != null ? enabled : true) && window.__REDUX_DEVTOOLS_EXTENSION__;
86 } catch {
87 }
88 if (!extension) {
89 if (enabled) {
90 console.warn("Please install/enable Redux devtools extension");
91 }
92 }
93 const [value, setValue] = useAtom(anAtom, scope);
94 const lastValue = useRef(value);
95 const isTimeTraveling = useRef(false);
96 const devtools = useRef();
97 const atomName = name || anAtom.debugLabel || anAtom.toString();
98 useEffect(() => {
99 if (!extension) {
100 return;
101 }
102 const setValueIfWritable = (value2) => {
103 if (typeof setValue === "function") {
104 setValue(value2);
105 return;
106 }
107 console.warn("[Warn] you cannot do write operations (Time-travelling, etc) in read-only atoms\n", anAtom);
108 };
109 devtools.current = extension.connect({ name: atomName });
110 const unsubscribe = devtools.current.subscribe((message) => {
111 var _a, _b, _c, _d, _e, _f;
112 if (message.type === "ACTION" && message.payload) {
113 try {
114 setValueIfWritable(JSON.parse(message.payload));
115 } catch (e) {
116 console.error("please dispatch a serializable value that JSON.parse() support\n", e);
117 }
118 } else if (message.type === "DISPATCH" && message.state) {
119 if (((_a = message.payload) == null ? void 0 : _a.type) === "JUMP_TO_ACTION" || ((_b = message.payload) == null ? void 0 : _b.type) === "JUMP_TO_STATE") {
120 isTimeTraveling.current = true;
121 setValueIfWritable(JSON.parse(message.state));
122 }
123 } else if (message.type === "DISPATCH" && ((_c = message.payload) == null ? void 0 : _c.type) === "COMMIT") {
124 (_d = devtools.current) == null ? void 0 : _d.init(lastValue.current);
125 } else if (message.type === "DISPATCH" && ((_e = message.payload) == null ? void 0 : _e.type) === "IMPORT_STATE") {
126 const computedStates = ((_f = message.payload.nextLiftedState) == null ? void 0 : _f.computedStates) || [];
127 computedStates.forEach(({ state }, index) => {
128 var _a2;
129 if (index === 0) {
130 (_a2 = devtools.current) == null ? void 0 : _a2.init(state);
131 } else {
132 setValueIfWritable(state);
133 }
134 });
135 }
136 });
137 devtools.current.shouldInit = true;
138 return unsubscribe;
139 }, [anAtom, extension, atomName, setValue]);
140 useEffect(() => {
141 if (!devtools.current) {
142 return;
143 }
144 lastValue.current = value;
145 if (devtools.current.shouldInit) {
146 devtools.current.init(value);
147 devtools.current.shouldInit = false;
148 } else if (isTimeTraveling.current) {
149 isTimeTraveling.current = false;
150 } else {
151 devtools.current.send(`${atomName} - ${new Date().toLocaleString()}`, value);
152 }
153 }, [anAtom, extension, atomName, value]);
154 }
155
156 const createAtomsSnapshot = (store, atoms) => {
157 const tuples = atoms.map((atom) => {
158 var _a, _b;
159 const atomState = (_b = (_a = store[DEV_GET_ATOM_STATE]) == null ? void 0 : _a.call(store, atom)) != null ? _b : {};
160 return [atom, "v" in atomState ? atomState.v : void 0];
161 });
162 return new Map(tuples);
163 };
164 function useAtomsSnapshot(scope) {
165 const ScopeContext = SECRET_INTERNAL_getScopeContext(scope);
166 const scopeContainer = useContext(ScopeContext);
167 const store = scopeContainer.s;
168 if (!store[DEV_SUBSCRIBE_STATE]) {
169 throw new Error("useAtomsSnapshot can only be used in dev mode.");
170 }
171 const [atomsSnapshot, setAtomsSnapshot] = useState(() => /* @__PURE__ */ new Map());
172 useEffect(() => {
173 var _a;
174 const callback = () => {
175 var _a2;
176 const atoms = Array.from(((_a2 = store[DEV_GET_MOUNTED_ATOMS]) == null ? void 0 : _a2.call(store)) || []);
177 setAtomsSnapshot(createAtomsSnapshot(store, atoms));
178 };
179 const unsubscribe = (_a = store[DEV_SUBSCRIBE_STATE]) == null ? void 0 : _a.call(store, callback);
180 callback();
181 return unsubscribe;
182 }, [store]);
183 return atomsSnapshot;
184 }
185
186 function useGotoAtomsSnapshot(scope) {
187 const ScopeContext = SECRET_INTERNAL_getScopeContext(scope);
188 const scopeContainer = useContext(ScopeContext);
189 const store = scopeContainer.s;
190 if (!store[DEV_SUBSCRIBE_STATE]) {
191 throw new Error("useGotoAtomsSnapshot can only be used in dev mode.");
192 }
193 return useCallback((values) => {
194 store[RESTORE_ATOMS](values);
195 }, [store]);
196 }
197
198 const isEqualAtomsValues = (left, right) => left.size === right.size && Array.from(left).every(([left2, v]) => Object.is(right.get(left2), v));
199 const isEqualAtomsDependents = (left, right) => left.size === right.size && Array.from(left).every(([a, dLeft]) => {
200 const dRight = right.get(a);
201 return dRight && dLeft.size === dRight.size && Array.from(dLeft).every((d) => dRight.has(d));
202 });
203 const atomToPrintable = (atom) => atom.debugLabel ? `${atom}:${atom.debugLabel}` : `${atom}`;
204 const getDevtoolsState = (atomsSnapshot) => {
205 const values = {};
206 atomsSnapshot.values.forEach((v, atom) => {
207 values[atomToPrintable(atom)] = v;
208 });
209 const dependents = {};
210 atomsSnapshot.dependents.forEach((d, atom) => {
211 dependents[atomToPrintable(atom)] = Array.from(d).map(atomToPrintable);
212 });
213 return {
214 values,
215 dependents
216 };
217 };
218 function useAtomsDevtools(name, options) {
219 if (typeof options !== "undefined" && typeof options !== "object") {
220 console.warn("DEPRECATED [useAtomsDevtools] use DevtoolsOptions");
221 options = { scope: options };
222 }
223 const { enabled, scope } = options || {};
224 const ScopeContext = SECRET_INTERNAL_getScopeContext(scope);
225 const { s: store, w: versionedWrite } = useContext(ScopeContext);
226 let extension;
227 try {
228 extension = (enabled != null ? enabled : true) && window.__REDUX_DEVTOOLS_EXTENSION__;
229 } catch {
230 }
231 if (!extension) {
232 if (enabled) {
233 console.warn("Please install/enable Redux devtools extension");
234 }
235 }
236 if (extension && !store[DEV_SUBSCRIBE_STATE]) {
237 throw new Error("useAtomsDevtools can only be used in dev mode.");
238 }
239 const [atomsSnapshot, setAtomsSnapshot] = useState(() => ({
240 values: /* @__PURE__ */ new Map(),
241 dependents: /* @__PURE__ */ new Map()
242 }));
243 useEffect(() => {
244 var _a;
245 if (!extension) {
246 return;
247 }
248 const callback = () => {
249 var _a2, _b, _c;
250 const values = /* @__PURE__ */ new Map();
251 const dependents = /* @__PURE__ */ new Map();
252 for (const atom of ((_a2 = store[DEV_GET_MOUNTED_ATOMS]) == null ? void 0 : _a2.call(store)) || []) {
253 const atomState = (_b = store[DEV_GET_ATOM_STATE]) == null ? void 0 : _b.call(store, atom);
254 if (atomState) {
255 if (atomState.r === atomState.i) {
256 return;
257 }
258 if ("v" in atomState) {
259 values.set(atom, atomState.v);
260 }
261 }
262 const mounted = (_c = store[DEV_GET_MOUNTED]) == null ? void 0 : _c.call(store, atom);
263 if (mounted) {
264 dependents.set(atom, mounted.t);
265 }
266 }
267 setAtomsSnapshot((prev) => {
268 if (isEqualAtomsValues(prev.values, values) && isEqualAtomsDependents(prev.dependents, dependents)) {
269 return prev;
270 }
271 return { values, dependents };
272 });
273 };
274 const unsubscribe = (_a = store[DEV_SUBSCRIBE_STATE]) == null ? void 0 : _a.call(store, callback);
275 callback();
276 return unsubscribe;
277 }, [extension, store]);
278 const goToSnapshot = useCallback((snapshot) => {
279 const { values } = snapshot;
280 if (versionedWrite) {
281 versionedWrite((version) => {
282 store[RESTORE_ATOMS](values, version);
283 });
284 } else {
285 store[RESTORE_ATOMS](values);
286 }
287 }, [store, versionedWrite]);
288 const isTimeTraveling = useRef(false);
289 const isRecording = useRef(true);
290 const devtools = useRef();
291 const snapshots = useRef([]);
292 useEffect(() => {
293 if (!extension) {
294 return;
295 }
296 const getSnapshotAt = (index = snapshots.current.length - 1) => {
297 const snapshot = snapshots.current[index >= 0 ? index : 0];
298 if (!snapshot) {
299 throw new Error("snaphost index out of bounds");
300 }
301 return snapshot;
302 };
303 const connection = extension.connect({ name });
304 const devtoolsUnsubscribe = connection.subscribe((message) => {
305 var _a;
306 switch (message.type) {
307 case "DISPATCH":
308 switch ((_a = message.payload) == null ? void 0 : _a.type) {
309 case "RESET":
310 break;
311 case "COMMIT":
312 connection.init(getDevtoolsState(getSnapshotAt()));
313 snapshots.current = [];
314 break;
315 case "JUMP_TO_ACTION":
316 case "JUMP_TO_STATE":
317 isTimeTraveling.current = true;
318 goToSnapshot(getSnapshotAt(message.payload.actionId - 1));
319 break;
320 case "PAUSE_RECORDING":
321 isRecording.current = !isRecording.current;
322 break;
323 }
324 }
325 });
326 devtools.current = connection;
327 devtools.current.shouldInit = true;
328 return devtoolsUnsubscribe;
329 }, [extension, goToSnapshot, name]);
330 useEffect(() => {
331 if (!devtools.current) {
332 return;
333 }
334 if (devtools.current.shouldInit) {
335 devtools.current.init(void 0);
336 devtools.current.shouldInit = false;
337 return;
338 }
339 if (isTimeTraveling.current) {
340 isTimeTraveling.current = false;
341 } else if (isRecording.current) {
342 snapshots.current.push(atomsSnapshot);
343 devtools.current.send({
344 type: `${snapshots.current.length}`,
345 updatedAt: new Date().toLocaleString()
346 }, getDevtoolsState(atomsSnapshot));
347 }
348 }, [atomsSnapshot]);
349 }
350
351 })
352 };
353}));