feat(autocomplete-js): enable HTML templating (#920)

Co-authored-by: Haroen Viaene <hello@haroen.me>
algolia · Apr 7, 2022 · f5bbf34 · f5bbf34
1 parent 4131bd6
commit f5bbf34
Show file tree

Hide file tree

Showing 22 changed files with 1,448 additions and 57 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": "16.75 kB"
+      "maxSize": "17.5 kB"
     },
     {
       "path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",

diff --git a/examples/html-templates/README.md b/examples/html-templates/README.md
@@ -0,0 +1,34 @@
+# Autocomplete with HTML templates example
+
+This example shows how to use HTML templates in Autocomplete.
+
+<p align="center"><img src="capture.png?raw=true" alt="A capture of the Autocomplete with HTML templates example" /></p>
+
+## Demo
+
+[Access the demo](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/html-templates)
+
+## How to run this example locally
+
+### 1. Clone this repository
+
+```sh
+git clone git@github.com:algolia/autocomplete.git
+```
+
+### 2. Install the dependencies and run the server
+
+```sh
+yarn
+yarn workspace @algolia/autocomplete-example-html-templates start
+```
+
+Alternatively, you may use npm:
+
+```sh
+cd examples/html-templates
+npm install
+npm start
+```
+
+Open <http://localhost:1234> to see your app.
diff --git a/examples/html-templates/app.js b/examples/html-templates/app.js
@@ -0,0 +1,65 @@
+import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
+import algoliasearch from 'algoliasearch/lite';
+
+import '@algolia/autocomplete-theme-classic';
+
+const appId = 'latency';
+const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
+const searchClient = algoliasearch(appId, apiKey);
+
+autocomplete({
+  container: '#autocomplete',
+  placeholder: 'Search',
+  getSources({ query }) {
+    return [
+      {
+        sourceId: 'products',
+        getItems() {
+          return getAlgoliaResults({
+            searchClient,
+            queries: [
+              {
+                indexName: 'instant_search',
+                query,
+              },
+            ],
+          });
+        },
+        templates: {
+          item({ item, components, html }) {
+            return html`<div class="aa-ItemWrapper">
+              <div class="aa-ItemContent">
+                <div
+                  class="aa-ItemIcon aa-ItemIcon--picture aa-ItemIcon--alignTop"
+                >
+                  <img
+                    src="${item.image}"
+                    alt="${item.name}"
+                    width="40"
+                    height="40"
+                  />
+                </div>
+
+                <div class="aa-ItemContentBody">
+                  <div class="aa-ItemContentTitle">
+                    ${components.Highlight({ hit: item, attribute: 'name' })}
+                  </div>
+                  <div class="aa-ItemContentDescription">
+                    By <strong>${item.brand}</strong> in ${' '}
+                    <strong>${item.categories[0]}</strong>
+                  </div>
+                </div>
+              </div>
+            </div>`;
+          },
+        },
+      },
+    ];
+  },
+  render({ children, render, html }, root) {
+    render(html`<div class="aa-SomeResults">${children}</div>`, root);
+  },
+  renderNoResults({ children, render, html }, root) {
+    render(html`<div class="aa-NoResults">${children}</div>`, root);
+  },
+});
diff --git a/examples/html-templates/capture.png b/examples/html-templates/capture.png
diff --git a/examples/html-templates/env.js b/examples/html-templates/env.js
@@ -0,0 +1,6 @@
+// Parcel picks the `source` field of the monorepo packages and thus doesn't
+// apply the Babel config. We therefore need to manually override the constants
+// in the app.
+// See https://twitter.com/devongovett/status/1134231234605830144
+global.__DEV__ = process.env.NODE_ENV !== 'production';
+global.__TEST__ = false;
diff --git a/examples/html-templates/favicon.png b/examples/html-templates/favicon.png
diff --git a/examples/html-templates/index.html b/examples/html-templates/index.html
@@ -0,0 +1,20 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
+    <link rel="stylesheet" href="style.css" />
+
+    <title>HTML Templates | Autocomplete</title>
+  </head>
+
+  <body>
+    <div class="container">
+      <div id="autocomplete"></div>
+    </div>
+
+    <script src="env.js"></script>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/examples/html-templates/package.json b/examples/html-templates/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@algolia/autocomplete-example-html-templates",
+  "description": "Autocomplete example with HTML templates",
+  "version": "1.5.7",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "build": "parcel build index.html",
+    "start": "parcel index.html"
+  },
+  "dependencies": {
+    "@algolia/autocomplete-js": "1.5.7",
+    "@algolia/autocomplete-theme-classic": "1.5.7",
+    "algoliasearch": "4.9.1"
+  },
+  "devDependencies": {
+    "@algolia/client-search": "4.9.1",
+    "parcel": "2.0.0-beta.2"
+  },
+  "keywords": [
+    "algolia",
+    "autocomplete",
+    "javascript"
+  ]
+}
diff --git a/examples/html-templates/style.css b/examples/html-templates/style.css
@@ -0,0 +1,20 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: rgb(244, 244, 249);
+  color: rgb(65, 65, 65);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding: 1rem;
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 640px;
+  width: 100%;
+}
diff --git a/packages/autocomplete-js/package.json b/packages/autocomplete-js/package.json
@@ -34,7 +34,8 @@
     "@algolia/autocomplete-core": "1.5.7",
     "@algolia/autocomplete-preset-algolia": "1.5.7",
     "@algolia/autocomplete-shared": "1.5.7",
-    "preact": "^10.0.0"
+    "preact": "^10.0.0",
+    "htm": "^3.0.0"
   },
   "devDependencies": {
     "@algolia/client-search": "4.9.1"

diff --git a/packages/autocomplete-js/src/__tests__/api.test.ts b/packages/autocomplete-js/src/__tests__/api.test.ts
@@ -1,5 +1,9 @@
 import { createAutocomplete } from '@algolia/autocomplete-core';
-import { waitFor } from '@testing-library/dom';
+import { fireEvent, waitFor } from '@testing-library/dom';
+import {
+  createElement as preactCreateElement,
+  render as preactRender,
+} from 'preact';
 
 import { createCollection } from '../../../../test/utils';
 import { autocomplete } from '../autocomplete';
@@ -371,6 +375,76 @@ describe('api', () => {
         document.querySelector<HTMLButtonElement>('.aa-SubmitButton')
       ).toHaveAttribute('title', 'Envoyer');
     });
+
+    test('updates the renderer', async () => {
+      const container = document.createElement('div');
+      const panelContainer = document.createElement('div');
+      document.body.appendChild(container);
+      document.body.appendChild(panelContainer);
+
+      const CustomFragment = (props: any) => props.children;
+      const mockCreateElement1 = jest.fn(preactCreateElement);
+      const mockCreateElement2 = jest.fn(preactCreateElement);
+      const mockRender = jest.fn().mockImplementation(preactRender);
+
+      const { update } = autocomplete<{ label: string }>({
+        container,
+        panelContainer,
+        getSources() {
+          return [
+            {
+              sourceId: 'testSource',
+              getItems({ query }) {
+                return [{ label: query }];
+              },
+              templates: {
+                item({ item, html }) {
+                  return html`<div>${item.label}</div>`;
+                },
+              },
+            },
+          ];
+        },
+        renderer: {
+          Fragment: CustomFragment,
+          render: mockRender,
+          createElement: mockCreateElement1,
+        },
+      });
+
+      const input = container.querySelector<HTMLInputElement>('.aa-Input');
+
+      fireEvent.input(input, { target: { value: 'apple' } });
+
+      await waitFor(() => {
+        expect(
+          panelContainer.querySelector<HTMLElement>('.aa-Panel')
+        ).toHaveTextContent('apple');
+        expect(mockCreateElement1).toHaveBeenCalled();
+      });
+
+      mockCreateElement1.mockClear();
+
+      update({
+        renderer: {
+          Fragment: CustomFragment,
+          render: mockRender,
+          createElement: mockCreateElement2,
+        },
+      });
+
+      fireEvent.input(input, { target: { value: 'iphone' } });
+
+      await waitFor(() => {
+        expect(
+          panelContainer.querySelector<HTMLElement>('.aa-Panel')
+        ).toHaveTextContent('iphone');
+        // The `createElement` function was updated, so the previous
+        // implementation should no longer be called.
+        expect(mockCreateElement1).not.toHaveBeenCalled();
+        expect(mockCreateElement2).toHaveBeenCalled();
+      });
+    });
   });
 
   describe('destroy', () => {