This commit is contained in:
2026-04-13 00:32:23 -07:00
parent b1a769c84d
commit c7c6d1e6b5
17 changed files with 108 additions and 118 deletions

View File

@@ -7,3 +7,9 @@ bun.lockb
# Miscellaneous # Miscellaneous
/static/ /static/
# Cloudflare
worker-configuration.d.ts
# SpacetimeDB generated bindings
src/lib/st-bindings/*

View File

@@ -1,12 +1,9 @@
{ {
"useTabs": true, "useTabs": true,
"singleQuote": true, "singleQuote": false,
"trailingComma": "none", "trailingComma": "all",
"printWidth": 100, "printWidth": 100,
"plugins": [ "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"prettier-plugin-svelte",
"prettier-plugin-tailwindcss"
],
"tailwindStylesheet": "./src/routes/layout.css", "tailwindStylesheet": "./src/routes/layout.css",
"overrides": [ "overrides": [
{ {

View File

@@ -1,7 +1,3 @@
{ {
"recommendations": [ "recommendations": ["svelte.svelte-vscode", "bradlc.vscode-tailwindcss", "esbenp.prettier-vscode"]
"svelte.svelte-vscode",
"bradlc.vscode-tailwindcss",
"esbenp.prettier-vscode"
]
} }

View File

@@ -1,37 +1,34 @@
import { schema, table, t } from 'spacetimedb/server'; import { schema, table, t } from "spacetimedb/server";
const spacetimedb = schema({ const spacetimedb = schema({
person: table( person: table(
{ public: true }, { public: true },
{ {
name: t.string(), name: t.string(),
} },
), ),
}); });
export default spacetimedb; export default spacetimedb;
export const init = spacetimedb.init(_ctx => { export const init = spacetimedb.init((_ctx) => {
// Called when the module is initially published // Called when the module is initially published
}); });
export const onConnect = spacetimedb.clientConnected(_ctx => { export const onConnect = spacetimedb.clientConnected((_ctx) => {
// Called every time a new client connects // Called every time a new client connects
}); });
export const onDisconnect = spacetimedb.clientDisconnected(_ctx => { export const onDisconnect = spacetimedb.clientDisconnected((_ctx) => {
// Called every time a client disconnects // Called every time a client disconnects
}); });
export const add = spacetimedb.reducer( export const add = spacetimedb.reducer({ name: t.string() }, (ctx, { name }) => {
{ name: t.string() },
(ctx, { name }) => {
ctx.db.person.insert({ name }); ctx.db.person.insert({ name });
} });
);
export const sayHello = spacetimedb.reducer(ctx => { export const sayHello = spacetimedb.reducer((ctx) => {
for (const person of ctx.db.person.iter()) { for (const person of ctx.db.person.iter()) {
console.info(`Hello, ${person.name}!`); console.info(`Hello, ${person.name}!`);
} }
console.info('Hello, World!'); console.info("Hello, World!");
}); });

View File

@@ -1,31 +1,31 @@
<script lang="ts"> <script lang="ts">
import { env } from '$env/dynamic/public'; import { env } from "$env/dynamic/public";
import type { Identity } from 'spacetimedb'; import type { Identity } from "spacetimedb";
import { createSpacetimeDBProvider } from 'spacetimedb/svelte'; import { createSpacetimeDBProvider } from "spacetimedb/svelte";
import { DbConnection, type ErrorContext } from '$lib/st-bindings'; import { DbConnection, type ErrorContext } from "$lib/st-bindings";
import './layout.css'; import "./layout.css";
import favicon from '$lib/assets/favicon.svg'; import favicon from "$lib/assets/favicon.svg";
import { browser } from '$app/environment'; import { browser } from "$app/environment";
let { children } = $props(); let { children } = $props();
const HOST = env.PUBLIC_SPACETIMEDB_HOST ?? 'ws://localhost:3000'; const HOST = env.PUBLIC_SPACETIMEDB_HOST ?? "ws://localhost:3000";
const DB_NAME = env.PUBLIC_SPACETIMEDB_DB_NAME ?? 'svelte-ts'; const DB_NAME = env.PUBLIC_SPACETIMEDB_DB_NAME ?? "svelte-ts";
const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`; const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
console.log(HOST, DB_NAME, TOKEN_KEY); console.log(HOST, DB_NAME, TOKEN_KEY);
const onConnect = (_conn: DbConnection, identity: Identity, token: string) => { const onConnect = (_conn: DbConnection, identity: Identity, token: string) => {
if (browser) localStorage.setItem(TOKEN_KEY, token); if (browser) localStorage.setItem(TOKEN_KEY, token);
console.log('Connected to SpacetimeDB with identity:', identity.toHexString()); console.log("Connected to SpacetimeDB with identity:", identity.toHexString());
}; };
const onDisconnect = () => { const onDisconnect = () => {
console.log('Disconnected from SpacetimeDB'); console.log("Disconnected from SpacetimeDB");
}; };
const onConnectError = (_ctx: ErrorContext, err: Error) => { const onConnectError = (_ctx: ErrorContext, err: Error) => {
console.log('Error connecting to SpacetimeDB:', err); console.log("Error connecting to SpacetimeDB:", err);
}; };
const connectionBuilder = DbConnection.builder() const connectionBuilder = DbConnection.builder()

View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { useSpacetimeDB, useTable, useReducer } from 'spacetimedb/svelte'; import { useSpacetimeDB, useTable, useReducer } from "spacetimedb/svelte";
import { tables, reducers } from '$lib/st-bindings'; import { tables, reducers } from "$lib/st-bindings";
const conn = useSpacetimeDB(); const conn = useSpacetimeDB();
@@ -9,7 +9,7 @@
const addReducer = useReducer(reducers.add); const addReducer = useReducer(reducers.add);
let name = $state(''); let name = $state("");
function addPerson(e: SubmitEvent) { function addPerson(e: SubmitEvent) {
e.preventDefault(); e.preventDefault();
@@ -17,7 +17,7 @@
// Call the add reducer // Call the add reducer
addReducer({ name: name }); addReducer({ name: name });
name = ''; name = "";
} }
</script> </script>
@@ -27,7 +27,7 @@
<div style="margin-bottom: 1rem;"> <div style="margin-bottom: 1rem;">
Status: Status:
<strong style="color: {$conn.isActive ? 'green' : 'red'}"> <strong style="color: {$conn.isActive ? 'green' : 'red'}">
{$conn.isActive ? 'Connected' : 'Disconnected'} {$conn.isActive ? "Connected" : "Disconnected"}
</strong> </strong>
</div> </div>

View File

@@ -1 +1 @@
@import 'tailwindcss'; @import "tailwindcss";

View File

@@ -6,8 +6,8 @@ const config = {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter. // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters. // See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter() adapter: adapter(),
} },
}; };
export default config; export default config;

View File

@@ -11,10 +11,7 @@
"sourceMap": true, "sourceMap": true,
"strict": true, "strict": true,
"moduleResolution": "bundler", "moduleResolution": "bundler",
"types": [ "types": ["./src/worker-configuration.d.ts", "node"]
"./src/worker-configuration.d.ts",
"node"
]
} }
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files

View File

@@ -1,6 +1,6 @@
import devtoolsJson from 'vite-plugin-devtools-json'; import devtoolsJson from "vite-plugin-devtools-json";
import tailwindcss from '@tailwindcss/vite'; import tailwindcss from "@tailwindcss/vite";
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from 'vite'; import { defineConfig } from "vite";
export default defineConfig({ plugins: [tailwindcss(), sveltekit(), devtoolsJson()] }); export default defineConfig({ plugins: [tailwindcss(), sveltekit(), devtoolsJson()] });

View File

@@ -7,18 +7,15 @@
"name": "space-stream", "name": "space-stream",
"main": ".svelte-kit/cloudflare/_worker.js", "main": ".svelte-kit/cloudflare/_worker.js",
"compatibility_date": "2026-04-11", "compatibility_date": "2026-04-11",
"compatibility_flags": [ "compatibility_flags": ["nodejs_compat", "nodejs_als"],
"nodejs_compat",
"nodejs_als"
],
"assets": { "assets": {
"binding": "ASSETS", "binding": "ASSETS",
"directory": ".svelte-kit/cloudflare" "directory": ".svelte-kit/cloudflare",
}, },
"observability": { "observability": {
"enabled": true "enabled": true,
}, },
"upload_source_maps": true "upload_source_maps": true,
/** /**
* Smart Placement * Smart Placement
* https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement * https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement