CHANGELOG.md

 
+<a name="v3.13.1"></a>
+## [v3.13.1] - 2023-02-18
+### Bug Fixes
+- i18 does not work as first token
+
+
 <a name="v3.13.0"></a>
 ## [v3.13.0] - 2023-02-15
 ### Add Features
@@ -298,6 +304,7 @@
 <a name="1.8.0"></a>
 ## 1.8.0 - 2021-08-15
 
+[v3.13.1]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.13.0...v3.13.1
 [v3.13.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.12.2...v3.13.0
 [v3.12.2]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.12.1...v3.12.2
 [v3.12.1]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.12.0...v3.12.1

Makefile

@@ -85,6 +85,7 @@ include $(MAKEFILE_IMPORT_PATH)target-help.mk
 #include $(MAKEFILE_IMPORT_PATH)target-go-build.mk
 include $(MAKEFILE_IMPORT_PATH)target-node-build.mk
 include $(MAKEFILE_IMPORT_PATH)target-node-test.mk
+include $(MAKEFILE_IMPORT_PATH)target-node-playground.mk
 include $(MAKEFILE_IMPORT_PATH)target-npm-publish.mk
 include $(MAKEFILE_IMPORT_PATH)target-npm.mk
 include $(MAKEFILE_IMPORT_PATH)target-git.mk

application/package.json

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

application/source/data/transformer.mjs

@@ -465,7 +465,6 @@ function transform(value) {
 
         case "i18n":
         case "translation":
-            
             translations = getDocumentTranslations();
             if (!(translations instanceof Translations)) {
                 throw new Error("missing translations");

application/source/dom/updater.mjs

@@ -614,7 +614,7 @@ function runUpdateContent(container, parts, subject) {
         parts.pop();
 
         // Unfortunately, static data is always changed as well, since it is not possible to react to changes here.
-        const query = `[${ATTRIBUTE_UPDATER_REPLACE}^="path:${current}"], [${ATTRIBUTE_UPDATER_REPLACE}^="static:"]`;
+        const query = `[${ATTRIBUTE_UPDATER_REPLACE}^="path:${current}"], [${ATTRIBUTE_UPDATER_REPLACE}^="static:"], [${ATTRIBUTE_UPDATER_REPLACE}^="i18n:"]`;
         const e = container.querySelectorAll(`${query}`);
 
         const iterator = new Set([...e]);
@@ -702,7 +702,7 @@ function runUpdateAttributes(container, parts, subject) {
 
         let iterator = new Set();
 
-        const query = `[${ATTRIBUTE_UPDATER_SELECT_THIS}], [${ATTRIBUTE_UPDATER_ATTRIBUTES}*="path:${current}"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="static:"]`;
+        const query = `[${ATTRIBUTE_UPDATER_SELECT_THIS}], [${ATTRIBUTE_UPDATER_ATTRIBUTES}*="path:${current}"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="static:"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="i18n:"]`;
 
         const e = container.querySelectorAll(query);
 

application/source/types/version.mjs

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

development/makefiles/target-init-platform-part.mk

@@ -74,59 +74,64 @@ define PLATFORM_PARTS_BUILD_PACKAGE_CONTENT
   "author": "schukai GmbH",
   "license": "see LICENSE file",
   "dependencies": {
-    "@schukai/component-form": "^2.0.2",
-    "@schukai/component-notify": "^2.0.0",
-    "@schukai/component-state": "^2.0.1",
-    "@schukai/component-style": "^0.6.1",
-    "@schukai/monster": "^2.0.16"
+    "@schukai/component-form": "^3.3.1",
+    "@schukai/component-notify": "^2.3.0",
+    "@schukai/component-state": "^2.3.0",
+    "@schukai/component-style": "^0.28.0",
+    "@schukai/monster": "^3.12.1"
   },   
   "devDependencies": {
-    "@peculiar/webcrypto": "^1.4.0",
-    "@semantic-release/changelog": "^6.0.1",
+   "@peculiar/webcrypto": "^1.4.1",
+      "@semantic-release/changelog": "^6.0.2",
       "@semantic-release/exec": "^6.0.3",
       "@semantic-release/git": "^10.0.1",
-    "@semantic-release/gitlab": "^9.4.2",
-    "cli-real-favicon": "^0.0.8",
-	"@semantic-release/npm": "^9.0.1",
+      "@semantic-release/gitlab": "^10.1.4",
+      "@semantic-release/npm": "^9.0.2",
+      "@vitejs/plugin-basic-ssl": "^1.0.1",
       "autoprefixer": "^10.4.13",
       "btoa": "^1.2.1",
       "c8": "^7.12.0",
-    "chai": "^4.3.6",
-    "glob": "^8.0.3",
+      "chai": "^4.3.7",
       "chai-dom": "^1.11.0",
-    "clean-jsdoc-theme": "^4.1.6",
+      "clean-jsdoc-theme": "^4.2.6",
+      "cli-real-favicon": "^0.0.8",
       "create-polyfill-service-url": "^2.2.6",
       "crypt": "^0.0.2",
       "cssnano": "^5.1.14",
-    "esbuild": "^0.14.53",
-    "flow-bin": "^0.184.0",
+      "esbuild": "^0.17.8",
+      "flow-bin": "^0.199.1",
       "fs": "^0.0.1-security",
+      "glob": "^8.1.0",
       "graphviz": "^0.0.9",
-    "jsdoc": "^3.6.11",
+      "jsdoc": "^4.0.0",
       "jsdoc-external-example": "github:volker-schukai/jsdoc-external-example",
-    "jsdom": "^19.0.0",
+      "jsdom": "^21.1.0",
       "jsdom-global": "^3.0.2",
-    "mocha": "^10.0.0",
-    "postcss": "^8.4.19",
+      "mocha": "^10.2.0",
+      "npm-check-updates": "^16.7.4",
+      "postcss": "^8.4.21",
       "postcss-color-mod-function": "^3.0.3",
       "postcss-fluid": "^1.4.2",
       "postcss-for": "^2.1.1",
-    "postcss-import": "^15.0.0",
+      "postcss-import": "^15.1.0",
       "postcss-mixins": "^9.0.4",
-    "postcss-nesting": "^10.2.0",
+      "postcss-nesting": "^11.2.0",
       "postcss-normalize": "^10.0.1",
       "postcss-responsive-type": "^1.0.0",
       "postcss-strip-units": "^2.0.1",
       "process": "^0.11.10",
-    "semantic-release": "^19.0.5",
-    "sinon": "^14.0.0",
+      "semantic-release": "^20.1.0",
+      "sinon": "^15.0.1",
+      "svgo": "^3.0.2",
       "url": "^0.11.0",
-    "url-exist": "3.0.0",
-    "util": "^0.12.4",
-    "vite": "^3.2.3",
-    "vite-plugin-banner": "^0.6.1",
-    "vite-plugin-mkcert": "^1.10.1",
-    "vite-plugin-minify": "^1.5.2"    
+      "url-exist": "3.0.1",
+      "util": "^0.12.5",
+      "vite": "^4.1.1",
+      "vite-plugin-banner": "^0.7.0",
+      "vite-plugin-list-directory-contents": "^1.4.5",
+      "vite-plugin-minify": "^1.5.2",
+      "vite-plugin-mkcert": "^1.13.0",
+      "vite-plugin-mpa": "^1.1.4" 
   }
 }
 endef

development/package.json

 {
   "name": "monster",
-  "version": "3.12.2",
+  "version": "3.13.0",
   "description": "monster",
   "repository": {
     "type": "git",
@@ -20,30 +20,52 @@
   "author": "schukai GmbH",
   "license": "see LICENSE file",
   "devDependencies": {
+    "@oss/web-components-build-tools": "^1.2.8",
     "@peculiar/webcrypto": "^1.4.1",
+    "autoprefixer": "^10.4.13",
+    "browserslist": "^4.21.5",
     "btoa": "^1.2.1",
-    "c8": "^7.12.0",
+    "c8": "^7.13.0",
     "chai": "^4.3.7",
     "chai-dom": "^1.11.0",
     "clean-jsdoc-theme": "^4.2.6",
     "create-polyfill-service-url": "^2.2.6",
     "crypt": "^0.0.2",
+    "cssnano": "^5.1.15",
     "esbuild": "^0.17.8",
-    "flow-bin": "^0.199.1",
+    "flow-bin": "^0.200.0",
     "fs": "0.0.1-security",
+    "glob": "^8.1.0",
     "graphviz": "^0.0.9",
-    "jsdoc": "^4.0.0",
+    "jsdoc": "^4.0.1",
     "jsdoc-external-example": "github:volker-schukai/jsdoc-external-example",
     "jsdoc-plantuml": "^1.0.2",
     "jsdom": "^21.1.0",
     "jsdom-global": "^3.0.2",
     "mocha": "^10.2.0",
     "node-plantuml": "^0.9.0",
+    "postcss": "^8.4.21",
+    "postcss-fluid": "^1.4.2",
+    "postcss-for": "^2.1.1",
+    "postcss-import": "^15.1.0",
+    "postcss-load-config": "^4.0.1",
+    "postcss-mixins": "^9.0.4",
+    "postcss-nested": "^6.0.0",
+    "postcss-nesting": "^11.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-responsive-type": "^1.0.0",
+    "postcss-rtlcss": "^4.0.2",
+    "postcss-strip-units": "^2.0.1",
     "rome": "^11.0.0",
     "sinon": "^15.0.1",
     "url": "^0.11.0",
     "url-exist": "3.0.1",
     "util": "^0.12.5",
+    "vite": "^4.1.2",
+    "vite-plugin-banner": "^0.7.0",
+    "vite-plugin-list-directory-contents": "^1.4.5",
+    "vite-plugin-minify": "^1.5.2",
+    "vite-plugin-mkcert": "^1.13.1",
     "ws": "^8.12.1"
   }
 }

development/playground/i18n-updater/translation.json

+{
+  "key1": "value1",
+  "key2": "value2"
+}
\ No newline at end of file

development/playground/i18n-updater/updater.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script type="module" src="updater.js"></script>
+</head>
+<body>
+<h1>Updater</h1>
+
+<div data-monster-replace="i18n:key1"></div>
+<div data-monster-replace="i18n:key2"></div>
+</body>
+</html>

development/playground/i18n-updater/updater.js

+
+
+import { Fetch } from '../../../application/source/i18n/providers/fetch.mjs';
+import { Updater } from '../../../application/source/dom/updater.mjs';
+
+const provider = new Fetch('translation.json', {
+    method: 'GET',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+
+provider
+    .assignToElement()
+    .then(() => {
+        new Updater(document.body, {}).run();
+    })
+    .catch((e) => {
+        console.error(e);
+    });

development/playground/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Vite Dev Server</title>
+    <link rel="icon" href="https://fav.farm/🔥" />
+  </head>
+  <body>
+    <!--
+      This file was Generated for you by the vite-plugin-list-directory-contents plugin.
+      You can edit anything in here. Just leave the DIRECTORY tag where you want the directory listing to go.
+
+      ❤️ @wesbos
+    -->
+    {%DIRECTORY%}
+  </body>
+</html>
\ No newline at end of file

development/playground/vite.config.js

+// vite.config.js
+import {basename, resolve} from 'path'
+import {defineConfig} from 'vite'
+import banner from 'vite-plugin-banner'
+import pkg from '../package.json'
+
+import cssnano from 'cssnano';
+import normalizeCss from 'postcss-normalize';
+import postcssFluid from 'postcss-fluid';
+import importCss from 'postcss-import';
+import postcssNesting from 'postcss-nesting';
+import postcssFor from 'postcss-for';
+import autoprefixer from 'autoprefixer';
+import postcssMixins from 'postcss-mixins';
+import postcssResponsiveType from 'postcss-responsive-type';
+
+import {directoryPlugin} from "vite-plugin-list-directory-contents";
+
+import mkcert from 'vite-plugin-mkcert'
+import {ViteMinifyPlugin} from 'vite-plugin-minify'
+import glob from 'glob'
+
+import {exec} from "child_process";
+
+let files = {};
+
+const source = resolve(__dirname, '')
+const dist = resolve(__dirname, '')
+
+
+glob.sync(source + '/**/*.html', {
+    ignore: [
+        '**/resource/**'
+    ]
+}).forEach((file) => {
+
+    let lang = file.split('/').slice(-2)[0]
+    let key = lang + "/" + basename(file).replace('.html', '')
+
+    files[key] = file;
+
+})
+const scriptDir = resolve(__dirname, '../');
+
+function createStyleSheetPlugin() {
+    return {
+        name: 'buildStart',
+        buildStart() {
+            console.log('buildStart')
+
+            exec('pnpm run -C ' + scriptDir + " build-style", (err, stdout, stderr) => {
+                if (err) {
+                    //some err occurred
+                    console.error(err)
+                }
+            });
+
+        },
+        async transform(raw, id, options) {
+            //console.log(id, options,raw)
+        }
+
+
+    }
+}
+
+
+export default defineConfig({
+    clearScreen: false,
+
+    appType: 'mpa',
+    root: source,
+    base: "/",
+    build: {
+        outDir: dist,
+        emptyOutDir: true,
+        assetsDir: "asset",
+        rollupOptions: {
+            input: files,
+
+            output: {
+                globals: {
+                },
+            },            
+            
+        },
+        comments: false,
+        minify: 'esbuild',
+    },
+    esbuild: {
+        minifyIdentifiers: true,
+        minifySyntax: true,
+        minifyWhitespace: true,
+        target: 'es2015',
+        legalComments: 'none'
+    },
+    server: {
+        port: 8070,
+        host: "localhost.schukai.net",
+        https: true,
+        debug: true
+    },
+    plugins: [
+        banner(
+            `/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: ${pkg.description}\n * author: ${pkg.author}\n * homepage: ${pkg.homepage}\n */`
+        ),
+        mkcert({}),
+        ViteMinifyPlugin(),
+        directoryPlugin({
+            baseDir: __dirname
+        }),
+        createStyleSheetPlugin()
+        
+    ],
+    css: {
+        postcss: {
+            plugins: [
+                importCss(),
+                normalizeCss,
+                postcssMixins,
+                postcssNesting(),
+                postcssFor,
+                postcssFluid({
+                    // Defaults:
+                    min: '320px', // Min media size
+                    max: '1800px', // Max media size
+                    functionName: 'fluid', // function name, may be anything
+                }), // https://github.com/notiv-nt/postcss-fluid
+                autoprefixer,
+                cssnano,
+                postcssResponsiveType
+            ]
+        }
+    }
+
+
+})

development/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.12.2")
+        monsterVersion = new Version("3.13.0")
 
         let m = getMonsterVersion();
 

release.json

-{"version":"3.13.0"}
+{"version":"3.13.1"}