https://github.com/stolinski/zero-svelte
https://github.com/stolinski/zero-svelte
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/stolinski/zero-svelte
- Owner: stolinski
- Created: 2024-10-09T15:05:29.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-03-26T18:32:18.000Z (3 months ago)
- Last Synced: 2025-04-04T14:41:02.859Z (3 months ago)
- Language: TypeScript
- Size: 480 KB
- Stars: 114
- Watchers: 6
- Forks: 15
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Zero Svelte
Zero is the local first platform for building incredible, super fast apps.
To use Zero Svelte, you need to follow the Zero docs to get started.
Watch this
[Zero Sync Makes Local First Easy](https://www.youtube.com/watch?v=hAxdOUgjctk&ab_channel=Syntax)
[
](https://www.youtube.com/watch?v=hAxdOUgjctk&ab_channel=Syntax)
## Usage
1. Follow [ZERO DOCS](https://zero.rocicorp.dev/docs/introduction) to get started with Zero
1. Install `npm install zero-svelte`
1. Usage
lib/z.svelte.ts (or whatever you'd like to name)
```ts
import { PUBLIC_SERVER } from '$env/static/public';
import { Z } from 'zero-svelte';
import { schema, type Schema } from '../zero-schema.js';
// Schema is imported from wherever your Schema type lives.
// via export type Schema = typeof schema;
export function get_z_options() {
return {
userID: 'anon',
server: PUBLIC_SERVER,
schema,
// ... other options
} as const;
}
export const z = new Z(get_z_options());
```
+layout.server.ts
```ts
export const ssr = false;
```
+page.svelte
```svelte
import { Query } from 'zero-svelte';
import { z } from '$lib/z.svelte';
const todos = new Query(z.current.query.todo);
const randID = () => Math.random().toString(36).slice(2);
function onsubmit(event: Event) {
event.preventDefault();
const formData = new FormData(event.target as HTMLFormElement);
const newTodo = formData.get('newTodo') as string;
const id = randID();
if (newTodo) {
z.current.mutate.todo.insert({ id, title: newTodo, completed: false });
(event.target as HTMLFormElement).reset();
}
}
function toggleTodo(event: Event) {
const checkbox = event.target as HTMLInputElement;
const id = checkbox.value;
const completed = checkbox.checked;
z.current.mutate.todo.update({ id, completed });
}
Todo
Add
{#each todos.current as todo}
-
{todo.title}
{/each}
```
"todos" here is now reactive and will stay in sync with the persistent db and local data.
Mutations & queries are done with just standard Zero.
```javascript
z.current.mutate.todo.update({ id, completed });
```
See demo for real working code.
See Zero docs for more info.
Listen to [Syntax](Syntax.fm) for tasty web development treats.