generator-webpack-riotjs
v0.6.0
Published
A base setup with riotjs and webpack, babel, autoprefixer. Optionally includes riot components from Riot Gear, and Riot Bootstrap.
Downloads
9
Maintainers
optureReadme
generator-webpack-riotjs
Description
Riotjs webpack template with super simple routing, and a RiotControl based dispatcher. The template comes as a full project with some collection data fetched from jsonplaceholder
Provides a ready to run webpack setup with riotjs, babel for ES2015 transforms, and autoprefixer for css.
Optional references to jQuery Modernizr Riot Bootstrap RiotGear
Installation
npm install -g generator-webpack-riotjsUsage
yo webpack-riotjsIt will create a folder with your defined app name. Go into that folder and run:
webpack-dev-serverThen open your browser at: http://localhost:8080
History
As this was started the intention was to create something that was easy to use when I needed to start a new riotjs project, and to avoid boilerplate. It has grown and for me developing this it has turned out to be a quite useful tool to stay on track and it has provided a stable and efficient workflow. Since this is still considered work in progress, please contribute, make suggestions
Riot Gear
Riot Gear will be included with all components in one file, not component by component. For more information on usage of Riot Gear components, please visit their website
Riot Bootstrap
Riot Bootstrap will be included with all components in one file, not component by component. For more information on usage of Riot Bootstrap components, please visit their website
Suggested workflow
The main idea is to create a setup with webpack that keeps out of the way, much like riotjs doesnt add walls to development. Still, there are some conventions added to this setup. Hopefully it adds to the joy of development instead of adding barriers. There is a yeoman generator included to create the boilerplate for tags, and it will create 2 files for each tag, one tag file for your html and javascript, and one file for your css. The tag requires the css so it will only be necessary to include the tag.
Add a new tag
yo riot-element my-new-tagthis creates a folder under app/tags/elements/my-new-tag with two file:.
my-new-tag.tag
require('./my-new-tag.css');
<my-new-tag>
<div>Hello from <span>The underworld</span></div>
<script>
this.on('update', function(){
});
this.on('mount', function(){
});
this.on('unmount', function(){
});
</script>
</my-new-tag>my-new-tag.css
my-new-tag {
display:block;
position:relative;
}Then go to app/index.js and add the following to require your tag.
require('./tags/elements/my-new-tag/my-new-tag');Edit public/index.html and add your tag to the page.
<body>
...
<my-new-tag></my-new-tag>
...
</body>and finally on your console
webpack-dev-server