cyclejs / todomvc-cycle

TodoMVC example implemented in Cycle.js

Cycle.js

A functional and reactive JavaScript framework for predictable code

Website | Packages | Contribute | Chat | Support

Welcome

Question	Answer
"I want to learn Cycle.js"	Read the official documentation
"I have a question"	Create a StackOverflow question Or Join the chat Or Open an issue Please note all discussion-like issues are labeled discussion and immediately closed. This doesn't mean we unconsidered your discussion. We only leave actual issues open.
"I found a bug"	Open an issue
"I want to help build Cycle.js"	Read the Contributing guides Then Choose an issue marked "help wanted"

Packages

Cycle.js is comprised of many specialized packages. This repository contains all these packages, e.g., the npm package @cycle/run lives in the directory run. Below you will find a summary of each package.

Package	Version	Dependencies	DevDependencies
@cycle/dom
@cycle/history
@cycle/html
@cycle/http
@cycle/isolate
@cycle/most-run
@cycle/run
@cycle/rxjs-run

Globally:

Stream libraries

The following packages are not under Cycle.js, but are important dependencies, so we display their latest versions for convenience.

Package	Version
most
rxjs
xstream

Support

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Thanks

Browserstack for providing access to their great cross-browser testing tools.

LICENSE

The MIT License

---

todomvc-cycle's Issues

TaskList does not receive Task actions

You cannot delete, edit or toggle active-state of a Task. Even though actions produced by the intent of Task are triggered, TaskList does not receive those item actions.

confirming the edition of a task yields an empty task

Steps to reproduce:

1. start the app
2. create a task (say '123')
3. double click on the created task to edit it (say you change it from '123' to '12345')
4. press Enter to confirm the edition

Expected result: task in "non-edited" mode with the label '12345'

Actually observed: empty task

Refactor propHook to avoid using class + this (to support goal of thisless JavaScript)

Apologies for this pedantic nitpick. With that disclaimer, I found this repo after reading the Cycle.js homepage, where it says:

thisless JavaScript: The use of functions and RxJS Observables allow for a JavaScript programming style without the this keyword. Cycle.js encourages you to create apps with functional practices. Without this, you can write more reusable code and define logic without tightly coupling it to data. See it for yourself, this cannot be found in Cycle.js TodoMVC.

The current implementation of propHook uses this, so I thought I’d propose implementing that utility differently to validate the “thisless JavaScript” assertion.

Feature Request: Use cycle-history

Hi,

in my opinion it would be nice, if todomvc-cycle could use cycle-history instead of the more custom initialHash/hashchange. I'd expect to see how to use "offical" modules ("official" in the sense of "a module in the https://github.com/cyclejs organisation") in this example to check how they can be used together (e.g. what is an idiomatic Cycle application?).

Todo Item intent: `doneEdit` action is fired twice on `keyup:enter`

Hi,
At this point

todomvc-cycle/src/components/TodoItem.js

Lines 23 to 27 in 2692a07

	DOM.select('.edit').events('keyup')
	.filter(ev => ev.keyCode === ENTER_KEY)
	.merge(DOM.select('.edit').events('blur', true))
	.map(ev => ({title: ev.target.value, type: 'doneEdit'}))
	)

keyup
and blur are fired when ENTER key is pressed. That way the model is written two times to localstorage.

How can we ignore blur event when keyup:ENTER is fired?
This should be done on intent or on model?

Sorry, I'm still learning RxJS.

update link to live example in repository description

The repository description refers to https://cycle.js.org/todomvc-cycle/ which does not exist. I suppose the right address is https://cyclejs.github.io/todomvc-cycle/

Cursor bugged when moving left with keyboard

https://twitter.com/BrandonBloom/status/539465843969908737

If you try to edit a TODO and press left arrow, cursor goes to EOL.

Should be fixed by updating virtual-dom to 0.0.23 in cycle.js.

active route button is not highlighted

The active route should be highlighted according to the reference TodoMVC, currently it is not.

todomvc-cycle becomes very slow with a lot of items (blocking script)

Hi,

First: congrats for the job done with cycle.js, I like the ideas behind this framework.

Now the problem I see is about a list with a lot of children observed by RxJS. In this todomvc example you can fill the localstorage with 2000 items, and see by yourself.

Here the way I produce the slowness by executing this in my developer tools and refreshing the page:

var store = { list: [] };
for (var i = 1; i <= 2000; i++) {
  store.list.push({ title: 'Todo' + i, completed: false, id: i });
}
localStorage.setItem('todos-cycle', JSON.stringify(store));

After this, complete a todo by clicking on it, and you can see a lot of scripting (mostly RxJS stuff):

Of course I think that 2000 todos is a little dumb :D, but maybe it make sense in another kind of app.

Why aren't the sources/sinks drivers?

Just curious about this, it surprised me but I'd guess it is well thought out.

Website link to this project is broken

With the site redesign the app seems to be gone.

Question about the views

Congrats on your Framework, I followed the egghead tuts and i am very interested in the Cyclejs paradigm. So my question is: Can you use an abstraction/framework on the view layer so you don't have to write your view in JS ? I prefer writing them in plain html and using "something" to pass in the values and do the mutations... Is this possible with Cyclesjs ?

Publish on tastejs/todomvc ?

Is there a reason why this TodoMVC example is not published on the main repo that hosts all examples ( https://github.com/tastejs/todomvc )?
It would be a good way for cyclejs to advertise itself among the other options people have when trying to choose a technology.

Here's an injection flow diagram if you want it

I threw this together to help me grok was was going on. It might be useful to other people too.

Question: How would you test the "Todos" component ?

Hi, I am new to cyclejs and Rx and, even if it completely twists my brain, I love it.

I am currently having a little problem with testing my components.
The case of a small independent component is, indeed, very easy to test. Simulating user interactions with the mockDOMSource cannot be easier :)
But when I am dealing with nested components, I am not sure how to do that in a nice clean way.

The case I am dealing with, is exactly the case of the Todos component in this repo. I have a component that renders a list of instances of a smaller component (eg the TodoItem). I don't really know how to test the destroy action for example.

The idea I came up with (which I am not very satisfied of) is to "publish"* the different part of the component (intent, model, view) and test every different aspect of the component separately. Then you can easily send action streams to the "model" part without having to mock user interactions.

The thing is, I like to think of my components as complete black boxes and it doesn't feel right to give "public" access to the different parts of the component.

So, I am asking you the question: how would you test the destroy action (or any other action from TotoItem that has consequence on the Todos component) ?

Thanks :)

*: publish might not be the correct word for it. When I say publish, I mean, either, exporting it in the component's module or splitting it in a separate module file so it can be imported latter on.

hash is removed from route change

The # needs to be preserved, otherwise the url is not navigable, resulting in a 404.

Show completed bug

Was just looking around and found that one.

compose+merge = one output event?

I'm looking at a todo Intent and I see the input 'enter' key event stream get composed:

...
.compose(s => xs.merge(s, sources.DOM.select('.edit').events('blur', true)))
.map(ev => ({title: ev.target.value, type: 'doneEdit'}))

Why doesn't the map step not fire twice: once for the enter event and again for the merged DOM.select statement under the compose step? When I run the todo app in the debugger, I only see the map step called once... even though it looks like it should be called twice.

Use immutable data structures in the Model to speed up perf

Alternative for route handling?

This line in src/intents/todos.js:

changeRoute$: Rx.Observable.fromEvent(window, 'hashchange')

breaks the concept of response observables comming from the user, I think that the hashchange event should come from the domDriver or other driver. It also makes testing hard, and adds a global reference that is not declared.