A framework based on streams.
To try the framework, run:
git clone https://github.com/recksjs/recks-starter-project.git
cd recks-starter-project
npm i
npm start
Or
Use this online sandbox
Intro article: https://dev.to/kosich/recks-rxjs-based-framework-23h5
import Recks from 'recks';
function App() {
return <h1>Hello world!</h1>
}
import Recks from 'recks';
import { timer } from 'rxjs';
function Timer() {
const ticks$ = timer(0, 1000);
return <div>
<h1>{ ticks$ }</h1>
<p>seconds passed</p>
</div>
}
import Recks from 'recks';
import { Subject } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
function Greeting() {
const name$ = new Subject();
const view$ = name$.pipe(
map(x => x ? `Hello, ${x}!` : ''),
startWith('')
);
return <div>
<input
placeholder="enter your name"
onInput={e => name$.next(e.target.value)}
/>
{ view$ }
</div>
}
import Recks from 'recks';
import { Subject } from 'rxjs';
import { scan, startWith } from 'rxjs/operators';
function Counter () {
const input$ = new Subject();
const view$ = input$.pipe(
startWith(0),
scan((acc, curr) => acc + curr)
);
return <div>
<button onClick={ ()=>input$.next(-1) }>minus</button>
{ view$ }
<button onClick={ ()=>input$.next( 1) }>plus</button>
</div>
}
import Recks from 'recks';
import { Subject } from 'rxjs';
import { withLatestFrom, takeUntil } from 'rxjs/operators';
function TextInputWithFocusButton(props$, { destroy$ }) {
const ref$ = new Subject();
const clicks$ = new Subject();
clicks$
.pipe(
withLatestFrom(ref$, (_, ref) => ref),
takeUntil(destroy$)
)
.subscribe(ref => {
ref.focus();
});
return (
<div>
<input ref={ref$} type="text" />
<button onClick={ ()=>clicks$.next(null) }>Focus the input</button>
</div>
);
}
import Recks from 'recks';
import { timer } from 'rxjs';
import { map } from 'rxjs/operators';
function Parent () {
return <div>{
timer(0, 1000).pipe(
map(i => <Child index={i} />)
)
}</div>
}
function Child (props$) {
const animal$ = props$.pipe(
map(props => props.index % 2 ? '🐱' : '🐭')
)
return <h1 style="text-align: center;">{animal$}</h1>
}
import Re from '../index';
function List () {
const items = ['a', 'b', 'c', 'd'];
return <ul>{
items.map(letter => <li key={letter}>{letter}</li>)
}</ul>
}
export { List }