@schukai/monster 3.20.0 → 3.21.1

package/package.json

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

package/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}

package/source/dom/updater.mjs

@@ -5,10 +5,10 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-import { internalSymbol } from "../constants.mjs";
-import { diff } from "../data/diff.mjs";
-import { Pathfinder } from "../data/pathfinder.mjs";
-import { Pipe } from "../data/pipe.mjs";
+import {internalSymbol} from "../constants.mjs";
+import {diff} from "../data/diff.mjs";
+import {Pathfinder} from "../data/pathfinder.mjs";
+import {Pipe} from "../data/pipe.mjs";
 import {
     ATTRIBUTE_ERRORMESSAGE,
     ATTRIBUTE_UPDATER_ATTRIBUTES,
@@ -18,22 +18,21 @@ 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";
-import { isArray, isInstance, isIterable } from "../types/is.mjs";
-import { Observer } from "../types/observer.mjs";
-import { ProxyObserver } from "../types/proxyobserver.mjs";
-import { validateArray, validateInstance } from "../types/validate.mjs";
-import { clone } from "../util/clone.mjs";
-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";
+import {Base} from "../types/base.mjs";
+import {isArray, isInstance, isIterable} from "../types/is.mjs";
+import {Observer} from "../types/observer.mjs";
+import {ProxyObserver} from "../types/proxyobserver.mjs";
+import {validateArray, validateInstance} from "../types/validate.mjs";
+import {clone} from "../util/clone.mjs";
+import {trimSpaces} from "../util/trimspaces.mjs";
+import {addToObjectLink} from "./attributes.mjs";
+import {findTargetElementFromEvent} from "./events.mjs";
+import {findDocumentTemplate} from "./template.mjs";
 
-export { Updater, addObjectWithUpdaterToElement };
+export {Updater, addObjectWithUpdaterToElement};
 
 /**
  * The updater class connects an object with the dom. In this way, structures and contents in the DOM can be programmatically adapted via attributes.
@@ -174,7 +173,7 @@ class Updater extends Base {
     run() {
         // the key __init__has no further meaning and is only
         // used to create the diff for empty objects.
-        this[internalSymbol].last = { __init__: true };
+        this[internalSymbol].last = {__init__: true};
         return this[internalSymbol].subject.notifyObservers();
     }
 
@@ -323,7 +322,7 @@ function retrieveAndSetValue(element) {
 
                 let options = element?.selectedOptions;
                 if (options === undefined) options = element.querySelectorAll(":scope option:checked");
-                value = Array.from(options).map(({ value }) => value);
+                value = Array.from(options).map(({value}) => value);
 
                 break;
         }
@@ -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,38 @@ 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;
+        }
+    }
+
+    return findDocumentTemplate(templateID, container);
+}
+
 /**
  *
  * @private
@@ -528,7 +558,8 @@ 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 = internalTemplateLookUp(container, key, ref, path);
 
     let nodes = template.createDocumentFragment();
     for (const [, node] of Object.entries(nodes.childNodes)) {

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

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