jsf.js_next_gen 4.1.0-beta.2 → 4.1.0-beta.21

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

@@ -17,7 +17,7 @@
 /**
  * Typescript port of the faces\.push part in the myfaces implementation
  */
-import {MAX_RECONNECT_ATTEMPTS, REASON_EXPIRED, RECONNECT_INTERVAL} from "./core/Const";
+import {MAX_RECONNECT_ATTEMPTS, RECONNECT_INTERVAL} from "./core/Const";
 import {DQ} from "mona-dish";
 
 /**
@@ -34,18 +34,37 @@ export namespace PushImpl {
     // they are not directly touched outside of tests
 
     /* socket map by token */
-    export let sockets = {};
+    export type OpenCallback = (channel: string) => void;
+    export type MessageCallback = (message: any, channel: string, event: MessageEvent) => void;
+    export type ErrorCallback = (code: number, channel: string, event: CloseEvent) => void;
+    export type CloseCallback = (code: number, channel: string, event?: CloseEvent) => void;
+
+    type ComponentData = {
+        channelToken: string;
+        onopen: OpenCallback;
+        onmessage: MessageCallback;
+        onerror: ErrorCallback;
+        onclose: CloseCallback;
+        behaviors: any;
+        autoconnect: boolean;
+    };
+
+    /** @internal */
+    export let sockets: {[key: string]: Socket} = {};
     /* component attributes by clientId */
-    export let components = {};
+    /** @internal */
+    export let components: {[key: string]: ComponentData} = {};
     /* client ids by token (share websocket connection) */
-    export let clientIdsByTokens = {};
-
+    /** @internal */
+    export let clientIdsByTokens: {[key: string]: string[]} = {};
 
     // needed for testing
+    /** @internal */
     export function reset() {
+        Object.values(sockets).forEach(s => { try { s.close(); } catch(e) { /* ignore */ } });
         sockets = {};
-        components = {}
-        clientIdsByTokens = {}
+        components = {};
+        clientIdsByTokens = {};
     }
 
     /*
@@ -66,13 +85,13 @@ export namespace PushImpl {
     export function init(socketClientId: string,
                          url: string,
                          channel: string,
-                         onopen: Function,
-                         onmessage: Function,
-                         onerror: Function,
-                         onclose: Function,
+                         onopen: OpenCallback | string,
+                         onmessage: MessageCallback | string,
+                         onerror: ErrorCallback | string,
+                         onclose: CloseCallback | string,
                          behaviors: any,
                          autoConnect: boolean) {
-        onclose = resolveFunction(onclose);
+        onclose = resolveFunction(onclose) as CloseCallback;
 
         if (!DQ.global().WebSocket) { // IE6-9.
             onclose(-1, channel);
@@ -84,9 +103,9 @@ export namespace PushImpl {
         if (!components[socketClientId]) {
             components[socketClientId] = {
                 'channelToken': channelToken,
-                'onopen': resolveFunction(onopen),
-                'onmessage' : resolveFunction(onmessage),
-                'onerror' : resolveFunction(onerror),
+                'onopen': resolveFunction(onopen) as OpenCallback,
+                'onmessage' : resolveFunction(onmessage) as MessageCallback,
+                'onerror' : resolveFunction(onerror) as ErrorCallback,
                 'onclose': onclose,
                 'behaviors': behaviors,
                 'autoconnect': autoConnect};
@@ -127,58 +146,40 @@ export namespace PushImpl {
 
     class Socket {
 
-        socket: WebSocket;
-        reconnectAttempts = 0;
+        private socket: WebSocket | null = null;
+        private reconnectAttempts = 0;
+        private hasEverConnected = false;
+        private hasNotifiedInitialOpenAttempt = false;
 
         constructor(private channelToken: string, private url: string, private channel: string) {
         }
 
         open() {
-            if (this.socket && this.socket.readyState == 1) {
+            if (this.socket && this.socket.readyState === 1) {
                 return;
             }
             this.socket = new WebSocket(this.url);
-
             this.bindCallbacks();
+            this.notifyInitialOpenAttempt();
         }
 
         // noinspection JSUnusedLocalSymbols
         onopen(event: any) {
-            if (!this.reconnectAttempts) {
-                let clientIds = clientIdsByTokens[this.channelToken];
-                for (let i = clientIds.length - 1; i >= 0; i--) {
-                    let socketClientId = clientIds[i];
-                    components[socketClientId]?.['onopen']?.(this.channel);
-                }
-            }
+            this.hasEverConnected = true;
             this.reconnectAttempts = 0;
         }
 
         onerror(event: any) {
-            let message = JSON.parse(event?.data ?? null);
-            //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();
-            }
+            // Native WebSocket error events do not expose the close reason code.
+            // Faces onerror is fired from onclose only when a reconnect is attempted.
         }
 
-        onmmessage(event: any) {
+        onmessage(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];
+            let clientIds = clientIdsByTokens[this.channelToken];
+            if (!clientIds) return; // socket was torn down (reset()) while message was pending
+            for (let i = clientIds.length - 1; i >= 0; i--) {
+                let socketClientId = clientIds[i];
                 if (document.getElementById(socketClientId)) {
                     try {
                         components[socketClientId]?.['onmessage']?.(message, this.channel, event);
@@ -197,29 +198,26 @@ export namespace PushImpl {
                         }
                     }
                 } else {
-                    clientIdsByTokens[this.channelToken].splice(i, 1);
+                    clientIds.splice(i, 1);
                 }
             }
-            if (clientIdsByTokens[this.channelToken].length == 0) {
+            if (clientIds.length === 0) {
                 // tag disappeared
                 this.close();
             }
         }
 
         onclose(event: any) {
-            if (!this.socket
-                || (event.code == 1000 && event.reason == REASON_EXPIRED)
-                || (event.code == 1008)
-                || (!this.reconnectAttempts)
-                || (this.reconnectAttempts >= MAX_RECONNECT_ATTEMPTS)) {
-                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);
-                }
-            } else {
-                setTimeout(this.open, RECONNECT_INTERVAL * this.reconnectAttempts++);
+            if (this.isTerminalClose(event)) {
+                this.notifyClose(event);
+                this.resetConnectionState();
+                return;
             }
+
+            if (!this.notifyErrorAndPruneMissingComponents(event)) return;
+            if (this.closeIfChannelHasNoComponents()) return;
+
+            this.scheduleReconnect();
         };
 
         close() {
@@ -230,14 +228,85 @@ export namespace PushImpl {
             }
         }
 
+        private notifyInitialOpenAttempt() {
+            if (this.reconnectAttempts || this.hasNotifiedInitialOpenAttempt) return;
+
+            this.hasNotifiedInitialOpenAttempt = true;
+            let clientIds = clientIdsByTokens[this.channelToken];
+            if (!clientIds) return; // socket was torn down (reset()) while timer was pending
+            for (let i = clientIds.length - 1; i >= 0; i--) {
+                let socketClientId = clientIds[i];
+                components[socketClientId]?.['onopen']?.(this.channel);
+            }
+        }
+
+        private isTerminalClose(event: any): boolean {
+            return !this.socket
+                // Spec: no reconnect when the very first connection attempt fails.
+                // onerror must also not be invoked in this case, only onclose.
+                || !this.hasEverConnected
+                // Spec: code 1000 (normal closure) is always terminal, regardless of reason.
+                || event.code === 1000
+                // 1008 = Policy Violation. Reconnecting would hit the same rejection again.
+                || event.code === 1008
+                || this.reconnectAttempts >= MAX_RECONNECT_ATTEMPTS;
+        }
+
+        private notifyClose(event: any) {
+            let clientIds = clientIdsByTokens[this.channelToken];
+            if (!clientIds) return; // already torn down (reset() called while socket was open)
+            for (let i = clientIds.length - 1; i >= 0; i--) {
+                let socketClientId = clientIds[i];
+                components?.[socketClientId]?.['onclose']?.(event?.code, this?.channel, event);
+            }
+        }
+
+        private resetConnectionState() {
+            this.reconnectAttempts = 0;
+            this.hasEverConnected = false;
+            this.hasNotifiedInitialOpenAttempt = false;
+        }
+
+        private notifyErrorAndPruneMissingComponents(event: any): boolean {
+            let clientIds = clientIdsByTokens[this.channelToken];
+            if (!clientIds) return false; // already torn down (reset() called while socket was open)
+            for (let i = clientIds.length - 1; i >= 0; i--) {
+                let socketClientId = clientIds[i];
+                if (document.getElementById(socketClientId)) {
+                    try {
+                        components?.[socketClientId]?.['onerror']?.(event?.code, this?.channel, event);
+                    } catch (e) {
+                        //Ignore
+                    }
+                } else {
+                    clientIds.splice(i, 1);
+                }
+            }
+            return true;
+        }
+
+        private closeIfChannelHasNoComponents(): boolean {
+            if (clientIdsByTokens[this.channelToken]?.length !== 0) return false;
+
+            // tag disappeared
+            this.close();
+            return true;
+        }
+
+        private scheduleReconnect() {
+            const reconnectAttempt = ++this.reconnectAttempts;
+            this.socket = null;
+            setTimeout(() => this.open(), RECONNECT_INTERVAL * reconnectAttempt);
+        }
+
         /**
          * bind the callbacks to the socket callbacks
          */
         private bindCallbacks() {
-            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);
+            this.socket!.onopen = (event: Event) => this.onopen(event);
+            this.socket!.onmessage = (event: Event) => this.onmessage(event);
+            this.socket!.onclose = (event: Event) => this.onclose(event);
+            this.socket!.onerror = (event: Event) => this.onerror(event);
         }
     }
 
@@ -271,9 +340,10 @@ export namespace PushImpl {
         }
     }
 
-    function resolveFunction(fn: Function | string = () => {
-    }): Function {
-        return <Function>((typeof fn !== "function") && (fn = DQ.global()[fn]), fn);
+    function resolveFunction<T extends Function>(fn?: T | string | null): T {
+        if (typeof fn === "function") return fn as T;
+        if (typeof fn === "string" && typeof DQ.global()[fn] === "function") return DQ.global()[fn] as T;
+        return (() => {}) as unknown as T;
     }
 
-}
+}

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

@@ -206,8 +206,8 @@ export const UNKNOWN = "UNKNOWN";
  * changed to a simple value passthrough
  */
 
-export function $faces(): FacesAPI {
-     return (window?.faces ?? window?.jsf) as FacesAPI;
+export function $faces(): typeof faces {
+     return window?.faces ?? window?.jsf;
 }
 
 export function $nsp(inputNamespace?: any): any {

package/src/main/typescript/impl/i18n/Messages.ts

@@ -47,7 +47,7 @@ export class Messages {
     /** @constant */
     ERR_TRANSPORT = "Transport type {0} does not exist";
     /** @constant */
-    ERR_EVT_PASS = "an event must be passed down (either a an event object null or undefined) ";
+    ERR_EVT_PASS = "an event must be passed down (either an event object null or undefined) ";
     /** @constant */
     ERR_CONSTRUCT = "Parts of the response couldn't be retrieved when constructing the event data= {0} ";
     /** @constant */

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

@@ -49,7 +49,7 @@ export namespace Assertions {
 
     export function assertUrlExists(node: XMLQuery): void | never {
         if (node.attr(ATTR_URL).isAbsent()) {
-            throw Assertions.raiseError(new Error(), ExtLang.getMessage("ERR_RED_URL", null, "processRedirect"), "processRedirect");
+            throw Assertions.raiseError(new Error(), ExtLang.getMessage("ERR_RED_URL", undefined, "processRedirect"), "processRedirect");
         }
     }
 
@@ -113,4 +113,3 @@ export namespace Assertions {
     }
 }
 
-

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

@@ -30,12 +30,12 @@ export interface IAsyncRunnable<T> {
     /**
      * starts the runnable
      */
-    start();
+    start(): void;
 
     /**
      * cancel the current ongoing op if possible
      */
-    cancel();
+    cancel(): void;
 
     /**
      * callback for then functionality
@@ -127,7 +127,7 @@ export abstract class AsyncRunnable<T> implements IAsyncRunnable<T>{
 
     /**
      * registers a finally functor
-     * @param func the functor for the finally handling chanin
+     * @param func the functor for the finally handling chain
      */
     finally(func: () => void): IAsyncRunnable<T> {
         // no ie11 support we probably are going to revert to shims for that one
@@ -144,4 +144,3 @@ export abstract class AsyncRunnable<T> implements IAsyncRunnable<T>{
         return this;
     }
 }
-

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

@@ -27,7 +27,7 @@ import {$faces, $nsp, P_WINDOW_ID} from "../core/Const";
 const IS_FACES_SOURCE = (source?: string): boolean => {
     //spec version smaller 4 we have to deal with the jsf namespace
 
-    return source && !!(source?.search(/\/jakarta\.faces\.resource.*\/faces\.js.*/) != -1 ||
+    return !!source && !!(source.search(/\/jakarta\.faces\.resource.*\/faces\.js.*/) != -1 ||
         source?.search(/\/faces-development\.js.*/) != -1 ||
         source?.search(/\/faces-uncompressed\.js.*/) != -1 ||
         source?.search(/\/faces[^.]*\.js.*ln=jakarta.faces.*/gi) != -1 ||
@@ -56,6 +56,10 @@ const IS_INTERNAL_SOURCE = (source: string): boolean => {
 
 const ATTR_SRC = 'src';
 
+function isRegExpMatchArray(value: RegExpMatchArray | null): value is RegExpMatchArray {
+    return value != null && value.length > 1;
+}
+
 /**
  * Extension which adds implementation specific
  * meta-data to our dom query
@@ -123,8 +127,8 @@ export class ExtDomQuery extends DQ {
         // the last possibility
         let nonceScript: Optional<DomQuery> = Optional.fromNullable(DQ
             .querySelectorAll("script[src], link[src]").asArray
-            .filter((item) => item.nonce.isPresent()  && item.attr(ATTR_SRC) != null)
-            .filter(item => IS_FACES_SOURCE(item.attr(ATTR_SRC).value))?.[0]);
+            .filter((item) => item.nonce.isPresent()  && item.attr(ATTR_SRC).value != null)
+            .filter(item => IS_FACES_SOURCE(item.attr(ATTR_SRC).value ?? undefined))?.[0]);
         if(!nonceScript?.value) {
             return ValueEmbedder.absent as ValueEmbedder<string>;
         }
@@ -144,18 +148,14 @@ export class ExtDomQuery extends DQ {
     searchJsfJsFor(regExp: RegExp): Optional<string> {
         //perfect application for lazy stream
         return Optional.fromNullable(DQ.querySelectorAll("script[src], link[src]").asArray
-            .filter(item => IS_FACES_SOURCE(item.attr(ATTR_SRC).value))
-            .map(item => item.attr(ATTR_SRC).value.match(regExp))
-            .filter(item => item != null && item.length > 1)
-            .map((result: string[]) => {
+            .filter(item => IS_FACES_SOURCE(item.attr(ATTR_SRC).value ?? undefined))
+            .map(item => (item.attr(ATTR_SRC).value ?? "").match(regExp))
+            .filter(isRegExpMatchArray)
+            .map((result) => {
                 return decodeURIComponent(result[1]);
             })?.[0]);
     }
 
-    globalEval(code: string, nonce ?: string): DQ {
-        return new ExtDomQuery(super.globalEval(code, nonce ?? this.nonce.value));
-    }
-
     // called from base class runScripts, do not delete
     // noinspection JSUnusedGlobalSymbols
     globalEvalSticky(code: string, nonce ?: string): DQ {
@@ -183,7 +183,7 @@ export class ExtDomQuery extends DQ {
     runHeadInserts(suppressDoubleIncludes = true): void {
         let head = ExtDomQuery.byId(document.head);
         //automated nonce handling
-        let processedScripts = [];
+        let processedScripts: DomQuery[] = [];
 
         // the idea is only to run head inserts on resources
         // which do not exist already, that way
@@ -264,26 +264,26 @@ export class ExtConfig extends  Config {
         super(root);
     }
 
-    assignIf(condition: boolean, ...accessPath): IValueHolder<any> {
+    assignIf(condition: boolean, ...accessPath: string[]): IValueHolder<any> {
         const accessPathMapped = this.remap(accessPath);
         return super.assignIf(condition, ...accessPathMapped);
     }
 
-    assign(...accessPath): IValueHolder<any> {
+    assign(...accessPath: string[]): IValueHolder<any> {
         const accessPathMapped = this.remap(accessPath);
         return super.assign(...accessPathMapped);
     }
 
-    append(...accessPath): IValueHolder<any> {
+    append(...accessPath: string[]): IValueHolder<any> {
         return super.append(...accessPath);
     }
 
-    appendIf(condition: boolean, ...accessPath): IValueHolder<any> {
+    appendIf(condition: boolean, ...accessPath: string[]): IValueHolder<any> {
         const accessPathMapped = this.remap(accessPath);
         return super.appendIf(condition, ...accessPathMapped);
     }
 
-    getIf(...accessPath): Config {
+    getIf(...accessPath: string[]): Config {
         const accessPathMapped = this.remap(accessPath);
         return super.getIf(...accessPathMapped);
     }
@@ -333,6 +333,6 @@ export class ExtConfig extends  Config {
         if(!this.$nspEnabled) {
             return accessPath;
         }
-        return new Es2019Array(...accessPath).map(key => $nsp(key));
+        return new Es2019Array(...accessPath).map((key: string) => $nsp(key));
     }
-}
+}

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

@@ -1,3 +1,19 @@
+/*! 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.
+ */
+
 import {Config, DomQuery, DQ, Es2019Array} from "mona-dish";
 import {ExtDomQuery} from "./ExtDomQuery";
 import {$faces, EMPTY_STR} from "../core/Const";
@@ -15,17 +31,17 @@ import {$faces, EMPTY_STR} from "../core/Const";
  * @param defaultStr a default string if nothing comes out of it
  */
 export function encodeFormData(formData: Config,
-                               paramsMapper = (inStr, inVal) => [inStr, inVal],
+                               paramsMapper = (inStr: string, inVal: any) => [inStr, inVal],
                                defaultStr = EMPTY_STR): string {
     if (formData.isAbsent()) {
         return defaultStr;
     }
     const assocValues = formData.value;
 
-    const expandValueArrAndRename = key => assocValues[key].map(val => paramsMapper(key, val));
-    const isPropertyKey = key => assocValues.hasOwnProperty(key);
-    const isNotFile = ([, value]) => !(value instanceof ExtDomQuery.global().File);
-    const mapIntoUrlParam = keyVal => `${encodeURIComponent(keyVal[0])}=${encodeURIComponent(keyVal[1])}`;
+    const expandValueArrAndRename = (key: string) => assocValues[key].map((val: any) => paramsMapper(key, val));
+    const isPropertyKey = (key: string) => assocValues.hasOwnProperty(key);
+    const isNotFile = ([, value]: [string, any]) => !(value instanceof ExtDomQuery.global().File);
+    const mapIntoUrlParam = (keyVal: [string, any]) => `${encodeURIComponent(keyVal[0])}=${encodeURIComponent(keyVal[1])}`;
 
     return new Es2019Array(...Object.keys(assocValues))
         .filter(isPropertyKey)
@@ -40,17 +56,17 @@ export function encodeFormData(formData: Config,
  * @param encoded encoded string
  */
 export function decodeEncodedValues(encoded: string): string[][] {
-    const filterBlanks = item => !!(item || '').replace(/\s+/g, '');
-    const splitKeyValuePair = _line => {
+    const filterBlanks = (item: string) => !!(item || '').replace(/\s+/g, '');
+    const splitKeyValuePair = (_line: string) => {
         let line = decodeURIComponent(_line);
         let index = line.indexOf("=");
-        if (index == -1) {
+        if (index === -1) {
             return [line];
         }
         return [line.substring(0, index), line.substring(index + 1)];
     };
 
-    let requestParamEntries = encoded.split(/&/gi);
+    let requestParamEntries = encoded.split("&");
     return requestParamEntries.filter(filterBlanks).map(splitKeyValuePair);
 }
 
@@ -61,10 +77,10 @@ export function decodeEncodedValues(encoded: string): string[][] {
  */
 export function resolveFiles(dataSource: DQ): [string, File][] {
 
-    const expandFilesArr = ([key, files]) => {
-        return [...files].map(file => [key, file]);
+    const expandFilesArr = ([key, files]: any[]) => {
+        return [...files].map((file: File) => [key, file]);
     }
-    const remapFileInput = fileInput => {
+    const remapFileInput = (fileInput: DQ) => {
         return [fileInput.name.value || fileInput.id.value, fileInput.filesFromElem(0)];
     }
 
@@ -105,5 +121,5 @@ function resolveViewState(parentItem: DomQuery): string[][] | [string, File][] {
 export function getFormInputsAsArr(parentItem: DomQuery): string[][] | [string, File][] {
     const standardInputs: any = resolveViewState(parentItem);
     const fileInputs = resolveFiles(parentItem);
-    return standardInputs.concat(fileInputs)
-}
+    return standardInputs.concat(fileInputs);
+}

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

@@ -28,14 +28,14 @@ import {$faces, $nsp, HTML_CLIENT_WINDOW, HTML_VIEWSTATE, P_CLIENT_WINDOW, P_VIE
 export class HiddenInputBuilder {
     private namingContainerId?: string;
     private parent?: DomQuery;
-    private namedViewRoot: boolean = false;
+    private namedViewRoot = false;
     private readonly name: string;
     private readonly template: string;
 
-    constructor(private selector: string) {
-        const isViewState = selector.indexOf($nsp(P_VIEWSTATE)) != -1;
-        this.name = isViewState ? P_VIEWSTATE : P_CLIENT_WINDOW
-        this.template = isViewState ? HTML_VIEWSTATE : HTML_CLIENT_WINDOW
+    constructor(selector: string) {
+        const isViewState = selector.includes($nsp(P_VIEWSTATE));
+        this.name = isViewState ? P_VIEWSTATE : P_CLIENT_WINDOW;
+        this.template = isViewState ? HTML_VIEWSTATE : HTML_CLIENT_WINDOW;
     }
 
     withNamingContainerId(namingContainer: string): HiddenInputBuilder {
@@ -55,39 +55,39 @@ export class HiddenInputBuilder {
 
 
     build(): DomQuery {
-        const SEP = $faces().separatorchar;
-
-        let existingStates = DQ$(`[name*='${$nsp(this.name)}']`);
-        let cnt = existingStates.asArray.map(state => {
-            let ident: string = state.id.orElse("0").value;
-            ident = ident.substring(ident.lastIndexOf(SEP)+1);
-            return parseInt(ident);
-        })
-            .filter(item => {
-                return !isNaN(item);
-            })
-            .reduce((item1, item2) => {
-                return Math.max(item1, item2);
-            }, 0); //we start with 1 (see cnt++)
-        //the maximum  new ident is the current max + 1
-        cnt++;
+        const newElement = DQ.fromMarkup($nsp(this.template));
+        newElement.id.value = this.buildId();
+        newElement.name.value = this.buildName();
+        this.parent?.append(newElement);
+        return newElement;
+    }
 
+    private buildId(): string {
+        const separator = $faces().separatorchar;
+        const parts = this.namingContainerId?.length ?
+            [this.namingContainerId, $nsp(this.name), this.nextIndex()] :
+            [$nsp(this.name), this.nextIndex()];
 
-        const newElement = DQ.fromMarkup($nsp(this.template));
-        newElement.id.value = ((this.namingContainerId?.length) ?
-            [this.namingContainerId,  $nsp(this.name),  cnt]:
-            [$nsp(this.name),  cnt]).join(SEP);
+        return parts.join(separator);
+    }
 
-        //name must be prefixed with the naming container id as well according to the jsdocs
-        if(this.namedViewRoot) {
-            newElement.name.value = (this.namingContainerId?.length) ?
-                [this.namingContainerId,  $nsp(this.name)].join(SEP): $nsp(this.name);
-        } else {
-            newElement.name.value = $nsp(this.name);
+    private buildName(): string {
+        if (!this.namedViewRoot) {
+            return $nsp(this.name);
         }
 
+        return this.namingContainerId?.length ?
+            [this.namingContainerId, $nsp(this.name)].join($faces().separatorchar) :
+            $nsp(this.name);
+    }
 
-        this?.parent?.append(newElement);
-        return newElement;
+    private nextIndex(): number {
+        const separator = $faces().separatorchar;
+        return DQ$(`[name*='${$nsp(this.name)}']`).asArray
+            .map(state => state.id.orElse("0").value)
+            .map(id => id.substring(id.lastIndexOf(separator) + 1))
+            .map(idSuffix => parseInt(idSuffix))
+            .filter(idSuffix => !isNaN(idSuffix))
+            .reduce((max, idSuffix) => Math.max(max, idSuffix), 0) + 1;
     }
-}
+}