Eofol docs

• HTML elements

• • createElement(tagName: string, className?: string, children?: ElementNode, attributes?: Object, properties?: Object)

    Renders HTML element with tag tagName, class className, children children and with HTML attributes attributes and properties properties.

• Custom elements

• • defineCustomElement({ tagName: string, render: (state: Object, setState: (nextState: Object) => ElementNode), initialState?: Object, effect?: (state: Object, setState: (nextState: Object) => void) => void |, ((state: Object, setState: (nextState: Object) => void) => void)[], subscribe?: string[] })

    Define a stateful autonomous custom element by tagName with second effects. The element updates whenever a subscribed store given by subscribe is updated. Second effects are given by the prop effect either as a function or an array of functions.

  • updateCustom(targetId: string, nextState: Object)

    Imperatively update an instance of a custom element. Note that an id attribute given by targetId must be assigned to the custom element. State of the element changes to nextState.

• Targeted elements

• • renderTarget(targetId: string, { tagName: string, render, initialState?: Object, effect?: (state: Object, setState: (nextState: Object) => void) => void |, ((state: Object, setState: (nextState: Object) => void) => void)[] subscribe })

    Render to a DOM element given by assigned id targetId. Targeted element is updated whenever subscribed stores update. Supports effect as a function or an array of functions.

  • updateTarget(targetId: string, nextState: Object)

    Imperatively update a targeted element at id targetId. State changes to nextState.

• State management

• • createStore(name: string, initialState: Object)

    Create a slice of global store with id given by name and state as initialState.

  • select(name: string)

    Select state from global store slice given by name.

  • setStore(name: string, nextState: Object)

    Set store with id name to state to nextState.

  • mergeStore(name: string, nextState: Object)

    Merge store state given by name with nextState. Nextstate value gets precedence.

• Styles

• • sx(style: Object, excludeCustomElements?: boolean)

    Dynamically create style class given by style. The optional excludeCustomElements argument switches off propagation of dynamical styles to custom elements.

• Runtime

• • registerServiceWorker()

    Register service worker bundled with eofol-app. Include this in every script file to activate PWA support.

• Utils

• • get(url: string)

    Perform a HTTP GET request to url.

  • post(url: string, data: Object)

    Perform a HTTP POST request to url with payload data.

  • debounce(callback: () => void, delay: number, id: string)

    Standard debounce function.