PIPEABLE STORE

rxWritable

REPL

Use an rxWritable just like a Svelte writable, but with the option to pipe RxJS operators and compose streams. It has all the benefits of simple Svelte store syntax + robust RxJS utility.

  const mousemove = rxWritable(null);
  const mouseXYDiff = mousemove.pipe(
    filter(evt => !!evt),
    debounceTime(200),
    map(evt => {
      return {x: evt.clientX, y: evt.clientY}
    }),
    tap(position => console.log("rxWritable:", position)),
    map(position => position.x - position.y)
  )

  <div on:mousemove={event => $mousemove = event}>
    (mousemove over)
    <span>mouseXYDiff: {JSON.stringify($mouseXYDiff)}</span>
  </div>
			
	

ACTIONS

use:rxDebounce

REPL

Emits the most recent event via rxEmit(event => event.detail) after events have stopped for x number of milliseconds, as specified by the duration option (default is 250ms). Useful when you only want to handle an event after activity has stopped.

<input
  use:rxDebounce
  on:rxEmit={handleInputChange}
/>
		

use:rxGETFromInput

REPL

Makes a GET request using the input value whenever it changes. The rxGETStatus event will emit with event detail whenever the status changes. Pending requests are automatically cancelled when a new request is made. Use options to adjust the debounce time, query parameters, or a formatting function if you want to customize how the input value is used.

Events:

Event Detail Schema:

• status: 'EMPTY' 'DEBOUNCING' 'PENDING' 'SUCCESS' 'ERROR'
• value: string; the current input value
• response: any contains the response object when status is SUCCESS or ERROR, otherwise null

import { rxGETFromInput, rxGETStatusDetails } from 'svelte-fuse-rx';

let reqStatus = 'IDLE';
let repos = [];

const handleRequest = (eventDetail: rxGETStatusDetails) => {
  const { status, response } = eventDetail;
  reqStatus = status;

  if (status === 'SUCCESS') {
    repos = response.items;
  } else {
    repos = [];
  }
};

// ...

<input
  use:rxGETFromInput={{
    baseURL,
    queryParamKey: 'q',
    queryParams: 'per_page=5'
  }}
  on:rxGETStatus={(e) => handleRequest(e.detail)}
/>
		

Emits an event (if one occurs) via rxEmit(event => event.detail) every x number of milliseconds, as specified by the throttle duration option (default is 250ms). Useful when you only want to handle an event every x number of milliseconds.

<div
  use:rxThrottle={{ 
    on: 'mousemove', 
    duration: 1000 
  }}
  on:rxEmit={handleMousemoveCoords}
>

		

Emits an array of events via rxEmit(event => event.detail) that have accumulated over the specified number of milliseconds (default is 250ms). If no event has occurred, it will not emit empty arrays.

<div
  use:rxBufferTime={{ 
    on: 'mousemove', 
    duration: 250 
  }}
  on:rxEmit={handleMousemoveBuffer}
>

		

Emits an array of events via rxEmit(event => event.detail) when the specified count is reached (default is 25).

<div
  use:rxBufferCount={{ 
    on: 'mousemove', 
    count: 25 
  }}
  on:rxEmit={handleMousemoveBuffer}
>