Capture Side Effects in a Task

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>console.clear()</script>
    <!-- Scripts to allow in browser compiling -->
    <script src="https://unpkg.com/systemjs@0.19.41/dist/system.src.js"></script>
    <script>
        SystemJS.config({
            paths: {
                "npm:": "//unpkg.com/",
                "app/": "src/"
            },
            browserConfig: {
                "baseURL": "."
            },
            devConfig: {
                "map": {
                    "plugin-babel": "npm:systemjs-plugin-babel@0.0.17",
                    "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js"
                }
            },
            transpiler: "plugin-babel",
            packages: {
                "app": {
                    "main": "app.js",
                    "meta": {
                        "*.js": {
                            "loader": "plugin-babel"
                        }
                    }
                }
            }
        });

        SystemJS.config({
            map: {
                "data.task": "npm:data.task@3.1.1",
                "process": "npm:jspm-nodelibs-process@0.2.0"
            },
            packages: {               
                "data.task": {
                    "main": "lib/index.js",
                    "format": "cjs",
                    "meta": {
                        "*": {
                            "globals": {
                                "process": "process"
                            }
                        },
                        "*.json": {
                            "format": "json"
                        }
                    },
                    "map": {
                        "./lib": "./lib/index.js"
                    }
                }
            }
        });
    </script>
</head>

<body>
  <!-- // make console.log write to the page for better in-browser experience -->
  <script>
    (function () {
      var body = document.querySelector('body');
      body.style['fontFamily'] = 'monospace';
      body.style['fontSize'] = '2em';
      console.log = function (x) { body.innerText += x + '\n'; };
    }());
  </script>
    <script>
        System.import('app')
    </script>
</body>

</html>

import Task from 'data.task';


const launchMissiles = () =>
  new Task((rej, res) => {
    console.log('launch missiles!')
    res('missile')
  })

const app = launchMissiles().map(x => x + '!')

app
.map(x => x + '!')
.fork(e => console.error('err', e),
      x => console.log('success', x))