corvid-storeon

corvid-storeon

A tiny event-based state manager Storeon for Corvid by Wix.

How to use

You can use demo template to try corvid-storeon

• Wix Website Template: Open In Editor

Example

public/store.js

import { createStore } from "corvid-storeon";

const counter = (store) => {
  store.on("@init", () => ({ count: 0 }));
  store.on("increment", ({ count }) => ({ count: count + 1 }));
};

export const { getState, dispatch, connect, connectPage } = createStore([counter]);

Page Code

import { dispatch, connect, connectPage } from "public/store.js";

// Subscribe for state property "count".
// The callback function will be run when the page loads ($w.onReady())
// and each time when property "count" would change.
connect("count", ({ count }) => {
  $w("#text1").text = String(count);
});

// Wrapper around $w.onReady()
// The callback function will be run once.
connectPage((state) => {
  $w("#button1").onClick(() => {
    // Emit event
    dispatch("increment");
  });
});

API

createStore

The APIs for creating modules the same as Storeon Store

const { getState, dispatch, connect, connectPage } = createStore(modules);

• createStore(Array<Module>): Store

getState

will return current state.

const state = getState();

• getState(): object

dispatch

will emit an event with optional data.

dispatch("event/type", { value: 123 });

• dispatch(event: string, [data: any]): void

connect

connect to state by property key. Will return function disconnect from the store.

const disconnect = connect("key", (state) => { });

disconnect();

You can connect for multiple keys, the last argument must be a function.

connect("key1", "key2", (state) => { });

• connect(key: string, [key: string, ...], handler: ConnectEventHandler): Disconnect
• callback ConnectEventHandler(state: object): void
• function Disconnect(): void

connectPage

Sets the function that runs when all the page elements have finished loading. (wrapper around $w.onReady())

connectPage((state) => { });

• connectPage(initFunction: ReadyHandler): void
• callback ReadyHandler(state: object): void

Package Manager

You use the Package Manager to manage the npm packages in your site.

License

MIT