riothing
v0.2.39
Published
riot & node tag compiling, rendering and routing functions
Downloads
92
Readme
Riothing.
Simple to use Library for riot isomorphic or client only app creation process.
Riothing client
https://cdn.rawgit.com/noneedsystem/riothing/v0.2.4/riothing.js
Riothing server
npm install -S riothing
<!--default folder structure-->
/public
/store
/app
/action
/data
root.html
How it works?
Client side only
- include client script & store functions to root.html
- initiate it by including
new Riothing({ stores: ['storeRoutes'] });
- Enjoy
Isomorphic approach
- include only client script to root.html
- install
riothing
throughnpm
- require riothing
const riothing = require('./riothing');
- use it as routing function
riothing.route(req, res)
- Enjoy
Usage
init: this.mixin('riothing')
methods: ['act', 'track', 'store']
variables: ['models', 'stores']
Works best with Fucss client
https://github.com/noneedsystem/fucss
https://cdn.rawgit.com/noneedsystem/fucss/0.6.9a/fucss.min.js
And lets not forget icons
https://cdn.rawgit.com/noneedsystem/fuico/0.0.8/style.css
https://github.com/noneedsystem/fuico
storeRiot example
function storeRoutes(initState){
return {
name: 'routes',
state: initState,
actions: new Actions(),
models: { Route, Meta },
model: RoutesState,
};
function Actions(){
return {
'SET_ROUTE': function(page, splash){
let routes = this.get('routes');
let route = routes.filter((route) => route.name === page);
if(route.length !== 1)
route = route.filter((route) => route.main);
let routeName = route.length !== 1
? routes[0].name
: route[0].name;
let state = this.set({
ready: !this.SERVER,
page: routeName,
splash,
});
//console.log(state);
//set client title
if(!this.SERVER){
parent.route(parent.location.href.replace(parent.location.origin, ''), this.get('meta.title'));
}
console.log('SET_ROUTE', routeName, splash);
this.trigger('ROUTE_STATE', state);
return state;
}
}
}
function RoutesState(data = {}, prev = {}, act){
this.routes = data.routes && data.routes.map((route) => new Route(route)) || prev.routes ||
[
new Route({ name: 'main', main: true }),
new Route({ name: 'todo' }),
new Route({ name: 'test' })
];
this.metas = data.metas || prev.metas || {
main: new Meta(),
todo: new Meta({ title: 'todo poinout title'})
};
this.ready = data.ready || prev.ready || false;
this.page = data.page || prev.page || 'main';
this.splash = data.splash;
//generated values
this.route = this.routes.filter((route) => route.name === this.page).shift();
this.meta = this.metas[this.page] || this.metas['main'];
this.subroute = this.splash && this.routes.filter((subroute) => subroute.name === this.splash).shift();
return this;
}
function Route(data = {}){
this.name = data.name || 'none';
this.main = data.main || false;
this.link = data.link || this.main && '/' || '/' + this.name;
this.view = data.view || 'page-' + this.name;
return this;
}
function Meta(data = {}){
this.title = data.title || 'Poinout app';
this.desc = data.desc || 'Simple app description';
this.author = data.author || 'egis';
this.image = data.image || '';
this.url = data.url || '';
this.favicon = data.favicon || 'favicon.ico';
return this;
}
}