From 5acae2fb291a323ff1afd41732f3e32f2af0fae0 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>
Date: Fri, 18 Mar 2022 20:12:57 +0100
Subject: [PATCH] feat(html): allow render function injection

---
 packages/autocomplete-js/src/autocomplete.ts           |  1 +
 packages/autocomplete-js/src/getDefaultOptions.ts      |  1 +
 packages/autocomplete-js/src/render.tsx                |  6 ++++--
 .../autocomplete-js/src/types/AutocompleteRender.ts    |  8 ++------
 .../autocomplete-js/src/types/AutocompleteRenderer.ts  | 10 ++++++++++
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
index 1802f39cad..609ccdd0fd 100644
--- a/packages/autocomplete-js/src/autocomplete.ts
+++ b/packages/autocomplete-js/src/autocomplete.ts
@@ -162,6 +162,7 @@ export function autocomplete<TItem extends BaseItem>(
         : props.value.renderer.panelContainer,
       propGetters,
       state: lastStateRef.current,
+      renderer: props.value.renderer,
     };
 
     const render =
diff --git a/packages/autocomplete-js/src/getDefaultOptions.ts b/packages/autocomplete-js/src/getDefaultOptions.ts
index f35d8e8ccb..145098b62a 100644
--- a/packages/autocomplete-js/src/getDefaultOptions.ts
+++ b/packages/autocomplete-js/src/getDefaultOptions.ts
@@ -60,6 +60,7 @@ const defaultRender: AutocompleteRender<any> = ({ children }, root) => {
 const defaultRenderer: AutocompleteRenderer = {
   createElement: preactCreateElement,
   Fragment: PreactFragment,
+  render,
 };
 
 export function getDefaultOptions<TItem extends BaseItem>(
diff --git a/packages/autocomplete-js/src/render.tsx b/packages/autocomplete-js/src/render.tsx
index 86ec04f971..0eb7b8071c 100644
--- a/packages/autocomplete-js/src/render.tsx
+++ b/packages/autocomplete-js/src/render.tsx
@@ -4,7 +4,6 @@ import {
   AutocompleteScopeApi,
   BaseItem,
 } from '@algolia/autocomplete-core';
-import { render as preactRender } from 'preact';
 
 import {
   AutocompleteClassNames,
@@ -12,6 +11,7 @@ import {
   AutocompleteDom,
   AutocompletePropGetters,
   AutocompleteRender,
+  AutocompleteRenderer,
   AutocompleteState,
   HTMLTemplate,
   Pragma,
@@ -31,6 +31,7 @@ type RenderProps<TItem extends BaseItem> = {
   panelContainer: HTMLElement;
   propGetters: AutocompletePropGetters<TItem>;
   state: AutocompleteState<TItem>;
+  renderer: { renderer: AutocompleteRenderer };
 };
 
 export function renderSearchBox<TItem extends BaseItem>({
@@ -76,6 +77,7 @@ export function renderPanel<TItem extends BaseItem>(
     propGetters,
     state,
     components,
+    renderer,
   }: RenderProps<TItem>
 ): void {
   if (!state.isOpen) {
@@ -205,7 +207,7 @@ export function renderPanel<TItem extends BaseItem>(
       Fragment,
       components,
       html,
-      render: preactRender,
+      render: renderer.renderer.render,
       ...autocompleteScopeApi,
     },
     dom.panel
diff --git a/packages/autocomplete-js/src/types/AutocompleteRender.ts b/packages/autocomplete-js/src/types/AutocompleteRender.ts
index 9abd8b1b41..63116e362c 100644
--- a/packages/autocomplete-js/src/types/AutocompleteRender.ts
+++ b/packages/autocomplete-js/src/types/AutocompleteRender.ts
@@ -2,10 +2,10 @@ import { AutocompleteScopeApi, BaseItem } from '@algolia/autocomplete-core';
 
 import { AutocompleteComponents } from './AutocompleteComponents';
 import {
-  ComponentChild,
   HTMLTemplate,
   Pragma,
   PragmaFrag,
+  Render,
   VNode,
 } from './AutocompleteRenderer';
 import { AutocompleteState } from './AutocompleteState';
@@ -20,11 +20,7 @@ export type AutocompleteRender<TItem extends BaseItem> = (
     createElement: Pragma;
     Fragment: PragmaFrag;
     html: HTMLTemplate;
-    render(
-      vnode: ComponentChild,
-      containerNode: Element | Document | ShadowRoot | DocumentFragment,
-      replaceNode?: Element | Text | undefined
-    ): void;
+    render?: Render;
   },
   root: HTMLElement
 ) => void;
diff --git a/packages/autocomplete-js/src/types/AutocompleteRenderer.ts b/packages/autocomplete-js/src/types/AutocompleteRenderer.ts
index 1238c6bb50..f02dc11e5e 100644
--- a/packages/autocomplete-js/src/types/AutocompleteRenderer.ts
+++ b/packages/autocomplete-js/src/types/AutocompleteRenderer.ts
@@ -22,6 +22,12 @@ export type VNode<TProps = any> = {
   props: TProps & { children: ComponentChildren; key?: any };
 };
 
+export type Render = (
+  vnode: ComponentChild,
+  parent: Element | Document | ShadowRoot | DocumentFragment,
+  replaceNode?: Element | Text | undefined
+) => void;
+
 export type AutocompleteRenderer = {
   /**
    * The function to create virtual nodes.
@@ -35,6 +41,10 @@ export type AutocompleteRenderer = {
    * @default preact.Fragment
    */
   Fragment: PragmaFrag;
+  /**
+   * The function to render children to an element.
+   */
+  render?: Render;
 };
 
 export type HTMLTemplate = typeof htm;