From fb16091859314ebbb2d600b1391e9fb0faebaeb0 Mon Sep 17 00:00:00 2001
From: Aymeric Giraudet <aymeric.giraudet@algolia.com>
Date: Mon, 22 Apr 2024 18:03:20 +0200
Subject: [PATCH] fix(templates): text nodes with fragment as `rootTagName`

---
 bundlesize.config.json                        |  8 +++----
 .../src/components/__tests__/Hits.test.tsx    |  8 +++----
 .../src/components/Template/Template.tsx      | 17 +++++++++++---
 .../Template/__tests__/Template-test.tsx      | 19 +++++++++++++++-
 .../__snapshots__/Template-test.tsx.snap      | 22 ++++++++++++++++++-
 .../src/widgets/hits/hits.tsx                 |  1 +
 6 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/bundlesize.config.json b/bundlesize.config.json
index f3daebfd53..f129d53f5e 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -10,11 +10,11 @@
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.production.min.js",
-      "maxSize": "77.5 kB"
+      "maxSize": "77.75 kB"
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.development.js",
-      "maxSize": "170.75 kB"
+      "maxSize": "171 kB"
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",
@@ -26,11 +26,11 @@
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",
-      "maxSize": "66.25 kB"
+      "maxSize": "66.5 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue3/umd/index.js",
-      "maxSize": "66.75 kB"
+      "maxSize": "67 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/cjs/index.js",
diff --git a/packages/instantsearch-ui-components/src/components/__tests__/Hits.test.tsx b/packages/instantsearch-ui-components/src/components/__tests__/Hits.test.tsx
index 9e7d8a781d..4f750a89d5 100644
--- a/packages/instantsearch-ui-components/src/components/__tests__/Hits.test.tsx
+++ b/packages/instantsearch-ui-components/src/components/__tests__/Hits.test.tsx
@@ -194,9 +194,7 @@ describe('Hits', () => {
     test('renders when defined and there are no hits', () => {
       const props = createProps({
         hits: [],
-        emptyComponent: ({ ...rootProps }) => (
-          <div {...rootProps}>No results</div>
-        ),
+        emptyComponent: () => <span>No results</span>,
       });
       const { container } = render(<Hits {...props} />);
       expect(container).toMatchInlineSnapshot(`
@@ -204,7 +202,9 @@ describe('Hits', () => {
           <div
             class="ais-Hits ais-Hits--empty"
           >
-            No results
+            <span>
+              No results
+            </span>
           </div>
         </div>
       `);
diff --git a/packages/instantsearch.js/src/components/Template/Template.tsx b/packages/instantsearch.js/src/components/Template/Template.tsx
index 9c5d1d81c8..6a635bc87a 100644
--- a/packages/instantsearch.js/src/components/Template/Template.tsx
+++ b/packages/instantsearch.js/src/components/Template/Template.tsx
@@ -12,19 +12,30 @@ import type { JSX } from 'preact';
 
 class RawHtml extends Component<{ content: string }> {
   ref = createRef();
-  nodes: Element[] = [];
+  nodes: ChildNode[] = [];
 
   componentDidMount() {
     const fragment = new DocumentFragment();
     const root = document.createElement('div');
     root.innerHTML = this.props.content;
-    this.nodes = [...root.children];
+    this.nodes = [...root.childNodes];
     this.nodes.forEach((node) => fragment.appendChild(node));
     this.ref.current.replaceWith(fragment);
   }
 
   componentWillUnmount() {
-    this.nodes.forEach((node) => (node.outerHTML = ''));
+    this.nodes.forEach((node) => {
+      if (node instanceof Element) {
+        node.outerHTML = '';
+        return;
+      }
+      node.nodeValue = '';
+    });
+    // if there is one TextNode first and one TextNode last, the
+    // last one's nodeValue will be assigned to the first.
+    if (this.nodes[0].nodeValue) {
+      this.nodes[0].nodeValue = '';
+    }
   }
 
   render() {
diff --git a/packages/instantsearch.js/src/components/Template/__tests__/Template-test.tsx b/packages/instantsearch.js/src/components/Template/__tests__/Template-test.tsx
index ef3b246c56..569499bb9b 100644
--- a/packages/instantsearch.js/src/components/Template/__tests__/Template-test.tsx
+++ b/packages/instantsearch.js/src/components/Template/__tests__/Template-test.tsx
@@ -59,11 +59,18 @@ describe('Template', () => {
   it('can have Fragment as rootTagName with string template', () => {
     const props = getProps({
       rootTagName: 'fragment',
-      templates: { test: '<span>test</span>' },
+      templates: { test: 'Hello <span>{{name}}</span> !' },
+      data: { name: 'world' },
     });
     const wrapper = render(<Template {...props} />);
 
     expect(wrapper.container).toMatchSnapshot();
+
+    props.data = { name: 'world2' };
+
+    wrapper.rerender(<Template {...props} />);
+
+    expect(wrapper.container).toMatchSnapshot();
   });
 
   it('can have Fragment as rootTagName with Preact template', () => {
@@ -76,6 +83,16 @@ describe('Template', () => {
     expect(wrapper.container).toMatchSnapshot();
   });
 
+  it('can have Fragment as rootTagName with simple string', () => {
+    const props = getProps({
+      rootTagName: 'fragment',
+      templates: { test: 'test' },
+    });
+    const wrapper = render(<Template {...props} />);
+
+    expect(wrapper.container).toMatchSnapshot();
+  });
+
   it('forward rootProps to the first node', () => {
     function onClick() {}
 
diff --git a/packages/instantsearch.js/src/components/Template/__tests__/__snapshots__/Template-test.tsx.snap b/packages/instantsearch.js/src/components/Template/__tests__/__snapshots__/Template-test.tsx.snap
index b5d7fb9f91..88ac1e76a3 100644
--- a/packages/instantsearch.js/src/components/Template/__tests__/__snapshots__/Template-test.tsx.snap
+++ b/packages/instantsearch.js/src/components/Template/__tests__/__snapshots__/Template-test.tsx.snap
@@ -28,11 +28,31 @@ exports[`Template can have Fragment as rootTagName with Preact template 1`] = `
 </div>
 `;
 
+exports[`Template can have Fragment as rootTagName with simple string 1`] = `
+<div>
+  test
+</div>
+`;
+
 exports[`Template can have Fragment as rootTagName with string template 1`] = `
 <div>
+  Hello 
   <span>
-    test
+    world
+  </span>
+   !
+</div>
+`;
+
+exports[`Template can have Fragment as rootTagName with string template 2`] = `
+<div>
+  
+  
+  Hello 
+  <span>
+    world2
   </span>
+   !
 </div>
 `;
 
diff --git a/packages/instantsearch.js/src/widgets/hits/hits.tsx b/packages/instantsearch.js/src/widgets/hits/hits.tsx
index 8faf781716..d74bde9815 100644
--- a/packages/instantsearch.js/src/widgets/hits/hits.tsx
+++ b/packages/instantsearch.js/src/widgets/hits/hits.tsx
@@ -86,6 +86,7 @@ const renderer =
         rootProps={rootProps}
         templateKey="empty"
         data={results}
+        rootTagName="fragment"
       />
     );