Hyperapp: [Question] How to setup Rollup config?
What's the proper way to configure my Rollup configuration to compile hyperapp's JSX into regular JavaScript?
bdsomer
All 6 comments
@lukejacksonn would know!
I still think rollup should only be used for libraries, but it is very simple to use. So for small projects (that don't need code splitting/dynamic imports/rust/WASM) then rollup will be fine 馃帀
selfup
on 1 Jan 2018
Perhaps try this with with jsx( {factory: 'h'} )?
Edit: nevermind, deprecated 馃檮
okwolf
on 1 Jan 2018
https://github.com/lukejacksonn/hyperapp-pwa/blob/master/rollup.config.js
or for a simpler config:
https://github.com/lukejacksonn/hyperapp-starter/blob/master/rollup.config.js
These boilerplates should be available under: https://github.com/hyperapp/awesome
selfup
on 1 Jan 2018
Hi @bdsomer! Thanks for trying out Hyperapp. The following instructions worked out for me:
In a new directory, create an index.html file:
<!doctype html>
<html>
<body>
<script src="bundle.js"></script>
</body>
</html>
import { h, app } from "hyperapp"
const state = {
count: 0
}
const actions = {
down: () => state => ({ count: state.count - 1 }),
up: () => state => ({ count: state.count + 1 })
}
const view = (state, actions) => (
<main>
<h1>{state.count}</h1>
<button onclick={actions.down}>-</button>
<button onclick={actions.up}>+</button>
</main>
)
app(state, actions, view, document.body)
npm i hyperapp
Install dev dependencies:
npm i -D \ rollup \ rollup-plugin-babel \ rollup-plugin-node-resolve \ rollup-plugin-uglify \ babel-core \ babel-preset-es2015-rollup \ babel-plugin-transform-react-jsx
Create a rollup.config.js file:
import babel from "rollup-plugin-babel"
import resolve from "rollup-plugin-node-resolve"
import uglify from "rollup-plugin-uglify"
export default {
plugins: [
babel({
babelrc: false,
presets: ["es2015-rollup"],
plugins: [["transform-react-jsx", { pragma: "h" }]]
}),
resolve({
jsnext: true
}),
uglify()
]
}
$(npm bin)/rollup -cf iife -i index.js -o bundle.js
Open index.html on your browser.
open index.html
jorgebucaran
on 1 Jan 2018
Closing as resolved, but anyone feel free to add your own incantations or recipes to the mix. 馃憢
jorgebucaran
on 1 Jan 2018
@JorgeBucaran This is perfect; thanks!
bdsomer
on 1 Jan 2018
Related issues
ghost
路
3Comments
jacobtipp
路
3Comments
zaceno
路
3Comments
dwknippers
路
3Comments
jamen
路
4Comments
Most helpful comment
@JorgeBucaran This is perfect; thanks!