CODEWITHSUNDEEP
javascriptcyclejs
Justin Bell
Justin Bell

Reputation: 396

Trying to understand tree structure composition in Cycle.js

I am currently learning Cycle.js through reading the official "docs" and any examples I can find. I am still working through some of the core concepts, and in particular have found myself stuck trying to understand how to form a top-level component. I think it is because I'm still struggling with how to work effectively with streams...

In my scenario, utilizing xstream and snabbdom, I have a list of items that I want to render in a ul>li format. I can see how my list translates to the li form:

const sampleItems$ = xs.fromArray([1, 2, 3, 4, 5]);
const liNodes$ = sampleItems$.map(item => li(item));

What I don't understand is how I can wrap the liNodes$ inside a ul without mutating an existing node, e.g.

const ulNode$ = liNodes$.fold((ul, li) => {
    ul.children.push(li);
    return ul;
}, ul([]));

I assume the above example is not the correct way to "nest" stream content within a container. I realize this could probably be provided by static markup, but would like to understand how to compose this structure with stream operators.

Upvotes: 0

Views: 73

Answers (1)

André Staltz
André Staltz

Reputation: 13994

When you write

const sampleItems$ = xs.fromArray([1, 2, 3, 4, 5]);

The result is a stream that emits the values 1, 2, 3, 4, 5, over time. On the other hand, if you write

const sampleItems$ = xs.of([1, 2, 3, 4, 5]);

The result is a stream that emits one value, and that value is the array [1, 2, 3, 4, 5]. This is probably what you want, because then you are able to do

const ulNode$ = sampleItems$.map(sampleItems =>
  ul(sampleItems.map(item =>
    li(item)
  )
);

Upvotes: 1

Related Questions