jsf.js_next_gen 1.0.0-beta-20 → 4.0.0-RC.1

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

@@ -1,4 +1,4 @@
-/* Licensed to the Apache Software Foundation (ASF) under one or more
+/*! 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
@@ -16,6 +16,7 @@
 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} from "../util/ExtDomQuery";
 
 
 /**
@@ -24,7 +25,7 @@ import isString = Lang.isString;
  *
  * We cannot use standard html5 forms everywhere
  * due to api constraints on the HTML Form object in IE11
- * and due to the url encoding constraint given by the jsf.js spec
+ * and due to the url encoding constraint given by the faces.js spec
  *
  * probably only one needed and one overlay!
  * the entire file input storing probably is redundant now
@@ -44,7 +45,7 @@ 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 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
      */
@@ -67,8 +68,9 @@ export class XhrFormData extends Config {
     }
 
     /**
-     * generic post init code, for now, this peforms some post assign data post processing
-     * @param executes
+     * generic post init code, for now, this performs some post assign data post-processing
+     * @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 fetchInput = (id: string): DQ => {
@@ -121,7 +123,7 @@ export class XhrFormData extends Config {
      * @param keyValueEntries
      */
     assignString(keyValueEntries: string[]) {
-        let toMerge = new Config({});
+        let toMerge = new ExtConfig({});
 
         function splitToKeyVal(line: string) {
             return line.split(/=(.*)/gi);
@@ -201,7 +203,7 @@ export class XhrFormData extends Config {
         /*
          * Spec. 13.3.1
          * Collect and encode input elements.
-         * Additionally the hidden element javax.faces.ViewState
+         * Additionally the hidden element jakarta.faces.ViewState
          * Enhancement partial page submit
          *
          */

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

@@ -1,4 +1,4 @@
-/* Licensed to the Apache Software Foundation (ASF) under one or more
+/*! 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
@@ -46,8 +46,8 @@ import {resolveFinalUrl, resolveHandlerFunc} from "./RequestDataResolver";
 import failSaveExecute = ExtLang.failSaveExecute;
 
 /**
- * JSFed XHR Request Wrapper
- * as Asyncrunnable for our Asynchronous queue
+ * Faces XHR Request Wrapper
+ * as AsyncRunnable for our Asynchronous queue
  *
  * The idea is that we basically just enqueue
  * a single ajax request into our queue
@@ -55,8 +55,6 @@ import failSaveExecute = ExtLang.failSaveExecute;
  *
  */
 
-declare let jsf: any;
-
 export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
 
     private responseContext: Config;
@@ -66,15 +64,15 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
     /**
      * helper support so that we do not have to drag in Promise shims
      */
-    private catchFuncs: Array<Function> = [];
-    private thenFunc: Array<Function> = [];
+    private catchFunctions: Array<Function> = [];
+    private thenFunctions: Array<Function> = [];
 
     /**
-     * Reqired Parameters
+     * Required Parameters
      *
      * @param source the issuing element
      * @param sourceForm the form which is related to the issuing element
-     * @param requestContext the request context with allö pass through values
+     * @param requestContext the request context with all pass through values
      *
      * Optional Parameters
      *
@@ -83,7 +81,7 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
      * @param timeout optional xhr timeout
      * @param ajaxType optional request type, default "POST"
      * @param contentType optional content type, default "application/x-www-form-urlencoded"
-     * @param xhrObject optional xhr object which must fullfill the XMLHTTPRequest api, default XMLHttpRequest
+     * @param xhrObject optional xhr object which must fulfill the XMLHTTPRequest api, default XMLHttpRequest
      */
     constructor(
         private source: DQ,
@@ -96,10 +94,10 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
         private contentType = URL_ENCODED,
         private xhrObject = new XMLHttpRequest()
     ) {
-        /*
-        * we omit promises here
-        * some browsers do not support it and we do not need shim code
-        */
+
+        // we omit promises here because we have to deal with cancel functionality,
+        // and promises to not provide that (yet) instead we have our async queue
+        // which uses an api internally, which is very close to promises
         this.registerXhrCallbacks((data: any) => {
             this.resolve(data)
         }, (data: any) => {
@@ -118,21 +116,21 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
         try {
 
             let formElement = this.sourceForm.getAsElem(0).value;
-            let viewState = jsf.getViewState(formElement);
-            //encoded we need to decode
-            //We generated a base representation of the current form
-            //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
-            //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 viewState = (window?.faces ?? window?.jsf).getViewState(formElement);
+            // 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
+            // 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
+            // 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
+            // next step the pass through parameters are merged in for post params
             let requestContext = this.requestContext;
             let passThroughParams = requestContext.getIf(CTX_PARAM_PASS_THR);
 
@@ -143,31 +141,31 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
 
             this.responseContext = passThroughParams.deepCopy;
 
-            //we have to shift the internal passthroughs around to build up our response context
+            // we have to shift the internal passthroughs around to build up our response context
             let responseContext = this.responseContext;
 
             responseContext.assign(CTX_PARAM_MF_INTERNAL).value = this.internalContext.value;
 
-            //per spec the onevent and onerrors must be passed through to the response
+            // per spec the onevent and onerror handlers must be passed through to the response
             responseContext.assign(ON_EVENT).value = requestContext.getIf(ON_EVENT).value;
             responseContext.assign(ON_ERROR).value = requestContext.getIf(ON_ERROR).value;
 
             xhrObject.open(this.ajaxType, resolveFinalUrl(this.sourceForm, formData, this.ajaxType), true);
 
-            //adding timeout
+            // adding timeout
             this.timeout ? xhrObject.timeout = this.timeout : null;
 
-            //a bug in the xhr stub library prevents the setRequestHeader to be properly executed on fake xhr objects
-            //normal browsers should resolve this
-            //tests can quietly fail on this one
+            // a bug in the xhr stub library prevents the setRequestHeader to be properly executed on fake xhr objects
+            // normal browsers should resolve this
+            // tests can quietly fail on this one
             if(this.contentType != "undefined") {
                 ignoreErr(() => xhrObject.setRequestHeader(CONTENT_TYPE, `${this.contentType}; charset=utf-8`));
             }
 
             ignoreErr(() => xhrObject.setRequestHeader(HEAD_FACES_REQ, VAL_AJAX));
 
-            //probably not needed anymore, will test this
-            //some webkit based mobile browsers do not follow the w3c spec of
+            // probably not needed anymore, will test this
+            // some webkit based mobile browsers do not follow the w3c spec of
             // setting, they accept headers automatically
             ignoreErr(() => xhrObject.setRequestHeader(REQ_ACCEPT, STD_ACCEPT));
 
@@ -176,7 +174,7 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
             this.sendRequest(formData);
 
         } catch (e) {
-            //_onError//_onError
+            // _onError
             this.handleError(e);
         }
         return this;
@@ -191,34 +189,31 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
     }
 
     resolve(data: any) {
-        Stream.of(...this.thenFunc).reduce((inputVal: any, thenFunc: any) => {
+        Stream.of(...this.thenFunctions).reduce((inputVal: any, thenFunc: any) => {
             return thenFunc(inputVal);
         }, data);
     }
 
     reject(data: any) {
-        Stream.of(...this.catchFuncs).reduce((inputVal: any, catchFunc: any) => {
+        Stream.of(...this.catchFunctions).reduce((inputVal: any, catchFunc: any) => {
             return catchFunc(inputVal);
         }, data);
     }
 
     catch(func: (data: any) => any): AsyncRunnable<XMLHttpRequest> {
-        //this.$promise.catch(func);
-        this.catchFuncs.push(func);
+        this.catchFunctions.push(func);
         return this;
     }
 
     finally(func: () => void): AsyncRunnable<XMLHttpRequest> {
-        //no ie11 support we probably are going to revert to shims for that one
-        //(<any>this.$promise).then(func).catch(func);
-        this.catchFuncs.push(func);
-        this.thenFunc.push(func);
+        // no ie11 support we probably are going to revert to shims for that one
+        this.catchFunctions.push(func);
+        this.thenFunctions.push(func);
         return this;
     }
 
     then(func: (data: any) => any): AsyncRunnable<XMLHttpRequest> {
-        //this.$promise.then(func);
-        this.thenFunc.push(func);
+        this.thenFunctions.push(func);
         return this;
     }
 
@@ -245,16 +240,35 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
             this.onDone(this.xhrObject, resolve);
         };
         xhrObject.onerror = (errorData: any) => {
+
+            // some browsers trigger an error when cancelling a request internally
+            // in this case we simply ignore the request and clear up the queue, because
+            // it is not safe anymore to proceed with the current queue
+            // This bypasses a Safari issue where it keeps requests hanging after page unload
+            // and then triggers a cancel error on then instead of just stopping
+            // and clearing the code
+            if(this.isCancelledResponse(this.xhrObject)) {
+                reject();
+                this.stopProgress = true;
+                return;
+            }
             this.onError(errorData, reject);
         };
     }
 
+    private isCancelledResponse(currentTarget: XMLHttpRequest): boolean {
+        return currentTarget?.status === 0 && // cancelled by browser
+            currentTarget?.readyState === 4 &&
+            currentTarget?.responseText === '' &&
+            currentTarget?.responseXML === null;
+    }
+
     /*
-     * xhr processing callbacks
-     *
-     * Those methods are the callbacks called by
-     * the xhr object depending on its own state
-     */
+         * xhr processing callbacks
+         *
+         * Those methods are the callbacks called by
+         * the xhr object depending on its own state
+         */
 
     private onAbort(reject: Consumer<any>) {
         reject();
@@ -269,13 +283,14 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
 
         this.sendEvent(COMPLETE);
 
-        //malforms always result in empty response xml
+        // malformed responses always result in empty response xml
+        // per spec a valid response cannot be empty
         if (!this?.xhrObject?.responseXML) {
             this.handleMalFormedXML(resolve);
             return;
         }
 
-        jsf.ajax.response(this.xhrObject, this.responseContext.value ?? {});
+        (window?.faces ?? window.jsf).ajax.response(this.xhrObject, this.responseContext.value ?? {});
     }
 
     private handleMalFormedXML(resolve: Function) {
@@ -292,14 +307,15 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
         try {
             this.handleError(errorData, true);
         } finally {
-            //we issue a resolve in this case to allow the system to recover
+            // we issue a resolve in this case to allow the system to recover
+            // reject would clean up the queue
             resolve(errorData);
-            //reject();
         }
-        //non blocking non clearing
+        // non blocking non clearing
     }
 
     private onDone(data: any, resolve: Consumer<any>) {
+        // if stop progress a special handling including resolve is already performed
         if (this.stopProgress) {
             return;
         }
@@ -314,10 +330,10 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
     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
+            // 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
+            // in case of a normal request we send it normally
             this.xhrObject.send((isPost) ? formData.toString() : null);
         }
     }
@@ -328,10 +344,10 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
     private sendEvent(evtType: string) {
         let eventData = EventData.createFromRequest(this.xhrObject, this.requestContext, evtType);
         try {
-            //user code error, we might cover
-            //this in onError but also we cannot swallow it
-            //we need to resolve the local handlers lazyly,
-            //because some frameworks might decorate them over the context in the response
+            // User code error, we might cover
+            // this in onError, but also we cannot swallow it.
+            // We need to resolve the local handlers lazily,
+            // because some frameworks might decorate them over the context in the response
             let eventHandler = resolveHandlerFunc(this.requestContext, this.responseContext, ON_EVENT);
 
             Implementation.sendEvent(eventData, eventHandler);

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

@@ -1,4 +1,4 @@
-/* Licensed to the Apache Software Foundation (ASF) under one or more
+/*! 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
@@ -27,10 +27,6 @@ import {DQ, Stream} from "mona-dish";
  *
  * we might move the code over in the future, but for now a straight 1:1 port suffices
  */
-declare const window: any;
-declare const myfaces: any;
-
-//TODO add unit tests to check all this here that it works just as before
 export module oam {
     /**
      * sets a hidden input field
@@ -38,7 +34,7 @@ export module oam {
      * @param name the hidden field
      * @param value the value to be rendered
      */
-    export const setHiddenInput = function (formName: string, name: string, value: string) {
+    export const setHiddenInput = function (formName: string, name: string, value: string): void {
         DQ.byId(document.forms[formName])
             .each(form => {
                 const input = form.querySelectorAll(`input[type='hidden'][name='${name}']`);
@@ -58,7 +54,7 @@ export module oam {
      * @param formName formName for the input
      * @param name the name of the input field
      */
-    export const clearHiddenInput = function (formName: string, name: string) {
+    export const clearHiddenInput = function (formName: string, name: string): void {
         let element = document.forms?.[formName]?.elements?.[name];
         if(!element) {
             return;
@@ -77,13 +73,13 @@ export module oam {
      * @param target
      * @param params
      */
-    export const submitForm = function (formName: string, linkId: string, target: string, params: { [key: string]: any }) {
+    export const submitForm = function (formName: string, linkId: string, target: string, params: { [key: string]: any }): boolean {
         let clearFn = 'clearFormHiddenParams_' + formName.replace(/-/g, '\$:').replace(/:/g, '_');
         window?.[clearFn]?.(formName);
 
         //autoscroll code
-        if (window?.myfaces?.core?.config?.autoScroll && window?.getScrolling) {
-            myfaces.oam.setHiddenInput(formName, 'autoScroll', window?.getScrolling());
+        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]);
@@ -106,13 +102,14 @@ 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]);
+                });
+                myfaces.oam.clearHiddenInput(formName, `${formName}:_idcl`);
             }
 
-            form.attr(ATTR_TARGET).value = oldTarget;
-            Stream.ofAssoc(params).each((param: [string, any]) => {
-                myfaces.oam.clearHiddenInput(formName, param[0]);
-            });
-            myfaces.oam.clearHiddenInput(formName, `${formName}:_idcl`);
         });
         return false;
     };