UNPKG

@syncedstore/svelte

Version:

Svelte helper for SyncedStore.

1 lines 2.16 kB
{"version":3,"file":"syncedstore-svelte.modern.mjs","sources":["../src/index.ts"],"sourcesContent":["import { readable } from \"svelte/store\";\nimport { Observer, reactive } from \"@reactivedata/reactive\";\n\n/**\n * Svelte helper to enable smart Reactive rerendering of your component.\n *\n * The usage of the return value is automatically tracked.\n * The component where you use this store is then rerendered automatically if any of the\n * used values change.\n *\n * e.g.:\n *\n * // Store setup:\n * const globalStore = SyncedStore({ people: [] });\n * globalStore.items.push({ name: \"Alice\" });\n * globalStore.items.push({ name: \"Bob\" });\n *\n * // In your component:\n * const store = svelteSyncedStore(globalStore);\n * <div>{$store.items[1].name}</div>\n *\n * Now, your component only rerenders when Bob's name changes\n * (or if the second element of the array changes)\n * \n * Binding values works also.\n * <input type=\"text\" bind:value={$store.items[1].name} />\n */\nexport function svelteSyncedStore<T>(syncedObject: T) {\n let set: any;\n const observer = new Observer(() => {\n if (set) {\n set(store);\n }\n });\n const store = reactive(syncedObject, observer);\n\n const readableStore = readable(store, (newSet) => {\n set = newSet;\n\n return () => {\n set = undefined;\n };\n });\n\n return {\n subscribe: readableStore.subscribe,\n set: () => {}\n }\n}\n"],"names":["svelteSyncedStore","syncedObject","set","observer","Observer","store","reactive","readableStore","readable","newSet","undefined","subscribe"],"mappings":";;;AAGA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACG,SAAUA,iBAAiB,CAAIC,YAAe,EAAA;AAClD,EAAA,IAAIC,GAAQ,CAAA;AACZ,EAAA,MAAMC,QAAQ,GAAG,IAAIC,QAAQ,CAAC,MAAK;AACjC,IAAA,IAAIF,GAAG,EAAE;MACPA,GAAG,CAACG,KAAK,CAAC,CAAA;AACX,KAAA;AACH,GAAC,CAAC,CAAA;AACF,EAAA,MAAMA,KAAK,GAAGC,QAAQ,CAACL,YAAY,EAAEE,QAAQ,CAAC,CAAA;AAE9C,EAAA,MAAMI,aAAa,GAAGC,QAAQ,CAACH,KAAK,EAAGI,MAAM,IAAI;AAC/CP,IAAAA,GAAG,GAAGO,MAAM,CAAA;AAEZ,IAAA,OAAO,MAAK;AACVP,MAAAA,GAAG,GAAGQ,SAAS,CAAA;KAChB,CAAA;AACH,GAAC,CAAC,CAAA;EAEF,OAAO;IACLC,SAAS,EAAEJ,aAAa,CAACI,SAAS;IAClCT,GAAG,EAAE,MAAK,EAAE;GACb,CAAA;AACH;;;;"}