├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── build
    └── .gitkeep
├── package.json
├── src
    ├── components
    │   ├── header.tag
    │   ├── itemlist.tag
    │   └── menu.tag
    ├── css
    │   └── index.css
    ├── event-helper.js
    ├── index.html
    ├── index.js
    ├── pages
    │   ├── home.tag
    │   └── projects.tag
    ├── router.js
    └── stores
    │   └── itemstore.js
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .DS_Store
4 | build


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 | 
3 | This file contains all notable changes.
4 | 
5 | ### 1.0.0 - 2015-06-22
6 | 
7 | #### Added
8 | 
9 | * Initial version


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 webkid
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Riot Starterkit
 2 | 
 3 | With this starterkit we want to provide **a simple foundation for Riot applications**. We are using the riot router and a flux inspired event controller called RiotControl.<br />
 4 | If you have any ideas on how to improve/simplify the structure you are welcome to help us.
 5 | 
 6 | This starterkit is based on:
 7 | 
 8 | * [Riot](https://muut.com/riotjs/)
 9 | * [RiotControl](https://github.com/jimsparkman/RiotControl/)
10 | * [PostCSS](https://github.com/postcss/postcss)
11 | * [Webpack](http://webpack.github.io/)
12 | 
13 | We are also using the following postcss plugins to process the CSS:
14 | 
15 | * [postcss-import](https://github.com/postcss/postcss-import)
16 | * [postcss-nested](https://github.com/postcss/postcss-nested)
17 | * [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties)
18 | * [autoprefixer](https://github.com/postcss/autoprefixer)
19 | * [csswring](https://github.com/hail2u/node-csswring)
20 | 
21 | 
22 | ## Get the kit
23 | 
24 | ```
25 | $ git clone git@github.com:wbkd/riotjs-startkit.git && cd riotjs-startkit
26 | ```
27 | 
28 | ## Installation
29 | 
30 | ```
31 | $ npm install
32 | ```
33 | 
34 | ## Development
35 | 
36 | ```
37 | $ npm run dev
38 | ```
39 | 
40 | Now the server is runnning on localhost:1337
41 | 
42 | 
43 | ## Build
44 | 
45 | ```
46 | $ npm run build
47 | ```
48 | 
49 | 
50 | 
51 | Thanks to https://github.com/txchen/feplay/tree/gh-pages/riot_webpack for a lot of concepts on how to structure the app.


--------------------------------------------------------------------------------
/build/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wbkd/riotjs-startkit/a98488fc8b8b20d3281b749a05af5b1ba5a03f07/build/.gitkeep


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "riot-startkit",
 3 |   "version": "1.1.0",
 4 |   "description": "A Riot - PostCSS - Webpack startkit from wbkd.io",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "html": "cpy ./src/index.html ./build/",
 8 |     "bundle": "webpack -p -d --progress --colors",
 9 |     "build": "npm-run-all html bundle",
10 |     "serve": "webpack-dev-server --hot",
11 |     "dev": "npm-run-all html serve"
12 |   },
13 |   "author": "webkid.io",
14 |   "license": "MIT",
15 |   "dependencies": {
16 |     "normalize.css": "^3.0.3",
17 |     "npm-run-all": "^1.3.2",
18 |     "riot": "^2.3.11",
19 |     "riotcontrol": "0.0.1"
20 |   },
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "https://github.com/wbkd/riotjs-startkit.git"
24 |   },
25 |   "devDependencies": {
26 |     "autoprefixer": "^6.3.3",
27 |     "babel": "^5.4.7",
28 |     "babel-core": "^5.4.7",
29 |     "babel-loader": "^5.1.3",
30 |     "cpy": "^3.4.1",
31 |     "css-loader": "^0.23.0",
32 |     "csswring": "^4.0.0",
33 |     "postcss-custom-properties": "^5.0.0",
34 |     "postcss-import": "^7.1.3",
35 |     "postcss-loader": "^0.8.0",
36 |     "postcss-nested": "^1.0.0",
37 |     "riotjs-loader": "^1.1.3",
38 |     "style-loader": "^0.13.0",
39 |     "webpack": "^1.9.10",
40 |     "webpack-dev-server": "^1.9.0"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/components/header.tag:
--------------------------------------------------------------------------------
1 | import './menu.tag';
2 | 
3 | <header class="clearfix">
4 |   <h1>Test Application</h1>
5 |   <menu></menu>
6 | </header>


--------------------------------------------------------------------------------
/src/components/itemlist.tag:
--------------------------------------------------------------------------------
 1 | <itemlist>
 2 |   <h3>{ opts.title }</h3>
 3 | 
 4 |   <ul>
 5 |     <li each={ items } >{ this.name }</li>
 6 |   </ul>
 7 | 
 8 |   <script>
 9 |     this.items = [];
10 | 
11 |     this.on('mount', () => {
12 |       riot.control.trigger(riot.EVT.loadItems);
13 |     });
14 | 
15 |     riot.control.on(riot.EVT.loadItemsSuccess, items => {
16 |       this.items = items;
17 |       this.update()
18 |     });
19 |   </script>
20 | </itemlist>


--------------------------------------------------------------------------------
/src/components/menu.tag:
--------------------------------------------------------------------------------
 1 | <menu>
 2 |   <ul class="clearfix">
 3 |     <li each={ navItems } onclick={parent.route} class={ active : parent.currentView === this.view}>{ this.title }</li>
 4 |   </ul>
 5 | 
 6 | 
 7 |   <script>
 8 | 
 9 |     this.currentView = riot.routeState.view;
10 | 
11 |     this.navItems = [
12 |       { title : 'Home', view : 'home'},
13 |       { title : 'Projects', view : 'projects' }
14 |     ];
15 | 
16 |     this.route = (evt) => {
17 |       riot.route(evt.item.view)
18 |     };
19 | 
20 |   </script>
21 | </menu>


--------------------------------------------------------------------------------
/src/css/index.css:
--------------------------------------------------------------------------------
 1 | @import '../../node_modules/normalize.css/normalize.css';
 2 | 
 3 | :root {
 4 |   --headerColor : #111;
 5 |   --mainColor: #f1f1f1;
 6 | }
 7 | 
 8 | .clearfix:after {
 9 |   content: "";
10 |   display: table;
11 |   clear: both;
12 | }
13 | 
14 | *{
15 |   margin:0;
16 |   padding:0;
17 |   box-sizing:border-box;
18 | }
19 | 
20 | body{
21 |   font-family: sans-serif;
22 |   background: var(--mainColor);
23 | }
24 | 
25 | header{
26 |   padding: 1em;
27 |   color:white;
28 |   background: var(--headerColor);
29 | 
30 |   h1{
31 |     float:left;
32 |     margin: 0;
33 |     font-size:1.25rem;
34 |   }
35 | 
36 | }
37 | 
38 | menu{
39 |   display:block;
40 |   float:right;
41 | 
42 |   ul{
43 |     list-style: none;
44 | 
45 |     li{
46 |       float:left;
47 |       margin-left:1em;
48 |       cursor:pointer;
49 |       user-select:none;
50 |       opacity: .7
51 |     }
52 | 
53 |     li:hover{
54 |       opacity: .5;
55 |     }
56 | 
57 |     li.active{
58 |       opacity: 1;
59 |     }
60 |   }
61 | }
62 | 
63 | .content{
64 |   padding: 1em;
65 | }
66 | 
67 | itemlist{
68 |   display:block;
69 | 
70 |   ul{
71 |     list-style: none;
72 |   }
73 | }


--------------------------------------------------------------------------------
/src/event-helper.js:
--------------------------------------------------------------------------------
 1 | import Riotcontrol from 'riotcontrol';
 2 | 
 3 | riot.control = Riotcontrol;
 4 | 
 5 | // event names
 6 | 
 7 | riot.EVT = {
 8 |   loadItems : 'load_items',
 9 |   loadItemsSuccess : 'load_items_success'
10 | }
11 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |   <meta charset="UTF-8">
 5 |   <title>Riot.js Starterkit</title>
 6 | </head>
 7 | <body>
 8 |   <div id="riot-app"></div>
 9 |   <script src="bundle.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import './css/index.css';
2 | 
3 | import './event-helper';
4 | import './stores/itemstore';
5 | import './router.js';
6 | 


--------------------------------------------------------------------------------
/src/pages/home.tag:
--------------------------------------------------------------------------------
1 | import '../components/header.tag';
2 | import '../components/itemlist.tag';
3 | 
4 | <home>
5 |   <header></header>
6 |   <div class="content">
7 |     <itemlist title="Item List ABC"></itemlist>
8 |   </div>
9 | </home>


--------------------------------------------------------------------------------
/src/pages/projects.tag:
--------------------------------------------------------------------------------
 1 | import '../components/header.tag';
 2 | import '../components/itemlist.tag';
 3 | 
 4 | <projects>
 5 |   <header></header>
 6 |   <div class="content">
 7 |     <h2>Projects</h2>
 8 |     <p>
 9 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
10 |       Aspernatur quia soluta optio excepturi, earum saepe explicabo veritatis fuga nesciunt, reprehenderit harum. 
11 |       Libero consequuntur neque fuga eos, aliquam id beatae eaque? 
12 |     </p>
13 |   </div>
14 | </projects>


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import './pages/home.tag'
 2 | import './pages/projects.tag'
 3 | 
 4 | // we need this to easily check the current route from every component 
 5 | riot.routeState = {
 6 |   view : ''
 7 | };
 8 | 
 9 | class Router{
10 | 
11 |   constructor(){
12 |     this._currentView = null;
13 |     this._views = ['home', 'projects'];
14 |     this._defaultView = 'home';
15 |     
16 |     riot.route(this._handleRoute.bind(this));
17 |     riot.route.exec(this._handleRoute.bind(this));
18 |   }
19 | 
20 |   _handleRoute(view){
21 | 
22 |     // load default view, if view is not in views list
23 |     if(this._views.indexOf(view) === -1){
24 |       return riot.route(this._defaultView);
25 |     }
26 | 
27 |     this._loadView(view); 
28 |   }
29 | 
30 |   _loadView(view){
31 |     if (this._currentView) {
32 |       this._currentView.unmount(true);
33 |     }
34 | 
35 |     riot.routeState.view = view;
36 |     this._currentView = riot.mount('#riot-app', view)[0];
37 |   }
38 | 
39 | }
40 | 
41 | export default new Router();


--------------------------------------------------------------------------------
/src/stores/itemstore.js:
--------------------------------------------------------------------------------
 1 | class ItemStore{
 2 | 
 3 |   constructor(){
 4 |     riot.observable(this);
 5 |     this.items = [];
 6 | 
 7 |     this.bindEvents();
 8 |   }
 9 | 
10 |   bindEvents(){
11 |     this.on(riot.EVT.loadItems, () => {
12 |       
13 |       // fake async op 
14 |       setTimeout(() => {
15 |         this.items = [{ name : 'test a' },{ name : 'test b' } ,{ name : 'test c' }, { name : 'test d' }];
16 |         this.trigger(riot.EVT.loadItemsSuccess, this.items);
17 |       }, 200);
18 | 
19 |     });
20 |   }
21 | 
22 | }
23 | 
24 | // add store to riot control
25 | let itemStore = new ItemStore();
26 | riot.control.addStore(itemStore);
27 | 
28 | export default itemStore;


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | 
 3 | // postcss plugins
 4 | var cssimport = require('postcss-import');
 5 | var customProperties = require('postcss-custom-properties');
 6 | var autoprefixer = require('autoprefixer');
 7 | var csswring = require('csswring');
 8 | var cssnested = require('postcss-nested');
 9 | 
10 | module.exports = {
11 |   entry: {
12 |     app : ['./src/index.js']
13 |   },
14 |   output: {
15 |     path: __dirname + '/build/',
16 |     filename: 'bundle.js'
17 |   },
18 |   devtool: 'eval',
19 |   debug: true,
20 |   plugins: [
21 |     new webpack.ProvidePlugin({
22 |       riot: 'riot'
23 |     })
24 |   ],
25 |   module: {
26 |     preLoaders: [
27 |       { test: /\.tag$/, exclude: /node_modules/, loader: 'riotjs-loader', query: { type: 'es6' } }
28 |     ],
29 |     loaders: [
30 |       { test: /\.js|\.tag$/, exclude: /node_modules/, include: /src/, loader: 'babel-loader', query: {modules: 'common'} },
31 |       { test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader' }
32 |     ]
33 |   },
34 |   postcss: [cssimport, cssnested, customProperties, autoprefixer, csswring],
35 |   devServer: {
36 |     contentBase: './build/',
37 |     port: 1337,
38 |     hot: true,
39 |     inline: true
40 |   }
41 | };


--------------------------------------------------------------------------------