Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brodycj/hyperapp-rewrite-demo-on-inferno-and-superfine
https://github.com/brodycj/hyperapp-rewrite-demo-on-inferno-and-superfine
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/brodycj/hyperapp-rewrite-demo-on-inferno-and-superfine
- Owner: brodycj
- Created: 2018-03-29T15:02:46.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-02T19:45:00.000Z (almost 5 years ago)
- Last Synced: 2024-07-31T00:17:32.845Z (6 months ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hyperapp rewrite demo on Inferno and Superfine
from app generated by `create-react-app`
by Christopher J. Brody aka @brodybits (Chris Brody)
LICENSE: ISC OR MIT
## About
Simple counter app inspired by Hyperapp demo in , on Hyperapp rewrite working on both Inferno (React API) and Superfine (at the same time)
MOTIVATION:
-
- (desire to use Superfine as a dependency), especially rejected idea in (remove VDOM from Hyperapp)
See also:
- (MUCH SIMPLER IMPLEMENTATION on React Native)
- [hyperapp-api-demo-on-react-only branch](https://github.com/brodybits/hyperapp-rewrite-demo-on-inferno-and-superfine/tree/hyperapp-api-demo-on-react-only) - old branch
## Build and run
First step:
npm install
To run development build in browser:
* `npm run build-dev`
* open `dist/index.html` in browser
To make production build:
npm run build
## Quick tour
Initial state and actions (inspired by Hyperapp demo app in ):
```js
const initState = { count: 0 }
const actions = {
increase: (value) => (state) => ({ count: state.count + value }),
decrease: (value) => (state) => ({ count: state.count - value }),
}
```
JSX view function for Inferno (React API):
```jsx
const viewOnReactAPI = (state, actions) => (
Hyperapp API demo on Inferno (React API)
actions.decrease(1)}>-1
{state.count}
actions.increase(1)}>+1
)
```
View for Superfine using Hyperscript (, see also and sample at ):
```js
const viewOnSuperfine = (state, actions) =>
h("div", {},
h("h1", {}, "Hyperapp API demo on Superfine"),
h("button", { onclick: () => actions.decrease(1) }, "-1"),
h("b", {}, state.count),
h("button", { onclick: () => actions.increase(1) }, "+1"),
)
```
Note that the button `onclick` property is in Camel case (`onClick`) on React API but NOT on Superfine or Hyperapp (HTML5 button has `onclick` property NOT in Camel case).
To start render on Inferno (React API):
```js
startViewRenderReactAPI(initState, actions, viewOnReactAPI, document.getElementById('root'))
```
To start render on Superfine:
```js
startViewRenderSuperfine(initState, actions, viewOnSuperfine, document.body)
```
Rendering utility function specialized for Inferno (React API):
```js
function startViewRenderReactAPI(initState, actions, view, elem) {
const renderView = (s, a) => render(view(s, a), elem)
startViewRender(initState, actions, view, renderView, renderView)
}
```
Rendering utility function specialized for Superfine:
```js
function startViewRenderSuperfine(initState, actions, view, containerElement) {
const myViewState = { element: null }
const renderViewPatch = (s, a) =>
myViewState.element = patch(myViewState.element, view(s, a), containerElement)
const renderFirstViewPatch = (s, a) => {
myViewState.element = renderViewPatch(s, a)
containerElement.appendChild(myViewState.element)
}
startViewRender(initState, actions, view, renderFirstViewPatch, renderViewPatch)
}
```
General view render utility function:
```js
function startViewRender(initState, actions, view, renderFirstViewPatch, renderViewPatch) {
const mystore = { state: initState }
const a2 = {}
const myhelper = (af) => (v) => {
mystore.state = af(v)(mystore.state)
renderViewPatch(mystore.state, a2)
}
// actions.keys().map( (k) => a2[k] = myhelper(actions[k]) )
for (let prop in actions) a2[prop] = myhelper(actions[prop])
renderFirstViewPatch(mystore.state, a2)
}
```
## TODO
**MAJOR IMPORTANCE:**
- [Dealing with "effects" (side effects) such as I/O & delay timers (#4)](https://github.com/brodybits/hyperapp-api-demo-on-inferno-and-ultradom/issues/4)
Other:
- [(BREAKING) View API changes from "Hyperapp 2.0", hopefully closer to standard functional component API (#5)](https://github.com/brodybits/hyperapp-api-demo-on-inferno-and-ultradom/issues/5)
- [CC0 (public domain) API specification (#1)](https://github.com/brodybits/hyperapp-api-demo-on-inferno-and-ultradom/issues/1)
- [Publish view render function modules (#2)](https://github.com/brodybits/hyperapp-api-demo-on-inferno-and-ultradom/issues/2)
- demo on codepen
- integrate with React Native
- TodoMVC app, likely based on
- better styling
- try on other React alternatives such as Preact, NervJS
- try with other frameworks from
- performance comparison with competing solutions such as using Redux