* Morph oldNode to match content. * @param {Element} oldNode - The existing DOM element to morph * @param {string|Element|DocumentFragment} content - The new content * @param {MorphCallbacks} [callbacks] - Optional lifecycle callbacks
(oldNode, content, callbacks = {})
| 3372 | * @param {MorphCallbacks} [callbacks] - Optional lifecycle callbacks |
| 3373 | */ |
| 3374 | morph(oldNode, content, callbacks = {}) { |
| 3375 | var fragment; |
| 3376 | if (typeof content === "string") { |
| 3377 | var temp = document.createElement("template"); |
| 3378 | temp.innerHTML = content; |
| 3379 | fragment = temp.content; |
| 3380 | } else if (content instanceof DocumentFragment) { |
| 3381 | fragment = content; |
| 3382 | } else if (content instanceof Element) { |
| 3383 | fragment = document.createDocumentFragment(); |
| 3384 | fragment.append(content.cloneNode(true)); |
| 3385 | } else { |
| 3386 | throw new Error("morph requires an HTML string, element, or document fragment"); |
| 3387 | } |
| 3388 | var newRoot = fragment.firstElementChild; |
| 3389 | if (newRoot && !newRoot.nextElementSibling && newRoot.tagName === oldNode.tagName) { |
| 3390 | _copyAttributes(oldNode, newRoot); |
| 3391 | fragment = newRoot; |
| 3392 | } |
| 3393 | var { persistentIds, idMap } = _createIdMaps(oldNode, fragment); |
| 3394 | var pantry = document.createElement("div"); |
| 3395 | pantry.hidden = true; |
| 3396 | (document.body || oldNode.parentElement).after(pantry); |
| 3397 | var ctx = { target: oldNode, idMap, persistentIds, pantry, futureMatches: /* @__PURE__ */ new WeakSet(), callbacks }; |
| 3398 | _morphChildren(ctx, oldNode, fragment); |
| 3399 | callbacks.beforeNodeRemoved?.(pantry); |
| 3400 | pantry.remove(); |
| 3401 | } |
| 3402 | }; |
| 3403 | function _morphChildren(ctx, oldParent, newParent, insertionPoint = null, endPoint = null) { |
| 3404 | if (oldParent instanceof HTMLTemplateElement && newParent instanceof HTMLTemplateElement) { |
no test coverage detected