Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Géraud Henrion
@fuunnx
:)
Matthew Hayden
@mrehayden1
I wonder how much further it could we taken and still be useful? Maybe it could return stream that only returns a submission when there are no validation errors. Maybe it could be a component that submits to HTTP endpoint and merges in the server side errors.
Instead of collecting up the inputs like you did, I tend to serialize the form object on the submit event.
Géraud Henrion
@fuunnx
probably yes, depending on your needs
Matthew Hayden
@mrehayden1
I've noticed a slightly odd thing with cycle state and switching components. The state stream won't produce in an isolated component unless there is an explicit lens set.
Judson Lester
@nyarly
I just spun up a one-fits-all app, and npm start fails with ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
Matthew Hayden
@mrehayden1

I just spun up a one-fits-all app, and npm start fails with ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

I think you're possibly using webpack 5? I think I had the same issue. If not try the issues on the one-fits-all repo, I found the solution eventually.

Jan van Brügge
@jvanbruegge
yeah, the config was for webpack 4 and has not been updated
I plan to archive create-cycle-app because IMO a repository template would be a better and easier starting point (no magic)
Also unrelated: My blog post about by open source journey was published today: https://futurice.com/blog/my-open-source-journey
Matthew Hayden
@mrehayden1
Calling for more CVs for people interested in remote cycle.js work. Office hours are 9-5GMT.
1 reply
DM me if interested.
Judson Lester
@nyarly
After some distraction, I'm looking back to a toy cycle.js app. I spun it up with cycle-create-app, but it's only kind of working, and my "hello world" addition isn't running at all.
Notably, running the vanilla demo, it redirects to /counter, and that works fine. But reloading the page remains on /counter - but nothing happens.
I set up a very small component that maps the State to a small DOM fragment and changed the redirect to point at that, and it likewise results in a white page.
Debugging, it looks like replicateMany gets run on the sources and sinks... and then nothing.
Judson Lester
@nyarly
Maybe this is related to webpack 4? I haven't been able to figure out how this would work at all...
Géraud Henrion
@fuunnx
weird ! sometimes it's a silent error, try adding listeners to your sinks with : sink$.debug('sink').addListener({ error(e) { throw e } }) and see if something happens
Judson Lester
@nyarly
I can try that - but it looks like the sinks never get called. I'm fiddling with my dev setup so that I can do npm run build and look at that instead of npm run
Matthew Hayden
@mrehayden1
@nyarly maybe they're producing before anything is listening
are you switching components dynamically?
Judson Lester
@nyarly
No.
Géraud Henrion
@fuunnx
Is your component called ? do console.log('hey') gets called if you put it in the body of your component ?
Are other components called ?
Judson Lester
@nyarly
Sometimes. I need to get back to debugging it.
Rajasegar Chandran
@rajasegar
Have anybody tried bundling a cycle.js app using rollup? Is there a sample repo/code to look into?
Géraud Henrion
@fuunnx
I did not, but I would say any javascript code, cyclejs or not should work the same, or is Rollup so different than other bundlers ?
SouravBiki
@SouravBiki
Ok
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?
SouravBiki
@SouravBiki
You can find my code at cyclejs-community/awesome-cyclejs#113 and probably can show me a direction
Géraud Henrion
@fuunnx
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.