0.1.5 • Published 8 years ago
fluffster v0.1.5
fluffster
A lightweight state container based on reactive streams.
NOTE: This repository is not maintained/developed in ES6 for the sake of its lightweight nature and compatibility. There will be attempts to converting the code to UMD compatible format in future, however.
Run an example:
npm run example
It Runs on http://localhost:3333.
Sample use :
var router = require('fluffster').router,
/* ... Component imports ... */
router.defaultErrorHandler = false;
router.global(
{
/* @Global Model */
auth: false,
userDetails: {
username: "",
email: ""
}
});
router.route(
{
"/": {
/* @View */
component: [HomePage],
/* @Model */
appState: {
test: 1
},
/* @Messages */
messages: {
identity: function(appState)
{
return appState;
}
}
}
});
router.route(
{
"/test": {
/* @View */
component: [TestPage],
/* @Model */
appState: {
test: 2
}
}
});
router.route(
{
"/another/:id": {
/* @View */
component: [AnotherPage],
/* @Model */
appState: {
test: 3
}
}
});
router.route(
{
"/error": {
/* @View */
component: [NotFound],
/* @Model */
appState: {
test: 404
}
}
});
router.listen();
usage with React
If you want to use it with React, please prepend the code with:
router.driver('react');
It will allow fluffster to work with JSX-style rendering if needed. All appState props will then be availible in the JSX components in props
.
Additionally you'd have to provide additional mountpoint for each component, as Router IS NOT a component itself (therefore, its more flexible):
router.route(
{
"/": {
/* @View */
component: [ComponentA, ComponentB],
/* @Id */
id: ["#mount-a", "#mount-b"],
/* @Model */
appState: {
test: 404
}
}
});