Skip to content

Commit ec0ec89

Browse files
incepterincepter
authored
introduce hook state & bitwise logic & rename hoistToProvider to hoist, rename AsyncStateStatus to Status.. (#104)
* rewrite hooks to use bitwise flags and scan config * devtools enhancements * some devtools fixes and enhancements * enhance subscriptions and subscribe props * display new subscriptions in devtools * remove supports in concurrent mode and small refactor * rename hoistToProvider to hoist, rename AsyncStateStatus to Status, rename ProducerRunEffects to producerEffects, and export state hook to its own file * small refactorings * move wrapProducerFn to protottype & reduce_funcs set to false in terser options & state hook resolve flags enhacenements
1 parent 0276aa3 commit ec0ec89

File tree

73 files changed

+2103
-2347
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+2103
-2347
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ build
44
node_modules
55
stats.json
66
dist
7+
packages/example
78

89
# Cruft
910
.DS_Store

‎README.MD

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ runc({
121121

122122
#### <ins>Dynamic creation and sharing of states at runtime</ins>
123123
Under the `AsyncStateProvider`, you can create and share state instances
124-
and access them by their `key` via the `hoistToProvider` option.
124+
and access them by their `key` via the `hoist` option.
125125

126126
You can even start listening to a state before it gets hoisted to the provider,
127127
and get notified once it gets added.
@@ -140,12 +140,12 @@ variables. It just works in the core of the library. Of course, this requires
140140
you to be in an environment where `setTimeout` exists.
141141

142142
```tsx
143-
import {useAsyncState, ProducerRunEffects} from "react-async-states";
143+
import {useAsyncState, RunEffect} from "react-async-states";
144144

145145
const {run} = useAsyncState({
146146
producer: userSearchByUsername,
147147
// debounce runs
148-
runEffect: ProducerRunEffects.debounce,
148+
runEffect: RunEffect.debounce,
149149
runEffectDurationMs: 300,
150150
// skip pending status if it answers less than 200ms
151151
skipPendingDelayMs: 200,
@@ -163,14 +163,14 @@ and `payload`.
163163
Let's add cache support to the previous example:
164164

165165
```tsx
166-
import {useAsyncState, ProducerRunEffects} from "react-async-states";
166+
import {useAsyncState, RunEffect} from "react-async-states";
167167

168168
// note that the whole configuration object does not depend on render
169169
// and can be moved to module level static object.
170170
const {run} = useAsyncState({
171171
producer: userSearchByUsername,
172172
// debounce runs
173-
runEffect: ProducerRunEffects.debounce,
173+
runEffect: RunEffect.debounce,
174174
runEffectDurationMs: 300,
175175
// skip pending status if it answers less than 200ms
176176
skipPendingDelayMs: 200,

‎packages/devtools-extension/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"sideEffects": false,
33
"types": "dist/index",
4-
"version": "0.0.1-alpha-5",
4+
"version": "0.0.1-alpha-6",
55
"main": "dist/index.umd.js",
66
"name": "async-states-devtools",
77
"module": "dist/index.development.mjs",

‎packages/devtools-extension/src/DevModeApp.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import * as React from "react";
2-
import {createSource, useSource} from "react-async-states";
2+
import {createSource, useSource, useSourceLane, useProducer, useSelector} from "react-async-states";
3+
import {State} from "react-async-states/src";
34

45

5-
const counterSource = createSource("counter", null, {initialValue: 0});
66

77
let meter = 0;
88
export default function DevModeApp() {
99
const source = React.useMemo(() => createSource<number>("devmodeapp", null, {initialValue: 0}), []);
10-
const {state} = useSource(source);
10+
const state: State<number> = useSelector(source);
1111
return <button
12-
onClick={() => source.run(old => old.data + 1)}>{state.data}</button>
12+
onClick={() => source!.run(old => old.data + 1)}>{state.data}</button>
1313
}

‎packages/devtools-extension/src/DevtoolsView/CurrentJournalDisplay.tsx

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,34 @@ const CurrentJournalDisplay = React.memo(function Journal({lane}: { lane: string
1313
display: 'flex',
1414
flexDirection: 'row',
1515
height: '100%',
16-
padding: 0
16+
padding: 0,
17+
borderRadius: 8,
1718
}}>
1819
<div style={{
20+
padding: 8,
1921
width: 250,
2022
minWidth: 250,
21-
padding: 8,
2223
overflow: 'auto',
23-
borderRight: '1px dashed #C3C3C3',
24-
}} className='main-bg scroll-y-auto'>
25-
<div className='main-color' style={{height: '100%'}}>
26-
<JournalView lane={lane}/>
24+
borderRadius: 8,
25+
// backgroundColor: "red",
26+
}} className='main-bg'>
27+
<div className=' scroll-y-auto' style={{
28+
// padding: 8,
29+
height: '100%'
30+
}}>
31+
<div style={{
32+
}} className="main-color main-bg">
33+
<JournalView lane={lane}/>
34+
</div>
2735
</div>
2836
</div>
29-
<div className='main-bg main-color scroll-y-auto'
30-
style={{height: '100%', overflowY: 'auto', width: '100%'}}>
37+
<div className='main-bg-2 main-color scroll-y-auto'
38+
style={{
39+
borderRadius: 8,
40+
height: '100%',
41+
overflowY: 'auto',
42+
width: '100%',
43+
}}>
3144
<CurrentJson/>
3245
</div>
3346
</div>);
@@ -194,11 +207,14 @@ function CurrentJson() {
194207
return null;
195208
}
196209
return (
197-
<div>
210+
<div style={{height: "100%"}} className="scroll-y-auto">
198211
<ReactJson name={json.data?.name}
199212
theme="solarized"
200213
style={{
201-
padding: '1rem'
214+
borderRadius: 8,
215+
padding: '1rem',
216+
backgroundColor: "#252b36",
217+
minHeight: 'calc(100% - 32px)'
202218
}}
203219
collapsed={2}
204220
displayDataTypes={false}

‎packages/devtools-extension/src/DevtoolsView/CurrentStateDisplay.tsx

Lines changed: 69 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import ReactJson from "react-json-view";
3-
import {AsyncStateStatus, useSource, useSourceLane} from "react-async-states";
3+
import {Status, useSource, useSourceLane} from "react-async-states";
44
import {DevtoolsJournalEvent} from "react-async-states/dist/devtools";
55
import {
66
currentJournal,
@@ -35,7 +35,7 @@ function CurrentTreeDisplay() {
3535
return null;
3636
}
3737
return (
38-
<div style={{height: '100%'}}>
38+
<div style={{height: '100%', width: "100%"}} className="scroll-y-auto">
3939
<div
4040
style={{
4141
padding: 8,
@@ -50,23 +50,24 @@ function CurrentTreeDisplay() {
5050
</div>
5151
<div
5252
style={{
53-
height: "auto",
53+
borderRadius: 8,
54+
height: 'calc(100% - 60px)',
5455
display: "flex",
5556
}}
57+
className="main-bg-2"
5658
>
5759
<div
5860
style={{
59-
borderRight: "1px dashed #C3C3C3",
61+
padding: 8,
62+
borderRadius: 8,
6063
}}
61-
className="main-bg"
64+
className="main-bg-2 scroll-y-auto"
6265
>
6366
<CurrentJsonDisplay lane={lane} mode="state"/>
6467
</div>
6568
<div
66-
style={{
67-
overflow: "auto",
68-
}}
69-
className="main-bg scroll-y-auto"
69+
style={{height: 'calc(100% - 16px)', padding: 8, borderRadius: 8}}
70+
className="main-bg-2"
7071
>
7172
<CurrentJsonDisplay lane={lane} mode="journal"/>
7273
</div>
@@ -83,34 +84,34 @@ type SiderDisplayProps = {
8384
lanes?: string;
8485
};
8586

86-
function getBackgroundColorFromStatus(status: AsyncStateStatus | undefined) {
87+
function getBackgroundColorFromStatus(status: Status | undefined) {
8788
switch (status) {
88-
case AsyncStateStatus.error:
89+
case Status.error:
8990
return "#EB6774";
90-
case AsyncStateStatus.initial:
91+
case Status.initial:
9192
return "#DEDEDE";
92-
case AsyncStateStatus.aborted:
93+
case Status.aborted:
9394
return "#787878";
94-
case AsyncStateStatus.pending:
95+
case Status.pending:
9596
return "#5B95DB";
96-
case AsyncStateStatus.success:
97+
case Status.success:
9798
return "#17A449";
9899
default:
99100
return undefined;
100101
}
101102
}
102103

103-
function getColorFromStatus(status: AsyncStateStatus | undefined) {
104+
function getColorFromStatus(status: Status | undefined) {
104105
switch (status) {
105-
case AsyncStateStatus.error:
106+
case Status.error:
106107
return "white";
107-
case AsyncStateStatus.initial:
108+
case Status.initial:
108109
return "black";
109-
case AsyncStateStatus.aborted:
110+
case Status.aborted:
110111
return "white";
111-
case AsyncStateStatus.pending:
112+
case Status.pending:
112113
return "white";
113-
case AsyncStateStatus.success:
114+
case Status.success:
114115
return "white";
115116
default:
116117
return undefined;
@@ -134,7 +135,7 @@ export const SideKey = React.memo(function SiderKey({
134135
);
135136
}, [uniqueId, dev]);
136137

137-
const {state} = useSourceLane(journalSource, `${uniqueId}`);
138+
const {state, devFlags, version, source} = useSourceLane(journalSource, `${uniqueId}`);
138139

139140
const {status} = state.data?.state ?? {};
140141

@@ -154,7 +155,7 @@ export const SideKey = React.memo(function SiderKey({
154155
currentJournal.setState(null);
155156
currentState.setState(`${uniqueId}`);
156157
}}
157-
disabled={status === AsyncStateStatus.pending}
158+
disabled={status === Status.pending}
158159
>
159160
<div
160161
style={{
@@ -200,7 +201,7 @@ export const SideKey = React.memo(function SiderKey({
200201
currentJournal.setState(null);
201202
currentState.setState(`${uniqueId}`);
202203
}}
203-
disabled={status === AsyncStateStatus.pending}
204+
disabled={status === Status.pending}
204205
>
205206
<div
206207
style={{
@@ -264,32 +265,43 @@ function StateView({lane}) {
264265
return <span>No state information</span>;
265266
}
266267
return (
267-
<div style={{height: '100%'}} className="scroll-y-auto">
268-
<ReactJson name={`${data.key}'s state`}
269-
style={{
270-
padding: "1rem",
271-
overflow: "auto"
272-
}}
273-
theme="solarized"
274-
collapsed={5}
275-
displayDataTypes={false}
276-
displayObjectSize={false}
277-
enableClipboard={false}
278-
src={addFormattedDate(data.state)}
279-
/>
280-
<hr/>
281-
<ReactJson name={data.key}
282-
style={{
283-
padding: "1rem",
284-
overflow: "auto"
285-
}}
286-
theme="solarized"
287-
collapsed={1}
288-
displayDataTypes={false}
289-
displayObjectSize={false}
290-
enableClipboard={false}
291-
src={displayAsyncState(data)}
292-
/>
268+
<div style={{height: '100%'}}>
269+
<div style={{display: "flex", gap: 8, height: '100%'}}>
270+
<div style={{maxWidth: '60%', height: '100%'}} className="scroll-y-auto">
271+
<ReactJson name={`${data.key}'s state`}
272+
style={{
273+
274+
backgroundColor: "#252b36",
275+
borderRadius: 8,
276+
padding: "1rem",
277+
overflow: "auto"
278+
}}
279+
theme="solarized"
280+
collapsed={5}
281+
displayDataTypes={false}
282+
displayObjectSize={false}
283+
enableClipboard={false}
284+
src={addFormattedDate(data.state)}
285+
/>
286+
</div>
287+
<div style={{maxWidth: '60%', height: '100%'}} className="scroll-y-auto">
288+
<ReactJson name={data.key}
289+
style={{
290+
backgroundColor: "#252b36",
291+
borderRadius: 8,
292+
padding: "1rem",
293+
overflow: "auto"
294+
}}
295+
theme="solarized"
296+
collapsed={1}
297+
displayDataTypes={false}
298+
displayObjectSize={false}
299+
enableClipboard={false}
300+
src={displayAsyncState(data)}
301+
/>
302+
</div>
303+
304+
</div>
293305
</div>
294306
);
295307
}
@@ -389,7 +401,7 @@ function EditState({lane}) {
389401
const {dev} = React.useContext(DevtoolsContext);
390402
const [isJson, setIsJson] = React.useState(true);
391403
const [data, setData] = React.useState<string | null>("");
392-
const [status, setStatus] = React.useState(AsyncStateStatus.success);
404+
const [status, setStatus] = React.useState(Status.success);
393405
return (
394406
<>
395407
<button
@@ -464,18 +476,18 @@ function EditState({lane}) {
464476
id="next-status"
465477
value={status}
466478
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
467-
const value = e.target.value as AsyncStateStatus;
479+
const value = e.target.value as Status;
468480
setStatus(value);
469-
if (value === AsyncStateStatus.pending) {
481+
if (value === Status.pending) {
470482
setData(null);
471483
}
472484
}}
473485
>
474-
{Object.values(AsyncStateStatus).map((t) => (
486+
{Object.values(Status).map((t) => (
475487
<option value={t}>{t}</option>
476488
))}
477489
</select>
478-
{status !== AsyncStateStatus.pending && (
490+
{status !== Status.pending && (
479491
<section
480492
style={{
481493
padding: "4px 0px",
@@ -525,6 +537,8 @@ function EditState({lane}) {
525537
<ReactJson
526538
name="New state"
527539
style={{
540+
backgroundColor: "#252b36",
541+
borderRadius: 8,
528542
padding: "1rem",
529543
}}
530544
theme="solarized"

‎packages/devtools-extension/src/DevtoolsView/SiderDisplay.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,6 @@ const SiderDisplay = React.memo(function () {
151151
<div
152152
className="main-bg scroll-y-auto"
153153
style={{
154-
height: "auto",
155154
overflow: "auto",
156155
padding: "0px 8px",
157156
borderRight: "1px dashed #C3C3C3",
@@ -208,9 +207,9 @@ const SiderDisplay = React.memo(function () {
208207
className="scroll-y-auto"
209208
style={{
210209
top: 40,
211-
height: '100%',
210+
height: 'calc(100% - 60px)',
212211
overflow: "auto",
213-
marginTop: 40,
212+
paddingTop: 20,
214213
}}
215214
>
216215
<div

0 commit comments

Comments
 (0)