<template id="lively-network" data-name="Network">
    <style data-src="/templates/livelystyle.css"></style>
    <style>
    .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
        overflow: auto;
    }

    text {
      padding-left: 5px;
      padding-right: 5px;
      margin-top: 5px;
      margin-bottom: 5px;
      display: flex;
      flex-direction: row;
    }

    </style>
    <div class="container">
        <div id="text"></div>
    </div>

    <script type="lively4script" data-name="attachedCallback">
    () => {
      if (fetch.fetchData) {
        fetch.fetchData.watchers.push(this);
      } else {
        var fetchData = {activeRequests: [], watchers: [this]};
        var originalFetch = fetch;
        window.fetch = function() {
        	var idx = fetchData.activeRequests.length;
        	fetchData.activeRequests.push(arguments[0].toString());
        	fetchData.watchers.forEach(current => {
        	  current.update(fetchData.activeRequests);
        	});
        	var resultPromise = originalFetch.apply(this, arguments);
        	return new Promise((resolve, reject) => {
        		fetchData.activeRequests.splice(idx, 1);
        		fetchData.watchers.forEach(current => {
          	  current.update(fetchData.activeRequests);
          	});
        		resultPromise.then(resolve, reject);
        	});
        }
        fetch.fetchData = fetchData;
        fetch.original_fetch = originalFetch;
      }
    }
    </script>

    <script type="lively4script" data-name="detachedCallback">
    () => {
      fetch.fetchData.watchers = _.without(fetch.fetchData.watchers, this);
      if (fetch.fetchData.watchers.length === 0) {
        window.fetch = fetch.original_fetch;
      }
    }
    </script>
    
    <script type="lively4script" data-name="update">
    (requests) => {
      var i = this.shadowRoot.querySelector("#text");
      i.innerHTML = i.innerHTML + "<br>" + _.escape(requests.join("\n"))
    }
    </script>
</template>

<script class="registrationScript">lively.registerTemplate()</script>




Call attached and detached callbacks in components and build a simple watcher for network activity
Call attached and detached callbacks in components and build a simple watcher for network activity
