Last active
November 28, 2018 09:53
-
-
Save FND/40ac21e8cc18f2269b94 to your computer and use it in GitHub Desktop.
Riot.js with ES6 via webpack
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /node_modules | |
| /dist |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Riot.js with ES6 via webpack</title> | |
| </head> | |
| <body> | |
| <h1>Riot.js with ES6 via webpack</h1> | |
| <my-component></my-component> | |
| <script src="dist/bundle.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*global riot */ | |
| import "./dist/ui"; | |
| import { log } from "./util"; | |
| log("INFO", "hello world"); | |
| riot.mount("*"); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "scripts": { | |
| "compile": "riot ui.tag dist && webpack", | |
| "render": "node render.js" | |
| }, | |
| "dependencies": { | |
| "riot": "^2.3.1" | |
| }, | |
| "devDependencies": { | |
| "babel-core": "^6.1.4", | |
| "babel-loader": "^6.1.0", | |
| "babel-preset-es2015": "^6.1.4", | |
| "webpack": "^1.12.3" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*eslint-env node */ | |
| "use strict"; | |
| var riot = require("riot"); | |
| var myComponent = require("./ui.tag"); | |
| var html = riot.render(myComponent); | |
| console.log(html); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <my-component> | |
| <h3 onclick={ onClick }>{ title }</h3> | |
| <p>{ content }</p> | |
| <script> | |
| this.title = "Hello World"; | |
| this.content = "lorem ipsum dolor sit amet"; | |
| var self = this; | |
| this.onClick = function(ev) { | |
| self.content += " " + new Date(); | |
| self.update(); | |
| }; | |
| </script> | |
| </my-component> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function log(level, message) { | |
| console.log("[" + level + "]", message); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*eslint-env node */ | |
| "use strict"; | |
| var webpack = require("webpack"); | |
| var path = require("path"); | |
| module.exports = { | |
| entry: "./main.js", | |
| output: { | |
| path: __dirname + "/dist", | |
| filename: "bundle.js" | |
| }, | |
| resolve: { | |
| root: path.resolve("./node_modules") | |
| }, | |
| module: { | |
| loaders: [{ | |
| loader: "babel-loader", | |
| query: { | |
| presets: ["es2015"], | |
| cacheDirectory: true | |
| } | |
| }] | |
| }, | |
| plugins: [ | |
| new webpack.ProvidePlugin({ | |
| riot: "riot/riot" | |
| }) | |
| ] | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment