@cocreate/render 1.50.0 → 1.53.0

package/CONTRIBUTING.md

@@ -13,7 +13,7 @@ Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-render) an
 ```
 git render https://github.com/contributor/CoCreate-render.git
 cd CoCreate-render
-git remote add upstream https://github.com/CoCreate-app/CoCreate-render.git
+git remote add upstream https://gitlab.com/cocreatejs/CoCreate-render.git
 ```
 
 ## Create a Topic Branch

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.50.0",
+  "version": "1.53.0",
   "description": "A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "render",
@@ -22,7 +22,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/CoCreate-app/CoCreate-render.git"
+    "url": "git+https://gitlab.com/cocreatejs/CoCreate-render.git"
   },
   "author": "CoCreate LLC",
   "license": "AGPL-3.0",
@@ -36,14 +36,14 @@
   },
   "main": "./src/index.js",
   "dependencies": {
-    "@cocreate/actions": "^1.23.0",
-    "@cocreate/api": "^1.27.0",
-    "@cocreate/element-prototype": "^1.34.0",
-    "@cocreate/observer": "^1.21.0",
-    "@cocreate/utils": "^1.50.3"
+    "@cocreate/actions": "^1.24.0",
+    "@cocreate/api": "^1.31.0",
+    "@cocreate/element-prototype": "^1.35.0",
+    "@cocreate/observer": "^1.23.0",
+    "@cocreate/utils": "^1.54.0"
   },
   "devDependencies": {
-    "@cocreate/webpack": "^1.7.0"
+    "@cocreate/webpack": "^1.9.0"
   },
   "allowScripts": {
     "@cocreate/actions@1.21.4": true,

package/src/index.js

@@ -34,9 +34,51 @@ import {
 import "@cocreate/element-prototype";
 import "./index.css";
 
-const sources = new Map();
-const renderedNodes = new Map();
-const elementSelector = "[render-query]";
+const sources = new Map();
+const renderedNodes = new Map();
+const elementSelector = "[render-query]";
+
+function getRenderContext(renderedNode, key) {
+    const keys = renderedNode?.keys;
+    if (!keys || Array.isArray(keys) || typeof keys !== "object") return;
+
+    const contextKey = key || Object.keys(keys).at(-1);
+    if (!contextKey || !keys[contextKey]) return;
+
+    return {
+        key: contextKey,
+        keyPath: keys[contextKey].path,
+        renderData: keys[contextKey].data,
+        renderAs: keys[contextKey].renderAs
+    };
+}
+
+function setRenderContext(renderedNode, context = {}) {
+    if (!renderedNode.keys || Array.isArray(renderedNode.keys))
+        renderedNode.keys = {};
+
+    const contextKey =
+        context.key || Object.keys(renderedNode.keys).at(-1) || "$default";
+    const renderContext = renderedNode.keys[contextKey] || {};
+    if (context.keyPath !== undefined)
+        renderContext.path = context.keyPath;
+    if (context.renderData !== undefined)
+        renderContext.data = context.renderData;
+    if (context.renderAs !== undefined)
+        renderContext.renderAs = context.renderAs;
+
+    // Reinsert the context so the last key always represents the active
+    // render scope without requiring top-level key metadata.
+    delete renderedNode.keys[contextKey];
+    renderedNode.keys[contextKey] = renderContext;
+
+    return {
+        key: contextKey,
+        keyPath: renderContext.path,
+        renderData: renderContext.data,
+        renderAs: renderContext.renderAs
+    };
+}
 
 /**
  * Initializes elements based on specified rendering attributes. If a specific element is provided, it initializes that element.
@@ -82,7 +124,7 @@ function init(element) {
             } catch (error) {
                 console.error("Failed to parse render-data:", error);
             }
-        }   
+        }
     }
 }
 
@@ -163,13 +205,19 @@ async function render({
         }
     }
 
-    if (data.$filter) {
-        index = index || data.$filter.startingIndex || data.$filter.index;
-        update = update || data.$filter.update;
-        remove = remove || data.$filter.remove;
+    if (data.filter) {
+        update ??= data.filter.update;
+        remove ??= data.filter.remove;
+
+        const isMutation = remove || update || data.filter.create;
+        if (index == null) {
+            index = isMutation
+                ? data.filter.index
+                : data.filter.startingIndex ?? data.filter.index;
+        }
     }
 
-    let isMutation = remove || update || (data.$filter && data.$filter.create);
+    let isMutation = remove || update || (data.filter && data.filter.create);
 
     let sourceData = sources.get(source);
     if (!sourceData) {
@@ -232,12 +280,15 @@ async function render({
 
         let clone;
         if (remove) {
-            for (let j = 0; j < data[key].length; j++) {
+            const removedItems = data[key];
+            if (!Array.isArray(removedItems) || !clones) continue;
+
+            for (let j = 0; j < removedItems.length; j++) {
                 let cloneKey;
                 if (key === "object") {
-                    cloneKey = data[key][j]._id;
+                    cloneKey = removedItems[j]._id;
                 } else {
-                    cloneKey = data[key][j].name;
+                    cloneKey = removedItems[j].name;
                 }
 
                 clone = clones.get(cloneKey);
@@ -251,7 +302,7 @@ async function render({
             (key && (Array.isArray(data[key]) || renderType)) ||
             Array.isArray(data)
         ) {
-            if (update) {
+            if (update && renderType !== "object") {
                 for (let j = 0; j < data[key].length; j++) {
                     if (key === "object") {
                         clone = clones.get(data[key][j]._id);
@@ -259,7 +310,8 @@ async function render({
                         clone = clones.get(data[key][j].name);
                     }
 
-                    if (!currentIndex) currentIndex = data.$filter.currentIndex;
+                    if (currentIndex == null)
+                        currentIndex = data.filter.currentIndex;
 
                     if (!clone) continue;
 
@@ -270,7 +322,7 @@ async function render({
             } else {
                 // TODO: if $auto here every subsequent clone will have same value, not replacing here will apply unique value to each clone
                 if (key === "$auto")
-                    key = key.replace(/\$auto/g,  uuid(6));
+                    key = key.replace(/\$auto/g, uuid(6));
 
                 if (key) element[i].setAttribute("render", key);
 
@@ -289,15 +341,25 @@ async function render({
 }
 
 async function renderTemplate(template, data, key, index, keyPath) {
-    if (!(template instanceof HTMLElement)) {
-        console.log("template not an element but should be")
+    if (template && template.nodeType !== 1) {
+        template = template.ownerElement || template.parentElement;
     }
-    let templateData = renderedNodes.get(template);
-    if (!templateData) {
-        templateData = {element: template, clones: new Map() };
-        renderedNodes.set(template, templateData);
-    } 
-    
+    if (!template) return;
+    if (template instanceof HTMLTemplateElement && !template.content.firstElementChild) return;
+    let templateData = renderedNodes.get(template);
+    if (!templateData) {
+        templateData = {
+            element: template,
+            clones: new Map(),
+            isTemplate: true
+        };
+        renderedNodes.set(template, templateData);
+    }
+
+    templateData.element = template;
+    if (!templateData.clones) templateData.clones = new Map();
+    templateData.isTemplate = true;
+
     if (!templateData.parent && !templateData.source) {
         let parentRender = template.parentElement.closest("[render]")
         if (parentRender || template.source)
@@ -306,65 +368,60 @@ async function renderTemplate(template, data, key, index, keyPath) {
             console.log("template parent missing is there no parent or is this an error? and source is", templateData.source)
     }
 
-    if(!templateData.source && templateData.parent && templateData.parent.source){
+    if (!templateData.source && templateData.parent && templateData.parent.source) {
         templateData.source = templateData.parent.source
     }
 
-    if (!templateData.keyPath) {
-        if (keyPath) {
-            templateData.keyPath = keyPath;
-        } else if (templateData.parent && templateData.parent.keyPath) {
-            templateData.keyPath = templateData.parent.keyPath;
-        } else if (key) {
-            templateData.keyPath = key;
-        }
-    }
-
-    let renderData;
+    let renderData;
     if (key) {
         renderData = getRenderValue(templateData.element, data, key);
-    } 
-    
-    if (!renderData) {
-        renderData = data;
     }
 
-    templateData.renderData = renderData;
-    let el = templateData.element;
+    if (renderData === undefined || renderData === null) {
+        renderData = key ? [] : data;
+    }
+
+    let el = templateData.element;
     if (el.nodeType !== 1) {
-            el = templateData.parent.element;
+        el = templateData.parent.element;
     }
 
-    let renderAs = templateData.renderAs
-    if (!templateData.renderAs) {
-        renderAs =
-            el.getAttribute("render-as") ||
-            el.getAttribute("render") ||
-            key;
-        templateData.renderAs = renderAs;
-    }
+    let renderAs =
+        el.getAttribute("render-as") ||
+        el.getAttribute("render") ||
+        getRenderContext(templateData, key)?.renderAs ||
+        key;
+    const parentContext = getRenderContext(templateData.parent);
+    const resolvedKeyPath =
+        keyPath || key || parentContext?.keyPath;
+    const templateContext = setRenderContext(templateData, {
+        key,
+        keyPath: resolvedKeyPath,
+        renderData,
+        renderAs
+    });
 
     let renderType;
     if (templateData.source && templateData.source.element)
         renderType = templateData.source.element.getAttribute("render-type");
 
-    let renderReverse;
-    if (templateData.source && templateData.source.element) {
-        renderReverse =
-            templateData.source.element.getAttribute("render-reverse");
-        if (renderReverse === null)
-            renderReverse = el.getAttribute("render-reverse");
-    }
+    const renderReverse =
+        templateData.source?.element?.getAttribute("render-reverse") ??
+        el.getAttribute("render-reverse");
 
     let exclude = el.getAttribute("render-exclude") || "";
     if (exclude) {
         exclude = exclude.replace(/ /g, "").split(",");
     }
+    const include = el.getAttribute("render-include");
+    const includePattern = include ? new RegExp(include) : null;
     let reference = el.getAttribute("render-reference");
 
-    let isInsert = data.$filter && (data.$filter.create || data.$filter.update);
+    const isLoadMore = data.filter?.loadMore && !data.filter?.overwrite;
+    const appendIndex = templateData.clones.size;
+    let isInsert = data.filter && (data.filter.create || data.filter.update);
     if (renderType !== "object") {
-        if ((!isInsert && !index) || data.$filter.overwrite) {
+        if ((!isInsert && !isLoadMore && !index) || data.filter?.overwrite) {
             if (!templateData.clones) {
                 return
                 if (templateData.template) {
@@ -379,7 +436,7 @@ async function renderTemplate(template, data, key, index, keyPath) {
                 element.remove();
                 templateData.clones.delete(key);
             }
-        } 
+        }
     }
 
     if ((key && !Array.isArray(renderData)) || renderType === "object") {
@@ -387,19 +444,35 @@ async function renderTemplate(template, data, key, index, keyPath) {
             renderData = renderData[0];
 
         const keys = Object.keys(renderData);
+        if (renderType === "object" && data.method?.endsWith(".read")) {
+            const present = new Set(keys);
+            for (const [id, element] of templateData.clones) {
+                if (present.has(element.getAttribute("renderedKey"))) continue;
+                renderedNodes.delete(element);
+                element.remove();
+                templateData.clones.delete(id);
+            }
+        }
+        const fieldClones = new Map(
+            Array.from(templateData.clones.values(), (element) => [
+                element.getAttribute("renderedKey"),
+                element
+            ])
+        );
         for (let i = 0; i < keys.length; i++) {
-            let clone = templateData.clones.get(keys[i]);
+            let clone = fieldClones.get(keys[i]);
             clone = renderedNodes.get(clone);
 
             if (
                 exclude.includes(keys[i]) ||
+                (includePattern && !includePattern.test(keys[i])) ||
                 (reference === "false" &&
                     ["$storage", "$database", "$array"].includes(key))
             ) {
                 if (clone) {
                     renderedNodes.delete(clone.element);
                     clone.element.remove();
-                    templateData.clones.delete(keys[i]);
+                    templateData.clones.delete(clone.element.getAttribute("eid"));
                 }
                 continue;
             }
@@ -410,7 +483,11 @@ async function renderTemplate(template, data, key, index, keyPath) {
             if (Array.isArray(value)) type = "array";
             else if (typeof value == "object") type = "object";
 
-            let Data = { [renderAs]: { key: keys[i], value, type } };
+            // Nested object templates still need fields from the source record.
+            let Data = {
+                ...data,
+                [renderAs]: { key: keys[i], value, type }
+            };
 
             if (!clone) {
                 clone = cloneTemplate(templateData);
@@ -424,13 +501,19 @@ async function renderTemplate(template, data, key, index, keyPath) {
             let renderedKey = key.split(".");
             renderedKey = renderedKey[renderedKey.length - 1];
 
-            clone.key = keys[i];
-            clone.keyPath = templateData.keyPath + "." + renderedKey;
-            clone.parentKey = renderedKey;
-            clone.renderKey = key;
+            const cloneKeyPath = `${templateContext.keyPath}.${renderedKey}`;
+            clone.parentKey = renderedKey;
+            clone.renderKey = key;
+            setRenderContext(clone, {
+                key: keys[i],
+                keyPath: cloneKeyPath,
+                renderData: Data,
+                renderAs
+            });
             clone.element.setAttribute("renderedKey", keys[i]);
             await renderValues(clone.element, Data, keys[i], renderAs);
             insertElement(templateData, clone.element, index);
+            fieldClones.set(keys[i], clone.element);
         }
     } else {
         if (!key && !Array.isArray(renderData)) {
@@ -441,7 +524,12 @@ async function renderTemplate(template, data, key, index, keyPath) {
 
         if (!renderData) {
             let clone = cloneTemplate(templateData);
-            clone.keyPath = templateData.keyPath;
+            setRenderContext(clone, {
+                key,
+                keyPath: templateContext.keyPath,
+                renderData: data,
+                renderAs
+            });
             await renderValues(clone.element, data, key, renderAs);
             insertElement(templateData, clone.element, index);
         } else {
@@ -453,7 +541,7 @@ async function renderTemplate(template, data, key, index, keyPath) {
                 let test = clone.element.getAttribute("render-as");
                 if (test) renderAs = test;
 
-                clone.keyPath = templateData.keyPath || "" + `[${i}]`;
+                const cloneKeyPath = `${templateContext.keyPath || ""}[${i}]`;
 
                 let object;
                 if (
@@ -480,11 +568,22 @@ async function renderTemplate(template, data, key, index, keyPath) {
                         object = dotNotationToObject(object);
                 } else object = object;
 
-                let index;
-                if (key !== "data") index = i;
+                let insertIndex;
+                if (key !== "data") {
+                    insertIndex = isLoadMore
+                        ? appendIndex + i
+                        : data.filter?.create && index != null
+                            ? index + i
+                            : i;
+                }
 
-                clone.renderData = object
-                clone.index = index
+                setRenderContext(clone, {
+                    key,
+                    keyPath: cloneKeyPath,
+                    renderData: object,
+                    renderAs
+                });
+                clone.index = insertIndex
                 await renderValues(
                     clone.element,
                     object,
@@ -492,12 +591,12 @@ async function renderTemplate(template, data, key, index, keyPath) {
                     renderAs,
                     null,
                     null,
-                    index
+                    insertIndex
                 );
                 insertElement(
                     templateData,
                     clone.element,
-                    index,
+                    insertIndex,
                     "",
                     data,
                     renderReverse
@@ -507,17 +606,17 @@ async function renderTemplate(template, data, key, index, keyPath) {
     }
 }
 
-function cloneTemplate(template) {
+function cloneTemplate(template) {
     let clone = template.element.cloneNode(true);
     let cloneTagName = clone.tagName;
 
     if (clone.tagName == "TEMPLATE") {
-        clone = template.element.content.firstElementChild;
+        clone = clone.content.firstElementChild;
         for (let attribute of template.element.attributes) {
             clone.setAttribute(attribute.name, attribute.value || "");
         }
     } else {
-        clone.classList.remove("template");
+        clone.classList?.remove("template");
         clone.removeAttribute("template");
     }
 
@@ -525,7 +624,7 @@ function cloneTemplate(template) {
 
     let renderAs = clone.getAttribute("render-as");
     if (renderAs === "$auto") {
-        renderAs =  uuid(6);
+        renderAs = uuid(6);
         clone = clone.outerHTML.replace(/\$auto/g, renderAs);
     }
 
@@ -542,10 +641,27 @@ function cloneTemplate(template) {
 
     let renderedNode = { template, element: clone };
     renderedNodes.set(clone, renderedNode);
-    return renderedNode;
-}
-
-function insertElement(
+    return renderedNode;
+}
+
+function getCloneIdentity(data, renderAs) {
+    const value = renderAs ? getValueFromObject(data, renderAs) : data;
+    if (!value || typeof value !== "object") return;
+
+    for (const key of ["_id", "id", "object", "name", "key"]) {
+        const identity = value[key];
+        if (
+            (typeof identity === "string" || typeof identity === "number") &&
+            identity !== "" &&
+            identity !== "{}" &&
+            identity !== "[]"
+        ) {
+            return String(identity);
+        }
+    }
+}
+
+function insertElement(
     template,
     element,
     index,
@@ -555,7 +671,7 @@ function insertElement(
 ) {
     let eid = element.getAttribute("eid");
     if (!eid) {
-        eid =  uuid(6);
+        eid = uuid(6);
         element.setAttribute("eid", eid);
     }
 
@@ -574,11 +690,11 @@ function insertElement(
             item = clones.splice(currentIndex, 1)[0];
         }
 
-        if (data && data.$filter && data.$filter.startingIndex)
-            index += data.$filter.startingIndex;
+        if (data && data.filter && data.filter.startingIndex && !data.filter.loadMore)
+            index += data.filter.startingIndex;
         clones.splice(index, 0, item); // Insert item into clones at the specified index
 
-        if (renderReverse !== null && renderReverse !== "false" ) {
+        if (renderReverse != null && renderReverse !== false && renderReverse !== "false") {
             // Chat-specific logic: reverse rendering but still inserting based on sorting
             if (clones[index + 1] && clones[index + 1][1] !== element) {
                 clones[index + 1][1].insertAdjacentElement("afterend", element);
@@ -612,50 +728,47 @@ async function renderValues(node, data, key, renderAs, keyPath, parent, index) {
     if (!data) return;
 
     let renderedNode = renderedNodes.get(node);
-    if (!renderedNode) renderedNode = { key, renderAs };
-
-    if (!renderedNode.key) renderedNode.key = key;
-    else if (!key) key = renderedNode.key;
-
-    if (!renderedNode.renderAs) renderedNode.renderAs = renderAs;
-    else if (!renderAs) renderAs = renderedNode.renderAs;
-
-    if (keyPath) renderedNode.keyPath = keyPath;
-    else if (renderedNode.keyPath) keyPath = renderedNode.keyPath;
+    if (!renderedNode) {
+        renderedNode = { element: node };
+        renderedNodes.set(node, renderedNode);
+    }
+
+    const previousContext = getRenderContext(renderedNode, key);
+    if (!key) key = previousContext?.key;
+    if (!renderAs) renderAs = previousContext?.renderAs;
+    if (!keyPath) keyPath = previousContext?.keyPath;
+    setRenderContext(renderedNode, {
+        key,
+        keyPath,
+        renderData: data,
+        renderAs
+    });
 
     if (parent) renderedNode.parent = parent;
 
-    if (node.nodeType == 1) {
-        if (node.hasAttribute("render-clone")) {
-            parent = renderedNode;
-
-            for (let eid of ["_id", "name", "key"]) {
-                if (renderAs) eid = data[renderAs][eid];
-                else eid = data[eid];
-
-                if (!eid) continue;
-
-                let oldEid = renderedNode.eid;
-                let temp = renderedNode.template;
-                if (!temp) {
-                    console.log("temp could not be found");
-                } else if (!temp.clones) {
-                    if (temp.template) temp = temp.template;
-                    else console.log(temp);
-
-                    if (oldEid && oldEid !== eid) temp.clones.delete(oldEid);
-
+    if (node.nodeType == 1) {
+        if (node.hasAttribute("render-clone")) {
+            parent = renderedNode;
+
+            const eid = getCloneIdentity(data, renderAs);
+            if (eid) {
+                let oldEid = renderedNode.eid;
+                let temp = renderedNode.template;
+                while (temp && !temp.clones)
+                    temp = temp.template || temp.parent;
+
+                if (temp?.clones && oldEid && oldEid !== eid) {
+                    temp.clones.delete(oldEid);
                     temp.clones.set(eid, node);
                 }
 
                 renderedNode.eid = eid;
+
+                node.setAttribute("eid", eid);
+            }
+        }
 
-                node.setAttribute("eid", eid);
-                break;
-            }
-        }
-
-        for (let attr of node.attributes) {
+        for (let attr of Array.from(node.attributes)) {
             let name = attr.name;
             let value = attr.value;
 
@@ -667,6 +780,7 @@ async function renderValues(node, data, key, renderAs, keyPath, parent, index) {
                     renderAs,
                     parent: renderedNode
                 };
+                renderedNodes.set(attr, renderedAttribute);
             }
 
             let namePlaceholder = renderedAttribute.placeholder.name || name;
@@ -688,15 +802,13 @@ async function renderValues(node, data, key, renderAs, keyPath, parent, index) {
                 renderedAttribute,
                 index
             );
-            if (namePlaceholder.includes("{{") && name) {
-                const attributes = name.match(/([^\s]+="[^"]*"|[^\s]+)/g) || [];
-                attributes.forEach((attr) => {
-                    let [attributeName, attributeValue] = attr.split("=");
-                    attributeValue = attributeValue
-                        ? attributeValue.replace(/"/g, "")
-                        : "";
-                    node.setAttribute(attributeName, attributeValue);
-                });
+            if (namePlaceholder.includes("{{") && name && !name.includes("{{")) {
+                if (name !== attr.name) {
+                    node.removeAttribute(attr.name);
+                    renderedNodes.delete(attr);
+                }
+                node.setAttribute(name, value ?? "");
+                renderedNodes.set(node.getAttributeNode(name), renderedAttribute);
             } else if (name === undefined || name === null || name === "") {
                 renderedNodes.delete(attr);
                 node.removeAttribute(attr.name);
@@ -732,11 +844,22 @@ async function renderValues(node, data, key, renderAs, keyPath, parent, index) {
                 return;
             }
         }
+
+        // A nested render-query owns its template and descendants. Parent
+        // rendering may resolve this controller's attributes, but its own
+        // render cycle must populate its target.
+        if (
+            node.hasAttribute("render-query") &&
+            !node.hasAttribute("render-clone")
+        ) {
+            return;
+        }
+
         if (node.hasAttribute("render") && !node.hasAttribute("render-clone")) {
             let renderKey = node.getAttribute("render") || key
-            renderTemplate(node, data, renderKey);
-        } else if (node.childNodes.length > 0) {
-            for (let childNode of node.childNodes) {
+            await renderTemplate(node, data, renderKey);
+        } else if (node.childNodes.length > 0) {
+            for (let childNode of Array.from(node.childNodes)) {
                 await renderValues(
                     childNode,
                     data,
@@ -792,10 +915,12 @@ async function renderValues(node, data, key, renderAs, keyPath, parent, index) {
                         };
                     }
                     renderedParent.text = text;
-                    for (let newChild of newNode.childNodes) {
-                        renderedNode.element = newChild;
-                        renderedNodes.set(newChild, renderedNode);
-                    }
+                    for (let newChild of newNode.childNodes) {
+                        renderedNodes.set(newChild, {
+                            ...renderedNode,
+                            element: newChild
+                        });
+                    }
                     renderedNodes.delete(node);
                     node.replaceWith(...newNode.childNodes);
                 }
@@ -856,7 +981,7 @@ async function renderValue(
         match = output.match(regex);
         if (match) {
             let value;
-            let placeholderContent = match[1].trim(); 
+            let placeholderContent = match[1].trim();
 
             try {
                 if (placeholderContent === "index" && index >= 0) {
@@ -894,7 +1019,7 @@ async function renderValue(
                             });
                         }
                     }
-                    
+
                     for (let r of replacements) {
                         preProcessed = preProcessed.replace(r.original, r.replacement);
                     }
@@ -912,7 +1037,8 @@ async function renderValue(
                         node,
                         data,
                         preProcessed,
-                        renderAs
+                        renderAs,
+                        index
                     );
                 }
             } catch (error) {
@@ -948,7 +1074,7 @@ async function renderValue(
     return output;
 }
 
-function getRenderValue(node, data, key, renderAs) {
+function getRenderValue(node, data, key, renderAs, renderIndex) {
     let operator;
     if (key.startsWith("$")) {
         let keys = key.split(".");
@@ -958,20 +1084,37 @@ function getRenderValue(node, data, key, renderAs) {
         }
     }
 
-    let value = getValueFromObject(data, key);
-
-    if (!value && value !== "" && node) {
-        let parentTemplate = node;
-        do {
-            let parentNode = renderedNodes.get(parentTemplate);
-            if (parentNode) {
-                if (!value && (parentNode.parent || parentNode.template)) {
-                    let Data,
-                        eid,
-                        parent = parentNode.parent || parentNode.template;
-                    do {
-                        if (key.includes("keyPath")) {
-                            value = parentNode.keyPath || parent.keyPath;
+    // Field reads can arrive wrapped under a literal dotted or bracketed key.
+    const hasLiteralKey = Object.prototype.hasOwnProperty.call(data, key);
+    const rootKey = key.split(/[.\[]/, 1)[0];
+    const ownsRootScope =
+        hasLiteralKey || Object.prototype.hasOwnProperty.call(data, rootKey);
+    let value = hasLiteralKey
+        ? data[key]
+        : getValueFromObject(data, key);
+
+    // Once the current scope owns a root (for example `object`), a missing
+    // descendant must remain missing instead of leaking in from another
+    // clone's ancestor/source data.
+    if ((value === undefined || value === null) && node && !ownsRootScope) {
+        let parentTemplate = node;
+        do {
+            let parentNode = renderedNodes.get(parentTemplate);
+            if (parentNode) {
+                if (
+                    (value === undefined || value === null) &&
+                    (parentNode.parent || parentNode.template)
+                ) {
+                    let Data,
+                        eid,
+                        parent = parentNode.parent || parentNode.template;
+                    do {
+                        const parentNodeContext = getRenderContext(parentNode);
+                        const parentContext = getRenderContext(parent);
+                        if (key.includes("keyPath")) {
+                            value =
+                                parentNodeContext?.keyPath ||
+                                parentContext?.keyPath;
                         } else if (key.includes("parentKey")) {
                             value =
                                 parentNode.parentKey ||
@@ -982,7 +1125,7 @@ function getRenderValue(node, data, key, renderAs) {
                         } else if (key === "object" || key === "_id")
                             value = ObjectId().toString();
                         else if (key === "uuid") {
-                            value =  uuid(6);
+                            value = uuid(6);
                         } else if (parent.source) {
                             Data = parent.source.data;
                         } else if (parent.parent) {
@@ -994,28 +1137,36 @@ function getRenderValue(node, data, key, renderAs) {
                         }
 
                         if (!Data && parent && parent.eid) eid = parent.eid;
-                    } while (!value && parent && !Data);
-
-                    if (!value && Data) {
-                        value = getValueFromObject(Data, key);
-                    }
-                    if (!value && key.includes(".")) {
+                    } while (
+                        (value === undefined || value === null) &&
+                        parent &&
+                        !Data
+                    );
+
+                    if ((value === undefined || value === null) && Data) {
+                        value = getValueFromObject(Data, key);
+                    }
+                    if (
+                        (value === undefined || value === null) &&
+                        key.includes(".")
+                    ) {
                         let renderedData = getValueFromObject(
                             Data,
                             key.split(".")[0]
                         );
-                        if (renderedData) {
-                            let index;
+                        if (renderedData !== undefined && renderedData !== null) {
+                            let index = renderIndex;
                             if (
-                                !parent.clones.size ||
-                                parent.clones.size === 1
+                                index === undefined &&
+                                (!parent.clones.size ||
+                                    parent.clones.size === 1)
                             ) {
                                 index = 0;
-                            } else if (eid) {
+                            } else if (index === undefined && eid) {
                                 index = Array.from(
                                     parent.clones.keys()
                                 ).indexOf(eid);
-                            } else console.log("eid not found");
+                            }
 
                             if (index >= 0) {
                                 Data = {
@@ -1028,13 +1179,16 @@ function getRenderValue(node, data, key, renderAs) {
                 }
             }
 
-            if (!value && parentTemplate.parentElement) {
+            if (
+                (value === undefined || value === null) &&
+                parentTemplate.parentElement
+            ) {
                 parentTemplate =
                     parentTemplate.parentElement.closest("[render]");
             } else {
                 parentTemplate = undefined;
             }
-        } while (!value && parentTemplate);
+        } while ((value === undefined || value === null) && parentTemplate);
     }
 
     if (operator) {
@@ -1150,12 +1304,13 @@ Observer.init({
         let parentElement = mutation.target.parentElement.closest("[render]");
         if (!parentElement) return;
 
-        let renderedNode = renderedNodes.get(parentElement);
-        let data;
-        if (renderedNode) {
-            if (renderedNode.renderData) {
-                data = renderedNode.renderData;
-            } 
+        let renderedNode = renderedNodes.get(parentElement);
+        let data;
+        if (renderedNode) {
+            const renderContext = getRenderContext(renderedNode);
+            if (renderContext?.renderData) {
+                data = renderContext.renderData;
+            }
         } else {
             let sourceElement = mutation.target.parentElement.closest("[render-query]")
             let sourceData = sources.get(sourceElement);
@@ -1184,4 +1339,4 @@ Observer.init({
 
 init();
 
-export { render, renderValue, sources, renderedNodes };
+export { render, renderValue, sources, renderedNodes };

package/test/render-order.test.cjs

@@ -0,0 +1,90 @@
+const assert = require('node:assert/strict');
+const { readFileSync } = require('node:fs');
+const { join } = require('node:path');
+const test = require('node:test');
+const vm = require('node:vm');
+
+const source = readFileSync(join(__dirname, '../src/index.js'), 'utf8');
+const renderTemplate = source.slice(source.indexOf('async function renderTemplate('), source.indexOf('function cloneTemplate('));
+const insertElement = source.slice(source.indexOf('function insertElement('), source.indexOf('async function renderValues('));
+const regions = ['us-east-1', 'us-east-2', 'us-west-1', 'me-south-1'];
+
+async function renderOrder({ templateReverse = null, sourceReverse, withSource = false } = {}) {
+    const siblings = [];
+    let nextId = 0;
+
+    class Element {
+        constructor(reverse = null) {
+            this.nodeType = 1;
+            this.attributes = new Map();
+            if (reverse !== null) this.attributes.set('render-reverse', reverse);
+        }
+        getAttribute(name) { return this.attributes.get(name) ?? null; }
+        setAttribute(name, value) { this.attributes.set(name, value); }
+        insertAdjacentElement(position, element) {
+            assert.ok(['beforebegin', 'afterend'].includes(position));
+            const previous = siblings.indexOf(element);
+            if (previous >= 0) siblings.splice(previous, 1);
+            siblings.splice(siblings.indexOf(this) + (position === 'afterend' ? 1 : 0), 0, element);
+        }
+    }
+
+    const template = new Element(templateReverse);
+    template.setAttribute('render-as', 'region');
+    siblings.push(template);
+    const templateData = { element: template, clones: new Map(), parent: {} };
+    if (withSource) templateData.source = { element: new Element(sourceReverse) };
+
+    const context = vm.createContext({
+        template,
+        data: { regions: regions.map(region => ({ region })) },
+        renderedNodes: new Map([[template, templateData]]),
+        HTMLTemplateElement: class {},
+        uuid: () => String(++nextId),
+        getRenderValue: (element, data, key) => data[key],
+        getRenderContext: () => undefined,
+        setRenderContext: (node, context) => context,
+        cloneTemplate: () => ({ element: new Element() }),
+        // Value interpolation is independent of list insertion and reverse settings.
+        renderValues: async (element, data) => { element.region = data.region.region; }
+    });
+    vm.runInContext(`${renderTemplate}\n${insertElement}\nglobalThis.done = renderTemplate(template, data, 'regions');`, context);
+    await context.done;
+    return siblings.filter(element => element !== template).map(element => element.region);
+}
+
+test('nested region arrays preserve input order without a source or reverse attribute', async () => {
+    assert.deepEqual(await renderOrder(), regions);
+});
+
+test('a source with no reverse attribute preserves input order', async () => {
+    assert.deepEqual(await renderOrder({ withSource: true }), regions);
+});
+
+test('false reverse settings preserve input order', async t => {
+    for (const value of [false, 'false']) {
+        await t.test(String(value) + ' (' + typeof value + ')', async () => {
+            assert.deepEqual(await renderOrder({ templateReverse: value }), regions);
+            assert.deepEqual(await renderOrder({ withSource: true, sourceReverse: value }), regions);
+        });
+    }
+});
+
+test('explicit reverse settings still reverse the list', async t => {
+    for (const value of ['', true, 'true']) {
+        await t.test(JSON.stringify(value), async () => {
+            const expected = [...regions].reverse();
+            assert.deepEqual(await renderOrder({ templateReverse: value }), expected);
+            assert.deepEqual(await renderOrder({ withSource: true, sourceReverse: value }), expected);
+        });
+    }
+});
+
+test('template reverse settings apply when the source attribute is absent', async () => {
+    assert.deepEqual(await renderOrder({ withSource: true, templateReverse: '' }), [...regions].reverse());
+});
+
+test('an explicit source setting takes precedence over the template', async () => {
+    assert.deepEqual(await renderOrder({ withSource: true, sourceReverse: 'false', templateReverse: '' }), regions);
+    assert.deepEqual(await renderOrder({ withSource: true, sourceReverse: '', templateReverse: 'false' }), [...regions].reverse());
+});