refactor(js): use JSX in the codebase

babel.config.js

@@ -14,6 +14,10 @@ module.exports = (api) => {
   return {
     presets: [
       '@babel/preset-typescript',
+      [
+        '@babel/preset-react',
+        { pragma: 'createElement', pragmaFrag: 'Fragment' },
+      ],
       [
         '@babel/preset-env',
         {

examples/js/env.ts

@@ -1,6 +1,9 @@
+import { h } from 'preact';
+
 // Parcel picks the `source` field of the monorepo packages and thus doesn't
 // apply the Babel config to replace our `__DEV__` global expression.
 // We therefore need to manually override it in the example app.
 // See https://twitter.com/devongovett/status/1134231234605830144
 (global as any).__DEV__ = process.env.NODE_ENV !== 'production';
 (global as any).__TEST__ = false;
+(global as any).h = h;

package.json

@@ -28,6 +28,7 @@
   "devDependencies": {
     "@babel/cli": "7.12.8",
     "@babel/preset-env": "7.12.7",
+    "@babel/preset-react": "7.12.10",
     "@babel/preset-typescript": "7.12.7",
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "11.0.0",

packages/autocomplete-js/src/render.ts → packages/autocomplete-js/src/render.tsx

@@ -1,3 +1,4 @@
+/** @jsx createElement */
 import {
   AutocompleteApi as AutocompleteCoreApi,
   AutocompleteScopeApi,
@@ -90,90 +91,77 @@ export function renderPanel<TItem extends BaseItem>(
   dom.panel.classList.toggle('aa-Panel--touch', isTouch);
   dom.panel.classList.toggle('aa-Panel--stalled', state.status === 'stalled');
 
-  const sections = state.collections.map(({ source, items }, sourceIndex) => {
-    return createElement('section', {
-      key: sourceIndex,
-      className: classNames.source,
-      children: [
-        source.templates.header &&
-          createElement('div', {
-            className: classNames.sourceHeader,
-            children: [
-              source.templates.header({
-                createElement,
-                Fragment,
-                items,
-                source,
-                state,
-              }),
-            ],
-          }),
-        items.length === 0 && source.templates.empty
-          ? createElement('div', {
-              className: classNames.sourceEmpty,
-              children: [
-                source.templates.empty({
+  const sections = state.collections.map(({ source, items }, sourceIndex) => (
+    <section key={sourceIndex} className={classNames.source}>
+      {source.templates.header && (
+        <div className={classNames.sourceHeader}>
+          {source.templates.header({
+            createElement,
+            Fragment,
+            items,
+            source,
+            state,
+          })}
+        </div>
+      )}
+
+      {items.length === 0 && source.templates.empty ? (
+        <div className={classNames.sourceEmpty}>
+          {source.templates.empty({
+            createElement,
+            Fragment,
+            source,
+            state,
+          })}
+        </div>
+      ) : (
+        <ul
+          className={classNames.list}
+          {...propGetters.getListProps({
+            state,
+            props: autocomplete.getListProps({}),
+            ...autocompleteScopeApi,
+          })}
+        >
+          {items.map((item) => {
+            const itemProps = autocomplete.getItemProps({
+              item,
+              source,
+            });
+
+            return (
+              // @ts-ignore
+              // TypeScript assumes that events and other props are typed like
+              // React while it's typed as the DOM (like Preact). We ignore
+              // these errors.
+              //
+              // Example:
+              // Types of property 'onClick' are incompatible.
+              // Type '(event: MouseEvent) => void' is not assignable to type '(event: MouseEvent<HTMLLIElement, MouseEvent>) => void'.
+              <li
+                key={itemProps.id}
+                className={classNames.item}
+                {...propGetters.getItemProps({
+                  state,
+                  props: itemProps,
+                  ...autocompleteScopeApi,
+                })}
+              >
+                {source.templates.item({
                   createElement,
                   Fragment,
-                  source,
+                  item,
                   state,
-                }),
-              ],
-            })
-          : createElement('ul', {
-              className: classNames.list,
-              ...propGetters.getListProps({
-                state,
-                props: autocomplete.getListProps({}),
-                ...autocompleteScopeApi,
-              }),
-              children: [
-                ...items.map((item) => {
-                  const itemProps = autocomplete.getItemProps({
-                    item,
-                    source,
-                  });
+                })}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </section>
+  ));
 
-                  return createElement('li', {
-                    key: itemProps.id,
-                    className: classNames.item,
-                    ...propGetters.getItemProps({
-                      state,
-                      props: itemProps,
-                      ...autocompleteScopeApi,
-                    }),
-                    children: [
-                      source.templates.item({
-                        createElement,
-                        Fragment,
-                        item,
-                        state,
-                      }),
-                    ],
-                  });
-                }),
-              ],
-            }),
-        source.templates.footer &&
-          createElement('div', {
-            className: classNames.sourceFooter,
-            children: [
-              source.templates.footer({
-                createElement,
-                Fragment,
-                items,
-                source,
-                state,
-              }),
-            ],
-          }),
-      ],
-    });
-  });
-  const children = createElement('div', {
-    className: 'aa-PanelLayout',
-    children: sections,
-  });
+  const children = <div className="aa-PanelLayout">{sections}</div>;
 
   render({ children, state, sections, createElement, Fragment }, dom.panel);
 }

packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx

@@ -0,0 +1,55 @@
+/** @jsx createElement */
+import { reverseHighlightHit, SourceTemplates } from '@algolia/autocomplete-js';
+
+import { QuerySuggestionsHit } from './types';
+
+export type GetTemplatesParams<TItem extends QuerySuggestionsHit> = {
+  onTapAhead(item: TItem): void;
+};
+
+export function getTemplates<TItem extends QuerySuggestionsHit>({
+  onTapAhead,
+}: GetTemplatesParams<TItem>): SourceTemplates<TItem> {
+  return {
+    item({ item, createElement, Fragment }) {
+      return (
+        <Fragment>
+          <div className="aa-ItemIcon aa-ItemIcon--no-border">
+            <svg width="20" height="20" viewBox="0 0 20 20">
+              <path
+                d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+                stroke="currentColor"
+                fill="none"
+                fillRule="evenodd"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </div>
+          <div className="aa-ItemContent">
+            <div className="aa-ItemContentTitle">
+              {reverseHighlightHit<any>({
+                hit: item,
+                attribute: 'query',
+              })}
+            </div>
+          </div>
+          <button
+            className="aa-ItemActionButton"
+            title={`Fill query with "${item.query}"`}
+            onClick={(event) => {
+              event.stopPropagation();
+              onTapAhead(item);
+            }}
+          >
+            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+              <rect fill="none" height="24" width="24" />
+              <path d="M5,15h2V8.41L18.59,20L20,18.59L8.41,7H15V5H5V15z" />
+            </svg>
+          </button>
+        </Fragment>
+      );
+    },
+  };
+}