jsf.js_next_gen 4.0.0-beta-23 → 4.0.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "jsf.js_next_gen",
-  "version": "4.0.0-beta-23",
+  "version": "4.0.0",
   "description": "A next generation typescript reimplementation of jsf.js",
   "main": "dist/window/faces.js",
   "scripts": {
     "doc": "npx typedoc --tsconfig src/main/typescript/tsconfig-typedoc.json",
-    "test": "env TS_NODE_PROJECT=./src/main/typescript/tsconfig.json mocha",
-    "coverage": "env TS_NODE_PROJECT=./src/test/typescript/tsconfig.json nyc --reporter=html --reporter=text mocha",
+    "test": "cross-env TS_NODE_PROJECT=./src/main/typescript/tsconfig.json mocha",
+    "coverage": "cross-env TS_NODE_PROJECT=./src/main/typescript/tsconfig.json nyc --reporter=html --reporter=text mocha",
     "build-production": "webpack --mode production --env FILE_NAME=jsf  && ts-node ./remap.ts --production",
     "build-development": "webpack --mode development --env FILE_NAME=jsf-development  && ts-node ./remap.ts --development",
     "build": "npm run doc && npm run build-development && npm run build-production",
@@ -21,33 +21,34 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@types/chai": "^4.3.3",
-    "@types/mocha": "^10.0.0",
-    "@types/node": "^18.11.9",
+    "@types/chai": "^4.3.4",
+    "@types/mocha": "^10.0.1",
+    "@types/node": "^18.14.2",
     "@types/sinon": "^10.0.13",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "chai": "^4.3.6",
+    "chai": "^4.3.7",
     "compression-webpack-plugin": "^10.0.0",
+    "cross-env": "^7.0.3",
     "html-webpack-plugin": "^5.5.0",
     "http-server": "^14.1.1",
-    "jsdom": "^20.0.2",
+    "jsdom": "^21.1.0",
     "jsdom-global": "^3.0.2",
-    "mocha": "^10.1.0",
-    "npm-check-updates": "^16.3.16",
+    "mocha": "^10.2.0",
+    "npm-check-updates": "^16.7.10",
     "nyc": "^15.1.0",
     "replace-in-file": "^6.3.5",
-    "rxjs": "^7.5.7",
-    "sinon": "^14.0.1",
+    "rxjs": "^7.8.0",
+    "sinon": "^15.0.1",
     "terser-webpack-plugin": "^5.3.6",
-    "ts-loader": "^9.4.1",
+    "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
-    "typedoc": "^0.23.20",
-    "typescript": "^4.8.4",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
+    "typedoc": "^0.23.26",
+    "typescript": "^4.9.5",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "mona-dish": "0.23.4"
+    "mona-dish": "^0.26.0"
   }
 }

package/pom.xml

@@ -10,7 +10,7 @@
     </parent>
     <groupId>com.example</groupId>
     <artifactId>jsfs_js_ts</artifactId>
-    <version>0.0.1-SNAPSHOT</version>
+    <version>4.0</version>
     <name>jsfs_js_ts</name>
     <description>Demo project for Spring Boot</description>
 

package/src/main/test.xml

@@ -0,0 +1,23 @@
+<partial-response id="viewroot_1">
+    <changes>
+        <update id="panel2"><![CDATA[
+            <div id="panel2">
+            after update
+                <form id="form2" name="form2" method="post" action="booga2"
+                      ><a href="#" id="form2:link" name="form2:link"></a>
+                      <input type="hidden" name="form2_SUBMIT" value="1"/></form>
+            </div>
+            ]]>
+        </update>
+        <update id="panel3"><![CDATA[
+            <div id="panel3">
+            after update
+                <form id="form3" name="form3" method="post" action="booga3"
+                      ><a href="#"  id="form3:link" name="form3:link"></a>
+                </form>
+            </div>
+            ]]>
+        </update>
+        <update id="j_id__v_0:jakarta.faces.ViewState:1"><![CDATA[booga_after_update]]></update>
+    </changes>
+</partial-response>

package/src/main/typescript/@types/definitions/index.d.ts

@@ -23,9 +23,24 @@
 declare global {
 
     type Consumer<T> = (s?: T) => void;
+    type Tuple<V,K> = [V, K];
+    type Tuples<V,K> = [Tuple<V, K>];
     type AssocArr<T> = { [key: string]: T };
     type EvalFuncs = Array<Function | string>;
-    type Options = { [key: string]: string | Function | { [key: string]: string | Function } };
+
+
+    type Options = {
+        render ?: string,
+        execute ?: string,          //space separated list of client ids
+        onevent ?: Function,        // event handler callback
+        onerror ?: Function,        // error handler callback
+        params ?: AssocArr<any>,    // passthrough params
+        delay ?: number,            // delay in milliseconds
+        resetValues ?: boolean,     // if set to true jakarta.faces.partial.resetValues is sent
+        /* @deprecated non-spec conform fallback behavior that anything can be passed and is used as passthrough */
+        [key: string]: any
+    }
+
     type Context = AssocArr<any>;
     type ElemDef = Element | string;
 
@@ -35,10 +50,10 @@ declare global {
      *     <li> errorData.status : the error status message</li>
      *     <li> errorData.serverErrorName : the server error name in case of a server error</li>
      *     <li> errorData.serverErrorMessage : the server error message in case of a server error</li>
-     *     <li> errorData.source  : the issuing source element which triggered the requestInternal </li>
-     *     <li> eventData.responseCode: the response code (aka http requestInternal response code, 401 etc...) </li>
-     *     <li> eventData.responseText: the requestInternal response text </li>
-     *     <li> eventData.responseXML: the requestInternal response xml </li>
+     *     <li> errorData.source  : the issuing source element which triggered the request </li>
+     *     <li> eventData.responseCode: the response code (aka http request response code, 401 etc...) </li>
+     *     <li> eventData.responseText: the response text </li>
+     *     <li> eventData.responseXML: the response xml </li>
      * </ul>
      */
     interface IErrorData {
@@ -63,7 +78,7 @@ declare global {
     }
 
     interface Ajax {
-        request(element: Element, event?: Event, options?: Context): void;
+        request(element: Element, event?: Event, options?: Options): void;
         response(request: XMLHttpRequest, context?: Context): void;
     }
 
@@ -106,7 +121,7 @@ declare global {
     interface OAM {
         clearHiddenInput(formName: string, name: string): void;
         setHiddenInput(formName: string, name: string, value: string): void;
-        submitForm(formName: string, linkId: string, target: string, params: { [key: string]: any }): boolean;
+        submitForm(formName: string, linkId?: string |null, target?: string | null, params?: AssocArr<any> |Tuples<string, any> | null): boolean;
     }
 
     interface MyFacesAPI {
@@ -119,6 +134,8 @@ declare global {
         };
     }
 
+
+
     /*
      * Global namespaces type definitions
      */

package/src/main/typescript/api/_api.ts

@@ -16,7 +16,7 @@
 import {Implementation} from "../impl/AjaxImpl";
 import {PushImpl} from "../impl/PushImpl";
 import {oam as _oam} from "../myfaces/OamSubmit";
-import {$nsp, CTX_PARAM_EXECUTE, CTX_PARAM_RENDER, P_BEHAVIOR_EVENT} from "../impl/core/Const";
+import {$nsp, CTX_OPTIONS_EXECUTE, CTX_OPTIONS_PARAMS, CTX_PARAM_RENDER, P_BEHAVIOR_EVENT} from "../impl/core/Const";
 import {ErrorData} from "../impl/xhrCore/ErrorData";
 import {EventData} from "../impl/xhrCore/EventData";
 
@@ -49,14 +49,14 @@ export module faces {
 
     /**
      * SeparatorChar as defined by facesContext.getNamingContainerSeparatorChar()
-     * @type {Char}
      */
-    export var separatorchar = getSeparatorChar();
+    export var separatorchar: string = getSeparatorChar();
 
+    // noinspection JSUnusedGlobalSymbols
     /**
      * Context Path as defined externalContext.requestContextPath
      */
-    export var contextpath = '#{facesContext.externalContext.requestContextPath}';
+    export var contextpath: string = '#{facesContext.externalContext.requestContextPath}';
     // we do not have a fallback here, for now
 
     /**
@@ -99,7 +99,7 @@ export module faces {
         return Implementation.getClientWindow(rootNode);
     }
 
-    //private helper functions
+    // private helper functions
     function getSeparatorChar(): string {
         const sep = '#{facesContext.namingContainerSeparatorChar}';
         //We now enable standalone mode, the separator char was not mapped we make a fallback to 2.3 behavior
@@ -117,19 +117,19 @@ export module faces {
         /**
          * this function has to send the ajax requests
          *
-         * following requestInternal conditions must be met:
+         * following request conditions must be met:
          * <ul>
-         *  <li> the requestInternal must be sent asynchronously! </li>
-         *  <li> the requestInternal must be a POST!!! requestInternal </li>
-         *  <li> the requestInternal url must be the form action attribute </li>
-         *  <li> all requests must be queued with a client side requestInternal queue to ensure the requestInternal ordering!</li>
+         *  <li> the request must be sent asynchronously! </li>
+         *  <li> the request must be a POST!!! request </li>
+         *  <li> the request url must be the form action attribute </li>
+         *  <li> all requests must be queued with a client side request queue to ensure the request ordering!</li>
          * </ul>
          *
          * @param {String|Node} element: any dom element no matter being it html or jsf, from which the event is emitted
          * @param {EVENT} event: any javascript event supported by that object
          * @param {Map} options : map of options being pushed into the ajax cycle
          */
-        export function request(element: Element, event?: Event, options?: Context): void {
+        export function request(element: Element, event?: Event, options?: Options): void {
             Implementation.request(element, event, options)
         }
 
@@ -138,7 +138,6 @@ export module faces {
          * @param request the request object having triggered this response
          * @param context the request context
          *
-         * TODO add info on what can be in the context
          */
         export function response(request: XMLHttpRequest, context?: Context): void {
             Implementation.response(request, context);
@@ -153,13 +152,13 @@ export module faces {
          *     <li> errorData.status : the error status message</li>
          *     <li> errorData.serverErrorName : the server error name in case of a server error</li>
          *     <li> errorData.serverErrorMessage : the server error message in case of a server error</li>
-         *     <li> errorData.source  : the issuing source element which triggered the requestInternal </li>
-         *     <li> eventData.responseCode: the response code (aka http requestInternal response code, 401 etc...) </li>
-         *     <li> eventData.responseText: the requestInternal response text </li>
-         *     <li> eventData.responseXML: the requestInternal response xml </li>
+         *     <li> errorData.source  : the issuing source element which triggered the request </li>
+         *     <li> eventData.responseCode: the response code (aka http request response code, 401 etc...) </li>
+         *     <li> eventData.responseText: the request response text </li>
+         *     <li> eventData.responseXML: the request response xml </li>
          * </ul>
          *
-         * @param {function} errorListener error handler must be of the format <i>function errorListener(&lt;errorData&gt;)</i>
+         * @param errorFunc error handler must be of the format <i>function errorListener(&lt;errorData&gt;)</i>
          */
         export function addOnError(errorFunc: (data: ErrorData) => void): void {
             Implementation.addOnError(<any>errorFunc);
@@ -169,7 +168,7 @@ export module faces {
          * Adds a global event listener to the ajax event queue. The event listener must be a function
          * of following format: <i>function eventListener(&lt;eventData&gt;)</i>
          *
-         * @param {function} eventListener event must be of the format <i>function eventListener(&lt;eventData&gt;)</i>
+         * @param eventFunc event must be of the format <i>function eventListener(&lt;eventData&gt;)</i>
          */
         export function addOnEvent(eventFunc: (data: EventData) => void): void {
             Implementation.addOnEvent(<any>eventFunc);
@@ -184,38 +183,44 @@ export module faces {
          * if any of the code returns false, the execution
          * is terminated prematurely skipping the rest of the code!
          *
-         * @param {DomNode} source, the callee object
+         * @param {HTMLElement | String} source, the callee object
          * @param {Event} event, the event object of the callee event triggering this function
          * @param funcs ... arbitrary array of functions or strings
          * @returns true if the chain has succeeded false otherwise
          */
-        export function chain(source, event, ...funcs: Array<Function | string>): boolean {
+        export function chain(source: HTMLElement | string, event: Event | null, ...funcs: Array<Function | string>): boolean {
             return Implementation.chain(source, event, ...(funcs as EvalFuncs));
         }
     }
 
     export module push {
         /**
-         * @param {function} onopen The function to be invoked when the web socket is opened.
-         * @param {function} onmessage The function to be invoked when a message is received.
-         * @param {function} onclose The function to be invoked when the web socket is closed.
-         * @param {boolean} autoconnect Whether or not to immediately open the socket. Defaults to <code>false</code>.
+         * @param socketClientId the sockets client identifier
+         * @param url the uri to reach the socket
+         * @param channel the channel name/id
+         * @param onopen The function to be invoked when the web socket is opened.
+         * @param onmessage The function to be invoked when a message is received.
+         * @param onerror The function to be invoked when an error occurs.
+         * @param onclose The function to be invoked when the web socket is closed.
+         * @param behaviors functions which are invoked whenever a message is received
+         * @param autoConnect Whether or not to automatically open the socket. Defaults to <code>false</code>.
          */
         export function init(socketClientId: string,
-                    uri: string,
+                    url: string,
                     channel: string,
                     onopen: Function,
                     onmessage: Function,
+                    onerror: Function,
                     onclose: Function,
-                    behaviorScripts: any,
-                    autoconnect: boolean): void {
-            PushImpl.init(socketClientId, uri, channel, onopen, onmessage, onclose, behaviorScripts, autoconnect);
+                    behaviors: any,
+                    autoConnect: boolean): void {
+            PushImpl.init(socketClientId, url, channel, onopen, onmessage, onerror, onclose, behaviors, autoConnect);
         }
 
         /**
          * Open the web socket on the given channel.
-         * @param {string} channel The name of the web socket channel.
-         * @throws {Error} When channel is unknown.
+         * @param  socketClientId The name of the web socket channel.
+         * @throws  Error is thrown, if the channel is unknown.
          */
         export function open(socketClientId: string): void {
             PushImpl.open(socketClientId);
@@ -223,8 +228,8 @@ export module faces {
 
         /**
          * Close the web socket on the given channel.
-         * @param {string} channel The name of the web socket channel.
-         * @throws {Error} When channel is unknown.
+         * @param  socketClientId The id of the web socket client.
+         * @throws  Error is thrown, if the channel is unknown.
          */
         export function close(socketClientId: string): void {
             PushImpl.close(socketClientId);
@@ -243,15 +248,16 @@ export module myfaces {
      * @param event the event
      * @param eventName event name for java.jakarta.faces.behavior.evemnt
      * @param execute execute list as passed down in faces.ajax.request
-     * @param render
-     * @param options
+     * @param render the render list as string
+     * @param options the options which need to be mered in
      */
-    export function ab(source: Element, event: Event, eventName: string, execute: string, render: string, options: Context = {}): void {
+    export function ab(source: Element, event: Event, eventName: string, execute: string, render: string, options: Options = {}): void {
         if (eventName) {
-           options[$nsp(P_BEHAVIOR_EVENT)] = eventName;
+           options[CTX_OPTIONS_PARAMS] = options?.[CTX_OPTIONS_PARAMS] ?? {};
+           options[CTX_OPTIONS_PARAMS][$nsp(P_BEHAVIOR_EVENT)] = eventName;
         }
         if (execute) {
-            options[CTX_PARAM_EXECUTE] = execute;
+            options[CTX_OPTIONS_EXECUTE] = execute;
         }
         if (render) {
             options[CTX_PARAM_RENDER] = render;
@@ -260,6 +266,42 @@ export module myfaces {
         (window?.faces ?? window.jsf).ajax.request(source, event, options);
     }
 
+
+    const onReadyChain: Array<() => void> = [];
+    let readyStateListener = null;
+    // noinspection JSUnusedGlobalSymbols
+    /**
+     * Helper function in the myfaces namespace to handle document ready properly for the load case
+     * the ajax case, does not need proper treatment, since it is deferred anyway.
+     * Used by command script as helper function!
+     *
+     * @param executionFunc the function to be executed upon ready
+     */
+    export function onOnDomReady(executionFunc: () => void) {
+        if(document.readyState !== "complete") {
+            onReadyChain.push(executionFunc);
+            if(!readyStateListener) {
+                readyStateListener = () => {
+                    window.removeEventListener("DOMContentLoaded", readyStateListener);
+                    readyStateListener = null;
+                    try {
+                        onReadyChain.forEach(func => func());
+                    } finally {
+                        //done we clear now the ready chain
+                        onReadyChain.length = 0;
+                    }
+                };
+                window.addEventListener("DOMContentLoaded", readyStateListener);
+            }
+        } else {
+            if(readyStateListener) {
+                readyStateListener();
+            }
+            executionFunc();
+        }
+
+    }
+
     /**
      * legacy oam functions
      */

package/src/main/typescript/api/jsf.ts

@@ -26,6 +26,24 @@ if(!window?.jsf) {
     (window as any)['jsf'] = window?.jsf ?? faces;
     window.jsf.specversion = 230000;
     delete window.jsf.contextpath;
+
+    let faces4Init = faces.push.init;
+    /*
+     * we shim back the breaking api change from 3.0 to 4.0
+     * onerror is gone
+     */
+    faces.push.init = (socketClientId: string,
+                       url: string,
+                       channel: string,
+                       onopen: Function,
+                       onmessage: Function,
+                       // no on error api change for 4.0
+                       //onerror: Function,
+                       onclose: Function,
+                       behaviors: any,
+                       autoConnect: boolean) => {
+        faces4Init(socketClientId, url, channel, onopen, onmessage, null, onclose, behaviors, autoConnect);
+    }
 }
 if(!window?.myfaces?.ab) {
     const myfaces = require("./_api").myfaces;