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
2
votes
0 answers

CycleJs - Unit Testing a Component with Mocha

I'm learning in cyclejs and rxjs and I'm struggling to write a unit test for one of the components I'm working on. I'm sorry for the long question. I have tried to simplify the question and this is the best I can do. Component does the following…
erdal
  • 421
  • 3
  • 10
2
votes
1 answer

Does cycle.js and motorcycle.js have Typescript definitions?

I'm wondering if there are tsd definitions for cycle.js, motorcycle.js, most.js and snabbdom.
jz87
  • 9,199
  • 10
  • 37
  • 42
2
votes
1 answer

How to subscribe to events without DOM modifications in cyclejs (motorcyclejs)?

How can i subscribe events from some DOM nodes if I do not want to produce changes in DOM? How can I achive something like this in cyclejs or motorcyclejs? function main({DOM}) { DOM.select('button').events('click').forEach(e => console.log(e)) …
mamciek
  • 37
  • 4
2
votes
1 answer

Cycle.js HTTP sending multiple requests after adding loading indicator

I have been attempting to create some cycle.js examples as nested dialogues, and switching between them using a select box. One of the dialogues is a clone of the official Github HTTP Search example. The other dialogue a more basic one which does…
SkaterDad
  • 71
  • 7
2
votes
4 answers

How to use Cycle.js without Browserify/Webpack?

Bower: I couldn't find a Bower package for @Cycle/Core, @Cycle/DOM, do these libraries exist? I'm confused at why there is an NPM package in the first place since Cycle.js is front-end based (and NPM is specialized for back-end only). ES5: Is it…
Exegesis
  • 1,028
  • 1
  • 18
  • 47
1
vote
0 answers

Cycle.js: What is the best way to handle File Drag and Drop

I want my Cycle.js web application to read data from a file dropped by the user on the page. I have something working by I'm not sure it is the right way to do it. Moreover, my component isn't easily testable because it needs a proper DragEvent with…
1
vote
1 answer

Cycle.js: Custom driver not emitting any event inside main()

I'm creating a custom cycle.js driver with the purpose of preloading images. The main function exports a sink stream imagesToLoad emitting an array of image URLs. Those are then loaded by the driver and should return a stream that emits when the…
Vogelino
  • 23
  • 5
1
vote
1 answer

Must there be a type assertion in non-initial reducers?

Since the type of of a reducer is defined as export type Reducer = (state: T | undefined) => T | undefined; In my reducers that are not the initial reducer, I must declare state = state as State Am I missing something, or is this considered a…
Shahar 'Dawn' Or
  • 2,713
  • 1
  • 26
  • 38
1
vote
1 answer

second merged branch ignored in XStreams

I'm working on a Cycle JS app using storage and state plugins. The app use xstream as reactive library. I'm incapped in a strange behaviour. My streams are as this diagram On first session var update I got this debug result: debug 0 debug 1 debug…
Fabiano Taioli
  • 5,270
  • 1
  • 35
  • 49
1
vote
1 answer

Unable to stream events within a mocked DOM source in CycleJs test

Given an isolated component built with CycleJs (the component works fine) : import isolate from '@cycle/isolate'; import { div, ul, li, a } from '@cycle/dom'; function intent(domSource){ const changeString$ = domSource …
krampstudio
  • 3,519
  • 2
  • 43
  • 63
1
vote
2 answers

Getting infinite loop using cycle-idb with text field for input

I've been trying to create a simple test app that takes user input from a text field, displays it, and also persists it with cycle-idb. But I keep falling into infinite loops, no matter what I do. Here's the whole main function: function…
1
vote
1 answer

how do I get xstream to combine mouse events?

I'm experimenting with drag-and-drop using cyclejs in a codepen. The standard drag methods supported by HTML 5 don't seem to support constraints on the movement of the dragged object so I went with standard mousedown/mousemove/mouseup. It works, but…
James Fremen
  • 2,170
  • 2
  • 20
  • 29
1
vote
1 answer

How to integrate HTML frameworks with Cycle.js?

I was wondering what are the practices to integrate HTML frameworks (bootstrap, uikit) with Cycle.js? I can see two different approaches: Have a fairly bulky static HTML that adds all the relevant menus, gadgets, ... of your page, which also loads…
1
vote
1 answer

Cycle.js getting input value on button click

I'm working on todo list sample app using Cycle.js and I came across following problem. I'm trying handle add new todo item when user clicks Add button, which works fine, but on the other hand I have a stream which provides text input change events…
ucesco
  • 33
  • 1
  • 4
1
vote
1 answer

Using cycle-onionify within a non-onionified Cycle.js app

I may be attempting something foolish, but I have a sufficiently-large non-onionified Cycle.js app and I’m trying to learn how onionify works, so I’d like to embed an onionified component into my original non-onion app. So I have a simple…
Ahmed Fasih
  • 6,458
  • 7
  • 54
  • 95