Introduction
RiotJS is getting common however nonetheless missing visibility in comparison with mastodons initiatives like Vue, React, and Angular.
Nevertheless, Riot is my first selection when making a front-end, right here is why:
- Minimal studying curve, Small API, Near HTML/JS requirements, no magic methods, it is accessible to everybody
- Performant and predictable
- “Every part you wished native the net elements API regarded like” talked about on their web site, and I do approve!
- Tiny construct when gzipped (in comparison with different front-ends)
- Good documentation
The event tooling is sort of broad, and one in every of my favourites is Vite. Nevertheless, I am unable to discover any documentation or tutorial to run Riot with Vite! That is why I wrote this text. Let’s repair that collectively.
This tutorial will undergo all of the steps to create a counter; the ultimate end result:
If you wish to have a look at the ultimate code, the GitHub repository: https://github.com/steevepay/riotjs-vite-setup
Construct and run Riot with Vite
Init and set up packages
Create a brand new listing
mkdir riot-vite-setup && cd riot-vite-setup
Init the node mission
npm init
Now it’s important to set up the next npm packages:
npm set up --save-dev riot vite
Nothing particular, however right here is a very powerful:
npm set up --save-dev rollup rollup-plugin-riot
Particulars:
-
Rollup: ViteJS makes use of Rollup beneath the hood as its default bundler for JavaScript modules. -
Rollup-plugin-riot: It’s a plugin that compiles Riot information inside rollup processes. With out it, Riot cannot be compiled and utilized by Vite.
Lastly, create a Vite configuration file, vite.conf.js:
import { defineConfig } from 'vite'
import riot from 'rollup-plugin-riot'
export default defineConfig({
root : course of.cwd() + '/consumer',
plugins : [riot()],
construct: {
minify : 'esbuild', /** https://vitejs.dev/config/build-options.html#build-minify */
goal : 'esnext' /** https://vitejs.dev/config/build-options.html#build-target */
}
})
Possibility particulars:
-
root: defines the mission root listing (the place index.html is positioned). In our case, it’s positioned inconsumer. -
goal: Browser compatibility goal for the ultimate bundle. -
minify: Minify the ultimate bundle,Esbuildis 20 ~ 40x sooner than Terser and only one ~ 2% worse compression. - Lean extra about Vite configuration: https://vitejs.dev/config/
Base mission
All of the front-end code will likely be positioned within the consumer listing. Let’s create three information:
-
consumer/index.html: entry level of your front-end, it’ll mount the Riot utility -
consumer/index.riot: Riot utility -
consumer/c-button.riot: Customized button element utilized by the applying.
At this stage, the basis listing ought to seem like:
bundle.json
package-lock.json
vite.config.js
consumer/index.html
consumer/index.riot
consumer/c-button.riot
The consumer/index.html is fairly fundamental. It imports and mounts the Riot utility:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RiotJS + ViteJS</title>
</head>
<physique>
<div id="root"></div>
<script kind="module">
/** Load riot.js **/
import * as riot from 'riot'
import App from './index.riot'
const mountApp = riot.element(App)
mountApp(doc.getElementById('root'))
</script>
</physique>
</html>
The consumer/index.riot imports the customized button c-button and defines three cases:
- one to extend the counter
- one to lower the counter
- one to print the counter
<app>
<div>
<h1> Riotjs + ViteJS </h1>
<c-button> { state.complete } </c-button>
<c-button major="true" onclick={ () => replace({ complete: state.complete + 1 }) }> Add </c-button>
<c-button hazard="true" onclick={ () => replace({ complete: state.complete - 1 }) }> Delete </c-button>
</div>
<script>
/** Load the customized button **/
import cButton from './c-button.riot';
export default {
/** Outline the customized button **/
elements : {
cButton
},
/** State of the counter **/
state : {
complete: 0
}
}
</script>
</app>
The consumer/c-button.riot accommodates a slot to vary the textual content and props to vary the type of the button (default/gray, major/purple, or hazard/orange):
<c-button >
<button class="btn{ props.major ? ' btn-primary' : '' }{ props.hazard ? ' btn-danger' : '' }">
<slot></slot>
</button>
</c-button>
Now we’ve got all the things to start out a improvement server to get a preview of the app!
Run stay preview
Begin the event server, then entry the stay preview on http://localhost:5173/ :
npm run dev
Et voilà, it is best to have the ability to enhance/lower the counter 🎉 You can also make code adjustments, and the preview will likely be refreshed mechanically.
🛟 When you want any assist, go away a remark.
Construct for manufacturing
Construct the entrance for manufacturing:
npm run construct
Constructed information are positioned within the dist listing.
Conclusion
Utilizing Vite makes the event of Riot utility tremendous straightforward:
- No-brain configuration
- environment friendly improvement server with HMR (Scorching Module Alternative), permitting you to see adjustments in your code immediately with out a full web page reload
- environment friendly construct system with tree-shaking
Thanks for studying! Cheers 🍻
