Options
All
  • Public
  • Public/Protected
  • All
Menu

FRETS class is the main way to instantiate a new application and hang your models, actions, and state off it

template

T, U

Type parameters

Hierarchy

  • FRETS

Index

Constructors

constructor

  • new FRETS(modelProps: T, actions: U): FRETS
  • Parameters

    • modelProps: T

      A required initial instance of the application Props(Model)

    • actions: U

      A required instance of an actions class (which will be registered later with registerAction App.actions.X = App.registerAction(fn))

    Returns FRETS

Properties

actions

actions: U

A required instance of an actions class (which will be registered later with registerAction App.actions.X = App.registerAction(fn))

modelProps

modelProps: T

A required initial instance of the application Props(Model)

registerAction

registerAction: function

Define the concrete implementation of your actions. Your actions must be assigned to event handlers inside the VNode definitions of your UI rendering functions. Then the provided action function is executed to update some properties in state. Then the app will run data changes through the one mutations method, and then it will tell Maquette to schedule a re-rendering of the UI on the next animation frame.

param

A function which will be called in an event handler and is expected to change the state in some way.

Type declaration

    • (actionFn: function): function
    • Parameters

      • actionFn: function
          • (e: Event, data: T): T
          • Parameters

            • e: Event
            • data: T

            Returns T

      Returns function

        • (e: Event): any
        • Parameters

          • e: Event

          Returns any

routes

routes: IRouteRegistry<T>

Methods

calculator

  • calculator(p: T, o: T): T
  • The primary state calculation method, looks at all the properties and updates any derived values based on changes. Please make this function idempotent. Overwrite this with your own specific implementation.

    Parameters

    • p: T
    • o: T

    Returns T

getField

  • Returns the field object that was previously registered with the given key. Including an event handler that will update the field. Any validation errors on the field, and whatever the current value is.

    Type parameters

    • S

    Parameters

    • key: string

    Returns IRegisteredField<S>

    IRegisteredField

getRouteLink

  • getRouteLink(key: string, data?: any): string | false
  • Returns a path when given the key of a route that was previously registered.

    Parameters

    • key: string
    • Optional data: any

    Returns string | false

    string

makeActionStately

  • makeActionStately(presenterFn: function, data: T): (Anonymous function)
  • Returns a function that accepts an action function, Wraps the action with our necessary hooks, and returns a funtion compatible with the standard Maquette event handler signature.

    Parameters

    • presenterFn: function

      A reference to the main FRETS render function for this instance.

        • (props: T): void
        • Parameters

          • props: T

          Returns void

    • data: T

    Returns (Anonymous function)

mountTo

  • mountTo(id: string): void
  • Mount the application to the DOM.

    Parameters

    • id: string

      The id of the dom element to replace

    Returns void

navToPath

  • navToPath(path: string): void
  • Update the browser location with the provided raw string path.

    Parameters

    • path: string

    Returns void

navToRoute

  • navToRoute(key: string, data?: any): void
  • Change the browser location to match the path configured in the route with the provided key. You still need to call an action to udpate state before the UI will re-render.

    Parameters

    • key: string
    • Optional data: any

    Returns void

registerField

  • Registers simple form fields on the property model, and on the actions to update it. If the field key hasn't been registered yet, it initializes that value on the properties with the value passed in. This makes it so that UI functions can register themselves on the props and the actions without the root app needing to know about it.

    Type parameters

    • S

    Parameters

    • key: string
    • Optional initialValue: S

    Returns IRegisteredField<S>

    IRegisteredField

registerRoute

  • registerRoute(routeName: string, path: string, fn: function): void
  • Register a new route that will execute the given function whenever the provided path is matched during the model mutation step. This function should update the app state properties to reflect the status that is indicated by the given route. The keys are useful for navigation methods that need to refer to a route programmatically later. (see path-parser documentation at https://github.com/troch/path-parser).

    Parameters

    • routeName: string
    • path: string
    • fn: function
        • (routeName: string, routeParams: any, props: T): T
        • Parameters

          • routeName: string
          • routeParams: any
          • props: T

          Returns T

    Returns void

registerView

  • registerView(renderFn: function): void
  • Sets up a render function for the app

    Parameters

    • renderFn: function
        • (app: FRETS<T, U>): VNode
        • Parameters

          Returns VNode

    Returns void

registerViewAsync

  • registerViewAsync(renderFn: function): Promise<void>
  • Regisers a function that returns a promise of a VNode - this will be called and the UI will be rerendered upon the resolution of that function. This allows for lazy loading of UI modules that aren't needed right away.

    Parameters

    • renderFn: function
        • (props: T, actions: U): Promise<VNode>
        • Parameters

          • props: T
          • actions: U

          Returns Promise<VNode>

    Returns Promise<void>

render

  • render(props: T, recalculate?: boolean): void
  • The Render function is useful for when an async promise resolves (like from a network request) - and you need to update the props and re-render the app with the new data.

    Parameters

    • props: T
    • Default value recalculate: boolean = true

    Returns void

stateRenderer

  • stateRenderer(id?: string): VNode
  • The function used to render VNodes for insertion into the page DOM. This method should be configured by calling FRETS.registerView(...)

    Parameters

    • Default value id: string = "default"

    Returns VNode

validator

  • validator(p: T, o: T): Object
  • Check for any properties that are invalid or out of bounds and either reset them or add validation/warning messages somewhere on the props for display. Please make this function idempotent. Overwrite this with your own specifc implementation. It can return an updated state object containing validation error messages as well as returning false in the tuple to make mutation stop early and show errors to the user. The calculate method and route methods will not be called when your validate method returns false in the second parameter of the return tuple.

    Parameters

    • p: T
    • o: T

    Returns Object

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc