How to use the svelte/store.writable 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
window.location = `/index.html?thread=${encodeURIComponent(hash)}#/thread`
        break
      case "&":
        window.location = `http://localhost:8989/blobs/get/${hash}`
        break
      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);
};
github codediodeio / sveltefire / src / firestore.js View on Github external
once && _teardown();
      },

      // Handle firebase thrown errors
      error => {
        console.error(error);
        next(null, error);
      }
    );

    // Removes firebase listener when store completes
    return () => _teardown();
  };

  // Svelte store
  const store = writable(startWith, start);
  const { subscribe, set } = store;

  return {
    subscribe,
    firestore,
    ref,
    get loading() {
      return _loading;
    },
    get error() {
      return _error;
    }
  };
}
github TalesMUD / talesmud / public / app / src / auth.js View on Github external
// src/auth.js

import { onMount, setContext, getContext } from "svelte";
import { writable } from "svelte/store";
import createAuth0Client from "@auth0/auth0-spa-js";

const isLoading = writable(true);
const isAuthenticated = writable(false);
const authToken = writable("");
const userInfo = writable({});
const authError = writable(null);
const AUTH_KEY = {};

// Default Auth0 expiration time is 10 hours or something like that.
// If you want to get fancy you can parse the JWT token and get
// token's actual expiration time.
const refreshRate = 10 * 60 * 60 * 1000;

function createAuth(config) {
  let auth0 = null;
  let intervalId = undefined;

  // You can use Svelte's hooks in plain JS files. How nice!
  onMount(async () => {
github ctx-core / ctx-core / packages / table / store.ts View on Github external
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([
	__columns,
	__rows,
github ctx-core / ctx-core / packages / svg / store.ts View on Github external
import { writable, derived } from 'svelte/store'
export const __margin__svg = writable(null)
export const __width__svg = writable(null)
export const __height__svg = writable(null)
export const __width__content__svg = writable(null)
export const __height__content__svg = writable(null)
export const __ctx__matrix2d__svg = derived([
		__margin__svg,
		__width__svg,
		__height__svg,
		__width__content__svg,
		__height__content__svg,
	],
	([
		 margin__svg,
		 width__svg,
		 height__svg,
		 width__content__svg,
		 height__content__svg
	 ]) => ({
		margin__svg,
		width__svg,
github ctx-core / ctx-core / packages / auth0 / store.ts View on Github external
log(`${logPrefix}|open__forgot_password__auth0`)
	__opened__auth0.set('forgot_password')
}
export function open__check_email__forgot_password__auth0() {
	log(`${logPrefix}|open__check_email__forgot_password__auth0`)
	__opened__auth0.set('check_email__forgot_password')
}
export function open__change_password__auth0() {
	log(`${logPrefix}|open__change_password__auth0`)
	__opened__auth0.set('change_password')
}
export function close__auth0() {
	log(`${logPrefix}|close__auth0`)
	__opened__auth0.set(false)
}
export const __msg__logout__auth0 = writable(null)
export function logout__auth0() {
	log(`${logPrefix}|logout__auth0`)
	logout__token__auth0()
	__msg__logout__auth0.set({
		time: Date.now()
	})
}
github ctx-core / ctx-core / packages / scroll / store.ts View on Github external
import { writable, get } from 'svelte/store'
import { clone } from '@ctx-core/object'
import { log } from '@ctx-core/logger'
const logPrefix = '@ctx-core/scroll/store.js'
export const __active__Sticky__Scroll = writable({})
export function add__active__Sticky__Scroll(key) {
	log(`${logPrefix}|add__active__Sticky__Scroll`)
	__active__Sticky__Scroll.update(
		__ => {
			const active__Sticky__Scroll = clone(__)
			active__Sticky__Scroll[key] = true
			return active__Sticky__Scroll
		})
}
export function remove__active__Sticky__Scroll(key) {
	log(`${logPrefix}|remove__active__Sticky__Scroll`)
	__active__Sticky__Scroll.update(
		__ => {
			const active__Sticky__Scroll = clone(__)
			active__Sticky__Scroll[key] = false
			return active__Sticky__Scroll
github launchlet / launchlet / os-app / dev-launcher / _shared.js View on Github external
let _LCHOptionsObject = {};
import { LCHLauncherOptions } from './ui-logic.js';
export const LCHOptionsObject = function(inputData) {
	return !inputData ? _LCHOptionsObject : (_LCHOptionsObject = LCHLauncherOptions(inputData));
};

import OLSKInternational from 'OLSKInternational';
export const OLSKLocalized = function(translationConstant) {
	return OLSKInternational.OLSKInternationalLocalizedString(translationConstant, JSON.parse(`{"OLSK_I18N_SEARCH_REPLACE":"OLSK_I18N_SEARCH_REPLACE"}`)[LCHOptionsObject().languageCode]);
};

import { writable } from 'svelte/store';
export const secondaryComponent = writable(null);
github tjinauyeung / svelte-forms-lib / lib / createForm.js View on Github external
const validationSchema = config.validationSchema;
  const validateFn = config.validate;
  const onSubmit = config.onSubmit;

  const initial = {
    values: () => util.cloneDeep(initialValues),
    errors: () => util.assignDeep(initialValues, NO_ERROR),
    touched: () => util.assignDeep(initialValues, !IS_TOUCHED)
  };

  const form = writable(initial.values());
  const errors = writable(initial.errors());
  const touched = writable(initial.touched());

  const isSubmitting = writable(false);
  const isValidating = writable(false);

  const isValid = derived([errors, touched], ([$errors, $touched]) => {
    const allTouched = util.getValues($touched).every(field => field === IS_TOUCHED);
    const noErrors = util.getValues($errors).every(field => field === NO_ERROR);
    return allTouched && noErrors;
  });

  function handleChange(event) {
    const { name: field, value } = event.target;

    updateTouched(field, true);

    if (validationSchema) {
      isValidating.set(true);
      return util
        .reach(validationSchema, field)
github TalesMUD / talesmud / public / app / src / creator / CRUDEditorStore.js View on Github external
function createStore() {
  const { subscribe, set, update } = writable({
    elements: [],
    selectedElement: null,
    filters: [],
    filterActive: false,
  });
  return {
    subscribe,
    update,
    set,
    addFilter: (key, val) => {
      update((state) => {
        let newFilters = state.filters;
        for (var i = 0; i < newFilters.length; i++) {
          if (newFilters[i].key === key) {
            newFilters.splice(i, 1);
          }