npm - create-instantsearch-app - Versions diffs - 4.10.3 → 5.0.1 - Mend

create-instantsearch-app 4.10.3 → 5.0.1

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 (63) hide show

package/src/templates/Autocomplete/README.md ADDED Viewed

@@ -0,0 +1,21 @@
+# {{name}}
+_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
+## Get started
+To run this project locally, install the dependencies and run the local server:
+```sh
+npm install
+npm start
+```
+Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
+```sh
+yarn
+yarn start
+```
+Open http://localhost:3000 to see your app.

package/src/templates/Autocomplete/app.js.hbs ADDED Viewed

@@ -0,0 +1,53 @@
+/** @jsx h */
+import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
+import algoliasearch from 'algoliasearch';
+import { h } from 'preact';
+import '@algolia/autocomplete-theme-classic';
+const searchClient = algoliasearch('{{appId}}', '{{apiKey}}');
+autocomplete({
+  container: '#autocomplete',
+  placeholder: '{{placeholder}}',
+  debug: true,
+  getSources({ query }) {
+    return [
+      {
+        sourceId: 'items',
+        getItems() {
+          return getAlgoliaResults({
+            searchClient,
+            queries: [
+              {
+                indexName: '{{indexName}}',
+                query,
+              },
+            ],
+          });
+        },
+        templates: {
+          item({ item, components }) {
+            return (
+              <div className="aa-ItemWrapper">
+                <div className="aa-ItemContent">
+                  <div className="aa-ItemContentBody">
+                    <div className="aa-ItemContentTitle">
+                      <components.Highlight
+                        hit={item}
+                        attribute="{{attributesToDisplay.[0]}}"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          },
+          noResults() {
+            return 'No matching items.';
+          },
+        },
+      },
+    ];
+  },
+});

package/src/templates/Autocomplete/favicon.png ADDED Viewed

Binary file

package/src/templates/Autocomplete/index.html.hbs ADDED Viewed

@@ -0,0 +1,19 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
+    <link rel="stylesheet" href="style.css" />
+    <title>{{name}}</title>
+  </head>
+  <body>
+    <div class="container">
+      <div id="autocomplete"></div>
+    </div>
+    <script src="app.js"></script>
+  </body>
+</html>

package/src/templates/Autocomplete/manifest.webmanifest ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "short_name": "{{name}}",
+  "name": "{{name}} Sample",
+  "icons": [
+    {
+      "src": "favicon.png",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/src/templates/Autocomplete/package.json ADDED Viewed

@@ -0,0 +1,36 @@
+{
+  "name": "{{name}}",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "parcel build index.html",
+    "start": "parcel index.html --port 3000",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@algolia/autocomplete-js": "{{libraryVersion}}",
+    "@algolia/autocomplete-theme-classic": "{{libraryVersion}}",
+    "algoliasearch": "4.10.5",
+    "preact": "10.5.14"
+  },
+  "devDependencies": {
+    "babel-eslint": "10.1.0",
+    "eslint": "7.32.0",
+    "eslint-config-algolia": "19.0.2",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-eslint-comments": "3.2.0",
+    "eslint-plugin-import": "2.24.2",
+    "eslint-plugin-jsdoc": "36.1.0",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.26.0",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "parcel": "2.0.0-beta.2",
+    "prettier": "1.19.1"
+  },
+  "keywords": [
+    "algolia",
+    "autocomplete",
+    "javascript"
+  ]
+}

package/src/templates/Autocomplete/style.css ADDED Viewed

@@ -0,0 +1,20 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  background-color: rgb(244, 244, 249);
+  color: rgb(65, 65, 65);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding: 1rem;
+}
+.container {
+  margin: 0 auto;
+  max-width: 640px;
+  width: 100%;
+}

package/src/templates/{Autocomplete.js → Autocomplete.js 0}/.editorconfig RENAMED Viewed

File without changes

package/src/templates/{Autocomplete.js → Autocomplete.js 0}/.eslintignore RENAMED Viewed

File without changes

package/src/templates/{Autocomplete.js → Autocomplete.js 0}/.eslintrc.js RENAMED Viewed

File without changes

package/src/templates/{Autocomplete.js → Autocomplete.js 0}/.gitignore.template RENAMED Viewed

File without changes

package/src/templates/{Autocomplete.js → Autocomplete.js 0}/.prettierrc RENAMED Viewed

File without changes

package/src/templates/{Autocomplete.js/.template.js → Autocomplete.js 0/.template.js } RENAMED Viewed

@@ -3,7 +3,7 @@ const teardown = require('../../tasks/node/teardown');
 module.exports = {
   libraryName: 'autocomplete.js',
-  templateName: 'autocomplete.js',
+  templateName: 'autocomplete.js-0.x',
   appName: 'autocomplete.js-app',
   keywords: ['algolia', 'Autocomplete', 'autocomplete.js'],
   tasks: {

package/src/templates/{Autocomplete.js → Autocomplete.js 0}/README.md RENAMED Viewed

File without changes

package/src/templates/{Autocomplete.js → Autocomplete.js 0}/favicon.png RENAMED Viewed

File without changes

package/src/templates/{Autocomplete.js → Autocomplete.js 0}/index.html.hbs RENAMED Viewed

File without changes

package/src/templates/{Autocomplete.js → Autocomplete.js 0}/manifest.webmanifest RENAMED Viewed

File without changes

package/src/templates/{Autocomplete.js → Autocomplete.js 0}/package.json RENAMED Viewed

File without changes

package/src/templates/{Autocomplete.js → Autocomplete.js 0}/src/app.css RENAMED Viewed

File without changes

package/src/templates/{Autocomplete.js → Autocomplete.js 0}/src/app.js.hbs RENAMED Viewed

File without changes

package/src/templates/{Autocomplete.js → Autocomplete.js 0}/src/index.css RENAMED Viewed

File without changes

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

@@ -5,6 +5,9 @@ module.exports = {
   category: 'Web',
   libraryName: 'instantsearch.js',
   supportedVersion: '>= 3.0.0 < 5.0.0',
+  flags: {
+    dynamicWidgets: '>= 4.30',
+  },
   templateName: 'instantsearch.js',
   appName: 'instantsearch.js-app',
   keywords: ['algolia', 'InstantSearch', 'Vanilla', 'instantsearch.js'],

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

@@ -31,14 +31,16 @@
   <div class="container">
     <div class="search-panel">
-      {{#if attributesForFaceting}}
       <div class="search-panel__filters">
+        {{#if flags.dynamicWidgets}}
+        <div id="dynamic-widgets"></div>
+        {{else}}
         {{#each attributesForFaceting}}
         <div id="{{this}}-list"></div>
         {{/each}}
+        {{/if}}
       </div>
-      {{/if}}
       <div class="search-panel__results">
         <div id="searchbox"></div>
         <div id="hits"></div>

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

@@ -31,12 +31,36 @@ search.addWidgets([
     },
     {{/if}}
   }),
+  {{#if flags.dynamicWidgets}}
+  instantsearch.widgets.configure({
+    facets: ['*'],
+    maxValuesPerFacet: 20,
+  }),
+  instantsearch.widgets.dynamicWidgets({
+    container: '#dynamic-widgets',
+    fallbackWidget({ container, attribute }) {
+      return instantsearch.widgets.refinementList({
+        container,
+        attribute,
+      });
+    },
+    widgets: [
+      {{#each attributesForFaceting}}
+      container => instantsearch.widgets.refinementList({
+          container,
+          attribute: '{{this}}',
+        }),
+      {{/each}}
+    ],
+  }),
+  {{else}}
   {{#each attributesForFaceting}}
   instantsearch.widgets.refinementList({
     container: '#{{this}}-list',
     attribute: '{{this}}',
   }),
   {{/each}}
+  {{/if}}
   instantsearch.widgets.pagination({
     container: '#pagination',
   }),

package/src/templates/React InstantSearch/.template.js CHANGED Viewed

@@ -4,6 +4,10 @@ const teardown = require('../../tasks/node/teardown');
 module.exports = {
   category: 'Web',
   libraryName: 'react-instantsearch-dom',
+  supportedVersion: '>= 5.0.0 < 7.0.0',
+  flags: {
+    dynamicWidgets: '>=6.12',
+  },
   templateName: 'react-instantsearch',
   appName: 'react-instantsearch-app',
   keywords: ['algolia', 'InstantSearch', 'React', 'react-instantsearch'],

package/src/templates/React InstantSearch/src/App.js.hbs CHANGED Viewed

@@ -4,6 +4,10 @@ import {
   InstantSearch,
   Hits,
   SearchBox,
+  {{#if flags.dynamicWidgets}}
+  Configure,
+  ExperimentalDynamicWidgets,
+  {{/if}}
   {{#if attributesForFaceting}}
   RefinementList,
   {{/if}}
@@ -35,14 +39,21 @@ function App() {
       <div className="container">
         <InstantSearch searchClient={searchClient} indexName="{{indexName}}">
           <div className="search-panel">
-            {{#if attributesForFaceting}}
             <div className="search-panel__filters">
+              {{#if flags.dynamicWidgets}}
+              <Configure facets={['*']} maxValuesPerFacet={20} />
+              <ExperimentalDynamicWidgets fallbackWidget={RefinementList}>
+                {{#each attributesForFaceting}}
+                <RefinementList attribute="{{this}}" />
+                {{/each}}
+              </ExperimentalDynamicWidgets>
+              {{else}}
               {{#each attributesForFaceting}}
               <RefinementList attribute="{{this}}" />
               {{/each}}
+              {{/if}}
             </div>
-            {{/if}}
             <div className="search-panel__results">
               <SearchBox
                 className="searchbox"

package/src/templates/Vue InstantSearch/.template.js CHANGED Viewed

@@ -4,8 +4,11 @@ const teardown = require('../../tasks/node/teardown');
 module.exports = {
   category: 'Web',
   libraryName: 'vue-instantsearch',
-  templateName: 'vue-instantsearch',
   supportedVersion: '>= 3.0.0 < 5.0.0',
+  flags: {
+    dynamicWidgets: '>=3.8.0',
+  },
+  templateName: 'vue-instantsearch',
   appName: 'vue-instantsearch-app',
   keywords: ['algolia', 'InstantSearch', 'Vue', 'vue-instantsearch'],
   tasks: {

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

@@ -17,14 +17,21 @@
     <div class="container">
       <ais-instant-search :search-client="searchClient" index-name="{{indexName}}">
         <div class="search-panel">
-          {{#if attributesForFaceting.length}}
           <div class="search-panel__filters">
+            {{#if flags.dynamicWidgets}}
+            <ais-configure :facets="['*']" :max-values-per-facet.camel="20" />
+            <ais-experimental-dynamic-widgets>
+              {{#each attributesForFaceting}}
+              <ais-refinement-list attribute="{{this}}" />
+              {{/each}}
+            </ais-experimental-dynamic-widgets>
+            {{else}}
             {{#each attributesForFaceting}}
             <ais-refinement-list attribute="{{this}}" />
             {{/each}}
+            {{/if}}
           </div>
-          {{/if}}
           <div class="search-panel__results">
             <div class="searchbox">
               <ais-search-box placeholder="{{searchPlaceholder}}" />

package/src/utils/__tests__/__snapshots__/index.test.js.snap CHANGED Viewed

@@ -5,7 +5,3 @@ exports[`checkAppName throws with correct error message 1`] = `
   - name cannot start with a period
   - name can only contain URL-friendly characters"
 `;
-exports[`checkAppPath with existing file as path should throw with correct error 1`] = `"Could not create project at path [31mpath[39m because a file of the same name already exists."`;
-exports[`checkAppPath with non empty directory as path should throw with correct error 1`] = `"Could not create project in destination folder \\"[31mpath[39m\\" because it is not empty."`;

package/src/utils/__tests__/index.test.js CHANGED Viewed

@@ -23,7 +23,7 @@ describe('checkAppName', () => {
 });
 describe('checkAppPath', () => {
-  describe('with non existant directory as path', () => {
+  describe('with non existing directory as path', () => {
     beforeAll(() => {
       mockExistsSync.mockImplementation(() => false);
     });
@@ -45,7 +45,11 @@ describe('checkAppPath', () => {
     });
     test('should throw with correct error', () => {
-      expect(() => utils.checkAppPath('path')).toThrowErrorMatchingSnapshot();
+      expect(() =>
+        utils.checkAppPath('path')
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"Could not create project in destination folder \\"[31mpath[39m\\" because it is not empty."`
+      );
     });
     afterAll(() => {
@@ -64,7 +68,31 @@ describe('checkAppPath', () => {
     });
     test('should throw with correct error', () => {
-      expect(() => utils.checkAppPath('path')).toThrowErrorMatchingSnapshot();
+      expect(() =>
+        utils.checkAppPath('path')
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"Could not create project at path [31mpath[39m because a file of the same name already exists."`
+      );
+    });
+    afterAll(() => {
+      mockExistsSync.mockReset();
+      mockLstatSync.mockReset();
+    });
+  });
+  describe('with empty string as path', () => {
+    beforeAll(() => {
+      mockExistsSync.mockImplementation(() => false);
+      mockLstatSync.mockImplementation(() => ({
+        isDirectory: () => false,
+      }));
+    });
+    test('should throw with correct error', () => {
+      expect(() => utils.checkAppPath('')).toThrowErrorMatchingInlineSnapshot(
+        `"Could not create project without directory"`
+      );
     });
     afterAll(() => {

package/src/utils/index.js CHANGED Viewed

@@ -56,6 +56,10 @@ function checkAppPath(appPath) {
     }
   }
+  if (!appPath) {
+    throw new Error('Could not create project without directory');
+  }
   return true;
 }
@@ -126,7 +130,9 @@ function getTemplatePath(templateName) {
 }
 async function fetchLibraryVersions(libraryName) {
-  const library = await index.getObject(libraryName);
+  const library = await index.getObject(libraryName, {
+    attributesToRetrieve: ['versions'],
+  });
   return Object.keys(library.versions).reverse();
 }
@@ -147,6 +153,12 @@ async function getEarliestLibraryVersion(...args) {
   return await getLibraryVersion(...args)(semver.minSatisfying);
 }
+const splitArray = string =>
+  string
+    .split(',')
+    .filter(Boolean)
+    .map(x => x.trim());
 module.exports = {
   checkAppName,
   checkAppPath,
@@ -158,4 +170,5 @@ module.exports = {
   getAllTemplates,
   getTemplatePath,
   getTemplatesByCategory,
+  splitArray,
 };

package/src/cli/__tests__/getOptionsFromArguments.test.js DELETED Viewed

@@ -1,72 +0,0 @@
-const getOptionsFromArguments = require('../getOptionsFromArguments');
-test('with a single option', () => {
-  expect(getOptionsFromArguments('cmd --appId APP_ID'.split(' '))).toEqual({
-    appId: 'APP_ID',
-  });
-});
-test('with multiple options', () => {
-  expect(
-    getOptionsFromArguments([
-      'cmd',
-      '--appId',
-      'APP_ID',
-      '--apiKey',
-      'API_KEY',
-      '--indexName',
-      'INDEX_NAME',
-      '--template',
-      'Vue InstantSearch',
-    ])
-  ).toEqual({
-    appId: 'APP_ID',
-    apiKey: 'API_KEY',
-    indexName: 'INDEX_NAME',
-    template: 'Vue InstantSearch',
-  });
-});
-test('with different commands', () => {
-  expect(
-    getOptionsFromArguments(['yarn', 'start', '--appId', 'APP_ID'])
-  ).toEqual({
-    appId: 'APP_ID',
-  });
-  expect(
-    getOptionsFromArguments(['node', 'index', '--appId', 'APP_ID'])
-  ).toEqual({
-    appId: 'APP_ID',
-  });
-  expect(
-    getOptionsFromArguments([
-      'npm',
-      'init',
-      'instantsearch-app',
-      '--appId',
-      'APP_ID',
-    ])
-  ).toEqual({
-    appId: 'APP_ID',
-  });
-  expect(
-    getOptionsFromArguments([
-      'yarn',
-      'create',
-      'instantsearch-app',
-      '--appId',
-      'APP_ID',
-    ])
-  ).toEqual({
-    appId: 'APP_ID',
-  });
-  expect(
-    getOptionsFromArguments(['create-instantsearch-app', '--appId', 'APP_ID'])
-  ).toEqual({
-    appId: 'APP_ID',
-  });
-});

package/src/cli/getOptionsFromArguments.js DELETED Viewed

@@ -1,21 +0,0 @@
-const camelCase = require('lodash.camelcase');
-module.exports = function getOptionsFromArguments(rawArgs) {
-  let argIndex = 0;
-  return rawArgs.reduce((allArgs, currentArg) => {
-    argIndex++;
-    if (!currentArg.startsWith('--') || currentArg.startsWith('--no-')) {
-      return allArgs;
-    }
-    const argumentName = camelCase(currentArg.split('--')[1]);
-    const argumentValue = rawArgs[argIndex];
-    return {
-      ...allArgs,
-      [argumentName]: argumentValue,
-    };
-  }, {});
-};