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 · Feb 1, 2021 · 2fc30e1 · 2fc30e1
1 parent 9d25fc4
commit 2fc30e1
Show file tree

Hide file tree

Showing 10 changed files with 363 additions and 165 deletions.
diff --git a/examples/js/app.tsx b/examples/js/app.tsx
@@ -2,25 +2,19 @@
 import {
   autocomplete,
   getAlgoliaHits,
-  snippetHit,
+  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, Fragment } from 'preact';
+import { h } from 'preact';
 import insightsClient from 'search-insights';
 
 import '@algolia/autocomplete-theme-classic';
 
-import { shortcutsPlugin } from './shortcutsPlugin';
-
-type Product = {
-  name: string;
-  image: string;
-  description: string;
-};
+type Product = { name: string; image: string };
 type ProductHit = Hit<Product>;
 
 const appId = 'latency';
@@ -50,7 +44,6 @@ autocomplete({
   debug: true,
   openOnFocus: true,
   plugins: [
-    shortcutsPlugin,
     algoliaInsightsPlugin,
     recentSearchesPlugin,
     querySuggestionsPlugin,
@@ -65,38 +58,16 @@ autocomplete({
         getItems() {
           return getAlgoliaHits<Product>({
             searchClient,
-            queries: [
-              {
-                indexName: 'instant_search',
-                query,
-                params: {
-                  clickAnalytics: true,
-                  attributesToSnippet: ['name:10', 'description:35'],
-                  snippetEllipsisText: '…',
-                },
-              },
-            ],
+            queries: [{ indexName: 'instant_search', query }],
           });
         },
         templates: {
-          header() {
-            return (
-              <Fragment>
-                <span className="aa-SourceHeaderTitle">Products</span>
-                <div className="aa-SourceHeaderLine"></div>
-              </Fragment>
-            );
-          },
           item({ item }) {
             return <ProductItem hit={item} />;
           },
           empty() {
             return (
-              <div className="aa-ItemContent">
-                <div className="aa-ItemContentTitle">
-                  No products for this query.
-                </div>
-              </div>
+              <div className="aa-ItemContent">No results for this query.</div>
             );
           },
         },
@@ -111,27 +82,14 @@ type ProductItemProps = {
 
 function ProductItem({ hit }: ProductItemProps) {
   return (
-    <Fragment>
-      <div className="aa-ItemIcon">
-        <img src={hit.image} alt={hit.name} width="40" height="40" />
+    <div className="aa-ItemContent">
+      <div className="aa-ItemSourceIcon">
+        <img src={hit.image} alt={hit.name} width="20" height="20" />
       </div>
-      <div className="aa-ItemContent">
-        <div className="aa-ItemContentTitle">
-          {snippetHit<ProductHit>({ hit, attribute: 'name' })}
-        </div>
-        <div className="aa-ItemContentDescription">
-          {snippetHit<ProductHit>({ hit, attribute: 'description' })}
-        </div>
+
+      <div className="aa-ItemTitle">
+        {highlightHit<ProductHit>({ hit, attribute: 'name' })}
       </div>
-      <button
-        className="aa-ItemActionButton aa-TouchOnly aa-ActiveOnly"
-        type="button"
-        title="Select"
-      >
-        <svg fill="currentColor" viewBox="0 0 24 24" width="20" height="20">
-          <path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"></path>
-        </svg>
-      </button>
-    </Fragment>
+    </div>
   );
 }
diff --git a/examples/js/createTagPlugin.tsx b/examples/js/createTagPlugin.tsx
diff --git a/examples/js/index.html b/examples/js/index.html
@@ -48,7 +48,10 @@
     </div>
 
     <script src="env.ts"></script>
+<<<<<<< HEAD
     <script src="darkMode.ts"></script>
+=======
+>>>>>>> 7be2249c (feat(js): change renderer implementation to virtual DOM (#381))
     <script src="app.tsx"></script>
   </body>
 </html>
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', () => {

diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
@@ -155,7 +155,7 @@ export function autocomplete<TItem extends BaseItem>(
     );
 
     const render =
-      (!getItemsCount(renderProps.state) &&
+      (!getItemsCount(state) &&
         !hasEmptySourceTemplateRef.current &&
         props.value.renderer.renderEmpty) ||
       props.value.renderer.render;