rxjs list example to codepen

list-example.js

import { fromEvent, scan, Subject } from "https://cdn.skypack.dev/[email protected]";
import {
  switchMap,
  map,
  combineLatestWith
} from "https://cdn.skypack.dev/[email protected]/operators";

let items = [];

const subjectList = new Subject();
const subjectRemoveItem = new Subject();
const subjectAddItem = new Subject();

subjectAddItem.subscribe(newItem => {
  items.push(newItem);
  subjectList.next(items);
});

subjectList.subscribe(data => {
  // console.log('data:', data);
  const listElement = document.getElementById('list');
  listElement.innerHTML = '';
  const fragment = document.createDocumentFragment();
  data.forEach((item) => {
    const li = document.createElement("li");
    li.textContent = `${item.id}-${item.desc}`;
    fragment.appendChild(li);
  });
  listElement.appendChild(fragment);
})

subjectRemoveItem.subscribe(itemId => {
  console.log('removing???', itemId);
  items = [
    ...items.filter(item => item.id !== itemId)
  ]
  subjectList.next(items);
});

subjectAddItem.next({
  id: '0',
  desc: 'first item',
})

let i = 1;

const intervalId = setInterval(() => {
  i++;
  subjectAddItem.next({
    id: `${i}`,
    desc: `new item ${i}`,
  })
}, 500)


setTimeout(() => {
  subjectRemoveItem.next('4');
}, 6000);