{"id":23665029,"url":"https://github.com/stolinski/zero-svelte","last_synced_at":"2025-04-06T00:07:09.909Z","repository":{"id":269084183,"uuid":"870170323","full_name":"stolinski/zero-svelte","owner":"stolinski","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-26T18:32:18.000Z","size":492,"stargazers_count":114,"open_issues_count":6,"forks_count":15,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-04T14:41:02.859Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stolinski.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-09T15:05:29.000Z","updated_at":"2025-04-01T18:49:00.000Z","dependencies_parsed_at":"2025-02-28T05:05:30.054Z","dependency_job_id":"1a813dca-8863-4397-aba9-2e9a8deee7d2","html_url":"https://github.com/stolinski/zero-svelte","commit_stats":null,"previous_names":["stolinski/zero-svelte"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stolinski%2Fzero-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stolinski%2Fzero-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stolinski%2Fzero-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stolinski%2Fzero-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stolinski","download_url":"https://codeload.github.com/stolinski/zero-svelte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247415967,"owners_count":20935388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-29T05:44:17.993Z","updated_at":"2025-04-06T00:07:09.884Z","avatar_url":"https://github.com/stolinski.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Zero Svelte\n\nZero is the local first platform for building incredible, super fast apps.\n\nTo use Zero Svelte, you need to follow the Zero docs to get started.\n\nWatch this\n[Zero Sync Makes Local First Easy](https://www.youtube.com/watch?v=hAxdOUgjctk\u0026ab_channel=Syntax)\n\n[\u003cimg src=\"./zero1.png\"\u003e](https://www.youtube.com/watch?v=hAxdOUgjctk\u0026ab_channel=Syntax)\n\n## Usage\n\n1. Follow [ZERO DOCS](https://zero.rocicorp.dev/docs/introduction) to get started with Zero\n1. Install `npm install zero-svelte`\n1. Usage\n\nlib/z.svelte.ts (or whatever you'd like to name)\n\n```ts\nimport { PUBLIC_SERVER } from '$env/static/public';\nimport { Z } from 'zero-svelte';\nimport { schema, type Schema } from '../zero-schema.js';\n// Schema is imported from wherever your Schema type lives.\n// via export type Schema = typeof schema;\n\nexport function get_z_options() {\n\treturn {\n\t\tuserID: 'anon',\n\t\tserver: PUBLIC_SERVER,\n\t\tschema,\n\t\t// ... other options\n\t} as const;\n}\n\nexport const z = new Z\u003cSchema\u003e(get_z_options());\n```\n\n+layout.server.ts\n\n```ts\nexport const ssr = false;\n```\n\n+page.svelte\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { Query } from 'zero-svelte';\n\timport { z } from '$lib/z.svelte';\n\n\tconst todos = new Query(z.current.query.todo);\n\n\tconst randID = () =\u003e Math.random().toString(36).slice(2);\n\n\tfunction onsubmit(event: Event) {\n\t\tevent.preventDefault();\n\t\tconst formData = new FormData(event.target as HTMLFormElement);\n\t\tconst newTodo = formData.get('newTodo') as string;\n\t\tconst id = randID();\n\t\tif (newTodo) {\n\t\t\tz.current.mutate.todo.insert({ id, title: newTodo, completed: false });\n\t\t\t(event.target as HTMLFormElement).reset();\n\t\t}\n\t}\n\n\tfunction toggleTodo(event: Event) {\n\t\tconst checkbox = event.target as HTMLInputElement;\n\t\tconst id = checkbox.value;\n\t\tconst completed = checkbox.checked;\n\t\tz.current.mutate.todo.update({ id, completed });\n\t}\n\u003c/script\u003e\n\n\u003cdiv\u003e\n\t\u003ch1\u003eTodo\u003c/h1\u003e\n\t\u003cform {onsubmit}\u003e\n\t\t\u003cinput type=\"text\" id=\"newTodo\" name=\"newTodo\" /\u003e\n\t\t\u003cbutton type=\"submit\"\u003eAdd\u003c/button\u003e\n\t\u003c/form\u003e\n\t\u003cul\u003e\n\t\t{#each todos.current as todo}\n\t\t\t\u003cli\u003e\n\t\t\t\t\u003cinput\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue={todo.id}\n\t\t\t\t\tchecked={todo.completed}\n\t\t\t\t\toninput={toggleTodo}\n\t\t\t\t/\u003e{todo.title}\n\t\t\t\u003c/li\u003e\n\t\t{/each}\n\t\u003c/ul\u003e\n\u003c/div\u003e\n```\n\n\"todos\" here is now reactive and will stay in sync with the persistent db and local data.\n\nMutations \u0026 queries are done with just standard Zero.\n\n```javascript\nz.current.mutate.todo.update({ id, completed });\n```\n\nSee demo for real working code.\n\nSee Zero docs for more info.\n\nListen to [Syntax](Syntax.fm) for tasty web development treats.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstolinski%2Fzero-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstolinski%2Fzero-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstolinski%2Fzero-svelte/lists"}