jsf.js_next_gen 4.0.0-RC.3 → 4.0.0-RC.31

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

@@ -13,12 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {ArrayCollector, Config, DQ, Lang, LazyStream, Stream} from "mona-dish";
-import {EMPTY_STR, IDENT_ALL, IDENT_FORM, P_VIEWSTATE} from "../core/Const";
-import isString = Lang.isString;
-import {ExtConfig, ExtDomQuery} from "../util/ExtDomQuery";
+import {ArrayCollector, Config, DQ, Stream} from "mona-dish";
+import {$faces, $nsp, EMPTY_STR, IDENT_ALL, IDENT_FORM, IDENT_NONE, P_VIEWSTATE} from "../core/Const";
+import {ExtConfig} from "../util/ExtDomQuery";
+import {
+    decodeEncodedValues,
+    encodeFormData,
+    resolveFiles,
+    fixKeyWithoutVal
+} from "../util/FileUtils";
 
 
+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.
@@ -29,7 +37,11 @@ import {ExtConfig, ExtDomQuery} from "../util/ExtDomQuery";
  *
  * probably only one needed and one overlay!
  * the entire file input storing probably is redundant now
- * that dom query has been fixed //TODO check this
+ * that dom query has been fixed
+ *
+ * internal storage format
+ * every value is stored as an array
+ * even scalar ones!
  */
 export class XhrFormData extends Config {
     /**
@@ -45,31 +57,22 @@ export class XhrFormData extends Config {
      * data collector from a given form
      *
      * @param dataSource either a form as DomQuery object or an encoded url string
-     * @param viewState the form view state or an external viewState coming in as string
+     * @param paramsMapper a remapper for the params keys and values
      * @param executes the executes id list for the elements to being processed
      * @param partialIds partial ids to collect, to reduce the data sent down
      */
-    constructor(private dataSource: DQ | string, viewState?: string, executes?: string[], private partialIds?: string[]) {
+    constructor(private dataSource: DQ, private paramsMapper: ParamsMapper<string, any> = defaultParamsMapper, executes?: string[], private partialIds?: string[]) {
         super({});
-        //a call to getViewState before must pass the encoded line
-        //a call from getViewState passes the form element as datasource,
-        //so we have two call points
-        // atm we basically encode twice, to keep the code leaner
-        // this will be later optmized, practically elements
-        // which are already covered by an external viewstate do not need
-        // the encoding a second time, because they are overwritten by the viewstate again
-        if (isString(dataSource)) {
-            this.assignEncodedString(<string>this.dataSource);
-        } else {
-            this.applyFormDataToConfig();
-        }
-        //now assign the external viewstate overrides
-        if ('undefined' != typeof viewState) {
-            this.assignEncodedString(viewState)
-        }
-        if (executes) {
-            this.postInit(...executes);
-        }
+        //encode and append the issuing item if not a partial ids array of ids is passed
+        /*
+         * Spec. 13.3.1
+         * Collect and encode input elements.
+         * Additionally the hidden element jakarta.faces.ViewState
+         * Enhancement partial page submit
+         */
+        this.resolveRequestType(this.dataSource, executes);
+        this.encodeSubmittableFields(this.dataSource, this.partialIds);
+        this.applyViewState(this.dataSource);
     }
 
     /**
@@ -77,30 +80,11 @@ export class XhrFormData extends Config {
      * @param executes the executable dom nodes which need to be processed into the form data, which we can send
      * in our ajax request
      */
-    postInit(...executes: Array<string>) {
-        let fetchFileInputs = (id: string): DQ => {
-            const INPUT_FILE = "input[type='file']";
-            if (id == IDENT_ALL) {
-                return DQ.querySelectorAllDeep(INPUT_FILE);
-            } else if (id == IDENT_FORM) {
-                return (<DQ>this.dataSource).matchesSelector(INPUT_FILE) ?
-                    (<DQ>this.dataSource) :
-                    (<DQ>this.dataSource).querySelectorAllDeep(INPUT_FILE);
-            } else {
-                let element = DQ.byId(id, true);
-                return element.matchesSelector(INPUT_FILE) ? element : this.getFileInputs(element);
-            }
-        };
-
-        let inputExists = (item: DQ) => {
-            return item.isPresent();
-        };
-
-
-        this.isMultipartRequest = LazyStream.of(...executes)
-            .map(fetchFileInputs)
-            .filter(inputExists)
-            .first().isPresent();
+    resolveRequestType(rootElement: DQ, executes?: Array<string>) {
+        if (!executes || executes.indexOf(IDENT_NONE) != -1) {
+            return;
+        }
+        this.isMultipartRequest = rootElement.isMultipartCandidate(true);
     }
 
     /**
@@ -109,124 +93,62 @@ export class XhrFormData extends Config {
      * @param form the form holding the view state value
      */
     private applyViewState(form: DQ) {
-        let viewState = form.byId(P_VIEWSTATE, true).inputValue;
-        this.appendIf(viewState.isPresent(), P_VIEWSTATE).value = viewState.value;
+        if (this.getIf($nsp(P_VIEWSTATE)).isPresent()) {
+            return;
+        }
+        let viewStateElement = form.querySelectorAllDeep(`[name*='${$nsp(P_VIEWSTATE)}'`);
+        let viewState = viewStateElement.inputValue;
+        this.appendIf(viewState.isPresent(), this.remapKeyForNamingContainer(viewStateElement.name.value)).value = viewState.value;
     }
 
-    /**
-     * assigns an url encoded string to this xhrFormData object
-     * as key value entry
-     * @param encoded
-     */
-    assignEncodedString(encoded: string) {
-        // this code filters out empty strings as key value pairs
-        let keyValueEntries = decodeURIComponent(encoded).split(/&/gi)
-            .filter(item => !!(item || '')
-                .replace(/\s+/g, ''));
-        this.assignString(keyValueEntries);
-    }
 
     /**
-     * assign a set of key value pairs passed as array ['key=val1', 'key2=val2']
-     * @param keyValueEntries
+     * @returns a Form data representation, this is needed for file submits
      */
-    assignString(keyValueEntries: string[]) {
-        let toMerge = new ExtConfig({});
+    toFormData(): FormData {
+        let ret: any = new FormData();
 
-        function splitToKeyVal(line: string) {
-            return line.split(/=(.*)/gi);
-        }
+        /*
+         * expands key: [item1, item2]
+         * to: [{key: item1}, {key, item2}]
+         */
+        let expandArrayedData = ([key, item]) =>
+            Stream.of(...(item as Array<any>)).map(item => {
+                return {key, item};
+            });
 
-        function fixKeyWithoutVal(keyVal: string[]) {
-            return keyVal.length < 3 ? [keyVal?.[0] ?? [], keyVal?.[1] ?? []] : keyVal;
-        }
+        /*
+         * remaps the incoming {key, value} tuples
+         * to naming container prefixed keys and values
+         */
+        let remapForNamingContainer = ({key, item}) => {
+            key = this.remapKeyForNamingContainer(key);
+            return {key, item}
+        };
 
-        //TODO fix files...
-        Stream.of(...keyValueEntries)
-            .map(line => splitToKeyVal(line))
-            //special case of having keys without values
-            .map(keyVal => fixKeyWithoutVal(keyVal))
-            .each(keyVal => {
-                toMerge.append(keyVal[0] as string).value = keyVal?.splice(1)?.join("") ?? "";
-            });
-        //merge with overwrite but no append! (aka no double entries are allowed)
-        this.shallowMerge(toMerge);
-    }
+        /*
+         * collects everything into a FormData object
+         */
+        let collectFormData = ({key, item}) => {
+            ret.append(key, item)
+        };
 
-    /**
-     * @returns a Form data representation, this is needed for file submits
-     */
-    toFormData(): FormData {
-        let ret: any = new FormData();
-        this.appendInputs(ret);
+        Stream.ofAssoc(this.value)
+            .flatMap(expandArrayedData)
+            .map(remapForNamingContainer)
+            .each(collectFormData)
         return ret;
     }
 
-    resolveSubmitIdentifier(elem: HTMLInputElement) {
-        let identifier = elem.name;
-        identifier = ((elem?.name ?? "").replace(/s+/gi, "") == "") ? elem.id : identifier;
-        return identifier;
-    }
-
     /**
      * returns an encoded string representation of our xhr form data
      *
      * @param defaultStr optional default value if nothing is there to encode
      */
     toString(defaultStr = EMPTY_STR): string {
-        if (this.isAbsent()) {
-            return defaultStr;
-        }
-        let entries = LazyStream.of(...Object.keys(this.value))
-            .filter(key => this.value.hasOwnProperty(key))
-            .flatMap(key => Stream.of(...this.value[key]).map(val => [key, val])
-                //we cannot encode file elements that is handled by multipart requests anyway
-                .filter(([, value]) => !(value instanceof ExtDomQuery.global().File))
-                .collect(new ArrayCollector()))
-
-            .map(keyVal => {
-                return `${encodeURIComponent(keyVal[0])}=${encodeURIComponent(keyVal[1])}`;
-            })
-            .collect(new ArrayCollector());
-
-        return entries.join("&")
-    }
-
-    /**
-     * helper to fetch all file inputs from as given root element
-     * @param rootElement
-     * @private
-     */
-    private getFileInputs(rootElement: DQ): DQ {
-        const rootFileInputs = rootElement
-            .filter(elem => elem.matchesSelector("input[type='file']"))
-        const childFileInputs = rootElement
-            .querySelectorAll("input[type='file']");
-
-        return rootFileInputs.concat(childFileInputs);
+        return encodeFormData(this, this.paramsMapper, defaultStr);
     }
 
-    /**
-     * encode the given fields and apply the view state
-     * @private
-     */
-    private applyFormDataToConfig() {
-        //encode and append the issuing item if not a partial ids array of ids is passed
-        /*
-         * Spec. 13.3.1
-         * Collect and encode input elements.
-         * Additionally the hidden element jakarta.faces.ViewState
-         * Enhancement partial page submit
-         *
-         */
-        this.encodeSubmittableFields(this, <DQ>this.dataSource, this.partialIds);
-
-        if (this.getIf(P_VIEWSTATE).isPresent()) {
-            return;
-        }
-
-        this.applyViewState(<DQ>this.dataSource);
-    }
 
     /**
      * determines fields to submit
@@ -234,28 +156,29 @@ export class XhrFormData extends Config {
      * @param {Node} parentItem - form element item is nested in
      * @param {Array} partialIds - ids fo PPS
      */
-    private encodeSubmittableFields(targetBuf: Config,
-                                    parentItem: DQ, partialIds ?: string[]) {
-        let toEncode = null;
-        if (this.partialIds && this.partialIds.length) {
-            // in case of our myfaces reduced ppr we
-            // only submit the partials
-            this._value = {};
-            toEncode = new DQ(...this.partialIds);
-
-        } else {
-            if (parentItem.isAbsent()) throw 'NO_PAR_ITEM';
-            toEncode = parentItem;
-        }
+    public encodeSubmittableFields(parentItem: DQ, partialIds ?: string[]) {
+        //encoded String
+        const viewStateStr = $faces().getViewState(parentItem.getAsElem(0).value);
+
+        // we now need to decode it and then merge it into the target buf
+        // which hosts already our overrides (aka do not override what is already there(
+        // after that we need to deal with form elements on a separate level
+        const keyValueEntries: Stream<string[] | [string, File]> = decodeEncodedValues(viewStateStr);
+        const fileEntries = resolveFiles(parentItem);
+        const concatted = keyValueEntries.concat(fileEntries as any)
+        const formData = new ExtConfig({});
+
+        concatted
+            .map(fixKeyWithoutVal)
+            .map(keyVal => this.paramsMapper(keyVal[0] as string, keyVal[1]))
+            .each((entry) => {
+                formData.append(entry[0]).value = entry[1];
+            });
 
-        //lets encode the form elements
-        this.shallowMerge(toEncode.deepElements.encodeFormElement());
+        this.shallowMerge(formData, true, true);
     }
 
-    private appendInputs(ret: any) {
-        Stream.of(...Object.keys(this.value))
-            .each(key => {
-                Stream.of(...this.value[key]).each(item => ret.append(key, item));
-            });
+    private remapKeyForNamingContainer(key: string): string {
+        return this.paramsMapper(key, "")[0];
     }
 }

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

@@ -15,7 +15,7 @@
  */
 
 import {AsyncRunnable} from "../util/AsyncRunnable";
-import {Config, DQ, Stream} from "mona-dish";
+import {Config, DQ, DQ$, Stream} from "mona-dish";
 import {Implementation} from "../AjaxImpl";
 
 import {XhrFormData} from "./XhrFormData";
@@ -23,27 +23,35 @@ import {ErrorData} from "./ErrorData";
 import {EventData} from "./EventData";
 import {ExtLang} from "../util/Lang";
 import {
+    $faces, $nsp,
     BEGIN,
     COMPLETE,
     CONTENT_TYPE,
     CTX_PARAM_MF_INTERNAL,
-    CTX_PARAM_PASS_THR,
+    CTX_PARAM_REQ_PASS_THR,
     ERROR,
     HEAD_FACES_REQ,
-    MALFORMEDXML,
+    MALFORMEDXML, NAMED_VIEWROOT,
     NO_TIMEOUT,
     ON_ERROR,
-    ON_EVENT, P_EXECUTE,
+    ON_EVENT, P_EXECUTE, P_PARTIAL_SOURCE, P_VIEWSTATE, NAMING_CONTAINER_ID,
     REQ_ACCEPT,
     REQ_TYPE_GET,
-    REQ_TYPE_POST,
+    REQ_TYPE_POST, SOURCE,
     STATE_EVT_TIMEOUT,
     STD_ACCEPT,
     URL_ENCODED,
-    VAL_AJAX
+    VAL_AJAX, IDENT_NONE
 } from "../core/Const";
-import {resolveFinalUrl, resolveHandlerFunc} from "./RequestDataResolver";
+import {
+    resolveFinalUrl,
+    resolveHandlerFunc,
+    resolveViewRootId,
+    resoveNamingContainerMapper
+} from "./RequestDataResolver";
 import failSaveExecute = ExtLang.failSaveExecute;
+import {ExtConfig} from "../util/ExtDomQuery";
+import {ResponseProcessor} from "./ResponseProcessor";
 
 /**
  * Faces XHR Request Wrapper
@@ -53,6 +61,7 @@ import failSaveExecute = ExtLang.failSaveExecute;
  * a single ajax request into our queue
  * and let the queue do the processing.
  *
+ *
  */
 
 export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
@@ -86,7 +95,7 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
     constructor(
         private source: DQ,
         private sourceForm: DQ,
-        private requestContext: Config,
+        private requestContext: ExtConfig,
         private internalContext: Config,
         private partialIdsArray = [],
         private timeout = NO_TIMEOUT,
@@ -111,12 +120,10 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
         let xhrObject = this.xhrObject;
 
         let executesArr = () => {
-            return this.requestContext.getIf(CTX_PARAM_PASS_THR, P_EXECUTE).get("none").value.split(/\s+/gi);
+            return this.requestContext.getIf(CTX_PARAM_REQ_PASS_THR, P_EXECUTE).get(IDENT_NONE).value.split(/\s+/gi);
         };
-        try {
 
-            let formElement = this.sourceForm.getAsElem(0).value;
-            let viewState = (window?.faces ?? window?.jsf).getViewState(formElement);
+        try {
             // encoded we need to decode
             // We generated a base representation of the current form
             // in case someone has overloaded the viewState with additional decorators we merge
@@ -125,21 +132,30 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
             // whatever the formData object delivers
             // the partialIdsArray arr is almost deprecated legacy code where we allowed to send a separate list of partial
             // ids for reduced load and server processing, this will be removed soon, we can handle the same via execute
-            // anyway TODO remove the partial ids array
-            let formData: XhrFormData = new XhrFormData(this.sourceForm, viewState, executesArr(), this.partialIdsArray);
+            // anyway TODO reimplement the partial ids array, we still do not have it in jsf the way we need it
+            let formData: XhrFormData = new XhrFormData(this.sourceForm, resoveNamingContainerMapper(this.internalContext), executesArr(), this.partialIdsArray);
 
             this.contentType = formData.isMultipartRequest ? "undefined" : this.contentType;
 
             // next step the pass through parameters are merged in for post params
+            this.requestContext.$nspEnabled = false;
             let requestContext = this.requestContext;
-            let passThroughParams = requestContext.getIf(CTX_PARAM_PASS_THR);
+            let requestPassThroughParams = requestContext.getIf(CTX_PARAM_REQ_PASS_THR) as ExtConfig;
 
+            // we are turning off here the jsf, faces remapping because we are now dealing with
+            // pass-through parameters
+            requestPassThroughParams.$nspEnabled = false;
             // this is an extension where we allow pass through parameters to be sent down additionally
             // this can be used and is used in the impl to enrich the post request parameters with additional
             // information
-            formData.shallowMerge(passThroughParams, true, true);
+            try {
+                formData.shallowMerge(requestPassThroughParams, true, true);
+            } finally {
+                this.requestContext.$nspEnabled = true;
+                requestPassThroughParams.$nspEnabled = true;
+            }
 
-            this.responseContext = passThroughParams.deepCopy;
+            this.responseContext = requestPassThroughParams.deepCopy;
 
             // we have to shift the internal passthroughs around to build up our response context
             let responseContext = this.responseContext;
@@ -170,9 +186,7 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
             ignoreErr(() => xhrObject.setRequestHeader(REQ_ACCEPT, STD_ACCEPT));
 
             this.sendEvent(BEGIN);
-
             this.sendRequest(formData);
-
         } catch (e) {
             // _onError
             this.handleError(e);
@@ -290,7 +304,7 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
             return;
         }
 
-        (window?.faces ?? window.jsf).ajax.response(this.xhrObject, this.responseContext.value ?? {});
+        $faces().ajax.response(this.xhrObject, this.responseContext.value ?? {});
     }
 
     private handleMalFormedXML(resolve: Function) {
@@ -300,9 +314,9 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
             status: MALFORMEDXML,
             responseCode: 200,
             responseText: this.xhrObject?.responseText,
-            source: {
-                id: this.source.id.value
-            }
+            // we remap the element just in case it gets replaced
+            // it will be unremapped
+            source:  this.source.id.value
         };
         try {
             this.handleError(errorData, true);
@@ -352,6 +366,7 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
 
             Implementation.sendEvent(eventData, eventHandler);
         } catch (e) {
+            e.source = e?.source ?? this.requestContext.getIf(SOURCE).value;
             this.handleError(e);
             throw e;
         }
@@ -364,4 +379,5 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
         Implementation.sendError(errorData, eventHandler);
     }
 
+
 }

package/src/main/typescript/myfaces/OamSubmit.ts

@@ -62,18 +62,23 @@ export module oam {
         DQ.byId(element).delete();
     };
 
-    // noinspection JSUnusedGlobalSymbols
+    // noinspection JSUnusedGlobalSymbols,JSUnusedLocalSymbols
     /**
      * does special form submit remapping
      * re-maps the issuing command link into something,
-     * a decode of the command link on the server can understand
+     * the "decode" of the command link on the server can understand
      *
      * @param formName
      * @param linkId
      * @param target
      * @param params
      */
-    export const submitForm = function (formName: string, linkId: string, target: string, params: { [key: string]: any }): boolean {
+    export const submitForm = function (formName: string, linkId: string | null = null, target: string |null = null, params: AssocArr<any> | Tuples<string, any> | null = {} ): boolean {
+
+
+        //handle a possible incoming null, not sure if this is used that way anywhere, but we allow it
+        params = (!params) ? {} : params;
+
         let clearFn = 'clearFormHiddenParams_' + formName.replace(/-/g, '\$:').replace(/:/g, '_');
         window?.[clearFn]?.(formName);
 
@@ -81,18 +86,23 @@ export module oam {
         if (window?.myfaces?.core?.config?.autoScroll && (window as any)?.getScrolling) {
             myfaces.oam.setHiddenInput(formName, 'autoScroll', (window as any)?.getScrolling());
         }
-        Stream.ofAssoc(params).each((param: [string, any]) => {
-            myfaces.oam.setHiddenInput(formName, param[0], param[1]);
-        });
+        let paramsStream: Stream<[string, any]> = Array.isArray(params) ? Stream.of(...params) : Stream.ofAssoc(params);
+        paramsStream.each(([key, data]) => myfaces.oam.setHiddenInput(formName, key, data));
 
         //we call the namespaced function, to allow decoration, via a direct call we would
-        myfaces.oam.setHiddenInput(formName, `${formName}:_idcl`, linkId);
+        myfaces.oam.setHiddenInput(formName, `${formName}:_idcl`, linkId ?? '');
+
 
-        DQ.byId(document.forms[formName]).each(form => {
+        DQ.byId(document.forms?.[formName] ?? document.getElementById(formName)).each(form => {
             const ATTR_TARGET = "target";
             const formElement = form.getAsElem(0).value as HTMLFormElement;
-            const oldTarget = form.attr(ATTR_TARGET).value;
-            form.attr(ATTR_TARGET).value = target;
+            const oldTarget = (form.getAsElem(0).value as HTMLFormElement).getAttribute("target");
+
+            if(target != "null" && target) {
+                (form.getAsElem(0).value as HTMLFormElement).setAttribute("target", target);
+            }
+
+
 
             const result = formElement?.onsubmit?.(null);
 
@@ -103,9 +113,15 @@ export module oam {
             } catch (e) {
                 window?.console.error(e);
             } finally {
-                form.attr(ATTR_TARGET).value = oldTarget;
-                Stream.ofAssoc(params).each((param: [string, any]) => {
-                    myfaces.oam.clearHiddenInput(formName, param[0]);
+                if(oldTarget == null || oldTarget == "null") {
+                    (form.getAsElem(0).value as HTMLFormElement).removeAttribute("target");
+                } else {
+                    (form.getAsElem(0).value as HTMLFormElement).setAttribute("target", oldTarget);
+                }
+
+                // noinspection JSUnusedLocalSymbols
+                paramsStream.each(([key, data]) => {
+                    myfaces.oam.clearHiddenInput(formName, key);
                 });
                 myfaces.oam.clearHiddenInput(formName, `${formName}:_idcl`);
             }

package/src/main/typescript/test/frameworkBase/_ext/monadish/DomQueryTest.spec.ts

@@ -319,7 +319,7 @@ describe('DOMQuery tests', function () {
 
     it('it must have parents', function () {
         let probe1 = new DomQuery(document).querySelectorAll("div");
-        let coll: Array<any> = probe1.parents("body").stream.collect(new ArrayCollector());
+        let coll: Array<any> = probe1.firstParent("body").stream.collect(new ArrayCollector());
         expect(coll.length == 1).to.be.true;
 
     });