@channel-state/vue
Version:
Vue composables for channel-state, providing seamless integration with Vue applications for cross-context state management.
1 lines • 3.28 kB
Source Map (JSON)
{"version":3,"sources":["../src/index.ts"],"names":["ref","onUnmounted","computed"],"mappings":";;;;;AAgCO,SAAS,gBAAmB,KAAA,EAAwB;AACzD,EAAA,MAAM,KAAA,GAAQA,OAAA,CAAI,KAAA,CAAM,GAAA,EAAK,CAAA;AAE7B,EAAA,MAAM,WAAA,GAAc,KAAA,CAAM,SAAA,CAAU,CAAC,KAAA,KAAU;AAC7C,IAAA,KAAA,CAAM,KAAA,GAAQ,KAAA;AAAA,GACf,CAAA;AAED,EAAAC,eAAA,CAAY,MAAM;AAChB,IAAA,WAAA,EAAY;AAAA,GACb,CAAA;AAED,EAAA,OAAOC,YAAA,CAAY;AAAA,IACjB,GAAA,GAAM;AACJ,MAAA,OAAO,KAAA,CAAM,KAAA;AAAA,KACf;AAAA,IACA,IAAI,QAAA,EAAa;AACf,MAAA,KAAA,CAAM,IAAI,QAAQ,CAAA;AAAA;AACpB,GACD,CAAA;AACH;AAQO,SAAS,iBAAiB,KAAA,EAA8B;AAC7D,EAAA,MAAM,MAAA,GAASF,OAAA,CAAI,KAAA,CAAM,MAAM,CAAA;AAE/B,EAAA,MAAM,iBAAA,GAAoB,KAAA,CAAM,eAAA,CAAgB,CAAC,SAAA,KAAc;AAC7D,IAAA,MAAA,CAAO,KAAA,GAAQ,SAAA;AAAA,GAChB,CAAA;AAED,EAAAC,eAAA,CAAY,MAAM;AAChB,IAAA,iBAAA,EAAkB;AAAA,GACnB,CAAA;AAED,EAAA,OAAO,MAAA;AACT","file":"index.cjs","sourcesContent":["/*\n * Copyright 2025 ronny1020\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * @module @channel-state/vue\n * @description Provides a Vue Composition API hook for integrating with ChannelStore.\n */\nimport { ref, onUnmounted, computed } from 'vue'\nimport { ChannelStore } from '@channel-state/core'\n\n/**\n * A Vue Composition API hook that provides a reactive reference to a ChannelStore's state.\n * The returned `Ref` can be used directly in Vue templates and will automatically update\n * when the store's state changes (either locally or from other tabs/windows).\n * @template T The type of the state managed by the ChannelStore.\n * @param store The ChannelStore instance to connect to.\n * @returns A `Ref` object that represents the current state of the ChannelStore.\n * Assigning a new value to this `Ref` will update the ChannelStore's state.\n */\nexport function useChannelState<T>(store: ChannelStore<T>) {\n const state = ref(store.get())\n\n const unsubscribe = store.subscribe((value) => {\n state.value = value\n })\n\n onUnmounted(() => {\n unsubscribe()\n })\n\n return computed<T>({\n get() {\n return state.value as T\n },\n set(newValue: T) {\n store.set(newValue)\n },\n })\n}\n\n/**\n * A Vue Composition API hook that provides a reactive reference to a ChannelStore's status.\n * The returned `Ref` reflects the current lifecycle status of the ChannelStore.\n * @param store The ChannelStore instance to connect to.\n * @returns A `Ref` object that represents the current status of the ChannelStore.\n */\nexport function useChannelStatus(store: ChannelStore<unknown>) {\n const status = ref(store.status)\n\n const unsubscribeStatus = store.subscribeStatus((newStatus) => {\n status.value = newStatus\n })\n\n onUnmounted(() => {\n unsubscribeStatus()\n })\n\n return status\n}\n"]}