create-instantsearch-app 4.10.2 → 5.0.0

package/src/cli/getInformationFromIndex.js

@@ -0,0 +1,40 @@
+const algoliasearch = require('algoliasearch');
+const { createInMemoryCache } = require('@algolia/cache-in-memory');
+
+const clients = new Map();
+function getClient(appId, apiKey) {
+  const key = [appId, apiKey].join('__');
+  let client = clients.get(key);
+  if (!client) {
+    client = algoliasearch(appId, apiKey, {
+      responsesCache: createInMemoryCache(),
+      requestsCache: createInMemoryCache(),
+    });
+
+    clients.set(key, client);
+  }
+
+  return client;
+}
+
+async function getInformationFromIndex({ appId, apiKey, indexName }) {
+  try {
+    const client = getClient(appId, apiKey);
+    return await client
+      .search([
+        {
+          indexName,
+          params: {
+            hitsPerPage: 1,
+            facets: '*',
+            maxValuesPerFacet: 1,
+          },
+        },
+      ])
+      .then(({ results: [result] }) => result);
+  } catch (err) {
+    return {};
+  }
+}
+
+module.exports = getInformationFromIndex;

package/src/cli/index.js

@@ -1,11 +1,12 @@
 #!/usr/bin/env node
 const path = require('path');
 const process = require('process');
+const os = require('os');
 const program = require('commander');
 const inquirer = require('inquirer');
 const chalk = require('chalk');
 const latestSemver = require('latest-semver');
-const os = require('os');
+const semver = require('semver');
 
 const createInstantSearchApp = require('../api');
 const {
@@ -15,22 +16,22 @@ const {
   fetchLibraryVersions,
   getTemplatesByCategory,
   getTemplatePath,
+  splitArray,
 } = require('../utils');
-const getOptionsFromArguments = require('./getOptionsFromArguments');
 const getAttributesFromIndex = require('./getAttributesFromIndex');
+const getFacetsFromIndex = require('./getFacetsFromIndex');
+const getAnswersDefaultValues = require('./getAnswersDefaultValues');
 const isQuestionAsked = require('./isQuestionAsked');
-const {
-  getConfiguration,
-  getLibraryVersion,
-  createNameAlternatives,
-} = require('./getConfiguration');
+const getConfiguration = require('./getConfiguration');
+const postProcessAnswers = require('./postProcessAnswers');
 const { version } = require('../../package.json');
 
 let appPathFromArgument;
-let options = {};
 
 program
+  .storeOptionsAsProperties(false)
   .version(version, '-v, --version')
+  .name('create-instantsearch-app')
   .arguments('<project-directory>')
   .usage(`${chalk.green('<project-directory>')} [options]`)
   .option('--name <name>', 'The name of the application or widget')
@@ -39,27 +40,29 @@ program
   .option('--index-name <indexName>', 'The main index of your search')
   .option(
     '--attributes-to-display <attributesToDisplay>',
-    'The attributes of your index to display'
+    'The attributes of your index to display in hits',
+    splitArray
   )
   .option(
     '--attributes-for-faceting <attributesForFaceting>',
-    'The attributes for faceting'
+    'The attributes to display as filters',
+    splitArray
   )
   .option('--template <template>', 'The InstantSearch template to use')
   .option('--library-version <version>', 'The version of the library')
   .option('--config <config>', 'The configuration file to get the options from')
   .option('--no-installation', 'Ignore dependency installation')
-  .action((dest, opts) => {
+  .option('--no-interactive', 'Ask no interactive questions')
+  .action(dest => {
     appPathFromArgument = dest;
-    options = opts;
   })
   .parse(process.argv);
 
-const optionsFromArguments = getOptionsFromArguments(options.rawArgs || []);
-const attributesToDisplay = (optionsFromArguments.attributesToDisplay || '')
-  .split(',')
-  .filter(Boolean)
-  .map(x => x.trim());
+const optionsFromArguments = program.opts();
+const {
+  attributesToDisplay = [],
+  attributesForFaceting = [],
+} = optionsFromArguments;
 
 const getQuestions = ({ appName }) => ({
   application: [
@@ -153,7 +156,49 @@ const getQuestions = ({ appName }) => ({
       ],
       filter: attributes => attributes.filter(Boolean),
       when: ({ appId, apiKey, indexName }) =>
-        !attributesToDisplay.length > 0 && appId && apiKey && indexName,
+        attributesToDisplay.length === 0 && appId && apiKey && indexName,
+    },
+    {
+      type: 'checkbox',
+      name: 'attributesForFaceting',
+      message: 'Attributes to display',
+      suffix: `\n  ${chalk.gray('Used to filter the search interface')}`,
+      pageSize: 10,
+      choices: async answers => {
+        const templatePath = getTemplatePath(answers.template);
+        const templateConfig = getAppTemplateConfig(templatePath);
+
+        const selectedLibraryVersion = answers.libraryVersion;
+        const requiredLibraryVersion =
+          templateConfig.flags && templateConfig.flags.dynamicWidgets;
+        const supportsDynamicWidgets =
+          selectedLibraryVersion &&
+          requiredLibraryVersion &&
+          semver.satisfies(selectedLibraryVersion, requiredLibraryVersion, {
+            includePrerelease: true,
+          });
+
+        const dynamicWidgets = supportsDynamicWidgets
+          ? [
+              {
+                name: 'Dynamic widgets',
+                value: 'ais.dynamicWidgets',
+                checked: true,
+              },
+              new inquirer.Separator(),
+            ]
+          : [];
+
+        return [
+          ...dynamicWidgets,
+          new inquirer.Separator('From your index'),
+          ...(await getFacetsFromIndex(answers)),
+          new inquirer.Separator(),
+        ];
+      },
+      filter: attributes => attributes.filter(Boolean),
+      when: ({ appId, apiKey, indexName }) =>
+        attributesForFaceting.length === 0 && appId && apiKey && indexName,
     },
   ],
   widget: [
@@ -179,95 +224,141 @@ const getQuestions = ({ appName }) => ({
       },
     },
   ],
-});
+  initial: [
+    {
+      type: 'input',
+      name: 'appPath',
+      message: 'Project directory',
+      askAnswered: true,
+      validate(input) {
+        try {
+          return checkAppPath(input);
+        } catch (err) {
+          console.log();
+          console.error(err.message);
+          return false;
+        }
+      },
+      when(answers) {
+        try {
+          return (
+            answers.interactive &&
+            !answers.config &&
+            !checkAppPath(answers.appPath)
+          );
+        } catch (err) {
+          return true;
+        }
+      },
+    },
+    {
+      type: 'input',
+      name: 'appName',
+      message: 'The name of the application or widget',
+      askAnswered: true,
+      default(answers) {
+        return path.basename(answers.appPath);
+      },
+      validate(input) {
+        try {
+          return checkAppName(input);
+        } catch (err) {
+          console.log();
+          console.error(err.message);
+          return false;
+        }
+      },
+      when(answers) {
+        try {
+          return (
+            answers.interactive &&
+            !answers.config &&
+            !checkAppName(answers.appName)
+          );
+        } catch (err) {
+          return true;
+        }
+      },
+    },
+    {
+      type: 'list',
+      pageSize: 10,
+      name: 'template',
+      message: 'InstantSearch template',
+      askAnswered: true,
+      choices: () => {
+        const templatesByCategory = getTemplatesByCategory();
 
-async function run() {
-  let appPath = appPathFromArgument;
-  if (!appPath) {
-    const answers = await inquirer.prompt([
-      {
-        type: 'input',
-        name: 'appPath',
-        message: 'Project directory',
+        return Object.entries(templatesByCategory).reduce(
+          (templates, [category, values]) => [
+            ...templates,
+            new inquirer.Separator(category),
+            ...values,
+          ],
+          []
+        );
       },
-    ]);
-    appPath = answers.appPath;
-  }
-  if (appPath.startsWith('~/')) {
-    appPath = path.join(os.homedir(), appPath.slice(2));
-  }
-  try {
-    checkAppPath(appPath);
-  } catch (err) {
-    console.error(err.message);
-    console.log();
+      validate(input) {
+        // if a config is given, path is optional
+        if (optionsFromArguments.config) {
+          return true;
+        }
 
-    process.exit(1);
-  }
+        const isValid = Boolean(input);
+        if (!isValid) {
+          console.log('template is required');
+        }
+        return isValid;
+      },
+      when(answers) {
+        return answers.interactive && !answers.config && !answers.template;
+      },
+    },
+  ],
+});
 
-  let appName = optionsFromArguments.name;
-  if (!appName) {
-    appName = (
-      await inquirer.prompt([
-        {
-          type: 'input',
-          name: 'appName',
-          message: 'The name of the application or widget',
-          default: path.basename(appPath),
-        },
-      ])
-    ).appName;
-  }
+async function run() {
+  const args = {
+    ...optionsFromArguments,
+    appPath: appPathFromArgument,
+    appName: optionsFromArguments.name,
+  };
+  const initialQuestions = getQuestions({}).initial;
+  const initialAnswers = {
+    ...args,
+    ...(await inquirer.prompt(initialQuestions, args)),
+  };
 
-  try {
-    checkAppName(appName);
-  } catch (err) {
-    console.error(err.message);
-    console.log();
+  initialQuestions.forEach(question => {
+    // .default doesn't get executed when "when" returns false
+    if (!initialAnswers[question.name] && question.default) {
+      const defaultValue = question.default(initialAnswers);
+      initialAnswers[question.name] = defaultValue;
+    }
+    if (!question.validate(initialAnswers[question.name])) {
+      process.exit(1);
+    }
+  });
 
-    process.exit(1);
+  if (initialAnswers.appPath.startsWith('~/')) {
+    initialAnswers.appPath = path.join(
+      os.homedir(),
+      initialAnswers.appPath.slice(2)
+    );
   }
 
+  const { appPath, appName, template } = initialAnswers;
+
   console.log();
   console.log(`Creating a new InstantSearch app in ${chalk.green(appPath)}.`);
   console.log();
 
-  const { template = optionsFromArguments.template } = await inquirer.prompt(
-    [
-      {
-        type: 'list',
-        pageSize: 10,
-        name: 'template',
-        message: 'InstantSearch template',
-        choices: () => {
-          const templatesByCategory = getTemplatesByCategory();
-
-          return Object.entries(templatesByCategory).reduce(
-            (templates, [category, values]) => [
-              ...templates,
-              new inquirer.Separator(category),
-              ...values,
-            ],
-            []
-          );
-        },
-        validate(input) {
-          return Boolean(input);
-        },
-      },
-    ].filter(question =>
-      isQuestionAsked({ question, args: optionsFromArguments })
-    ),
-    optionsFromArguments
-  );
-
   const configuration = await getConfiguration({
     options: {
       ...optionsFromArguments,
       name: appName,
-      attributesToDisplay,
     },
-    answers: { template },
+    answers: initialAnswers,
   });
 
   const templatePath = getTemplatePath(configuration.template);
@@ -277,34 +368,21 @@ async function run() {
     templateConfig.category === 'Widget' ? 'widget' : 'application';
 
   const answers = await inquirer.prompt(
-    getQuestions({ appName })[implementationType].filter(question =>
-      isQuestionAsked({ question, args: optionsFromArguments })
+    getQuestions({ appName })[implementationType].filter(
+      question => !isQuestionAsked({ question, args: optionsFromArguments })
     ),
-    { ...optionsFromArguments, template }
-  );
-
-  const alternativeNames = createNameAlternatives({
-    ...configuration,
-    ...answers,
-    templateConfig,
-  });
-
-  const libraryVersion = await getLibraryVersion(
-    { ...configuration, ...answers },
-    templateConfig
+    getAnswersDefaultValues(optionsFromArguments, configuration, template)
   );
 
   const app = createInstantSearchApp(
     appPath,
-    {
-      ...configuration,
-      ...answers,
-      ...alternativeNames,
-      libraryVersion,
-      template: templatePath,
-      installation: program.installation,
-      currentYear: new Date().getFullYear(),
-    },
+    await postProcessAnswers({
+      configuration,
+      answers,
+      optionsFromArguments,
+      templatePath,
+      templateConfig,
+    }),
     templateConfig.tasks
   );
 

package/src/cli/isQuestionAsked.js

@@ -1,22 +1,15 @@
 module.exports = function isQuestionAsked({ question, args }) {
-  if (args.config) {
-    return false;
+  // if there's a config, ask no questions, even if it would be invalid
+  if (args.config || !args.interactive) {
+    return true;
   }
 
-  for (const optionName in args) {
-    if (question.name === optionName) {
-      // Skip if the arg in the command is valid
-      if (
-        !question.validate ||
-        (question.validate && question.validate(args[optionName]))
-      ) {
-        return false;
-      }
-    } else if (!question.validate) {
-      // Skip if the question is optional and not given in the command
-      return false;
-    }
+  const argument = args[question.name];
+
+  // Skip if the arg in the command is valid
+  if (question.validate) {
+    return question.validate(argument);
   }
 
-  return true;
+  return argument !== undefined;
 };

package/src/cli/postProcessAnswers.js

@@ -0,0 +1,77 @@
+const camelCase = require('lodash.camelcase');
+const latestSemver = require('latest-semver');
+
+const { fetchLibraryVersions } = require('../utils');
+
+function capitalize(str) {
+  return str.substr(0, 1).toUpperCase() + str.substr(1);
+}
+
+function createNameAlternatives({ organization, name, templateConfig }) {
+  return {
+    packageName: `@${organization}/${templateConfig.packageNamePrefix ||
+      ''}${name}`,
+    widgetType: `${organization}.${name}`,
+    camelCaseName: camelCase(name),
+    pascalCaseName: capitalize(camelCase(name)),
+  };
+}
+
+async function getLibraryVersion(config, templateConfig) {
+  const { libraryName } = templateConfig;
+  const { libraryVersion } = config;
+
+  if (libraryName && !libraryVersion) {
+    const versions = await fetchLibraryVersions(libraryName);
+
+    // Return the latest available version when
+    // the stable version is not available
+    return latestSemver(versions) || versions[0];
+  }
+
+  return libraryVersion;
+}
+
+async function postProcessAnswers({
+  configuration,
+  answers,
+  optionsFromArguments,
+  templatePath,
+  templateConfig,
+}) {
+  const combinedAnswers = {
+    ...configuration,
+    ...answers,
+  };
+
+  const alternativeNames = createNameAlternatives({
+    ...combinedAnswers,
+    templateConfig,
+  });
+
+  const libraryVersion = await getLibraryVersion(
+    combinedAnswers,
+    templateConfig
+  );
+
+  return {
+    ...combinedAnswers,
+    ...alternativeNames,
+    libraryVersion,
+    template: templatePath,
+    installation: optionsFromArguments.installation,
+    currentYear: new Date().getFullYear(),
+    attributesForFaceting:
+      Array.isArray(combinedAnswers.attributesForFaceting) &&
+      combinedAnswers.attributesForFaceting.filter(
+        attribute => attribute !== 'ais.dynamicWidgets'
+      ),
+    flags: {
+      dynamicWidgets:
+        Array.isArray(combinedAnswers.attributesForFaceting) &&
+        combinedAnswers.attributesForFaceting.includes('ais.dynamicWidgets'),
+    },
+  };
+}
+
+module.exports = postProcessAnswers;

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

@@ -94,6 +94,7 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/instantsearch.css/themes/satellite.css",
               "src/styles.css"
             ],
             "scripts": []

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

@@ -10,33 +10,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.2.0",
-    "@angular/common": "~12.2.0",
-    "@angular/compiler": "~12.2.0",
-    "@angular/core": "~12.2.0",
-    "@angular/forms": "~12.2.0",
-    "@angular/platform-browser": "~12.2.0",
-    "@angular/platform-browser-dynamic": "~12.2.0",
-    "@angular/router": "~12.2.0",
-    "algoliasearch": "^4.10.5",
+    "@angular/animations": "12.2.0",
+    "@angular/common": "12.2.0",
+    "@angular/compiler": "12.2.0",
+    "@angular/core": "12.2.0",
+    "@angular/forms": "12.2.0",
+    "@angular/platform-browser": "12.2.0",
+    "@angular/platform-browser-dynamic": "12.2.0",
+    "@angular/router": "12.2.0",
+    "algoliasearch": "4.10.5",
     "angular-instantsearch": "{{libraryVersion}}",
-    "rxjs": "~6.6.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "rxjs": "6.6.0",
+    "tslib": "2.3.0",
+    "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.3",
-    "@angular/cli": "~12.2.3",
-    "@angular/compiler-cli": "~12.2.0",
-    "@types/algoliasearch": "^4.0.0",
-    "@types/jasmine": "~3.8.0",
-    "@types/node": "^12.11.1",
-    "jasmine-core": "~3.8.0",
-    "karma": "~6.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.0.3",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.3.5"
+    "@angular-devkit/build-angular": "12.2.3",
+    "@angular/cli": "12.2.3",
+    "@angular/compiler-cli": "12.2.0",
+    "@types/algoliasearch": "4.0.0",
+    "@types/jasmine": "3.8.0",
+    "@types/node": "12.11.1",
+    "jasmine-core": "3.8.0",
+    "karma": "6.3.0",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-coverage": "2.0.3",
+    "karma-jasmine": "4.0.0",
+    "karma-jasmine-html-reporter": "1.7.0",
+    "typescript": "4.3.5"
   }
 }

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

@@ -6,6 +6,7 @@
   <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>

package/src/templates/Angular InstantSearch/src/styles.css

@@ -1,3 +1,11 @@
 /* You can add global styles to this file, and also import other style files */
-@import "instantsearch.css/themes/reset.css";
-@import "instantsearch.css/themes/satellite.css";
+body,
+h1 {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}

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

@@ -13,6 +13,7 @@
     "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
+    "esModuleInterop": true,
     "importHelpers": true,
     "target": "es2017",
     "module": "es2020",

package/src/templates/Autocomplete/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/src/templates/Autocomplete/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+/dist
+/.cache

package/src/templates/Autocomplete/.eslintrc.js

@@ -0,0 +1,20 @@
+/* eslint-disable import/no-commonjs */
+
+module.exports = {
+  extends: ['algolia', 'algolia/react'],
+  settings: {
+    react: {
+      pragma: 'React',
+      version: 'preact',
+    },
+  },
+  rules: {
+    'jsdoc/check-tag-names': [
+      'error',
+      {
+        jsxTags: true,
+      },
+    ],
+    'react/jsx-filename-extension': 'off',
+  },
+};