fpreact (Functional Preact)
fpreact provides an alternative api for creating preact components, heavily inspired by elm. The api includes redux style state management and lends itself to functional programming, avoiding the use of this
It has first class TypeScript support (it's written in it!), but also works great with regular JavaScript.
Install
npm i -S fpreact preact
Example
Find more in the examples folder.
TypeScript
import { h, render, component, Message } from 'fpreact';
enum Msg {
UpdateName,
}
interface Model {
name: string;
}
type Messages = Message<Msg.UpdateName, string>;
const Greet = component<Model, Messages>({
update(model = { name: 'world' }, msg) {
switch (msg.kind) {
case Msg.UpdateName:
return { ...model, name: msg.value };
}
return model;
},
view(model, dispatch) {
return (
<div>
<h1>Hello, {model.name}</h1>
<label>
<span>Name:</span>
<input value={model.name} onInput={dispatch(Msg.UpdateName)} />
</label>
</div>
);
},
});
render(<Greet />, document.body);JavaScript (ES6 + JSX)
import { h, render, component } from 'fpreact';
const Msg = {
// You don't have to use a number here.
// You could just as easily use "UPDATE_NAME" or anything else if you desire,
// just make sure each item has a unique value
UpdateName: 0,
};
const Greet = component({
update(model = { name: 'world' }, msg) {
switch (msg.kind) {
case Msg.UpdateName:
return { ...model, name: msg.value };
}
return model;
},
view(model, dispatch) {
return (
<div>
<h1>Hello, {model.name}</h1>
<label>
<span>Name:</span>
<input value={model.name} onInput={dispatch(Msg.UpdateName)} />
</label>
</div>
);
},
});
render(<Greet />, document.body);JavaScript (ES5)
'use strict';
var fpreact = require('fpreact');
var Msg = {
UpdateName: 0,
};
var Greet = fpreact.component({
update: function(model, msg) {
if (model == null) {
return { name: 'world' };
}
switch (msg.kind) {
case Msg.UpdateName:
return Object.assign({}, model, { name: msg.value });
}
return model;
},
view: function(model, dispatch) {
return fpreact.h(
'div',
null,
fpreact.h('h1', null, 'Hello, ', model.name),
fpreact.h(
'label',
null,
fpreact.h('span', null, 'Name:'),
fpreact.h('input', { value: model.name, onInput: dispatch(Msg.UpdateName) }),
),
);
},
});
fpreact.render(fpreact.h(Greet, null), document.body);