Skip to content

uriyang/callorie

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

55 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Callbag basics ๐Ÿ‘œ

Basic callbag ํŒฉํ† ๋ฆฌ ๋ฐ ์—ฐ์‚ฐ์ž ์‹œ์ž‘ํ•˜๊ธฐ. Callbag์€ ์ŠคํŽ™ ์ด์ง€๋งŒ, callbag-basics์€ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์‹ค์ œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

Highlights:

  • Reactive ์ŠคํŠธ๋ฆผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ง€์›
  • Iterable ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ง€์› (also!)
  • ๋™์ผํ•œ operator๊ฐ€ ์œ„์˜ ๋‘ ๊ฐ€์ง€์— ๋ชจ๋‘ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.
  • ์ž‘๋‹ค! ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ํฌ๊ธฐ๋Š” 7kB์— ๋ถˆ๊ณผํ•ฉ๋‹ˆ๋‹ค!
  • ๋น ๋ฅด๋‹ค! xstream ๋ฐ RxJS๋ณด๋‹ค ๋น ๋ฆ…๋‹ˆ๋‹ค
  • ํ™•์žฅ์„ฑ: ์ฝ”์–ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. callbag์€ ๋ชจ๋‘ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

Observable๊ณผ (๋น„๋™๊ธฐ) Iterable ๋ฅผ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋Š” ์ƒ์ƒ์„ ํ•ด๋ณด์„ธ์š”. ๊ทธ๊ฒŒ ๋ฐ”๋กœ callbag ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ, callbag spec์„ ๋”ฐ๋ฅด๋Š” ๋ช‡ ๊ฐ€์ง€ ๊ฐ„๋‹จํ•œ ์ฝœ๋ฐฑ(callbacks)์œผ๋กœ ๊ตฌํ˜„๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ๊ฐ€ ๊ฐ€๋ณ์Šต๋‹ˆ๋‹ค. ๊ทธ ๊ฒฐ๊ณผ๋กœ callbag์€ ์ž‘๊ณ  ๋น ๋ฆ…๋‹ˆ๋‹ค.

์‚ฌ์šฉ๋ฐฉ๋ฒ•

npm install callbag-basics

์—ฐ์‚ฐ์ž ๋ฐ ํŒฉํ† ๋ฆฌ๋ฅผ Import ํ•˜๋Š” ๋ฐฉ๋ฒ•:

const {forEach, fromIter, map, filter, pipe} = require('callbag-basics');

์˜จ๋ผ์ธ์œผ๋กœ ํ•ด๋ณด๊ธฐ

Reactive ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์˜ˆ์ œ

์š”์†Œ์˜ ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ๋ฐ›์•„ XY ์ขŒํ‘œ๋ฅผ ์ถœ๋ ฅ ํ•ฉ๋‹ˆ๋‹ค:

const {forEach, fromEvent, map, filter, pipe} = require('callbag-basics');

pipe(
  fromEvent(document, 'click'),
  filter(ev => ev.target.tagName === 'BUTTON'),
  map(ev => ({x: ev.clientX, y: ev.clientY})),
  forEach(coords => console.log(coords))
);

// {x: 110, y: 581}
// {x: 295, y: 1128}
// ...

์›€์ง์ด๋Š” ์‹œ๊ณ„์˜ ์ดˆ์‹ฌ์ด ๊ฐ€๋ฆฌํ‚ค๋Š” ์ฒ˜์Œ 5๊ฐœ์˜ ํ™€์ˆ˜๋ฅผ ์ถœ๋ ฅ ํ•ฉ๋‹ˆ๋‹ค.

const {forEach, interval, map, filter, take, pipe} = require('callbag-basics');

pipe(
  interval(1000),
  map(x => x + 1),
  filter(x => x % 2),
  take(5),
  forEach(x => console.log(x))
);

// 1
// 3
// 5
// 7
// 9

Iterable ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์˜ˆ์ œ

ํŠน์ • ๋ฒ”์œ„์—์„œ ์ˆซ์ž 5๊ฐœ ์„ ํƒํ•˜๊ณ  4๋กœ ๋‚˜๋ˆˆ ๋‹ค์Œ, ์ถœ๋ ฅ ํ•ฉ๋‹ˆ๋‹ค.

const {forEach, fromIter, take, map, pipe} = require('callbag-basics');

function* range(from, to) {
  let i = from;
  while (i <= to) {
    yield i;
    i++;
  }
}

pipe(
  fromIter(range(40, 99)), // 40, 41, 42, 43, 44, 45, 46, ...
  take(5), // 40, 41, 42, 43, 44
  map(x => x / 4), // 10, 10.25, 10.5, 10.75, 11
  forEach(x => console.log(x))
);

// 10
// 10.25
// 10.5
// 10.75
// 11

API

callbag์— ํฌํ•จ๋œ ํ•จ์ˆ˜ ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค.

Source factories

Sink factories

Transformation operators

Filtering operators

Combination operators

Utilities

More

์„ค๋ช…

  • source: ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” callbag
  • sink: ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›๋Š” callbag
  • puller sink: ๋ฐ์ดํ„ฐ๋ฅผ ์†Œ์Šค์— ๋Šฅ๋™์ ์œผ๋กœ ์š”์ฒญํ•˜๋Š” ๋ฐ›๋Š” callbag
  • pullable source: ์š”์ฒญ ์ˆ˜์‹ ์‹œ์—๋งŒ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ์†Œ์Šค
  • listener sink: ์†Œ์Šค๋กœ๋ถ€ํ„ฐ ์ˆ˜๋™์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์‹ ํ•˜๋Š” ์‹ฑํฌ
  • listenable source: ์š”์ฒญ์— ๋Œ€ํ•œ ๋Œ€๊ธฐ ์—†์ด, ์‹ฑํฌ์— ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๋Š” ์†Œ์Šค
  • operator: ๋‹ค๋ฅธ callbag์„ ๊ธฐ์ดˆ๋กœ ํ•˜๋Š” callbag

๊ธฐ์—ฌ๋ฐฉ๋ฒ•

Callbag์˜ ์ฒ ํ•™: ์Šค์Šค๋กœ ๋งŒ๋“œ์„ธ์š”. :) pr์„ ๋ณด๋‚ผ ์ˆ˜๋Š” ์žˆ์ง€๋งŒ, ๊ทธ๋Ÿฌ๋‚˜ ์ €์žฅ์†Œ ์†Œ์œ ์ž์˜ ์ˆ˜๋ฝ์„ ๊ธฐ๋Œ€ํ•˜์ง€ ๋งˆ์„ธ์š”. ํ”„๋กœ์ ํŠธ๋ฅผ ํฌํฌํ•˜๊ณ  ์›ํ•˜๋Š”๋Œ€๋กœ ์‚ฌ์šฉ์ž ์ •์˜ํ•˜๊ณ  ํฌํฌ๋ฅผ npm์— ๊ฒŒ์‹œํ•˜์‹ญ์‹œ์˜ค. ์ฝœ๋ฐฑ ์ŠคํŽ™์„ ๋”ฐ๋ฅด๋Š” ํ•œ ๋ชจ๋“  ๊ฒƒ์ด ์ƒํ˜ธ ์šด์šฉ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค! :)

About

๐Ÿ‘œ Tiny and fast reactive/iterable programming library

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 100.0%