create-instantsearch-app 7.3.3 → 7.4.1

package/README.md

@@ -71,6 +71,7 @@ $ create-instantsearch-app --help
     --api-key <apiKey>                                 The Algolia search API key
     --index-name <indexName>                           The main index of your search
     --attributes-to-display <attributesToDisplay>      The attributes of your index to display
+    --image-attribute <imageAttribute>                 The attribute of your index to use for image display
     --attributes-for-faceting <attributesForFaceting>  The attributes for faceting
     --template <template>                              The InstantSearch template to use
     --library-version <libraryVersion>                 The version of the library
@@ -114,6 +115,7 @@ The `config` flag is handy to automate app generations.
   "indexName": "MY_INDEX_NAME",
   "searchPlaceholder": "Search",
   "attributesToDisplay": ["name", "description"],
+  "imageAttribute": "image",
   "attributesForFaceting": ["brand", "location"],
   "enableInsights": true
 }
@@ -136,6 +138,7 @@ const app = createInstantSearchApp('~/lab/my-app', {
   template: 'InstantSearch.js',
   libraryVersion: '2.0.0',
   attributesToDisplay: ['name', 'description'],
+  imageAttribute: 'image',
   attributesForFaceting: ['keywords'],
   enableInsights: true,
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-instantsearch-app",
-  "version": "7.3.3",
+  "version": "7.4.1",
   "license": "MIT",
   "description": "⚡️ Build InstantSearch apps at the speed of thought",
   "keywords": [
@@ -49,9 +49,9 @@
     "validate-npm-package-name": "3.0.0"
   },
   "devDependencies": {
-    "@instantsearch/testutils": "1.21.0",
+    "@instantsearch/testutils": "1.24.0",
     "jest-image-snapshot": "2.12.0",
     "walk-sync": "2.0.2"
   },
-  "gitHead": "b90c55a93cd6fe56128d9d6c746c153dbb3c3649"
+  "gitHead": "3f061b181adf4358629406027eec8f79d2577196"
 }

package/src/cli/__tests__/postProcessAnswers.js

@@ -263,3 +263,21 @@ describe('flags', () => {
     });
   });
 });
+
+test('removes `imageAttribute` from `attributesToDisplay`', async () => {
+  expect(
+    await postProcessAnswers({
+      configuration: {},
+      templateConfig: {},
+      optionsFromArguments: {},
+      answers: {
+        attributesToDisplay: ['test', 'image'],
+        imageAttribute: 'image',
+      },
+    })
+  ).toEqual(
+    expect.objectContaining({
+      attributesToDisplay: ['test'],
+    })
+  );
+});

package/src/cli/getPotentialImageAttributes.js

@@ -0,0 +1,43 @@
+const getInformationFromIndex = require('./getInformationFromIndex');
+
+module.exports = async function getPotentialImageAttributes({
+  appId,
+  apiKey,
+  indexName,
+} = {}) {
+  try {
+    const { hits } = await getInformationFromIndex({
+      appId,
+      apiKey,
+      indexName,
+    });
+    const [firstHit] = hits;
+    const highlightedAttributes = Object.keys(firstHit._highlightResult);
+    return Object.entries(firstHit)
+      .filter(
+        ([key, value]) =>
+          typeof value === 'string' &&
+          !/[\s]+/.test(value) &&
+          !highlightedAttributes.includes(key) &&
+          key !== 'objectID'
+      )
+      .map(([key]) => key)
+      .sort((a, b) => {
+        const regex = /image|img/;
+        const aIncludesImage = regex.test(a);
+        const bIncludesImage = regex.test(b);
+
+        if (aIncludesImage && !bIncludesImage) {
+          return -1;
+        }
+
+        if (!aIncludesImage && bIncludesImage) {
+          return 1;
+        }
+
+        return 0;
+      });
+  } catch (err) {
+    return [];
+  }
+};

package/src/cli/index.js

@@ -24,6 +24,7 @@ const getAnswersDefaultValues = require('./getAnswersDefaultValues');
 const getAttributesFromIndex = require('./getAttributesFromIndex');
 const getConfiguration = require('./getConfiguration');
 const getFacetsFromIndex = require('./getFacetsFromIndex');
+const getPotentialImageAttributes = require('./getPotentialImageAttributes');
 const isQuestionAsked = require('./isQuestionAsked');
 const postProcessAnswers = require('./postProcessAnswers');
 
@@ -44,6 +45,10 @@ program
     'The attributes of your index to display in hits',
     splitArray
   )
+  .option(
+    '--image-attribute <imageAttribute>',
+    'The attribute for image display in hits'
+  )
   .option(
     '--attributes-for-faceting <attributesForFaceting>',
     'The attributes to display as filters',
@@ -159,6 +164,36 @@ const getQuestions = ({ appName }) => ({
       when: ({ appId, apiKey, indexName }) =>
         attributesToDisplay.length === 0 && appId && apiKey && indexName,
     },
+    {
+      type: 'list',
+      name: 'imageAttribute',
+      message: 'Attribute for image display',
+      suffix: `\n  ${chalk.gray(
+        'Used to display images in the default result template'
+      )}`,
+      pageSize: 10,
+      choices: async (answers) => [
+        {
+          name: 'None',
+          value: undefined,
+        },
+        new inquirer.Separator(),
+        new inquirer.Separator('From your index'),
+        ...(await getPotentialImageAttributes(answers)),
+      ],
+      when: ({
+        appId,
+        apiKey,
+        indexName,
+        imageAttribute,
+        attributesToDisplay: selectedAttributes,
+      }) =>
+        selectedAttributes.length > 0 &&
+        !imageAttribute &&
+        appId &&
+        apiKey &&
+        indexName,
+    },
     {
       type: 'checkbox',
       name: 'attributesForFaceting',

package/src/cli/postProcessAnswers.js

@@ -65,6 +65,9 @@ async function postProcessAnswers({
     template: templatePath,
     installation: optionsFromArguments.installation,
     currentYear: new Date().getFullYear(),
+    attributesToDisplay: combinedAnswers.attributesToDisplay?.filter(
+      (attribute) => attribute !== combinedAnswers.imageAttribute
+    ),
     attributesForFaceting:
       Array.isArray(combinedAnswers.attributesForFaceting) &&
       combinedAnswers.attributesForFaceting.filter(

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

@@ -10,14 +10,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "12.2.16",
-    "@angular/common": "12.2.16",
-    "@angular/compiler": "12.2.16",
-    "@angular/core": "12.2.16",
-    "@angular/forms": "12.2.16",
-    "@angular/platform-browser": "12.2.16",
-    "@angular/platform-browser-dynamic": "12.2.16",
-    "@angular/router": "12.2.16",
+    "@angular/animations": "15.2.10",
+    "@angular/common": "15.2.10",
+    "@angular/compiler": "15.2.10",
+    "@angular/core": "15.2.10",
+    "@angular/forms": "15.2.10",
+    "@angular/platform-browser": "15.2.10",
+    "@angular/platform-browser-dynamic": "15.2.10",
+    "@angular/router": "15.2.10",
     "algoliasearch": "4",
     "angular-instantsearch": "{{libraryVersion}}",
     "rxjs": "6.6.0",
@@ -25,9 +25,9 @@
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "12.2.16",
-    "@angular/cli": "12.2.16",
-    "@angular/compiler-cli": "12.2.16",
+    "@angular-devkit/build-angular": "15.2.10",
+    "@angular/cli": "15.2.10",
+    "@angular/compiler-cli": "15.2.10",
     "@types/jasmine": "3.8.0",
     "@types/node": "12.11.1",
     "jasmine-core": "3.8.0",
@@ -36,6 +36,6 @@
     "karma-coverage": "2.0.3",
     "karma-jasmine": "4.0.0",
     "karma-jasmine-html-reporter": "1.7.0",
-    "typescript": "4.3.5"
+    "typescript": "4.9.5"
   }
 }

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

@@ -39,6 +39,9 @@ search.addWidgets([
     templates: {
       item: (hit, { html, components }) => html`
 <article>
+  {{#if imageAttribute}}
+  <img src=${ hit.{{imageAttribute}} } alt=${ hit.{{attributesToDisplay.[0]}} } />
+  {{/if}}
   <h1>${components.Highlight({hit, attribute: "{{attributesToDisplay.[0]}}"})}</h1>
   {{#each attributesToDisplay}}
   {{#unless @first}}

package/src/templates/JavaScript Client/src/app.js.hbs

@@ -17,6 +17,9 @@ function renderHits(query) {
               `<li class="ais-hits--item">
                 <article>
                 {{#if attributesToDisplay}}
+                  {{#if imageAttribute}}
+                  <img src="${ hit.{{imageAttribute}} }" alt="${ hit.{{attributesToDisplay.[0]}} }" />
+                  {{/if}}
                   <h1>${hit._highlightResult.{{attributesToDisplay.[0]}}.value}</h1>
                   {{#each attributesToDisplay}}
                   {{#unless @first}}

package/src/templates/JavaScript Helper/src/app.js.hbs

@@ -23,6 +23,9 @@ helper.on('result', ({ results }) => {
             `<li class="ais-hits--item">
               <article>
               {{#if attributesToDisplay}}
+                {{#if imageAttribute}}
+                <img src="${ hit.{{imageAttribute}} }" alt="${ hit.{{attributesToDisplay.[0]}} }" />
+                {{/if}}
                 <h1>${hit._highlightResult.{{attributesToDisplay.[0]}}.value}</h1>
                 {{#each attributesToDisplay}}
                 {{#unless @first}}

package/src/templates/React InstantSearch/src/App.tsx.hbs

@@ -54,7 +54,7 @@ export function App() {
           <div className="search-panel">
             <div className="search-panel__filters">
               {{#if flags.dynamicWidgets}}
-              <DynamicWidgets fallback={RefinementList}>
+              <DynamicWidgets fallbackComponent={RefinementList}>
                 {{#each attributesForFaceting}}
                 <Panel header="{{this}}">
                   <RefinementList attribute="{{this}}" />
@@ -93,6 +93,9 @@ function Hit({ hit }: HitProps) {
   return (
     <article>
       {{#if attributesToDisplay}}
+      {{#if imageAttribute}}
+      <img src={ hit.{{imageAttribute}} } alt={ hit.{{attributesToDisplay.[0]}} } />
+      {{/if}}
       <h1>
         <Highlight attribute="{{attributesToDisplay.[0]}}" hit={hit} />
       </h1>

package/src/templates/Vue InstantSearch/src/App.vue

@@ -50,6 +50,9 @@
             <ais-hits>
               <template slot="item" slot-scope="{ item }">
                 <article>
+                  {{#if imageAttribute}}
+                  <img :src="item.{{imageAttribute}}" :alt="item.{{attributesToDisplay.[0]}}" />
+                  {{/if}}
                   <h1>
                     <ais-highlight
                       :hit="item"

package/src/templates/Vue InstantSearch with Vue 3/src/App.vue

@@ -49,6 +49,9 @@
             <ais-hits>
               <template v-slot:item="{ item }">
                 <article>
+                  {{#if imageAttribute}}
+                  <img :src="item.{{imageAttribute}}" :alt="item.{{attributesToDisplay.[0]}}" />
+                  {{/if}}
                   <h1>
                     <ais-highlight
                       :hit="item"