jsf.js_next_gen 4.0.1-beta.2 → 4.0.1-beta.4

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

@@ -15,10 +15,11 @@
  *
  */
 
-import {Lang as LangBase, Config, Optional, DomQuery, DQ, Stream} from "mona-dish";
+import {Lang as LangBase, Config, Optional, DomQuery, DQ} from "mona-dish";
 import {Messages} from "../i18n/Messages";
 import {EMPTY_STR, HTML_TAG_FORM} from "../core/Const";
 import {getEventTarget} from "../xhrCore/RequestDataResolver";
+import {Es2019Array} from "mona-dish";
 
 
 export module ExtLang {
@@ -85,10 +86,10 @@ export module ExtLang {
         installedLocale = installedLocale ?? new Messages();
 
         let msg = installedLocale[key] ?? defaultMessage ?? key;
-
-        Stream.of(...templateParams).each((param, cnt) => {
+        templateParams.forEach((param, cnt) => {
             msg = msg.replace(new RegExp(["\\{", cnt, "\\}"].join(EMPTY_STR), "g"), param);
-        });
+        })
+
 
         return msg;
     }
@@ -202,6 +203,61 @@ export module ExtLang {
             defaultValue;
     }
 
+    /**
+     * expands an associative array into an array of key value tuples
+     * @param value
+     */
+    export function ofAssoc(value: {[key: string]: any}) {
+        return new Es2019Array(...Object.keys(value))
+            .map(key => [key, value[key]]);
+    }
+
+    export function collectAssoc(target: any, item: any) {
+        target[item[0]] = item[1];
+        return target;
+    }
+
+    /**
+     * The active timeout for the "debounce".
+     * Since we only use it in the XhrController
+     * we can use a local module variable here
+     */
+    let activeTimeouts = {};
+
+
+
+
+    /**
+     * a simple debounce function
+     * which waits until a timeout is reached and
+     * if something comes in in between debounces
+     *
+     * @param runnable a runnable which should go under debounce control
+     * @param timeout a timeout for the debounce window
+     */
+    export function debounce(key, runnable, timeout) {
+        function clearActiveTimeout() {
+            clearTimeout(activeTimeouts[key]);
+            delete activeTimeouts[key];
+        }
+
+        if (!!(activeTimeouts?.[key])) {
+            clearActiveTimeout();
+        }
+        if (timeout > 0) {
+            activeTimeouts[key] = setTimeout(() => {
+                try {
+                    runnable();
+                } finally {
+                    clearActiveTimeout();
+                }
+            }, timeout);
+        } else {
+            runnable();
+        }
+    }
+
+
     /**
      * assert that the form exists and throw an exception in the case it does not
      *
@@ -212,4 +268,6 @@ export module ExtLang {
             throw makeException(new Error(), null, null, "Impl", "getForm", getMessage("ERR_FORM"));
         }
     }
+
+
 }

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

@@ -0,0 +1,112 @@
+import {IAsyncRunnable} from "./AsyncRunnable";
+import {ExtLang} from "./Lang";
+import debounce = ExtLang.debounce;
+
+/**
+ * A simple XHR queue controller
+ * following the async op -> next pattern
+ * Faces enforces for the XHR handling
+ */
+export class XhrQueueController<T extends IAsyncRunnable<any>> {
+    queue = [];
+    taskRunning = false;
+
+    constructor() {
+    }
+
+    /**
+     * executes or enqueues an element
+     * @param runnable the runnable (request) to be enqueued
+     * @param timeOut timeout if > 0 which defers the execution
+     * until the debounce window for the timeout is closed.
+     */
+    enqueue(runnable: T, timeOut: number = 0) {
+        debounce("xhrQueue", () => {
+            const requestHandler = this.enrichRunnable(runnable);
+            if (!this.taskRunning) {
+                this.signalTaskRunning();
+                requestHandler.start();
+            } else {
+                this.queue.push(requestHandler);
+            }
+        }, timeOut);
+    }
+
+    /**
+     * trigger the next element in the queue
+     * to be started!
+     */
+    next() {
+        this.updateTaskRunning();
+        const next = this.queue.shift();
+        next?.start();
+    }
+
+    /**
+     * clears and resets the queue
+     */
+    clear() {
+        this.queue.length = 0;
+        this.updateTaskRunning();
+    }
+
+    /**
+     * true if queue is empty
+     */
+    get isEmpty(): boolean {
+        return !this.queue.length;
+    }
+
+    /**
+     * Enriches the incoming async asyncRunnable
+     * with the error and next handling
+     * (aka: asyncRunnable is done -> next
+     *                   error -> clear queue
+     * @param asyncRunnable the async runnable which needs enrichment
+     * @private
+     */
+    private enrichRunnable(asyncRunnable: T) {
+        /**
+         * we can use the Promise pattern asyncrunnable uses
+         * to trigger queue control callbacks of next element
+         * and clear the queue (theoretically this
+         * would work with any promise)
+         */
+        try {
+            return asyncRunnable
+                .then(() => this.next())
+                .catch((e) => this.handleError(e));
+        } catch (e) {
+            this.handleError(e);
+        }
+    }
+
+
+    /**
+     * alerts the queue that a task is running
+     *
+     * @private
+     */
+    private signalTaskRunning() {
+        this.taskRunning = true;
+    }
+
+    /**
+     * updates the task running status according to the current queue
+     * @private
+     */
+    private updateTaskRunning() {
+        this.taskRunning = !this.isEmpty;
+    }
+
+    /**
+     * standard error handling
+     * we clear the queue and then bomb out
+     * @param e
+     * @private
+     */
+    private handleError(e) {
+        this.clear();
+        throw e;
+    }
+}

package/src/main/typescript/impl/xhrCore/EventData.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import {Config, DQ} from "mona-dish";
-import {BEGIN, CTX_PARAM_REQ_PASS_THR, EVENT, P_PARTIAL_SOURCE, SOURCE} from "../core/Const";
+import {BEGIN, CTX_PARAM_REQ_PASS_THR, EVENT, P_AJAX_SOURCE, SOURCE} from "../core/Const";
 
 export class EventData implements IEventData{
     type: string;
@@ -32,8 +32,8 @@ export class EventData implements IEventData{
         eventData.status = name;
 
         let sourceId: string = context.getIf(SOURCE)
-            .orElseLazy(() => context.getIf(P_PARTIAL_SOURCE).value)
-            .orElseLazy(() => context.getIf(CTX_PARAM_REQ_PASS_THR, P_PARTIAL_SOURCE).value)
+            .orElseLazy(() => context.getIf(P_AJAX_SOURCE).value)
+            .orElseLazy(() => context.getIf(CTX_PARAM_REQ_PASS_THR, P_AJAX_SOURCE).value)
             .value;
         if (sourceId) {
             eventData.source = DQ.byId(sourceId, true).first().value.value;

package/src/main/typescript/impl/xhrCore/ResponseProcessor.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Config, DomQuery, DomQueryCollector, DQ, DQ$, Lang, LazyStream, Stream, XMLQuery} from "mona-dish";
+import {Config, DomQuery, DomQueryCollector, DQ, DQ$, Lang, XMLQuery} from "mona-dish";
 import {Implementation} from "../AjaxImpl";
 import {Assertions} from "../util/Assertions";
 import {IResponseProcessor} from "./IResponseProcessor";
@@ -46,7 +46,7 @@ import {
     ON_EVENT,
     P_CLIENT_WINDOW,
     P_EXECUTE,
-    P_PARTIAL_SOURCE,
+    P_AJAX_SOURCE,
     P_RENDER,
     P_RENDER_OVERRIDE,
     P_VIEWSTATE,
@@ -65,6 +65,8 @@ import {
 import {ExtConfig, ExtDomQuery} from "../util/ExtDomQuery";
 import {HiddenInputBuilder} from "../util/HiddenInputBuilder";
 import trim = Lang.trim;
+import {ExtLang} from "../util/Lang";
+import ofAssoc = ExtLang.ofAssoc;
 
 
 /**
@@ -174,7 +176,7 @@ export class ResponseProcessor implements IResponseProcessor {
          */
 
         const mergedErrorData = new ExtConfig({});
-        mergedErrorData.assign(SOURCE).value = this.externalContext.getIf(P_PARTIAL_SOURCE).get(0).value;
+        mergedErrorData.assign(SOURCE).value = this.externalContext.getIf(P_AJAX_SOURCE).get(0).value;
         mergedErrorData.assign(ERROR_NAME).value = node.querySelectorAll(ERROR_NAME).textContent(EMPTY_STR);
         mergedErrorData.assign(ERROR_MESSAGE).value = node.querySelectorAll(ERROR_MESSAGE).cDATAAsString;
 
@@ -346,15 +348,15 @@ export class ResponseProcessor implements IResponseProcessor {
      * as last lifecycle step, before going into the next request.
      */
     fixViewStates() {
-        Stream.ofAssoc<StateHolder>(this.internalContext.getIf(APPLIED_VST).orElse({}).value)
-            .each(([, value]) => {
+        ofAssoc(this.internalContext.getIf(APPLIED_VST).orElse({}).value)
+            .forEach(([, value]) => {
                 const namingContainerId = this.internalContext.getIf(NAMING_CONTAINER_ID);
                 const namedViewRoot = !!this.internalContext.getIf(NAMED_VIEWROOT).value
                 const affectedForms = this.getContainerForms(namingContainerId)
                     .filter(affectedForm => this.isInExecuteOrRender(affectedForm));
 
                 this.appendViewStateToForms(affectedForms, namedViewRoot, value.value, namingContainerId.orElse("").value);
-            });
+            })
     }
 
 
@@ -364,8 +366,8 @@ export class ResponseProcessor implements IResponseProcessor {
      * is done.
      */
     fixClientWindow() {
-        Stream.ofAssoc<StateHolder>(this.internalContext.getIf(APPLIED_CLIENT_WINDOW).orElse({}).value)
-            .each(([, value]) => {
+       ofAssoc(this.internalContext.getIf(APPLIED_CLIENT_WINDOW).orElse({}).value)
+            .forEach(([, value]) => {
                 const namingContainerId = this.internalContext.getIf(NAMING_CONTAINER_ID);
                 const namedViewRoot = !!this.internalContext.getIf(NAMED_VIEWROOT).value;
                 const affectedForms = this.getContainerForms(namingContainerId)
@@ -522,7 +524,7 @@ export class ResponseProcessor implements IResponseProcessor {
             .orElseLazy(() => this.externalContext.getIf($nsp(P_RENDER)).value)
             .orElse(IDENT_NONE).value.split(/\s+/gi);
         const executeAndRenders = executes.concat(...renders);
-        return LazyStream.of(...executeAndRenders).filter(nameOrId => {
+        return [...executeAndRenders].filter(nameOrId => {
             if ([IDENT_ALL, IDENT_NONE].indexOf(nameOrId) != -1) {
                 return true;
             }
@@ -532,7 +534,7 @@ export class ResponseProcessor implements IResponseProcessor {
             return affectedForm.matchesSelector(NAME_OR_ID) ||
                 affectedForm.querySelectorAll(NAME_OR_ID).isPresent() ||
                 affectedForm.firstParent(NAME_OR_ID).isPresent();
-        }).first().isPresent();
+        }).length > 0;
     }
 
     /**

package/src/main/typescript/impl/xhrCore/XhrFormData.ts

@@ -13,19 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Config, DQ, FormDataCollector, Stream} from "mona-dish";
+import {Config, DQ} from "mona-dish";
 import {$nsp, EMPTY_STR, IDENT_NONE, P_VIEWSTATE} from "../core/Const";
 
 import {
     encodeFormData,
-    fixEmmptyParameters, getFormInputsAsStream
+    fixEmptyParameters, getFormInputsAsArr
 } from "../util/FileUtils";
+import {ExtLang} from "../util/Lang";
+import ofAssoc = ExtLang.ofAssoc;
+import {Es2019Array} from "mona-dish";
 
 
 type ParamsMapper<V, K> = (key: V, item: K) => [V, K];
 const defaultParamsMapper: ParamsMapper<string, any> = (key, item) => [key, item];
 
-
 /**
  * A unified form data class
  * which builds upon our configuration.
@@ -76,13 +78,17 @@ export class XhrFormData extends Config {
      */
     toFormData(): FormData {
         /*
-         * expands key: [item1, item2]
-         * to: [{key: key,  value: item1}, {key: key, value: item2}]
-         */
-        let expandAssocArray = ([key, item]) =>
-            Stream.of(...(item as Array<any>)).map(value => {
-                return {key, value};
-            });
+           * expands key: [item1, item2]
+           * to: [{key: key,  value: item1}, {key: key, value: item2}]
+           */
+        let expandValueArrays = ([key, item]) => {
+            if (Array.isArray(item)) {
+                return new Es2019Array(...item).map(value => {
+                    return {key, value}
+                })
+            }
+            return [{key, value: item}]
+        }
 
         /*
          * remaps the incoming {key, value} tuples
@@ -96,10 +102,13 @@ export class XhrFormData extends Config {
         /*
          * collects everything into a FormData object
          */
-        return  Stream.ofAssoc(this.value)
-            .flatMap(expandAssocArray)
+        return ofAssoc(this.value)
+            .flatMap(expandValueArrays)
             .map(remapForNamingContainer)
-            .collect(new FormDataCollector() as any);
+            .reduce((formData: FormData, {key, value}: any) => {
+                formData.append(key, value);
+                return formData;
+            }, new FormData()) as FormData;
     }
 
     /**
@@ -113,6 +122,7 @@ export class XhrFormData extends Config {
 
     /**
      * generic post init code, for now, this performs some post assign data post-processing
+     * @param rootElement the root element which knows the request type (usually a form)
      * @param executes the executable dom nodes which need to be processed into the form data, which we can send
      * in our ajax request
      */
@@ -139,20 +149,24 @@ export class XhrFormData extends Config {
 
     /**
      * determines fields to submit
-     * @param {Object} targetBuf - the target form buffer receiving the data
      * @param {Node} parentItem - form element item is nested in
      * @param {Array} partialIds - ids fo PPS
      */
-    private encodeSubmittableFields(parentItem: DQ, partialIds ?: string[]) {
+    private encodeSubmittableFields(parentItem: DQ, partialIds: string[] = []) {
 
-        const formInputs = getFormInputsAsStream(parentItem);
         const mergeIntoThis = ([key, value]) => this.append(key).value = value;
         const namingContainerRemap = ([key, value]) => this.paramsMapper(key as string, value);
 
-        formInputs
-            .map(fixEmmptyParameters)
+        const remappedPartialIds = partialIds.map(partialId => this.remapKeyForNamingContainer(partialId));
+        const partialIdsFilter = ([key, value]) => (!remappedPartialIds.length || key.indexOf("@") == 0) ? true :
+            remappedPartialIds.indexOf(key) != -1;
+
+        let inputs = getFormInputsAsArr(parentItem);
+        inputs
+            .map(fixEmptyParameters)
             .map(namingContainerRemap)
-            .each(mergeIntoThis);
+            .filter(partialIdsFilter)
+            .forEach(mergeIntoThis);
     }
 
     private remapKeyForNamingContainer(key: string): string {