CHANGELOG.md

 
+<a name="v3.23.0"></a>
+## [v3.23.0] - 2023-03-07
+### Add Features
+- template mapping
+
+### Bug Fixes
+- rebuild template insert hack
+
+
 <a name="v3.22.1"></a>
 ## [v3.22.1] - 2023-03-07
 ### Bug Fixes
@@ -389,6 +398,7 @@
 <a name="1.8.0"></a>
 ## 1.8.0 - 2021-08-15
 
+[v3.23.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.22.1...v3.23.0
 [v3.22.1]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.22.0...v3.22.1
 [v3.22.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.21.1...v3.22.0
 [v3.21.1]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.21.0...v3.21.1

application/package.json

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

application/source/dom/constants.mjs

@@ -16,7 +16,6 @@ export {
     ATTRIBUTE_UPDATER_SELECT_THIS,
     ATTRIBUTE_UPDATER_REPLACE,
     ATTRIBUTE_UPDATER_INSERT,
-    ATTRIBUTE_UPDATER_INSERT_TEMPLATE_ID,
     ATTRIBUTE_UPDATER_INSERT_REFERENCE,
     ATTRIBUTE_UPDATER_REMOVE,
     ATTRIBUTE_UPDATER_BIND,
@@ -143,14 +142,6 @@ const ATTRIBUTE_UPDATER_REPLACE = `${ATTRIBUTE_PREFIX}replace`;
  */
 const ATTRIBUTE_UPDATER_INSERT = `${ATTRIBUTE_PREFIX}insert`;
 
-/**
- * @memberOf Monster.DOM
- * @type {string}
- * @license AGPLv3
- * @since 3.21.0
- */
-const ATTRIBUTE_UPDATER_INSERT_TEMPLATE_ID = `${ATTRIBUTE_UPDATER_INSERT}-template-id`;
-
 /**
  * @memberOf Monster.DOM
  * @type {string}

application/source/dom/customelement.mjs

@@ -267,6 +267,7 @@ class CustomElement extends HTMLElement {
      * @property {Boolean} delegatesFocus=true A boolean that, when set to true, specifies behavior that mitigates custom element issues around focusability. When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling.
      * @property {Object} templates Templates
      * @property {string} templates.main=undefined Main template
+     * @property {Object} templateMapping Template mapping
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
      * @since 1.8.0
@@ -279,6 +280,7 @@ class CustomElement extends HTMLElement {
             templates: {
                 main: undefined,
             },
+            templateMapping: {},
         };
     }
 
@@ -398,7 +400,8 @@ class CustomElement extends HTMLElement {
 
         try {
             value = new Pathfinder(this[internalSymbol].getRealSubject()["options"]).getVia(path);
-        } catch (e) {}
+        } catch (e) {
+        }
 
         if (value === undefined) return defaultValue;
         return value;
@@ -468,7 +471,8 @@ class CustomElement extends HTMLElement {
             try {
                 initShadowRoot.call(self);
                 elements = self.shadowRoot.childNodes;
-            } catch (e) {}
+            } catch (e) {
+            }
 
             try {
                 initCSSStylesheet.call(this);
@@ -519,7 +523,8 @@ class CustomElement extends HTMLElement {
      * @return {void}
      * @since 1.7.0
      */
-    disconnectedCallback() {}
+    disconnectedCallback() {
+    }
 
     /**
      * The custom element has been moved into a new document (e.g. someone called document.adoptNode(el)).
@@ -527,7 +532,8 @@ class CustomElement extends HTMLElement {
      * @return {void}
      * @since 1.7.0
      */
-    adoptedCallback() {}
+    adoptedCallback() {
+    }
 
     /**
      * Called when an observed attribute has been added, removed, updated, or replaced. Also called for initial
@@ -816,7 +822,8 @@ function parseOptionsJSON(data) {
     try {
         let dataUrl = parseDataURL(data);
         data = dataUrl.content;
-    } catch (e) {}
+    } catch (e) {
+    }
 
     try {
         obj = JSON.parse(data);
@@ -838,6 +845,11 @@ function initHtmlContent() {
     } catch (e) {
         let html = this.getOption("templates.main", "");
         if (isString(html) && html.length > 0) {
+
+            const mapping = this.getOption("templateMapping", {});
+            if (isObject(mapping)) {
+                html = new Formatter(mapping).format(html);
+            }
             this.innerHTML = html;
         }
     }

application/source/dom/updater.mjs

@@ -17,8 +17,7 @@ import {
     ATTRIBUTE_UPDATER_INSERT_REFERENCE,
     ATTRIBUTE_UPDATER_REMOVE,
     ATTRIBUTE_UPDATER_REPLACE,
-    ATTRIBUTE_UPDATER_SELECT_THIS,
-    ATTRIBUTE_UPDATER_INSERT_TEMPLATE_ID
+    ATTRIBUTE_UPDATER_SELECT_THIS
 } from "../dom/constants.mjs";
 
 import {Base} from "../types/base.mjs";
@@ -514,50 +513,6 @@ function insertElement(change) {
     }
 }
 
-/**
- * @private
- * @param container
- * @param key
- * @param ref
- * @param path
- * @returns {any}
- */
-function internalTemplateLookUp(container, key, ref, path) {
-
-    let templateID = key;
-    let template;
-
-    if (container.hasAttribute(ATTRIBUTE_UPDATER_INSERT_TEMPLATE_ID)) {
-        templateID = container.getAttribute(ATTRIBUTE_UPDATER_INSERT_TEMPLATE_ID);
-        template = findDocumentTemplate(templateID, container);
-        if (template instanceof HTMLTemplateElement) {
-            return template;
-        }
-    }
-
-    if (container.closest(`[${ATTRIBUTE_UPDATER_INSERT_TEMPLATE_ID}]`)) {
-        templateID = container.closest(`[${ATTRIBUTE_UPDATER_INSERT_TEMPLATE_ID}]`).getAttribute(ATTRIBUTE_UPDATER_INSERT_TEMPLATE_ID);
-        template = findDocumentTemplate(templateID, container);
-        if (template instanceof HTMLTemplateElement) {
-            return template;
-        }
-    }
-
-    const rootNode = container.getRootNode();
-    if (rootNode instanceof ShadowRoot) {
-        const host = rootNode?.host;
-        if (host && host.hasAttribute(ATTRIBUTE_UPDATER_INSERT_TEMPLATE_ID)) {
-            templateID = host.getAttribute(ATTRIBUTE_UPDATER_INSERT_TEMPLATE_ID);
-            template = findDocumentTemplate(templateID, container);
-            if (template instanceof HTMLTemplateElement) {
-                return template;
-            }
-        }
-    }
-
-    return findDocumentTemplate(templateID, container);
-}
-
 /**
  *
  * @private
@@ -570,8 +525,7 @@ function internalTemplateLookUp(container, key, ref, path) {
  * @throws {Error} no template was found with the specified key.
  */
 function appendNewDocumentFragment(container, key, ref, path) {
-
-    let template = internalTemplateLookUp(container, key, ref, path);
+    let template = findDocumentTemplate(key, container);
 
     let nodes = template.createDocumentFragment();
     for (const [, node] of Object.entries(nodes.childNodes)) {

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

development/package.json

 {
   "name": "monster",
-  "version": "3.22.0",
+  "version": "3.22.1",
   "description": "monster",
   "repository": {
     "type": "git",

development/playground/dom-insert/index.html

@@ -3,11 +3,11 @@
 <head>
     <script type="module" src="main.mjs"></script>
 </head>
-<body  data-monster-insert-template-id="bla">
+<body>
 <h1>Updater</h1>
 
 
-<template id="bla">
+<template id="current">
     <li data-monster-replace="path:current | index:j"></li>
 </template>
 <div id="test1">

development/playground/vite.config.js

@@ -46,14 +46,14 @@ 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)
-                }
-            });
+            // 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) {

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

release.json

-{"version":"3.22.1"}
+{"version":"3.23.0"}