@schukai/monster 3.7.0 → 3.9.0

package/source/i18n/providers/embed.mjs

@@ -5,16 +5,16 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-import { internalSymbol } from "../../constants.mjs";
-import { extend } from "../../data/extend.mjs";
-import { getGlobalObject } from "../../types/global.mjs";
-import { isString } from "../../types/is.mjs";
-import { validateObject, validateString } from "../../types/validate.mjs";
-import { parseLocale } from "../locale.mjs";
-import { Provider } from "../provider.mjs";
-import { Translations } from "../translations.mjs";
+import {internalSymbol} from "../../constants.mjs";
+import {extend} from "../../data/extend.mjs";
+import {getDocument} from "../../dom/util.mjs";
+import {isString} from "../../types/is.mjs";
+import {validateObject, validateString} from "../../types/validate.mjs";
+import {parseLocale} from "../locale.mjs";
+import {Provider} from "../provider.mjs";
+import {Translations} from "../translations.mjs";
 
-export { Embed };
+export {Embed};
 
 /**
  * The Embed provider retrieves a JSON file from the given Script Tag.
@@ -42,22 +42,27 @@ class Embed extends Provider {
      * new Embed('translations')
      * ```
      *
-     * @param {string} id
+     * @param {HTMLElement|string} elementOrId
      * @param {Object} options
      */
-    constructor(id, options) {
+    constructor(elementOrId, options) {
         super(options);
 
         if (options === undefined) {
             options = {};
         }
 
-        validateString(id);
-
-        /**
-         * @property {string}
-         */
-        this.textId = id;
+        if (elementOrId instanceof HTMLElement) {
+            /**
+             * @property {HTMLElement|string}
+             */
+            this.translateElement = elementOrId;
+        } else {
+            /**
+             * @property {HTMLElement|string}
+             */
+            this.translateElement = getDocument().getElementById(validateString(elementOrId));
+        }
 
         /**
          * @private
@@ -86,16 +91,25 @@ class Embed extends Provider {
         }
 
         return new Promise((resolve, reject) => {
-            let text = getGlobalObject("document").getElementById(this.textId);
 
-            if (text === null) {
+            if (this.translateElement === null) {
                 reject(new Error("Text not found"));
                 return;
             }
 
+            if (!(this.translateElement instanceof HTMLScriptElement)) {
+                reject(new Error("Element is not a script tag"));
+                return;
+            }
+
+            if (this.translateElement.type !== "application/json") {
+                reject(new Error("Element is not a script tag with type application/json"));
+                return;
+            }
+
             let translations = null;
             try {
-                translations = JSON.parse(text.innerHTML);
+                translations = JSON.parse(this.translateElement.innerHTML);
             } catch (e) {
                 reject(e);
                 return;
@@ -112,4 +126,38 @@ class Embed extends Provider {
             resolve(t);
         });
     }
+
+
+    /**
+     * Initializes the translations for the current document.
+     *
+     * `script[data-monster-role=translations]` is searched for and the translations are assigned to the element.
+     *
+     * @param element
+     * @returns {Promise<unknown[]>}
+     */
+    static assignTranslationsToElement(element) {
+        const d = getDocument()
+
+        if (!(element instanceof HTMLElement)) {
+            element = d.querySelector("body");
+        }
+
+        const list = d.querySelectorAll("script[data-monster-role=translations]");
+        if (list === null) {
+            return;
+        }
+
+        const promises = [];
+        
+        let result
+        
+        list.forEach((translationElement) => {
+            const p = new Embed(translationElement);
+            promises.push(p.assignToElement(undefined, element));
+        });
+
+        return Promise.all(promises);
+    }
+    
 }

package/source/i18n/translations.mjs

@@ -5,12 +5,17 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-import { Base } from "../types/base.mjs";
-import { isObject, isString } from "../types/is.mjs";
-import { validateInstance, validateInteger, validateObject, validateString } from "../types/validate.mjs";
-import { Locale, parseLocale } from "./locale.mjs";
+import { getLinkedObjects,hasObjectLink} from "../dom/attributes.mjs";
+import {ATTRIBUTE_OBJECTLINK} from "../dom/constants.mjs";
+import {getDocument} from "../dom/util.mjs";
+import {Base} from "../types/base.mjs";
+import {isObject, isString} from "../types/is.mjs";
+import {validateInteger, validateObject, validateString} from "../types/validate.mjs";
+import {Locale, parseLocale} from "./locale.mjs";
+import {translationsLinkSymbol} from "./provider.mjs";
 
-export { Translations };
+
+export {Translations, getDocumentTranslations};
 
 /**
  * With this class you can manage translations and access the keys.
@@ -30,11 +35,12 @@ class Translations extends Base {
     constructor(locale) {
         super();
 
-        if (isString(locale)) {
-            locale = parseLocale(locale);
+        if (locale instanceof Locale) {
+            this.locale = locale;
+        } else {
+            this.locale = parseLocale(validateString(locale));
         }
 
-        this.locale = validateInstance(locale, Locale);
         this.storage = new Map();
     }
 
@@ -112,9 +118,9 @@ class Translations extends Base {
      * Set a text for a key
      *
      * ```
-     * translations.setText("text1": "Make my day!");
+     * translations.setText("text1", "Make my day!");
      * // plural rules
-     * translations.setText("text6": {
+     * translations.setText("text6", {
      *     "zero": "There are no files on Disk.",
      *     "one": "There is one file on Disk.",
      *     "other": "There are files on Disk."
@@ -165,6 +171,13 @@ class Translations extends Base {
      */
     assignTranslations(translations) {
         validateObject(translations);
+        
+        if (translations instanceof Translations) {
+            translations.storage.forEach((v, k) => {
+                this.setText(k, v);
+            });
+            return this;
+        }
 
         for (const [k, v] of Object.entries(translations)) {
             this.setText(k, v);
@@ -173,3 +186,41 @@ class Translations extends Base {
         return this;
     }
 }
+
+/**
+ * Returns the translations for the current document.
+ *
+ * @param element
+ * @returns {*}
+ * @throws {Error} Element is not an HTMLElement
+ * @throws {Error} Missing translations
+ */
+function getDocumentTranslations(element) {
+
+    const d = getDocument()
+
+    if (!(element instanceof HTMLElement)) {
+        element = d.querySelector('['+ATTRIBUTE_OBJECTLINK+'="' + translationsLinkSymbol.toString() + '"]');
+    }
+
+    if (!(element instanceof HTMLElement)) {
+        throw new Error("Element is not an HTMLElement");
+    }
+
+    if (!hasObjectLink(element, translationsLinkSymbol)) {
+        throw new Error("Missing translations");
+    }
+    
+    let obj = getLinkedObjects(element, translationsLinkSymbol);
+    
+    for (const t of obj) {
+        if (t instanceof Translations) {
+            return t;
+        }
+    }
+
+    throw new Error("Missing translations");
+
+}
+
+

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

package/test/cases/data/datasource/server/restapi.mjs

@@ -4,7 +4,6 @@ import {expect} from "chai"
 import {RestAPI} from "../../../../../../application/source/data/datasource/server/restapi.mjs";
 import {validateObject} from "../../../../../../application/source/types/validate.mjs";
 
-
 describe('RestAPI', function () {
 
     let fetchReference;

package/test/cases/data/transformer.mjs

@@ -2,6 +2,7 @@
 
 import {expect} from "chai"
 import {Transformer} from "../../../../application/source/data/transformer.mjs";
+import {Embed} from "../../../../application/source/i18n/providers/embed.mjs";
 import {initJSDOM} from "../../util/jsdom.mjs";
 
 describe('Transformer', function () {
@@ -10,7 +11,7 @@ describe('Transformer', function () {
 
         let promises = []
         promises.push(initJSDOM());
-        if(!globalThis['crypto']) {
+        if (!globalThis['crypto']) {
             promises.push(import("@peculiar/webcrypto").then(m => {
                 globalThis['crypto'] = new m.Crypto();
                 return true;
@@ -197,4 +198,63 @@ describe('Transformer', function () {
             }).to.throw(TypeError);
         });
     });
+
+
+    describe('i18n', function () {
+
+        let html1 = `
+<div id="mock-translations"></div>
+<script type="application/json" data-monster-role="translations">
+    {
+        "test1": "xyz",
+        "test3": {
+            "other": "xyz"
+        }
+    }
+</script>  
+`;
+
+        beforeEach((done) => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+            let elem = document.getElementById('mock-translations');
+            Embed.assignTranslationsToElement(elem).then((o) => {
+                done()
+            })
+
+
+        })
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        before(function (done) {
+            initJSDOM().then(() => {
+                done()
+            });
+        });
+
+        [
+            [ 'i18n:test1',"", "xyz"],
+            [ 'i18n:',"test1", "xyz"], // key by value
+            [ 'i18n::',"test1", "xyz"], // key by value no default
+            [ 'i18n::eee',"test2", "eee"], // key by value with default
+            [ 'i18n::ddd',"test2", "ddd"], // key by value and default
+
+        ].forEach(function (data) {
+
+            let a = data.shift()
+            let b = data.shift()
+            let c = data.shift()
+
+            it('should transform('+a+').run('+b+') return ' + JSON.stringify(c), function () {
+                const t = new Transformer(a);
+                expect(t.run(b)).to.be.eql(c);
+            });
+        })
+    })
+
+
 });

package/test/cases/dom/locale.mjs

@@ -33,24 +33,27 @@ describe('Attributes', function () {
                 node.setAttribute('lang', a);
                 expect(getLocaleOfDocument().toString()).to.be.equal(a);
             })
-            
-            
+
 
         });
 
 
     });
-    
-    
+
+
     it('return language en', function () {
         let html = document.getElementsByTagName('html');
         let node = html.item(0);
+        let lang= node.getAttribute('lang');
 
         node.removeAttribute('lang');
         const locale = getLocaleOfDocument();
         expect(locale).to.be.instanceOf(Locale);
-        expect(locale.localeString).to.be.equal('en-US');
+        expect(locale.localeString).to.be.equal(navigator.language);
+
+        node.setAttribute('lang', lang);
+        
     })
-    
+
 
 })

package/test/cases/i18n/provider.mjs

@@ -1,12 +1,75 @@
 import {expect} from "chai"
+import {ATTRIBUTE_OBJECTLINK} from "../../../../application/source/dom/constants.mjs";
+import {getLinkedObjects} from "../../../../application/source/dom/attributes.mjs";
 import {Provider} from "../../../../application/source/i18n/provider.mjs";
+import {initJSDOM} from "../../util/jsdom.mjs";
+import {getDocumentTranslations, Translations} from "../../../../application/source/i18n/translations.mjs";
 
 describe('Provider', function () {
 
-    describe('Instance and Init', function () {
 
-        it('create instance', function () {
-            expect((new Provider()).getTranslations('en')).is.instanceof(Promise);
+    let html1 = `
+    <div id="test1">
+    </div>
+`;
+
+    beforeEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = html1;
+
+
+    })
+
+    afterEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = "";
+    })
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            done()
+        });
+    });
+
+    describe('Provider and Dom', function () {
+
+        const translationsLinkSymbol = Symbol.for("@schukai/monster/i18n/translations@@link");
+
+        it('assignToElement', function (done) {
+            const element = document.getElementById('test1');
+            const p = new Provider();
+            const r = p.assignToElement(undefined, element);
+
+            r.then((e) => {
+                const s = element.getAttribute(ATTRIBUTE_OBJECTLINK);
+                if (s === null) {
+                    done(new Error("Attribute not set"));
+                    return;
+                }
+
+                const i = getLinkedObjects(element, translationsLinkSymbol)
+                if (i === null) {
+                    done(new Error("No linked object found"));
+                    return;
+                }
+                let counter = 0;
+
+                for (let v of i) {
+                    counter++;
+                }
+
+                if (counter !== 1) {
+                    done(new Error("No linked object found"));
+                    return;
+                }
+
+                const docTrans = getDocumentTranslations(element)
+                expect(docTrans).is.instanceof(Translations);
+
+
+                done();
+            }).catch(e => done(e));
+
         });
 
     });

package/test/cases/i18n/translations.mjs

@@ -1,6 +1,12 @@
 import {expect} from "chai"
 import {parseLocale} from "../../../../application/source/i18n/locale.mjs";
-import {Translations} from "../../../../application/source/i18n/translations.mjs";
+import {Embed} from "../../../../application/source/i18n/providers/embed.mjs";
+import {
+    Translations,
+    getDocumentTranslations
+    
+} from "../../../../application/source/i18n/translations.mjs";
+import {initJSDOM} from "../../util/jsdom.mjs";
 
 describe('Translations', function () {
 
@@ -53,5 +59,76 @@ describe('Translations', function () {
 
     });
 
+    /**
+     * initDocumentTranslation
+     */
+
+    describe("test initDocumentTranslation ", function () {
+
+
+        let html1 = `<div id="mock-translations"></div>
+    
+<script type="application/json" data-monster-role="translations">
+    {
+        "test1": "abc",
+        "test2": {
+            "other": "xyz"
+        }
+    }
+</script>
+
+<script type="application/json" data-monster-role="translations">
+    {
+        "test1": "xyz",
+        "test3": {
+            "other": "xyz"
+        }
+    }
+</script>    
+    
+`;
+
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+
+        })
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        before(function (done) {
+            initJSDOM().then(() => {
+                done()
+            });
+        });
+
+
+        it('Init translations', function (done) {
+
+            let elem = document.getElementById('mock-translations');
+            Embed.assignTranslationsToElement(elem).then((o) => {
+
+                let mocks = document.getElementById('mocks');
+                
+                // no exception because of default
+                expect(getDocumentTranslations(elem).getText('no-key','with-default'))
+                    .is.equal('with-default');
+                
+                expect(getDocumentTranslations(elem).getText('test1'))
+                    .is.equal('xyz');
+
+                done();
+
+            }).catch((e) => {
+              done(e);
+            })
+
+
+        });
+    })
+
 
 });

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.7.0")
+        monsterVersion = new Version("3.9.0")
 
         let m = getMonsterVersion();
 

package/test/util/jsdom.mjs

@@ -4,7 +4,6 @@ import {extend} from "../../../application/source/data/extend.mjs";
 import {getGlobal} from "../../../application/source/types/global.mjs";
 
 export const isBrowser = new Function("try {return this===window;}catch(e){ return false;}");
-
 export const isNode = new Function("try {return this===global;}catch(e){return false;}");
 
 
@@ -25,7 +24,7 @@ function initJSDOM(options) {
         storageQuota: 10000000,
         runScripts: "dangerously",
         resources: "usable"
-    }, options||{})
+    }, options || {})
 
     return import("jsdom").then(({JSDOM}) => {
         const {window} = new JSDOM(`<html>

package/test/web/import.js

@@ -28,6 +28,7 @@ import "../cases/dom/assembler.mjs";
 import "../cases/i18n/translations.mjs";
 import "../cases/i18n/locale.mjs";
 import "../cases/i18n/formatter.mjs";
+import "../cases/i18n/providers/embed.mjs";
 import "../cases/i18n/providers/fetch.mjs";
 import "../cases/i18n/provider.mjs";
 import "../cases/net/webconnect/message.mjs";

package/test/web/test.html

@@ -14,8 +14,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 3.4.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update So 8. Jan 17:17:24 CET 2023</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 3.8.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Do 2. Feb 11:38:37 CET 2023</div>
 </div>
 <div id="mocks"></div>
 <div id="mocha"></div>