@dreamfusion/pollen-vue

Vue 3 composables for Pollen 2.0 reactive framework.

Installation

npm install @dreamfusion/pollen @dreamfusion/pollen-vue

Quick Start

<script setup>
import { useCounter, useStore, useDebounce } from '@dreamfusion/pollen-vue';

const { value, increment, decrement, reset } = useCounter(0, 1);

const { value: query, setValue: setQuery } = useStore('');
const debouncedQuery = useDebounce(query, 500);
</script>

<template>
  <div>
    <h1>{{ value }}</h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="reset">Reset</button>
    
    <input 
      :value="query" 
      @input="setQuery($event.target.value)"
      placeholder="Search..."
    />
    <p>Searching for: {{ debouncedQuery }}</p>
  </div>
</template>

Composables

usePollen

Create a pollinated object and manage its lifecycle with Vue.

<script setup>
import { usePollen, useNode } from '@dreamfusion/pollen-vue';

const state = usePollen(() => ({}), {
  count: {
    type: 'number',
    get: () => 0,
    set: (v) => {}
  }
});

const count = useNode(state, 'count');
</script>

useNode

Subscribe to a single node value as a Vue ref.

<script setup>
const value = useNode(pollinated, 'nodeName');
</script>

useSetNode

Get a setter function for a node.

<script setup>
const setValue = useSetNode(pollinated, 'nodeName');
setValue(42);
</script>

useNodes

Subscribe to multiple nodes as Vue refs.

<script setup>
const { count, name, active } = useNodes(pollinated, ['count', 'name', 'active']);
</script>

useConnection

Create a connection between two pollinated objects.

<script setup>
useConnection(source, 'output', target, 'input', (value) => value * 2);
</script>

useFactory

Create a factory component and manage its lifecycle.

<script setup>
const counter = useFactory('logic.counter');
</script>

useCounter

Create a counter with increment, decrement, and reset.

<script setup>
const { value, increment, decrement, reset } = useCounter(0, 1);
</script>

<template>
  <div>
    <h1>{{ value }}</h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="reset">Reset</button>
  </div>
</template>

useStore

Create a simple value store.

<script setup>
const { value, setValue } = useStore(initialValue);
</script>

useDebounce

Create a debounced value.

<script setup>
import { ref } from 'vue';
const searchQuery = ref('');
const debouncedQuery = useDebounce(searchQuery, 300);
</script>

useThrottle

Create a throttled value.

<script setup>
import { ref } from 'vue';
const scrollPosition = ref(0);
const throttledPosition = useThrottle(scrollPosition, 1000);
</script>

useTimer

Create a countdown/stopwatch timer.

<script setup>
const { elapsed, remaining, running, complete, start, stop, reset } = useTimer(60000);
</script>

<template>
  <div>
    <p>Elapsed: {{ elapsed }}ms</p>
    <p>Remaining: {{ remaining }}ms</p>
    <button @click="start" :disabled="running">Start</button>
    <button @click="stop" :disabled="!running">Stop</button>
    <button @click="reset">Reset</button>
  </div>
</template>

Complete Example

<script setup>
import { useFactory, useConnection, useNode, setNode } from '@dreamfusion/pollen-vue';

// Create two counters
const counter1 = useFactory('logic.counter');
const counter2 = useFactory('logic.counter');

// Connect counter1 to counter2 (double the value)
useConnection(counter1, 'value', counter2, 'value', (v) => v * 2);

const value1 = useNode(counter1, 'value');
const value2 = useNode(counter2, 'value');

const increment = () => {
  setNode(counter1, 'add', true);
};
</script>

<template>
  <div>
    <div>
      <h2>Counter 1: {{ value1 }}</h2>
      <button @click="increment">+</button>
    </div>
    
    <div>
      <h2>Counter 2 (2x): {{ value2 }}</h2>
    </div>
  </div>
</template>

TypeScript Support

Full TypeScript support with type inference:

<script setup lang="ts">
import { usePollen, useNode } from '@dreamfusion/pollen-vue';

interface MyState {
  count: number;
  name: string;
}

const state = usePollen<MyState>(() => ({ count: 0, name: '' }), {
  count: { type: 'number', get: () => 0, set: (v) => {} },
  name: { type: 'string', get: () => '', set: (v) => {} }
});

const count = useNode<number>(state, 'count');
const name = useNode<string>(state, 'name');
</script>

License

MIT