fix(js): pass children as array in highlight components (#575)

The array syntax is more conventional when using Fragments and Vue 3 doesn't support spreading children with Fragments.

Closes #574.

Author: francoischalifour

packages/autocomplete-js/src/components/Highlight.ts

@@ -14,7 +14,7 @@ export function createHighlightComponent({
     return createElement(
       Fragment,
       {},
-      ...parseAlgoliaHitHighlight<THit>({ hit, attribute }).map((x, index) =>
+      parseAlgoliaHitHighlight<THit>({ hit, attribute }).map((x, index) =>
         x.isHighlighted
           ? createElement(tagName, { key: index }, x.value)
           : x.value

packages/autocomplete-js/src/components/ReverseHighlight.ts

@@ -14,7 +14,7 @@ export function createReverseHighlightComponent({
     return createElement(
       Fragment,
       {},
-      ...parseAlgoliaHitReverseHighlight<THit>({
+      parseAlgoliaHitReverseHighlight<THit>({
         hit,
         attribute,
       }).map((x, index) =>

packages/autocomplete-js/src/components/ReverseSnippet.ts

@@ -14,7 +14,7 @@ export function createReverseSnippetComponent({
     return createElement(
       Fragment,
       {},
-      ...parseAlgoliaHitReverseSnippet<THit>({
+      parseAlgoliaHitReverseSnippet<THit>({
         hit,
         attribute,
       }).map((x, index) =>

packages/autocomplete-js/src/components/Snippet.ts

@@ -14,7 +14,7 @@ export function createSnippetComponent({
     return createElement(
       Fragment,
       {},
-      ...parseAlgoliaHitSnippet<THit>({ hit, attribute }).map((x, index) =>
+      parseAlgoliaHitSnippet<THit>({ hit, attribute }).map((x, index) =>
         x.isHighlighted
           ? createElement(tagName, { key: index }, x.value)
           : x.value