Skip to content

Commit 6878ead

Browse files
atkgithub-actions[bot]
atk
authored and
github-actions[bot]
committed
Format
1 parent 8e7629c commit 6878ead

File tree

4 files changed

+115
-75
lines changed

4 files changed

+115
-75
lines changed

‎packages/db-store/README.md

+9-12
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ pnpm add @solid-primitives/db-store
2828
```ts
2929
const [dbStore, setDbStore] = createDbStore({
3030
adapter: supabaseAdapter(client),
31-
table: 'todos',
31+
table: "todos",
3232
filter: ({ userid }) => userid === user.id,
3333
onError: handleErrors,
3434
});
@@ -55,17 +55,16 @@ If any change could not be successfully committed to the database, the `onError`
5555
Your adapter must have the following properties:
5656

5757
```tsx
58-
export type DbAdapterUpdate<Row extends DbRow> =
59-
{ old?: Partial<Row>, new?: Partial<Row> };
58+
export type DbAdapterUpdate<Row extends DbRow> = { old?: Partial<Row>; new?: Partial<Row> };
6059

6160
export type DbAdapter<Row> = {
62-
insertSignal: () => DbAdapterUpdate<Row> | undefined,
63-
updateSignal: () => DbAdapterUpdate<Row> | undefined,
64-
deleteSignal: () => DbAdapterUpdate<Row> | undefined,
65-
init: () => Promise<Row[]>,
66-
insert: (data: DbAdapterUpdate<Row>) => PromiseLike<any>,
67-
update: (data: DbAdapterUpdate<Row>) => PromiseLike<any>,
68-
delete: (data: DbAdapterUpdate<Row>) => PromiseLike<any>
61+
insertSignal: () => DbAdapterUpdate<Row> | undefined;
62+
updateSignal: () => DbAdapterUpdate<Row> | undefined;
63+
deleteSignal: () => DbAdapterUpdate<Row> | undefined;
64+
init: () => Promise<Row[]>;
65+
insert: (data: DbAdapterUpdate<Row>) => PromiseLike<any>;
66+
update: (data: DbAdapterUpdate<Row>) => PromiseLike<any>;
67+
delete: (data: DbAdapterUpdate<Row>) => PromiseLike<any>;
6968
};
7069
```
7170

@@ -80,5 +79,3 @@ See [CHANGELOG.md](./CHANGELOG.md)
8079
## Plans
8180

8281
This is an early draft; in the future, more adapters are planned: mongodb, prism, firebase, aws?
83-
84-

‎packages/db-store/dev/index.tsx

+61-45
Original file line numberDiff line numberDiff line change
@@ -14,47 +14,62 @@ const TodoList = (props: { client: SupabaseClient }) => {
1414
const add = (task: string) => setTodos(todos.length, { task });
1515
return (
1616
<>
17-
<Show when={error()} keyed>
18-
{(err) => <p class="text-red-600">{`Error: ${err.message} Cause: ${err.cause} Action: ${err.action} Data: ${JSON.stringify(err.data)}`} ${err.server ? 'server' : 'client'} <button onClick={() => setError()}>ok</button></p>}
19-
</Show>
20-
<ul>
21-
<For
22-
each={Array.from(todos).toSorted((a, b) => Number(a.id) - Number(b.id))}
23-
fallback={<li>No to-dos yet</li>}
24-
>
25-
{item => (
26-
<li class="flex flex-row items-center" data-id={item.id}>
27-
<Show when={item === edit()} fallback={<span onClick={() => setEdit(item)}>{item.task}</span>}>
28-
<input name="update" value={item.task} /><button onClick={() => {
29-
const updated = (document.querySelector('[name="update"]') as HTMLInputElement).value;
30-
const index = todos.indexOf(item);
31-
if (updated && index > -1) setTodos(index, 'task', updated);
32-
setEdit(undefined);
33-
}}>update</button><button onClick={() => setEdit(undefined)}>cancel</button>
34-
</Show>{" "}
35-
<span role="button" class="p-2" onClick={() => done(item)} title="Done">
36-
x
37-
</span>
38-
</li>
17+
<Show when={error()} keyed>
18+
{err => (
19+
<p class="text-red-600">
20+
{`Error: ${err.message} Cause: ${err.cause} Action: ${err.action} Data: ${JSON.stringify(err.data)}`}{" "}
21+
${err.server ? "server" : "client"} <button onClick={() => setError()}>ok</button>
22+
</p>
3923
)}
40-
</For>
41-
<li class="flex flex-row items-center">
42-
<label>
43-
new task: <input name="task" />
44-
</label>{" "}
45-
<button
46-
onClick={() => {
47-
const task = (document.querySelector('[name="task"]') as HTMLInputElement).value;
48-
if (task) {
49-
add(task);
50-
(document.querySelector('[name="task"]') as HTMLInputElement).value = "";
51-
}
52-
}}
24+
</Show>
25+
<ul>
26+
<For
27+
each={Array.from(todos).toSorted((a, b) => Number(a.id) - Number(b.id))}
28+
fallback={<li>No to-dos yet</li>}
5329
>
54-
do it!
55-
</button>
56-
</li>
57-
</ul>
30+
{item => (
31+
<li class="flex flex-row items-center" data-id={item.id}>
32+
<Show
33+
when={item === edit()}
34+
fallback={<span onClick={() => setEdit(item)}>{item.task}</span>}
35+
>
36+
<input name="update" value={item.task} />
37+
<button
38+
onClick={() => {
39+
const updated = (document.querySelector('[name="update"]') as HTMLInputElement)
40+
.value;
41+
const index = todos.indexOf(item);
42+
if (updated && index > -1) setTodos(index, "task", updated);
43+
setEdit(undefined);
44+
}}
45+
>
46+
update
47+
</button>
48+
<button onClick={() => setEdit(undefined)}>cancel</button>
49+
</Show>{" "}
50+
<span role="button" class="p-2" onClick={() => done(item)} title="Done">
51+
x
52+
</span>
53+
</li>
54+
)}
55+
</For>
56+
<li class="flex flex-row items-center">
57+
<label>
58+
new task: <input name="task" />
59+
</label>{" "}
60+
<button
61+
onClick={() => {
62+
const task = (document.querySelector('[name="task"]') as HTMLInputElement).value;
63+
if (task) {
64+
add(task);
65+
(document.querySelector('[name="task"]') as HTMLInputElement).value = "";
66+
}
67+
}}
68+
>
69+
do it!
70+
</button>
71+
</li>
72+
</ul>
5873
</>
5974
);
6075
};
@@ -86,10 +101,11 @@ const App: Component = () => {
86101
Create a new database and note down the url and the key (that usually go into an
87102
environment)
88103
</li>
89-
<li>Within the database, create a table and configure it to be public, promote changes in realtime and has no row protection:
90-
91-
<pre><code>{
92-
`-- Create table
104+
<li>
105+
Within the database, create a table and configure it to be public, promote
106+
changes in realtime and has no row protection:
107+
<pre>
108+
<code>{`-- Create table
93109
create table todos (
94110
id serial primary key,
95111
task text
@@ -102,8 +118,8 @@ create policy "Allow anonymous access"
102118
on todos
103119
for select
104120
to anon
105-
using (true);`
106-
}</code></pre>
121+
using (true);`}</code>
122+
</pre>
107123
</li>
108124
<li>Fill in the url and key in the fields below and press "connect".</li>
109125
</ul>

‎packages/db-store/test/index.test.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -560,7 +560,7 @@ describe("createDbStore", () => {
560560
}),
561561
);
562562
});
563-
563+
564564
it.skip("deletes from the store from the database", () => {
565565
return createRoot(
566566
dispose =>
@@ -599,7 +599,7 @@ describe("createDbStore", () => {
599599
}),
600600
);
601601
});
602-
602+
603603
it.skip("handles error during deletion", () => {
604604
const originalResponse = mockSupabaseResponses.delete;
605605
const errorCause = { message: "server connection lost" };

‎packages/db-store/test/supabase-mock.ts

+43-16
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,56 @@
1-
import { RealtimePostgresChangesPayload, SupabaseClient } from '@supabase/supabase-js';
2-
import { vi } from 'vitest';
1+
import { RealtimePostgresChangesPayload, SupabaseClient } from "@supabase/supabase-js";
2+
import { vi } from "vitest";
33

4-
const mockSupabaseSubscribers: ((ev: RealtimePostgresChangesPayload<any>) => void)[] = []
4+
const mockSupabaseSubscribers: ((ev: RealtimePostgresChangesPayload<any>) => void)[] = [];
55

66
export const mockSupabaseClientEvents = {
77
insert: [] as Record<string, any>[],
88
update: [] as Record<string, any>[],
9-
delete: [] as Record<string, any>[]
9+
delete: [] as Record<string, any>[],
1010
};
1111

12-
export const mockSupabaseClientData = [{id: 1, data: 'one'}, {id: 2, data: 'two'}];
12+
export const mockSupabaseClientData = [
13+
{ id: 1, data: "one" },
14+
{ id: 2, data: "two" },
15+
];
1316

14-
let eqResponse: 'delete' | 'update' = 'update';
17+
let eqResponse: "delete" | "update" = "update";
1518

1619
export const mockSupabaseClient = {
17-
from: function() { return mockSupabaseClient; },
18-
select: function() { return Promise.resolve({ error: null, data: mockSupabaseClientData }); },
19-
channel: function() { return mockSupabaseClient; },
20-
on: function(_: any, __: any, handler: (ev: RealtimePostgresChangesPayload<any>) => void) { mockSupabaseSubscribers.push(handler); return mockSupabaseClient; },
21-
subscribe: function() { return mockSupabaseClient; },
22-
unsubscribe: function() { mockSupabaseSubscribers.length = 0; return mockSupabaseClient; },
23-
insert: vi.fn(function(_row: Record<string, any>) { return mockSupabaseResponses.insert; }),
24-
delete: function(_row: { id: string | number }) { eqResponse = 'delete'; return mockSupabaseClient; },
25-
update: vi.fn(function(_row: Record<string, any>) { eqResponse = 'update'; return mockSupabaseClient; }),
26-
eq: vi.fn(function(_row: { id: string | number }) { return mockSupabaseResponses[eqResponse]; }),
20+
from: function () {
21+
return mockSupabaseClient;
22+
},
23+
select: function () {
24+
return Promise.resolve({ error: null, data: mockSupabaseClientData });
25+
},
26+
channel: function () {
27+
return mockSupabaseClient;
28+
},
29+
on: function (_: any, __: any, handler: (ev: RealtimePostgresChangesPayload<any>) => void) {
30+
mockSupabaseSubscribers.push(handler);
31+
return mockSupabaseClient;
32+
},
33+
subscribe: function () {
34+
return mockSupabaseClient;
35+
},
36+
unsubscribe: function () {
37+
mockSupabaseSubscribers.length = 0;
38+
return mockSupabaseClient;
39+
},
40+
insert: vi.fn(function (_row: Record<string, any>) {
41+
return mockSupabaseResponses.insert;
42+
}),
43+
delete: function (_row: { id: string | number }) {
44+
eqResponse = "delete";
45+
return mockSupabaseClient;
46+
},
47+
update: vi.fn(function (_row: Record<string, any>) {
48+
eqResponse = "update";
49+
return mockSupabaseClient;
50+
}),
51+
eq: vi.fn(function (_row: { id: string | number }) {
52+
return mockSupabaseResponses[eqResponse];
53+
}),
2754
} as unknown as SupabaseClient;
2855

2956
export const mockSupabaseSendEvent = (ev: RealtimePostgresChangesPayload<any>) =>

0 commit comments

Comments
 (0)