Skip to content

Commit 4566fd8

Browse files
committed
chore: clean up livestore example
1 parent f2f7a9d commit 4566fd8

File tree

15 files changed

+119
-115
lines changed

15 files changed

+119
-115
lines changed

alchemy/src/cloudflare/worker-metadata.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import type {
1919
MultiStepMigration,
2020
SingleStepMigration,
2121
} from "./worker-migration.ts";
22-
import type { AssetsConfig, WorkerProps } from "./worker.ts";
22+
import { type AssetsConfig, type WorkerProps } from "./worker.ts";
2323

2424
/**
2525
* Metadata returned by Cloudflare API for a worker script

alchemy/src/cloudflare/worker.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -704,7 +704,7 @@ export function Worker<const B extends Bindings>(
704704
return _Worker(id, props as WorkerProps<B>);
705705
}
706706

707-
export const _Worker = Resource(
707+
const _Worker = Resource(
708708
"cloudflare::Worker",
709709
{
710710
alwaysUpdate: true,

examples/cloudflare-livestore/alchemy.run.ts

Lines changed: 12 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,26 @@
11
/// <reference types="@types/node" />
22

33
import alchemy from "alchemy";
4-
import {
5-
D1Database,
6-
DurableObjectNamespace,
7-
Vite,
8-
Worker,
9-
} from "alchemy/cloudflare";
4+
import { D1Database, DurableObjectNamespace, Vite } from "alchemy/cloudflare";
105

116
const app = await alchemy("cloudflare-livestore");
127

13-
export const server = await Worker("server", {
14-
name: `${app.name}-${app.stage}-server`,
15-
entrypoint: "src/cf-worker/index.ts",
8+
const db = await D1Database("db", {
9+
name: `${app.name}-${app.stage}-livestore`,
10+
adopt: true,
11+
});
12+
13+
export const server = await Vite("server", {
14+
assets: "dist",
15+
main: "src/livestore/server.ts",
16+
wrangler: false,
17+
compatibility: "node",
1618
bindings: {
17-
DB: await D1Database("db", {
18-
name: `${app.name}-${app.stage}-livestore-sync-cf-demo`,
19-
adopt: true,
20-
}),
19+
DB: db,
2120
WEBSOCKET_SERVER: DurableObjectNamespace("websocket-server", {
2221
className: "WebSocketServer",
2322
}),
2423
},
25-
compatibilityFlags: ["nodejs_compat"],
26-
compatibilityDate: "2025-05-08",
27-
});
28-
29-
export const client = await Vite("client", {
30-
assets: "dist",
31-
command: "bun vite build",
32-
dev: {
33-
command: "bun vite --force",
34-
},
35-
env: {
36-
VITE_LIVESTORE_SYNC_URL: server.url!,
37-
},
38-
wrangler: false,
3924
});
4025

4126
console.log(`server.url: ${server.url}`);

examples/cloudflare-livestore/index.html

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@
22
<head>
33
<title>TodoMVC + LiveStore</title>
44
<!-- Preconnect to sync backend to speed up initial connection -->
5-
<link rel="preconnect" href="%VITE_LIVESTORE_SYNC_URL%" />
5+
<script>
6+
// Dynamically insert preconnect link using window.location.hostname
7+
const preconnectUrl = `https://${window.location.hostname}`;
8+
const link = document.createElement('link');
9+
link.rel = 'preconnect';
10+
link.href = preconnectUrl;
11+
document.head.appendChild(link);
12+
</script>
613
</head>
714
<body>
815
<div id="react-app"></div>

examples/cloudflare-livestore/src/Root.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import { unstable_batchedUpdates as batchUpdates } from 'react-dom'
88
import { Footer } from './components/Footer.js'
99
import { Header } from './components/Header.js'
1010
import { MainSection } from './components/MainSection.js'
11-
import LiveStoreWorker from './livestore.worker?worker'
1211
import { schema } from './livestore/schema.js'
12+
import LiveStoreWorker from './livestore/worker.ts?worker'
1313
import { getStoreId } from './util/store-id.js'
1414

1515
const AppBody: React.FC = () => (

examples/cloudflare-livestore/src/components/Footer.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { queryDb } from '@livestore/livestore'
2-
import { useStore } from '@livestore/react'
31
import React from 'react'
42

5-
import { uiState$ } from '../livestore/queries.js'
6-
import { events, tables } from '../livestore/schema.js'
3+
import { queryDb } from '@livestore/livestore'
4+
import { useStore } from '@livestore/react'
5+
import { events } from '../livestore/events.ts'
6+
import { uiState$ } from '../livestore/queries.ts'
7+
import { tables } from '../livestore/tables.ts'
78

89
const incompleteCount$ = queryDb(tables.todos.count().where({ completed: false, deletedAt: null }), {
910
label: 'incompleteCount',

examples/cloudflare-livestore/src/components/Header.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useStore } from '@livestore/react'
22
import React from 'react'
33

4-
import { uiState$ } from '../livestore/queries.js'
5-
import { events } from '../livestore/schema.js'
4+
import { events } from '../livestore/events.ts'
5+
import { uiState$ } from '../livestore/queries.ts'
66

77
export const Header: React.FC = () => {
88
const { store } = useStore()

examples/cloudflare-livestore/src/components/MainSection.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { queryDb } from '@livestore/livestore'
22
import { useStore } from '@livestore/react'
33
import React from 'react'
44

5-
import { uiState$ } from '../livestore/queries.js'
6-
import { events, tables } from '../livestore/schema.js'
5+
import { events } from '../livestore/events.ts'
6+
import { uiState$ } from '../livestore/queries.ts'
7+
import { tables } from '../livestore/tables.ts'
78

89
const visibleTodos$ = queryDb(
910
(get) => {
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Events, Schema } from "@livestore/livestore";
2+
import { tables } from "./tables.ts";
3+
4+
// Events describe data changes (https://docs.livestore.dev/reference/events)
5+
export const events = {
6+
todoCreated: Events.synced({
7+
name: "v1.TodoCreated",
8+
schema: Schema.Struct({ id: Schema.String, text: Schema.String }),
9+
}),
10+
todoCompleted: Events.synced({
11+
name: "v1.TodoCompleted",
12+
schema: Schema.Struct({ id: Schema.String }),
13+
}),
14+
todoUncompleted: Events.synced({
15+
name: "v1.TodoUncompleted",
16+
schema: Schema.Struct({ id: Schema.String }),
17+
}),
18+
todoDeleted: Events.synced({
19+
name: "v1.TodoDeleted",
20+
schema: Schema.Struct({ id: Schema.String, deletedAt: Schema.Date }),
21+
}),
22+
todoClearedCompleted: Events.synced({
23+
name: "v1.TodoClearedCompleted",
24+
schema: Schema.Struct({ deletedAt: Schema.Date }),
25+
}),
26+
uiStateSet: tables.uiState.set,
27+
};
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { State } from "@livestore/livestore";
2+
import { events } from "./events.ts";
3+
import { tables } from "./tables.ts";
4+
5+
// Materializers are used to map events to state (https://docs.livestore.dev/reference/state/materializers)
6+
export const materializers = State.SQLite.materializers(events, {
7+
"v1.TodoCreated": ({ id, text }) =>
8+
tables.todos.insert({ id, text, completed: false }),
9+
"v1.TodoCompleted": ({ id }) =>
10+
tables.todos.update({ completed: true }).where({ id }),
11+
"v1.TodoUncompleted": ({ id }) =>
12+
tables.todos.update({ completed: false }).where({ id }),
13+
"v1.TodoDeleted": ({ id, deletedAt }) =>
14+
tables.todos.update({ deletedAt }).where({ id }),
15+
"v1.TodoClearedCompleted": ({ deletedAt }) =>
16+
tables.todos.update({ deletedAt }).where({ completed: true }),
17+
});

0 commit comments

Comments
 (0)