Skip to content

Commit decd034

Browse files
frankpaganfrankpagan
committed
fix: improve template rendering logic and error handling in renderTemplate function
1 parent 3007149 commit decd034

File tree

1 file changed

+94
-51
lines changed

1 file changed

+94
-51
lines changed

‎src/index.js‎

Lines changed: 94 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ async function render({
195195
}
196196

197197
let clones = renderedNode.clones; // || renderedNode.template.clones..
198-
if (!clones) {
198+
if (!clones && renderedNode.template) {
199199
clones = renderedNode.template.clones;
200200
console.log("renderedNode.template.clones", clones);
201201
}
@@ -273,17 +273,25 @@ async function render({
273273
async function renderTemplate(template, data, key, index, keyPath) {
274274
// if (!key)
275275
// key = template.getAttribute('render')
276-
276+
if (!(template instanceof HTMLElement)) {
277+
console.log("template not an element but should be")
278+
}
277279
let templateData = renderedNodes.get(template);
278280
if (!templateData) {
279-
templateData = { element: template, clones: new Map() };
281+
templateData = {element: template, clones: new Map() };
280282
renderedNodes.set(template, templateData);
283+
}
284+
285+
if (!templateData.parent && !templateData.source) {
286+
let parentRender = template.parentElement.closest("[render]")
287+
if (parentRender || template.source)
288+
templateData.parent = renderedNodes.get(parentRender) || template.source
289+
else
290+
console.log("template parent missing is there no parent or is this an error? and source is", templateData.source)
281291
}
282292

283-
templateData.parent =
284-
template.parentElement.closest("[render]") || template.source;
285-
if (templateData.parent) {
286-
templateData.parent = renderedNodes.get(templateData.parent);
293+
if(!templateData.source && templateData.parent && templateData.parent.source){
294+
templateData.source = templateData.parent.source
287295
}
288296

289297
if (!templateData.keyPath) {
@@ -296,28 +304,41 @@ async function renderTemplate(template, data, key, index, keyPath) {
296304
}
297305
}
298306

299-
template = templateData;
300-
301307
let renderData;
302308
if (key) {
303-
renderData = getRenderValue(template.element, data, key);
304-
} else if (Array.isArray(data)) {
309+
renderData = getRenderValue(templateData.element, data, key);
310+
}
311+
312+
if (!renderData) {
305313
renderData = data;
306314
}
315+
316+
// else if (Array.isArray(data)) {
317+
// renderData = data;
318+
// }
319+
320+
// if (!renderData && data) {
321+
// if (Array.isArray(data)) {
322+
// renderData = data;
323+
// } else {
324+
// renderData = [data];
325+
// }
326+
// } else return;
327+
328+
templateData.renderData = renderData;
329+
let el = templateData.element;
330+
if (el.nodeType !== 1) {
331+
el = templateData.parent.element;
332+
}
307333

308-
if (!renderData && data) {
309-
if (Array.isArray(data)) {
310-
renderData = data;
311-
} else {
312-
renderData = [data];
313-
}
314-
} else if (!renderData) return;
315-
316-
let renderAs =
317-
template.element.getAttribute("render-as") ||
318-
template.source.element.getAttribute("render-as") ||
319-
key;
320-
template.renderAs = renderAs;
334+
let renderAs = templateData.renderAs
335+
if (!templateData.renderAs) {
336+
renderAs =
337+
el.getAttribute("render-as") ||
338+
el.getAttribute("render") ||
339+
key;
340+
templateData.renderAs = renderAs;
341+
}
321342

322343
let renderType;
323344
if (templateData.source && templateData.source.element)
@@ -328,28 +349,40 @@ async function renderTemplate(template, data, key, index, keyPath) {
328349
renderReverse =
329350
templateData.source.element.getAttribute("render-reverse");
330351
if (!renderReverse)
331-
renderReverse = template.element.getAttribute("render-reverse");
352+
renderReverse = el.getAttribute("render-reverse");
332353
}
333354

334-
let exclude = template.element.getAttribute("render-exclude") || "";
355+
let exclude = el.getAttribute("render-exclude") || "";
335356
if (exclude) {
336357
exclude = exclude.replace(/ /g, "").split(",");
337358
}
338-
let reference = template.element.getAttribute("render-reference");
359+
let reference = el.getAttribute("render-reference");
339360

340361
let isInsert = data.$filter && (data.$filter.create || data.$filter.update);
341362
if (renderType !== "object") {
342363
if ((!isInsert && !index) || data.$filter.overwrite) {
343-
if (!template.clones) template = template.template;
344-
for (const [key, element] of template.clones) {
364+
if (!templateData.clones) {
365+
return
366+
if (templateData.template) {
367+
templateData.clones = templateData.template.clones
368+
} else if (templateData.parent && templateData.parent.template) {
369+
templateData.clones = templateData.parent.template.clones
370+
}
371+
}
372+
373+
// if (!templateData.clones) {
374+
// templateData
375+
// templateData = templateData.templateData;
376+
// }
377+
for (const [key, element] of templateData.clones) {
345378
renderedNodes.delete(element);
346379
element.remove();
347-
template.clones.delete(key);
380+
templateData.clones.delete(key);
348381
}
349382
} //
350383
// else if (index) {
351384
// updates data that has already been rendered
352-
// template.data = dotNotationToObject(renderData, template.data)
385+
// templateData.data = dotNotationToObject(renderData, templateData.data)
353386
// }
354387
}
355388

@@ -359,7 +392,7 @@ async function renderTemplate(template, data, key, index, keyPath) {
359392

360393
const keys = Object.keys(renderData);
361394
for (let i = 0; i < keys.length; i++) {
362-
let clone = template.clones.get(keys[i]);
395+
let clone = templateData.clones.get(keys[i]);
363396
clone = renderedNodes.get(clone);
364397

365398
if (
@@ -370,7 +403,7 @@ async function renderTemplate(template, data, key, index, keyPath) {
370403
if (clone) {
371404
renderedNodes.delete(clone.element);
372405
clone.element.remove();
373-
template.clones.delete(keys[i]);
406+
templateData.clones.delete(keys[i]);
374407
}
375408
continue;
376409
}
@@ -384,26 +417,26 @@ async function renderTemplate(template, data, key, index, keyPath) {
384417
let Data = { [renderAs]: { key: keys[i], value, type } };
385418

386419
if (!clone) {
387-
clone = cloneTemplate(template);
420+
clone = cloneTemplate(templateData);
388421
} else {
389422
if (clone.renderedValue === value) {
390423
continue;
391424
}
392425
}
393426
clone.renderedValue = value;
394-
// let clone = cloneTemplate(template);
427+
// let clone = cloneTemplate(templateData);
395428

396429
let renderedKey = key.split(".");
397430
renderedKey = renderedKey[renderedKey.length - 1];
398431
//renderedKey needs to remove the parent.renderAs/key
399432

400433
clone.key = keys[i];
401-
clone.keyPath = template.keyPath + "." + renderedKey;
434+
clone.keyPath = templateData.keyPath + "." + renderedKey;
402435
clone.parentKey = renderedKey;
403436
clone.renderKey = key;
404437
clone.element.setAttribute("renderedKey", keys[i]);
405438
await renderValues(clone.element, Data, keys[i], renderAs);
406-
insertElement(template, clone.element, index);
439+
insertElement(templateData, clone.element, index);
407440
}
408441
} else {
409442
if (!key && !Array.isArray(renderData)) {
@@ -413,20 +446,20 @@ async function renderTemplate(template, data, key, index, keyPath) {
413446
}
414447

415448
if (!renderData) {
416-
let clone = cloneTemplate(template);
417-
clone.keyPath = template.keyPath;
449+
let clone = cloneTemplate(templateData);
450+
clone.keyPath = templateData.keyPath;
418451
await renderValues(clone.element, data, key, renderAs);
419-
insertElement(template, clone.element, index);
452+
insertElement(templateData, clone.element, index);
420453
} else {
421454
if (!Array.isArray(renderData)) renderData = [renderData];
422455

423456
for (let i = 0; i < renderData.length; i++) {
424-
let clone = cloneTemplate(template);
457+
let clone = cloneTemplate(templateData);
425458

426459
let test = clone.element.getAttribute("render-as");
427460
if (test) renderAs = test;
428461

429-
clone.keyPath = template.keyPath || "" + `[${i}]`;
462+
clone.keyPath = templateData.keyPath || "" + `[${i}]`;
430463

431464
let object;
432465
if (
@@ -455,6 +488,9 @@ async function renderTemplate(template, data, key, index, keyPath) {
455488

456489
let index;
457490
if (key !== "data") index = i;
491+
492+
clone.renderData = object
493+
clone.index = index
458494
await renderValues(
459495
clone.element,
460496
object,
@@ -465,7 +501,7 @@ async function renderTemplate(template, data, key, index, keyPath) {
465501
index
466502
);
467503
insertElement(
468-
template,
504+
templateData,
469505
clone.element,
470506
index,
471507
"",
@@ -713,8 +749,9 @@ async function renderValues(node, data, key, renderAs, keyPath, parent, index) {
713749
return;
714750
}
715751
}
716-
if (node.getAttribute("render") && !node.hasAttribute("render-clone")) {
717-
renderTemplate(node, data);
752+
if (node.hasAttribute("render") && !node.hasAttribute("render-clone")) {
753+
let renderKey = node.getAttribute("render") || key
754+
renderTemplate(node, data, renderKey);
718755
} else if (node.childNodes.length > 0) {
719756
// Array.from(node.childNodes).forEach(childNode => {
720757
for (let childNode of node.childNodes) {
@@ -1157,14 +1194,20 @@ Observer.init({
11571194

11581195
let renderedNode = renderedNodes.get(parentElement);
11591196
let data;
1160-
if (renderedNode.source) {
1161-
data = renderedNode.source.data;
1197+
if (renderedNode) {
1198+
if (renderedNode.renderData) {
1199+
data = renderedNode.renderData;
1200+
}
1201+
} else {
1202+
let sourceElement = mutation.target.parentElement.closest("[render-query]")
1203+
let sourceData = sources.get(sourceElement);
1204+
if (sourceData) {
1205+
data = sourceData.data;
1206+
}
11621207
}
1163-
if (renderedNode.template) {
1164-
data = renderedNode.template.source.data;
1208+
if (data) {
1209+
// render({ element: mutation.target, data });
11651210
}
1166-
1167-
render({ element: mutation.target, data });
11681211
}
11691212
});
11701213

0 commit comments

Comments
 (0)