Skip to content
Permalink
Browse files

Add Riot Example (#435)

* add riot example

* update manifest
  • Loading branch information...
msweeneydev committed Jul 22, 2019
1 parent 186b766 commit 6baa05e6f0694ee8f3c6f2a47712d7d94916fb4e
@@ -107,6 +107,12 @@
"demo": "https://charge.now-examples.now.sh",
"description": "A Charge app to get you up and running."
},
{
"example": "Riot.js",
"path": "/riot",
"demo": "https://riot.now-examples.now.sh",
"description": "A Riot app to get you up and running."
},
{
"example": "Jekyll",
"path": "/jekyll",
@@ -0,0 +1 @@
node_modules
@@ -0,0 +1,2 @@
README.md
yarn.lock
@@ -0,0 +1,13 @@
{
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"targets": [
"last 2 versions"
]
}
]
]
}
@@ -0,0 +1,2 @@
node_modules
public/bundle.js
@@ -0,0 +1,2 @@
README.md
yarn.lock
@@ -0,0 +1,21 @@
# Webpack

This is a simple example of using webpack with riot. It uses webpack loader [@riotjs/webpack-loader](https://www.npmjs.com/package/@riotjs/webpack-loader).

## Run locally

Download or clone this repo.

Install packages.

```bash
$ npm install
```
And then run the server using `webpack-dev-server` or any possible way you know

```bash
$ npm start
```

- Open [http://localhost:3000/](http://localhost:3000/)
- Open [http://localhost:3000/webpack-dev-server/](http://localhost:3000/webpack-dev-server/) for dev server with hot reloading.
@@ -0,0 +1,32 @@
{
"name": "riot-webpack",
"version": "0.0.1",
"description": "Example of webpack and riot",
"repository": "riot/examples",
"main": "app/main.js",
"author": "Zhomart Mukhamejanov",
"license": "MIT",
"engines": {
"node": ">=4.0.0"
},
"scripts": {
"start": "webpack-dev-server --inline --watch --hot --colors -d --port 3000",
"build": "webpack -p -d --progress --colors"
},
"keywords": [
"riot",
"webpack"
],
"devDependencies": {
"@babel/core": "7.4.5",
"@babel/preset-env": "7.4.5",
"babel-loader": "^8.0.6",
"riot": "^4.0.5",
"@riotjs/compiler": "^4.2.5",
"@riotjs/hot-reload": "4.0.0",
"@riotjs/webpack-loader": "^4.0.0",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.5.1"
}
}
@@ -0,0 +1,11 @@
<html>
<head>
<meta charset="UTF-8" />
<link href="styles.css" rel="stylesheet" />
<title>Riot on ZEIT Now</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js" charset="utf-8"></script>
</body>
</html>
@@ -0,0 +1,46 @@
body {
align-content: center;
box-sizing: border-box;
display: grid;
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
'Arial', sans-serif;
hyphens: auto;
line-height: 1.65;
justify-content: center;
margin: 0 auto;
max-width: 680px;
min-height: 100vh;
padding: 72px 0;
text-align: center;
}
h1 {
font-size: 45px;
}
a {
border-bottom: 1px solid white;
color: #0076ff;
cursor: pointer;
font-size: 45px;
text-decoration: none;
transition: all 0.2s ease;
width: fit-content;
}
a:hover {
border-bottom: 1px solid #0076ff;
}
button {
padding: 0.65em 1em;
background: #0076ff;
color: #fff;
border: none;
cursor: pointer;
text-transform: uppercase;
transition: all 0.2s ease;
width: fit-content;
}
button:hover {
background: rgba(0, 118, 255, 0.8);
}
button:focus {
box-shadow: 0 0 0 2px rgba(0, 118, 255, 0.5);
}
@@ -0,0 +1,13 @@
<logs>

<h2>Logs</h2>

<button onclick={props.onclear}>
Clear logs
</button>

<ul>
<li each={ log in props.logs }>{ log.text }</li>
</ul>

</logs>
@@ -0,0 +1,7 @@
import '@riotjs/hot-reload';
import { component } from 'riot';
import Random from './random.riot';

component(Random)(document.getElementById('app'), {
title: 'Hi there!'
});
@@ -0,0 +1,40 @@
<random>
<h1>{ props.title }</h1>

<button onclick={ generate }>
Generate
</button>

<h2>
{ state.number }
</h2>

<logs logs={ state.logs } onclear={ clearLogs }></logs>

<script>
import Logs from './logs.riot'

export default {
components: {
Logs
},
state: {
number: null,
logs: [],
},
generate(event) {
this.update({
number: Math.floor(Math.random() * 10000),
logs: this.state.logs.concat({
text: `Generate button clicked. Event type is ${ event.type }`
})
})
},
clearLogs() {
this.update({
logs: []
})
}
}
</script>
</random>
@@ -0,0 +1,38 @@
const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'public'),
publicPath: '/public/',
filename: 'bundle.js'
},
devtool: 'inline',
module: {
rules: [
{
test: /\.riot$/,
exclude: /node_modules/,
use: [
{
loader: '@riotjs/webpack-loader',
options: {
hot: true
}
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};

1 comment on commit 6baa05e

@now

This comment has been minimized.

Copy link

commented on 6baa05e Jul 22, 2019

Please sign in to comment.
You can’t perform that action at this time.