feat(html): bind function only once (#921)

* feat(html): create binding only once * rename to HTMLTemplate * format document * update size
algolia · Mar 18, 2022 · 621b8e1 · 621b8e1
1 parent 042d922
commit 621b8e1
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 11 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.25 kB"
     },
     {
       "path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",

diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
@@ -8,6 +8,7 @@ import {
   debounce,
   getItemsCount,
 } from '@algolia/autocomplete-shared';
+import htm from 'htm';
 
 import { createAutocompleteDom } from './createAutocompleteDom';
 import { createEffectWrapper } from './createEffectWrapper';
@@ -21,6 +22,7 @@ import {
   AutocompletePropGetters,
   AutocompleteSource,
   AutocompleteState,
+  VNode,
 } from './types';
 import { userAgents } from './userAgents';
 import { mergeDeep, setProperties } from './utils';
@@ -112,6 +114,8 @@ export function autocomplete<TItem extends BaseItem>(
     refresh: autocomplete.value.refresh,
   };
 
+  const html = htm.bind<VNode>(props.value.renderer.renderer.createElement);
+
   const dom = reactive(() =>
     createAutocompleteDom({
       autocomplete: autocomplete.value,
@@ -150,6 +154,7 @@ export function autocomplete<TItem extends BaseItem>(
       components: props.value.renderer.components,
       container: props.value.renderer.container,
       createElement: props.value.renderer.renderer.createElement,
+      html,
       dom: dom.value,
       Fragment: props.value.renderer.renderer.Fragment,
       panelContainer: isDetached.value

diff --git 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 htm from 'htm';
 import { render as preactRender } from 'preact';
 
 import {
@@ -14,6 +13,7 @@ import {
   AutocompletePropGetters,
   AutocompleteRender,
   AutocompleteState,
+  HTMLTemplate,
   Pragma,
   PragmaFrag,
 } from './types';
@@ -25,6 +25,7 @@ type RenderProps<TItem extends BaseItem> = {
   classNames: AutocompleteClassNames;
   components: AutocompleteComponents;
   createElement: Pragma;
+  html: HTMLTemplate;
   dom: AutocompleteDom;
   Fragment: PragmaFrag;
   panelContainer: HTMLElement;
@@ -67,6 +68,7 @@ export function renderPanel<TItem extends BaseItem>(
     autocomplete,
     autocompleteScopeApi,
     classNames,
+    html,
     createElement,
     dom,
     Fragment,
@@ -76,8 +78,6 @@ export function renderPanel<TItem extends BaseItem>(
     components,
   }: RenderProps<TItem>
 ): void {
-  const html = htm.bind(createElement);
-
   if (!state.isOpen) {
     if (panelContainer.contains(dom.panel)) {
       panelContainer.removeChild(dom.panel);

diff --git a/packages/autocomplete-js/src/types/AutocompleteRender.ts b/packages/autocomplete-js/src/types/AutocompleteRender.ts
@@ -1,11 +1,15 @@
 import { AutocompleteScopeApi, BaseItem } from '@algolia/autocomplete-core';
 
 import { AutocompleteComponents } from './AutocompleteComponents';
-import { HTMLToJSX, Pragma, PragmaFrag, VNode } from './AutocompleteRenderer';
+import {
+  ComponentChild,
+  HTMLTemplate,
+  Pragma,
+  PragmaFrag,
+  VNode,
+} from './AutocompleteRenderer';
 import { AutocompleteState } from './AutocompleteState';
 
-import { ComponentChild } from '.';
-
 export type AutocompleteRender<TItem extends BaseItem> = (
   params: AutocompleteScopeApi<TItem> & {
     children: VNode;
@@ -15,7 +19,7 @@ export type AutocompleteRender<TItem extends BaseItem> = (
     components: AutocompleteComponents;
     createElement: Pragma;
     Fragment: PragmaFrag;
-    html: HTMLToJSX;
+    html: HTMLTemplate;
     render(
       vnode: ComponentChild,
       containerNode: Element | Document | ShadowRoot | DocumentFragment,

diff --git a/packages/autocomplete-js/src/types/AutocompleteRenderer.ts b/packages/autocomplete-js/src/types/AutocompleteRenderer.ts
@@ -37,4 +37,4 @@ export type AutocompleteRenderer = {
   Fragment: PragmaFrag;
 };
 
-export type HTMLToJSX = typeof htm;
+export type HTMLTemplate = typeof htm;
diff --git a/packages/autocomplete-js/src/types/AutocompleteSource.ts b/packages/autocomplete-js/src/types/AutocompleteSource.ts
@@ -5,14 +5,18 @@ import {
 } from '@algolia/autocomplete-core';
 
 import { AutocompleteComponents } from './AutocompleteComponents';
-import { AutocompleteRenderer, HTMLToJSX, VNode } from './AutocompleteRenderer';
+import {
+  AutocompleteRenderer,
+  HTMLTemplate,
+  VNode,
+} from './AutocompleteRenderer';
 import { AutocompleteState } from './AutocompleteState';
 
 type Template<TParams> = (
   params: TParams &
     AutocompleteRenderer & {
       components: AutocompleteComponents;
-      html: HTMLToJSX;
+      html: HTMLTemplate;
     }
 ) => VNode | string;