Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Rajasegar Chandran
@rajasegar
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/
Géraud Henrion
@fuunnx
Hi, first advice, you should separate your persistent state (the data that could be persisted in a database, your source of truth, here : the list of all people) from the derived state (the data that is displayed, here your filtered list)
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)
Bernard Jiang
@bernardjiang_gitlab
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?
pbittyscu
@pbittyscu
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?
pbittyscu
@pbittyscu
FYI - I code found a snippet in this chat on Oct 24, 2017. I'll see what I can do with that. LMK if you have any other suggestions for makeSortable.
Jan van Brügge
@jvanbruegge
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
Géraud Henrion
@fuunnx
Good evening
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
Géraud Henrion
@fuunnx
I finally managed something by creating my own operator, inspired by rxjs's shareReplay :
https://gist.github.com/fuunnx/30846090b99369e0a846aeb59248edaa
AxelRHD
@AxelRHD
Hello folks. I just discoverd Cycle.js and already love it. Playing around with the examples I wonder how I implement the Random User example with JSX, especially the user === null ? null : div( part. Is this example in JSX somewhere? Thank you so much. :)
pbittyscu
@pbittyscu
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?
pbittyscu
@pbittyscu
Possibly using the react driver with a component library something like one of these component libraries: Material Ui, React Foundation, Ant Design, React Toolbox, Semantic Ui React, React Boostrap?
AxelRHD
@AxelRHD
How do I make an initial HTTP request from API? Can I hook it in startWith() or how do I catch the event of document ready like in jQuery?
PEZO
@ZoliPeto_twitter

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.

  1. 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.
  2. Every event holds a reference to their “parents” which caused it, so it can be backtracked. Flat data, only TIME-dependent access.
  3. 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. :)

PEZO
@ZoliPeto_twitter
Also, infinite history problem must be addressed in cases 2 and 3 too, but it does not seem impossible like in case 1.
AxelRHD
@AxelRHD
Can I use a single HTTPDriver for multiple requests/endpoints? I can't get different sources together (combine, merge, etc.)
AxelRHD
@AxelRHD
Got it with the multiple requests: https://jsbin.com/kosehir/3/edit?js,output
Maybe not nice, but it works.
Géraud Henrion
@fuunnx
@AxelRHD yep that's how it's supposed to be used :)
Jan van Brügge
@jvanbruegge
btw, I recently ported over cycle/state, next milestone is the DOM driver
Géraud Henrion
@fuunnx
🎉
pbittyscu
@pbittyscu

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----

pbittyscu
@pbittyscu
I was able to achieve what I wanted by merging the updateDone stream and the updateOrder stream and then using fold on the resulting stream. Still open to better ways of doing it.
pbittyscu
@pbittyscu
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]);
Teoh Han Hui
@teohhanhui
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?
pbittyscu
@pbittyscu
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()
          }
        }
      )
Géraud Henrion
@fuunnx
could wraping your tested component with withState help you ?
pbittyscu
@pbittyscu
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);
});
Géraud Henrion
@fuunnx

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 ?

pbittyscu
@pbittyscu
Yes.
Géraud Henrion
@fuunnx
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);
pbittyscu
@pbittyscu
Thanks! Let me give it a try.
Bernard Jiang
@bernardjiang_gitlab
I prefer cyclejs app + react as renderer. But I could not find an example on how to use the third party react component in a cyclejs app. Can anyone share some ideas on this?
Bernard Jiang
@bernardjiang_gitlab
More specifically, I would like to use Cytoscape.js to draw flow charts in cyclejs app. I found react-cytoscapejs. But haven't figured out how to hook it up with cyclejs.
lesar
@lesar
why there is not an hydrate function for isomorphic app like react? How Cycle handle this application type? reading the example is not help much. sorry I'm new to Cycle
Nikhil Tilwalli
@ntilwalli
@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})) }
}
Sylvain Desvé
@sylvaindesve
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 ?
Sylvain Desvé
@sylvaindesve
OK, this was the problem indeed. I forced xstream to 11.14.0 and it worked.