Framework-X is a Javascript framework that separates code from its execution, allowing the representation of programmer intent to exist independently of when, where and how it's performed.
Developers don't need to write and maintain event handling code in two different places to have repeatable behavior and functional purity. You can write everything that happens in the order you want it to as a pure function and Framework-X will perform it on your behalf.
npm i framework-xView the complete code here.
import * as R from 'ramda'
import { fx } from '../fx'
import { regEventFx, regFx } from '../store'
import { updateIn } from '../util'
const evt = {
INITIALIZE_DB: 'initialize-db',
ADD_TODO: 'todo/add',
SET_TODO_TEXT: 'todo/set-text',
SHOW_NOTIFICATION: 'notification/show',
HIDE_NOTIFICATION: 'notification/hide',
}
// Initialize the global state atom
regEventFx(evt.INITIALIZE_DB, (_, state = {}) => {
return [
fx.db(state)
]
})
// Adding a todo
// Three things:
// 1. Add it to the state
// 2. Clear the todo input text
// 3. Show a notification that says "Todo added" for two seconds
regEventFx(evt.ADD_TODO, ({ db }, { id, text, done = false }) => [
fx.db(updateIn(['todos'], R.append({ id, text, done }))),
fx.dispatch(evt.SET_TODO_TEXT, ''),
fx.notification({
type: 'success',
message: 'Todo added.',
duration: 2000
})
])
// Setting the todo text.
// Affects the `db`/global state
// Associates `db.newTodoText` with SET_TODO_TEXT event's value
regEventFx(evt.SET_TODO_TEXT, (_, value) => [
fx.db( R.assoc('newTodoText', value))
])
// Notification side effect definition
// `ADD_TODO` only returns a description of this so it remains a pure function even though this isn't.
regFx('notification', (env, { type, message, duration = 900 }) => {
// Get the `dispatch` function from the Framework-X environment
// All other registered `fx` effects are here too if you need them
const { fx: { dispatch } } = env
const id = type + '/' + performance.now()
// Show the notification
dispatch(env, [evt.SHOW_NOTIFICATION, { id, type, message }])
// Hide it after X ms
setTimeout(() => dispatch(env, [evt.HIDE_NOTIFICATION, { id }]), duration)
})
// Showing a notification: add it to the state (views can subscribe, react to changes)
regEventFx(evt.SHOW_NOTIFICATION, ({ db }, { id, type, message, timeout }) => [
fx.db(updateIn(['notifications'], R.append({ id, type, message, timeout })))
])
// Hiding a notification: Remove it from the state
regEventFx(evt.HIDE_NOTIFICATION, ({ db }, { id }) => [
fx.db(updateIn(['notifications'], R.reject(R.propEq('id', id))))
])Examples are in the examples folder. To install and run an example (e.g. todomvc):
git clone https://github.com/CoNarrative/framework-x
cd framework-x/examples/todomvc
npm i
npm startSource: https://github.com/CoNarrative/framework-x/tree/master/examples/todomvc
CodeSandbox:
Source: https://github.com/CoNarrative/framework-x/tree/master/examples/realworld
CodeSandbox:
MIT © CoNarrative