CHANGELOG.md

 
+<a name="v3.21.0"></a>
+## [v3.21.0] - 2023-03-07
+### Add Features
+- new Template ID for insert
+
+
 <a name="v3.20.0"></a>
 ## [v3.20.0] - 2023-03-01
 ### Add Features
@@ -362,6 +368,7 @@
 <a name="1.8.0"></a>
 ## 1.8.0 - 2021-08-15
 
+[v3.21.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.20.0...v3.21.0
 [v3.20.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.19.0...v3.20.0
 [v3.19.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.18.0...v3.19.0
 [v3.18.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.17.0...v3.18.0

application/package.json

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

application/source/dom/constants.mjs

@@ -16,6 +16,7 @@ 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,
@@ -142,6 +143,14 @@ 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/updater.mjs

@@ -18,7 +18,7 @@ import {
     ATTRIBUTE_UPDATER_REMOVE,
     ATTRIBUTE_UPDATER_REPLACE,
     ATTRIBUTE_UPDATER_SELECT_THIS,
-    customElementUpdaterLinkSymbol,
+    ATTRIBUTE_UPDATER_INSERT_TEMPLATE_ID
 } from "../dom/constants.mjs";
 
 import {Base} from "../types/base.mjs";
@@ -31,7 +31,6 @@ import { trimSpaces } from "../util/trimspaces.mjs";
 import {addToObjectLink} from "./attributes.mjs";
 import {findTargetElementFromEvent} from "./events.mjs";
 import {findDocumentTemplate} from "./template.mjs";
-import { getDocument } from "./util.mjs";
 
 export {Updater, addObjectWithUpdaterToElement};
 
@@ -400,7 +399,6 @@ function removeElement(change) {
 function insertElement(change) {
     const self = this;
     const subject = self[internalSymbol].subject.getRealSubject();
-    const document = getDocument();
 
     let mem = new WeakSet();
     let wd = 0;
@@ -516,6 +514,30 @@ function insertElement(change) {
     }
 }
 
+function findTemplate(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;
+        }
+    }
+
+    return findDocumentTemplate(templateID, container);
+}
+
 /**
  *
  * @private
@@ -528,8 +550,9 @@ function insertElement(change) {
  * @throws {Error} no template was found with the specified key.
  */
 function appendNewDocumentFragment(container, key, ref, path) {
-    let template = findDocumentTemplate(key, container);
 
+    let template = findTemplate(container, key, ref, path);
+console.log(template);
     let nodes = template.createDocumentFragment();
     for (const [, node] of Object.entries(nodes.childNodes)) {
         if (node instanceof HTMLElement) {

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

development/package.json

 {
   "name": "monster",
-  "version": "3.19.0",
+  "version": "3.20.0",
   "description": "monster",
   "repository": {
     "type": "git",

development/playground/dom-insert/index.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script type="module" src="main.mjs"></script>
+</head>
+<body  data-monster-insert-template-id="bla">
+<h1>Updater</h1>
+
+
+<template id="bla">
+    <li data-monster-replace="path:current | index:j"></li>
+</template>
+<div id="test1">
+    <ul data-monster-insert="current path:a.b" >
+    </ul>
+</div>
+
+</body>
+</html>

development/playground/dom-insert/main.mjs

+import {Updater} from '../../../application/source/dom/updater.mjs';
+
+let element = document.getElementById('test1')
+
+
+let d = new Updater(
+    element,
+    {
+        a: {
+            b: [
+                {
+                    i: '0',
+                    j: 'hello'
+                },
+            ]
+        }
+    }
+);
+
+d.run().then(() => {
+    console.log('done');
+});

development/playground/vite.config.js

@@ -18,7 +18,7 @@ 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 {globSync} from 'glob'
 
 import {exec} from "child_process";
 
@@ -28,7 +28,7 @@ const source = resolve(__dirname, '')
 const dist = resolve(__dirname, '')
 
 
-glob.sync(source + '/**/*.html', {
+globSync(source + '/**/*.html', {
     ignore: [
         '**/resource/**'
     ]

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

release.json

-{"version":"3.20.0"}
+{"version":"3.21.0"}