https://github.com/shfrmn/cycle-lot

Handle dynamic lists of Cycle.js components with ease.
https://github.com/shfrmn/cycle-lot

collection cycle cyclejs isolate list typescript

Last synced: 2 months ago
JSON representation

Handle dynamic lists of Cycle.js components with ease.

• Host: GitHub
• URL: https://github.com/shfrmn/cycle-lot
• Owner: shfrmn
• License: mit
• Created: 2018-07-31T16:08:20.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-15T14:16:09.000Z (over 5 years ago)
• Last Synced: 2024-02-01T04:51:10.007Z (5 months ago)
• Topics: collection, cycle, cyclejs, isolate, list, typescript
• Language: TypeScript
• Homepage:
• Size: 21.5 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-cyclejs - shfrmn/cycle-lot - Handle dynamic lists of Cycle.js components with ease (full typesript support) (Libraries / Utilities)

README

        
# cycle-lot

Handle dynamic lists of [Cycle.js](https://github.com/cyclejs/cyclejs) components with ease.

Differences from [@cycle/collection](https://github.com/cyclejs/collection):

- Full typescript support

- Simpler API

### Install

`npm install cycle-lot`

### Create a collection

Let's assume we have a component named `Item` with following sinks:

```typescript

interface ItemSinks {

  dom: xs

  http: xs

  remove$: xs

}

```

You can choose any stream in your sinks to trigger component's removal. Here we use a special `remove$` stream for clarity.

```typescript

import {Lot} from "cycle-lot"

```

Alternatively you can import `Collection` which is just an alias.

You can also import `pickMerge` and `pickCombine` functions, however you probably won't need them.

Here's how you use `cycle-lot`:

```typescript

function MyComponent(sources) {

  // ...

  /** Add a new item every second */

  const item_sources$ = xs

    .periodic(1000) //

    .mapTo({

      // whatever sources Item requires

      dom: sources.dom,

      item: {}

    })

  // item_sources$ could also emit arrays of sources to simultaneously add multiple items

  const lot = Lot(Item, item_sources$, "remove$")

  lot.combine.dom // xs

  lot.merge.http // xs

  // ...

}

```

In case it got you curious, `cycle-lot` doesn't merge and combine all available sink streams. Instead it uses [proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) under the hood to provide getter-like functionality. In fact, nothing gets merged or combined unless you use it in your code. Repeated usage of the same getter will return the same stream object.