TheMcMurder/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script src='https://cdn.jsdelivr.net/npm/systemjs@6.2.3/dist/system.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/systemjs@6.2.3/dist/extras/amd.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/systemjs@6.2.3/dist/extras/named-exports.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/systemjs@6.2.3/dist/extras/named-register.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/systemjs@6.2.3/dist/extras/use-default.js'></script>
    <link rel='preload' as='script' href="https://cdn.jsdelivr.net/npm/@reactivex/rxjs@6.5.3/dist/global/rxjs.umd.js" crossorigin='anonymous'>
  </head>
  <body>
    <script type="systemjs-importmap">
      {
        "imports":{
          "rx": "https://cdn-integ.canopy.ninja/sofe/common-dependencies/78092c0936/rx.js",
          "rxjs":"https://cdn.jsdelivr.net/npm/@reactivex/rxjs@6.5.3/dist/global/rxjs.umd.js"
        }
      }
    </script>
    <script>
      // rxjs hack
      const originalResolve = System.resolve
      System.resolve = function (name) {
        if (name === 'rxjs/operators') {
          return 'rxjs-operators.js'
        } else {
          return originalResolve.apply(this, arguments)
        }
      }
      System.register('rxjs-operators.js', ['rxjs'], function(_export) {
        let rxjs = {}
        return {
          setters: [
            function (rxjsL) {
              rxjs = rxjsL
            }
          ],
          execute: function () {
            _export(rxjs.operators)
          }
        }
      })
    </script>
    <div>
      <button onClick='workingStream()'>Trigger observable stream</button>
    </div>
  </body>
  <script>
    function workingStream() {
      setTimeout(() => {
        Promise.all([
          System.import('rx'),
          System.import('rxjs'),
          System.import('rxjs/operators')
        ]).then(([rx, rxjs, operators]) => {
          console.log('operators', operators)
          console.log('rxjs', rxjs)
          const sub = rxjs.interval(1000).pipe(
            operators.tap((v) => console.log('v', v)),
            operators.finalize(() => {
              console.log('************************')
              console.log('finalize called')
              console.log('************************')
            })
          ).subscribe()
          setTimeout(() => {
            console.log('trigger unsubscribe on failing stream')
            sub.unsubscribe()
          }, 3000)
        })
      }, 3000)
    }
  </script>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title></title>
	<script src='https://cdn.jsdelivr.net/npm/systemjs@6.2.3/dist/system.js'></script>
	<script src='https://cdn.jsdelivr.net/npm/systemjs@6.2.3/dist/extras/amd.js'></script>
	<script src='https://cdn.jsdelivr.net/npm/systemjs@6.2.3/dist/extras/named-exports.js'></script>
	<script src='https://cdn.jsdelivr.net/npm/systemjs@6.2.3/dist/extras/named-register.js'></script>
	<script src='https://cdn.jsdelivr.net/npm/systemjs@6.2.3/dist/extras/use-default.js'></script>
	<link rel='preload' as='script' href="https://cdn.jsdelivr.net/npm/@reactivex/rxjs@6.5.3/dist/global/rxjs.umd.js" crossorigin='anonymous'>
	</head>
	<body>
	<script type="systemjs-importmap">
	{
	"imports":{
	"rx": "https://cdn-integ.canopy.ninja/sofe/common-dependencies/78092c0936/rx.js",
	"rxjs":"https://cdn.jsdelivr.net/npm/@reactivex/rxjs@6.5.3/dist/global/rxjs.umd.js"
	}
	}
	</script>
	<script>
	// rxjs hack
	const originalResolve = System.resolve
	System.resolve = function (name) {
	if (name === 'rxjs/operators') {
	return 'rxjs-operators.js'
	} else {
	return originalResolve.apply(this, arguments)
	}
	}
	System.register('rxjs-operators.js', ['rxjs'], function(_export) {
	let rxjs = {}
	return {
	setters: [
	function (rxjsL) {
	rxjs = rxjsL
	}
	],
	execute: function () {
	_export(rxjs.operators)
	}
	}
	})
	</script>
	<div>
	<button onClick='workingStream()'>Trigger observable stream</button>
	</div>
	</body>
	<script>
	function workingStream() {
	setTimeout(() => {
	Promise.all([
	System.import('rx'),
	System.import('rxjs'),
	System.import('rxjs/operators')
	]).then(([rx, rxjs, operators]) => {
	console.log('operators', operators)
	console.log('rxjs', rxjs)
	const sub = rxjs.interval(1000).pipe(
	operators.tap((v) => console.log('v', v)),
	operators.finalize(() => {
	console.log('************************')
	console.log('finalize called')
	console.log('************************')
	})
	).subscribe()
	setTimeout(() => {
	console.log('trigger unsubscribe on failing stream')
	sub.unsubscribe()
	}, 3000)
	})
	}, 3000)
	}
	</script>

	</html>