jsf.js_next_gen 4.0.1-beta.5 → 4.0.1-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsf.js_next_gen",
-  "version": "4.0.1-beta.5",
+  "version": "4.0.1-beta.7",
   "description": "A next generation typescript reimplementation of jsf.js",
   "main": "dist/window/faces.js",
   "scripts": {
@@ -23,7 +23,7 @@
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@types/chai": "^4.3.4",
     "@types/mocha": "^10.0.1",
-    "@types/node": "^18.14.6",
+    "@types/node": "^18.15.5",
     "@types/sinon": "^10.0.13",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "chai": "^4.3.7",
@@ -31,24 +31,24 @@
     "cross-env": "^7.0.3",
     "html-webpack-plugin": "^5.5.0",
     "http-server": "^14.1.1",
-    "jsdom": "^21.1.0",
+    "jsdom": "^21.1.1",
     "jsdom-global": "^3.0.2",
     "mocha": "^10.2.0",
-    "npm-check-updates": "^16.7.10",
+    "npm-check-updates": "^16.7.13",
     "nyc": "^15.1.0",
     "replace-in-file": "^6.3.5",
     "rxjs": "^7.8.0",
-    "sinon": "^15.0.1",
+    "sinon": "^15.0.2",
     "terser-webpack-plugin": "^5.3.7",
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
-    "typedoc": "^0.23.26",
-    "typescript": "^4.9.5",
-    "webpack": "^5.76.0",
+    "typedoc": "^0.23.28",
+    "typescript": "^5.0.2",
+    "webpack": "^5.76.2",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.13.1"
   },
   "dependencies": {
-    "mona-dish": "0.28.3"
+    "mona-dish": "0.28.7"
   }
 }

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

@@ -72,13 +72,9 @@ export class XhrQueueController<T extends IAsyncRunnable<any>> {
          * 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);
-        }
+        return asyncRunnable
+            .then(() => this.next())
+            .catch(() => this.clear());
     }
 
 
@@ -99,14 +95,4 @@ export class XhrQueueController<T extends IAsyncRunnable<any>> {
         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/XhrRequest.ts

@@ -74,6 +74,7 @@ export class XhrRequest extends AsyncRunnable<XMLHttpRequest> {
 
 
     private xhrObject = new XMLHttpRequest();
+
     /**
      * Required Parameters
      *
@@ -167,7 +168,7 @@ export class XhrRequest extends AsyncRunnable<XMLHttpRequest> {
             // 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") {
+            if (this.contentType != "undefined") {
                 ignoreErr(() => xhrObject.setRequestHeader(CONTENT_TYPE, `${this.contentType}; charset=utf-8`));
             }
 
@@ -181,12 +182,16 @@ export class XhrRequest extends AsyncRunnable<XMLHttpRequest> {
             this.sendEvent(BEGIN);
             this.sendRequest(formData);
         } catch (e) {
-            // _onError
-            this.handleError(e);
+            // this happens usually in a client side condition, hence we have to deal in with it in a client
+            // side manner
+            this.handleErrorAndClearQueue(e);
+            throw e;
         }
         return this;
     }
 
+
+
     cancel() {
         try {
             // this causes onError to be called where the error
@@ -198,7 +203,6 @@ export class XhrRequest extends AsyncRunnable<XMLHttpRequest> {
     }
 
 
-
     /**
      * attaches the internal event and processing
      * callback within the promise to our xhr object
@@ -210,111 +214,144 @@ export class XhrRequest extends AsyncRunnable<XMLHttpRequest> {
         const xhrObject = this.xhrObject;
 
         xhrObject.onabort = () => {
-            this.onAbort(reject);
+            this.onAbort(resolve, reject);
         };
         xhrObject.ontimeout = () => {
-            this.onTimeout(reject);
+            this.onTimeout(resolve, reject);
         };
         xhrObject.onload = () => {
-            this.onSuccess(resolve)
+            this.onResponseReceived(resolve)
         };
         xhrObject.onloadend = () => {
-            this.onDone(this.xhrObject, resolve);
+            this.onResponseProcessed(this.xhrObject, resolve);
         };
         xhrObject.onerror = (errorData: any) => {
-
-            // some browsers trigger an error when cancelling a request internally, or when
-            // cancel is called from outside
+            // 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
             // 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)) {
+            // in a page unload case it is safe to clear the queue
+            // in the exact safari case any request after this one in the queue is invalid
+            // because the queue references xhr requests to a page which already is gone!
+            if (this.isCancelledResponse(this.xhrObject)) {
                 /*
                  * this triggers the catch chain and after that finally
                  */
-                reject();
                 this.stopProgress = true;
+                reject();
+                return;
+            }
+            // error already processed somewhere else
+            if (this.stopProgress) {
                 return;
             }
-            this.onError(errorData, reject);
+            this.handleError(errorData);
         };
     }
 
     private isCancelledResponse(currentTarget: XMLHttpRequest): boolean {
-        return currentTarget?.status === 0 && // cancelled by browser
+        return currentTarget?.status === 0 && // cancelled internally 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
-         */
-
-    private onAbort(reject: Consumer<any>) {
-        reject();
+     * xhr processing callbacks
+     *
+     * Those methods are the callbacks called by
+     * the xhr object depending on its own state
+     */
+    /**
+     * client side abort... also here for now we clean the queue
+     *
+     * @param resolve
+     * @param reject
+     * @private
+     */
+    private onAbort(resolve: Consumer<any>, reject: Consumer<any>) {
+        // reject means clear queue, in this case we abort entirely the processing
+        // does not happen yet, we have to probably rethink this strategy in the future
+        // when we introduce cancel functionality
+        this.handleGenericError(reject);
     }
 
-    private onTimeout(reject: Consumer<any>) {
+    /**
+     * request timeout, this must be handled like a generic server error per spec
+     * unfortunately, so we have to jump to the next item (we cancelled before)
+     * @param resolve
+     * @param reject
+     * @private
+     */
+    private onTimeout(resolve: Consumer<any>, reject: Consumer<any>) {
+        // timeout also means we we probably should clear the queue,
+        // the state is unsafe for the next requests
         this.sendEvent(STATE_EVT_TIMEOUT);
-        reject();
+        this.handleGenericError(resolve);
     }
 
-    private onSuccess(resolve: Consumer<any>) {
+    /**
+     * the response is received and normally is a normal response
+     * but also can be some kind of error (http code >= 300)
+     * In any case the response will be resolved either as error or response
+     * and the next item in the queue will be processed
+     * @param resolve
+     * @private
+     */
+    private onResponseReceived(resolve: Consumer<any>) {
 
         this.sendEvent(COMPLETE);
-
-        // malformed responses always result in empty response xml
-        // per spec a valid response cannot be empty
-        if (!this?.xhrObject?.responseXML) {
-            this.handleMalFormedXML(resolve);
+        /*
+         * second on error path
+         */
+        if ((this.xhrObject?.status ?? 0) >= 300 || !this?.xhrObject?.responseXML) {
+            // all errors from the server are resolved without interfering in the queue
+            this.handleGenericError(resolve);
             return;
         }
 
         $faces().ajax.response(this.xhrObject, this.responseContext.value ?? {});
     }
 
-    private handleMalFormedXML(resolve: Function) {
+    private handleGenericError(resolveOrReject: Function) {
         this.stopProgress = true;
         const errorData = {
             type: ERROR,
             status: MALFORMEDXML,
-            responseCode: 200,
-            responseText: this.xhrObject?.responseText,
-            source:  this.internalContext.getIf(CTX_PARAM_SRC_CTL_ID).value
+            responseCode: this.xhrObject?.status ?? 400,
+            responseText: this.xhrObject?.responseText ?? "Error",
+            source: this.internalContext.getIf(CTX_PARAM_SRC_CTL_ID).value
         };
         try {
             this.handleError(errorData, true);
         } finally {
-            // we issue a resolve in this case to allow the system to recover
+            // we issue a resolveOrReject in this case to allow the system to recover
             // reject would clean up the queue
-            resolve(errorData);
+            // resolve would trigger the next element in the queue to be processed
+            resolveOrReject(errorData);
         }
         // non blocking non clearing
     }
 
-    private onDone(data: any, resolve: Consumer<any>) {
-        // if stop progress a special handling including resolve is already performed
+    /**
+     * last minute cleanup, the request now either is fully done
+     * or not by having had a cancel or error event be
+     * @param data
+     * @param resolve
+     * @private
+     */
+    private onResponseProcessed(data: any, resolve: Consumer<any>) {
+        // if stop progress true, the cleanup already has been performed
         if (this.stopProgress) {
             return;
         }
-        /**
-         * now call the then chain
-         */
-        resolve(data);
-    }
-
-    private onError(errorData: any,  reject: Consumer<any>) {
-        this.handleError(errorData);
         /*
-         * this triggers the catch chain and after that finally
+         * normal case, cleanup == next item if possible
          */
-        reject();
+        resolve(data);
     }
 
     private sendRequest(formData: XhrFormData) {
@@ -343,12 +380,18 @@ export class XhrRequest extends AsyncRunnable<XMLHttpRequest> {
             Implementation.sendEvent(eventData, eventHandler);
         } catch (e) {
             e.source = e?.source ?? this.requestContext.getIf(SOURCE).value;
-            this.handleError(e);
-
+            // this is a client error, no save state anymore for queue processing!
+            this.handleErrorAndClearQueue(e);
+            // we forward the error upward like all client side errors
             throw e;
         }
     }
 
+    private handleErrorAndClearQueue(e, responseFormatError: boolean = false) {
+        this.handleError(e, responseFormatError);
+        this.reject(e);
+    }
+
     private handleError(exception, responseFormatError: boolean = false) {
         const errorData = (responseFormatError) ? ErrorData.fromHttpConnection(exception.source, exception.type, exception.status, exception.responseText, exception.responseCode, exception.status) : ErrorData.fromClient(exception);
         const eventHandler = resolveHandlerFunc(this.requestContext, this.responseContext, ON_ERROR);

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

@@ -567,7 +567,7 @@ describe('DOMQuery tests', function () {
         expect(content.byId("third").innerHTML).to.eq("hello world");
         expect(content.byId("fourth").innerHTML).to.eq("hello world");
 
-        expect(DomQuery.byTagName("head")
+        expect(DomQuery.byTagName("body")
             .querySelectorAll("link[rel='stylesheet'][href='./fixtures/blank.css']").length).to.eq(1);
         done();
 

package/src/main/typescript/test/frameworkBase/_ext/shared/StandardInits.ts

@@ -145,6 +145,92 @@ export module StandardInits {
  </body>
 </html>`;
 
+    export const HTML_TOBAGO_SHEET_WITH_STYLE = `<!DOCTYPE html>
+<html lang='de'>
+<head>
+  <meta charset='UTF-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+  <title>Test
+  </title>
+  <link rel='stylesheet' href='./fixtures/css/tobago.css' type='text/css'>
+  <link rel='stylesheet' href='./fixtures/css/bootstrap-icons.css' type='text/css'>
+  <script src='./fixtures/jakarta.faces.resource/faces.js.jsf' type='text/javascript'></script>
+  <script src='./fixtures/js/tobago.js' type='module'></script>
+</head>
+<body>
+<tobago-page locale='de' class='container-fluid' id='page' focus-on-error='true' wait-overlay-delay-full='1000'
+             wait-overlay-delay-ajax='1000'>
+  <form action='/content/080-sheet/30-event/Sheet_Event.xhtml' id='page::form' method='post'
+        accept-charset='UTF-8' data-tobago-context-path=''>
+    <input type='hidden' name='javax.faces.source' id='javax.faces.source' disabled='disabled'>
+    <tobago-focus id='page::lastFocusId'>
+      <input type='hidden' name='page::lastFocusId' id='page::lastFocusId::field'>
+    </tobago-focus>
+    <input type='hidden' name='org.apache.myfaces.tobago.webapp.Secret' id='org.apache.myfaces.tobago.webapp.Secret'
+           value='secretValue'>
+    <div class='tobago-page-menuStore'>
+    </div>
+    <span id='page::jsf-state-container'><input type='hidden' name='javax.faces.ViewState'
+                                                id='j_id__v_0:javax.faces.ViewState:1'
+                                                value='viewStateValue' autocomplete='off'><input
+            type='hidden' name='javax.faces.RenderKitId' value='tobago'><input type='hidden'
+                                                                               id='j_id__v_0:javax.faces.ClientWindow:1'
+                                                                               name='javax.faces.ClientWindow'
+                                                                               value='clientWindowValue'></span>
+    <button type='button' id='page:ajaxButton' name='page:ajaxButton'
+            class='tobago-button btn btn-secondary tobago-auto-spacing'>
+      <tobago-behavior event='click' client-id='page:ajaxButton' execute='page:ajaxButton'
+                       render='page:s1'></tobago-behavior>
+      <span>Ajax</span></button>
+    <tobago-sheet id='page:s1' data-tobago-selection-mode='multi' data-tobago-first='0' rows='0' row-count='2'>
+      <style nonce='nonceValue' id='page:s1:j_id_4'>#page\\:s1 {
+        max-height: 500px;
+      }
+      </style>
+      <input id='page:s1::scrollPosition' name='page:s1::scrollPosition' type='hidden' value='[0,0]'>
+      <input id='page:s1::selected' name='page:s1::selected' type='hidden' value='[]'>
+      <div class='tobago-body'>
+        <table cellspacing='0' cellpadding='0' summary='' class='table'>
+          <thead>
+          <tr>
+            <th>
+              <span><tobago-out id='page:s1:_col0'><span class='form-control-plaintext'>Name</span></tobago-out></span>
+            </th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr row-index='0'>
+            <td>
+              <tobago-out id='page:s1:0:t_name'><span class='form-control-plaintext'>Earth</span></tobago-out>
+            </td>
+            <td>
+              <div>
+              </div>
+            </td>
+          </tr>
+          <tr row-index='1'>
+            <td>
+              <tobago-out id='page:s1:1:t_name'><span class='form-control-plaintext'>Moon</span></tobago-out>
+            </td>
+            <td>
+              <div>
+              </div>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </tobago-sheet>
+  </form>
+  <noscript>
+    <div class='tobago-page-noscript'>Diese Seite benötigt JavaScript, allerdings ist JavaScript in Ihrem Browser
+      derzeit deaktiviert. Um JavaScript zu aktivieren, lesen Sie ggf. die Anleitung Ihres Browsers.
+    </div>
+  </noscript>
+</tobago-page>
+</body>
+</html>`;
+
     /**
      * a page simulating basically a simple faces form
      */
@@ -236,6 +322,42 @@ export module StandardInits {
     `;
     }
 
+    export const ERROR_CHAIN_PAGE = `
+    <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<h2>Error Chain Testcase</h2>
+<script type="text/javascript">
+/**
+* code identical to mojarra test, both stem from me
+* so mojarras side EPL here ASL2!
+* 
+* @param event
+*/
+function triggerRequestChain(event) {
+    for(let cnt = 0; cnt < 5; cnt++) {
+        faces.ajax.request(event.target, "click", {
+            render:"form1",
+            onerror: function() {
+                document.getElementById("errorCalled").innerHTML = "1";
+            }
+        })
+    }
+}
+</script>
+<div id="errorCalled"></div>
+<form id="form1">
+    <div id="form1:out1">0</div>
+    <input type="button" id="form1:button1" onclick="triggerRequestChain(event)">
+</form>
+</body>
+</html>
+    `;
+
     /**
      * This is a standardized small page mockup
      * testing the various aspects of the protocol
@@ -405,6 +527,10 @@ export module StandardInits {
         return <any>init((IS_40) ? PROTOCOL_PAGE : PROTOCOL_PAGE.replace(/jakarta/gi,"javax"), withJsf, IS_40);
     }
 
+    export function errorChainPage(withJsf = true, IS_40 = true): Promise<() => void> {
+        return <any>init((IS_40) ? ERROR_CHAIN_PAGE : ERROR_CHAIN_PAGE.replace(/jakarta/gi,"javax"), withJsf, IS_40);
+    }
+
     export function prefixEmbeddedPage(withJsf = true, IS_40 = true): Promise<() => void> {
         return <any>init((IS_40) ? HTML_FORM_PREFIXED_EMBEDDED : HTML_FORM_PREFIXED_EMBEDDED.replace(/jakarta/gi,"javax"), withJsf, IS_40);
     }

package/src/main/typescript/test/frameworkBase/_ext/shared/XmlResponses.ts

@@ -26,6 +26,59 @@ export class XmlResponses {
     </partial-response>
     `;
 
+    static UPDATE_TOBAGO_SHEET_WITH_STYLE = `<?xml version="1.0" encoding="UTF-8"?>
+<partial-response id='j_id__v_0'>
+  <changes>
+    <update id='page:s1'><![CDATA[
+      <tobago-sheet id='page:s1' data-tobago-selection-mode='multi' data-tobago-first='0' rows='0' row-count='2'>
+        <style nonce='nonceValue' id='page:s1:j_id_4'>#page\\:s1 {
+          max-height: 500px;
+        }
+        </style>
+        <input id='page:s1::scrollPosition' name='page:s1::scrollPosition' type='hidden' value='[0,0]'/>
+        <input id='page:s1::selected' name='page:s1::selected' type='hidden' value='[]'/>
+        <div class='tobago-body'>
+          <table cellspacing='0' cellpadding='0' summary='' class='table'>
+            <thead>
+            <tr>
+              <th>
+                <span><tobago-out id='page:s1:_col0'><span
+                        class='form-control-plaintext'>Name</span></tobago-out></span>
+              </th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr row-index='0'>
+              <td>
+                <tobago-out id='page:s1:0:t_name'><span class='form-control-plaintext'>Earth</span></tobago-out>
+              </td>
+              <td>
+                <div>
+                </div>
+              </td>
+            </tr>
+            <tr row-index='1'>
+              <td>
+                <tobago-out id='page:s1:1:t_name'><span class='form-control-plaintext'>Moon</span></tobago-out>
+              </td>
+              <td>
+                <div>
+                </div>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </tobago-sheet>
+      ]]>
+    </update>
+    <update id='j_id__v_0:javax.faces.ViewState:1'><![CDATA[viewStateValue]]>
+    </update>
+    <update id='j_id__v_0:javax.faces.ClientWindow:1'><![CDATA[clientWindowValue]]>
+    </update>
+  </changes>
+</partial-response>`;
+
     static SHADOW_DOM_UPDATE=`
         <partial-response>
             <changes><update id="shadowContent"><![CDATA[<div id="shadowContent">after update</div>]]></update></changes>
@@ -250,4 +303,11 @@ export class XmlResponses {
     `;
 
     static ILLEGAL_RESP = `>>>> xxxx >YYYY-!->>>`;
+
+
+    static  ERROR_CHAIN_RESPOND_OK = (cnt: number): string => {
+        return `<partial-response><changes><update id='form1:out1'><![CDATA[<div id="form1:out1">${cnt}</div>]]>
+    </update></changes></partial-response>`;
+    }
+
 }

package/src/main/typescript/test/frameworkBase/_ext/shared/fixtures/css/bootstrap-icons.css

@@ -0,0 +1,15 @@
+/*! 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
+* (the "License"); you may not use this file except in compliance with
+* the License.  You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/

package/src/main/typescript/test/frameworkBase/_ext/shared/fixtures/css/tobago.css

@@ -0,0 +1,15 @@
+/*! 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
+* (the "License"); you may not use this file except in compliance with
+* the License.  You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/

package/src/main/typescript/test/frameworkBase/_ext/shared/fixtures/js/tobago.js

@@ -0,0 +1,15 @@
+/*! 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
+* (the "License"); you may not use this file except in compliance with
+* the License.  You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/

package/src/main/typescript/test/myfaces/{OnLoadSpec.ts → OnLoad.spec.ts}

@@ -33,10 +33,10 @@ describe('Tests on the xhr core when it starts to call the request', function ()
         return
     });
 
-    it("must be present", async function(done)  {
+    it("must be present", async function()  {
         await defaultMyFaces();
         expect(myfaces?.onDomReady).to.exist;
-        done();
+        return true;
     });
 
     it("must be called on onDocumentReady", async function(done) {