Skip to content

Commit 0276aa3

Browse files
incepterIbrahimBzdBumble-
authored
Devtools optimizations and dev (#99)
* [devtools] fix data.subscriptions is undefined when applying partial update * make devtools resizable vertically * Ref[replace-antd-with-tailwind]: remove antdesign and use normal sty… (#100) * Ref[replace-antd-with-tailwind]: remove ant design and use normal style attribute * Ref[replace-antd-with-tailwind]: definitely remove ant design * publish devtools alpha 5 Co-authored-by: IbrahimBzd <[email protected]> Co-authored-by: Bumble- <[email protected]>
1 parent 27e9503 commit 0276aa3

20 files changed

+992
-637
lines changed

‎packages/devtools-extension/package.json

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
2-
"name": "async-states-devtools",
3-
"type": "module",
4-
"version": "0.0.1-alpha-1",
2+
"sideEffects": false,
53
"types": "dist/index",
6-
"module": "dist/index.js",
7-
"main": "dist/index.umd.cjs",
4+
"version": "0.0.1-alpha-5",
5+
"main": "dist/index.umd.js",
6+
"name": "async-states-devtools",
7+
"module": "dist/index.development.mjs",
88
"files": [
99
"README.MD",
1010
"dist"
@@ -13,10 +13,9 @@
1313
"dev": "vite",
1414
"preview": "vite preview",
1515
"build:ext": "tsc && vite build --config vite.config.ts",
16-
"build:lib": "tsc && vite build --config vite.config.lib.ts"
16+
"build:lib": "tsc && vite build --config vite.config.lib.dev.ts && vite build --config vite.config.lib.prod.ts"
1717
},
1818
"dependencies": {
19-
"antd": "^4.24.2",
2019
"react": "^18.2.0",
2120
"react-dom": "^18.2.0",
2221
"react-json-view": "^1.21.3",
@@ -26,6 +25,7 @@
2625
"react-async-states": ">=1.0.0-rc-8"
2726
},
2827
"devDependencies": {
28+
"@rollup/plugin-replace": "^5.0.1",
2929
"@types/node": "^18.11.9",
3030
"@types/react": "^18.0.24",
3131
"@types/react-dom": "^18.0.8",
@@ -34,6 +34,7 @@
3434
"typescript": "^4.6.4",
3535
"vite": "^3.2.3",
3636
"vite-plugin-dts": "^1.7.1",
37-
"vite-plugin-imp": "^2.3.1"
37+
"vite-plugin-imp": "^2.3.1",
38+
"vite-plugin-replace": "^0.1.1"
3839
}
3940
}

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

Lines changed: 70 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,38 @@
11
import * as React from "react";
2-
import Select from "antd/lib/select";
32
import ReactJson from "react-json-view";
4-
import Button from "antd/lib/button";
5-
import Layout from "antd/lib/layout";
63
import {useSource, useSourceLane,} from "react-async-states";
74
import {DevtoolsJournalEvent} from "react-async-states/dist/devtools";
85
import {currentJournal, journalSource} from "./sources";
96
import {addFormattedDate} from "./utils";
107

11-
const {Content, Sider} = Layout;
12-
138
const CurrentJournalDisplay = React.memo(function Journal({lane}: { lane: string }) {
149

1510
return (
16-
<Layout className='main-bg' style={{
17-
height: '100%',
18-
padding: 0
19-
}}>
20-
<Sider style={{
11+
<div className='main-bg'
12+
style={{
13+
display: 'flex',
14+
flexDirection: 'row',
15+
height: '100%',
16+
padding: 0
17+
}}>
18+
<div style={{
19+
width: 250,
20+
minWidth: 250,
2121
padding: 8,
2222
overflow: 'auto',
23-
// height: 'calc(100vh - 40px)',
2423
borderRight: '1px dashed #C3C3C3',
25-
}} className='main-bg scroll-y-auto' width={250}>
24+
}} className='main-bg scroll-y-auto'>
2625
<div className='main-color' style={{height: '100%'}}>
2726
<JournalView lane={lane}/>
2827
</div>
29-
</Sider>
30-
<Content className='main-bg main-color scroll-y-auto'
31-
style={{height: '100%', overflowY: 'auto'}}>
28+
</div>
29+
<div className='main-bg main-color scroll-y-auto'
30+
style={{height: '100%', overflowY: 'auto', width: '100%'}}>
3231
<CurrentJson/>
33-
</Content>
34-
</Layout>);
32+
</div>
33+
</div>);
3534
});
3635

37-
const JOURNAL_EVENT_TYPES_FILTER_OPTIONS = Object.values(DevtoolsJournalEvent).map(t => ({
38-
label: t, value: t
39-
}));
4036
const initialSelectedEvents = [
4137
DevtoolsJournalEvent.creation,
4238
DevtoolsJournalEvent.update,
@@ -70,37 +66,71 @@ function JournalView({lane}) {
7066
}
7167
}, [lane]);
7268

69+
// handel select or unselect selectType
70+
function handleSelectChange(e: React.ChangeEvent<HTMLSelectElement>) {
71+
const value: DevtoolsJournalEvent = e.target.value as DevtoolsJournalEvent;
72+
if (selectedTypes.find((option: DevtoolsJournalEvent) => option === value) === undefined) {
73+
return setSelectedTypes([...selectedTypes, value])
74+
} else {
75+
return setSelectedTypes(selectedTypes.filter((option: DevtoolsJournalEvent) => option !== value))
76+
}
77+
}
78+
7379
return (
7480
<div>
7581
<span>Available: ({allLogs.length}), shown: ({filteredData.length})</span>
7682
<div style={{display: "flex"}}>
77-
<Button type="link" size="small" shape="round"
78-
className="default-button"
79-
onClick={() => setSelectedTypes([])}>Clear all</Button>
80-
<Button type="link" size="small" shape="round"
81-
className="default-button"
82-
style={{marginLeft: 8}}
83+
<button className="default-button"
84+
onClick={() => setSelectedTypes([])}
85+
style={{
86+
backgroundColor: 'transparent',
87+
border: "none",
88+
color: '#00aaff',
89+
cursor: "pointer"
90+
}}>Clear all
91+
</button>
92+
<button className="default-button"
93+
style={{
94+
backgroundColor: 'transparent',
95+
border: "none",
96+
color: '#00aaff',
97+
marginLeft: 8,
98+
cursor: "pointer"
99+
}}
83100
onClick={() => setSelectedTypes(Object.values(DevtoolsJournalEvent))}
84101
>
85102
Select all
86-
</Button>
103+
</button>
87104
</div>
88-
<Select
89-
mode="multiple"
105+
<select
106+
multiple
90107
value={selectedTypes}
91-
style={{width: '100%', marginTop: 8}}
92-
onChange={setSelectedTypes}
93-
defaultValue={selectedTypes}
94-
options={JOURNAL_EVENT_TYPES_FILTER_OPTIONS}
95-
/>
108+
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => handleSelectChange(e)}
109+
style={{
110+
color: '#000',
111+
width: '100%',
112+
marginTop: 8,
113+
background: 'white',
114+
borderRadius: 5,
115+
outline: "none"
116+
}}>
117+
{Object.values(DevtoolsJournalEvent)?.map((t: string) => (
118+
<option key={t} value={t}>{t}</option>))}
119+
</select>
96120
<ul style={{marginTop: 8}}>
97-
{filteredData.map((entry, id) => (
121+
{filteredData.map((entry) => (
98122
<li
99123
className="w-full"
100-
key={id}>
101-
<Button
102-
type={json.data?.eventId === entry.eventId ? "primary" : "link"}
103-
size="small" shape="round" className="default-button"
124+
key={entry?.eventId}>
125+
<button
126+
style={{
127+
borderRadius: 100,
128+
backgroundColor: json.data?.eventId === entry.eventId ? '#0059ff' : 'transparent',
129+
color: json.data?.eventId === entry.eventId ? 'white' : '#00bbff',
130+
padding: '3px 10px',
131+
border: "none"
132+
}}
133+
className="default-button"
104134
onClick={() => {
105135
currentJournal.setState({
106136
data: formJournalEventJson(entry),
@@ -110,7 +140,7 @@ function JournalView({lane}) {
110140
});
111141
}}>
112142
{`› ${entry.eventType}`}
113-
</Button>
143+
</button>
114144
</li>
115145
))}
116146
</ul>

0 commit comments

Comments
 (0)