Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brodycj/hyperapp-like-native-view-demo
https://github.com/brodycj/hyperapp-like-native-view-demo
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/brodycj/hyperapp-like-native-view-demo
- Owner: brodycj
- Created: 2018-04-04T03:23:15.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-02T19:51:02.000Z (almost 5 years ago)
- Last Synced: 2024-07-31T00:17:32.812Z (6 months ago)
- Language: Objective-C
- Size: 234 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hyperapp-like native view demo
based on code generated by `react-native init`
by Christopher J. Brody aka @brodybits (Chris Brody)
LICENSE: ISC OR MIT
## About
Simple counter app demo with state/action management system based on [Hyperapp](https://github.com/jorgebucaran/hyperapp) API, using elements supported by [`react-primitives`](https://github.com/lelandrichardson/react-primitives#readme), working on React Native and [`react-native-web`](https://www.npmjs.com/package/react-native-web). Inspired by Hyperapp demo in .
MOTIVATION:
- - desire to use Hyperapp API on React Native
-
- (desire to use Superfine as a dependency), especially rejected idea in (remove VDOM from Hyperapp)
- (desire to experiment with Hyperapp 2.0 API on React Native as well)
See also: - demo rewrite of Hyperapp state/action management working with functional (stateless) components on multiple VDOM APIs: Inferno (React API) and Superfine
NOTE: This project no longer conforms to the Hyperapp API for specifying actions and views. Version with partial conformance to Hyperapp 1.x API is available in the [`strict-api-1` branch](https://github.com/brodybits/hyperapp-like-native-view-demo/tree/strict-api-1).
## Build and run
First step: `npm install`
Android: `react-native run-android`
iOS: `react-native run-ios` or open [`ios/HyperappLikeNativeViewDemo.xcodeproj`](./ios/HyperappLikeNativeViewDemo.xcodeproj) and run from Xcode
## Run on codesandbox.io
(using [`react-native-web`](https://www.npmjs.com/package/react-native-web))
Paste the contents of [`App.js`](./App.js) into `App.js` in
(see [`react-native-web#quick-start`](https://github.com/necolas/react-native-web#quick-start))
### Using react-primitives
see below
## Quick tour
### Top-level
Top-level app functions with initial state, actions, effects (side effects such as I/O, timers, I/O, other asynchronous operations, and other non-pure functions), and view in JSX (partially inspired by Hyperapp demo app in ):
```jsx
const App = () => (
({ count: state.count + 1 }),
dn: (state) => ({ count: state.count - 1 }),
}}
effects={{
up3: (actions, effects) => {
actions.up()
setTimeout(effects.up2, 400)
},
up2: (actions, effects) => {
actions.up()
setTimeout(actions.up, 400)
},
dn3: (actions, effects) => {
actions.dn()
setTimeout(effects.dn2, 400)
},
dn2: (actions, effects) => {
actions.dn()
setTimeout(actions.dn, 400)
},
}}>
)
const MyAppView = ({ state, actions, effects }) => (
Hyperapp micro rewrite demo on React Native
···
···
{state.count}
···
)
export default App
```
### Generic ManagedAppView component
Generic `ManagedAppView` component that supports the Hyperapp action/state/view API:
```js
const ManagedAppView = createReactClass({
getInitialState () {
const ac = {}
const ef = {}
const self = this
for (let a in this.props.actions) {
ac[a] = () => {
self.setState(prev => ({ ac: ac, st: (this.props.actions[a](prev.st)) }))
}
}
for (let e in this.props.effects) {
ef[e] = () => {
this.props.effects[e](ac, ef)
}
}
return { ac: ac, st: this.props.state, ef: ef }
},
render () {
return React.Children.map(this.props.children, ch => (
React.cloneElement(ch, { state: this.state.st, actions: this.state.ac, effects: this.state.ef })
))
}
})
```
### MyTouchButton component
Functional `MyTouchButton` component using `TouchableWithoutFeedback` imported as Touchable for portability to [`react-primitives`](https://github.com/lelandrichardson/react-primitives#readme):
```js
const MyTouchButton = (props) => {
const { onPress, title, ...other } = props
return (
{title}
)
}
```
### Demo styles
Demo styles with help from `react-native init` and guidance in :
```js
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
mybutton: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
})
```
## Use with react-primitives
### App.js changes for react-primitives
```diff
--- a/App.js
+++ b/App.js
@@ -17,9 +17,9 @@ import createReactClass from 'create-react-class'
import {
StyleSheet,
Text,
- TouchableWithoutFeedback as Touchable,
+ Touchable,
View
-} from 'react-native'
+} from 'react-primitives'
const App = () => (
* Apply the changes above to [App.js](./App.js) before pasting into codesandbox.io
### react-primitives on mobile app
* `npm install react-primitives`
* Apply the changes above to [App.js](./App.js)
## TODO
### Urgent
TBD
### Near-term
- Integrate build and run on browser using [`react-native-web`](https://github.com/necolas/react-native-web) ([#1](https://github.com/brodybits/hyperapp-like-native-view-demo/issues/1))
- Nice touch button onPress animation
### Future
- [(BREAKING) View API changes from "Hyperapp 2.0", hopefully closer to standard functional component API (brodybits/hyperapp-rewrite-demo-on-inferno-and-superfine#5)](https://github.com/brodybits/hyperapp-rewrite-demo-on-inferno-and-superfine/issues/5)
- Pass event data to action and effect functions
- [Make this even more functional (#7)](https://github.com/brodybits/hyperapp-like-native-view-demo/issues/7) ref:
- Publish generic (common) functionality in one or more npm packages
- improve styling
- [CC0 (public domain) API specification (brodybits/hyperapp-rewrite-demo-on-inferno-and-superfine#1)](https://github.com/brodybits/hyperapp-rewrite-demo-on-inferno-and-superfine/issues/1)
- demo on
- TodoMVC app, likely based on
- [other open issues](https://github.com/brodybits/hyperapp-like-native-view-demo/issues)