create-instantsearch-app 7.0.2 → 7.2.0

package/README.md

@@ -16,7 +16,6 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [Get started](#get-started)
 - [Usage](#usage)
 - [API](#api)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-instantsearch-app",
-  "version": "7.0.2",
+  "version": "7.2.0",
   "license": "MIT",
   "description": "⚡️ Build InstantSearch apps at the speed of thought",
   "keywords": [
@@ -38,20 +38,20 @@
     "algoliasearch": "4",
     "chalk": "3.0.0",
     "commander": "4.1.1",
-    "inquirer": "8.0.0",
+    "inquirer": "8.2.0",
     "jstransformer-handlebars": "1.1.0",
     "load-json-file": "6.2.0",
     "lodash.camelcase": "4.3.0",
     "metalsmith": "2.5.1",
     "metalsmith-rename": "1.0.0",
-    "prettier": "1.19.1",
+    "prettier": "^2.4.1",
     "semver": "6.1.1",
     "validate-npm-package-name": "3.0.0"
   },
   "devDependencies": {
-    "@instantsearch/testutils": "1.14.0",
+    "@instantsearch/testutils": "1.15.0",
     "jest-image-snapshot": "2.12.0",
     "walk-sync": "2.0.2"
   },
-  "gitHead": "046ba8af4e49a0299d3297337965fc4e717550d6"
+  "gitHead": "c59c53cab5f6caddf44fca51e32063d737a96bce"
 }

package/src/cli/__tests__/postProcessAnswers.js

@@ -185,4 +185,60 @@ describe('flags', () => {
       ).toEqual(expect.objectContaining({ insights: false }));
     });
   });
+
+  describe('autocomplete', () => {
+    test('with usage of autocomplete in searchInputType', async () => {
+      expect(
+        await postProcessAnswers({
+          configuration: {},
+          templateConfig: {
+            libraryName: 'instantsearch.js',
+            flags: {
+              autocomplete: '>= 4.52',
+            },
+          },
+          optionsFromArguments: {},
+          answers: { searchInputType: 'autocomplete' },
+        })
+      ).toEqual(
+        expect.objectContaining({
+          searchInputType: 'autocomplete',
+          flags: expect.objectContaining({ autocomplete: true }),
+        })
+      );
+    });
+
+    test('without usage of autocomplete in searchInputType', async () => {
+      expect(
+        await postProcessAnswers({
+          configuration: {},
+          templateConfig: {
+            libraryName: 'instantsearch.js',
+            flags: {
+              autocomplete: '>= 4.52',
+            },
+          },
+          optionsFromArguments: {},
+          answers: { searchInputType: 'searchbox' },
+        })
+      ).toEqual(
+        expect.objectContaining({
+          searchInputType: 'searchbox',
+          flags: expect.objectContaining({ autocomplete: false }),
+        })
+      );
+    });
+
+    test('without config', async () => {
+      expect(
+        (
+          await postProcessAnswers({
+            configuration: {},
+            templateConfig: {},
+            optionsFromArguments: {},
+          })
+        ).flags
+      ).toEqual(expect.objectContaining({ autocomplete: false }));
+    });
+  });
 });

package/src/cli/index.js

@@ -201,6 +201,91 @@ const getQuestions = ({ appName }) => ({
       when: ({ appId, apiKey, indexName }) =>
         attributesForFaceting.length === 0 && appId && apiKey && indexName,
     },
+    {
+      type: 'list',
+      name: 'searchInputType',
+      message: 'Type of search input',
+      choices: [
+        {
+          name: 'Autocomplete with suggested and recent searches',
+          value: 'autocomplete',
+        },
+        { name: 'Regular search box', value: 'searchbox' },
+      ],
+      default: 'autocomplete',
+      when: ({ libraryVersion, template }) => {
+        const templatePath = getTemplatePath(template);
+        const templateConfig = getAppTemplateConfig(templatePath);
+
+        const selectedLibraryVersion = libraryVersion;
+        const requiredLibraryVersion =
+          templateConfig.flags && templateConfig.flags.autocomplete;
+        const supportsAutocomplete =
+          selectedLibraryVersion &&
+          requiredLibraryVersion &&
+          semver.satisfies(selectedLibraryVersion, requiredLibraryVersion, {
+            includePrerelease: true,
+          });
+
+        return supportsAutocomplete;
+      },
+    },
+    {
+      type: 'input',
+      name: 'querySuggestionsIndexName',
+      message: 'Index name for suggested searches',
+      suffix: `\n  ${chalk.gray('This must be a Query Suggestions index')}`,
+      default: 'instant_search_demo_query_suggestions',
+      when: ({ searchInputType }) => searchInputType === 'autocomplete',
+    },
+    {
+      type: 'list',
+      name: 'autocompleteLibraryVersion',
+      message: () => `Autocomplete version`,
+      choices: async () => {
+        const libraryName = '@algolia/autocomplete-js';
+
+        try {
+          const versions = await fetchLibraryVersions(libraryName);
+          const latestStableVersion = semver.maxSatisfying(versions, '1', {
+            includePrerelease: false,
+          });
+
+          if (!latestStableVersion) {
+            return versions;
+          }
+
+          return [
+            new inquirer.Separator('Latest stable version (recommended)'),
+            latestStableVersion,
+            new inquirer.Separator('All versions'),
+            ...versions,
+          ];
+        } catch (err) {
+          const fallbackLibraryVersion = '1.11.0';
+
+          console.log();
+          console.error(
+            chalk.red(
+              `Cannot fetch versions for library "${chalk.cyan(libraryName)}".`
+            )
+          );
+          console.log();
+          console.log(
+            `Fallback to ${chalk.cyan(
+              fallbackLibraryVersion
+            )}, please upgrade the dependency after generating the app.`
+          );
+          console.log();
+
+          return [
+            new inquirer.Separator('Available versions'),
+            fallbackLibraryVersion,
+          ];
+        }
+      },
+      when: ({ searchInputType }) => searchInputType === 'autocomplete',
+    },
   ],
   widget: [
     {

package/src/cli/postProcessAnswers.js

@@ -77,6 +77,9 @@ async function postProcessAnswers({
       insights:
         Boolean(templateConfig.flags && templateConfig.flags.insights) &&
         semver.satisfies(libraryVersion, templateConfig.flags.insights),
+      autocomplete:
+        Boolean(templateConfig.flags && templateConfig.flags.autocomplete) &&
+        combinedAnswers.searchInputType === 'autocomplete',
     },
   };
 }

package/src/templates/Angular InstantSearch/angular.json

@@ -22,13 +22,8 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -89,10 +84,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "node_modules/instantsearch.css/themes/satellite.css",
               "src/styles.css"

package/src/templates/Angular InstantSearch/karma.conf.js

@@ -10,7 +10,7 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
       jasmine: {
@@ -19,18 +19,15 @@ module.exports = function (config) {
         // for example, you can disable the random execution with `random: false`
         // or set a specific seed with `seed: 4321`
       },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
+      suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
       dir: require('path').join(__dirname, './coverage/{{name}}'),
       subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
+      reporters: [{ type: 'html' }, { type: 'text-summary' }],
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
@@ -39,6 +36,6 @@ module.exports = function (config) {
     autoWatch: true,
     browsers: ['Chrome'],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
   });
 };

package/src/templates/Angular InstantSearch/src/app/app.component.ts

@@ -1,15 +1,12 @@
 import { Component } from '@angular/core';
 import algoliasearch from 'algoliasearch/lite';
 
-const searchClient = algoliasearch(
-  '{{appId}}',
-  '{{apiKey}}'
-);
+const searchClient = algoliasearch('{{appId}}', '{{apiKey}}');
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   config = {

package/src/templates/Angular InstantSearch/src/app/app.module.ts

@@ -5,14 +5,9 @@ import { NgAisModule } from 'angular-instantsearch';
 import { AppComponent } from './app.component';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    NgAisModule.forRoot(),
-    BrowserModule
-  ],
+  declarations: [AppComponent],
+  imports: [NgAisModule.forRoot(), BrowserModule],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

package/src/templates/Angular InstantSearch/src/environments/environment.prod.ts

@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
+  production: true,
 };

package/src/templates/Angular InstantSearch/src/environments/environment.ts

@@ -3,7 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
 };
 
 /*

package/src/templates/Angular InstantSearch/src/index.html

@@ -1,14 +1,17 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>{{name}}</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite.css" rel="stylesheet" />
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>{{name}}</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>

package/src/templates/Angular InstantSearch/src/main.ts

@@ -8,5 +8,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));

package/src/templates/Angular InstantSearch/src/polyfills.ts

@@ -57,8 +57,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js';  // Included with Angular CLI.
-
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

package/src/templates/Angular InstantSearch/src/test.ts

@@ -4,11 +4,15 @@ import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
+  platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
 
 declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
     keys(): string[];
     <T>(id: string): T;
   };
@@ -18,7 +22,7 @@ declare const require: {
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting(),
-  { teardown: { destroyAfterEach: true }},
+  { teardown: { destroyAfterEach: true } }
 );
 
 // Then we find all the tests.

package/src/templates/InstantSearch iOS/App/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,48 +1,48 @@
 {
-  "images" : [
+  "images": [
     {
-      "idiom" : "iphone",
-      "size" : "20x20",
-      "scale" : "2x"
+      "idiom": "iphone",
+      "size": "20x20",
+      "scale": "2x"
     },
     {
-      "idiom" : "iphone",
-      "size" : "20x20",
-      "scale" : "3x"
+      "idiom": "iphone",
+      "size": "20x20",
+      "scale": "3x"
     },
     {
-      "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "2x"
+      "idiom": "iphone",
+      "size": "29x29",
+      "scale": "2x"
     },
     {
-      "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "3x"
+      "idiom": "iphone",
+      "size": "29x29",
+      "scale": "3x"
     },
     {
-      "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "2x"
+      "idiom": "iphone",
+      "size": "40x40",
+      "scale": "2x"
     },
     {
-      "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "3x"
+      "idiom": "iphone",
+      "size": "40x40",
+      "scale": "3x"
     },
     {
-      "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "2x"
+      "idiom": "iphone",
+      "size": "60x60",
+      "scale": "2x"
     },
     {
-      "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "3x"
+      "idiom": "iphone",
+      "size": "60x60",
+      "scale": "3x"
     }
   ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
+  "info": {
+    "version": 1,
+    "author": "xcode"
   }
-}
+}

package/src/templates/InstantSearch.js/.template.js

@@ -8,6 +8,7 @@ module.exports = {
   flags: {
     dynamicWidgets: '>= 4.30',
     insights: '>= 4.55',
+    autocomplete: '>= 4.52',
   },
   templateName: 'instantsearch.js',
   appName: 'instantsearch.js-app',

package/src/templates/InstantSearch.js/index.html.hbs

@@ -9,6 +9,9 @@
   <link rel="shortcut icon" href="./favicon.png">
 
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
+  {{#if flags.autocomplete}}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic@1.11.0/dist/theme.min.css">
+  {{/if}}
   <link rel="stylesheet" href="./src/index.css">
   <link rel="stylesheet" href="./src/app.css">
 
@@ -50,6 +53,11 @@
 
   <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.10.5/dist/algoliasearch-lite.umd.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@{{libraryVersion}}"></script>
+  {{#if flags.autocomplete}}
+  <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js@{{autocompleteLibraryVersion}}/dist/umd/index.production.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-query-suggestions@{{autocompleteLibraryVersion}}/dist/umd/index.production.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-recent-searches@{{autocompleteLibraryVersion}}/dist/umd/index.production.min.js"></script>
+  {{/if}}
   <script src="./src/app.js"></script>
 </body>
 

package/src/templates/InstantSearch.js/{package.json → package.json.hbs}

@@ -14,6 +14,11 @@
     "prettier": "2.6.2"
   },
   "dependencies": {
+    {{#if flags.autocomplete}}
+    "@algolia/autocomplete-js": "{{autocompleteLibraryVersion}}",
+    "@algolia/autocomplete-plugin-recent-searches": "{{autocompleteLibraryVersion}}",
+    "@algolia/autocomplete-plugin-query-suggestions": "{{autocompleteLibraryVersion}}",
+    {{/if}}
     "algoliasearch": "4",
     "instantsearch.js": "{{libraryVersion}}"
   }

package/src/templates/InstantSearch.js/src/app.js.hbs

@@ -1,4 +1,13 @@
 const { algoliasearch, instantsearch } = window;
+{{#if flags.autocomplete}}
+const { autocomplete } = window['@algolia/autocomplete-js'];
+const { createLocalStorageRecentSearchesPlugin } = window[
+  '@algolia/autocomplete-plugin-recent-searches'
+];
+const { createQuerySuggestionsPlugin } = window[
+  '@algolia/autocomplete-plugin-query-suggestions'
+];
+{{/if}}
 
 const searchClient = algoliasearch('{{appId}}', '{{apiKey}}');
 
@@ -8,13 +17,21 @@ const search = instantsearch({
   {{#if flags.insights}}insights: true,{{/if}}
 });
 
+{{#if flags.autocomplete}}
+const virtualSearchBox = instantsearch.connectors.connectSearchBox(() => {});
+{{/if}}
+
 search.addWidgets([
+  {{#unless flags.autocomplete}}
   instantsearch.widgets.searchBox({
     container: '#searchbox',
     {{#if searchPlaceholder}}
     placeholder: '{{searchPlaceholder}}',
     {{/if}}
   }),
+  {{else}}
+  virtualSearchBox({}),
+  {{/unless}}
   instantsearch.widgets.hits({
     container: '#hits',
     {{#if attributesToDisplay}}
@@ -74,3 +91,81 @@ search.addWidgets([
 ]);
 
 search.start();
+
+{{#if flags.autocomplete}}
+const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
+  key: 'instantsearch',
+  limit: 3,
+  transformSource({ source }) {
+    return {
+      ...source,
+      onSelect({ setIsOpen, setQuery, item, event }) {
+        onSelect({ setQuery, setIsOpen, event, query: item.label });
+      },
+    };
+  },
+});
+
+const querySuggestionsPlugin = createQuerySuggestionsPlugin({
+  searchClient,
+  indexName: '{{querySuggestionsIndexName}}',
+  getSearchParams() {
+    return recentSearchesPlugin.data.getAlgoliaSearchParams({ hitsPerPage: 6 });
+  },
+  transformSource({ source }) {
+    return {
+      ...source,
+      sourceId: 'querySuggestionsPlugin',
+      onSelect({ setIsOpen, setQuery, event, item }) {
+        onSelect({ setQuery, setIsOpen, event, query: item.query });
+      },
+      getItems(params) {
+        if (!params.state.query) {
+          return [];
+        }
+
+        return source.getItems(params);
+      },
+    };
+  },
+});
+
+autocomplete({
+  container: '#searchbox',
+  {{#if searchPlaceholder}}
+    placeholder: '{{searchPlaceholder}}',
+  {{/if}}
+  openOnFocus: true,
+  detachedMediaQuery: 'none',
+  onSubmit({ state }) {
+    setInstantSearchUiState({ query: state.query });
+  },
+  plugins: [recentSearchesPlugin, querySuggestionsPlugin],
+});
+
+function setInstantSearchUiState(indexUiState) {
+  search.mainIndex.setIndexUiState({ page: 1, ...indexUiState });
+}
+
+function onSelect({ setIsOpen, setQuery, event, query }) {
+  if (isModifierEvent(event)) {
+    return;
+  }
+
+  setQuery(query);
+  setIsOpen(false);
+  setInstantSearchUiState({ query });
+}
+
+function isModifierEvent(event) {
+  const isMiddleClick = event.button === 1;
+
+  return (
+    isMiddleClick ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey
+  );
+}
+{{/if}}

package/src/templates/InstantSearch.js/src/global.d.ts.hbs

@@ -1,3 +1,8 @@
+{{#if flags.autocomplete}}
+import { autocomplete } from '@algolia/autocomplete-js';
+import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
+import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
+{{/if}}
 import algoliasearch from 'algoliasearch/lite';
 import instantsearch from 'instantsearch.js/dist/instantsearch.production.min';
 
@@ -5,5 +10,16 @@ declare global {
   interface Window {
     algoliasearch: typeof algoliasearch;
     instantsearch: typeof instantsearch;
+    {{#if flags.autocomplete}}
+    '@algolia/autocomplete-js': {
+      autocomplete: typeof autocomplete;
+    };
+    '@algolia/autocomplete-plugin-recent-searches': {
+      createLocalStorageRecentSearchesPlugin: typeof createLocalStorageRecentSearchesPlugin;
+    };
+    '@algolia/autocomplete-plugin-query-suggestions': {
+      createQuerySuggestionsPlugin: typeof createQuerySuggestionsPlugin;
+    };
+    {{/if}}
   }
 }

package/src/templates/InstantSearch.js widget/config/api-extractor.json

@@ -1,7 +1,7 @@
 /**
  * Config file for API Extractor.  For more info, please visit: https://api-extractor.com
  */
- {
+{
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
 
   /**

package/src/templates/InstantSearch.js widget/example/index.css

@@ -2,6 +2,6 @@ body {
   font-family: sans-serif;
 }
 
-[class^=ais-] {
+[class^='ais-'] {
   font-size: 1em;
 }

package/src/templates/InstantSearch.js widget/example/index.html

@@ -1,17 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
-  <link rel="stylesheet" href="style.css">
-  <title>{{ name }} example</title>
-</head>
-<body>
-  <div id="search-box"></div>
-  <div id="example"></div>
-  <div id="hits"></div>
-  <script src="index.ts"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>{{ name }} example</title>
+  </head>
+  <body>
+    <div id="search-box"></div>
+    <div id="example"></div>
+    <div id="hits"></div>
+    <script src="index.ts"></script>
+  </body>
 </html>

package/src/templates/React InstantSearch/index.html

@@ -7,7 +7,7 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
 
-    <link rel="shortcut icon" href="favicon.png">
+    <link rel="shortcut icon" href="favicon.png" />
 
     <!--
     Do not use @7 in production, use a complete version like x.x.x, see website for latest version:

package/src/templates/React InstantSearch Native/babel.config.js

@@ -1,4 +1,4 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],

package/src/templates/React InstantSearch Native/src/InfiniteHits.tsx

@@ -20,8 +20,8 @@ export const InfiniteHits = forwardRef(
     return (
       <FlatList
         ref={ref}
-        data={(hits as unknown) as THit[]}
-        keyExtractor={item => item.objectID}
+        data={hits as unknown as THit[]}
+        keyExtractor={(item) => item.objectID}
         ItemSeparatorComponent={() => <View style={styles.separator} />}
         onEndReached={() => {
           if (!isLastPage) {
@@ -30,7 +30,7 @@ export const InfiniteHits = forwardRef(
         }}
         renderItem={({ item }) => (
           <View style={styles.item}>
-            <Hit hit={(item as unknown) as THit} />
+            <Hit hit={item as unknown as THit} />
           </View>
         )}
       />

package/src/templates/Vue InstantSearch/public/index.html

@@ -1,20 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.png">
-     <!--
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.png" />
+    <!--
       Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
       https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
     -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
+    />
     <title>{{name}}</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but {{name}} doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but {{name}} doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

package/src/templates/Vue InstantSearch/src/main.js

@@ -7,5 +7,5 @@ Vue.config.productionTip = false;
 Vue.use(InstantSearch);
 
 new Vue({
-  render: h => h(App),
+  render: (h) => h(App),
 }).$mount('#app');

package/src/templates/Vue InstantSearch with Vue 3/index.html

@@ -2,14 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/favicon.png" />
     <!--
       Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
       https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
     -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
+    />
     <title>{{name}}</title>
   </head>
   <body>