@schukai/monster 3.32.0 → 3.34.0

package/README.md

@@ -73,7 +73,7 @@ We do try to work around some browser bugs, but on the whole we don't use polyfi
 However, many functions can be mapped via [polyfill.io](https://polyfill.io/) and thus the compatibility can be increased.
 
 ```html
-<script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.filter,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.sort,ArrayBuffer,atob,Blob,CustomEvent,DataView,document,Document,DocumentFragment,Element,Event,fetch,globalThis,HTMLDocument,HTMLTemplateElement,Intl,JSON,Map,Math.log2,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.freeze,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,Set,String.prototype.endsWith,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,Uint16Array,Uint8Array,URL,WeakMap,WeakSet"
+<script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.filter,Array.prototype.forEach,Array.prototype.includes,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.sort,ArrayBuffer,atob,Blob,CustomEvent,DataView,document,Document,DocumentFragment,Element,Event,fetch,globalThis,HTMLDocument,HTMLTemplateElement,Intl,JSON,Map,Math.log2,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.freeze,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,Set,String.prototype.endsWith,String.prototype.includes,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,Uint16Array,Uint8Array,URL,WeakMap,WeakSet"
        crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
 ```

package/package.json

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

package/source/dom/customelement.mjs

@@ -29,6 +29,7 @@ import {findDocumentTemplate, Template} from "./template.mjs";
 import {addObjectWithUpdaterToElement} from "./updater.mjs";
 import {instanceSymbol} from "../constants.mjs";
 import {getDocumentTranslations, Translations} from "../i18n/translations.mjs";
+import {getSlottedElements} from "./slotted.mjs";
 
 export {
     CustomElement,
@@ -599,58 +600,6 @@ class CustomElement extends HTMLElement {
     }
 }
 
-/**
- * @private
- * @param {String|undefined} query
- * @param {String|undefined|null} name name of the slot (if the parameter is undefined, all slots are searched, if the parameter has the value null, all slots without a name are searched. if a string is specified, the slots with this name are searched.)
- * @return {*}
- * @this CustomElement
- * @license AGPLv3
- * @since 1.23.0
- * @throws {Error} query must be a string
- */
-function getSlottedElements(query, name) {
-    const self = this;
-    const result = new Set();
-
-    if (!(self.shadowRoot instanceof ShadowRoot)) {
-        return result;
-    }
-
-    let selector = "slot";
-    if (name !== undefined) {
-        if (name === null) {
-            selector += ":not([name])";
-        } else {
-            selector += `[name=${validateString(name)}]`;
-        }
-    }
-
-    const slots = self.shadowRoot.querySelectorAll(selector);
-
-    for (const [, slot] of Object.entries(slots)) {
-        slot.assignedElements().forEach(function (node) {
-            if (!(node instanceof HTMLElement)) return;
-
-            if (isString(query)) {
-                node.querySelectorAll(query).forEach(function (n) {
-                    result.add(n);
-                });
-
-                if (node.matches(query)) {
-                    result.add(node);
-                }
-            } else if (query !== undefined) {
-                throw new Error("query must be a string");
-            } else {
-                result.add(node);
-            }
-        });
-    }
-
-    return result;
-}
-
 /**
  * @this CustomElement
  * @private

package/source/dom/dimension.mjs

@@ -0,0 +1,105 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import {getWindow} from './util.mjs';
+
+export {convertToPixels, getDeviceDPI}
+
+
+/**
+ * Stores the DPI of the device.
+ *
+ * @returns {number}
+ * @type {number}
+ */
+let CURRENT_DEVICE_DPI = function () {
+    let i = 0;
+    for (i = 56; i < 2000; i++) {
+        if (getWindow().matchMedia("(max-resolution: " + i + "dpi)").matches === true) {
+            return i;
+        }
+    }
+    return i;
+};
+
+/**
+ * Returns the DPI of the device.
+ *
+ * @returns {number}
+ */
+function getDeviceDPI() {
+    // only call the function once
+    if (typeof CURRENT_DEVICE_DPI === 'function') {
+        CURRENT_DEVICE_DPI = CURRENT_DEVICE_DPI();
+    }
+
+    return getWindow().devicePixelRatio * CURRENT_DEVICE_DPI;
+}
+
+
+/**
+ * Converts a CSS value to pixels.
+ *
+ * As Example:
+ *
+ * ```js
+ * convertToPixels('1em') // returns the current font size in pixels
+ * convertToPixels('1rem') // returns the current root font size in pixels
+ * convertToPixels('1px') // returns 1
+ * convertToPixels('100%') // returns the current width of the parent element in pixels
+ * ```
+ *
+ * Following units are supported:
+ * - px
+ * - em
+ * - rem
+ * - %
+ *
+ * @param value
+ * @param parentElement
+ * @param fontSizeElement
+ * @returns {number}
+ * @license AGPLv3
+ * @since 1.6.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.DOM
+ * @throws {Error} Unsupported unit
+ */
+
+function convertToPixels(value, parentElement = document.documentElement, fontSizeElement = document.documentElement) {
+    const regex = /^([\d.]+)(.*)$/;
+    const [, num, unit] = value.match(regex);
+    const number = parseFloat(num);
+    const dpi = getDeviceDPI();
+
+    if (unit === 'px') {
+        return number;
+    } else if (unit === 'em') {
+        const fontSize = parseFloat(window.getComputedStyle(fontSizeElement).fontSize);
+        return number * fontSize;
+    } else if (unit === 'rem') {
+        const rootFontSize = parseFloat(window.getComputedStyle(parentElement).fontSize);
+        return number * rootFontSize;
+    } else if (unit === '%') {
+        const parentWidth = parseFloat(window.getComputedStyle(parentElement).width);
+        return (number * parentWidth) / 100;
+    } else if (unit === 'in') {
+        return number * dpi;
+    } else if (unit === 'cm') {
+        return (number * dpi) / 2.54;
+    } else if (unit === 'mm') {
+        return (number * dpi) / 25.4;
+    } else if (unit === 'pt') {
+        return (number * dpi) / 72;
+    } else if (unit === 'pc') {
+        return (number * dpi) / 6;
+    } else {
+        throw new Error(`Unsupported unit: ${unit}`);
+    }
+}
+
+

package/source/dom/slotted.mjs

@@ -0,0 +1,111 @@
+import {isString} from "../types/is.mjs";
+import {validateString} from "../types/validate.mjs";
+
+export {getSlottedElements, getSlottedNodes};
+
+/**
+ * @private
+ * @param {String|undefined} query
+ * @param {String|undefined|null} name name of the slot (if the parameter is undefined, all slots are searched, if the parameter has the value null, all slots without a name are searched. if a string is specified, the slots with this name are searched.)
+ * @return {*}
+ * @this CustomElement
+ * @license AGPLv3
+ * @since 3.33.0
+ * @throws {Error} query must be a string
+ */
+function getSlottedNodes(query, name) {
+    const self = this;
+    const result = new Set();
+    
+    if (!self.shadowRoot) {
+        return result;
+    }
+
+    let selector = "slot";
+    if (name !== undefined) {
+        if (name === null) {
+            selector += ":not([name])";
+        } else {
+            selector += `[name=${validateString(name)}]`;
+        }
+    }
+
+    const slots = self.shadowRoot.querySelectorAll(selector);
+
+    for (const [, slot] of Object.entries(slots)) {
+        slot.assignedNodes().forEach(function (node) {
+            if (node === null || node === undefined) {
+                return;
+            }
+
+            if (isString(query)) {
+                node.querySelectorAll(query).forEach(function (n) {
+                    result.add(n);
+                });
+
+                if (node.matches(query)) {
+                    result.add(node);
+                }
+            } else if (query !== undefined) {
+                throw new Error("query must be a string");
+            } else {
+                result.add(node);
+            }
+        });
+    }
+
+    return result;
+}
+
+
+/**
+ * @private
+ * @param {String|undefined} query
+ * @param {String|undefined|null} name name of the slot (if the parameter is undefined, all slots are searched, if the parameter has the value null, all slots without a name are searched. if a string is specified, the slots with this name are searched.)
+ * @return {*}
+ * @this CustomElement
+ * @license AGPLv3
+ * @since 1.23.0
+ * @throws {Error} query must be a string
+ */
+function getSlottedElements(query, name) {
+    const self = this;
+    const result = new Set();
+
+    if (!(self.shadowRoot instanceof ShadowRoot)) {
+        return result;
+    }
+
+    let selector = "slot";
+    if (name !== undefined) {
+        if (name === null) {
+            selector += ":not([name])";
+        } else {
+            selector += `[name=${validateString(name)}]`;
+        }
+    }
+
+    const slots = self.shadowRoot.querySelectorAll(selector);
+
+    for (const [, slot] of Object.entries(slots)) {
+        slot.assignedElements().forEach(function (node) {
+            if (!(node instanceof HTMLElement)) return;
+
+            if (isString(query)) {
+                node.querySelectorAll(query).forEach(function (n) {
+                    result.add(n);
+                });
+
+                if (node.matches(query)) {
+                    result.add(node);
+                }
+            } else if (query !== undefined) {
+                throw new Error("query must be a string");
+            } else {
+                result.add(node);
+            }
+        });
+    }
+
+    return result;
+}

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.32.0");
+    monsterVersion = new Version("3.34.0");
 
     return monsterVersion;
 }

package/source/util/runtime.mjs

@@ -0,0 +1,96 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+const ENV_AWS_LAMBDA = 'aws-lambda';
+const ENV_GOOGLE_FUNCTIONS = 'google-functions';
+const ENV_ELECTRON = 'electron';
+const ENV_NODE = 'node';
+const ENV_BROWSER = 'browser';
+const ENV_WEB_WORKER = 'web-worker';
+const ENV_DENO = 'deno';
+const ENV_UNKNOWN = 'unknown';
+
+/**
+ * Detects and returns the current runtime environment.
+ * 
+ * - 'aws-lambda': AWS Lambda environment
+ * - 'google-functions': Google Cloud Functions environment
+ * - 'electron': Electron environment
+ * - 'node': Node.js environment
+ * - 'browser': Browser environment
+ * - 'web-worker': Web Worker environment
+ * - 'deno': Deno environment
+ * - 'react-native': React Native environment
+ * - 'unknown': Unknown environment
+ * 
+ * @returns {string} The detected runtime environment. Possible values are:
+ */
+function detectRuntimeEnvironment() {
+    // AWS Lambda environment
+    if (
+        typeof process !== 'undefined' &&
+        process.env != null &&
+        process.env.AWS_LAMBDA_FUNCTION_NAME
+    ) {
+        return ENV_AWS_LAMBDA;
+    }
+
+    // Google Cloud Functions environment
+    if (
+        typeof process !== 'undefined' &&
+        process.env != null &&
+        process.env.FUNCTION_NAME
+    ) {
+        return ENV_GOOGLE_FUNCTIONS;
+    }
+
+    // Node.js environment
+    if (
+        typeof process !== 'undefined' &&
+        process.versions != null &&
+        process.versions.node != null
+    ) {
+        // Electron environment
+        if (process.versions.electron != null) {
+            return ENV_ELECTRON;
+        }
+        return ENV_NODE;
+    }
+
+    // Browser environment
+    if (
+        typeof window !== 'undefined' &&
+        typeof window.document !== 'undefined' &&
+        typeof navigator !== 'undefined' &&
+        typeof navigator.userAgent === 'string'
+    ) {
+        // Web Worker environment
+        if (typeof self === 'object' && typeof importScripts === 'function') {
+            return ENV_WEB_WORKER;
+        }
+        return ENV_BROWSER;
+    }
+
+    // Deno environment
+    if (typeof Deno !== 'undefined') {
+        return ENV_DENO;
+    }
+
+    // Unknown environment
+    return ENV_UNKNOWN;
+}
+
+export {
+    ENV_AWS_LAMBDA,
+    ENV_GOOGLE_FUNCTIONS,
+    ENV_ELECTRON,
+    ENV_NODE,
+    ENV_BROWSER,
+    ENV_WEB_WORKER,
+    ENV_DENO,
+    ENV_UNKNOWN,
+    detectRuntimeEnvironment}

package/test/cases/dom/assembler.mjs

@@ -1,5 +1,3 @@
-'use strict';
-
 import {expect} from "chai"
 
 import {ATTRIBUTEPREFIX, Assembler} from "../../../../application/source/dom/assembler.mjs";

package/test/cases/dom/attributes.mjs

@@ -1,4 +1,3 @@
-'use strict';
 
 import {expect} from "chai"
 

package/test/cases/dom/customelement.mjs

@@ -2,7 +2,7 @@
 
 import chai from "chai"
 import {internalSymbol} from "../../../../application/source/constants.mjs";
-import {ATTRIBUTE_OPTIONS, customElementUpdaterLinkSymbol} from "../../../../application/source/dom/constants.mjs";
+import {ATTRIBUTE_OPTIONS} from "../../../../application/source/dom/constants.mjs";
 import {getDocument} from "../../../../application/source/dom/util.mjs";
 import {ProxyObserver} from "../../../../application/source/types/proxyobserver.mjs";
 import {addObjectWithUpdaterToElement} from "../../../../application/source/dom/updater.mjs";
@@ -32,42 +32,6 @@ describe('DOM', function () {
 
     let CustomElement, registerCustomElement, TestComponent, document, TestComponent2,assignUpdaterToElement;
 
-    // This allows us to inspect the addEventListener calls
-    
-    // let addEventListener = EventTarget.prototype.addEventListener;
-    // let removeEventListener = EventTarget.prototype.removeEventListener;
-    //
-    // before(function (done) {
-    //     initJSDOM().then(() => {
-    //
-    //         EventTarget.prototype.addEventListener = function (type, callback, options) {
-    //             /* store args and then… */
-    //             // callback = (e) => {
-    //             //     console.log("event fired" + e);
-    //             //     callback(e);
-    //             // };
-    //
-    //             addEventListener.call(this, type, callback, options);
-    //         };
-    //
-    //         EventTarget.prototype.removeEventListener = function (type, callback, options) {
-    //             /* remove from stored args and then… */
-    //             removeEventListener.call(this, type, callback, options);
-    //         };
-    //
-    //         done(e);
-    //
-    //
-    //     });
-    //
-    //    
-    // })
-    //
-    // after(function () {
-    //     EventTarget.prototype.addEventListener = addEventListener;
-    //     EventTarget.prototype.removeEventListener = removeEventListener;
-    // });
-
 
     describe("assignUpdaterToElement", function () {
 

package/test/cases/dom/dimension.mjs

@@ -0,0 +1,128 @@
+import {expect} from 'chai';
+import {convertToPixels, getDeviceDPI} from "../../../../application/source/dom/dimension.mjs";
+import {getWindow} from "../../../../application/source/dom/util.mjs";
+import {initJSDOM, isBrowser, JSDOMExport as JSDOM} from "../../util/jsdom.mjs";
+import {getGlobal} from "../../../../application/source/types/global.mjs";
+import {detectRuntimeEnvironment} from "../../../../application/source/util/runtime.mjs";
+
+
+function getMockWindow(dpi) {
+
+    if(detectRuntimeEnvironment() === 'browser') {
+        return getWindow();
+    }
+    
+    
+    const dom = new JSDOM('', {
+        pretendToBeVisual: true,
+        resources: 'usable',
+    });
+
+    dom.window.matchMedia = (query) => {
+        const dpiRegex = /\(max-resolution: (\d+)dpi\)/;
+        const match = query.match(dpiRegex);
+
+        if (match) {
+            const maxDpi = parseInt(match[1], 10);
+            return {matches: dpi <= maxDpi};
+        }
+
+        return {matches: false};
+    };
+
+    return dom.window;
+}
+
+describe('dimension', () => {
+    let currentEnvironment;
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            //chaiDom(getDocument());
+            done();
+        });
+    })
+
+    beforeEach(() => {
+
+        const testDpi = 96;
+        const testWindow = getMockWindow(testDpi);
+        getGlobal().window = testWindow;
+
+    });
+
+    afterEach(() => {
+        delete getGlobal().window;
+    });
+
+    describe('convertToPixels', () => {
+        it('should correctly convert px values', () => {
+            const result = convertToPixels('100px');
+            expect(result).to.equal(100);
+        });
+
+        it('should correctly convert em values', () => {
+            const testElement = document.createElement('div');
+            testElement.style.fontSize = '16px';
+            document.body.appendChild(testElement);
+
+            const result = convertToPixels('2em', testElement, testElement);
+            expect(result).to.equal(32);
+
+            document.body.removeChild(testElement);
+        });
+
+        it('should correctly convert rem values', () => {
+            const testElement = document.createElement('div');
+            testElement.style.fontSize = '16px';
+            document.documentElement.appendChild(testElement);
+
+            const result = convertToPixels('2rem', testElement);
+            expect(result).to.equal(32);
+
+            document.documentElement.removeChild(testElement);
+        });
+
+        it('should correctly convert percentage values', () => {
+            const testElement = document.createElement('div');
+            testElement.style.width = '500px';
+            document.body.appendChild(testElement);
+
+            const result = convertToPixels('50%', testElement);
+            expect(result).to.equal(250);
+
+            document.body.removeChild(testElement);
+        });
+
+        it('should throw an error for unsupported units', () => {
+            expect(() => convertToPixels('10unsupportedUnit')).to.throw('Unsupported unit: unsupportedUnit');
+        });
+    });
+
+
+    describe('getDeviceDPI', () => {
+        it('should return the correct device DPI', () => {
+            const testDpi = 96;
+            const testWindow = getMockWindow(testDpi);
+            getGlobal().window = testWindow;
+
+            const deviceDpi = getDeviceDPI();
+            expect(deviceDpi).to.equal(testDpi * testWindow.devicePixelRatio);
+
+            delete getGlobal().window;
+        });
+
+        it('should cache the result and return the same value', () => {
+            const testDpi = 96;
+            const testWindow = getMockWindow(testDpi);
+            getGlobal().window = testWindow;
+
+            const deviceDpi1 = getDeviceDPI();
+            const deviceDpi2 = getDeviceDPI();
+            expect(deviceDpi1).to.equal(deviceDpi2);
+
+            delete getGlobal().window;
+        });
+    });
+
+});

package/test/cases/dom/find.mjs

@@ -2,30 +2,16 @@ import {
     findElementWithIdUpwards
 } from "../../../../application/source/dom/util.mjs";
 
-import { expect } from 'chai';
-import { JSDOM } from 'jsdom';
-
-let originalEnvironment;
+import {expect} from 'chai';
+import {initJSDOM} from "../../util/jsdom.mjs";
 
 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' });
+            this.attachShadow({mode: 'open'});
         }
     }
 
@@ -35,12 +21,16 @@ function setupTestEnvironment() {
 }
 
 function cleanupTestEnvironment() {
-    Object.assign(globalThis, originalEnvironment);
+    let mocks = document.getElementById('mocks');
+    mocks.innerHTML = "";
 }
 
 describe('findElementWithIdUpwards', () => {
-    before(() => {
-        setupTestEnvironment();
+    before((done) => {
+        initJSDOM().then(() => {
+            setupTestEnvironment();
+            done()
+        });
     });
 
     after(() => {
@@ -49,17 +39,18 @@ describe('findElementWithIdUpwards', () => {
 
     beforeEach(() => {
         // Set up the DOM
-        document.body.innerHTML = `
-      <div id="container">
+
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = `
+            <div id="container">
         <div id="parent">
           <div id="child"></div>
         </div>
-      </div>
-    `;
+      </div>`;
 
         const shadowHost = document.createElement('div');
         document.body.appendChild(shadowHost);
-        const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+        const shadowRoot = shadowHost.attachShadow({mode: 'open'});
         const innerElement = document.createElement('div');
         innerElement.id = 'inner';
         shadowRoot.appendChild(innerElement);