jsf.js_next_gen 4.0.0-RC.1 → 4.0.0-RC.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsf.js_next_gen",
-  "version": "4.0.0-RC.1",
+  "version": "4.0.0-RC.3",
   "description": "A next generation typescript reimplementation of jsf.js",
   "main": "dist/window/faces.js",
   "scripts": {
@@ -48,6 +48,6 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "mona-dish": "0.23.5"
+    "mona-dish": "^0.23.6"
   }
 }

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

@@ -25,7 +25,19 @@ declare global {
     type Consumer<T> = (s?: T) => void;
     type AssocArr<T> = { [key: string]: T };
     type EvalFuncs = Array<Function | string>;
-    type Options = { [key: string]: string | Function | { [key: string]: string | Function } };
+
+
+    type Options = {
+        execute ?: string, //space separated list of client ids
+        onevent ?: Function, // event handler callback
+        onerror ?: Function, // error handler callback
+        params ?: {[key: string]: any} | [[string, 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;
 

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

@@ -201,6 +201,7 @@ export module faces {
          * @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>.
@@ -210,10 +211,11 @@ export module faces {
                     channel: string,
                     onopen: Function,
                     onmessage: Function,
+                    onerror: Function,
                     onclose: Function,
                     behaviors: any,
                     autoConnect: boolean): void {
-            PushImpl.init(socketClientId, url, channel, onopen, onmessage, onclose, behaviors, autoConnect);
+            PushImpl.init(socketClientId, url, channel, onopen, onmessage, onerror, onclose, behaviors, autoConnect);
         }
 
         /**
@@ -250,7 +252,7 @@ export module myfaces {
      * @param render
      * @param options
      */
-    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;
         }

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;

package/src/main/typescript/impl/AjaxImpl.ts

@@ -50,7 +50,7 @@ import {
     CTX_PARAM_RENDER,
     REQ_TYPE_POST,
     SOURCE,
-    TAG_FORM
+    TAG_FORM, CTX_PARAM_SPEC_PARAMS
 } from "./core/Const";
 import {
     resolveDefaults,
@@ -81,7 +81,9 @@ enum BlockFilter {
     myfaces = "myfaces",
     delay = "delay",
     timeout = "timeout",
-    windowId = "windowId"
+    resetValues = "resetValues",
+    windowId = "windowId",
+    params = "params"
 }
 
 /**
@@ -267,7 +269,12 @@ export module Implementation {
 
         requestCtx.assignIf(!!windowId, P_WINDOW_ID).value = windowId;
 
+        // old non spec behavior will be removed after it is clear whether the removal breaks any code
         requestCtx.assign(CTX_PARAM_PASS_THR).value = filterPassThroughValues(options.value);
+
+        // spec conform behavior, all passthrough params must be under "passthrough
+        const params = remapArrayToAssocArr(options.getIf(CTX_PARAM_SPEC_PARAMS).orElse({}).value);
+        requestCtx.getIf(CTX_PARAM_PASS_THR).shallowMerge(new Config(params), true);
         requestCtx.assignIf(!!resolvedEvent, CTX_PARAM_PASS_THR, P_EVT).value = resolvedEvent?.type;
 
         /**
@@ -653,7 +660,13 @@ export module Implementation {
      * Filter the options given with a blacklist, so that only
      * the values required for pass-through are processed in the ajax request
      *
+     * Note this is a bug carried over from the old implementation
+     * the spec conform behavior is to use params for passthrough values
+     * this will be removed soon, after it is cleared up wheter removing
+     * it breaks any legacy code
+     *
      * @param {Context} mappedOpts the options to be filtered
+     * @deprecated
      */
     function filterPassThroughValues(mappedOpts: Context): Context {
         //we now can use the full code reduction given by our stream api
@@ -663,6 +676,13 @@ export module Implementation {
             .collect(new AssocArrayCollector());
     }
 
+    function remapArrayToAssocArr(arrayedParams: [[string, any]] | {[key: string]: any}): {[key: string]: any} {
+        if(Array.isArray(arrayedParams)) {
+            return Stream.of(... arrayedParams).collect(new AssocArrayCollector());
+        }
+        return arrayedParams;
+    }
+
     function resolveGlobalConfig(): any {
         return  window?.[MYFACES]?.config ?? {};
     }

package/src/main/typescript/impl/PushImpl.ts

@@ -18,13 +18,14 @@
  * Typescript port of the faces\.push part in the myfaces implementation
  */
 import {MAX_RECONNECT_ATTEMPTS, REASON_EXPIRED, RECONNECT_INTERVAL} from "./core/Const";
+import {DQ} from "mona-dish";
 
 /**
  * Implementation class for the push functionality
  */
 export module PushImpl {
 
-    const URL_PROTOCOL = window.location.protocol.replace("http", "ws") + "//";
+    const URL_PROTOCOL = DQ.global().location.protocol.replace("http", "ws") + "//";
 
 
     // we expose the member variables for testing purposes
@@ -55,6 +56,7 @@ export module PushImpl {
      * @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>.
@@ -64,12 +66,13 @@ export module PushImpl {
                          channel: string,
                          onopen: Function,
                          onmessage: Function,
+                         onerror: Function,
                          onclose: Function,
                          behaviors: any,
                          autoConnect: boolean) {
         onclose = resolveFunction(onclose);
 
-        if (!window.WebSocket) { // IE6-9.
+        if (!DQ.global().WebSocket) { // IE6-9.
             onclose(-1, channel);
             return;
         }
@@ -81,6 +84,7 @@ export module PushImpl {
                 'channelToken': channelToken,
                 'onopen': resolveFunction(onopen),
                 'onmessage' : resolveFunction(onmessage),
+                'onerror' : resolveFunction(onerror),
                 'onclose': onclose,
                 'behaviors': behaviors,
                 'autoconnect': autoConnect};
@@ -95,16 +99,16 @@ export module PushImpl {
         }
 
         if (autoConnect) {
-            (window?.faces ?? window?.jsf).push.open(socketClientId);
+            (DQ.global()?.faces ?? DQ.global()?.jsf).push.open(socketClientId);
         }
     }
 
     export function open(socketClientId: string) {
-        getSocket(components?.[socketClientId]?.channelToken).open();
+        getSocket(components[socketClientId]?.channelToken).open();
     }
 
     export function close(socketClientId: string) {
-        getSocket(components?.[socketClientId].channelToken).close();
+        getSocket(components[socketClientId].channelToken).close();
     }
 
     // Private helper classes
@@ -142,24 +146,45 @@ export module PushImpl {
                 let clientIds = clientIdsByTokens[this.channelToken];
                 for (let i = clientIds.length - 1; i >= 0; i--) {
                     let socketClientId = clientIds[i];
-                    components[socketClientId]['onopen'](this.channel);
+                    components[socketClientId]?.['onopen']?.(this.channel);
                 }
             }
             this.reconnectAttempts = 0;
         }
 
+        onerror(event: any) {
+            let message = JSON.parse(event.data);
+            //TODO replace this with a more readable Stream code
+            for (let i = clientIdsByTokens[this.channelToken].length - 1; i >= 0; i--) {
+                let socketClientId = clientIdsByTokens[this.channelToken][i];
+                if (document.getElementById(socketClientId)) {
+                    try {
+                        components[socketClientId]?.['onerror']?.(message, this.channel, event);
+                    } catch (e) {
+                        //Ignore
+                    }
+                } else {
+                    clientIdsByTokens[this.channelToken].splice(i, 1);
+                }
+            }
+            if (clientIdsByTokens[this.channelToken].length == 0) {
+                // tag disappeared
+                this.close();
+            }
+        }
+
         onmmessage(event: any) {
             let message = JSON.parse(event.data);
             for (let i = clientIdsByTokens[this.channelToken].length - 1; i >= 0; i--) {
                 let socketClientId = clientIdsByTokens[this.channelToken][i];
                 if (document.getElementById(socketClientId)) {
                     try {
-                        components[socketClientId]['onmessage'](message, this.channel, event);
+                        components[socketClientId]?.['onmessage']?.(message, this.channel, event);
                     } catch (e) {
                         //Ignore
                     }
-                    let behaviors = components[socketClientId]['behaviors'];
-                    let functions = behaviors[message];
+                    let behaviors = components?.[socketClientId]?.['behaviors'];
+                    let functions = behaviors?.[message];
                     if (functions && functions.length) {
                         for (let j = 0; j < functions.length; j++) {
                             try {
@@ -188,7 +213,7 @@ export module PushImpl {
                 let clientIds = clientIdsByTokens[this.channelToken];
                 for (let i = clientIds.length - 1; i >= 0; i--) {
                     let socketClientId = clientIds[i];
-                    components[socketClientId]['onclose'](event?.code, this?.channel, event);
+                    components?.[socketClientId]?.['onclose']?.(event?.code, this?.channel, event);
                 }
             } else {
                 setTimeout(this.open, RECONNECT_INTERVAL * this.reconnectAttempts++);
@@ -210,6 +235,7 @@ export module PushImpl {
             this.socket.onopen = (event: Event) => this.onopen(event);
             this.socket.onmessage = (event: Event) => this.onmmessage(event);
             this.socket.onclose = (event: Event) => this.onclose(event);
+            this.socket.onerror = (event: Event) => this.onerror(event);
         }
     }
 
@@ -217,7 +243,7 @@ export module PushImpl {
 
     function getBaseURL(url: string) {
         if (url.indexOf("://") < 0) {
-            let base = window.location.hostname + ":" + window.location.port;
+            let base = DQ.global().location.hostname + ":" + DQ.global().location.port;
             return URL_PROTOCOL + base + url;
         } else {
             return url;
@@ -242,7 +268,7 @@ export module PushImpl {
 
     function resolveFunction(fn: Function | string = () => {
     }): Function {
-        return <Function>((typeof fn !== "function") && (fn = window[fn]), fn);
+        return <Function>((typeof fn !== "function") && (fn = DQ.global()[fn]), fn);
     }
 
 }

package/src/main/typescript/impl/core/Const.ts

@@ -93,6 +93,8 @@ export const CTX_PARAM_SRC_FRM_ID = "_mfSourceFormId";
 export const CTX_PARAM_SRC_CTL_ID = "_mfSourceControlId";
 export const CTX_PARAM_TR_TYPE = "_mfTransportType";
 export const CTX_PARAM_PASS_THR = "passThrgh";
+export const CTX_PARAM_SPEC_PARAMS = "params";
+
 export const CTX_PARAM_DELAY = "delay";
 export const CTX_PARAM_TIMEOUT = "timeout";
 export const CTX_PARAM_RST = "resetValues";

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

@@ -58,7 +58,7 @@ export class AsynchronousQueue<T extends AsyncRunnable<any>> {
         if (delay) {
             this.delayTimeout = setTimeout(() => {
                 this.appendElement(element);
-            });
+            }) as any;
         } else {
             this.appendElement(element);
         }

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Config, DomQuery, DQ} from "mona-dish";
+import {AssocArrayCollector, Config, DomQuery, DQ, Stream} from "mona-dish";
 import {
     CTX_PARAM_DELAY,
     CTX_PARAM_TIMEOUT,
@@ -138,7 +138,7 @@ export function getEventTarget(evt: Event): Element {
  * @param opts
  * @param el
  */
-export function resolveDefaults(event: Event, opts: any = {}, el: Element | string = null) {
+export function resolveDefaults(event: Event, opts: Options | [[string, any]] , el: Element | string = null) {
     //deep copy the options, so that further transformations to not backfire into the callers
     const resolvedEvent = event,
         options = new ExtConfig(opts).deepCopy,

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

@@ -16,7 +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";
+import {ExtConfig, ExtDomQuery} from "../util/ExtDomQuery";
 
 
 /**
@@ -54,15 +54,20 @@ export class XhrFormData extends Config {
         //a call to getViewState before must pass the encoded line
         //a call from getViewState passes the form element as datasource,
         //so we have two call points
+        // atm we basically encode twice, to keep the code leaner
+        // this will be later optmized, practically elements
+        // which are already covered by an external viewstate do not need
+        // the encoding a second time, because they are overwritten by the viewstate again
         if (isString(dataSource)) {
             this.assignEncodedString(<string>this.dataSource);
         } else {
             this.applyFormDataToConfig();
         }
-        if('undefined' != typeof viewState) {
+        //now assign the external viewstate overrides
+        if ('undefined' != typeof viewState) {
             this.assignEncodedString(viewState)
         }
-        if(executes) {
+        if (executes) {
             this.postInit(...executes);
         }
     }
@@ -73,14 +78,17 @@ export class XhrFormData extends Config {
      * in our ajax request
      */
     postInit(...executes: Array<string>) {
-        let fetchInput = (id: string): DQ => {
+        let fetchFileInputs = (id: string): DQ => {
+            const INPUT_FILE = "input[type='file']";
             if (id == IDENT_ALL) {
-                return DQ.querySelectorAllDeep("input[type='file']");
+                return DQ.querySelectorAllDeep(INPUT_FILE);
             } else if (id == IDENT_FORM) {
-                return (<DQ>this.dataSource).querySelectorAllDeep("input[type='file']");
+                return (<DQ>this.dataSource).matchesSelector(INPUT_FILE) ?
+                    (<DQ>this.dataSource) :
+                    (<DQ>this.dataSource).querySelectorAllDeep(INPUT_FILE);
             } else {
                 let element = DQ.byId(id, true);
-                return this.getFileInputs(element);
+                return element.matchesSelector(INPUT_FILE) ? element : this.getFileInputs(element);
             }
         };
 
@@ -90,7 +98,7 @@ export class XhrFormData extends Config {
 
 
         this.isMultipartRequest = LazyStream.of(...executes)
-            .map(fetchInput)
+            .map(fetchFileInputs)
             .filter(inputExists)
             .first().isPresent();
     }
@@ -113,8 +121,8 @@ export class XhrFormData extends Config {
     assignEncodedString(encoded: string) {
         // this code filters out empty strings as key value pairs
         let keyValueEntries = decodeURIComponent(encoded).split(/&/gi)
-                .filter(item => !!(item || '')
-                .replace(/\s+/g,''));
+            .filter(item => !!(item || '')
+                .replace(/\s+/g, ''));
         this.assignString(keyValueEntries);
     }
 
@@ -133,8 +141,8 @@ export class XhrFormData extends Config {
             return keyVal.length < 3 ? [keyVal?.[0] ?? [], keyVal?.[1] ?? []] : keyVal;
         }
 
+        //TODO fix files...
         Stream.of(...keyValueEntries)
-            //split only the first =
             .map(line => splitToKeyVal(line))
             //special case of having keys without values
             .map(keyVal => fixKeyWithoutVal(keyVal))
@@ -171,7 +179,11 @@ export class XhrFormData extends Config {
         }
         let entries = LazyStream.of(...Object.keys(this.value))
             .filter(key => this.value.hasOwnProperty(key))
-            .flatMap(key => Stream.of(...this.value[key]).map(val => [key, val]).collect(new ArrayCollector()))
+            .flatMap(key => Stream.of(...this.value[key]).map(val => [key, val])
+                //we cannot encode file elements that is handled by multipart requests anyway
+                .filter(([, value]) => !(value instanceof ExtDomQuery.global().File))
+                .collect(new ArrayCollector()))
+
             .map(keyVal => {
                 return `${encodeURIComponent(keyVal[0])}=${encodeURIComponent(keyVal[1])}`;
             })