{"id":14962706,"url":"https://github.com/rdb/svelte-meteor-data","last_synced_at":"2025-10-25T00:30:34.032Z","repository":{"id":43864940,"uuid":"257102405","full_name":"rdb/svelte-meteor-data","owner":"rdb","description":"Reactively track Meteor data inside Svelte components","archived":false,"fork":false,"pushed_at":"2023-07-14T11:19:32.000Z","size":31,"stargazers_count":16,"open_issues_count":4,"forks_count":8,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-01-31T04:31:52.224Z","etag":null,"topics":["meteor","meteor-package","meteorjs","svelte","svelte-js","svelte-v3","svelte3","sveltejs"],"latest_commit_sha":null,"homepage":"https://atmospherejs.com/rdb/svelte-meteor-data","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rdb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2020-04-19T21:07:23.000Z","updated_at":"2023-07-16T18:16:38.000Z","dependencies_parsed_at":"2024-09-22T15:00:38.148Z","dependency_job_id":null,"html_url":"https://github.com/rdb/svelte-meteor-data","commit_stats":{"total_commits":19,"total_committers":3,"mean_commits":6.333333333333333,"dds":"0.10526315789473684","last_synced_commit":"e1d34178c63f55d7645fc28213027931b2ca3a51"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rdb%2Fsvelte-meteor-data","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rdb%2Fsvelte-meteor-data/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rdb%2Fsvelte-meteor-data/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rdb%2Fsvelte-meteor-data/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rdb","download_url":"https://codeload.github.com/rdb/svelte-meteor-data/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238046802,"owners_count":19407617,"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":["meteor","meteor-package","meteorjs","svelte","svelte-js","svelte-v3","svelte3","sveltejs"],"created_at":"2024-09-24T13:30:24.047Z","updated_at":"2025-10-25T00:30:33.504Z","avatar_url":"https://github.com/rdb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `svelte-meteor-data`\n\nThis package integrates the [Svelte](https://svelte.dev) UI framework with\nMeteor's Tracker system.  It makes it easy to write Svelte components which\nreact automatically to changes in Meteor's data layer.\n\nThis package is still experimental.  Use at your peril.\n\n## Installation\n\nTo add Svelte to your Meteor app, run:\n\n```bash\nmeteor add svelte:compiler rdb:svelte-meteor-data\nmeteor npm install --save svelte@3.31.2\n```\n\n## Usage\n\nUnlike in Blaze, Svelte does not automatically become aware of changes to Meteor\nstate, even inside `$:` blocks.  This package provides some features that enable\nSvelte to become aware of such changes.\n\n### Reactive computations with `useTracker`\n\nThe `useTracker()` function can be used to expose any reactive computation as a\nSvelte store.  You need only pass a callable returning a computed value, which\nwill be run the first time it is used and then every time the computed value\nchanges.  The updated value is automatically made available to Svelte.\n\nFor example, this example makes the current Meteor user available in a\ncomponent, and causes Svelte to update the appropriate element automatically\nwhen the current user changes:\n\n```svelte\n\u003cscript\u003e\n  import { useTracker } from 'meteor/rdb:svelte-meteor-data';\n\n  const currentUser = useTracker(() =\u003e Meteor.user());\n\u003c/script\u003e\n\n\u003ch1\u003eWelcome {$currentUser.username}!\u003c/h1\u003e\n```\n\nYou can even mix Meteor reactivity with Svelte reactivity:\n\n```svelte\n\u003cscript\u003e\n  import { useTracker } from 'meteor/rdb:svelte-meteor-data';\n\n  let selectedUserId;\n\n  $: selectedUser = useTracker(() =\u003e Meteor.users.findOne(selectedUserId));\n\u003c/script\u003e\n\n\u003cp\u003eSelected {$selectedUser.username}\u003c/p\u003e\n```\n\n### Cursors\n\nWhile it's possible to use queries with `useTracker(() =\u003e query.fetch())`, this\npackage supports a more convenient way to handle reactive queries, by allowing\nyou to use a MongoDB cursor directly as a Svelte store:\n\n```svelte\n\u003cscript\u003e\n  export let fruitColor = 'blue';\n\n  $: fruits = Fruits.find({color: fruitColor});\n\u003c/script\u003e\n\n\u003cp\u003eShowing {$fruits.length} {fruitColor}-colored fruits:\u003c/p\u003e\n\u003cul\u003e\n  {#each $fruits as fruit}\n    \u003cli\u003e{fruit.name}\u003c/li\u003e\n  {/each}\n\u003c/ul\u003e\n```\n\n### Subscriptions\n\nYou can safely use `Meteor.subscribe` in your components without worrying about\nclean-up.  The subscription will be stopped automatically when the component is\ndestroyed.\n\nAs an added feature, you can use a subscription handle in an `{#await}` block:\n\n```svelte\n{#await Meteor.subscribe('todos')}\n  \u003cp\u003eLoading todos…\u003c/p\u003e\n{:then}\n  \u003cTodoList /\u003e\n{/await}\n```\n\n### Tracker.autorun\n\nIt is possible to use `Tracker.autorun()` with a function that is automatically\nre-run when its Meteor dependencies change.  It will stop being updated when the\ncomponent is destroyed.  This will work fine for top-level computations that do\nnot depend on any dynamic Svelte state, such as in this example:\n\n```svelte\n\u003cscript\u003e\n  let currentUser;\n\n  Tracker.autorun(() =\u003e {\n    currentUser = Meteor.user();\n  });\n\u003c/script\u003e\n```\n\nTo make the autorun also respond to Svelte state changes, you need to put it\nunder a `$:` block.  This will work, but with some caveats: if the Tracker state\nis invalidated right after a change to the Svelte state, all `$:` blocks will be\nre-run.  It is therefore better to use `useTracker` instead, as listed above.\n\n### ReactiveVar\n\nA Meteor ReactiveVar will work seamlessly as a Svelte store, and can be accessed\nand bound like any writable store using the `$` operator:\n\n```svelte\n\u003cscript\u003e\n  import { ReactiveVar } from 'meteor/reactive-var';\n\n  const store = new ReactiveVar(\"initial\");\n\u003c/script\u003e\n\n\u003cinput type=\"text\" bind:value={$store} /\u003e\n\n\u003cp\u003eValue is {$store}\u003c/p\u003e\n```\n\n### Session variables\n\nIf you are using Meteor [Session](https://docs.meteor.com/api/session.html)\nvariables, these can be exposed as a reactive Svelte store using the\n`useSession` hook.  The first argument is the session key to expose, and the\noptional second argument allows you to set a default value for the session\nvariable, as an added convenience.\n\nThis function is only available if the `session` package has been added.\n\n```svelte\n\u003cscript\u003e\n  import { useSession } from 'meteor/rdb:svelte-meteor-data';\n\n  const store = useSession('mySessionKey', 'initial');\n\n  // The above is equivalent to:\n  //Session.setDefault('mySessionKey', 'initial')\n  //const store = useSession('mySessionKey');\n\u003c/script\u003e\n\n\u003cinput type=\"text\" bind:value={$store} /\u003e\n\n\u003cp\u003eValue is {$store}\u003c/p\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frdb%2Fsvelte-meteor-data","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frdb%2Fsvelte-meteor-data","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frdb%2Fsvelte-meteor-data/lists"}