Questions tagged [cyclejs]

CycleJS is a fully reactive JavaScript framework for Human-Computer Interaction

Cycle.js: a functional and reactive JavaScript framework for cleaner code.

Your app and the external world as a circuit:

Your app and the external world as a circuit:

Cycle’s core abstraction is that your application is a pure function: main(). A function where inputs are read (sources) from the external world and outputs (sinks) are written to the external world. These side effects in the external world are managed by drivers: plugins that handle DOM effects, HTTP effects, and other side effects.

The internals of main() are built using Reactive programming primitives, which maximize the separation of concerns, providing a clean and fully declarative way of organizing your code. The dataflow is plainly visible, making it easy to read and understand the code.

Read more at cycle.js.org.

117 questions
1
vote
0 answers

How to use library a.k.a jointjs together with Cycle.js

Recently I was looking for an framework that I can use together with jointjs. So far I tried react/angular/angular2. I do wanna try out it with Cycle.js. But putting them together so 'old' stuff (jointjs) and cycle.js just overheads me. I know that…
vromanch
  • 939
  • 10
  • 22
1
vote
1 answer

Cycle.js how to close a popup by clicking outside it

I'm playing with the Cycle.js framework and have created a popup/overlay as a component. I have isolated the popup-component. The sources.DOM which I would normally use as the source of events is limited to the popup dom only. Is there a…
Jasper
  • 846
  • 7
  • 14
1
vote
1 answer

How to convert a Observable stream into individual updatable divs in Cyclejs with RxJS

I'm trying to take a random Observable stream of 10 objects each with properties like: {tileNum: '6', tileName: 'game-of-thrones' clickCount:'1'} next the clickCountneeds to increase every time an identical tileNum inside the object comes through…
cmdv
  • 1,693
  • 3
  • 15
  • 23
0
votes
1 answer

Checkbox type tag vanished using Cycle.JS with Snabbdom and Typescript (Parcel Bundler)

I have just tried to implement Typescript with a simple toggle-example in Cycle.JS. Here is the setup: package.json { "name": "parcel-cycle-playground", "version": "0.1.0", "main": "index.js", "scripts": { "dev": "parcel index.html" …
AxelRHD
  • 3
  • 2
0
votes
1 answer

What is the XStream imitate use case

The docs go over imitate use case, but I don't understand the example made. Where would you call a Parent function, is it like recursive? I'd like to see what the model function looks like, and what the child gets out of it.
janat08
  • 1,725
  • 2
  • 16
  • 27
0
votes
1 answer

In cyclejs, how to render a component with "if else"

function componentA(sources$) { return { dom$: ..., http$: ... } } function componentB(sources$) { return { dom$: ..., http$: ... } } function main(sources$) { sources$.props.pipe( …
0
votes
1 answer

Is it possible to use @cycle/state for local state?

It seems that @cycle/state was intended to be used once per app, wrapping main. Is that true? In other words, it seems that @cycle/state does not provide a solution for local state. And I am trying to figure out, whether reusing it inside the…
Shahar 'Dawn' Or
  • 2,713
  • 1
  • 26
  • 38
0
votes
1 answer

how do I rendering multiple components using xstreamjs

Suppose, I want to render 3 buttons which are mapped from Array export const homePage = soruces => { const array$ = xs.fromArray([1,2,3]) return { DOM: array$.map(e => { return
Patrick
  • 734
  • 11
  • 26
0
votes
1 answer

Cycle.js: Getting Stream, Expecting Blob

I'm trying to create a record audio stream. I'm creating a promise stream from navigator mediaDevices.getUserMedia then mapping that stream to a media recorder stream. Finally I want to create a blob stream with the media recorder stream. What I'm…
PAT-O-MATION
  • 1,907
  • 1
  • 20
  • 20
0
votes
1 answer

How do I sequence HTTP requests in a Cycle.JS login form component?

I am new to Cycle.JS. Please forgive the typescript errors as well! I'm using create-cycle-app. I made a simple login form component. It uses the DOM and HTTP drivers. I capture the submit event from the form and map it to a credential object…
Martin
  • 5,945
  • 7
  • 50
  • 77
0
votes
2 answers

cycle.js how to enable Access-Control-Allow-Origin (CORS)

Experimenting with the cyclejs javascript reactive frameworks and I'm new to the paradigm. I've set up a stream to read from an external URL (en.wikipedia.org) and get the following result: Cross-Origin Request Blocked: The Same Origin Policy…
willyab
  • 167
  • 1
  • 10
0
votes
1 answer

Cycle.js - Driver - PhoenixJS (Websockets)

We currently have a VueJS application and I am looking at migrating it to Cycle.js (first major project). I understand in Cycle.JS we have SI and SO for drivers (using adapt()); naturally a WebSocket implementation fits this as it has both read and…
0
votes
1 answer

Cannot get document keydown events with Object.assign

I am using sources.DOM.select('document').events('keydown') .map(ev => Object.assign({}, ev, {type: 'keydown'})) but the resulting stream gives objects with just the "isTrusted" property (and not "key", "code", etc.). Instead, with 'mousemove' I…
cmant
  • 453
  • 1
  • 5
  • 11
0
votes
1 answer

Can't switchPath 404s, fails to capture wildcard route

Feeding this into switchPath const Routes = { "/": Home, "/login": Login, '*': function(){return {DOM: xs.of(

404

)}} } navigating to /lossgin will log that current route/path is "/".
janat08
  • 1,725
  • 2
  • 16
  • 27
0
votes
1 answer

customizing one-fits-all by using rxjs instead of xstream

This great template comes with a set of defaults that I need to customize. One thing I could not resolve is how to replace the xstream library by rxjs. Any example somewhere?
user3743222
  • 18,345
  • 5
  • 69
  • 75