jsf.js_next_gen 4.0.1-alpha.0 → 4.0.1-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsf.js_next_gen",
-  "version": "4.0.1-alpha.0",
+  "version": "4.0.1-beta.2",
   "description": "A next generation typescript reimplementation of jsf.js",
   "main": "dist/window/faces.js",
   "scripts": {
@@ -23,7 +23,7 @@
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@types/chai": "^4.3.4",
     "@types/mocha": "^10.0.1",
-    "@types/node": "^18.14.6",
+    "@types/node": "^18.14.2",
     "@types/sinon": "^10.0.13",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "chai": "^4.3.7",
@@ -49,6 +49,6 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "mona-dish": "0.25.28"
+    "mona-dish": "0.26.0"
   }
 }

package/pom.xml

@@ -10,7 +10,7 @@
     </parent>
     <groupId>com.example</groupId>
     <artifactId>jsfs_js_ts</artifactId>
-    <version>0.0.1-SNAPSHOT</version>
+    <version>4.0</version>
     <name>jsfs_js_ts</name>
     <description>Demo project for Spring Boot</description>
 

package/src/main/typescript/@types/definitions/index.d.ts

@@ -50,10 +50,10 @@ declare global {
      *     <li> errorData.status : the error status message</li>
      *     <li> errorData.serverErrorName : the server error name in case of a server error</li>
      *     <li> errorData.serverErrorMessage : the server error message in case of a server error</li>
-     *     <li> errorData.source  : the issuing source element which triggered the requestInternal </li>
-     *     <li> eventData.responseCode: the response code (aka http requestInternal response code, 401 etc...) </li>
-     *     <li> eventData.responseText: the requestInternal response text </li>
-     *     <li> eventData.responseXML: the requestInternal response xml </li>
+     *     <li> errorData.source  : the issuing source element which triggered the request </li>
+     *     <li> eventData.responseCode: the response code (aka http request response code, 401 etc...) </li>
+     *     <li> eventData.responseText: the response text </li>
+     *     <li> eventData.responseXML: the response xml </li>
      * </ul>
      */
     interface IErrorData {
@@ -78,7 +78,7 @@ declare global {
     }
 
     interface Ajax {
-        request(element: Element, event?: Event, options?: Context): void;
+        request(element: Element, event?: Event, options?: Options): void;
         response(request: XMLHttpRequest, context?: Context): void;
     }
 

package/src/main/typescript/api/_api.ts

@@ -117,19 +117,19 @@ export module faces {
         /**
          * this function has to send the ajax requests
          *
-         * following requestInternal conditions must be met:
+         * following request conditions must be met:
          * <ul>
-         *  <li> the requestInternal must be sent asynchronously! </li>
-         *  <li> the requestInternal must be a POST!!! requestInternal </li>
-         *  <li> the requestInternal url must be the form action attribute </li>
-         *  <li> all requests must be queued with a client side requestInternal queue to ensure the requestInternal ordering!</li>
+         *  <li> the request must be sent asynchronously! </li>
+         *  <li> the request must be a POST!!! request </li>
+         *  <li> the request url must be the form action attribute </li>
+         *  <li> all requests must be queued with a client side request queue to ensure the request ordering!</li>
          * </ul>
          *
          * @param {String|Node} element: any dom element no matter being it html or jsf, from which the event is emitted
          * @param {EVENT} event: any javascript event supported by that object
          * @param {Map} options : map of options being pushed into the ajax cycle
          */
-        export function request(element: Element, event?: Event, options?: Context): void {
+        export function request(element: Element, event?: Event, options?: Options): void {
             Implementation.request(element, event, options)
         }
 
@@ -138,7 +138,6 @@ export module faces {
          * @param request the request object having triggered this response
          * @param context the request context
          *
-         * TODO add info on what can be in the context
          */
         export function response(request: XMLHttpRequest, context?: Context): void {
             Implementation.response(request, context);
@@ -153,10 +152,10 @@ export module faces {
          *     <li> errorData.status : the error status message</li>
          *     <li> errorData.serverErrorName : the server error name in case of a server error</li>
          *     <li> errorData.serverErrorMessage : the server error message in case of a server error</li>
-         *     <li> errorData.source  : the issuing source element which triggered the requestInternal </li>
-         *     <li> eventData.responseCode: the response code (aka http requestInternal response code, 401 etc...) </li>
-         *     <li> eventData.responseText: the requestInternal response text </li>
-         *     <li> eventData.responseXML: the requestInternal response xml </li>
+         *     <li> errorData.source  : the issuing source element which triggered the request </li>
+         *     <li> eventData.responseCode: the response code (aka http request response code, 401 etc...) </li>
+         *     <li> eventData.responseText: the request response text </li>
+         *     <li> eventData.responseXML: the request response xml </li>
          * </ul>
          *
          * @param errorFunc error handler must be of the format <i>function errorListener(&lt;errorData&gt;)</i>
@@ -189,7 +188,7 @@ export module faces {
          * @param funcs ... arbitrary array of functions or strings
          * @returns true if the chain has succeeded false otherwise
          */
-        export function chain(source, event, ...funcs: Array<Function | string>): boolean {
+        export function chain(source: HTMLElement | string, event: Event | null, ...funcs: Array<Function | string>): boolean {
             return Implementation.chain(source, event, ...(funcs as EvalFuncs));
         }
     }
@@ -278,7 +277,7 @@ export module myfaces {
      *
      * @param executionFunc the function to be executed upon ready
      */
-    export function onDomReady(executionFunc: () => void) {
+    export function onOnDomReady(executionFunc: () => void) {
         if(document.readyState !== "complete") {
             onReadyChain.push(executionFunc);
             if(!readyStateListener) {

package/src/main/typescript/impl/AjaxImpl.ts

@@ -17,7 +17,8 @@
 import {IListener} from "./util/IListener";
 import {Response} from "./xhrCore/Response";
 import {XhrRequest} from "./xhrCore/XhrRequest";
-import {Config, DQ, Lang, Optional} from "mona-dish";
+import {AsynchronousQueue} from "./util/AsyncQueue";
+import {AssocArrayCollector, Config, DomQuery, DQ, DQ$, Lang, LazyStream, Optional, Stream} from "mona-dish";
 import {Assertions} from "./util/Assertions";
 import {ExtConfig, ExtDomQuery} from "./util/ExtDomQuery";
 import {ErrorData} from "./xhrCore/ErrorData";
@@ -40,7 +41,7 @@ import {
     P_CLIENT_WINDOW,
     P_EVT,
     P_EXECUTE,
-    P_AJAX_SOURCE,
+    P_PARTIAL_SOURCE,
     P_RENDER,
     P_RESET_VALUES,
     P_WINDOW_ID,
@@ -51,8 +52,9 @@ import {
     VIEW_ID,
     $faces,
     EMPTY_STR,
+    CTX_PARAM_MF_INTERNAL,
     NAMED_VIEWROOT,
-    NAMING_CONTAINER_ID, CTX_PARAM_PPS, MYFACES_OPTION_PPS
+    NAMING_CONTAINER_ID, $nsp
 } from "./core/Const";
 import {
     resolveDefaults,
@@ -61,7 +63,6 @@ import {
     resolveTimeout, resolveViewId, resolveViewRootId, resoveNamingContainerMapper
 } from "./xhrCore/RequestDataResolver";
 import {encodeFormData} from "./util/FileUtils";
-import {XhrQueueController} from "./util/XhrQueueController";
 
 /*
  * allowed project stages
@@ -90,8 +91,6 @@ enum BlockFilter {
     params = "params"
 }
 
-
-
 /**
  * Core Implementation
  * to distinct between api and impl
@@ -111,7 +110,17 @@ export module Implementation {
  it provides following
 
  a) Monad like structures for querying because this keeps the code denser and adds abstractions
- that always was the strong point of jQuery, and it still is better in this regard than what ecmascript provides
+ that always was the strong point of jquery and it still is better in this regard than what ecmascript provides
+
+ b) Streams and lazy streams like java has, a pull stream construct, ecmascript does not have anything like it.
+ (it has array filters and maps, but ES2015 does not support flatMap)
+ Another option would have been rxjs but that would have introduced a code dependency and probably more code. We might
+ move to RXJS if the need arises, however. But for now I would rather stick with my small self grown library which works
+ quite well and where I can patch quickly (I have used it in several industrial projects, so it works well
+ and is heavily fortified by unit tests (140 testcases as time of writing this))
+ The long term plan is to eliminate the Stream usage as soon as we can move up to ES2019 (adding the missing
+ functions as shims, is a no go, because we are a library, and absolutey do not Shim anything which can leak
+ into the global namespace!)
 
  c) A neutral json like configuration which allows assignments of arbitrary values with reduce code which then can be
  transformed into different data representations
@@ -148,14 +157,12 @@ export module Implementation {
     import getMessage = ExtLang.getMessage;
     import getGlobalConfig = ExtLang.getGlobalConfig;
     import assert = Assertions.assert;
-    import ofAssoc = ExtLang.ofAssoc;
-    import collectAssoc = ExtLang.collectAssoc;
 
     let projectStage: string = null;
     let separator: string = null;
     let eventQueue = [];
     let errorQueue = [];
-    export let requestQueue: XhrQueueController<XhrRequest> = null;
+    export let requestQueue: AsynchronousQueue<XhrRequest> = null;
     /*error reporting threshold*/
     let threshold = "ERROR";
 
@@ -185,7 +192,7 @@ export module Implementation {
     /**
      * @return the project stage also emitted by the server:
      * it cannot be cached and must be delivered over the server
-     * The value for it comes from the requestInternal parameter of the faces.js script called "stage".
+     * The value for it comes from the request parameter of the faces.js script called "stage".
      */
     export function getProjectStage(): string | null {
         return resolveGlobalConfig()?.projectStage ??
@@ -211,21 +218,17 @@ export module Implementation {
      * @param event
      * @param funcs
      */
-    export function chain(source: any, event: Event, ...funcs: EvalFuncs): boolean {
-        // we can use our lazy stream each functionality to run our chain here.
+    export function chain(source: HTMLElement | string, event: Event | null, ...funcs: EvalFuncs): boolean {
+        // we can use our lazy stream each functionality to run our chain here..
         // by passing a boolean as return value into the onElem call
         // we can stop early at the first false, just like the spec requests
 
-        let ret;
-        funcs.every(func => {
-            let returnVal = resolveAndExecute(source, event, func);
-            if(returnVal !== false) {
-                ret = returnVal;
-            }
-            return returnVal !== false;
-        });
-        return ret;
-
+        return LazyStream.of(...funcs)
+            .map(func => resolveAndExecute(source, event, func))
+            // we use the return false == stop as an early stop, onElem stops at the first false
+            .onElem((opResult: boolean) => opResult)
+            //last ensures we run until the first false is returned
+            .last().value;
     }
 
     /**
@@ -275,7 +278,7 @@ export module Implementation {
 
         requestCtx.assignIf(!!windowId, P_WINDOW_ID).value = windowId;
 
-        // old non - spec behavior will be removed after it is clear whether the removal breaks any code
+        // old non spec behavior will be removed after it is clear whether the removal breaks any code
         requestCtx.assign(CTX_PARAM_REQ_PASS_THR).value = extractLegacyParams(options.value);
 
         // spec conform behavior, all passthrough params must be under "passthrough
@@ -307,14 +310,14 @@ export module Implementation {
         requestCtx.assign(ON_ERROR).value = options.value?.onerror;
 
         /**
-         * Fetch the myfaces config params
+         * lets drag the myfaces config params also in
          */
         requestCtx.assign(MYFACES).value = options.value?.myfaces;
 
         /**
          * binding contract the jakarta.faces.source must be set
          */
-        requestCtx.assign(CTX_PARAM_REQ_PASS_THR, P_AJAX_SOURCE).value = elementId;
+        requestCtx.assign(CTX_PARAM_REQ_PASS_THR, P_PARTIAL_SOURCE).value = elementId;
 
         /**
          * jakarta.faces.partial.ajax must be set to true
@@ -341,9 +344,6 @@ export module Implementation {
         // won't hurt but for the sake of compatibility we are going to add it
         requestCtx.assign(CTX_PARAM_REQ_PASS_THR, formId).value = formId;
         internalCtx.assign(CTX_PARAM_SRC_CTL_ID).value = elementId;
-        // reintroduction of PPS as per myfaces 2.3 (myfaces.pps = true, only the executes are submitted)
-        internalCtx.assign(CTX_PARAM_PPS).value = extractMyFacesParams(options.value)?.[MYFACES_OPTION_PPS] ?? false;
-
 
         assignClientWindowId(form, requestCtx);
         assignExecute(options, requestCtx, form, elementId);
@@ -424,7 +424,7 @@ export module Implementation {
             }
         } finally {
             if (clearRequestQueue) {
-                requestQueue.clear();
+                requestQueue.cleanup();
             }
         }
     }
@@ -467,12 +467,29 @@ export module Implementation {
         /*
          * the search root for the dom element search
          */
-        let searchRoot = new DQ(node || document.body).querySelectorAll(`form input [name='${P_CLIENT_WINDOW}']`);
+
+
+        let searchRoot = ((node) ? DQ.byId(node): DQ$("form"));
+        let inputs = searchRoot
+            .filterSelector(`input[name='${$nsp(P_CLIENT_WINDOW)}']`)
+            .orElseLazy(() => searchRoot.querySelectorAll(`input[name='${$nsp(P_CLIENT_WINDOW)}']`))
 
         /*
-         * lazy helper to fetch the window id from the window url
+         * lazy helper to fetch the window id from the included faces.js
          */
-        let fetchWindowIdFromUrl = () => ExtDomQuery.searchJsfJsFor(/jfwid=([^&;]*)/).orElse(null).value;
+        let fetchWindowIdFromJSFJS = () => ExtDomQuery.searchJsfJsFor(/jfwid=([^&;]*)/).orElse(null).value;
+
+        /*
+         * fetch window id from the url
+         */
+        let fetchWindowIdFromURL = function () {
+            const href = window.location.href, windowId = "jfwid";
+            const regex = new RegExp("[\\?&]" + windowId + "=([^&#\\;]*)");
+            const results = regex.exec(href);
+            //initial trial over the url and a regexp
+            if (results != null) return results[1];
+            return null;
+        };
 
         /*
          * functional double check based on stream reduction
@@ -482,7 +499,7 @@ export module Implementation {
          * @param value1
          * @param value2
          */
-        let differenceCheck = (value1: string, value2: string) => {
+        let differenceCheck = (value1: string, value2: string): string => {
             if(value1 == INIT) {
                 return value2;
             } else if (value1 == ALTERED || value1 != value2) {
@@ -496,15 +513,14 @@ export module Implementation {
          *
          * @param item
          */
-        let getValue = (item: DQ) => item.attr("value").value;
+        let getValue = (item: DQ): string => item.val as string;
         /*
          * fetch the window id from the forms
          * window ids must be present in all forms
          * or non-existent. If they exist all of them must be the same
          */
 
-        let formWindowId: Optional<string> = Optional.fromNullable(searchRoot.asArray
-            .map<string>(getValue).reduce(differenceCheck, INIT));
+        let formWindowId: Optional<string> = inputs.stream.map(getValue).reduce(differenceCheck, INIT);
 
 
         //if the resulting window id is set on altered then we have an unresolvable problem
@@ -513,7 +529,7 @@ export module Implementation {
         /*
          * return the window id or null
          */
-        return formWindowId.value != INIT ? formWindowId.value : fetchWindowIdFromUrl();
+        return formWindowId.value != INIT ? formWindowId.value : (fetchWindowIdFromURL() || fetchWindowIdFromJSFJS());
     }
 
     /**
@@ -542,7 +558,7 @@ export module Implementation {
         let formElements = element.deepElements.encodeFormElement()
 
         // encode them! (file inputs are handled differently and are not part of the viewstate)
-        return encodeFormData(new ExtConfig(formElements), resoveNamingContainerMapper(dummyContext));
+        return encodeFormData(formElements, resoveNamingContainerMapper(dummyContext));
     }
 
     /**
@@ -557,8 +573,8 @@ export module Implementation {
          * adds a new request to our queue for further processing
          */
         addRequestToQueue: function (elem: DQ, form: DQ, reqCtx: ExtConfig, respPassThr: Config, delay = 0, timeout = 0) {
-            requestQueue = requestQueue ?? new XhrQueueController<XhrRequest>();
-            requestQueue.enqueue(new XhrRequest(reqCtx, respPassThr, timeout), delay);
+            requestQueue = requestQueue ?? new AsynchronousQueue<XhrRequest>();
+            requestQueue.enqueue(new XhrRequest(elem, form, reqCtx, respPassThr, [], timeout), delay);
         }
     };
 
@@ -667,7 +683,7 @@ export module Implementation {
          * can deal with them either prefixed ir not
          * also resolves the absolute id case (it was assumed the server does this, but
          * apparently the RI does not, so we have to follow the RI behavior here)
-         * @param componentIdToTransform the componentId which needs post-processing
+         * @param componentIdToTransform the componentId which needs post processing
          */
         const remapNamingContainer = componentIdToTransform => {
             // pattern :<anything> must be prepended by viewRoot if there is one,
@@ -681,7 +697,7 @@ export module Implementation {
             const hasLeadingSep = componentIdToTransform.indexOf(SEP) === 0;
             const isAbsolutSearchExpr = hasLeadingSep || (rootNamingContainerId.length
                 && componentIdToTransform.indexOf(rootNamingContainerPrefix) == 0);
-            let finalIdentifier: string;
+            let finalIdentifier = "";
             if (isAbsolutSearchExpr) {
                 //we cut off the leading sep if there is one
                 componentIdToTransform = hasLeadingSep ? componentIdToTransform.substring(1) : componentIdToTransform;
@@ -700,14 +716,14 @@ export module Implementation {
                     [rootNamingContainerPrefix, componentIdToTransform].join(EMPTY_STR) :
                     [nearestNamingContainerPrefix,  componentIdToTransform].join(EMPTY_STR);
             }
-            // We need to double-check because we have scenarios where we have a naming container
+            // We need to double check because we have scenarios where we have a naming container
             // and no prepend (aka tobago testcase "must handle ':' in IDs properly", scenario 3,
             // in this case we return the component id, and be happy
             // we can roll a dom check here
             return (!!document.getElementById(finalIdentifier)) ? finalIdentifier : componentIdToTransform;
         };
 
-        // in this case we do not use lazy stream because it won´t bring any code reduction
+        // in this case we do not use lazy stream because it wont bring any code reduction
         // or speedup
         for (let cnt = 0; cnt < iterValues.length; cnt++) {
             //avoid doubles
@@ -749,37 +765,24 @@ export module Implementation {
      * the values required for params-through are processed in the ajax request
      *
      * Note this is a bug carried over from the old implementation
-     * the spec conform behavior is to use params for pass - through values
+     * the spec conform behavior is to use params for passthrough values
      * this will be removed soon, after it is cleared up whether removing
      * it breaks any legacy code
      *
      * @param {Context} mappedOpts the options to be filtered
+     * @deprecated
      */
-    function extractLegacyParams(mappedOpts: Options): {[key: string]: any} {
-        //we now can use the full code reduction given by our stream api
-        //to filter
-        return ofAssoc(mappedOpts)
-            .filter((item => !(item[0] in BlockFilter)))
-            .reduce(collectAssoc, {});
-    }
-
-    /**
-     * extracts the myfaces config parameters which provide extra functionality
-     * on top of JSF
-     * @param mappedOpts
-     * @private
-     */
-    function extractMyFacesParams(mappedOpts: Options): {[key: string]: any} {
+    function extractLegacyParams(mappedOpts: Options): Context {
         //we now can use the full code reduction given by our stream api
         //to filter
-        return ofAssoc(mappedOpts)
-            .filter((item => (item[0] == "myfaces")))
-            .reduce(collectAssoc, {})?.[MYFACES];
+        return Stream.ofAssoc(mappedOpts)
+            .filter(item => !(item[0] in BlockFilter))
+            .collect(new AssocArrayCollector());
     }
 
     function remapArrayToAssocArr(arrayedParams: [[string, any]] | {[key: string]: any}): {[key: string]: any} {
         if(Array.isArray(arrayedParams)) {
-            return arrayedParams.reduce(collectAssoc, {} as any);
+            return Stream.of(... arrayedParams).collect(new AssocArrayCollector());
         }
         return arrayedParams;
     }

package/src/main/typescript/impl/core/Const.ts

@@ -21,8 +21,8 @@
 export const XML_ATTR_NAMED_VIEWROOT = "namedViewRoot";
 export const NAMED_VIEWROOT = "namedViewRoot";
 
-export const P_AJAX_SOURCE = "jakarta.faces.source";
-export const NAMING_CONTAINER_ID = "myfaces.NamingContainerId";
+export const P_PARTIAL_SOURCE = "jakarta.faces.source";
+export const NAMING_CONTAINER_ID = "myfaces.partialId";
 
 export const VIEW_ID = "myfaces.viewId";
 export const P_VIEWSTATE = "jakarta.faces.ViewState";
@@ -108,7 +108,6 @@ export const CTX_PARAM_MF_INTERNAL = "myfaces.internal";
 export const CTX_PARAM_SRC_FRM_ID = "myfaces.source.formId";
 export const CTX_PARAM_SRC_CTL_ID = "myfaces.source.controlId";
 export const CTX_PARAM_REQ_PASS_THR = "myfaces.request.passThrough";
-export const CTX_PARAM_PPS = "myfaces.request.pps";
 
 export const CONTENT_TYPE = "Content-Type";
 export const HEAD_FACES_REQ = "Faces-Request";
@@ -142,8 +141,6 @@ export const PHASE_PROCESS_RESPONSE = "processResponse";
 
 export const ERR_NO_PARTIAL_RESPONSE = "Partial response not set";
 
-export const MYFACES_OPTION_PPS = "pps";
-
 export const ATTR_URL = "url";
 export const ATTR_NAME = "name";
 export const ATTR_VALUE = "value";

package/src/main/typescript/impl/util/AsyncQueue.ts

@@ -0,0 +1,133 @@
+/*! Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {AsyncRunnable} from "./AsyncRunnable";
+
+/**
+ * Asynchronous queue which starts to work
+ * through the callbacks until the queue is empty
+ *
+ * Every callback must be of async runnable
+ * which is sort of an extended promise which has
+ * added a dedicated cancel and start point
+ *
+ * This interface can be used as wrapper contract
+ * for normal promises if needed.
+ */
+export class AsynchronousQueue<T extends AsyncRunnable<any>> {
+
+    private runnableQueue = [];
+    private delayTimeout: null | ReturnType<typeof setTimeout>;
+
+    currentlyRunning: AsyncRunnable<any>;
+
+    constructor() {
+    }
+
+    /**
+     * simple is empty accessor, returns true if queue is empty atm
+     */
+    get isEmpty(): boolean {
+        return !this.runnableQueue.length;
+    }
+
+    /**
+     * enqueues an element and starts the
+     * asynchronous work loop if not already running
+     *
+     * @param element the element to be queued and processed
+     * @param delay possible delay after our usual process or drop if something newer is incoming algorithm
+     */
+    enqueue(element: T, delay = 0) {
+        if (this.delayTimeout) {
+            clearTimeout(this.delayTimeout);
+            this.delayTimeout = null;
+        }
+        if (delay) {
+            this.delayTimeout = setTimeout(() => {
+                this.appendElement(element);
+            }) as any;
+        } else {
+            this.appendElement(element);
+        }
+    }
+
+    /**
+     * fetches the next element from the queue (first in first out order)
+     */
+    dequeue(): T | undefined{
+        return this.runnableQueue.shift();
+    }
+
+    /**
+     * clears up all elements from the queue
+     */
+    cleanup() {
+        this.currentlyRunning = null;
+        this.runnableQueue.length = 0;
+    }
+
+    /**
+     * cancels the currently running element and then cleans up the queue
+     * aka cancel the queue entirely
+     */
+    cancel() {
+        try {
+            if (this.currentlyRunning) {
+                this.currentlyRunning.cancel();
+            }
+        } finally {
+            this.cleanup();
+        }
+    }
+
+    private callForNextElementToProcess() {
+        this.runEntry();
+    }
+
+    private appendElement(element: T) {
+        //only if the first element is added we start with a trigger
+        //otherwise a process already is running and not finished yet at that
+        //time
+        this.runnableQueue.push(element);
+        if (!this.currentlyRunning) {
+            this.runEntry();
+        }
+    }
+
+    private runEntry() {
+        if (this.isEmpty) {
+            this.currentlyRunning = null;
+            return;
+        }
+        this.currentlyRunning = this.dequeue();
+        this.currentlyRunning
+            .catch((e) => {
+                //in case of an error we always clean up the remaining calls
+                //to allow a clean recovery of the application
+                this.cleanup();
+                throw e;
+            })
+            .then(
+                //the idea is to trigger the next over an event to reduce
+                //the number of recursive calls (stacks might be limited
+                //compared to ram)
+                //naturally give we have a DOM, the DOM is the natural event dispatch system
+                //which we can use, to decouple the calls from a recursive stack call
+                //(the browser engine will take care of that)
+                () => this.callForNextElementToProcess()
+            ).start();
+    }
+}