Skip to content

Commit 59de7eb

Browse files
drogusdrogus
committed
wip
1 parent ffd2ce3 commit 59de7eb

31 files changed

Lines changed: 826 additions & 179 deletions

File tree

‎crates/bindings-typescript/examples/basic-react/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎crates/bindings-typescript/examples/basic-react/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>SpacetimeDB React App</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎crates/bindings-typescript/examples/basic-react/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@clockworklabs/basic-react",
3+
"private": true,
4+
"version": "0.0.1",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"preview": "vite preview",
10+
"local": "spacetime publish --project-path spacetimedb --server local && spacetime generate --lang typescript --out-dir src/module_bindings --project-path spacetimedb",
11+
"deploy": "spacetime publish --project-path spacetimedb && spacetime generate --lang typescript --out-dir src/module_bindings --project-path spacetimedb"
12+
},
13+
"dependencies": {
14+
"spacetimedb": "^1.5.0",
15+
"react": "^18.3.1",
16+
"react-dom": "^18.3.1"
17+
},
18+
"devDependencies": {
19+
"@types/react": "^18.3.18",
20+
"@types/react-dom": "^18.3.5",
21+
"@vitejs/plugin-react": "^5.0.2",
22+
"typescript": "~5.6.2",
23+
"vite": "^7.1.5"
24+
}
25+
}

‎crates/bindings-typescript/examples/basic-react/src/App.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { useState } from 'react'
2+
import { DbConnection, Person } from './module_bindings'
3+
import { useSpacetimeDB, useTable } from 'spacetimedb/react'
4+
5+
function App() {
6+
const [name, setName] = useState('')
7+
8+
const conn = useSpacetimeDB<DbConnection>()
9+
const { isActive: connected } = conn
10+
11+
// Subscribe to all people in the database
12+
const { rows: people } = useTable<DbConnection, Person>('person')
13+
14+
const addPerson = (e: React.FormEvent) => {
15+
e.preventDefault()
16+
if (!name.trim() || !connected) return
17+
18+
// Call the add reducer
19+
conn.reducers.add(name)
20+
setName('')
21+
}
22+
23+
return (
24+
<div style={{ padding: '2rem' }}>
25+
<h1>SpacetimeDB React App</h1>
26+
27+
<div style={{ marginBottom: '1rem' }}>
28+
Status: <strong style={{ color: connected ? 'green' : 'red' }}>
29+
{connected ? 'Connected' : 'Disconnected'}
30+
</strong>
31+
</div>
32+
33+
<form onSubmit={addPerson} style={{ marginBottom: '2rem' }}>
34+
<input
35+
type="text"
36+
placeholder="Enter name"
37+
value={name}
38+
onChange={(e) => setName(e.target.value)}
39+
style={{ padding: '0.5rem', marginRight: '0.5rem' }}
40+
disabled={!connected}
41+
/>
42+
<button
43+
type="submit"
44+
style={{ padding: '0.5rem 1rem' }}
45+
disabled={!connected}
46+
>
47+
Add Person
48+
</button>
49+
</form>
50+
51+
<div>
52+
<h2>People ({people.length})</h2>
53+
{people.length === 0 ? (
54+
<p>No people yet. Add someone above!</p>
55+
) : (
56+
<ul>
57+
{people.map((person, index) => (
58+
<li key={index}>{person.name}</li>
59+
))}
60+
</ul>
61+
)}
62+
</div>
63+
</div>
64+
)
65+
}
66+
67+
export default App

‎crates/bindings-typescript/examples/basic-react/src/main.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { StrictMode } from 'react'
2+
import { createRoot } from 'react-dom/client'
3+
import App from './App.tsx'
4+
import { Identity } from 'spacetimedb'
5+
import { SpacetimeDBProvider } from 'spacetimedb/react'
6+
import { DbConnection, ErrorContext } from './module_bindings/index.ts'
7+
8+
const onConnect = (conn: DbConnection, identity: Identity, token: string) => {
9+
localStorage.setItem('auth_token', token)
10+
console.log('Connected to SpacetimeDB with identity:', identity.toHexString())
11+
}
12+
13+
const onDisconnect = () => {
14+
console.log('Disconnected from SpacetimeDB')
15+
}
16+
17+
const onConnectError = (_ctx: ErrorContext, err: Error) => {
18+
console.log('Error connecting to SpacetimeDB:', err)
19+
}
20+
21+
const connectionBuilder = DbConnection.builder()
22+
.withUri('ws://localhost:3000')
23+
.withModuleName('spacetime-module')
24+
.withToken(localStorage.getItem('auth_token') || undefined)
25+
.onConnect(onConnect)
26+
.onDisconnect(onDisconnect)
27+
.onConnectError(onConnectError)
28+
29+
createRoot(document.getElementById('root')!).render(
30+
<StrictMode>
31+
<SpacetimeDBProvider connectionBuilder={connectionBuilder}>
32+
<App />
33+
</SpacetimeDBProvider>
34+
</StrictMode>,
35+
)

‎crates/bindings-typescript/examples/basic-react/tsconfig.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"useDefineForClassFields": true,
5+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
6+
"module": "ESNext",
7+
"skipLibCheck": true,
8+
9+
"moduleResolution": "bundler",
10+
"allowImportingTsExtensions": true,
11+
"isolatedModules": true,
12+
"moduleDetection": "force",
13+
"noEmit": true,
14+
"jsx": "react-jsx",
15+
16+
"strict": true,
17+
"noUnusedLocals": true,
18+
"noUnusedParameters": true,
19+
"noFallthroughCasesInSwitch": true,
20+
"noUncheckedSideEffectImports": true
21+
},
22+
"include": ["src"]
23+
}

‎crates/bindings-typescript/examples/basic-react/vite.config.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { defineConfig } from 'vite'
2+
import react from '@vitejs/plugin-react'
3+
4+
export default defineConfig({
5+
plugins: [react()],
6+
})

‎crates/bindings-typescript/examples/empty/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"spacetimedb": "workspace:*"
12+
"spacetimedb": "^1.5.0"
1313
},
1414
"devDependencies": {
1515
"typescript": "~5.6.2",

‎crates/bindings-typescript/examples/quickstart-chat/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"spacetime:publish": "spacetime publish chat --project-path server --server testnet"
1717
},
1818
"dependencies": {
19-
"spacetimedb": "workspace:*",
19+
"spacetimedb": "^1.5.0",
2020
"react": "^18.3.1",
2121
"react-dom": "^18.3.1"
2222
},

‎crates/cli/.init-templates.json‎

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,49 @@
11
{
2+
"highlights": [
3+
{ "name": "React", "template_id": "basic-react" },
4+
{ "name": "Unity", "template_id": "basic-unity" },
5+
{ "name": "Unreal", "template_id": "basic-unreal" }
6+
],
27
"templates": [
38
{
4-
"name": "Quickstart (Rust)",
9+
"id": "basic-rust",
10+
"description": "Bare minimum client and server using Rust with only stubs for code",
11+
"server_source": "clockworklabs/SpacetimeDB/crates/cli/templates/basic-rust/server",
12+
"client_source": "clockworklabs/SpacetimeDB/crates/cli/templates/basic-rust/client",
513
"server_lang": "rust",
6-
"client_lang": "rust",
7-
"server_source": "clockworklabs/SpacetimeDB/modules/quickstart-chat",
8-
"client_source": "clockworklabs/SpacetimeDB/./sdks/rust/examples/quickstart-chat"
14+
"client_lang": "rust"
915
},
16+
{
17+
"id": "basic-typescript",
18+
"description": "Bare minimum client and server using TypeScript with only stubs for code",
19+
"server_source": "clockworklabs/SpacetimeDB/crates/cli/templates/basic-typescript/server",
20+
"client_source": "clockworklabs/SpacetimeDB/crates/cli/templates/basic-typescript/client",
21+
"server_lang": "typescript",
22+
"client_lang": "typescript"
23+
},
24+
{
25+
"id": "basic-react",
26+
"description": "React web app with TypeScript server",
27+
"server_source": "clockworklabs/SpacetimeDB/crates/cli/templates/basic-react/server",
28+
"client_source": "clockworklabs/SpacetimeDB/crates/cli/templates/basic-react/client",
29+
"server_lang": "typescript",
30+
"client_lang": "typescript"
31+
},
32+
{
33+
"id": "quickstart-chat-rust",
34+
"description": "Rust server/client implementing quickstart chat",
35+
"server_source": "clockworklabs/SpacetimeDB/crates/cli/templates/quickstart-chat-rust/server",
36+
"client_source": "clockworklabs/SpacetimeDB/crates/cli/templates/quickstart-chat-rust/client",
37+
"server_lang": "rust",
38+
"client_lang": "rust"
39+
},
40+
{
41+
"id": "quickstart-chat-c-sharp",
42+
"description": "C# server/client implementing quickstart chat",
43+
"server_source": "clockworklabs/SpacetimeDB/crates/cli/templates/quickstart-chat-c-sharp/server",
44+
"client_source": "clockworklabs/SpacetimeDB/crates/cli/templates/quickstart-chat-c-sharp/client",
45+
"server_lang": "csharp",
46+
"client_lang": "csharp"
47+
}
1048
]
1149
}

0 commit comments

Comments
 (0)