fix(server): extend component correctly if at root (#1105)

* fix(server): extend component correctly if at root

Essentially the problem is that $vnode is usually available, but not when the this is a root Vue instance. In that case we are in the "Vue.component" case, which before now always was wrong (it takes two arguments, not one)

Same as #1104
see also #1054

* Update src/util/createServerRootMixin.js

* make the funky new test pass

* update test name, as in #1104

* Update src/util/__tests__/createServerRootMixin.test.js

Co-authored-by: Sarah Dayan <[email protected]>

Co-authored-by: Sarah Dayan <[email protected]>

Author: Haroenv

src/util/__tests__/createServerRootMixin.test.js

@@ -682,6 +682,78 @@ Array [
       expect(instantsearch.helper).toEqual(expect.any(AlgoliaSearchHelper));
       expect(instantsearch.mainHelper).toEqual(expect.any(AlgoliaSearchHelper));
     });
+
+    it('works when component is at root (and therefore has no $vnode)', async () => {
+      const searchClient = createFakeClient();
+      let mainIndex;
+
+      const app = {
+        render: h =>
+          /**
+           * This code triggers this warning in Vue 3:
+           * > Non-function value encountered for default slot. Prefer function slots for better performance.
+           *
+           * To fix it, replace the third argument
+           * > [h(...), h(...)]
+           * with
+           * > { default: () => [h(...), h(...)] }
+           *
+           * but it's not important (and not compatible in vue2), we're leaving it as-is.
+           */
+          h(InstantSearchSsr, {}, [
+            h(Configure, {
+              attrs: {
+                hitsPerPage: 100,
+              },
+            }),
+            h(SearchBox),
+          ]),
+      };
+
+      const wrapper = new Vue({
+        mixins: [
+          forceIsServerMixin,
+          createServerRootMixin({
+            searchClient,
+            indexName: 'hello',
+          }),
+        ],
+        serverPrefetch() {
+          return this.instantsearch.findResultsState(this);
+        },
+        created() {
+          mainIndex = this.instantsearch.mainIndex;
+        },
+        render: h => h(app),
+      });
+
+      await renderToString(wrapper);
+
+      expect(mainIndex.getWidgetState()).toMatchInlineSnapshot(`
+Object {
+  "hello": Object {
+    "configure": Object {
+      "hitsPerPage": 100,
+    },
+  },
+}
+`);
+
+      expect(searchClient.search).toHaveBeenCalledTimes(1);
+      expect(searchClient.search.mock.calls[0][0]).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "indexName": "hello",
+    "params": Object {
+      "facets": Array [],
+      "hitsPerPage": 100,
+      "query": "",
+      "tagFilters": "",
+    },
+  },
+]
+`);
+    });
   });
 
   describe('__forceRender', () => {

src/util/createServerRootMixin.js

@@ -53,7 +53,10 @@ function defaultCloneComponent(componentInstance) {
 
   const Extended = componentInstance.$vnode
     ? componentInstance.$vnode.componentOptions.Ctor.extend(options)
-    : Vue.component(Object.assign({}, componentInstance.$options, options));
+    : Vue.component(
+        options.name,
+        Object.assign({}, componentInstance.$options, options)
+      );
 
   const app = new Extended({
     propsData: componentInstance.$options.propsData,