svelte-used v0.0.7

Svelte Used

The package is under progress!!

Stores

Extendable

• extendable: Allows the extension of a store with functions.

  // extendable, initial value as 'hammer'
  const store = extendable<{
    setHoe()
  }>('hammer', (store) => ({
    setHoe() {
        store.set('hoe');
    }
  }));
  
  // change the store value to 'hoe'
  store.setHoe();

  extendableFrom:

  const store = writable('hammer');
  
  // extends from an existing store
  const extendedStore = extendableFrom<{
    setHoe()
  }>(store, (store) => ({
    setHoe() {
        store.set('hoe');
    }
  }))
  
  extendedStore.setHoe();

• historyable: Adds the old value into subscribe and update functions.

  const store = historyable('hello!');
  
  store.set('good!');
  
  store.update((value, old) => {
    // value -> 'good!' 
    // old -> 'hello!'
    return 'new';
  });

  historyableFrom: Same as historyable but receives the store as an initial value.

• undoable: Adds undo/redo functionality inside the store, automatically committing changes.

  const store = writable('value');
  const { history, undo, redo, canUndo, canRedo } = undoable(store);
  
  store.set('something');
  
  // returns to 'value'
  undo();
  // returns to 'something';
  redo();
  // returns to 'something';
  redo();
  
  canUndo // <- true
  canRedo // <- false

  manualUndoable: Does not automatically commit changes.

  const store = writable('value');
  // Same values as undoable, but with a commit function
  const { history, undo, redo, canUndo, canRedo, commit } = manualUndoable(store);
  
  store.set('something');
  // doesn't work because it's not committed
  undo();
  redo();
  
  commit();
  // to 'value'
  undo();
  // to 'something'
  redo();
  
  // history looks like:
  type UndoableHistory<T> = {
    stack: T[],
    value: T,
    index: number
  }

Transition

• typewriter: The typewriter from the official docs.

Use

JSON

$JSON is a Svelte analog for JSON, where in objects, you have the stores.

How to use:

import { $JSON } from 'svelte-able/json'
const OBJ = {
    store: writable('hello!')
}
// works with deep nested objects
const res = $JSON.stringify(OBJ);
console.log(res)
// {"store@writable": "hello!"}
// if it was readable
// {"store@readable": "hello!"}
// if any other store
// {"store@writable": "hello!"}

// If you don't want to have @writable/@readable:
const res2 = $JSON.stringify(OBJ, true);
console.log(res2)
// {"store": "hello!"}

// Allows parsing the $JSON.stringify value
const parsed = $JSON.parse(res);
/* parsed -> {
    store: writable('hello!')
} */

// to parse $JSON.stringify with true, just use regular JSON.parse
const parsed2 = JSON.parse(res2);