How to use the svelte/store.derived function in svelte

To help you get started, we’ve selected a few svelte examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github soapdog / patchfox / src / ui / utils.js View on Github external
case "@":
        window.location = `/index.html?feed=${encodeURIComponent(hash)}#/profile`
        break
      case "#":
        window.location = `/index.html?channel=${hash.replace("#","")}#/channel` 
        break
    }
  }
}

const connected = writable(false);

// maybe in the future, migrate routing system to:
// https://github.com/ItalyPaleAle/svelte-spa-router
const route = writable(parseLocation());
const routeParams = derived(route, $route => $route.data)
const routeLocation = derived(route, $route => $route.location)

const navigate = (location, data) => {
  data = data || {}
  route.set({ location, data });
  let dataAsQuery = queryString.stringify(data);
  let url = `/index.html?${dataAsQuery}#${location}`;
  console.log("navigate url", url)
  history.pushState({ location, data }, `Patchfox - ${location}`, `/index.html?${dataAsQuery}#${location}`);
  console.log(`Navigate ${location}`, data);
};


const routes = {
  "/thread": Thread,
  "/public": Public,
github kenrick95 / Raun / src / stores / I18n.js View on Github external
return this.banana.i18n(...args);
  }
}

let i18n = new I18n('en');

function createTFactory(locale) {
  i18n.init(locale);
  return i18n.t;
}

// NOTE: "MessageStore" is used so that when the messages have been fetched, every subscription of "t" are rerendered.
const MessageStore = writable({});

// eslint-disable-next-line no-unused-vars
export const t = derived([Locale, MessageStore], ([locale, messageStore]) => {
  return createTFactory(locale);
});
github ctx-core / ctx-core / packages / theme / store.ts View on Github external
import { writable, derived } from 'svelte/store'
// @ts-ignore
import { subscribe__debug } from '@ctx-core/store'
import { _class } from '@ctx-core/html'
import { not } from '@ctx-core/function'
export const __theme__invert = writable(null)
export function invert__theme() {
  __theme__invert.update(not)
}
export const __class__theme__invert =
  derived(__theme__invert,
    theme__invert => _class({ theme__invert }))
github halfnelson / svelte-native-realworld / app / stores / user.ts View on Github external
function buildUserProfileStore() {
    const user_profile = writable(null)

    const user_profile_with_defaults = derived(user_profile, profile => {
        if (profile && !profile.image) {
            profile.image = "https://static.productionready.io/images/smiley-cyrus.jpg"
        }
        return profile;
    });

    return {
        subscribe: user_profile_with_defaults.subscribe,

        loadUserFromToken(user_token) {
            if (!user_token) return Promise.resolve(null);
            return client.sendRequest('/user', 'GET', user_token)
                .then(userResponse => user_profile.set(userResponse.user))
        },

        set: user_profile.set
github ctx-core / ctx-core / packages / table / store.ts View on Github external
} from '@ctx-core/store'
import { _andand } from '@ctx-core/function'
import { I } from '@ctx-core/combinators'
import { _hash__key, _fn__hash__key } from '@ctx-core/array'
import {
	_proxy__row,
	_offsets__column,
	_rows,
	_rows__data
} from './lib'
import { _has__dom } from '@ctx-core/dom'
import { log } from '@ctx-core/logger'
const logPrefix = '@ctx-core/table/store.js'
export const __table = writable([])
export const __columns = derived(__table, _andand(0))
export const __columns__data = derived(__columns, I)
export const __offsets__column = derived(__columns, _offsets__column)
export const __domain__table = writable([0, 10.0])
export const __domain__ticks = writable([0, 5.0, 10.0])
export const __rows = derived__spread([__table, __offsets__column], _rows)
export const __rows__data = derived__spread([
		__rows,
		__columns__data,
		__offsets__column
	],
	_rows__data
)
export const __reverse__columns =
	derived(__columns,
		columns =>
			columns && columns.slice(0).reverse())
export const __rank__table = derived__spread([
github ctx-core / ctx-core / packages / auth0 / store.ts View on Github external
export const __is__loggedout__auth0 = derived(__token__auth0, _eql(false))
export const __opened__auth0 = writable(null)
export const __class__opened__auth0 = derived(__opened__auth0, I)
export const __closed__auth0 =
	derived(__opened__auth0, _eql(false))
export const __opened__login =
	derived(__opened__auth0,
		opened__auth0=>!opened__auth0 || opened__auth0 == 'login')
export const __opened__signup =
	derived(__opened__auth0, _eq('signup'))
export const __opened__forgot_password =
	derived(__opened__auth0, _eq('forgot_password'))
export const __opened__check_email__forgot_password =
	derived(__opened__auth0, _eq('check_email__forgot_password'))
export const __opened__change_password =
	derived(__opened__auth0, _eq('change_password'))
let unsubscribe__reload__opened__auth0
if (_has__dom()) {
	reload__opened__auth0()
}
export function reload__opened__auth0() {
	if (!unsubscribe__reload__opened__auth0) {
		unsubscribe__reload__opened__auth0 = true
		unsubscribe__reload__opened__auth0 =
			subscribe(__email__auth0, reload__opened__auth0)
		return
	}
	const email__auth0 = get(__email__auth0)
	__opened__auth0.set(email__auth0 ? false : 'login')
}
export function clear__error__token__auth0() {
	set__error__token__auth0(null)
github pearofducks / svelte-match-media / index.js View on Github external
export const setup = (queries = defaultQueries) => {
  queryStores = Object.entries(queries).reduce((acc, [mediaName, queryString]) => (acc[mediaName] = readable(false, setupMq(queryString)), acc), {})
  media = derived(Object.values(queryStores), ($queryStores) => $queryStores.reduce((acc, q, i) => (acc[Object.keys(queryStores)[i]] = q, acc), {}))
}
github ctx-core / ctx-core / packages / dom / store.js View on Github external
export function remove__or_a1__body_class(class__, member) {
    const h1__body_class__h0__or_a1__ = get(__h1__body_class__h0__or_a1);
    const or_a1__ = h1__body_class__h0__or_a1__[class__];
    const idx = or_a1__ && or_a1__.indexOf(member);
    if (typeof idx !== 'number' || idx === -1) {
        return h1__body_class__h0__or_a1__;
    }
    const or_a1 = or_a1__.slice();
    or_a1.splice(idx, 1);
    const h1__body_class__h0__or_a1 = clone(h1__body_class__h0__or_a1__, {
        [member]: or_a1,
    });
    __h1__body_class__h0__or_a1.set(h1__body_class__h0__or_a1);
    return h1__body_class__h0__or_a1;
}
export const __class__body = derived([
    __h1__body_class__h0__or_a1,
    __h1__body_class,
], ([h1__body_class__h0__or_a1, h1__body_class,]) => {
    const class__body = _class(assign(_h1__present__a1(h1__body_class__h0__or_a1), h1__body_class));
    return class__body;
});
github kaisermann / svelte-i18n / src / client / stores / format.ts View on Github external
return defaultValue || id
  }

  if (!values) return message
  return getMessageFormatter(message, locale).format(values)
}

formatMessage.time = (t, options) => getTimeFormatter(options).format(t)
formatMessage.date = (d, options) => getDateFormatter(options).format(d)
formatMessage.number = (n, options) => getNumberFormatter(options).format(n)
formatMessage.capital = (id, options) => capital(formatMessage(id, options))
formatMessage.title = (id, options) => title(formatMessage(id, options))
formatMessage.upper = (id, options) => upper(formatMessage(id, options))
formatMessage.lower = (id, options) => lower(formatMessage(id, options))

const $format = derived([$locale, $dictionary], () => formatMessage)

export { $format }