@schukai/monster 3.29.0 → 3.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.29.0",
+  "version": "3.31.0",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",

package/source/dom/util.mjs

@@ -8,7 +8,7 @@
 import { getGlobal } from "../types/global.mjs";
 import { validateString } from "../types/validate.mjs";
 
-export { getDocument, getWindow, getDocumentFragmentFromString };
+export { getDocument, getWindow, getDocumentFragmentFromString, findElementWithIdUpwards };
 
 /**
  * This method fetches the document object
@@ -151,3 +151,52 @@ function getDocumentFragmentFromString(html) {
 
     return template.content;
 }
+
+
+/**
+ * Recursively searches upwards from a given element to find an ancestor element
+ * with a specified ID, considering both normal DOM and shadow DOM.
+ *
+ * @param {HTMLElement|ShadowRoot} element - The starting element or shadow root to search from.
+ * @param {string} targetId - The ID of the target element to find.
+ * @returns {HTMLElement|null} - The ancestor element with the specified ID, or null if not found.
+ * @memberOf Monster.DOM
+ * @since 3.29.0
+ * @license AGPLv3
+ * @copyright schukai GmbH
+ */
+function findElementWithIdUpwards(element, targetId) {
+    if (!element) {
+        return null;
+    }
+
+    // Check if the current element has the target ID
+    if (element.id === targetId) {
+        return element;
+    }
+
+    // Search within the current element's shadow root, if it exists
+    if (element.shadowRoot) {
+        const target = element.shadowRoot.getElementById(targetId);
+        if (target) {
+            return target;
+        }
+    }
+
+    // If the current element is the document.documentElement, search within the main document
+    if (element === document.documentElement) {
+        const target = document.getElementById(targetId);
+        if (target) {
+            return target;
+        }
+    }
+
+    // If the current element is inside a shadow root, search its host's ancestors
+    const rootNode = element.getRootNode();
+    if (rootNode && rootNode instanceof ShadowRoot) {
+        return findElementWithIdUpwards(rootNode.host, targetId);
+    }
+
+    // Otherwise, search the current element's parent
+    return findElementWithIdUpwards(element.parentElement, targetId);
+}

package/source/text/util.mjs

@@ -0,0 +1,57 @@
+export {generateRangeComparisonExpression}
+
+/**
+ * Generates a comparison expression for a comma-separated string of ranges and single values.
+ * @param {string} expression - The string expression to generate the comparison for.
+ * @param {string} valueName - The name of the value to compare against.
+ * @param {Object} [options] - The optional parameters.
+ * @param {boolean} [options.urlEncode=false] - Whether to encode comparison operators for use in a URL.
+ * @param {string} [options.andOp='&&'] - The logical AND operator to use.
+ * @param {string} [options.orOp='||'] - The logical OR operator to use.
+ * @param {string} [options.eqOp='=='] - The comparison operator for equality to use.
+ * @param {string} [options.geOp='>='] - The comparison operator for greater than or equal to to use.
+ * @param {string} [options.leOp='<='] - The comparison operator for less than or equal to to use.
+ * @returns {string} The generated comparison expression.
+ * @throws {Error} If the input is invalid.
+ */
+function generateRangeComparisonExpression(expression, valueName, options = {}) {
+    const {
+        urlEncode = false,
+        andOp = '&&',
+        orOp = '||',
+        eqOp = '==',
+        geOp = '>=',
+        leOp = '<=',
+    } = options;
+    const ranges = expression.split(',');
+    let comparison = '';
+    for (let i = 0; i < ranges.length; i++) {
+        const range = ranges[i].trim();
+        if (range === '') {
+            throw new Error(`Invalid range '${range}'`);
+        } else if (range.includes('-')) {
+            const [start, end] = range.split('-').map(s => (s === '' ? null : parseFloat(s)));
+            if ((start !== null && isNaN(start)) || (end !== null && isNaN(end))) {
+                throw new Error(`Invalid value in range '${range}'`);
+            }
+            if (start !== null && end !== null && start > end) {
+                throw new Error(`Invalid range '${range}'`);
+            }
+            const compStart = start !== null ? `${valueName}${urlEncode ? encodeURIComponent(geOp) : geOp}${start}` : '';
+            const compEnd = end !== null ? `${valueName}${urlEncode ? encodeURIComponent(leOp) : leOp}${end}` : '';
+            const compRange = `${compStart}${compStart && compEnd ? ` ${andOp} ` : ''}${compEnd}`;
+            comparison += ranges.length > 1 ? `(${compRange})` : compRange;
+        } else {
+            const value = parseFloat(range);
+            if (isNaN(value)) {
+                throw new Error(`Invalid value '${range}'`);
+            }
+            const compValue = `${valueName}${urlEncode ? encodeURIComponent(eqOp) : eqOp}${value}`;
+            comparison += ranges.length > 1 ? `(${compValue})` : compValue;
+        }
+        if (i < ranges.length - 1) {
+            comparison += ` ${orOp} `;
+        }
+    }
+    return comparison;
+}

package/source/types/version.mjs

@@ -142,7 +142,7 @@ function getMonsterVersion() {
     }
 
     /** don't touch, replaced by make with package.json version */
-    monsterVersion = new Version("3.29.0");
+    monsterVersion = new Version("3.31.0");
 
     return monsterVersion;
 }

package/test/cases/dom/find.mjs

@@ -0,0 +1,85 @@
+import {
+    findElementWithIdUpwards
+} from "../../../../application/source/dom/util.mjs";
+
+import { expect } from 'chai';
+import { JSDOM } from 'jsdom';
+
+let originalEnvironment;
+
+function setupTestEnvironment() {
+    const { window } = new JSDOM('<!DOCTYPE html>', { pretendToBeVisual: true });
+
+    const { document, customElements, HTMLElement } = window;
+    originalEnvironment = {
+        document: globalThis.document,
+        customElements: globalThis.customElements,
+        HTMLElement: globalThis.HTMLElement,
+        ShadowRoot: globalThis.ShadowRoot,
+    };
+    globalThis.document = document;
+    globalThis.customElements = customElements;
+    globalThis.HTMLElement = HTMLElement;
+    globalThis.ShadowRoot = window.ShadowRoot || class ShadowRoot {}; // Fallback for JSDOM
+
+    class TestComponent extends HTMLElement {
+        constructor() {
+            super();
+            this.attachShadow({ mode: 'open' });
+        }
+    }
+
+    if (!customElements.get('test-component')) {
+        customElements.define('test-component', TestComponent);
+    }
+}
+
+function cleanupTestEnvironment() {
+    Object.assign(globalThis, originalEnvironment);
+}
+
+describe('findElementWithIdUpwards', () => {
+    before(() => {
+        setupTestEnvironment();
+    });
+
+    after(() => {
+        cleanupTestEnvironment();
+    });
+
+    beforeEach(() => {
+        // Set up the DOM
+        document.body.innerHTML = `
+      <div id="container">
+        <div id="parent">
+          <div id="child"></div>
+        </div>
+      </div>
+    `;
+
+        const shadowHost = document.createElement('div');
+        document.body.appendChild(shadowHost);
+        const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+        const innerElement = document.createElement('div');
+        innerElement.id = 'inner';
+        shadowRoot.appendChild(innerElement);
+    });
+
+    it('should find the element with the target ID in the normal DOM', () => {
+        const child = document.getElementById('child');
+        const result = findElementWithIdUpwards(child, 'parent');
+        expect(result).to.equal(document.getElementById('parent'));
+    });
+
+    it('should find the element with the target ID in the shadow DOM', () => {
+        const innerElement = document.querySelector('div[shadowroot] > div');
+        const result = findElementWithIdUpwards(innerElement, 'inner');
+        expect(result).to.equal(innerElement);
+    });
+
+    it('should return null if the element with the target ID is not found', () => {
+        const child = document.getElementById('child');
+        const result = findElementWithIdUpwards(child, 'nonexistent');
+        expect(result).to.be.null;
+    });
+});

package/test/cases/dom/util.mjs

@@ -1,5 +1,3 @@
-'use strict';
-
 import {
     getDocument, getWindow, getDocumentFragmentFromString
 } from "../../../../application/source/dom/util.mjs";

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("3.29.0")
+        monsterVersion = new Version("3.31.0")
 
         let m = getMonsterVersion();
 

package/test/cases/text/formatter.mjs

@@ -204,4 +204,84 @@ describe('Formatter', function () {
     });
 
 
+
+
+    describe('Formatter', () => {
+        it('should format a basic string with object values', () => {
+            const formatter = new Formatter({name: 'John', age: 30});
+            const result = formatter.format('My name is ${name} and I am ${age | tostring} years old.');
+
+            expect(result).to.equal('My name is John and I am 30 years old.');
+        });
+
+        it('should format a string with nested markers', () => {
+            const text = '${mykey${subkey}}';
+            const obj = {mykey2: '1', subkey: '2'};
+            const formatter = new Formatter(obj);
+
+            expect(formatter.format(text)).to.equal('1');
+        });
+
+        it('should format a string with custom markers', () => {
+            const formatter = new Formatter({name: 'John', age: 30});
+            formatter.setMarker('[', ']');
+            const result = formatter.format('My name is [name] and I am [age | tostring] years old.');
+
+            expect(result).to.equal('My name is John and I am 30 years old.');
+        });
+
+        it('should format a string using callback', () => {
+            const formatter = new Formatter({x: '1'}, {
+                callbacks: {
+                    quote: (value) => {
+                        return '"' + value + '"';
+                    },
+                },
+            });
+
+            expect(formatter.format('${x | call:quote}')).to.equal('"1"');
+        });
+
+        it('should format a string with parameters', () => {
+            const obj = {
+                a: {
+                    b: {
+                        c: 'Hello',
+                    },
+                    d: 'world',
+                },
+            };
+            const formatter = new Formatter(obj);
+            const result = formatter.format('${a.b.c} ${a.d | ucfirst}!');
+
+            expect(result).to.equal('Hello World!');
+        });
+        
+        it('should throw a too deep nesting error', () => {
+            const formatter = new Formatter({name: 'John'});
+            const nestedText = '${name${name${name${name${name${name${name${name${name${name${name${name${name${name${name${name${name${name${name}}}}}}}}}}}}}}}}}}';
+            expect(() => formatter.format(nestedText)).to.throw('syntax error in formatter template');
+        });
+
+        it('should throw a too deep nesting error', () => {
+            const inputObj = {
+                mykey: '${mykey}',
+            };
+
+            const formatter = new Formatter(inputObj);
+
+            const text = '${mykey}';
+            let formattedText = text;
+
+            // Create a string with 21 levels of nesting
+            for (let i = 0; i < 21; i++) {
+                formattedText = '${' + formattedText + '}';
+            }
+
+            expect(() => formatter.format(formattedText)).to.throw('too deep nesting');
+        });
+        
+    });
+
+
 });

package/test/cases/text/util.mjs

@@ -0,0 +1,109 @@
+import {expect} from "chai"
+import {generateRangeComparisonExpression} from "../../../../application/source/text/util.mjs";
+
+describe('generateRangeComparisonExpression', () => {
+    it('should generate correct comparison expression for single values', () => {
+        const expression = '1,3,5';
+        const valueName = 'x';
+        const result = generateRangeComparisonExpression(expression, valueName);
+        expect(result).to.equal('(x==1) || (x==3) || (x==5)');
+    });
+
+    it('should generate correct comparison expression for ranges', () => {
+        const expression = '1-3,6-8';
+        const valueName = 'x';
+        const result = generateRangeComparisonExpression(expression, valueName);
+        expect(result).to.equal('(x>=1 && x<=3) || (x>=6 && x<=8)');
+    });
+
+    it('should generate correct comparison expression for mixed ranges and single values', () => {
+        const expression = '1-3,5,7-9';
+        const valueName = 'x';
+        const result = generateRangeComparisonExpression(expression, valueName);
+        expect(result).to.equal('(x>=1 && x<=3) || (x==5) || (x>=7 && x<=9)');
+    });
+
+    it('should throw an error for invalid range', () => {
+        const expression = '1-3,5-4';
+        const valueName = 'x';
+        expect(() => generateRangeComparisonExpression(expression, valueName)).to.throw(`Invalid range '5-4'`);
+    });
+
+
+    it('should throw an error for invalid value', () => {
+        const expression = '1-3,a';
+        const valueName = 'x';
+        expect(() => generateRangeComparisonExpression(expression, valueName)).to.throw('Invalid value');
+    });
+
+    it('should generate correct comparison expression with custom operators', () => {
+        const expression = '1-3,5';
+        const valueName = 'x';
+        const options = {
+            andOp: 'AND',
+            orOp: 'OR',
+            eqOp: '===',
+            geOp: '>=',
+            leOp: '<=',
+        };
+        const result = generateRangeComparisonExpression(expression, valueName, options);
+        expect(result).to.equal('(x>=1 AND x<=3) OR (x===5)');
+    });
+
+    it('should generate correct comparison expression with urlEncode option', () => {
+        const testCases = [
+            {
+                expression: '1,3,5',
+                valueName: 'x',
+                expected: '(x%3D%3D1) || (x%3D%3D3) || (x%3D%3D5)',
+            },
+            {
+                expression: '-10',
+                valueName: 'x',
+                expected: 'x%3C%3D10',
+            },
+            {
+                expression: '10-',
+                valueName: 'x',
+                expected: 'x%3E%3D10',
+            },
+            {
+                expression: '1-3,6-8',
+                valueName: 'y',
+                expected: '(y%3E%3D1 && y%3C%3D3) || (y%3E%3D6 && y%3C%3D8)',
+            },
+            {
+                expression: '1-3,5,7-9',
+                valueName: 'z',
+                expected: '(z%3E%3D1 && z%3C%3D3) || (z%3D%3D5) || (z%3E%3D7 && z%3C%3D9)',
+            },
+        ];
+
+        testCases.forEach(({expression, valueName, expected}) => {
+            const result = generateRangeComparisonExpression(expression, valueName, {urlEncode: true});
+            expect(result).to.equal(expected);
+        });
+    });
+
+    it('should generate correct comparison expression for open-ended ranges with urlEncode option', () => {
+        const testCases = [
+            {
+                expression: '10-',
+                valueName: 'x',
+                expected: 'x%3E%3D10',
+            },
+            {
+                expression: '-10',
+                valueName: 'y',
+                expected: 'y%3C%3D10',
+            },
+        ];
+
+        testCases.forEach(({expression, valueName, expected}) => {
+            const result = generateRangeComparisonExpression(expression, valueName, {urlEncode: true});
+            expect(result).to.equal(expected);
+        });
+    });
+
+
+});