Merge pull request #817 from werpu/main

Various JS codebase fixes (see description)

api/src/client/package.json

@@ -24,7 +24,7 @@
     "html-webpack-plugin": "^5.5.1",
     "jsdom": "^21.1.1",
     "jsdom-global": "^3.0.2",
-    "jsf.js_next_gen": "4.0.3-beta.5",
+    "jsf.js_next_gen": "4.0.4-beta.4",
     "mocha": "^10.2.0",
     "npm-check-updates": "^16.10.8",
     "nyc": "^15.1.0",

api/src/client/typescript/faces/impl/AjaxImpl.ts

@@ -55,7 +55,12 @@ import {
     NAMING_CONTAINER_ID,
     CTX_PARAM_PPS,
     MYFACES_OPTION_PPS,
-    $nsp
+    $nsp,
+    CTX_PARAM_UPLOAD_ON_PROGRESS,
+    CTX_PARAM_UPLOAD_PREINIT,
+    CTX_PARAM_UPLOAD_LOADSTART,
+    CTX_PARAM_UPLOAD_LOADEND,
+    CTX_PARAM_UPLOAD_LOAD, CTX_PARAM_UPLOAD_ERROR, CTX_PARAM_UPLOAD_ABORT, CTX_PARAM_UPLOAD_TIMEOUT
 } from "./core/Const";
 import {
     resolveDefaults,
@@ -338,6 +343,19 @@ export module Implementation {
         // pass through options are stored under _mfInternal in the context
         internalCtx.assign(CTX_PARAM_SRC_FRM_ID).value = formId;
 
+        /**
+         * special myfaces only internal parameter for onProgress until we have an official api
+         * that way we can track the progress of a xhr request (useful for file uploads)
+         */
+        internalCtx.assign(CTX_PARAM_UPLOAD_PREINIT).value = options.value?.myfaces?.upload?.preinit;
+        internalCtx.assign(CTX_PARAM_UPLOAD_LOADSTART).value = options.value?.myfaces?.upload?.loadstart;
+        internalCtx.assign(CTX_PARAM_UPLOAD_ON_PROGRESS).value = options.value?.myfaces?.upload?.progress;
+        internalCtx.assign(CTX_PARAM_UPLOAD_LOADEND).value = options.value?.myfaces?.upload?.loadend;
+        internalCtx.assign(CTX_PARAM_UPLOAD_LOAD).value = options.value?.myfaces?.upload?.load;
+        internalCtx.assign(CTX_PARAM_UPLOAD_ERROR).value = options.value?.myfaces?.upload?.error;
+        internalCtx.assign(CTX_PARAM_UPLOAD_ABORT).value = options.value?.myfaces?.upload?.abort;
+        internalCtx.assign(CTX_PARAM_UPLOAD_TIMEOUT).value = options.value?.myfaces?.upload?.timeout;
+
         // mojarra compatibility, mojarra is sending the form id as well
         // this is not documented behavior but can be determined by running
         // mojarra under blackbox conditions.
@@ -725,7 +743,7 @@ export module Implementation {
             // 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;
+            return DQ.byId(finalIdentifier).isPresent() ? finalIdentifier : componentIdToTransform;
         };
 
         // in this case we do not use lazy stream because it won´t bring any code reduction

api/src/client/typescript/faces/impl/core/Const.ts

@@ -106,6 +106,14 @@ export const CTX_OPTIONS_EXECUTE = "execute";
 
 export const CTX_PARAM_MF_INTERNAL = "myfaces.internal";
 export const CTX_PARAM_SRC_FRM_ID = "myfaces.source.formId";
+export const CTX_PARAM_UPLOAD_ON_PROGRESS = "myfaces.upload.progress";
+export const CTX_PARAM_UPLOAD_PREINIT = "myfaces.upload.preinit";
+export const CTX_PARAM_UPLOAD_LOADSTART = "myfaces.upload.loadstart";
+export const CTX_PARAM_UPLOAD_LOADEND = "myfaces.upload.loadend";
+export const CTX_PARAM_UPLOAD_LOAD = "myfaces.upload.load";
+export const CTX_PARAM_UPLOAD_ERROR = "myfaces.upload.error";
+export const CTX_PARAM_UPLOAD_ABORT = "myfaces.upload.abort";
+export const CTX_PARAM_UPLOAD_TIMEOUT = "myfaces.upload.timeout";
 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";

api/src/client/typescript/faces/impl/util/ExtDomQuery.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import {Config, IValueHolder, Optional, DomQuery, DQ, Es2019Array, ValueEmbedder} from "mona-dish";
-import {$nsp, P_WINDOW_ID} from "../core/Const";
+import {$faces, $nsp, P_WINDOW_ID} from "../core/Const";
 
 
 /**
@@ -234,8 +234,13 @@ export class ExtDomQuery extends DQ {
      * @param deep whether the search should go into embedded shadow dom elements
      * @return a DomQuery containing the found elements
      */
-    static byId(selector: string | DomQuery | Element, deep = false): ExtDomQuery {
+    static byId(selector: DomQuery | Element | string, deep = false): ExtDomQuery {
         const ret = DomQuery.byId(selector, deep);
+        if($faces().getProjectStage().toLowerCase() == "development" &&
+            window?.console && ret.isAbsent() && selector) {
+            let identifier = (<DomQuery>selector)?.id?.value ?? (<Element>selector)?.id ?? selector.toString();
+            console.error("Element  " + identifier + "not found");
+        }
         return new ExtDomQuery(ret);
     }
 

api/src/client/typescript/faces/impl/xhrCore/ErrorData.ts

@@ -23,7 +23,7 @@ import {
     STATUS,
     UNKNOWN
 } from "../core/Const";
-import {Config, Optional, XMLQuery} from "mona-dish";
+import {Config, DQ, Optional, XMLQuery} from "mona-dish";
 
 import {EventData} from "./EventData";
 import {ExtLang} from "../util/Lang";
@@ -49,7 +49,7 @@ export enum ErrorType {
 export class ErrorData extends EventData implements IErrorData {
 
     type: string = "error";
-    source: string;
+    source: string | Element;
 
     errorName: string;
     errorMessage: string;
@@ -64,9 +64,12 @@ export class ErrorData extends EventData implements IErrorData {
     serverErrorMessage: string;
     description: string;
 
-    constructor(source: string, errorName: string, errorMessage: string, responseText: string = null, responseXML: Document = null, responseCode: number = -1, statusOverride: string = null,  type = ErrorType.CLIENT_ERROR) {
+    constructor(source: string | Element, errorName: string, errorMessage: string, responseText: string = null, responseXML: Document = null, responseCode: number = -1, statusOverride: string = null,  type = ErrorType.CLIENT_ERROR) {
         super();
-        this.source = source;
+
+        ///MYFACES-4676 error payload expects an element if possible
+        //this code remaps the string in an element and if not existing just passes as is what comes in
+        this.source = DQ.byId(source).value.orElse(source).value;
         this.type = ERROR;
         this.errorName = errorName;
 

api/src/client/typescript/faces/impl/xhrCore/XhrRequest.ts

@@ -48,8 +48,19 @@ import {
     CTX_PARAM_SRC_FRM_ID,
     CTX_PARAM_SRC_CTL_ID,
     CTX_PARAM_PPS,
-    EMPTY_RESPONSE, HTTP_ERROR,
-    EMPTY_STR, $nsp, P_BEHAVIOR_EVENT
+    EMPTY_RESPONSE,
+    HTTP_ERROR,
+    EMPTY_STR,
+    $nsp,
+    P_BEHAVIOR_EVENT,
+    CTX_PARAM_UPLOAD_ON_PROGRESS,
+    CTX_PARAM_UPLOAD_LOAD,
+    CTX_PARAM_UPLOAD_LOADSTART,
+    CTX_PARAM_UPLOAD_LOADEND,
+    CTX_PARAM_UPLOAD_ABORT,
+    CTX_PARAM_UPLOAD_TIMEOUT,
+    CTX_PARAM_UPLOAD_ERROR,
+    CTX_PARAM_UPLOAD_PREINIT
 } from "../core/Const";
 import {
     resolveFinalUrl,
@@ -117,6 +128,7 @@ export class XhrRequest extends AsyncRunnable<XMLHttpRequest> {
         let xhrObject = this.xhrObject;
         let sourceForm = DQ.byId(this.internalContext.getIf(CTX_PARAM_SRC_FRM_ID).value)
 
+
         let executesArr = () => {
             return this.requestContext.getIf(CTX_PARAM_REQ_PASS_THR, P_EXECUTE).get(IDENT_NONE).value.split(/\s+/gi);
         };
@@ -239,6 +251,36 @@ export class XhrRequest extends AsyncRunnable<XMLHttpRequest> {
         xhrObject.onloadend = () => {
             this.onResponseProcessed(this.xhrObject, resolve);
         };
+
+        if(xhrObject?.upload) {
+            //this is an  extension so that we can send the upload object of the current
+            //request before any operation
+            this.internalContext.getIf(CTX_PARAM_UPLOAD_PREINIT).value?.(xhrObject.upload);
+            //now we hook in the upload events
+            xhrObject.upload.addEventListener("progress", (event: ProgressEvent) => {
+                this.internalContext.getIf(CTX_PARAM_UPLOAD_ON_PROGRESS).value?.(xhrObject.upload, event);
+            });
+            xhrObject.upload.addEventListener("load", (event: ProgressEvent) => {
+                this.internalContext.getIf(CTX_PARAM_UPLOAD_LOAD).value?.(xhrObject.upload, event);
+            });
+            xhrObject.upload.addEventListener("loadstart", (event: ProgressEvent) => {
+                this.internalContext.getIf(CTX_PARAM_UPLOAD_LOADSTART).value?.(xhrObject.upload, event);
+            });
+            xhrObject.upload.addEventListener("loadend", (event: ProgressEvent) => {
+                this.internalContext.getIf(CTX_PARAM_UPLOAD_LOADEND).value?.(xhrObject.upload, event);
+            });
+            xhrObject.upload.addEventListener("abort", (event: ProgressEvent) => {
+                this.internalContext.getIf(CTX_PARAM_UPLOAD_ABORT).value?.(xhrObject.upload, event);
+            });
+            xhrObject.upload.addEventListener("timeout", (event: ProgressEvent) => {
+                this.internalContext.getIf(CTX_PARAM_UPLOAD_TIMEOUT).value?.(xhrObject.upload, event);
+            });
+            xhrObject.upload.addEventListener("error", (event: ProgressEvent) => {
+                this.internalContext.getIf(CTX_PARAM_UPLOAD_ERROR).value?.(xhrObject.upload, event);
+            });
+
+        }
+
         xhrObject.onerror = (errorData: any) => {
             // Safari in rare cases triggers an error when cancelling a request internally, or when
             // in this case we simply ignore the request and clear up the queue, because