feat: new Template ID for insert

f978a389 · Volker Schukai · 69216589 · f978a389 · f978a389 · f978a389
Verified Commit f978a389 authored 2 years ago by Volker Schukai
--- a/application/source/dom/constants.mjs
+++ b/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}

--- a/application/source/dom/updater.mjs
+++ b/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) {

--- a/development/playground/dom-insert/index.html
+++ b/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>
--- a/development/playground/dom-insert/main.mjs
+++ b/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');
+});
--- a/development/playground/vite.config.js
+++ b/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/**'
    ]