{"_id":"@dreamfusion/pollen-vue","name":"@dreamfusion/pollen-vue","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@dreamfusion/pollen-vue","version":"2.0.0","description":"Vue 3 composables for Pollen 2.0 reactive framework","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"}},"scripts":{"build":"tsc && vite build","test":"vitest"},"keywords":["vue","vue3","composables","pollen","reactive","state-management"],"author":{"name":"dreamfusion"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/bentrain/pollen.git"},"peerDependencies":{"@dreamfusion/pollen":"^2.0.0","vue":"^3.0.0"},"devDependencies":{"@vitejs/plugin-vue":"^5.0.0","typescript":"^5.3.0","vite":"^5.0.0","vite-plugin-dts":"^3.7.0","vitest":"^1.1.0","vue":"^3.4.0"},"_id":"@dreamfusion/pollen-vue@2.0.0","bugs":{"url":"https://github.com/bentrain/pollen/issues"},"homepage":"https://github.com/bentrain/pollen#readme","_nodeVersion":"22.13.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-lFtirtHG2Wq7Tnk/SGDPrWPrpnqSG5xCe92VIDNFVApZvjD5+Cqac/5lfKAABKrLggrNJTR0H/OWF+cN0tNsnw==","shasum":"b5c4cd1d6ddb742ccca1acb08009fac8eebd1911","tarball":"https://registry.npmjs.org/@dreamfusion/pollen-vue/-/pollen-vue-2.0.0.tgz","fileCount":8,"unpackedSize":33722,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID7U1dpDNXEAG3KqbAVpRyxRiAS/wpDNza03U07F3GCpAiEAxbFbulcSTaUqkkwwEIlHGLZN96pBRlZWYNPDMUwBYgk="}]},"_npmUser":{"name":"dreamfusion","email":"dream909@gmail.com"},"directories":{},"maintainers":[{"name":"dreamfusion","email":"dream909@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/pollen-vue_2.0.0_1764865079264_0.10640198167392056"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-04T16:17:59.167Z","2.0.0":"2025-12-04T16:17:59.405Z","modified":"2025-12-04T16:17:59.744Z"},"maintainers":[{"name":"dreamfusion","email":"dream909@gmail.com"}],"description":"Vue 3 composables for Pollen 2.0 reactive framework","homepage":"https://github.com/bentrain/pollen#readme","keywords":["vue","vue3","composables","pollen","reactive","state-management"],"repository":{"type":"git","url":"git+https://github.com/bentrain/pollen.git"},"author":{"name":"dreamfusion"},"bugs":{"url":"https://github.com/bentrain/pollen/issues"},"license":"MIT","readme":"# @dreamfusion/pollen-vue\n\nVue 3 composables for [Pollen 2.0](https://github.com/bentrain/pollen) reactive framework.\n\n## Installation\n\n```bash\nnpm install @dreamfusion/pollen @dreamfusion/pollen-vue\n```\n\n## Quick Start\n\n```vue\n<script setup>\nimport { useCounter, useStore, useDebounce } from '@dreamfusion/pollen-vue';\n\nconst { value, increment, decrement, reset } = useCounter(0, 1);\n\nconst { value: query, setValue: setQuery } = useStore('');\nconst debouncedQuery = useDebounce(query, 500);\n</script>\n\n<template>\n  <div>\n    <h1>{{ value }}</h1>\n    <button @click=\"increment\">+</button>\n    <button @click=\"decrement\">-</button>\n    <button @click=\"reset\">Reset</button>\n    \n    <input \n      :value=\"query\" \n      @input=\"setQuery($event.target.value)\"\n      placeholder=\"Search...\"\n    />\n    <p>Searching for: {{ debouncedQuery }}</p>\n  </div>\n</template>\n```\n\n## Composables\n\n### usePollen\n\nCreate a pollinated object and manage its lifecycle with Vue.\n\n```vue\n<script setup>\nimport { usePollen, useNode } from '@dreamfusion/pollen-vue';\n\nconst state = usePollen(() => ({}), {\n  count: {\n    type: 'number',\n    get: () => 0,\n    set: (v) => {}\n  }\n});\n\nconst count = useNode(state, 'count');\n</script>\n```\n\n### useNode\n\nSubscribe to a single node value as a Vue ref.\n\n```vue\n<script setup>\nconst value = useNode(pollinated, 'nodeName');\n</script>\n```\n\n### useSetNode\n\nGet a setter function for a node.\n\n```vue\n<script setup>\nconst setValue = useSetNode(pollinated, 'nodeName');\nsetValue(42);\n</script>\n```\n\n### useNodes\n\nSubscribe to multiple nodes as Vue refs.\n\n```vue\n<script setup>\nconst { count, name, active } = useNodes(pollinated, ['count', 'name', 'active']);\n</script>\n```\n\n### useConnection\n\nCreate a connection between two pollinated objects.\n\n```vue\n<script setup>\nuseConnection(source, 'output', target, 'input', (value) => value * 2);\n</script>\n```\n\n### useFactory\n\nCreate a factory component and manage its lifecycle.\n\n```vue\n<script setup>\nconst counter = useFactory('logic.counter');\n</script>\n```\n\n### useCounter\n\nCreate a counter with increment, decrement, and reset.\n\n```vue\n<script setup>\nconst { value, increment, decrement, reset } = useCounter(0, 1);\n</script>\n\n<template>\n  <div>\n    <h1>{{ value }}</h1>\n    <button @click=\"increment\">+</button>\n    <button @click=\"decrement\">-</button>\n    <button @click=\"reset\">Reset</button>\n  </div>\n</template>\n```\n\n### useStore\n\nCreate a simple value store.\n\n```vue\n<script setup>\nconst { value, setValue } = useStore(initialValue);\n</script>\n```\n\n### useDebounce\n\nCreate a debounced value.\n\n```vue\n<script setup>\nimport { ref } from 'vue';\nconst searchQuery = ref('');\nconst debouncedQuery = useDebounce(searchQuery, 300);\n</script>\n```\n\n### useThrottle\n\nCreate a throttled value.\n\n```vue\n<script setup>\nimport { ref } from 'vue';\nconst scrollPosition = ref(0);\nconst throttledPosition = useThrottle(scrollPosition, 1000);\n</script>\n```\n\n### useTimer\n\nCreate a countdown/stopwatch timer.\n\n```vue\n<script setup>\nconst { elapsed, remaining, running, complete, start, stop, reset } = useTimer(60000);\n</script>\n\n<template>\n  <div>\n    <p>Elapsed: {{ elapsed }}ms</p>\n    <p>Remaining: {{ remaining }}ms</p>\n    <button @click=\"start\" :disabled=\"running\">Start</button>\n    <button @click=\"stop\" :disabled=\"!running\">Stop</button>\n    <button @click=\"reset\">Reset</button>\n  </div>\n</template>\n```\n\n## Complete Example\n\n```vue\n<script setup>\nimport { useFactory, useConnection, useNode, setNode } from '@dreamfusion/pollen-vue';\n\n// Create two counters\nconst counter1 = useFactory('logic.counter');\nconst counter2 = useFactory('logic.counter');\n\n// Connect counter1 to counter2 (double the value)\nuseConnection(counter1, 'value', counter2, 'value', (v) => v * 2);\n\nconst value1 = useNode(counter1, 'value');\nconst value2 = useNode(counter2, 'value');\n\nconst increment = () => {\n  setNode(counter1, 'add', true);\n};\n</script>\n\n<template>\n  <div>\n    <div>\n      <h2>Counter 1: {{ value1 }}</h2>\n      <button @click=\"increment\">+</button>\n    </div>\n    \n    <div>\n      <h2>Counter 2 (2x): {{ value2 }}</h2>\n    </div>\n  </div>\n</template>\n```\n\n## TypeScript Support\n\nFull TypeScript support with type inference:\n\n```vue\n<script setup lang=\"ts\">\nimport { usePollen, useNode } from '@dreamfusion/pollen-vue';\n\ninterface MyState {\n  count: number;\n  name: string;\n}\n\nconst state = usePollen<MyState>(() => ({ count: 0, name: '' }), {\n  count: { type: 'number', get: () => 0, set: (v) => {} },\n  name: { type: 'string', get: () => '', set: (v) => {} }\n});\n\nconst count = useNode<number>(state, 'count');\nconst name = useNode<string>(state, 'name');\n</script>\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-8da57964b3c7cc4a5294d7b8e769c578"}