[Javascript] Broadcaster + Operator + Listener pattern -- 16. Map a Sequence Based on Values

In previous post, we have follow code:

const delayMessage = (message) => hardCode(message)(createTimeout(1000));
 
const sequence = (...broadcasters) => (listener) => {
  let broadcaster = broadcasters.shift();
  let cancel;
  let sequenceListener = (value) => {
    if (value === done && broadcasters.length) {
      broadcaster = broadcasters.shift();
      cancel = broadcaster(sequenceListener);
      return;
    }
    listener(value);
  };
  cancel = broadcaster(sequenceListener);
 
  return () => {
    cancel();
  };
};
 
let cancelMsgs = sequence(
  delayMessage("Hello"),
  delayMessage("I"),
  delayMessage("am"),
  delayMessage("Zhentian"),
  delayMessage("Wan")
)(log);
 
let inputClick = addListener("#input", "click");
inputClick(cancelMsgs);

Instead of cancel the 'delayMessage' in sequence like what we did in highlighted part.

We want this API:

let message = "Hello, my name is John!".split(" ");

let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
...
};

mapSequence((word) => delayMessage(word))(forOf(message))(console.log);

Hook things up:

1. Create innerBroadcaster

let message = "Hello, my name is John!".split(" ");

let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
  broadcaster((value) => {
    let innerBroadcaster = createBroadcaster(value);
    innerBroadcaster(listener);
  });
};

mapSequence((word) => delayMessage(word))(forOf(message))(console.log);

/*
Hello, 
Symbol(done)
my 
Symbol(done)
name 
Symbol(done)
is 
Symbol(done)
John! 
Symbol(done)
Symbol(done)
Symbol(done)
*/

All the data come in once. What we actually want is value come one by one.

2. Buffer the value:

Create buffer to hold value, and only create innerBroadcaster for the first time.

let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
  let buffer = []
  let innerBroadcaster
  
  broadcaster((value) => {
    if (innerBroadcaster) {
      buffer.push(value)
    } else {
      innerBroadcaster = createBroadcaster(value);
      innerBroadcaster(listener);
    }
  });

  console.log(buffer) //  ["my", "name", "is", "John!", Symbol(done)]
};

mapSequence((word) => delayMessage(word))(forOf(message))(console.log);

/*
Hello
Symbol(done)
*/

It only log out the first value, the rest values are inside buffer. Now we need to think about how to get those value out of buffer.

The idea is recusivly calling

innerBroadcaster(listener);

3. InnerListener

let message = "Hello, my name is John!".split(" ");

let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
  let buffer = [];
  let innerBroadcaster;
  let innerListener = (innerValue) => {
    if (innerValue === done) {
      if (buffer.length) {
        const value = buffer.shift();
        innerBroadcaster = createBroadcaster(value);
        innerBroadcaster(innerListener);

      }
　　　return
    }
    listener(innerValue);
  };
  broadcaster((value) => {
    if (innerBroadcaster) {
      buffer.push(value);
    } else {
      innerBroadcaster = createBroadcaster(value);
      innerBroadcaster(innerListener);
    }
  });

  console.log(buffer); //  ["my", "name", "is", "John!", Symbol(done)]
};

mapSequence((word) => delayMessage(word))(forOf(message))(console.log);

In the innerListener, we keep taking the value from buffer, then create innerBroadcaster and hookup with innerListener.

Now, it log out the message one by one.

Hello, 
my 
name 
is 
John!

Now we don't have the final 'Symbol(done)' logging out.

4. Add done:

let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
  let buffer = [];
  let innerBroadcaster;
  let innerListener = (innerValue) => {
    if (innerValue === done) {
      if (buffer.length) {
        const value = buffer.shift();
        if (value === done) {
          listener(done)
          return
        }
        innerBroadcaster = createBroadcaster(value);
        innerBroadcaster(innerListener);
      }
      return
    }
    listener(innerValue);
  };
  broadcaster((value) => {
    if (innerBroadcaster) {
      buffer.push(value);
    } else {
      innerBroadcaster = createBroadcaster(value);
      innerBroadcaster(innerListener);
    }
  });

  console.log(buffer); //  ["my", "name", "is", "John!", Symbol(done)]
};

5. Edge cases... Be aware the for the scenarios where the done status is not catch, sometimes this can happen because of the inner broadcasting could be not re-assigned.

let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
  let buffer = [];
  let innerBroadcaster;
  let innerListener = (innerValue) => {
    if (innerValue === done) {
      innerBroadcaster = null // when innerValue is done, allow innerBroadcaster to be reassign
      if (buffer.length) {
        const value = buffer.shift();
        if (value === done) {
          listener(done)
          return
        }
        innerBroadcaster = createBroadcaster(value);
        innerBroadcaster(innerListener);
      }
      return
    }
    listener(innerValue);
  };
  broadcaster((value) => {
    if (innerBroadcaster) {
      buffer.push(value);
    } else {
      innerBroadcaster = createBroadcaster(value);
      innerBroadcaster(innerListener);
    }
  });

  console.log(buffer); //  ["my", "name", "is", "John!", Symbol(done)]
};

--Full Code--

import { addListener, done, createTimeout, forOf } from "./broadcasters";
import { repeatWhen, filter, hardCode } from "./operators";
import { pipe } from "lodash/fp";
 
let inputClick = addListener("#input", "click");
 
let state = (broadcaster) => (listener) => {
  let state = 3;
  return broadcaster((value) => {
    state--;
    listener(state);
  });
};
 
let doneIf = (condition) => (broadcaster) => (listener) => {
  let cancel = broadcaster((value) => {
    listener(value);
    if (condition(value)) {
      listener(done);
      cancel();
    }
  });
 
  return cancel;
};
 
let delayMessage = (message) => hardCode(message)(createTimeout(500));
 
let sequence = (...broadcasters) => (listener) => {
  let broadcaster = broadcasters.shift();
  let cancel;
  let sequenceListener = (value) => {
    if (value === done && broadcasters.length) {
      let broadcaster = broadcasters.shift();
      cancel = broadcaster(sequenceListener);
      return;
    }
    listener(value);
  };
 
  cancel = broadcaster(sequenceListener);
 
  return () => {
    cancel();
  };
};
 
let message = "Hello, my name is John!".split(" ");
 
let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
  let buffer = [];
  let innerBroadcaster;
  let innerListener = (innerValue) => {
    if (innerValue === done) {
      innerBroadcaster = null // when innerValue is done, allow innerBroadcaster to be reassign
      if (buffer.length) {
        const value = buffer.shift();
        if (value === done) {
          listener(done)
          return
        }
        innerBroadcaster = createBroadcaster(value);
        innerBroadcaster(innerListener);
      }
      return
    }
    listener(innerValue);
  };
  broadcaster((value) => {
    if (innerBroadcaster) {
      buffer.push(value);
    } else {
      innerBroadcaster = createBroadcaster(value);
      innerBroadcaster(innerListener);
    }
  });
 
  console.log(buffer); //  ["my", "name", "is", "John!", Symbol(done)]
};
 
mapSequence((word) => delayMessage(word))(forOf(message))(console.log);