feat(html): allow render function injection

algolia · Mar 18, 2022 · 5acae2f · 5acae2f
1 parent 621b8e1
commit 5acae2f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git 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
@@ -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
@@ -4,14 +4,14 @@ import {
   AutocompleteScopeApi,
   BaseItem,
 } from '@algolia/autocomplete-core';
-import { render as preactRender } from 'preact';
 
 import {
   AutocompleteClassNames,
   AutocompleteComponents,
   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
@@ -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
@@ -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;