feat(core): warn when using debug option

.eslintrc.js

@@ -74,7 +74,7 @@ module.exports = {
       },
     },
     {
-      files: ['scripts/**/*'],
+      files: ['scripts/**/*', '*.config.js'],
       rules: {
         'import/no-commonjs': 'off',
       },

babel.config.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-commonjs */
+const wrapWarningWithDevCheck = require('./scripts/babel/wrap-warning-with-dev-check');
 
 module.exports = (api) => {
   const isTest = api.env('test');
@@ -23,12 +23,13 @@ module.exports = (api) => {
       ],
     ],
     plugins: clean([
-      !isTest && [
+      wrapWarningWithDevCheck,
+      [
         'inline-replace-variables',
         {
           __DEV__: {
             type: 'node',
-            replacement: "process.env.NODE_ENV === 'development'",
+            replacement: "process.env.NODE_ENV !== 'production'",
           },
         },
       ],

bundlesize.config.json

@@ -1,23 +1,23 @@
 {
   "files": [
     {
-      "path": "packages/autocomplete-core/dist/umd/index.js",
+      "path": "packages/autocomplete-core/dist/umd/index.production.js",
       "maxSize": "4.5 kB"
     },
     {
-      "path": "packages/autocomplete-js/dist/umd/index.js",
+      "path": "packages/autocomplete-js/dist/umd/index.production.js",
       "maxSize": "8 kB"
     },
     {
-      "path": "packages/autocomplete-preset-algolia/dist/umd/index.js",
+      "path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",
       "maxSize": "1.5 kB"
     },
     {
-      "path": "packages/autocomplete-plugin-recent-searches/dist/umd/index.js",
+      "path": "packages/autocomplete-plugin-recent-searches/dist/umd/index.production.js",
       "maxSize": "2.5 kB"
     },
     {
-      "path": "packages/autocomplete-plugin-query-suggestions/dist/umd/index.js",
+      "path": "packages/autocomplete-plugin-query-suggestions/dist/umd/index.production.js",
       "maxSize": "2.25 kB"
     }
   ]

jest.config.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-commonjs */
-
 module.exports = {
   rootDir: process.cwd(),
   setupFilesAfterEnv: [

packages/autocomplete-core/package.json

@@ -12,10 +12,10 @@
   "source": "src/index.ts",
   "types": "dist/esm/index.d.ts",
   "module": "dist/esm/index.js",
-  "main": "dist/umd/index.js",
-  "umd:main": "dist/umd/index.js",
-  "unpkg": "dist/umd/index.js",
-  "jsdelivr": "dist/umd/index.js",
+  "main": "dist/umd/index.production.js",
+  "umd:main": "dist/umd/index.production.js",
+  "unpkg": "dist/umd/index.production.js",
+  "jsdelivr": "dist/umd/index.production.js",
   "sideEffects": false,
   "files": [
     "dist/"

packages/autocomplete-core/rollup.config.js

@@ -1,16 +1,5 @@
-import { plugins } from '../../rollup.base.config';
-import { getBundleBanner } from '../../scripts/getBundleBanner';
+import { createRollupConfigs } from '../../scripts/rollup/config';
 
 import pkg from './package.json';
 
-export default {
-  input: 'src/index.ts',
-  output: {
-    file: 'dist/umd/index.js',
-    format: 'umd',
-    sourcemap: true,
-    name: pkg.name,
-    banner: getBundleBanner(pkg),
-  },
-  plugins,
-};
+export default createRollupConfigs({ pkg });

packages/autocomplete-core/src/__tests__/checkOptions.test.ts

@@ -0,0 +1,11 @@
+import { createAutocomplete } from '../createAutocomplete';
+
+describe('Validate options', () => {
+  test('debug option warns about development usage', () => {
+    expect(() => {
+      createAutocomplete({ debug: true });
+    }).toWarnDev(
+      '[Autocomplete] The `debug` option is meant for development debugging and should not be used in production.'
+    );
+  });
+});

packages/autocomplete-core/src/checkOptions.ts

@@ -0,0 +1,10 @@
+import { warn } from '@algolia/autocomplete-shared';
+
+import { AutocompleteOptions } from './types';
+
+export function checkOptions<TItem>(option: AutocompleteOptions<TItem>) {
+  warn(
+    !option.debug,
+    'The `debug` option is meant for development debugging and should not be used in production.'
+  );
+}

packages/autocomplete-core/src/createAutocomplete.ts

@@ -1,3 +1,4 @@
+import { checkOptions } from './checkOptions';
 import { createStore } from './createStore';
 import { getAutocompleteSetters } from './getAutocompleteSetters';
 import { getDefaultProps } from './getDefaultProps';
@@ -14,6 +15,8 @@ export function createAutocomplete<
 >(
   options: AutocompleteOptions<TItem>
 ): AutocompleteApi<TItem, TEvent, TMouseEvent, TKeyboardEvent> {
+  checkOptions(options);
+
   const props = getDefaultProps(options);
   const store = createStore(stateReducer, props);
 

packages/autocomplete-js/package.json

@@ -12,10 +12,10 @@
   "source": "src/index.ts",
   "types": "dist/esm/index.d.ts",
   "module": "dist/esm/index.js",
-  "main": "dist/umd/index.js",
-  "umd:main": "dist/umd/index.js",
-  "unpkg": "dist/umd/index.js",
-  "jsdelivr": "dist/umd/index.js",
+  "main": "dist/umd/index.production.js",
+  "umd:main": "dist/umd/index.production.js",
+  "unpkg": "dist/umd/index.production.js",
+  "jsdelivr": "dist/umd/index.production.js",
   "sideEffects": false,
   "files": [
     "dist/"

packages/autocomplete-js/rollup.config.js

@@ -1,16 +1,5 @@
-import { plugins } from '../../rollup.base.config';
-import { getBundleBanner } from '../../scripts/getBundleBanner';
+import { createRollupConfigs } from '../../scripts/rollup/config';
 
 import pkg from './package.json';
 
-export default {
-  input: 'src/index.ts',
-  output: {
-    file: 'dist/umd/index.js',
-    format: 'umd',
-    sourcemap: true,
-    name: pkg.name,
-    banner: getBundleBanner(pkg),
-  },
-  plugins,
-};
+export default createRollupConfigs({ pkg });

packages/autocomplete-plugin-query-suggestions/package.json

@@ -12,10 +12,10 @@
   "source": "src/index.ts",
   "types": "dist/esm/index.d.ts",
   "module": "dist/esm/index.js",
-  "main": "dist/umd/index.js",
-  "umd:main": "dist/umd/index.js",
-  "unpkg": "dist/umd/index.js",
-  "jsdelivr": "dist/umd/index.js",
+  "main": "dist/umd/index.production.js",
+  "umd:main": "dist/umd/index.production.js",
+  "unpkg": "dist/umd/index.production.js",
+  "jsdelivr": "dist/umd/index.production.js",
   "sideEffects": false,
   "files": [
     "dist/"

packages/autocomplete-plugin-query-suggestions/rollup.config.js

@@ -1,16 +1,5 @@
-import { plugins } from '../../rollup.base.config';
-import { getBundleBanner } from '../../scripts/getBundleBanner';
+import { createRollupConfigs } from '../../scripts/rollup/config';
 
 import pkg from './package.json';
 
-export default {
-  input: 'src/index.ts',
-  output: {
-    file: 'dist/umd/index.js',
-    format: 'umd',
-    sourcemap: true,
-    name: pkg.name,
-    banner: getBundleBanner(pkg),
-  },
-  plugins,
-};
+export default createRollupConfigs({ pkg });

packages/autocomplete-plugin-recent-searches/package.json

@@ -12,10 +12,10 @@
   "source": "src/index.ts",
   "types": "dist/esm/index.d.ts",
   "module": "dist/esm/index.js",
-  "main": "dist/umd/index.js",
-  "umd:main": "dist/umd/index.js",
-  "unpkg": "dist/umd/index.js",
-  "jsdelivr": "dist/umd/index.js",
+  "main": "dist/umd/index.production.js",
+  "umd:main": "dist/umd/index.production.js",
+  "unpkg": "dist/umd/index.production.js",
+  "jsdelivr": "dist/umd/index.production.js",
   "sideEffects": false,
   "files": [
     "dist/"

packages/autocomplete-plugin-recent-searches/rollup.config.js

@@ -1,16 +1,5 @@
-import { plugins } from '../../rollup.base.config';
-import { getBundleBanner } from '../../scripts/getBundleBanner';
+import { createRollupConfigs } from '../../scripts/rollup/config';
 
 import pkg from './package.json';
 
-export default {
-  input: 'src/index.ts',
-  output: {
-    file: 'dist/umd/index.js',
-    format: 'umd',
-    sourcemap: true,
-    name: pkg.name,
-    banner: getBundleBanner(pkg),
-  },
-  plugins,
-};
+export default createRollupConfigs({ pkg });

packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts

@@ -94,6 +94,7 @@ export function createRecentSearchesPlugin<TItem extends RecentSearchesItem>({
         // because we need to resolve the promise before getting the value.
         if (!Array.isArray(lastItemsRef.current)) {
           warn(
+            false,
             'The `getAlgoliaQuerySuggestionsFacetFilters` function is not supported with storages that return promises in `getAll`.'
           );
           return params;

packages/autocomplete-preset-algolia/package.json

@@ -16,10 +16,10 @@
   "source": "src/index.ts",
   "types": "dist/esm/index.d.ts",
   "module": "dist/esm/index.js",
-  "main": "dist/umd/index.js",
-  "umd:main": "dist/umd/index.js",
-  "unpkg": "dist/umd/index.js",
-  "jsdelivr": "dist/umd/index.js",
+  "main": "dist/umd/index.production.js",
+  "umd:main": "dist/umd/index.production.js",
+  "unpkg": "dist/umd/index.production.js",
+  "jsdelivr": "dist/umd/index.production.js",
   "scripts": {
     "build:clean": "rm -rf ./dist",
     "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm --ignore '**/*/__tests__/'",

packages/autocomplete-preset-algolia/rollup.config.js

@@ -1,16 +1,5 @@
-import { plugins } from '../../rollup.base.config';
-import { getBundleBanner } from '../../scripts/getBundleBanner';
+import { createRollupConfigs } from '../../scripts/rollup/config';
 
 import pkg from './package.json';
 
-export default {
-  input: 'src/index.ts',
-  output: {
-    file: 'dist/umd/index.js',
-    format: 'umd',
-    sourcemap: true,
-    name: pkg.name,
-    banner: getBundleBanner(pkg),
-  },
-  plugins,
-};
+export default createRollupConfigs({ pkg });

packages/autocomplete-preset-algolia/src/highlight/__tests__/parseAlgoliaHitHighlight.test.ts

@@ -169,7 +169,7 @@ describe('parseAlgoliaHitHighlight', () => {
           },
         },
       });
-    }).toWarn(
+    }).toWarnDev(
       '[Autocomplete] The attribute "_highlightResult.description.value" does not exist on the hit. Did you set it in `attributesToHighlight`?' +
         '\nSee https://www.algolia.com/doc/api-reference/api-parameters/attributesToHighlight/'
     );

packages/autocomplete-preset-algolia/src/highlight/__tests__/parseAlgoliaHitReverseHighlight.test.ts

@@ -186,7 +186,7 @@ describe('parseAlgoliaHitReverseHighlight', () => {
           },
         },
       });
-    }).toWarn(
+    }).toWarnDev(
       '[Autocomplete] The attribute "_highlightResult.description.value" does not exist on the hit. Did you set it in `attributesToHighlight`?' +
         '\nSee https://www.algolia.com/doc/api-reference/api-parameters/attributesToHighlight/'
     );

packages/autocomplete-preset-algolia/src/highlight/__tests__/parseAlgoliaHitReverseSnippet.test.ts

@@ -160,7 +160,7 @@ describe('parseAlgoliaHitReverseSnippet', () => {
           },
         },
       });
-    }).toWarn(
+    }).toWarnDev(
       '[Autocomplete] The attribute "_snippetResult.description.value" does not exist on the hit. Did you set it in `attributesToSnippet`?' +
         '\nSee https://www.algolia.com/doc/api-reference/api-parameters/attributesToSnippet/'
     );

packages/autocomplete-preset-algolia/src/highlight/__tests__/parseAlgoliaHitSnippet.test.ts

@@ -160,7 +160,7 @@ describe('parseAlgoliaHitSnippet', () => {
           },
         },
       });
-    }).toWarn(
+    }).toWarnDev(
       '[Autocomplete] The attribute "_snippetResult.description.value" does not exist on the hit. Did you set it in `attributesToSnippet`?' +
         '\nSee https://www.algolia.com/doc/api-reference/api-parameters/attributesToSnippet/'
     );

packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitHighlight.ts

@@ -16,6 +16,7 @@ export function parseAlgoliaHitHighlight<THit extends Hit<{}>>({
 
   if (typeof highlightedValue !== 'string') {
     warn(
+      false,
       `The attribute ${JSON.stringify(
         path
       )} does not exist on the hit. Did you set it in \`attributesToHighlight\`?` +

packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitSnippet.ts

@@ -16,6 +16,7 @@ export function parseAlgoliaHitSnippet<THit extends Hit<{}>>({
 
   if (typeof highlightedValue !== 'string') {
     warn(
+      false,
       `The attribute ${JSON.stringify(
         path
       )} does not exist on the hit. Did you set it in \`attributesToSnippet\`?` +

packages/autocomplete-shared/global.d.ts

@@ -0,0 +1 @@
+declare const __DEV__: boolean;

packages/autocomplete-shared/src/__tests__/warn.test.ts

@@ -3,19 +3,31 @@
 import { warn } from '../warn';
 
 describe('warn', () => {
+  test('logs when the condition is unmet', () => {
+    expect(() => {
+      warn(false, 'warning');
+    }).toWarnDev('[Autocomplete] warning');
+  });
+
+  test('does not log when the condition is unmet', () => {
+    expect(() => {
+      warn(true, 'warning');
+    }).not.toWarnDev();
+  });
+
   test('trims the message', () => {
     expect(() => {
-      warn('\nwarning! ');
-    }).toWarn('[Autocomplete] warning!');
+      warn(false, '\nwarning! ');
+    }).toWarnDev('[Autocomplete] warning!');
   });
 
   test('warns a message a single time', () => {
     const originalConsoleWarn = console.warn;
     console.warn = jest.fn();
 
-    warn('warning1');
-    warn('warning1');
-    warn('warning2');
+    warn(false, 'warning1');
+    warn(false, 'warning1');
+    warn(false, 'warning2');
 
     expect(console.warn).toHaveBeenCalledTimes(2);
     expect(console.warn).toHaveBeenNthCalledWith(1, '[Autocomplete] warning1');

packages/autocomplete-shared/src/warn.ts

@@ -2,7 +2,19 @@ export const warnCache = {
   current: {},
 };
 
-export function warn(message: string) {
+/**
+ * Logs a warning if the condition is not met.
+ * This is used to log issues in development environment only.
+ */
+export function warn(condition: boolean, message: string) {
+  if (!__DEV__) {
+    return;
+  }
+
+  if (condition) {
+    return;
+  }
+
   const sanitizedMessage = message.trim();
   const hasAlreadyPrinted = warnCache.current[sanitizedMessage];
 

packages/website/docusaurus.config.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-commonjs */
-
 module.exports = {
   title: 'Autocomplete',
   tagline: 'JavaScript library for building autocomplete search experiences.',