Noisy Pillaging Monster

    @statflo/widget-sdk
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.2 • Public • Published

    codecov npm version CI/CD contributions welcome

    View documentation

    Installation


    • NPM npm i @statflo/widget-sdk
    • YARN yarn @statflo/widget-sdk

    Initializing clients


    It's recommended to initialize a single instance of a widget or container client then export that instance for the rest of your application to consume. See below.

    Widget initialization

    import { WidgetClient } from "@statflo/widget-sdk";
    
    export const client = new WidgetClient({ 
      id: "my widget",
      window,
      createWidgetState: (id) => ({ id }),
    });
    

    Container initialization

    import { ContainerClient } from "@statflo/widget-sdk";
    
    export const widgetContainerClient = new ContainerClient({window});
    

    Managing widget state as the container client

    import { widgetContainerClient } from "../local/example/path"
    import { WidgetMethods } from "@statflo/widget-sdk/dist/shared";
    
    
    // step 1 - initialize widget state
    const initialWidgetState = { id: "my_widget" }
    
    // step 2 - initialize widget representation within container
    widgetContainerClient.createWidget(initialWidgetState)
    
    // step 3 - update widget state
    widgetContainerClient.setState("my_widget", "someProperty", 50)
    
    // Step 4 - subscribe to state changes from the remote widget
    widgetContainerClient.on(WidgetMethods.setState, (e) => {
      const { property, value } = e
    
      // do something with property and value
      ... 
    })
    
    
    // Optional - access state directly
    widgetContainerClient.states.get("myWidget).someProperty // returns 50
    

    Managing widget state as the widget client

    import { client } from "../local/example/path"
    import { ContainerMethods } from "@statflo/widget-sdk/dist/shared";
    
    
    // step 1 - state was initialized with the creation of the new widgetClient(...)
    
    // step 2 - update widget state
    client.setState("my_widget", "someProperty", 50)
    
    // Step 3 - subscribe to state changes from the remote container
    widget.on(ContainerMethods.setState, (e) => {
      const { property, value } = e
    
      // do something with property and value
      ... 
    })
    
    
    // Optional - access state directly
    client.state.someProperty // returns 50
    

    Security


    To view all MDN's window.postMessage() security concerns click here.

    The primary concern in this package is the target origin of the window.postMessage() API as described by MDN:

    Always specify an exact target origin, not *, when you use postMessage to send data to other windows. A malicious site can change the location of the window without your knowledge, and therefore it can intercept the data sent using postMessage.

    By default, the target origin will be "*". To set a secure target origin, set the following two properties within the widget state:

    • widgetDomain - the domain where the widget app is hostest on the web.

    • containerDomain - the domain of where container app is hosted on the web.

    Keywords

    none

    Install

    npm i @statflo/widget-sdk

    DownloadsWeekly Downloads

    12

    Version

    0.3.2

    License

    MIT

    Unpacked Size

    41.8 kB

    Total Files

    31

    Last publish

    Collaborators

    • productlabs
    • alexeidarmin
    • dmstatflo
    • statflo-dev
    • statfloian