feat(react): attach Algolia agents in React renderer

francoischalifour · Mar 10, 2020 · c6c4da5 · c6c4da5
1 parent 9b758ee
commit c6c4da5
Show file tree

Hide file tree

Showing 13 changed files with 133 additions and 88 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -22,8 +22,8 @@ module.exports = api => {
         },
       ],
     ],
-    plugins: [
-      ['@babel/plugin-transform-react-jsx'],
+    plugins: clean([
+      '@babel/plugin-transform-react-jsx',
       !isTest && [
         'inline-replace-variables',
         {
@@ -33,6 +33,74 @@ module.exports = api => {
           },
         },
       ],
-    ].filter(Boolean),
+    ]),
+    overrides: [
+      {
+        test: 'packages/autocomplete-core',
+        plugins: clean([
+          !isTest && [
+            'inline-replace-variables',
+            {
+              __DEV__: {
+                type: 'node',
+                replacement: "process.env.NODE_ENV === 'development'",
+              },
+              __VERSION__: {
+                type: 'node',
+                replacement: JSON.stringify(
+                  require('./packages/autocomplete-core/package.json').version
+                ),
+              },
+            },
+          ],
+        ]),
+      },
+      {
+        test: 'packages/autocomplete-preset-algolia',
+        plugins: clean([
+          !isTest && [
+            'inline-replace-variables',
+            {
+              __DEV__: {
+                type: 'node',
+                replacement: "process.env.NODE_ENV === 'development'",
+              },
+              __VERSION__: {
+                type: 'node',
+                replacement: JSON.stringify(
+                  require('./packages/autocomplete-preset-algolia/package.json')
+                    .version
+                ),
+              },
+            },
+          ],
+        ]),
+      },
+      {
+        test: 'packages/autocomplete-react',
+        plugins: clean([
+          '@babel/plugin-transform-react-jsx',
+          !isTest && [
+            'inline-replace-variables',
+            {
+              __DEV__: {
+                type: 'node',
+                replacement: "process.env.NODE_ENV === 'development'",
+              },
+              __VERSION__: {
+                type: 'node',
+                replacement: JSON.stringify(
+                  require('./packages/autocomplete-react/package.json').version
+                ),
+              },
+            },
+          ],
+        ]),
+      },
+    ],
   };
 };
+
+function clean(config) {
+  return config.filter(Boolean);
+}
diff --git a/packages/autocomplete-core/babel.config.js b/packages/autocomplete-core/babel.config.js
diff --git a/packages/autocomplete-core/package.json b/packages/autocomplete-core/package.json
@@ -29,8 +29,5 @@
   "sideEffects": false,
   "files": [
     "dist/"
-  ],
-  "devDependencies": {
-    "rollup-plugin-filesize": "6.2.1"
-  }
+  ]
 }
diff --git a/packages/autocomplete-core/rollup.config.js b/packages/autocomplete-core/rollup.config.js
@@ -5,16 +5,26 @@ import filesize from 'rollup-plugin-filesize';
 
 import { name } from './package.json';
 
+if (process.env.NODE_ENV === 'production' && !process.env.VERSION) {
+  throw new Error(
+    `You need to specify a valid semver environment variable 'VERSION' to run the build process (received: ${JSON.stringify(
+      process.env.VERSION
+    )}).`
+  );
+}
+
 export const sharedPlugins = [
   replace({
     __DEV__: JSON.stringify(process.env.NODE_ENV === 'development'),
+    __VERSION__: JSON.stringify(process.env.VERSION),
   }),
   resolve({
     extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
   }),
   babel({
     exclude: 'node_modules/**',
     extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+    rootMode: 'upward',
   }),
   filesize({
     showMinifiedSize: false,

diff --git a/packages/autocomplete-preset-algolia/babel.config.js b/packages/autocomplete-preset-algolia/babel.config.js
diff --git a/packages/autocomplete-preset-algolia/src/__tests__/results.test.ts b/packages/autocomplete-preset-algolia/src/__tests__/results.test.ts
@@ -105,7 +105,7 @@ describe('getAlgoliaResults', () => {
 
     expect((searchClient as Client).addAlgoliaAgent).toHaveBeenCalledTimes(1);
     expect((searchClient as Client).addAlgoliaAgent).toHaveBeenCalledWith(
-      'Autocomplete.js (version-test)'
+      'autocomplete-core (version-test)'
     );
   });
 });
@@ -196,7 +196,7 @@ describe('getAlgoliaHits', () => {
 
     expect((searchClient as Client).addAlgoliaAgent).toHaveBeenCalledTimes(1);
     expect((searchClient as Client).addAlgoliaAgent).toHaveBeenCalledWith(
-      'Autocomplete.js (version-test)'
+      'autocomplete-core (version-test)'
     );
   });
 });
diff --git a/packages/autocomplete-preset-algolia/src/results.ts b/packages/autocomplete-preset-algolia/src/results.ts
@@ -19,7 +19,7 @@ interface GetAlgoliaSourceParams {
 function getAlgoliaSource({ searchClient, queries }: GetAlgoliaSourceParams) {
   if (typeof (searchClient as Client).addAlgoliaAgent === 'function') {
     (searchClient as Client).addAlgoliaAgent(
-      `Autocomplete.js (${__VERSION__})`
+      `autocomplete-core (${__VERSION__})`
     );
   }
 

diff --git a/packages/autocomplete-react/babel.config.js b/packages/autocomplete-react/babel.config.js
diff --git a/packages/autocomplete-react/global.d.ts b/packages/autocomplete-react/global.d.ts
@@ -0,0 +1,2 @@
+declare const __DEV__: boolean;
+declare const __VERSION__: boolean;
diff --git a/packages/autocomplete-react/src/getAlgoliaHits.ts b/packages/autocomplete-react/src/getAlgoliaHits.ts
@@ -0,0 +1,17 @@
+import { getAlgoliaHits as originalGetAlgoliaHits } from '@francoischalifour/autocomplete-preset-algolia';
+
+type SearchClient = any;
+type SearchParameters = any;
+
+interface GetAlgoliaSourceParams {
+  searchClient: SearchClient;
+  queries: SearchParameters[];
+}
+
+export function getAlgoliaHits(params: GetAlgoliaSourceParams) {
+  if (typeof params.searchClient.addAlgoliaAgent === 'function') {
+    params.searchClient.addAlgoliaAgent(`autocomplete-react (${__VERSION__})`);
+  }
+
+  return originalGetAlgoliaHits(params);
+}
diff --git a/packages/autocomplete-react/src/getAlgoliaResults.ts b/packages/autocomplete-react/src/getAlgoliaResults.ts
@@ -0,0 +1,17 @@
+import { getAlgoliaResults as originalGetAlgoliaResults } from '@francoischalifour/autocomplete-preset-algolia';
+
+type SearchClient = any;
+type SearchParameters = any;
+
+interface GetAlgoliaSourceParams {
+  searchClient: SearchClient;
+  queries: SearchParameters[];
+}
+
+export function getAlgoliaResults(params: GetAlgoliaSourceParams) {
+  if (typeof params.searchClient.addAlgoliaAgent === 'function') {
+    params.searchClient.addAlgoliaAgent(`autocomplete-react (${__VERSION__})`);
+  }
+
+  return originalGetAlgoliaResults(params);
+}
diff --git a/packages/autocomplete-react/src/index.ts b/packages/autocomplete-react/src/index.ts
@@ -1 +1,9 @@
 export { Autocomplete } from './Autocomplete';
+export { getAlgoliaHits } from './getAlgoliaHits';
+export { getAlgoliaResults } from './getAlgoliaResults';
+// @TODO: provide React helpers without relying on `innerHTML`.
+export {
+  highlightAlgoliaHit,
+  reverseHighlightAlgoliaHit,
+  snippetAlgoliaHit,
+} from '@francoischalifour/autocomplete-preset-algolia';
diff --git a/stories/display.stories.tsx b/stories/display.stories.tsx
@@ -4,8 +4,10 @@ import { storiesOf } from '@storybook/html';
 import algoliasearch from 'algoliasearch/lite';
 
 import { withPlayground } from '../.storybook/decorators';
-import { Autocomplete } from '@francoischalifour/autocomplete-react';
-import { getAlgoliaHits } from '@francoischalifour/autocomplete-preset-algolia';
+import {
+  Autocomplete,
+  getAlgoliaHits,
+} from '@francoischalifour/autocomplete-react';
 
 const searchClient = algoliasearch(
   'latency',