create-instantsearch-app 7.4.1 → 7.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/package.json +3 -3
  2. package/src/cli/__tests__/postProcessAnswers.js +20 -0
  3. package/src/cli/postProcessAnswers.js +5 -3
  4. package/src/templates/InstantSearch.js/src/app.css +9 -0
  5. package/src/templates/InstantSearch.js/src/app.js.hbs +8 -6
  6. package/src/templates/JavaScript Client/src/app.css +9 -0
  7. package/src/templates/JavaScript Client/src/app.js.hbs +8 -6
  8. package/src/templates/JavaScript Helper/src/app.css +9 -0
  9. package/src/templates/JavaScript Helper/src/app.js.hbs +8 -6
  10. package/src/templates/React InstantSearch/src/App.css +9 -0
  11. package/src/templates/React InstantSearch/src/App.tsx.hbs +12 -10
  12. package/src/templates/Vue InstantSearch/src/App.vue +24 -13
  13. package/src/templates/Vue InstantSearch with Vue 3/src/App.vue +24 -13
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-instantsearch-app",
3
- "version": "7.4.1",
3
+ "version": "7.5.0",
4
4
  "license": "MIT",
5
5
  "description": "⚡️ Build InstantSearch apps at the speed of thought",
6
6
  "keywords": [
@@ -49,9 +49,9 @@
49
49
  "validate-npm-package-name": "3.0.0"
50
50
  },
51
51
  "devDependencies": {
52
- "@instantsearch/testutils": "1.24.0",
52
+ "@instantsearch/testutils": "1.26.0",
53
53
  "jest-image-snapshot": "2.12.0",
54
54
  "walk-sync": "2.0.2"
55
55
  },
56
- "gitHead": "3f061b181adf4358629406027eec8f79d2577196"
56
+ "gitHead": "9afbaecd8ae25e3b3746be05f858a83b03843102"
57
57
  }
package/src/cli/__tests__/postProcessAnswers.js CHANGED
@@ -281,3 +281,23 @@ test('removes `imageAttribute` from `attributesToDisplay`', async () => {
281
281
  })
282
282
  );
283
283
  });
284
+
285
+ test('ignores invalid input', async () => {
286
+ expect(
287
+ await postProcessAnswers({
288
+ configuration: {},
289
+ templateConfig: {},
290
+ optionsFromArguments: {},
291
+ answers: {
292
+ attributesToDisplay: 'test',
293
+ attributesForFaceting: 'test',
294
+ },
295
+ })
296
+ ).toEqual(
297
+ expect.objectContaining({
298
+ attributesForFaceting: false,
299
+ attributesToDisplay: false,
300
+ flags: { autocomplete: false, dynamicWidgets: false, insights: false },
301
+ })
302
+ );
303
+ });
package/src/cli/postProcessAnswers.js CHANGED
@@ -65,9 +65,11 @@ async function postProcessAnswers({
65
65
  template: templatePath,
66
66
  installation: optionsFromArguments.installation,
67
67
  currentYear: new Date().getFullYear(),
68
- attributesToDisplay: combinedAnswers.attributesToDisplay?.filter(
69
- (attribute) => attribute !== combinedAnswers.imageAttribute
70
- ),
68
+ attributesToDisplay:
69
+ Array.isArray(combinedAnswers.attributesToDisplay) &&
70
+ combinedAnswers.attributesToDisplay.filter(
71
+ (attribute) => attribute !== combinedAnswers.imageAttribute
72
+ ),
71
73
  attributesForFaceting:
72
74
  Array.isArray(combinedAnswers.attributesForFaceting) &&
73
75
  combinedAnswers.attributesForFaceting.filter(
package/src/templates/InstantSearch.js/src/app.css CHANGED
@@ -58,3 +58,12 @@
58
58
  margin: 2rem auto;
59
59
  text-align: center;
60
60
  }
61
+
62
+ .ais-Hits-item article {
63
+ display: flex;
64
+ }
65
+
66
+ .ais-Hits-item img {
67
+ max-height: 125px;
68
+ padding-right: 16px;
69
+ }
package/src/templates/InstantSearch.js/src/app.js.hbs CHANGED
@@ -42,12 +42,14 @@ search.addWidgets([
42
42
  {{#if imageAttribute}}
43
43
  <img src=${ hit.{{imageAttribute}} } alt=${ hit.{{attributesToDisplay.[0]}} } />
44
44
  {{/if}}
45
- <h1>${components.Highlight({hit, attribute: "{{attributesToDisplay.[0]}}"})}</h1>
46
- {{#each attributesToDisplay}}
47
- {{#unless @first}}
48
- <p>${components.Highlight({hit, attribute: "{{this}}"})}</p>
49
- {{/unless}}
50
- {{/each}}
45
+ <div>
46
+ <h1>${components.Highlight({hit, attribute: "{{attributesToDisplay.[0]}}"})}</h1>
47
+ {{#each attributesToDisplay}}
48
+ {{#unless @first}}
49
+ <p>${components.Highlight({hit, attribute: "{{this}}"})}</p>
50
+ {{/unless}}
51
+ {{/each}}
52
+ </div>
51
53
  </article>
52
54
  `,
53
55
  },
package/src/templates/JavaScript Client/src/app.css CHANGED
@@ -70,6 +70,15 @@ em {
70
70
  margin-bottom: 1rem;
71
71
  }
72
72
 
73
+ .ais-hits--item article {
74
+ display: flex;
75
+ }
76
+
77
+ .ais-hits--item img {
78
+ max-height: 125px;
79
+ padding-right: 16px;
80
+ }
81
+
73
82
  #searchBox {
74
83
  margin-bottom: 2rem;
75
84
  }
package/src/templates/JavaScript Client/src/app.js.hbs CHANGED
@@ -20,12 +20,14 @@ function renderHits(query) {
20
20
  {{#if imageAttribute}}
21
21
  <img src="${ hit.{{imageAttribute}} }" alt="${ hit.{{attributesToDisplay.[0]}} }" />
22
22
  {{/if}}
23
- <h1>${hit._highlightResult.{{attributesToDisplay.[0]}}.value}</h1>
24
- {{#each attributesToDisplay}}
25
- {{#unless @first}}
26
- <p>${hit._highlightResult.{{this}}.value}</p>
27
- {{/unless}}
28
- {{/each}}
23
+ <div>
24
+ <h1>${hit._highlightResult.{{attributesToDisplay.[0]}}.value}</h1>
25
+ {{#each attributesToDisplay}}
26
+ {{#unless @first}}
27
+ <p>${hit._highlightResult.{{this}}.value}</p>
28
+ {{/unless}}
29
+ {{/each}}
30
+ </div>
29
31
  {{else}}
30
32
  <p>
31
33
  <code>${JSON.stringify(hit).slice(0, 100)}...</code>
package/src/templates/JavaScript Helper/src/app.css CHANGED
@@ -69,6 +69,15 @@ em {
69
69
  margin-bottom: 1rem;
70
70
  }
71
71
 
72
+ .ais-hits--item article {
73
+ display: flex;
74
+ }
75
+
76
+ .ais-hits--item img {
77
+ max-height: 125px;
78
+ padding-right: 16px;
79
+ }
80
+
72
81
  #searchBox {
73
82
  margin-bottom: 2rem;
74
83
  }
package/src/templates/JavaScript Helper/src/app.js.hbs CHANGED
@@ -26,12 +26,14 @@ helper.on('result', ({ results }) => {
26
26
  {{#if imageAttribute}}
27
27
  <img src="${ hit.{{imageAttribute}} }" alt="${ hit.{{attributesToDisplay.[0]}} }" />
28
28
  {{/if}}
29
- <h1>${hit._highlightResult.{{attributesToDisplay.[0]}}.value}</h1>
30
- {{#each attributesToDisplay}}
31
- {{#unless @first}}
32
- <p>${hit._highlightResult.{{this}}.value}</p>
33
- {{/unless}}
34
- {{/each}}
29
+ <div>
30
+ <h1>${hit._highlightResult.{{attributesToDisplay.[0]}}.value}</h1>
31
+ {{#each attributesToDisplay}}
32
+ {{#unless @first}}
33
+ <p>${hit._highlightResult.{{this}}.value}</p>
34
+ {{/unless}}
35
+ {{/each}}
36
+ </div>
35
37
  {{else}}
36
38
  <p>
37
39
  <code>${JSON.stringify(hit).slice(0, 100)}...</code>
package/src/templates/React InstantSearch/src/App.css CHANGED
@@ -69,3 +69,12 @@ em {
69
69
  margin: 2rem auto;
70
70
  text-align: center;
71
71
  }
72
+
73
+ .ais-Hits-item article {
74
+ display: flex;
75
+ }
76
+
77
+ .ais-Hits-item img {
78
+ max-height: 125px;
79
+ padding-right: 16px;
80
+ }
package/src/templates/React InstantSearch/src/App.tsx.hbs CHANGED
@@ -96,16 +96,18 @@ function Hit({ hit }: HitProps) {
96
96
  {{#if imageAttribute}}
97
97
  <img src={ hit.{{imageAttribute}} } alt={ hit.{{attributesToDisplay.[0]}} } />
98
98
  {{/if}}
99
- <h1>
100
- <Highlight attribute="{{attributesToDisplay.[0]}}" hit={hit} />
101
- </h1>
102
- {{#each attributesToDisplay}}
103
- {{#unless @first}}
104
- <p>
105
- <Highlight attribute="{{this}}" hit={hit} />
106
- </p>
107
- {{/unless}}
108
- {{/each}}
99
+ <div>
100
+ <h1>
101
+ <Highlight attribute="{{attributesToDisplay.[0]}}" hit={hit} />
102
+ </h1>
103
+ {{#each attributesToDisplay}}
104
+ {{#unless @first}}
105
+ <p>
106
+ <Highlight attribute="{{this}}" hit={hit} />
107
+ </p>
108
+ {{/unless}}
109
+ {{/each}}
110
+ </div>
109
111
  {{else}}
110
112
  <p>
111
113
  <code>{JSON.stringify(hit).slice(0, 100)}...</code>
package/src/templates/Vue InstantSearch/src/App.vue CHANGED
@@ -53,19 +53,21 @@
53
53
  {{#if imageAttribute}}
54
54
  <img :src="item.{{imageAttribute}}" :alt="item.{{attributesToDisplay.[0]}}" />
55
55
  {{/if}}
56
- <h1>
57
- <ais-highlight
58
- :hit="item"
59
- attribute="{{attributesToDisplay.[0]}}"
60
- />
61
- </h1>
62
- {{#each attributesToDisplay}}
63
- {{#unless @first}}
64
- <p>
65
- <ais-highlight :hit="item" attribute="{{this}}" />
66
- </p>
67
- {{/unless}}
68
- {{/each}}
56
+ <div>
57
+ <h1>
58
+ <ais-highlight
59
+ :hit="item"
60
+ attribute="{{attributesToDisplay.[0]}}"
61
+ />
62
+ </h1>
63
+ {{#each attributesToDisplay}}
64
+ {{#unless @first}}
65
+ <p>
66
+ <ais-highlight :hit="item" attribute="{{this}}" />
67
+ </p>
68
+ {{/unless}}
69
+ {{/each}}
70
+ </div>
69
71
  </article>
70
72
  </template>
71
73
  </ais-hits>
@@ -167,4 +169,13 @@ em {
167
169
  margin: 2rem auto;
168
170
  text-align: center;
169
171
  }
172
+
173
+ .ais-Hits-item article {
174
+ display: flex;
175
+ }
176
+
177
+ .ais-Hits-item img {
178
+ max-height: 125px;
179
+ padding-right: 16px;
180
+ }
170
181
  </style>
package/src/templates/Vue InstantSearch with Vue 3/src/App.vue CHANGED
@@ -52,19 +52,21 @@
52
52
  {{#if imageAttribute}}
53
53
  <img :src="item.{{imageAttribute}}" :alt="item.{{attributesToDisplay.[0]}}" />
54
54
  {{/if}}
55
- <h1>
56
- <ais-highlight
57
- :hit="item"
58
- attribute="{{attributesToDisplay.[0]}}"
59
- />
60
- </h1>
61
- {{#each attributesToDisplay}}
62
- {{#unless @first}}
63
- <p>
64
- <ais-highlight :hit="item" attribute="{{this}}" />
65
- </p>
66
- {{/unless}}
67
- {{/each}}
55
+ <div>
56
+ <h1>
57
+ <ais-highlight
58
+ :hit="item"
59
+ attribute="{{attributesToDisplay.[0]}}"
60
+ />
61
+ </h1>
62
+ {{#each attributesToDisplay}}
63
+ {{#unless @first}}
64
+ <p>
65
+ <ais-highlight :hit="item" attribute="{{this}}" />
66
+ </p>
67
+ {{/unless}}
68
+ {{/each}}
69
+ </div>
68
70
  </article>
69
71
  </template>
70
72
  </ais-hits>
@@ -171,4 +173,13 @@ em {
171
173
  margin: 2rem auto;
172
174
  text-align: center;
173
175
  }
176
+
177
+ .ais-Hits-item article {
178
+ display: flex;
179
+ }
180
+
181
+ .ais-Hits-item img {
182
+ max-height: 125px;
183
+ padding-right: 16px;
184
+ }
174
185
  </style>