@dreamfusion/pollen-svelte

Svelte stores for Pollen 2.0 reactive framework.

Installation

npm install @dreamfusion/pollen @dreamfusion/pollen-svelte

Quick Start

<script>
  import { createCounter, createStore, createDebounce } from '@dreamfusion/pollen-svelte';
  
  const { value, increment, decrement, reset } = createCounter(0, 1);
  
  const query = createStore('');
  const debouncedQuery = createDebounce(query, 500);
</script>

<h1>{$value}</h1>
<button on:click={increment}>+</button>
<button on:click={decrement}>-</button>
<button on:click={reset}>Reset</button>

<input bind:value={$query} placeholder="Search..." />
<p>Searching for: {$debouncedQuery}</p>

API

createPollen

Create a pollinated object.

<script>
  import { createPollen } from '@dreamfusion/pollen-svelte';
  
  const state = createPollen(() => ({}), {
    count: {
      type: 'number',
      get: () => 0,
      set: (v) => {}
    }
  });
</script>

nodeStore

Create a writable Svelte store from a Pollen node.

<script>
  import { nodeStore } from '@dreamfusion/pollen-svelte';
  
  const value = nodeStore(pollinated, 'nodeName');
</script>

<input bind:value={$value} />

readableNodeStore

Create a readable Svelte store from a Pollen node.

<script>
  import { readableNodeStore } from '@dreamfusion/pollen-svelte';
  
  const value = readableNodeStore(pollinated, 'nodeName');
</script>

<p>{$value}</p>

nodeStores

Create stores for multiple nodes.

<script>
  import { nodeStores } from '@dreamfusion/pollen-svelte';
  
  const { count, name, active } = nodeStores(pollinated, ['count', 'name', 'active']);
</script>

createConnection

Create a connection between two pollinated objects.

<script>
  import { onDestroy } from 'svelte';
  import { createConnection } from '@dreamfusion/pollen-svelte';
  
  const disconnect = createConnection(source, 'output', target, 'input', (v) => v * 2);
  
  onDestroy(disconnect);
</script>

createFactory

Create a factory component.

<script>
  import { createFactory } from '@dreamfusion/pollen-svelte';
  
  const counter = createFactory('logic.counter');
</script>

createCounter

Create a counter with increment, decrement, and reset.

<script>
  import { createCounter } from '@dreamfusion/pollen-svelte';
  
  const { value, increment, decrement, reset } = createCounter(0, 1);
</script>

<h1>{$value}</h1>
<button on:click={increment}>+</button>
<button on:click={decrement}>-</button>
<button on:click={reset}>Reset</button>

createStore

Create a simple value store.

<script>
  import { createStore } from '@dreamfusion/pollen-svelte';
  
  const value = createStore(initialValue);
</script>

<input bind:value={$value} />

createDebounce

Create a debounced store.

<script>
  import { writable } from 'svelte/store';
  import { createDebounce } from '@dreamfusion/pollen-svelte';
  
  const searchQuery = writable('');
  const debouncedQuery = createDebounce(searchQuery, 300);
</script>

<input bind:value={$searchQuery} />
<p>Searching for: {$debouncedQuery}</p>

createThrottle

Create a throttled store.

<script>
  import { writable } from 'svelte/store';
  import { createThrottle } from '@dreamfusion/pollen-svelte';
  
  const scrollPosition = writable(0);
  const throttledPosition = createThrottle(scrollPosition, 1000);
</script>

createTimer

Create a countdown/stopwatch timer.

<script>
  import { createTimer } from '@dreamfusion/pollen-svelte';
  
  const { elapsed, remaining, running, complete, start, stop, reset } = createTimer(60000);
</script>

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

Complete Example

<script>
  import { onDestroy } from 'svelte';
  import { createFactory, createConnection, readableNodeStore, setNode } from '@dreamfusion/pollen-svelte';
  
  // Create two counters
  const counter1 = createFactory('logic.counter');
  const counter2 = createFactory('logic.counter');
  
  // Connect counter1 to counter2 (double the value)
  const disconnect = createConnection(counter1, 'value', counter2, 'value', (v) => v * 2);
  
  const value1 = readableNodeStore(counter1, 'value');
  const value2 = readableNodeStore(counter2, 'value');
  
  function increment() {
    setNode(counter1, 'add', true);
  }
  
  onDestroy(disconnect);
</script>

<div>
  <h2>Counter 1: {$value1}</h2>
  <button on:click={increment}>+</button>
</div>

<div>
  <h2>Counter 2 (2x): {$value2}</h2>
</div>

TypeScript Support

Full TypeScript support with type inference:

<script lang="ts">
  import { createPollen, nodeStore } from '@dreamfusion/pollen-svelte';
  
  interface MyState {
    count: number;
    name: string;
  }
  
  const state = createPollen<MyState>(() => ({ count: 0, name: '' }), {
    count: { type: 'number', get: () => 0, set: (v) => {} },
    name: { type: 'string', get: () => '', set: (v) => {} }
  });
  
  const count = nodeStore<number>(state, 'count');
  const name = nodeStore<string>(state, 'name');
</script>

License

MIT