@lespantsfancy/hive v0.1.60

Methods

As a general rule, if the method is spelled in camelCase, then it is an internal, this-applicable method; if it is ProperCase, then it is a static method, and must be invoked via ClassName.MethodName.

Package Exports

import Hive, { spawnStateNode, useNodeContext } from "@lespantsfancy/hive";

Import/Export

Message

new Message(type, payload, emitter, { id, timestamp });

export default Message;

@id and @timestamp are automatically populated, and are really only there for de/serialization reasons.

Methods

Node

new Node(state = {});

export default Node, { EnumEventType };

Node extends EventEmitter and, as such, has all of the .on, .off, etc. methods available to it. Two (2) events are prepopulated (EnumEventType.STATE and EnumEventType.MESSAGE), which have native handlers. The EventEmitter allows for multiple handlers, so you can have additional custom handlers to any event--including EnumEventType.STATE and EnumEventType.MESSAGE--without direct consequences by that fact itself.

EnumEventType

Contains two (2) entries on which Node has explicit customized functionality.

• STATE
• MESSAGE

Methods

Example Usage

import React from "react";
import { spawnStateNode, useNodeContext } from "@lespantsfancy/hive";

const initStateNode = spawnStateNode({ cats: 0 }, [
    "cats",
    (state, msg, node) => {
        return {
            ...state,
            cats: state.cats + 1
        };
    }
]);

export const Context = React.createContext(initStateNode);

function SubComponent(props) {
    const { node, state } = useNodeContext(Context);
    
    return (
        <div>
            <div>Cats: { state.cats }</div>
            <button onClick={ e => node.dispatch("cats", state.cats + 1 )}>Click Me</button>
        </div>
    )
}


// To explicate *sic*, the `value` is not missing inputs; `useNodeContext` extracts its properties from the passed `Node`.  `node`, however, is **required** for `useNodeContext` to function properly.
export default function App() {
    return (
        <Context.Provider value={{ node: initStateNode }}> {/* sic */}
            <SubComponent />
            <SubComponent />
            <SubComponent />
        </Context.Provider>
    );
};