https://github.com/marcisbee/radi-pure
https://github.com/marcisbee/radi-pure
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/marcisbee/radi-pure
- Owner: Marcisbee
- License: mit
- Created: 2018-09-07T18:13:24.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-04T19:46:10.000Z (over 7 years ago)
- Last Synced: 2026-05-06T22:43:32.142Z (2 months ago)
- Language: JavaScript
- Size: 43 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# radi-pure
This is **Radi** core idea but user interface is as a pure functions. If this proves to be better than current Radi solutions, this will become Radi v1.0.
Experimental stuff!! You should not use it in production.
## Examples
Heres some very basic example of how components and rendering looks.
```jsx
/** @jsx h **/
const { h, mount } = RadiExperiment
function Hello() {
return (
Hello World !
)
}
mount(, document.body)
```
```jsx
/** @jsx h **/
const { h, mount, Store } = RadiExperiment
/* Firstly we define state */
const state = new Store({
count: 0
})
/* Then we define some actions that will change state */
const up = ({count}, by) => ({count: count + by})
const down = ({count}, by) => ({count: count - by})
/* Then comes pure function component */
function Counter() {
return (
{ state.render(s => s.count) }
state.dispatch(up, 1) }>Up
state.dispatch(down, 1) }>Down
)
}
/* Finally we mount it */
mount(, document.body)
```
So now everything is based on pure functions. Testing can be quite easy now. Only thing to test is output of functions.
Imagine this:
```jsx
const mockState = { count: 0 };
expect(Hello()).toBe('
Hello World !
')
expect(up(mockState, 1)).toBe(1)
expect(down(mockState, 1)).toBe(0)
expect(up(mockState, 10)).toBe(10)
expect(down(mockState, 10)).toBe(0)
```
Also not losing any of the responsiveness. For example lifecycles, totally there!
```jsx
const state = new Store({
person: {
name: 'John Doe'
}
})
function App() {
this.onMount = () => {}
this.onDestroy = () => {}
state.map(s => s.person).subscribe(({name}) => {
console.log('Persons name changed to', name)
})
return
}
```
## More about state management `.Store` & `.Fetch`
Also one truly annoying thing is to manage data coming from API, passing it to dozens of components. Intention is to eliminate this hustle.
What if you could just write your Schema for API calls and include it in your state and update it in any part of your app.
```jsx
// First we define Schema for our data from API
const User = new Fetch.get(
'/users/:id',
(data) => ({
id: data._key,
firstname: data.firstname,
lastname: data.lastname,
})
)
// Then we create store where we include our User Schema
const userStore = new Store({
foo: 'bar',
user: User({id: 10}),
})
// This part is not necessary, but for demo purpose it's here
// Here we inject `userStore` store into another store
const appStore = new Store({
person: {
fakeAge: 21,
data: userStore.inject,
}
})
// Finally we can use our data. API will gather data automatically
function App() {
return (
{appState.render(({person}) => (
person.data.firstname + ' ' + person.data.lastname
))}
)
}
```
It's possible to add store inside of another store and same for API returned data
## Stay In Touch
- [Twitter](https://twitter.com/radi_js)
- [Slack](https://join.slack.com/t/radijs/shared_invite/enQtMjk3NTE2NjYxMTI2LWFmMTM5NTgwZDI5NmFlYzMzYmMxZjBhMGY0MGM2MzY5NmExY2Y0ODBjNDNmYjYxZWYxMjEyNjJhNjA5OTJjNzQ)
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2018-present, Marcis (Marcisbee) Bergmanis