feat(templates): expose components to template POC

algolia · Apr 7, 2023 · ecc4e70 · ecc4e70
1 parent 456f7b8
commit ecc4e70
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 15 deletions.
diff --git a/packages/instantsearch.js/.storybook/playgrounds/default.ts b/packages/instantsearch.js/.storybook/playgrounds/default.ts
@@ -1,16 +1,13 @@
 import { HitsTemplates } from '../../src/widgets/hits/hits';
 import { Playground } from '../decorators';
 
-export const hitsItemTemplate: HitsTemplates['item'] = (
-  hit,
-  { html, components }
-) => html`
+export const hitsItemTemplate: HitsTemplates['item'] = (hit, { html }) => html`
   <div class="hits-image" style="background-image: url(${hit.image})"></div>
   <article>
     <header>
-      <strong>${components.Highlight({ hit, attribute: 'name' })}</strong>
+      <strong><Highlight hit=${hit} attribute="name" /></strong>
     </header>
-    <p>${components.Snippet({ hit, attribute: 'description' })}</p>
+    <p><Snippet hit=${hit} attribute="description" /></p>
     <footer>
       <p>
         <strong>${hit.price}$</strong>
@@ -140,7 +137,7 @@ const instantSearchPlayground: Playground = function instantSearchPlayground({
 
   const insights = instantsearch.middlewares.createInsightsMiddleware({
     insightsClient: null,
-    onEvent: props => {
+    onEvent: (props) => {
       console.log('insights onEvent', props);
     },
   });

diff --git a/packages/instantsearch.js/src/lib/templating/renderTemplate.ts b/packages/instantsearch.js/src/lib/templating/renderTemplate.ts
@@ -1,5 +1,6 @@
 import hogan from 'hogan.js';
-import { html } from 'htm/preact';
+import htm from 'htm';
+import { h, options } from 'preact';
 
 import {
   Highlight,
@@ -15,6 +16,25 @@ import type {
 } from '../utils/createSendEventForHits';
 import type { HoganOptions, Template } from 'hogan.js';
 
+const components = {
+  Highlight,
+  ReverseHighlight,
+  Snippet,
+  ReverseSnippet,
+};
+
+const oldVnodeOptions = options.vnode;
+options.vnode = (vnode) => {
+  if ((vnode.type as string) in components) {
+    vnode.type = components[
+      vnode.type as keyof typeof components
+    ] as typeof vnode.type;
+  }
+  if (oldVnodeOptions) oldVnodeOptions(vnode);
+};
+
+export const html = htm.bind(h);
+
 type TransformedHoganHelpers = {
   [helper: string]: () => (text: string) => string;
 };
@@ -75,12 +95,7 @@ export function renderTemplate({
 
     params.html = html;
     (params as any).sendEvent = sendEvent;
-    params.components = {
-      Highlight,
-      ReverseHighlight,
-      Snippet,
-      ReverseSnippet,
-    };
+    params.components = components;
 
     // @MAJOR remove the `as any` when string templates are removed
     // needed because not every template receives sendEvent

diff --git a/packages/instantsearch.js/src/types/templates.ts b/packages/instantsearch.js/src/types/templates.ts
@@ -4,12 +4,12 @@ import type {
   ReverseSnippet,
   Snippet,
 } from '../helpers/components';
+import type { html } from '../lib/templating/renderTemplate';
 import type {
   BuiltInBindEventForHits,
   CustomBindEventForHits,
   SendEventForHits,
 } from '../lib/utils';
-import type { html } from 'htm/preact';
 import type { VNode } from 'preact';
 
 export type Template<TTemplateData = void> =