feat(js): change renderer implementation to virtual DOM (#381)

* feat(js): change renderer implementation to virtual DOM * feat(highlighting): revamp highlighting system to VDOM (#399)
algolia · Jan 21, 2021 · 5a1efc2 · 5a1efc2
1 parent 3475d12
commit 5a1efc2
Show file tree

Hide file tree

Showing 54 changed files with 669 additions and 894 deletions.
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -6,7 +6,7 @@
     },
     {
       "path": "packages/autocomplete-js/dist/umd/index.production.js",
-      "maxSize": "10.2 kB"
+      "maxSize": "13.5 kB"
     },
     {
       "path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",
@@ -18,11 +18,11 @@
     },
     {
       "path": "packages/autocomplete-plugin-recent-searches/dist/umd/index.production.js",
-      "maxSize": "3.25 kB"
+      "maxSize": "3.5 kB"
     },
     {
       "path": "packages/autocomplete-plugin-query-suggestions/dist/umd/index.production.js",
-      "maxSize": "2.3 kB"
+      "maxSize": "2.5 kB"
     }
   ]
 }
diff --git a/examples/js/app.ts → examples/js/app.tsx b/examples/js/app.ts → examples/js/app.tsx
@@ -1,16 +1,22 @@
+/** @jsx h */
 import {
   autocomplete,
   getAlgoliaHits,
-  reverseHighlightHit,
+  highlightHit,
 } from '@algolia/autocomplete-js';
 import { createAlgoliaInsightsPlugin } from '@algolia/autocomplete-plugin-algolia-insights';
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
 import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
+import { Hit } from '@algolia/client-search';
 import algoliasearch from 'algoliasearch';
+import { h } from 'preact';
 import insightsClient from 'search-insights';
 
 import '@algolia/autocomplete-theme-classic';
 
+type Product = { name: string; image: string };
+type ProductHit = Hit<Product>;
+
 const appId = 'latency';
 const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
 const searchClient = algoliasearch(appId, apiKey);
@@ -24,16 +30,18 @@ const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
 const querySuggestionsPlugin = createQuerySuggestionsPlugin({
   searchClient,
   indexName: 'instant_search_demo_query_suggestions',
-  getSearchParams() {
+  getSearchParams({ state }) {
     return recentSearchesPlugin.data.getAlgoliaSearchParams({
       clickAnalytics: true,
+      hitsPerPage: state.query ? 5 : 10,
     });
   },
 });
 
 autocomplete({
   container: '#autocomplete',
   placeholder: 'Search',
+  debug: true,
   openOnFocus: true,
   plugins: [
     algoliaInsightsPlugin,
@@ -48,47 +56,40 @@ autocomplete({
     return [
       {
         getItems() {
-          return getAlgoliaHits({
+          return getAlgoliaHits<Product>({
             searchClient,
             queries: [{ indexName: 'instant_search', query }],
           });
         },
         templates: {
-          item({ item, root }) {
-            const itemContent = document.createElement('div');
-            const ItemSourceIcon = document.createElement('div');
-            const itemTitle = document.createElement('div');
-            const sourceIcon = document.createElement('img');
-
-            sourceIcon.width = 20;
-            sourceIcon.height = 20;
-            sourceIcon.src = item.image;
-
-            ItemSourceIcon.classList.add('aa-ItemSourceIcon');
-            ItemSourceIcon.appendChild(sourceIcon);
-
-            itemTitle.innerHTML = reverseHighlightHit({
-              hit: item,
-              attribute: 'name',
-            });
-            itemTitle.classList.add('aa-ItemTitle');
-
-            itemContent.classList.add('aa-ItemContent');
-            itemContent.appendChild(ItemSourceIcon);
-            itemContent.appendChild(itemTitle);
-
-            root.appendChild(itemContent);
+          item({ item }) {
+            return <ProductItem hit={item} />;
           },
-          empty({ root }) {
-            const itemContent = document.createElement('div');
-
-            itemContent.innerHTML = 'No results for this query';
-            itemContent.classList.add('aa-ItemContent');
-
-            root.appendChild(itemContent);
+          empty() {
+            return (
+              <div className="aa-ItemContent">No results for this query.</div>
+            );
           },
         },
       },
     ];
   },
 });
+
+type ProductItemProps = {
+  hit: ProductHit;
+};
+
+function ProductItem({ hit }: ProductItemProps) {
+  return (
+    <div className="aa-ItemContent">
+      <div className="aa-ItemSourceIcon">
+        <img src={hit.image} alt={hit.name} width="20" height="20" />
+      </div>
+
+      <div className="aa-ItemTitle">
+        {highlightHit<ProductHit>({ hit, attribute: 'name' })}
+      </div>
+    </div>
+  );
+}
diff --git a/examples/js/index.html b/examples/js/index.html
@@ -47,6 +47,6 @@
     </div>
 
     <script src="env.ts"></script>
-    <script src="app.ts"></script>
+    <script src="app.tsx"></script>
   </body>
 </html>
diff --git a/examples/js/package.json b/examples/js/package.json
@@ -16,7 +16,9 @@
     "@algolia/autocomplete-plugin-recent-searches": "1.0.0-alpha.38",
     "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.38",
     "@algolia/autocomplete-theme-classic": "1.0.0-alpha.38",
+    "@algolia/client-search": "4.8.3",
     "algoliasearch": "4.8.3",
+    "preact": "10.5.7",
     "search-insights": "1.6.3"
   },
   "devDependencies": {

diff --git a/packages/autocomplete-js/package.json b/packages/autocomplete-js/package.json
@@ -33,7 +33,8 @@
   "dependencies": {
     "@algolia/autocomplete-core": "1.0.0-alpha.38",
     "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.38",
-    "@algolia/autocomplete-shared": "1.0.0-alpha.38"
+    "@algolia/autocomplete-shared": "1.0.0-alpha.38",
+    "preact": "^10.0.0"
   },
   "devDependencies": {
     "@algolia/client-search": "4.8.3"

diff --git a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
@@ -1,6 +1,5 @@
 import { fireEvent, waitFor } from '@testing-library/dom';
 
-import { wait } from '../../../../test/utils';
 import { autocomplete } from '../autocomplete';
 
 describe('autocomplete-js', () => {
@@ -76,6 +75,7 @@ describe('autocomplete-js', () => {
               </label>
               <div
                 class="aa-LoadingIndicator"
+                hidden=""
               >
                 <svg
                   class="aa-LoadingIcon"
@@ -131,6 +131,7 @@ describe('autocomplete-js', () => {
             >
               <button
                 class="aa-ResetButton"
+                hidden=""
                 type="reset"
               >
                 <svg
@@ -186,10 +187,7 @@ describe('autocomplete-js', () => {
 
     const input = container.querySelector<HTMLInputElement>('.aa-Input');
 
-    fireEvent.input(input, {
-      target: { value: 'aasdjfaisdf' },
-    });
-    input.focus();
+    fireEvent.input(input, { target: { value: 'a' } });
 
     await waitFor(() => {
       expect(
@@ -205,7 +203,7 @@ describe('autocomplete-js', () => {
   test('calls renderEmpty without empty template on no results', async () => {
     const container = document.createElement('div');
     const panelContainer = document.createElement('div');
-    const renderEmpty = jest.fn(({ root }) => {
+    const renderEmpty = jest.fn((_params, root) => {
       const div = document.createElement('div');
       div.innerHTML = 'No results render';
 
@@ -235,22 +233,24 @@ describe('autocomplete-js', () => {
 
     const input = container.querySelector<HTMLInputElement>('.aa-Input');
 
-    fireEvent.input(input, {
-      target: { value: 'aasdjfaisdf' },
-    });
-    input.focus();
+    fireEvent.input(input, { target: { value: 'a' } });
 
     await waitFor(() => {
       expect(
         panelContainer.querySelector<HTMLElement>('.aa-Panel')
       ).toBeInTheDocument();
     });
 
-    expect(renderEmpty).toHaveBeenCalledWith({
-      root: expect.anything(),
-      state: expect.anything(),
-      sections: expect.anything(),
-    });
+    expect(renderEmpty).toHaveBeenCalledWith(
+      {
+        state: expect.anything(),
+        children: expect.anything(),
+        sections: expect.any(Array),
+        createElement: expect.anything(),
+        Fragment: expect.anything(),
+      },
+      expect.any(HTMLElement)
+    );
 
     expect(
       panelContainer.querySelector<HTMLElement>('.aa-Panel')
@@ -282,7 +282,7 @@ describe('autocomplete-js', () => {
           },
         ];
       },
-      renderEmpty({ root }) {
+      renderEmpty(_params, root) {
         const div = document.createElement('div');
         div.innerHTML = 'No results render';
 
@@ -292,10 +292,7 @@ describe('autocomplete-js', () => {
 
     const input = container.querySelector<HTMLInputElement>('.aa-Input');
 
-    fireEvent.input(input, {
-      target: { value: 'aasdjfaisdf' },
-    });
-    input.focus();
+    fireEvent.input(input, { target: { value: 'a' } });
 
     await waitFor(() => {
       expect(
@@ -308,7 +305,7 @@ describe('autocomplete-js', () => {
     ).toHaveTextContent('No results template');
   });
 
-  test('allows user-provided shouldPanelShow', async () => {
+  test('allows user-provided shouldPanelShow', () => {
     const container = document.createElement('div');
     const panelContainer = document.createElement('div');
 
@@ -339,12 +336,7 @@ describe('autocomplete-js', () => {
 
     const input = container.querySelector<HTMLInputElement>('.aa-Input');
 
-    fireEvent.input(input, {
-      target: { value: 'aasdjfaisdf' },
-    });
-    input.focus();
-
-    await wait(50);
+    fireEvent.input(input, { target: { value: 'a' } });
 
     expect(
       panelContainer.querySelector<HTMLElement>('.aa-Panel')
@@ -473,10 +465,7 @@ describe('autocomplete-js', () => {
 
     const input = container.querySelector<HTMLInputElement>('.aa-Input');
 
-    fireEvent.input(input, {
-      target: { value: 'a' },
-    });
-    input.focus();
+    fireEvent.input(input, { target: { value: 'a' } });
 
     expect(input).toHaveValue('a');
   });

diff --git a/packages/autocomplete-js/src/__tests__/reverseHighlightHit.test.ts b/packages/autocomplete-js/src/__tests__/reverseHighlightHit.test.ts
@@ -19,7 +19,23 @@ describe('reverseHighlightHit', () => {
         },
         attribute: 'query',
       })
-    ).toMatchInlineSnapshot(`"<mark>amazon </mark>fire tablet<mark>s</mark>"`);
+    ).toEqual([
+      expect.objectContaining({
+        type: 'mark',
+        props: {
+          children: 'amazon ',
+        },
+      }),
+      'fire',
+      ' ',
+      'tablet',
+      expect.objectContaining({
+        type: 'mark',
+        props: {
+          children: 's',
+        },
+      }),
+    ]);
   });
 
   test('returns a reversed fully highlighted hit', () => {
@@ -40,7 +56,7 @@ describe('reverseHighlightHit', () => {
         },
         attribute: 'query',
       })
-    ).toMatchInlineSnapshot(`"amazon fire tablets"`);
+    ).toEqual(['amazon', ' ', 'fire', ' ', 'tablets']);
   });
 
   test('returns a reversed empty highlighted query hit', () => {
@@ -60,6 +76,6 @@ describe('reverseHighlightHit', () => {
         },
         attribute: 'query',
       })
-    ).toMatchInlineSnapshot(`"amazon fire tablets"`);
+    ).toEqual(['amazon fire tablets']);
   });
 });