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
3
votes
1 answer

Components, Isolate function, and 'referential transparency'

I have a (rather philosophical) question which refers to cyclejs components : Is isolate() referentially transparent?. Looking at the simplified code, reproduced thereafter, I could not discriminate any source of 'impurity'. Is that because the not…
user3743222
  • 18,345
  • 5
  • 69
  • 75
2
votes
1 answer

Cycle.js - How to get collection length in a collection item

I'm trying to add some behavior exclusively to the last item in a list in Cycle.js. I tried to use cycle-onionify to make a collection like so: const List = makeCollection({ item: Child, itemKey: (childState, index) => String(index), …
sliptype
  • 2,804
  • 1
  • 15
  • 26
2
votes
2 answers

How to execute javascript after DOM is loaded in cycle.js

How can I execute javascript after the DOM is loaded in cycle.js? I can't put it in my main() because the DOM is not loaded at that point. For context, I'm basically trying to initialize a fancy autocomplete which requires the target DOM element…
patrick
  • 16,091
  • 29
  • 100
  • 164
2
votes
1 answer

Typescript typings in Cyclejs for Mostjs stream interoperability?

I have a small component I'd like to provide property typings for similar to this example I'm using cyclejs with the mostjs stream library. This works: import { Sources } from '@cycle/run'; import { setup } from '@cycle/most-run'; import { div,…
tgk
  • 3,857
  • 2
  • 27
  • 42
2
votes
1 answer

Cyclejs and moving an element by x and y

I m studying cyclejs and having some trouble dealing with how to make a div movabble. To start, I have isolated 3 events that I have to compute mousedown mouseup mousemove The aim is to produce the move when map is down AND mousemove, and stop…
mfrachet
  • 8,772
  • 17
  • 55
  • 110
2
votes
1 answer

How to use mockDOMSource to test a stream of actions in Cycle.js?

I realize there is probably a better way using cycle/time, but I'm just trying to understand the basics. Somehow, my action$ stream doesn't seem to be running; I've tried to construct multiple mock doms using xs.periodic. The test framework is…
bbarker
  • 11,636
  • 9
  • 38
  • 62
2
votes
1 answer

Getting the API error response from CycleJS HTTPDriver

I'm trying out CycleJS with xstream and I can't find a way to both rescue an error (e.g. 422) and get the JSON response from the HTTP driver. To rescue from an error, I'm using xstream's replaceError which seems to work like this: sources.HTTP …
Svilen
  • 2,608
  • 24
  • 26
2
votes
2 answers

Creating Cycle.js reusable modules

Let's imagine, in a OO world, I want to build a Torrent object which listens to the network and lets me interact with it. It would inherit an EventEmitter and would look something like this: var torrent = new Torrent(opts) torrent.on('ready', cb) //…
Luca Matteis
  • 29,161
  • 19
  • 114
  • 169
2
votes
2 answers

List and Isolate 3 Items in Cycle.js

As a newbie i am trying to make List with 3 Items in Cycle.js. But code has bugs. I made jsbin and placed code below as well http://jsbin.com/labonut/10/edit?js,output Problem: when i click on last checkbox, it adds new checkbox (which i did't…
Vladimir Buskin
  • 614
  • 4
  • 8
2
votes
1 answer

How get file from POST request in CycleJS

I have write a Spring controller that takes json in request and responds pdf file. public ResponseEntity generateResp(...) byte[] gMapRep = Files.readAllBytes(file.toPath()); HttpHeaders httpHeaders = new HttpHeaders(); …
Nurlan Mirzayev
  • 1,120
  • 1
  • 7
  • 15
2
votes
3 answers

Making an arbitrary number of sequential, dependent requests with `cycle-http`

Are there any examples of making an arbitrary number of sequential, dependent http requests with cycle-http? I want to fetch every page from an API where the next request can only be made using data in the current page. I've tried to adapt this…
Robert K. Bell
  • 9,350
  • 2
  • 35
  • 50
2
votes
1 answer

How to create components from a JSON array in cycle js

Given the labeled slider component example from the Cycle js web site. How would I take a JSON array of slider information objects and create a labeled slider component for each Object in the array. for example if I had an array like this let…
TimCodes
  • 365
  • 2
  • 14
2
votes
1 answer

CycleDOM conditional rendering issue

I'm having an issue with conditional rendering. Here's my 100% working view: function todoItem(todo) { return li('.list-item',[ todo.editing ? input('.todo-edit', {type: 'text', value: todo.text, autofocus: true, attributes: { 'data-id':…
Felipe Skinner
  • 16,246
  • 2
  • 25
  • 30
2
votes
1 answer

CycleJS HTTP request$ not firing requests

New to CycleJS, I'm trying to read some data from an HTTP driver, and write to it when the user makes changes. I have the following: An initial request is just a simple GET. const initialRequest$ = Observable.just({url: ...}); Based on some…
nicholas
  • 14,184
  • 22
  • 82
  • 138
2
votes
2 answers

RxJS How to map a stream to the latest of a different stream?

I'm currently using Cycle.js and I'm attempting to get a stream for a text input when a form is submitted. For example: const textChange$ = DOMSource.select('input').events('change'); const textValueSubmit$ =…
SlyMcFly
  • 225
  • 4
  • 7