Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jamesbirtles/fpreact
fpreact provides an alternative api for creating preact components, heavily inspired by elm.
https://github.com/jamesbirtles/fpreact
preact
Last synced: 13 days ago
JSON representation
fpreact provides an alternative api for creating preact components, heavily inspired by elm.
- Host: GitHub
- URL: https://github.com/jamesbirtles/fpreact
- Owner: jamesbirtles
- License: mit
- Created: 2017-10-11T21:59:21.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-15T14:40:51.000Z (about 7 years ago)
- Last Synced: 2024-05-21T13:04:05.853Z (6 months ago)
- Topics: preact
- Language: TypeScript
- Size: 23.4 KB
- Stars: 47
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-preact - FPreact - Provides an alternative api for creating preact components, heavily inspired by elm. (Uncategorized / Uncategorized)
README
# 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
```tsx
import { h, render, component, Message } from 'fpreact';
enum Msg {
UpdateName,
}
interface Model {
name: string;
}
type Messages = Message;
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 (
Hello, {model.name}
Name:
);
},
});
render(, document.body);
```
### JavaScript (ES6 + JSX)
```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 (
Hello, {model.name}
Name:
);
},
});
render(, document.body);
```
### JavaScript (ES5)
```js
'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);
```