fix(templates): text nodes with fragment as rootTagName

algolia · Apr 24, 2024 · fb16091 · fb16091
1 parent 0c99ded
commit fb16091
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 13 deletions.
diff --git 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
@@ -194,17 +194,17 @@ 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(`
         <div>
           <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
@@ -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
@@ -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/...s/instantsearch.js/src/components/Template/__tests__/__snapshots__/Template-test.tsx.snap b/...s/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
@@ -86,6 +86,7 @@ const renderer =
         rootProps={rootProps}
         templateKey="empty"
         data={results}
+        rootTagName="fragment"
       />
     );