Socket
Socket
Sign inDemoInstall

@stencil/store

Package Overview
Dependencies
1
Maintainers
11
Versions
40
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @stencil/store

Store is a lightweight shared state library by the StencilJS core team. Implements a simple key/value map that efficiently re-renders components when necessary.


Version published
Weekly downloads
41K
decreased by-6.92%
Maintainers
11
Install size
17.2 kB
Created
Weekly downloads
 

Readme

Source

@stencil/store

Store is a lightweight shared state library by the StencilJS core team. It implements a simple key/value map that efficiently re-renders components when necessary.

Highlights:

  • Lightweight
  • Zero dependencies
  • Simple API, like a reactive Map
  • Best performance

Installation

npm install @stencil/store --save-dev

Example

store.ts:

import { createStore } from "@stencil/store";

const { state, onChange } = createStore({
  clicks: 0,
  seconds: 0,
  squaredClicks: 0
});

onChange('clicks', value => {
  state.squaredClicks = value ** 2;
});

export default state;

component.tsx:

import { Component, h } from '@stencil/core';
import state from '../store';

@Component({
  tag: 'app-profile',
})
export class AppProfile {

  componentWillLoad() {
    setInterval(() => state.seconds++, 1000);
  }

  render() {
    return (
      <div>
        <p>
          <MyGlobalCounter />
          <p>
            Seconds: {state.seconds}
            <br />
            Squared Clicks: {state.squaredClicks}
          </p>
        </p>
      </div>
    );
  }
}

const MyGlobalCounter = () => {
  return (
    <button onClick={() => state.clicks++}>
      {state.clicks}
    </button>
  );
};

API

createStore<T>(initialState)

Create a new store with the given initial state. The type is inferred from initialState, or can be passed as the generic type T.

Returns a store object with the following properties.

store.state

The state object is proxied, i. e. you can directly get and set properties and Store will automatically take care of component re-rendering when the state object is changed.

Note: Proxy objects are not supported by IE11 (not even with a polyfill), so you need to use the store.get and store.set methods of the API if you wish to support IE11.

store.on(event, listener)

Add a listener to the store for a certain action.

store.onChange(propName, listener)

Add a listener that is called when a specific property changes.

store.get(propName)

Get a property's value from the store.

store.set(propName, value)

Set a property's value in the store.

store.reset()

Reset the store to its initial state.

store.use(...subscriptions)

Use the given subscriptions in the store. A subscription is an object that defines one or more of the properties get, set or reset.

Testing

Like any global state library, state should be reset between each spec test. Use the reset() API in the beforeEach hook.

import store from '../store';

beforeEach(() => {
  store.reset();
});

Keywords

FAQs

Last updated on 26 Apr 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc