I have requirement of showing some data on the page on load. The data will come from httprequest. There will be another button. Clicking that button will show some other data coming from another httprequest. I am unable to do it. Initially the data is not shown on the page althoughv httprequest is getting fired. But button clicks work fine. How can I do it? Can you send me a code sample?
Hi, here is my anwser, hope it helps you : https://github.com/cyclejs-community/awesome-cyclejs/issues/113#issuecomment-739781965
Hi , I am new to Cycle.js, I am trying to build the 7GUIs CRUD example with Cycle, struggling with implementation in a purely reactive way, appreciate any help https://github.com/rajasegar/cycle-crud
https://eugenkiss.github.io/7guis/
https://eugenkiss.github.io/7guis/
Also, you should use the
propsmodule instead of attrs to update your inputs values. Here some explanations of the differences between attributes and properties : https://stackoverflow.com/a/53924373/6125124
(what I usually do is to only use the
props module on my code, except if I want to add an attribute usable for css selectors)
Hi All, I know how to set up a cyclej xstream flow statically at the beginning of the app. My question is how to set up/change it dynamically. My usage is that a piece of user data is only accessible after a user logs in. I can't create xstream during the initialization while the user data is not available. But after a user logs in, where and how shall I establish xstream to broadcast my data?
Hello All - I've been working with cycle.js for < 1 year and am trying to implement the makeSortable component. I've been able to get it working with the hard coded elements like in the examples but when attempting to plug in the sources from the real DOM I get errors like:
index.js:2177 TypeError: Cannot read property 'endWhen' of undefined Does anyone know where there is an example implementation of makeSortable besides the ones given in the repository which use a real DOM vs a hard coded set of html elements?
the error suggest that one of the things you pass in is not a stream but undefined. You could go into the debugger, break on exceptions and then look what exactly is undefined. Then work your way backwards
Otherwise if you show me some code, I might be able to spot an error. In general, these are the kinds of issues where typescript is really useful
Otherwise if you show me some code, I might be able to spot an error. In general, these are the kinds of issues where typescript is really useful
How would you implement an http cache with xstream/cyclejs ? I have difficulties
I can store the pending request$ in a
Map but the request is always made/recreated, whatever I do
I finally managed something by creating my own operator, inspired by rxjs's shareReplay :
https://gist.github.com/fuunnx/30846090b99369e0a846aeb59248edaa
https://gist.github.com/fuunnx/30846090b99369e0a846aeb59248edaa
Got the makeSortable component working! Thank you for your thoughts @jvanbruegge they were helpful in me figuring things out. The next task is to find a component library enable quick development that goes beyond just being able to sort anything. I see component authoring tools like polymer and slim.js, but was looking for examples and prebuilt component libraries used with cycle js that had the components already built and ready to plug into cycle.js app. Any thoughts on that?
I’m looking for a pattern, not sure if it exists.
I am working with xstream and I encounter this problem lately. I want to MATCH events based on their causation/dependency on each other.
Let’s say E1 (in Stream1) and E11 (in Stream11) caused E2 (in Stream2). Later, E2 causes E3 (in Stream3). When E3 happens, I want to know which event on Stream1 caused E3, so I am looking for E1, but how do I find it?
I have 3 ideas in theory, 1 seem to be trash in practice.
- Every event copies their “parents” data into itself as well, so it's whole history accessible in place. The problem is that it does not scale (loops), reminds me to a COLD stream, but much worse. Nested data, SPACE-dependent.
- Every event holds a reference to their “parents” which caused it, so it can be backtracked. Flat data, only TIME-dependent access.
- Creating a dedicated “history” stream (or just a simple list?) which has History Events, which contains the causality information by having references to Events in a shape like: {parents: Event[], child: Event}. Later I can backtrack events by filtering. Or maybe this history container can be more than just a list/stream, but an optimized object for that purpose.
What do you think? Do you have any idea / reference on that issue - maybe something in the FRP world? To me it’s kind of like a “scoping” thing.
This comes up over and over again and to me it looks much worse than me misusing the tools. But maybe I am. :)
Got it with the multiple requests: https://jsbin.com/kosehir/3/edit?js,output
Maybe not nice, but it works.
Maybe not nice, but it works.
I'm trying to use the makeSortable component where I have parent state updated for making http requests based on a sorted list. The issue I'm running into is that the updateDone$ stream is emitting the last oldIndex and newIndex from the previous event. When I drag and drop an element around the same index without crossing index boundaries, the stream from updateDone$ emits the last newIndex and oldIndex it emitted. This emission looks like the elements in my state should be swapped when the list sorting never changed. Here's a marble diagram and legend of what's happening. Question is: What's the best way to combine the streams to get the desired behavior? I've tried sampleCombine and a few other things.
a = [1,2]
b = [1,2]
c = [0,1]
d = [1,0]
e = [0,0]
-t---------f -t--------f -t--------f- -t--------f-(inProgress)
------------ ---------e- ------b----- -------b----(updateDone)
------------ ----c-d---- ----a------- ------------(updateOrder)Desired Behavior
------------ ---------e- ------b----- ------------
Actual Behavior
------------ ---------e- ------b----- -------b----
const updateDoneToggled = (done$, order$) => xs.merge(done$.map(done => [false, done]), order$.map(order => [true, order]))
.fold((acc, event) => {
if (event && event[0]) return [true, undefined]; // Order event - return toggle on (true)
if (acc && acc[0] && !event[0]) return [false, event[1]]; // Toggled with updateDone event
}, [false, undefined])
.filter(event => event && event[1] !== undefined)
.map(_ => _[1]);
does it make sense to create an OrbitDB driver? conceptually, what I'd like to do is to add persistence to (part of) the state.. could I wrap
@cycle/state somehow?
I'm trying to write a test for a component that uses makeSortable. I don't understand how to "wire" the test so that cycle reduces the state.stream with reducers defined in my component as well as get a reference to the sinks for the assertion. The best example I've seen this example that tests the example Counter given in the documentation but it adds its own listener to execute the reducer functions rather than invoking cycle to do this. https://github.com/uroborosjs/library/blob/7b44c36e1ba668015c54921bb914000e02d931cb/src/counter.test.ts Is this the recommended way of get a reference to the state stream for assertions. Is there a way to use the native cycle.js run or setup functions to execute the reducer functions on the stream instead of adding the listener in this code?
. state
. addListener
( { next:
(reducer: any) => {
state = reducer (state)
t.is(state, answers[0])
answers.shift()
}
}
)
I actually tried that but maybe I missed something? I'll take another look. This code has been through many iterations using attempts with different configurations of sources and drivers.
test('Update selectable procedures DOM stream when procedures are passed in the state stream.', (done) => {
const logger = (log) => console.log('superagent call', log);
const Time = mockTimeSource();
const empty$ = Time.diagram(`---------------|`).debug(ev => console.log(ev));
const state$ = Time.diagram(`-------b-------|`,
{ b: initTestStateReducer }).debug(ev => console.log(ev));
const toggle$ = Time.diagram(`-----------c---|`,
{ c: spsToggleEvent }).debug(ev => console.log(ev));
const SSE$ = makeSSEDriver()(empty$, 'empty');
const DOM$ = mockDOMSource({
'.spsListChk': {
change: toggle$
},
});
const HTTP$ = mockHTTPDriver(superagentConfig, logger)(empty$, 'empty');
// const sources = {
// DOM: DOM$,
// state: new StateSource(state$, 'state'),
// HTTP: HTTP$,
// SSE: SSE$
// };
const drivers = {
DOM: makeDOMDriver('.spsListChk'),
Time: timeDriver,
HTTP: mockHTTPDriver(superagentConfig, logger),
SSE: makeSSEDriver()
};
const sinks =
withState(sources => {
return Transform(sources)
})({
DOM: DOM$,
// state: new StateSource(state$, 'state'),
HTTP: HTTP$,
SSE: SSE$
});
// const { DOM: DOMView$, state: testStateSink$ } =;
const expectedState$ = Time.diagram(`-------b-------|`,
{ b: testInitState }).debug(ev => console.log(ev));
Time.assertEqual(sinks.state.stream, expectedState$);
Time.run(done);
});I guess your issue is that
- if you don't wrap with withState, you have access to the sinks and can provide a state source, but your component doesn't behave as expected because your state sinks are not wired to the state sources
- but if you wrap with withState, le component behaves as expected, but you can't inject state sources nor read the state sinks, so you can't test it
Is that correct ?
Ok, try this :
const injectedStateReducer$ = // your injected state reducer
const sinks = withState(sources => {
const sinks = Transform(sources)
return {
...sinks,
state: sinks.state.merge(injectedStateReducer$)
actualState$: sinks.state.stream
}
})
const expectedState$ = // your expected state
Time.assertEqual(sinks.actualState$, expectedState$);
Time.run(done);
@bernardjiang_gitlab to integrate a third party react component you use the
h function from @cycle/react like so:import {of} from 'rxjs'
import {h} from '@cycle/react';
import Editor from '@draft-js-plugins/editor';
function foo(props) {
return { react: of(h(Editor, {...props})) }
}
Hi all ! I have a problem which is not exactly Cycle.js but related as it has to do with xstream. I have a Cycle.js application that is working just fine. It uses xstream 11.12.0. When I upgrade to xstream 11.14.0 I get errors :
TS2345: Argument of type 'MemoryStream<State>' is not assignable to parameter of type 'Stream<State>'.
Property '_ils' is protected but type 'Stream<T>' is not a class derived from 'Stream<T>'.
My
yarn.lock contains both 11.12.0 and 11.14.0, could it be the cause ?