frint-compat

frint-compat

Backwards compatibility package for Frint

Everything that you see here has been deprecated and should not be intentionally used.

• Guide
  • Installation
  • Usage
• API
  • createComponent
  • h
  • PropTypes
  • createService
  • createFactory
  • createApp
  • app
  • mapToProps
  • Store

Guide

Installation

With npm:

$ npm install --save frint-compat

Via unpkg CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>

<script src="https://unpkg.com/frint@latest/dist/frint.min.js"></script>
<script src="https://unpkg.com/frint-model@latest/dist/frint-model.min.js"></script>
<script src="https://unpkg.com/frint-react@latest/dist/frint-react.min.js"></script>
<script src="https://unpkg.com/frint-store@latest/dist/frint-store.min.js"></script>

<script src="https://unpkg.com/frint-compat@latest/dist/frint-compat.min.js"></script>
<script>
  // available as `window.Frint` (now backwards compatible)
</script>

Usage

Load it after you have loaded all other packages:

require('frint-compat');

Doing so would mutate other packages to keep them backwards compatible.

API

createComponent

createComponent(options)

Creates a new Component, using React internally.

Arguments

• options (Object):
  • render (Function [required]): Function returning JSX.
  • beforeMount (Function): Called before mounting the Component.
  • afterMount (Function): Called after mounting the Component.
  • beforeUnmount (Function): Called right before unmounting the Component.

Returns

Component: React Component.

h

h(type, props, children)

The hyperscript wrapping React's React.createElement. This function is expected to be in the scope wherever JSX is used.

PropTypes

PropTypes

For typechecking Component's props.

createService

createService(options)

Arguments

• options (Object): Methods for your class.
  • options.initialize (Function): Treated as class constructor.

Returns

Function: ES6-compatible class.

createFactory

createFactory(options)

Arguments

• options (Object): Methods for your class.
  • options.initialize (Function): Treated as class constructor.

Returns

Function: ES6-compatible class.

createApp

createApp(options)

Arguments

• options (Object):
  • options.component (Function): The root Component of your App.
  • options.services (Object): Key/value pairs of Service classes.
  • options.factories (Object): Key/value pairs of Factory classes.
  • options.models (Object): Key/value pairs of Model classes.
  • options.modelAttributes (Object): Key/value pairs of Model attributes.
  • options.store (Object): The Store instance.
  • options.reducer (Function): Root reducer for your Store.
  • options.initialState (Object): Initial state for your Store.
  • beforeMount (Function): Called before mounting the App.
  • afterMount (Function): Called after mounting the App.
  • beforeUnmount (Function): Called right before unmounting the App.

Returns

App: App class.

app

new App()

App instance methods:

app.getRootApp

app.getRootApp()

Extends the native getRootApp(), and looks for window.app first, and then returns it if exists.

Returns

App: The root app's instance.

app.getState$

app.getState$()

Returns

Observable: State of your App's store.

app.dispatch

app.dispatch(action)

Arguments

• action (Object|Function): Action payload to dispatch to your App's store.

Returns

void

app.render

app.render()

Returns

Function: The root component.

app.getStore

app.getStore()

Returns

Store: The app's store instance.

app.getService

app.getService(name)

Arguments

• name (String): The name of the Service.

Returns

Object: The service instance.

app.getFactory

app.getFactory(name)

Arguments

• name (String): The name of the Factory.

Returns

Object: The factory instance.

app.getModel

app.getModel(name)

Arguments

• name (String): The name of the Model.

Returns

Object: The model instance.

app.setRegion

app.setRegion(name)

Arguments

• name (String): The name of the region.

Returns

void.

app.setRegions

app.setRegions(names)

Arguments

• names (Array): Array of region names.

Returns

void.

app.getWidgets

app.getWidgets(regionName = null)

Arguments

• regionName (String [optional]): Optionally filter apps by their region.

Returns

Array: of app instances.

app.readStateFrom

app.readStateFrom(names)

Arguments

• names (Array): Array of other App names that you wish to read state from.

Returns

void.

mapToProps

mapToProps(options)(Component)

Maps data coming from various sources into Component's props.

Arguments

• options (Object):
  • options.state (Function): Accepts state (Object) as argument, and returns object to map as props.
  • options.dispatch (Object): Dispatchable action creators, keyed by prop names
  • app (Function): Accepts app (App) as argument, and returns object to map as props.
  • shared (Function): Accepts shared (Object) state as argument, and returns object to map as props.
  • services (Object): Object keyed by prop names, and service names as values.
  • factories (Object): Object keyed by prop names, and factory names as values.
  • models (Object): Object keyed by prop names, and model names as values.
  • observe (Function): Accepts app (App) as an argument, and returns an Observable emitting object to be mapped as props.

Returns

Function: That can be alled with the target Component.

Store

new Store()

store.subscribe

store.subscribe(fn)

Arguments

• fn (Function): Listener function, that accepts the latest state as argument.

Returns

Function: Call the returned function to unsubscribe from the listener.