victorporof/rxjs-async-stack-tagging.html

## rxjs-async-stack-tagging.html
<!-- macOS: open -a Google\ Chrome\ Canary --args --js-flags="--experimental-async-stack-tagging-api" -->
<!-- Linux: chrome --js-flags="--experimental-async-stack-tagging-api" -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import * as rxjs from "https://unpkg.com/rxjs@7?module";

      // Wraps `rxjs::from` to also schedule an async task.
      // Returns the task and the observable.
      function from(name, ...args) {
        const task = console.scheduleAsyncTask(name, true);
        const observable = rxjs.from(...args);
        return { task, observable };
      }

      // Wraps `Observable::subscribe` to run an async task with attribution.
      function subscribe(observable, task, f) {
        return observable.subscribe({
          next(...args) {
            console.startAsyncTask(task);
            f(...args);
            console.finishAsyncTask(task);
          },
          complete() {
            console.cancelAsyncTask(task);
          },
        });
      }

      // Example adapted from https://www.learnrxjs.io/learn-rxjs/operators/filtering/sample

      const sequence = from("Hello Task Attribution!", ["foo", "bar", "baz"]);
      const zipped = rxjs.zip(sequence.observable, rxjs.interval(1000));
      const piped = zipped.pipe(rxjs.sample(rxjs.interval(1500)));
      subscribe(piped, sequence.task, (value) => {
        console.trace(value);
        debugger;
      });
    </script>
  </head>
</html>
	<!-- macOS: open -a Google\ Chrome\ Canary --args --js-flags="--experimental-async-stack-tagging-api" -->
	<!-- Linux: chrome --js-flags="--experimental-async-stack-tagging-api" -->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script type="module">
	import * as rxjs from "https://unpkg.com/rxjs@7?module";

	// Wraps `rxjs::from` to also schedule an async task.
	// Returns the task and the observable.
	function from(name, ...args) {
	const task = console.scheduleAsyncTask(name, true);
	const observable = rxjs.from(...args);
	return { task, observable };
	}

	// Wraps `Observable::subscribe` to run an async task with attribution.
	function subscribe(observable, task, f) {
	return observable.subscribe({
	next(...args) {
	console.startAsyncTask(task);
	f(...args);
	console.finishAsyncTask(task);
	},
	complete() {
	console.cancelAsyncTask(task);
	},
	});
	}

	// Example adapted from https://www.learnrxjs.io/learn-rxjs/operators/filtering/sample

	const sequence = from("Hello Task Attribution!", ["foo", "bar", "baz"]);
	const zipped = rxjs.zip(sequence.observable, rxjs.interval(1000));
	const piped = zipped.pipe(rxjs.sample(rxjs.interval(1500)));
	subscribe(piped, sequence.task, (value) => {
	console.trace(value);
	debugger;
	});
	</script>
	</head>
	</html>