├── .gitignore ├── README.md ├── gulpfile.js ├── lib ├── route.js └── view.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 27 | node_modules 28 | 29 | jspm_packages 30 | config.js 31 | dist 32 | 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Riot Page 2 | 3 | Lightweight router for riotjs using page.js 4 | 5 | Simple usage 6 | 7 | ``` 8 | import router from 'riot-page/lib/route'; 9 | import AuthStore from 'riot-auth/lib/store'; 10 | 11 | router.route({ 12 | name: 'login', 13 | path: '/login', 14 | container: '#main', 15 | tag: 'login-view', 16 | tpl: 'app/views/auth/components/login.tag' 17 | }) 18 | router.route({ 19 | name: 'logout', 20 | path: '/logout', 21 | error: (ctx, next, err) =>{ 22 | console.log(err) 23 | }, 24 | enter: (ctx) =>{ 25 | console.log("logging out") 26 | AuthStore.logout() 27 | .then((resp) => { 28 | router.redirect('/') 29 | }) 30 | .catch((err) => { 31 | console.log(err) 32 | router.back() 33 | }) 34 | } 35 | }) 36 | ``` 37 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | watch = require("gulp-watch"), 3 | babel = require("gulp-babel"), 4 | shell = require('gulp-shell'); 5 | 6 | var paths = { 7 | src: 'src/**/*.js', 8 | dstlib: 'dist/lib', 9 | dist: 'dist/', 10 | watch: 'src/**', 11 | distw: 'dist/**' 12 | } 13 | 14 | var babelCompilerOptions = { 15 | modules: 'system' 16 | }; 17 | 18 | gulp.task('src', function () { 19 | return gulp.src(paths.src) 20 | .pipe(babel()) 21 | .pipe(gulp.dest(paths.dist)); 22 | }); 23 | 24 | gulp.task('jspm-link', shell.task([ 25 | 'jspm link jspm:riot-page@dev -y' 26 | ])) 27 | 28 | gulp.task('watch', function(){ 29 | gulp.watch(paths.watch, ['src']) 30 | }) 31 | 32 | gulp.task('watch_dist', function(){ 33 | gulp.watch(paths.distw, ['jspm-link']) 34 | }) 35 | 36 | gulp.task('default', ['watch']); 37 | -------------------------------------------------------------------------------- /lib/route.js: -------------------------------------------------------------------------------- 1 | import page from 'page' 2 | import Promise from 'es6-promise'; 3 | import view from './view'; 4 | 5 | class Router { 6 | constructor() { 7 | this.routes = {} 8 | this.prev = null 9 | this.cur = null 10 | this.beforeRequest = null 11 | 12 | page.exit('*', (ctx, next) => { 13 | console.log('Exit '+ctx.cur) 14 | ctx.prev = ctx.cur 15 | this.prev = this.cur 16 | next() 17 | }) 18 | } 19 | redirect(location){ 20 | page.redirect(location) 21 | } 22 | go(location){ 23 | page(location) 24 | } 25 | back(){ 26 | page.back() 27 | } 28 | setBeforeRequest(br){ 29 | this.beforeRequest = br 30 | } 31 | 32 | /* 33 | Try to get options passed to riot mount 34 | */ 35 | _get_opts(opts, ctx){ 36 | return new Promise.Promise((resolve, reject) =>{ 37 | if (opts){ 38 | opts(ctx) 39 | .then((options) => { 40 | resolve(options) 41 | }) 42 | .catch((err)=> { 43 | resolve(null) 44 | }) 45 | }else{ 46 | resolve(null) 47 | } 48 | }) 49 | } 50 | route(opts){ 51 | page(opts.path, (ctx, next) => { 52 | ctx.cur = opts.name 53 | console.log('Enter '+ctx.cur) 54 | this.cur = opts 55 | 56 | if (this.prev && this.cur){ 57 | if (this.prev.name !== this.cur.name){ 58 | if (this.prev.tag){ 59 | console.log('unmounting '+ this.prev.tag) 60 | view.unmount(this.prev.tag) 61 | } 62 | } 63 | } 64 | const canMount = opts.container? (opts.tag? (opts.tpl? true: false): false): false 65 | this._get_opts(opts.opts, ctx) 66 | .then((options) =>{ 67 | new Promise.Promise((resolve, reject) =>{ 68 | if (canMount){ 69 | view.mount(opts.container, opts.tag, opts.tpl, options) 70 | .then((mnt) => { 71 | resolve(mnt) 72 | }) 73 | .catch((err) =>{ 74 | reject(err) 75 | }) 76 | }else{ 77 | resolve(null) 78 | } 79 | }) 80 | .then((mnt) =>{ 81 | const tag = mnt? mnt.tags[0]:null 82 | if (opts.enter) { 83 | try{ 84 | opts.enter(ctx, next, tag) 85 | }catch(err){ 86 | if (opts.error) 87 | opts.error(ctx, next, err) 88 | } 89 | } 90 | }) 91 | .catch((err) =>{ 92 | if (opts.error) 93 | opts.error(ctx, next, err) 94 | }) 95 | }) 96 | }) 97 | this.routes[opts.name] = opts 98 | } 99 | } 100 | 101 | export default new Router() 102 | -------------------------------------------------------------------------------- /lib/view.js: -------------------------------------------------------------------------------- 1 | import riot from 'riot'; 2 | import Promise from 'es6-promise'; 3 | 4 | let _mounts = {}; 5 | let _views = {}; 6 | 7 | let mountView = function(location, tag, tag_file, opts){ 8 | return new Promise.Promise((resolve, reject) =>{ 9 | if (!_views[tag_file]){ 10 | System.import(tag_file) 11 | .then((mod) =>{ 12 | _views[tag_file] = mod 13 | console.log('mounting '+tag) 14 | _mounts[tag] = riot.mount(location, tag, opts) 15 | resolve({module: mod, tags: _mounts[tag]}) 16 | }) 17 | .catch((e) =>{ 18 | reject(e) 19 | }) 20 | }else{ 21 | if(_mounts[tag]){ 22 | console.log(tag+' already mounted') 23 | _mounts[tag][0].update({opts: opts}) 24 | }else{ 25 | console.log('mounting '+tag) 26 | _mounts[tag] = riot.mount(location, tag, opts) 27 | } 28 | resolve({module: _views[tag_file], tags: _mounts[tag]}) 29 | } 30 | }) 31 | } 32 | 33 | let unmountView = function(tag){ 34 | let tags = _mounts[tag] 35 | if (tags){ 36 | tags.forEach((t) =>{ 37 | t.unmount(true) 38 | }) 39 | delete _mounts[tag] 40 | } 41 | } 42 | 43 | export default { 44 | mount: mountView, 45 | unmount: unmountView 46 | } 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "riot-page", 3 | "version": "0.0.0", 4 | "registry": "github", 5 | "description": "Provides utils for using page.js in riot", 6 | "repository": "https://github.com/osiloke/riot-page", 7 | "author": "osiloke", 8 | "contributors": [ 9 | "Osiloke Emoekpere " 10 | ], 11 | "ignore": [ 12 | "node_modules" 13 | ], 14 | "jspm":{ 15 | "ignore": [ 16 | "node_modules" 17 | ] 18 | }, 19 | "main": "lib/view.js", 20 | "dependencies": { 21 | }, 22 | "devDependencies": { 23 | "autoprefixer-core": "^5.2.1", 24 | "babel": "^5.6.4", 25 | "babel-eslint": "^3.1.17", 26 | "babelify": "^6.1.2", 27 | "browser-sync": "^2.7.12", 28 | "browserify": "^10.2.4", 29 | "chai": "^3.0.0", 30 | "cssnano": "^1.4.3", 31 | "cssnext": "^1.7.1", 32 | "del": "^1.2.0", 33 | "eslint": "^0.23.0", 34 | "eslint-plugin-react": "^2.5.2", 35 | "front-matter": "^1.0.0", 36 | "gaze": "^0.5.1", 37 | "gulp-babel": "~5.1.0", 38 | "gulp-copy": "0.0.2", 39 | "gulp-riot": "~0.2.15", 40 | "gulp-shell": "~0.4.2", 41 | "gulp-sourcemaps": "~1.5.2", 42 | "gulp-watch": "~4.2.4", 43 | "highlight.js": "^8.6.0", 44 | "lodash.template": "^3.6.1", 45 | "marked": "^0.3.3", 46 | "mkdirp": "^0.5.1", 47 | "mocha": "^2.2.5", 48 | "normalize.css": "^3.0.3", 49 | "postcss": "^4.1.12", 50 | "postcss-nested": "^0.3.2", 51 | "run-sequence": "~1.1.1", 52 | "sinon": "^1.15.3" 53 | }, 54 | "license": "ISC" 55 | } 56 | --------------------------------------------------------------------------------