Skip to content

Instantly share code, notes, and snippets.

@JamesUlph

JamesUlph/esnextbin.md

Created February 9, 2016 06:58
Show Gist options
  • Save JamesUlph/a5996cdfa887f5ad37f5 to your computer and use it in GitHub Desktop.
Save JamesUlph/a5996cdfa887f5ad37f5 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<style>
body > div { padding:40px; }
</style>
</head>
<body>
<!-- put markup and other contents here -->
</body>
</html>
Raw
index.js
import { h, render } from 'preact-cycle';
/** @jsx h */
const App = ({ value, mutation }) => (
<div>
<button onClick={ mutation('value', v => v+1) }>Increment</button>
<p>Value: { value }</p>
<p>{value}</p>
</div>
);
render(App, { value: 0 }, document.body);
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"preact-cycle": "0.1.1"
}
}
Raw
transpiled.js
'use strict';
var _preactCycle = require('preact-cycle');
/** @jsx h */
var App = function App(_ref) {
var value = _ref.value;
var mutation = _ref.mutation;
return (0, _preactCycle.h)(
'div',
null,
(0, _preactCycle.h)(
'button',
{ onClick: mutation('value', function (v) {
return v + 1;
}) },
'Increment'
),
(0, _preactCycle.h)(
'p',
null,
'Value: ',
value
),
(0, _preactCycle.h)(
'p',
null,
value
)
);
};
(0, _preactCycle.render)(App, { value: 0 }, document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment