this repo has no description
Beginning of signal work
+64
-8
+2
package.json
+2
package.json
+30
pnpm-lock.yaml
+30
pnpm-lock.yaml
···
30
30
specifier: ^6.3.7
31
31
version: 6.3.7
32
32
devDependencies:
33
+
'@preact/signals':
34
+
specifier: ^2.8.0
35
+
version: 2.8.0(preact@10.28.3)
33
36
'@types/masonry-layout':
34
37
specifier: ^4.2.8
35
38
version: 4.2.8
39
+
preact-portal:
40
+
specifier: ^1.1.3
41
+
version: 1.1.3(preact@10.28.3)
36
42
typescript:
37
43
specifier: 6.0.0-dev.20260213
38
44
version: 6.0.0-dev.20260213
···
53
59
54
60
'@popperjs/core@2.11.8':
55
61
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
62
+
63
+
'@preact/signals-core@1.13.0':
64
+
resolution: {integrity: sha512-slT6XeTCAbdql61GVLlGU4x7XHI7kCZV5Um5uhE4zLX4ApgiiXc0UYFvVOKq06xcovzp7p+61l68oPi563ARKg==}
65
+
66
+
'@preact/signals@2.8.0':
67
+
resolution: {integrity: sha512-lcILM82mei8s/53n2M6uZlrDHLlgLld8Squ0PVSUL5Ae1M45uEstWfHm+wcDqp2U5I/ZYrBvCY65udFyTo5OZw==}
68
+
peerDependencies:
69
+
preact: '>= 10.25.0 || >=11.0.0-0'
56
70
57
71
'@react-hook/debounce@3.0.0':
58
72
resolution: {integrity: sha512-ir/kPrSfAzY12Gre0sOHkZ2rkEmM4fS5M5zFxCi4BnCeXh2nvx9Ujd+U4IGpKCuPA+EQD0pg1eK2NGLvfWejag==}
···
113
127
peerDependencies:
114
128
react: '>=16.8'
115
129
130
+
preact-portal@1.1.3:
131
+
resolution: {integrity: sha512-rE0KG2b7ggIly4VVsSm7+WmQmG/EoUZzBOed2IbycyaFIArOvz+yab/8RBoDogA0JWZuTsbMTStR41Ghc+5m7Q==}
132
+
peerDependencies:
133
+
preact: '*'
134
+
116
135
preact@10.28.3:
117
136
resolution: {integrity: sha512-tCmoRkPQLpBeWzpmbhryairGnhW9tKV6c6gr/w+RhoRoKEJwsjzipwp//1oCpGPOchvSLaAPlpcJi9MwMmoPyA==}
118
137
···
163
182
'@essentials/raf': 1.2.0
164
183
165
184
'@popperjs/core@2.11.8': {}
185
+
186
+
'@preact/signals-core@1.13.0': {}
187
+
188
+
'@preact/signals@2.8.0(preact@10.28.3)':
189
+
dependencies:
190
+
'@preact/signals-core': 1.13.0
191
+
preact: 10.28.3
166
192
167
193
'@react-hook/debounce@3.0.0(react@19.2.4)':
168
194
dependencies:
···
231
257
raf-schd: 4.0.3
232
258
react: 19.2.4
233
259
trie-memoize: 1.2.0
260
+
261
+
preact-portal@1.1.3(preact@10.28.3):
262
+
dependencies:
263
+
preact: 10.28.3
234
264
235
265
preact@10.28.3: {}
236
266
+3
-3
public/helpers.d.ts
+3
-3
public/helpers.d.ts
···
1
1
declare const tippy: typeof import('tippy.js')['default'];
2
-
// declare const Masonry: typeof import('masonry-layout');
3
2
declare const preact: typeof import('preact');
4
3
declare const preactHooks: typeof import('preact/hooks');
5
4
declare const preactCompat: typeof import('preact/compat');
6
-
// declare const Tippy: typeof import('@tippyjs/react');
7
-
declare const Masonic: typeof import('masonic');
5
+
declare const Masonic: typeof import('masonic');
6
+
declare const preactSignals: typeof import('@preact/signals');
7
+
declare const preactPortal: typeof import('preact-portal');
+1
public/index.html
+1
public/index.html
···
596
596
<script src="https://unpkg.com/preact@10.28.3/compat/dist/compat.umd.js" defer></script>
597
597
<script src="https://unpkg.com/@preact/signals-core@1.13.0/dist/signals-core.min.js" defer></script>
598
598
<script src="https://unpkg.com/@preact/signals@2.8.0/dist/signals.min.js" defer></script>
599
+
<script src="https://unpkg.com/preact-portal@1.1.3/dist/preact-portal.js" defer></script>
599
600
<script src="./polyfill-react.js" defer></script>
600
601
<script src="https://unpkg.com/masonic@4.1.0/dist/umd/masonic.js" defer></script>
601
602
+28
-5
public/kinklist.js
+28
-5
public/kinklist.js
···
8
8
9
9
const { h, render, Fragment } = preact;
10
10
const { useState, useEffect, useReducer } = preactHooks;
11
+
const { signal, computed } = preactSignals;
12
+
const Portal = preactPortal;
11
13
12
14
const root = document.querySelector('#root');
13
15
const legend = document.querySelector('#legend');
···
77
79
return { kinkCategories, kinksById };
78
80
}
79
81
80
-
const { kinkCategories, kinksById } = parseKinks([...document.querySelectorAll('kinks')].map(e => e.textContent).join('\n'));
82
+
const kinkText = signal([...document.querySelectorAll('kinks')].map(e => e.textContent).join('\n'));
83
+
const kinkData = computed(() => parseKinks(kinkText.value));
81
84
82
85
/** @type {[id: string, name: string, color: string][]} */
83
86
const choiceOptions = [
···
110
113
* @returns {KinkCategory | undefined}
111
114
*/
112
115
function findKinkCategory(kink) {
113
-
for (const category of kinkCategories) {
116
+
for (const category of kinkData.value.kinkCategories) {
114
117
const index = category.kinks.indexOf(kink);
115
118
if (index !== -1) {
116
119
return category;
···
284
287
}
285
288
}
286
289
287
-
for (const kink of kinksById) {
290
+
for (const kink of kinkData.value.kinksById) {
288
291
const category = findKinkCategory(kink);
289
292
for (const participant of category.participants) {
290
293
pushNumber(choiceOptionIndices[getSelectedKinkOrDefault(kink, participant)]);
···
310
313
311
314
let isUpperHalf = false;
312
315
let index = 0;
313
-
for (const kink of kinksById) {
316
+
for (const kink of kinkData.value.kinksById) {
314
317
const category = findKinkCategory(kink);
315
318
for (const participant of category.participants) {
316
319
const byte = bytes[index];
···
568
571
569
572
function Root() {
570
573
return h(Masonic.Masonry, {
571
-
items: kinkCategories,
574
+
items: kinkData.value.kinkCategories,
575
+
// @ts-expect-error - bad typings
572
576
render: MasonryItem,
573
577
columnWidth: 460,
574
578
maxColumnCount: 8,
575
579
});
580
+
}
581
+
582
+
/**
583
+
* @param {{ children: import('preact').ComponentChildren, open: boolean }} props
584
+
*/
585
+
function Modal({ children, open }) {
586
+
return h(
587
+
Portal,
588
+
{ into: 'body' },
589
+
h(
590
+
'div',
591
+
{ class: `modal${open ? ' is-active' : ''}` },
592
+
[
593
+
h('div', { class: 'modal-background' }),
594
+
h('div', { class: 'modal-content' }, children),
595
+
h('button', { class: 'modal-close is-large', ariaLabel: 'close' })
596
+
]
597
+
)
598
+
);
576
599
}
577
600
578
601
render(h(Root, null), root);