jsf.js_next_gen 1.0.0-beta-17 → 1.0.0-beta-19

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

@@ -102,9 +102,9 @@ export function resolveSourceForm(internalContext: Config, elem: DQ): DQ {
     let sourceFormId = internalContext.getIf(CTX_PARAM_SRC_FRM_ID);
     let sourceForm = new DQ(sourceFormId.isPresent() ? document.forms[sourceFormId.value] : null);
 
-    sourceForm = sourceForm.orElse(elem.parents(TAG_FORM))
-        .orElse(elem.querySelectorAll(TAG_FORM))
-        .orElse(DQ.querySelectorAll(TAG_FORM));
+    sourceForm = sourceForm.orElseLazy(() => elem.parents(TAG_FORM))
+        .orElseLazy(() => elem.querySelectorAll(TAG_FORM))
+        .orElseLazy(() => DQ.querySelectorAll(TAG_FORM));
 
     return sourceForm;
 }

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

@@ -52,7 +52,7 @@ export module Response {
      * and processing its tags
      *
      * @param {XMLHttpRequest} request (xhrRequest) - xhr request object
-     * @param ASSOC_ARR<any> context (Map) - AJAX context
+     * @param context {Context} context (Map) - AJAX context
      *
      */
     export function processResponse(request: XMLHttpRequest, context: Context) {
@@ -90,7 +90,7 @@ export module Response {
         const SEL_SUB_TAGS = [CMD_ERROR, CMD_REDIRECT, CMD_CHANGES].join(",");
 
         //now we can process the main operations
-        node.getIf(SEL_SUB_TAGS).each((node: XMLQuery) => {
+        node.querySelectorAll(SEL_SUB_TAGS).each((node: XMLQuery) => {
             switch (node.tagName.value) {
                 case CMD_ERROR:
                     responseProcessor.error(node);
@@ -123,8 +123,8 @@ export module Response {
      * @param responseProcessor
      */
      function processChangesTag(node: XMLQuery, responseProcessor: IResponseProcessor): boolean {
-        const ALLOWED_TAGS = [CMD_UPDATE, CMD_EVAL, CMD_INSERT, CMD_DELETE, CMD_ATTRIBUTES, CMD_EXTENSION].join(",");
-        node.getIf(ALLOWED_TAGS).each(
+        const ALLOWED_TAGS = [CMD_UPDATE, CMD_EVAL, CMD_INSERT, CMD_DELETE, CMD_ATTRIBUTES, CMD_EXTENSION].join(", ");
+        node.querySelectorAll(ALLOWED_TAGS).each(
             (node: XMLQuery) => {
                 switch (node.tagName.value) {
                     case CMD_UPDATE:
@@ -168,7 +168,7 @@ export module Response {
     }
 
     /**
-     * branch tag update.. drill further down into the updates
+     * branch tag update. drill further down into the updates
      * special case viewstate in that case it is a leaf
      * and the viewstate must be processed
      *
@@ -206,7 +206,6 @@ export module Response {
             default://htmlItem replacement
                 responseProcessor.update(node, cdataBlock);
                 break;
-
         }
     }
 }

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

@@ -71,9 +71,13 @@ import {ExtDomquery} from "../util/ExtDomQuery";
 export class ResponseProcessor implements IResponseProcessor {
 
     constructor(private request: Config, private externalContext: Config, private internalContext: Config) {
-
     }
 
+    /**
+     * head replacement
+     * @param shadowDocument incoming shadow head data (aka cdata as xml reference or dom element)
+     * the data incoming must represent the html representation of the head itself one way or the other
+     */
     replaceHead(shadowDocument: XMLQuery | DQ) {
         let shadowHead = shadowDocument.querySelectorAll(TAG_HEAD);
         if (!shadowHead.isPresent()) {
@@ -85,6 +89,9 @@ export class ResponseProcessor implements IResponseProcessor {
         //delete all to avoid script and style overlays
         oldHead.querySelectorAll(SEL_SCRIPTS_STYLES).delete();
 
+        // we cannot replace new elements in the head, but we can eval the elements
+        // eval means the scripts will get attached (eval script attach method)
+        // but this is done by DomQuery not in this code
         this.storeForEval(shadowHead);
     }
 
@@ -108,6 +115,8 @@ export class ResponseProcessor implements IResponseProcessor {
         let resultingBody = <DQ>DQ.querySelectorAll(TAG_BODY).html(shadowInnerHTML);
         let updateForms = resultingBody.querySelectorAll(TAG_FORM);
 
+        // main difference, we cannot replace the body itself, but only its content
+        // we need a separate step for post processing the incoming attributes, like classes, styles etc...
         resultingBody.copyAttrs(shadowBody);
 
         this.storeForPostProcessing(updateForms, resultingBody);
@@ -157,10 +166,6 @@ export class ResponseProcessor implements IResponseProcessor {
         Implementation.sendError(errorData);
     }
 
-    private triggerOnError(errorData: ErrorData) {
-        this.externalContext.getIf(ON_ERROR).orElse(this.internalContext.getIf(ON_ERROR).value).orElse(EMPTY_FUNC).value(errorData);
-    }
-
     /**
      * process the redirect operation
      *
@@ -182,12 +187,16 @@ export class ResponseProcessor implements IResponseProcessor {
      */
     update(node: XMLQuery, cdataBlock: string) {
         let result = ExtDomquery.byId(node.id.value, true).outerHTML(cdataBlock, false, false);
-        let sourceForm = result?.parents(TAG_FORM).orElse(result.byTagName(TAG_FORM, true));
+        let sourceForm = result?.parents(TAG_FORM).orElseLazy(() => result.byTagName(TAG_FORM, true));
         if (sourceForm) {
             this.storeForPostProcessing(sourceForm, result);
         }
     }
 
+    /**
+     * Delete handler, simply deleetes the node referenced by the xml data
+     * @param node
+     */
     delete(node: XMLQuery) {
         DQ.byId(node.id.value, true).delete();
     }
@@ -214,7 +223,7 @@ export class ResponseProcessor implements IResponseProcessor {
     }
 
     /**
-     * insert handling, either before or after
+     * Insert handling, either before or after
      *
      * @param node
      */
@@ -239,7 +248,7 @@ export class ResponseProcessor implements IResponseProcessor {
     }
 
     /**
-     * handler for the case &lt;insert <&lt; before id="...
+     * Handler for the case &lt;insert <&lt; before id="...
      *
      * @param node the node hosting the insert data
      */
@@ -267,7 +276,7 @@ export class ResponseProcessor implements IResponseProcessor {
     }
 
     /**
-     * process the viewState update, update the affected
+     * Process the viewState update, update the affected
      * forms with their respective new viewstate values
      *
      */
@@ -298,7 +307,10 @@ export class ResponseProcessor implements IResponseProcessor {
     }
 
     /**
-     * post processing viewstate fixing
+     * Postprocessing view state fixing
+     * this appends basically the incoming view states to the forms.
+     * It is called from outside after all forms have been processed basically
+     * as last lifecycle step, before going into the next request.
      */
     fixViewStates() {
         Stream.ofAssoc<StateHolder>(this.internalContext.getIf(APPLIED_VST).orElse({}).value)
@@ -312,6 +324,10 @@ export class ResponseProcessor implements IResponseProcessor {
             });
     }
 
+    /**
+     * same as with view states before applies the incoming client windows as last step after the rest of the processing
+     * is done.
+     */
     fixClientWindow() {
         Stream.ofAssoc<StateHolder>(this.internalContext.getIf(APPLIED_CLIENT_WINDOW).orElse({}).value)
             .each((item: Array<any>) => {
@@ -331,7 +347,7 @@ export class ResponseProcessor implements IResponseProcessor {
         let eventData = EventData.createFromRequest(this.request.value, this.externalContext, SUCCESS);
 
         //because some frameworks might decorate them over the context in the response
-        let eventHandler = this.externalContext.getIf(ON_EVENT).orElse(this.internalContext.getIf(ON_EVENT).value).orElse(EMPTY_FUNC).value;
+        let eventHandler = this.externalContext.getIf(ON_EVENT).orElseLazy(() => this.internalContext.getIf(ON_EVENT).value).orElse(EMPTY_FUNC).value;
         Implementation.sendEvent(eventData, eventHandler);
     }
 
@@ -441,4 +457,8 @@ export class ResponseProcessor implements IResponseProcessor {
             node?.id?.value?.indexOf([P_CLIENT_WINDOW, separatorChar].join(EMPTY_STR)) != -1);
     }
 
+    private triggerOnError(errorData: ErrorData) {
+        this.externalContext.getIf(ON_ERROR).orElse(this.internalContext.getIf(ON_ERROR).value).orElse(EMPTY_FUNC).value(errorData);
+    }
+
 }

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

@@ -13,11 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {ArrayCollector, Config, DomQueryCollector, Lang, LazyStream} from "mona-dish";
-
-import {Stream, DQ} from "mona-dish";
+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 {EMPTY_STR, P_VIEWSTATE} from "../core/Const";
 
 
 /**
@@ -28,43 +26,55 @@ import {EMPTY_STR, P_VIEWSTATE} from "../core/Const";
  * due to api constraints on the HTML Form object in IE11
  * and due to the url encoding constraint given by the jsf.js spec
  *
- * TODO not ideal. too many encoding calls
  * probably only one needed and one overlay!
- * the entire fileinput storing probably is redundant now
- * that domquery has been fixed
+ * the entire file input storing probably is redundant now
+ * that dom query has been fixed //TODO check this
  */
 export class XhrFormData extends Config {
-
-    private fileInputs = {};
+    /**
+     * Checks if the given datasource is a multipart request source
+     * multipart is only needed if one of the executes is a file input
+     * since file inputs are stateless, they fall out of the view state
+     * and need special handling. With file submits we have to send a formData object
+     * instead of an encoded string files cannot be sent that way
+     */
+    isMultipartRequest: boolean = false;
 
     /**
      * data collector from a given form
      *
      * @param dataSource either a form as DomQuery object or an encoded url string
-     * @param partialIdsArray partial ids to collect, to reduce the data sent down
+     * @param viewState the form view state or an external viewstate coming in as string
+     * @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, private partialIdsArray?: string[]) {
+    constructor(private dataSource: DQ | string, viewState?: string, 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
+        //a call from getViewState passes the form element as datasource,
         //so we have two call points
         if (isString(dataSource)) {
             this.assignEncodedString(<string>this.dataSource);
         } else {
-            this.handleFormSource();
+            this.applyFormDataToConfig();
+        }
+        if('undefined' != typeof viewState) {
+            this.assignEncodedString(viewState)
+        }
+        if(executes) {
+            this.postInit(...executes);
         }
     }
 
     /**
-     * generic application of ids
+     * generic post init code, for now, this peforms some post assign data post processing
      * @param executes
      */
-    applyFileInputs(...executes: Array<string>) {
-
+    postInit(...executes: Array<string>) {
         let fetchInput = (id: string): DQ => {
-            if (id == "@all") {
+            if (id == IDENT_ALL) {
                 return DQ.querySelectorAllDeep("input[type='file']");
-            } else if (id == "@form") {
+            } else if (id == IDENT_FORM) {
                 return (<DQ>this.dataSource).querySelectorAllDeep("input[type='file']");
             } else {
                 let element = DQ.byId(id, true);
@@ -76,48 +86,17 @@ export class XhrFormData extends Config {
             return item.isPresent();
         };
 
-        let applyInput = (item: DQ) => {
-            this.fileInputs[this.resolveSubmitIdentifier(<HTMLInputElement>item.getAsElem(0).value)] = true;
-        };
 
-        LazyStream.of(...executes)
+        this.isMultipartRequest = LazyStream.of(...executes)
             .map(fetchInput)
             .filter(inputExists)
-            .each(applyInput);
-    }
-
-    private getFileInputs(rootElment: DQ): DQ {
-        const rootFileInputs = rootElment
-            .filter(elem => elem.matchesSelector("input[type='file']"))
-        const childFileInputs = rootElment
-            .querySelectorAll("input[type='file']");
-
-        let ret = rootFileInputs.concat(childFileInputs);
-        return ret;
-    }
-
-    private handleFormSource() {
-        //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 javax.faces.ViewState
-         * Enhancement partial page submit
-         *
-         */
-        this.encodeSubmittableFields(this, <DQ>this.dataSource, this.partialIdsArray);
-
-        if (this.getIf(P_VIEWSTATE).isPresent()) {
-            return;
-        }
-
-        this.applyViewState(<DQ>this.dataSource);
+            .first().isPresent();
     }
 
     /**
-     * special case viewstate handling
+     * special case view state handling
      *
-     * @param form the form holding the viewstate value
+     * @param form the form holding the view state value
      */
     private applyViewState(form: DQ) {
         let viewState = form.byId(P_VIEWSTATE, true).inputValue;
@@ -125,19 +104,22 @@ export class XhrFormData extends Config {
     }
 
     /**
-     * assignes a url encoded string to this xhrFormData object
+     * assigns an url encoded string to this xhrFormData object
      * as key value entry
      * @param encoded
      */
     assignEncodedString(encoded: string) {
-        //TODO reevaluate this method
-        //this code filters out empty strings as key value pairs
+        // 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
+     */
     assignString(keyValueEntries: string[]) {
         let toMerge = new Config({});
 
@@ -161,29 +143,12 @@ export class XhrFormData extends Config {
         this.shallowMerge(toMerge);
     }
 
-// noinspection JSUnusedGlobalSymbols
     /**
-     * @returns a Form data representation
+     * @returns a Form data representation, this is needed for file submits
      */
     toFormData(): FormData {
         let ret: any = new FormData();
-
-        LazyStream.of(...Object.keys(this.value))
-            .filter(key => !(key in this.fileInputs))
-            .each(key => {
-                Stream.of(...this.value[key]).each(item => ret.append(key, item));
-            });
-        Stream.of<string>(...Object.keys(this.fileInputs)).each((key: string) => {
-            DQ.querySelectorAllDeep(`[name='${key}'], [id="${key}"]`).eachElem((elem: HTMLInputElement) => {
-                let identifier = this.resolveSubmitIdentifier(elem);
-                if (!elem?.files?.length) {
-                    ret.append(identifier, elem.value);
-                    return;
-                }
-
-                ret.append(identifier, elem.files[0]);
-            })
-        });
+        this.appendInputs(ret);
         return ret;
     }
 
@@ -213,6 +178,42 @@ export class XhrFormData extends Config {
         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);
+    }
+
+    /**
+     * 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 javax.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
      * @param {Object} targetBuf - the target form buffer receiving the data
@@ -222,30 +223,25 @@ export class XhrFormData extends Config {
     private encodeSubmittableFields(targetBuf: Config,
                                     parentItem: DQ, partialIds ?: string[]) {
         let toEncode = null;
-        if (this.partialIdsArray && this.partialIdsArray.length) {
-            //in case of our myfaces reduced ppr we only
-            //only submit the partials
+        if (this.partialIds && this.partialIds.length) {
+            // in case of our myfaces reduced ppr we
+            // only submit the partials
             this._value = {};
-            toEncode = new DQ(...this.partialIdsArray);
+            toEncode = new DQ(...this.partialIds);
 
         } else {
-            if (parentItem.isAbsent()) throw "NO_PARITEM";
+            if (parentItem.isAbsent()) throw 'NO_PAR_ITEM';
             toEncode = parentItem;
         }
 
         //lets encode the form elements
-
         this.shallowMerge(toEncode.deepElements.encodeFormElement());
     }
 
-    /**
-     * checks if the given datasource is a multipart request source
-     * multipart is only needed if one of the executes is a file input
-     * since file inputs are stateless, they fall out of the viewstate
-     * and need special handling
-     */
-    get isMultipartRequest(): boolean {
-        return !!Object.keys(this.fileInputs).length;
+    private appendInputs(ret: any) {
+        Stream.of(...Object.keys(this.value))
+            .each(key => {
+                Stream.of(...this.value[key]).each(item => ret.append(key, item));
+            });
     }
-
 }

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

@@ -78,6 +78,7 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
      *
      * Optional Parameters
      *
+     * @param internalContext internal context with internal info which is passed through, not used by the user
      * @param partialIdsArray an optional restricting partial ids array for encoding
      * @param timeout optional xhr timeout
      * @param ajaxType optional request type, default "POST"
@@ -120,19 +121,24 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
             let viewState = jsf.getViewState(formElement);
             //encoded we need to decode
             //We generated a base representation of the current form
-            let formData: XhrFormData = new XhrFormData(this.sourceForm);
             //in case someone has overloaded the viewstate with addtional decorators we merge
             //that in, there is no way around it, the spec allows it and getViewState
             //must be called, so whatever getViewState delivers has higher priority then
             //whatever the formData object delivers
-            formData.assignEncodedString(viewState);
-            formData.applyFileInputs(...executesArr());
+            //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);
 
             this.contentType = formData.isMultipartRequest ? "undefined" : this.contentType;
 
             //next step the pass through parameters are merged in for post params
             let requestContext = this.requestContext;
             let passThroughParams = requestContext.getIf(CTX_PARAM_PASS_THR);
+
+            // 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);
 
             this.responseContext = passThroughParams.deepCopy;
@@ -162,7 +168,7 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
 
             //probably not needed anymore, will test this
             //some webkit based mobile browsers do not follow the w3c spec of
-            // setting the accept headers automatically
+            // setting, they accept headers automatically
             ignoreErr(() => xhrObject.setRequestHeader(REQ_ACCEPT, STD_ACCEPT));
 
             this.sendEvent(BEGIN);
@@ -223,23 +229,23 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
      * @param resolve
      * @param reject
      */
-    protected registerXhrCallbacks(resolve: Consumer<any>, reject: Consumer<any>) {
+    private registerXhrCallbacks(resolve: Consumer<any>, reject: Consumer<any>) {
         let xhrObject = this.xhrObject;
 
         xhrObject.onabort = () => {
-            this.onAbort(resolve, reject);
+            this.onAbort(reject);
         };
         xhrObject.ontimeout = () => {
-            this.onTimeout(resolve, reject);
+            this.onTimeout(reject);
         };
         xhrObject.onload = () => {
-            this.onSuccess(this.xhrObject, resolve, reject)
+            this.onSuccess(resolve)
         };
         xhrObject.onloadend = () => {
-            this.onDone(this.xhrObject, resolve, reject);
+            this.onDone(this.xhrObject, resolve);
         };
         xhrObject.onerror = (errorData: any) => {
-            this.onError(errorData, resolve, reject);
+            this.onError(errorData, reject);
         };
     }
 
@@ -250,29 +256,29 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
      * the xhr object depending on its own state
      */
 
-    protected onAbort(resolve: Consumer<any>, reject: Consumer<any>) {
+    private onAbort(reject: Consumer<any>) {
         reject();
     }
 
-    protected onTimeout(resolve: Consumer<any>, reject: Consumer<any>) {
+    private onTimeout(reject: Consumer<any>) {
         this.sendEvent(STATE_EVT_TIMEOUT);
         reject();
     }
 
-    protected onSuccess(data: any, resolve: Consumer<any>, reject: Consumer<any>) {
+    private onSuccess(resolve: Consumer<any>) {
 
         this.sendEvent(COMPLETE);
 
         //malforms always result in empty response xml
         if (!this?.xhrObject?.responseXML) {
-            this.handleMalFormedXML(resolve, reject);
+            this.handleMalFormedXML(resolve);
             return;
         }
 
         jsf.ajax.response(this.xhrObject, this.responseContext.value ?? {});
     }
 
-    private handleMalFormedXML(resolve: Function, reject: Function) {
+    private handleMalFormedXML(resolve: Function) {
         this.stopProgress = true;
         let errorData = {
             type: ERROR,
@@ -293,18 +299,29 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
         //non blocking non clearing
     }
 
-    protected onDone(data: any, resolve: Consumer<any>, reject: Consumer<any>) {
+    private onDone(data: any, resolve: Consumer<any>) {
         if (this.stopProgress) {
             return;
         }
         resolve(data);
     }
 
-    protected onError(errorData: any, resolve: Consumer<any>, reject: Consumer<any>) {
+    private onError(errorData: any,  reject: Consumer<any>) {
         this.handleError(errorData);
         reject();
     }
 
+    private sendRequest(formData: XhrFormData) {
+        let isPost = this.ajaxType != REQ_TYPE_GET;
+        if (formData.isMultipartRequest) {
+            //in case of a multipart request we send in a formData object as body
+            this.xhrObject.send((isPost) ? formData.toFormData() : null);
+        } else {
+            //in case of a normal request we send it normally
+            this.xhrObject.send((isPost) ? formData.toString() : null);
+        }
+    }
+
     /*
      * other helpers
      */
@@ -331,15 +348,4 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
         Implementation.sendError(errorData, eventHandler);
     }
 
-    protected sendRequest(formData: XhrFormData) {
-        let isPost = this.ajaxType != REQ_TYPE_GET;
-        if (formData.isMultipartRequest) {
-            //in case of a multipart request we send in a formData object as body
-            this.xhrObject.send((isPost) ? formData.toFormData() : null);
-        } else {
-            //in case of a normal request we send it normally
-            this.xhrObject.send((isPost) ? formData.toString() : null);
-        }
-    }
-
 }