(library not yet released, still in alpha)
This is a BYOF (Bring Your Own Framework) extension to cyclejs
Constituted of a set of experimental utilities revolving around the implementation of a scoped ambiant context and other niceties
yarn add cycle-hooks
npm install cycle-hooks --save
Wrap your toplevel component with withHooks(App, Object.keys(drivers))
import { withHooks } from 'cycle-hooks'
import { run } from '@cycle/run'
import { App } from './App.js'
const drivers = {
// your drivers
}
run(withHooks(App, Object.keys(drivers)), drivers)
TODO
function Timer() {
const [count$, add] = useSubject()
return {
DOM: count$.map((count) => (
<div>
Count :{count}
<button onClick={add}>Reset</button>
</div>
)),
}
}
Well, that's DOM-less Cycle component.
But thanks to the context API it's not necessary to pass sinks and sinks all the way. You can focus on your API. useSources
, registerSinks
and makeSubject
are your friends here.
If you want to test a component using this API, all you have to do is wrap it :
const sinks = withHooks(Component)(sources)
You can simulate 'effects' by providing a custom effects source:
// For now each Subject
is generating an unique symbol, which is impossible to simulate
const sinks = withHooks(Component)({ effects: xs.of(['effectKey', effectValue']) });
// Is this relevant ? those parts are mostly implementation details in components Then read them in the sinks
Time.assertEqual(sinks.effects.mapTo('x')), Time.diagram('--x--x--x'));
function App(sources) {
const Child_ = (args) => withSources({...sources, value: xs.of('Hello')}, () => Child(args))
return (
<Child_>
)
}
// Wellllllllllll could be better ?
function App(sources) {
const [childSinks, Child_] = gatherSinks(() => {
const gatherer = useContext(gathererKey)
return (props) => withContext(gathererKey, gatherer, () => Child(props))
})
registerSinks({
...childSinks,
HTTP: xs.never(),
})
return (
<Child_>
)
}
- cyrenajs
- cycle-next
- recksjs
- vue 3 composition api
- react hooks