Add namespace support to patchElements

yurivish · yurivish · commit 4814af52336b · 2025-12-14T14:51:04.000-05:00
diff --git a/library/src/plugins/watchers/patchElements.ts b/library/src/plugins/watchers/patchElements.ts
@@ -23,13 +23,14 @@ type PatchElementsArgs = {
   mode: PatchElementsMode
   selector: string
   useViewTransition: boolean
+  wrap?: string
 }
 
 watcher({
   name: 'datastar-patch-elements',
   apply(
     ctx,
-    { elements = '', selector = '', mode = 'outer', useViewTransition },
+    { elements = '', selector = '', mode = 'outer', useViewTransition, wrap },
   ) {
     switch (mode) {
       case 'remove':
@@ -54,6 +55,7 @@ watcher({
       selector,
       elements,
       useViewTransition: useViewTransition?.trim() === 'true',
+      wrap,
     }
 
     if (supportsViewTransitions && useViewTransition) {
@@ -66,7 +68,7 @@ watcher({
 
 const onPatchElements = (
   { error }: WatcherContext,
-  { elements, selector, mode }: PatchElementsArgs,
+  { elements, selector, mode, wrap }: PatchElementsArgs,
 ) => {
   const elementsWithSvgsRemoved = elements.replace(
     /<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim,
@@ -79,7 +81,9 @@ const onPatchElements = (
   const newDocument = new DOMParser().parseFromString(
     hasHtml || hasHead || hasBody
       ? elements
-      : `<body><template>${elements}</template></body>`,
+      : wrap
+        ? `<body><template><${wrap}>${elements}</${wrap}></template></body>`
+        : `<body><template>${elements}</template></body>`,
     'text/html',
   )
 
@@ -93,6 +97,11 @@ const onPatchElements = (
     newContent.appendChild(newDocument.head)
   } else if (hasBody) {
     newContent.appendChild(newDocument.body)
+  } else if (wrap) {
+    const wrapEl = newDocument.querySelector('template')!.content.querySelector(wrap)!
+    for (const child of wrapEl.childNodes) {
+      newContent.appendChild(child)
+    }
   } else {
     newContent = newDocument.querySelector('template')!.content
   }
@@ -345,9 +354,12 @@ const morphChildren = (
     // elements with persistent IDs and possible state info we can still preserve by moving in and then morphing
     if (ctxIdMap.has(newChild)) {
       // node has children with IDs with possible state so create a dummy elt of same type and apply full morph algorithm
-      const newEmptyChild = document.createElement(
-        (newChild as Element).tagName,
-      )
+      const ns = (newChild as Element).namespaceURI
+      const tagName = (newChild as Element).tagName
+      const newEmptyChild =
+        ns && ns !== 'http://www.w3.org/1999/xhtml'
+          ? document.createElementNS(ns, tagName)
+          : document.createElement(tagName)
       oldParent.insertBefore(newEmptyChild, insertionPoint)
       morphNode(newEmptyChild, newChild)
       insertionPoint = newEmptyChild.nextSibling
diff --git a/sdk/ADR.md b/sdk/ADR.md
@@ -109,6 +109,7 @@ ServerSentEventGenerator.PatchElements(
     selector?: string,
     mode?: ElementPatchMode,
     useViewTransition?: boolean,
+    wrap: string,
     eventId?: string,
     retryDuration?: durationInMilliseconds
   }
@@ -137,6 +138,7 @@ ServerSentEventGenerator.PatchElements(
   data: mode inner
   data: selector #feed
   data: useViewTransition true
+  data: wrap div
   data: elements <div id="feed">
   data: elements     <span>1</span>
   data: elements </div>
@@ -175,6 +177,20 @@ ServerSentEventGenerator.PatchElements(
   ```
 </details>
 
+<details>
+  <summary>Patch SVG elements</summary>
+
+  ```
+  event: datastar-patch-elements
+  data: mode append
+  data: selector #vis
+  data: wrap svg
+  data: elements <circle id="c1" cx="10" r="5" fill="red"/>
+  data: elements <circle id="c2" cx="20" r="5" fill="green"/>
+  data: elements <circle id="c3" cx="30" r="5" fill="blue"/>
+  ```
+</details>
+
 `PatchElements` sends HTML elements to the browser for DOM manipulation.
 
 > [!TIP]
@@ -218,6 +234,7 @@ String enum defining how elements are patched into the DOM.
 | `selector` | string | Element ID | CSS selector for target element. If a selector is not specified, each element must have an ID specified. |
 | `mode` | ElementPatchMode | `outer` | How to patch the element |
 | `useViewTransition` | boolean | `false` | Enable view transitions API |
+| `wrap` | string | Tag name | Tag name used to control the [namespace](https://developer.mozilla.org/en-US/docs/Web/API/Element/namespaceURI) of each element. If a tag name is not specified, elements will be created in the HTML namespace. |
 
 ### Implementation
 
@@ -227,6 +244,7 @@ String enum defining how elements are patched into the DOM.
 - `selector SELECTOR\n` (if provided)
 - `mode PATCH_MODE\n` (if not `outer`)
 - `useViewTransition true\n` (if `true`)
+- `wrap TAG_NAME\n` (if provided)
 - `elements HTML_LINE\n` (for each line of HTML)
 
 ---
@@ -414,4 +432,3 @@ The function ***must*** parse the incoming HTTP request based on the method:
 | Others | Request body | JSON | Parse request body directly |
 
 **Error Handling**: ***Must*** return error for invalid JSON.
-
