gubes mirror. how does this work
turns out that is not how reacitvity works also motion is the worlds greatest library
+114
-89
+13
-4
core/connection.ts
+13
-4
core/connection.ts
···
132
132
id!: string;
133
133
label!: string;
134
134
url!: URL;
135
-
nickname: string;
135
+
136
+
get nickname(): string { return this.$nickname.peek(); }
137
+
set nickname(value) { this.$nickname.value = value; }
138
+
139
+
$nickname = signal<string>("");
140
+
136
141
username!: string;
137
-
realname!: string;
142
+
143
+
get realname(): string { return this.$realname.peek(); }
144
+
set realname(value) { this.$realname.value = value; }
145
+
$realname = signal<string>("");
146
+
138
147
adapter_id?: string;
139
148
hostname?: string;
140
149
account_name?: string;
···
165
174
166
175
$error: Signal<[code: ConnectionErrorCode, reason?: IrcMessage] | null> = signal(null);
167
176
168
-
sasl?: Sasl;
177
+
sasl: Sasl = new Sasl(this);
169
178
registration: Registration = new Registration(this);
170
179
171
180
abstract connect(): Promise<void>;
···
441
450
}
442
451
}
443
452
444
-
this.sasl = undefined;
453
+
this.sasl = new Sasl(this);
445
454
446
455
if (this.on_tidy) this.on_tidy();
447
456
}
+1
-1
core/package.json
+1
-1
core/package.json
+8
-1
core/sasl.ts
+8
-1
core/sasl.ts
···
1
+
import { signal } from "@preact/signals-core";
1
2
import { Connection } from "./index";
2
3
import { IrcMessage } from "./parser";
3
4
import { Matchable, Matcher } from "./queue";
···
39
40
constructor(public conn: Connection) {
40
41
}
41
42
42
-
authed = false;
43
+
get authed() {
44
+
return this.$authed.peek();
45
+
}
46
+
set authed(val) {
47
+
this.$authed.value = val;
48
+
}
49
+
$authed = signal(false);
43
50
current_mech?: "PLAIN" | "SCRAM-SHA-256";
44
51
current_config?: SaslConfig;
45
52
+1
-1
neo/package.json
+1
-1
neo/package.json
+1
-1
neo/src/pages/auth.tsx
+1
-1
neo/src/pages/auth.tsx
+5
-5
neo/src/pages/gallery.tsx
+5
-5
neo/src/pages/gallery.tsx
···
16
16
import { useSignal } from "@preact/signals";
17
17
import { PrimaryButton } from "@src/bits/buttons";
18
18
const AnimatedIconSwitcherExample = () => {
19
-
const Icon = useSignal(IconA);
19
+
const Icon = useSignal(<IconA />);
20
20
return <>
21
21
<h2>icon switcher</h2>
22
22
<div class="panel">
23
23
<p class="intro body-small">animated icon switcher</p>
24
-
<AnimatedIconSwitcher icon={<Icon.value />} />
24
+
<AnimatedIconSwitcher icon={Icon.value} />
25
25
<div style="grid-column: 1/-1;">
26
-
<PrimaryButton onClick={() => Icon.value = IconA}>A</PrimaryButton>
27
-
<PrimaryButton onClick={() => Icon.value = IconB}>B</PrimaryButton>
28
-
<PrimaryButton onClick={() => Icon.value = IconC}>C</PrimaryButton>
26
+
<PrimaryButton onClick={() => Icon.value = <IconA />}>A</PrimaryButton>
27
+
<PrimaryButton onClick={() => Icon.value = <IconB />}>B</PrimaryButton>
28
+
<PrimaryButton onClick={() => Icon.value = <IconC />}>C</PrimaryButton>
29
29
</div>
30
30
</div>
31
31
</>
+13
-5
neo/src/pages/network-info.tsx
+13
-5
neo/src/pages/network-info.tsx
···
153
153
import { useLocation } from "wouter-preact";
154
154
155
155
const AccountSection: FunctionalComponent<{ conn: Connection }> = ({ conn }) => {
156
+
const authed = conn.sasl.$authed.value;
157
+
// @ts-ignore wonderful hack to make it so this bit updates when the capabilities are populated
158
+
const _ = conn.$connected.value;
159
+
156
160
const [, setLocation] = useLocation();
157
-
if (conn.supports.sasl() && conn.sasl?.authed) {
161
+
if (conn.supports.sasl() && authed) {
158
162
return <section class={account_section}>
159
163
<h2 class="heading">About You</h2>
160
164
<ProfileDetails conn={conn} />
···
188
192
</ActionGroup>
189
193
</section>
190
194
}
195
+
return <section class={account_section}>
196
+
<h2 class="heading">About You</h2>
197
+
<ProfileDetails conn={conn} />
198
+
</section>
191
199
}
192
200
193
201
const LogoutButton = ({ conn }: { conn: Connection }) => {
···
209
217
}
210
218
211
219
const ProfileDetails: FunctionalComponent<{ conn: Connection }> = ({ conn }) => {
212
-
const nick_colour = pick_colour(conn.nickname);
220
+
const nick_colour = pick_colour(conn.$nickname.value);
213
221
214
222
return <div style="position: relative;">
215
-
{conn.sasl?.authed && <div aria-hidden
223
+
{conn.sasl?.$authed.value && <div aria-hidden
216
224
class={css`
217
225
svg {
218
226
position: absolute;
···
236
244
margin-top: 1rem;
237
245
margin-bottom: .25rem;
238
246
`}>
239
-
{conn.nickname}
247
+
{conn.$nickname}
240
248
</p>
241
249
<p class={css`
242
250
color: var(--colour-grey-600);
···
245
253
margin: .25rem 0;
246
254
margin-bottom: .5rem;
247
255
`}>
248
-
{conn.realname}
256
+
{conn.$realname}
249
257
</p>
250
258
<ActionGroup>
251
259
<ActionLink to={connection_base(conn) + "/profile"}>
+70
-70
package-lock.json
+70
-70
package-lock.json
···
20
20
"version": "0.0.9",
21
21
"license": "ISC",
22
22
"dependencies": {
23
-
"@preact/signals-core": "^1.8.0",
23
+
"@preact/signals-core": "^1.9.0",
24
24
"async-mutex": "^0.5.0",
25
25
"isomorphic-ws": "^5.0.0",
26
26
"nanoid": "^5.0.7",
···
44
44
"dayjs": "^1.11.13",
45
45
"goober": "^2.1.16",
46
46
"idb": "^8.0.0",
47
-
"motion": "^12.16.0",
47
+
"motion": "^11.18.2",
48
48
"preact": "^10.23.1",
49
49
"wouter-preact": "^3.3.1"
50
50
},
···
58
58
"unplugin-icons": "^22.1.0",
59
59
"vite": "^6.0.1"
60
60
}
61
+
},
62
+
"neo/node_modules/framer-motion": {
63
+
"version": "11.18.2",
64
+
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.2.tgz",
65
+
"integrity": "sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==",
66
+
"license": "MIT",
67
+
"dependencies": {
68
+
"motion-dom": "^11.18.1",
69
+
"motion-utils": "^11.18.1",
70
+
"tslib": "^2.4.0"
71
+
},
72
+
"peerDependencies": {
73
+
"@emotion/is-prop-valid": "*",
74
+
"react": "^18.0.0 || ^19.0.0",
75
+
"react-dom": "^18.0.0 || ^19.0.0"
76
+
},
77
+
"peerDependenciesMeta": {
78
+
"@emotion/is-prop-valid": {
79
+
"optional": true
80
+
},
81
+
"react": {
82
+
"optional": true
83
+
},
84
+
"react-dom": {
85
+
"optional": true
86
+
}
87
+
}
88
+
},
89
+
"neo/node_modules/motion": {
90
+
"version": "11.18.2",
91
+
"resolved": "https://registry.npmjs.org/motion/-/motion-11.18.2.tgz",
92
+
"integrity": "sha512-JLjvFDuFr42NFtcVoMAyC2sEjnpA8xpy6qWPyzQvCloznAyQ8FIXioxWfHiLtgYhoVpfUqSWpn1h9++skj9+Wg==",
93
+
"license": "MIT",
94
+
"dependencies": {
95
+
"framer-motion": "^11.18.2",
96
+
"tslib": "^2.4.0"
97
+
},
98
+
"peerDependencies": {
99
+
"@emotion/is-prop-valid": "*",
100
+
"react": "^18.0.0 || ^19.0.0",
101
+
"react-dom": "^18.0.0 || ^19.0.0"
102
+
},
103
+
"peerDependenciesMeta": {
104
+
"@emotion/is-prop-valid": {
105
+
"optional": true
106
+
},
107
+
"react": {
108
+
"optional": true
109
+
},
110
+
"react-dom": {
111
+
"optional": true
112
+
}
113
+
}
114
+
},
115
+
"neo/node_modules/motion-dom": {
116
+
"version": "11.18.1",
117
+
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
118
+
"integrity": "sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==",
119
+
"license": "MIT",
120
+
"dependencies": {
121
+
"motion-utils": "^11.18.1"
122
+
}
123
+
},
124
+
"neo/node_modules/motion-utils": {
125
+
"version": "11.18.1",
126
+
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.18.1.tgz",
127
+
"integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==",
128
+
"license": "MIT"
61
129
},
62
130
"node_modules/@ampproject/remapping": {
63
131
"version": "2.3.0",
···
2184
2252
"dev": true,
2185
2253
"license": "MIT"
2186
2254
},
2187
-
"node_modules/framer-motion": {
2188
-
"version": "12.16.0",
2189
-
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.16.0.tgz",
2190
-
"integrity": "sha512-xryrmD4jSBQrS2IkMdcTmiS4aSKckbS7kLDCuhUn9110SQKG1w3zlq1RTqCblewg+ZYe+m3sdtzQA6cRwo5g8Q==",
2191
-
"license": "MIT",
2192
-
"dependencies": {
2193
-
"motion-dom": "^12.16.0",
2194
-
"motion-utils": "^12.12.1",
2195
-
"tslib": "^2.4.0"
2196
-
},
2197
-
"peerDependencies": {
2198
-
"@emotion/is-prop-valid": "*",
2199
-
"react": "^18.0.0 || ^19.0.0",
2200
-
"react-dom": "^18.0.0 || ^19.0.0"
2201
-
},
2202
-
"peerDependenciesMeta": {
2203
-
"@emotion/is-prop-valid": {
2204
-
"optional": true
2205
-
},
2206
-
"react": {
2207
-
"optional": true
2208
-
},
2209
-
"react-dom": {
2210
-
"optional": true
2211
-
}
2212
-
}
2213
-
},
2214
2255
"node_modules/fsevents": {
2215
2256
"version": "2.3.3",
2216
2257
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
···
2477
2518
"pkg-types": "^1.3.0",
2478
2519
"ufo": "^1.5.4"
2479
2520
}
2480
-
},
2481
-
"node_modules/motion": {
2482
-
"version": "12.16.0",
2483
-
"resolved": "https://registry.npmjs.org/motion/-/motion-12.16.0.tgz",
2484
-
"integrity": "sha512-P3HA83fnPMEGBLfKdD5vDdjH1Aa3wM3jT3+HX3fCVpy/4/lJiqvABajLgZenBu+rzkFzmeaPkvT7ouf9Tq5tVQ==",
2485
-
"license": "MIT",
2486
-
"dependencies": {
2487
-
"framer-motion": "^12.16.0",
2488
-
"tslib": "^2.4.0"
2489
-
},
2490
-
"peerDependencies": {
2491
-
"@emotion/is-prop-valid": "*",
2492
-
"react": "^18.0.0 || ^19.0.0",
2493
-
"react-dom": "^18.0.0 || ^19.0.0"
2494
-
},
2495
-
"peerDependenciesMeta": {
2496
-
"@emotion/is-prop-valid": {
2497
-
"optional": true
2498
-
},
2499
-
"react": {
2500
-
"optional": true
2501
-
},
2502
-
"react-dom": {
2503
-
"optional": true
2504
-
}
2505
-
}
2506
-
},
2507
-
"node_modules/motion-dom": {
2508
-
"version": "12.16.0",
2509
-
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.16.0.tgz",
2510
-
"integrity": "sha512-Z2nGwWrrdH4egLEtgYMCEN4V2qQt1qxlKy/uV7w691ztyA41Q5Rbn0KNGbsNVDZr9E8PD2IOQ3hSccRnB6xWzw==",
2511
-
"license": "MIT",
2512
-
"dependencies": {
2513
-
"motion-utils": "^12.12.1"
2514
-
}
2515
-
},
2516
-
"node_modules/motion-utils": {
2517
-
"version": "12.12.1",
2518
-
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.12.1.tgz",
2519
-
"integrity": "sha512-f9qiqUHm7hWSLlNW8gS9pisnsN7CRFRD58vNjptKdsqFLpkVnX00TNeD6Q0d27V9KzT7ySFyK1TZ/DShfVOv6w==",
2520
-
"license": "MIT"
2521
2521
},
2522
2522
"node_modules/ms": {
2523
2523
"version": "2.1.3",