algolia-experiences 1.0.0 → 1.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "algolia-experiences",
   "license": "MIT",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "src/index.ts",
   "jsdelivr": "dist/algolia-experiences.production.min.js",
   "unpkg": "dist/algolia-experiences.production.min.js",

package/src/fake-configuration.ts

@@ -17,6 +17,7 @@ const CONFIGURATION_OBJECT: Record<string, Configuration> = {
               type: 'ais.refinementList',
               parameters: {
                 attribute: 'brand',
+                header: 'Brand',
               },
             },
           ],
@@ -26,7 +27,7 @@ const CONFIGURATION_OBJECT: Record<string, Configuration> = {
               parameters: {},
               children: [
                 {
-                  type: 'div',
+                  type: 'span',
                   parameters: {
                     text: [
                       { type: 'string', value: 'cols: ' },
@@ -50,7 +51,7 @@ const CONFIGURATION_OBJECT: Record<string, Configuration> = {
         parameters: {},
         children: [
           {
-            type: 'div',
+            type: 'span',
             parameters: {
               text: [
                 { type: 'string', value: 'one: ' },
@@ -77,7 +78,7 @@ const CONFIGURATION_OBJECT: Record<string, Configuration> = {
         parameters: {},
         children: [
           {
-            type: 'div',
+            type: 'span',
             parameters: {
               text: [
                 { type: 'string', value: 'other: ' },
@@ -98,7 +99,7 @@ const CONFIGURATION_OBJECT: Record<string, Configuration> = {
         parameters: { limit: 4 },
         children: [
           {
-            type: 'div',
+            type: 'span',
             parameters: {
               text: [
                 { type: 'string', value: 'trending: ' },
@@ -117,6 +118,158 @@ const CONFIGURATION_OBJECT: Record<string, Configuration> = {
       },
     ],
   },
+  'category:audio': {
+    id: 'category:audio',
+    indexName: 'instant_search',
+    children: [
+      {
+        type: 'ais.configure',
+        parameters: {
+          hitsPerPage: 9,
+          filters: 'categories:"Audio"',
+        },
+      },
+      {
+        type: 'columns',
+        children: [
+          [
+            {
+              type: 'ais.refinementList',
+              parameters: {
+                attribute: 'brand',
+                header: 'brand',
+                collapsed: true,
+                searchable: true,
+              },
+            },
+            {
+              type: 'ais.refinementList',
+              parameters: {
+                attribute: 'type',
+                header: 'type',
+                collapsed: true,
+                searchable: true,
+              },
+            },
+            {
+              type: 'ais.rangeInput',
+              parameters: {
+                attribute: 'price',
+                header: 'price',
+                collapsed: true,
+              },
+            },
+            {
+              type: 'ais.toggleRefinement',
+              parameters: {
+                attribute: 'free_shipping',
+                header: 'free shipping',
+                collapsed: true,
+              },
+            },
+          ],
+          [
+            {
+              type: 'ais.hits',
+              parameters: {},
+              children: [
+                {
+                  type: 'link',
+                  parameters: { href: [{ type: 'attribute', path: ['url'] }] },
+                  children: [
+                    {
+                      type: 'image',
+                      parameters: {
+                        src: [{ type: 'attribute', path: ['image'] }],
+                        alt: [{ type: 'string', value: '' }],
+                      },
+                    },
+                    {
+                      type: 'div',
+                      parameters: {
+                        class: [{ type: 'string', value: '__flex' }],
+                      },
+                      children: [
+                        {
+                          type: 'span',
+                          parameters: {
+                            text: [{ type: 'attribute', path: ['name'] }],
+                          },
+                        },
+                        {
+                          type: 'span',
+                          parameters: {
+                            class: [{ type: 'string', value: '__bold' }],
+                            text: [
+                              { type: 'string', value: '$' },
+                              { type: 'attribute', path: ['price'] },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              type: 'ais.pagination',
+              parameters: {
+                padding: 2,
+              },
+            },
+            {
+              type: 'ais.trendingItems',
+              parameters: {
+                limit: 4,
+                facetName: 'categories',
+                facetValue: 'Audio',
+              },
+              children: [
+                {
+                  type: 'link',
+                  parameters: { href: [{ type: 'attribute', path: ['url'] }] },
+                  children: [
+                    {
+                      type: 'image',
+                      parameters: {
+                        src: [{ type: 'attribute', path: ['image'] }],
+                        alt: [{ type: 'string', value: '' }],
+                      },
+                    },
+                    {
+                      type: 'div',
+                      parameters: {
+                        class: [{ type: 'string', value: '__flex' }],
+                      },
+                      children: [
+                        {
+                          type: 'span',
+                          parameters: {
+                            text: [{ type: 'attribute', path: ['name'] }],
+                          },
+                        },
+                        {
+                          type: 'span',
+                          parameters: {
+                            class: [{ type: 'string', value: '__bold' }],
+                            text: [
+                              { type: 'string', value: '$' },
+                              { type: 'attribute', path: ['price'] },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        ],
+      },
+    ],
+  },
 };
 const CONFIGURATION_MAP = new Map<string, Configuration>(
   Object.entries(CONFIGURATION_OBJECT)

package/src/get-information.ts

@@ -0,0 +1,29 @@
+export function getSettings(): { appId: string; apiKey: string } {
+  const metaConfiguration = document.querySelector<HTMLMetaElement>(
+    'meta[name="instantsearch-configuration"]'
+  );
+
+  if (!metaConfiguration || !metaConfiguration.content) {
+    throw new Error('No meta tag found');
+  }
+
+  const { appId, apiKey } = JSON.parse(metaConfiguration.content);
+
+  if (!appId || !apiKey) {
+    throw new Error('Missing appId or apiKey in the meta tag');
+  }
+
+  return { appId, apiKey };
+}
+
+export function getElements() {
+  const elements = new Map<string, HTMLElement>();
+  document
+    .querySelectorAll<HTMLElement>('[data-instantsearch-id]')
+    .forEach((element) => {
+      const id = element.dataset.instantsearchId!;
+      elements.set(id, element);
+    });
+
+  return elements;
+}

package/src/render.tsx

@@ -0,0 +1,250 @@
+/** @jsx h */
+import { getPropertyByPath } from 'instantsearch.js/es/lib/utils';
+import { index, panel } from 'instantsearch.js/es/widgets';
+import { h, Fragment } from 'preact';
+
+import { error } from './util';
+import { widgets } from './widgets';
+
+import type {
+  Child,
+  Configuration,
+  PanelWidget,
+  PanelWidgetTypes,
+  TemplateAttribute,
+  TemplateChild,
+  TemplateText,
+  TemplateWidgetTypes,
+} from './types';
+import type { Widget } from 'instantsearch.js';
+import type { ComponentChildren, JSX } from 'preact';
+
+export function injectStyles() {
+  const style = document.createElement('style');
+  // @TODO: decide if this should be for all columns or only a specific type
+  style.textContent = `
+    .ais-Columns {
+      display: grid;
+      grid-template-columns: minmax(min-content, 200px) 1fr;
+      gap: 1em;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+export function configToIndex(
+  config: Configuration,
+  elements: Map<string, HTMLElement>
+) {
+  const container = elements.get(config.id);
+  if (!container) {
+    error(`Element with id ${config.id} not found`);
+    return [];
+  }
+
+  return [
+    index({
+      indexName: config.indexName,
+      indexId: config.id,
+    }).addWidgets(
+      config.children.flatMap((child) => childToWidget(child, container))
+    ),
+  ];
+}
+
+const hitWidgets = new Set<TemplateWidgetTypes>([
+  'ais.hits',
+  'ais.infiniteHits',
+  'ais.frequentlyBoughtTogether',
+  'ais.lookingSimilar',
+  'ais.relatedProducts',
+  'ais.trendingItems',
+]);
+function isTemplateWidget(
+  child: Child
+): child is Child & { children: TemplateChild[] } {
+  return hitWidgets.has(child.type as any);
+}
+
+const panelWidgets = new Set<PanelWidgetTypes>([
+  'ais.refinementList',
+  'ais.menu',
+  'ais.hierarchicalMenu',
+  'ais.breadcrumb',
+  'ais.numericMenu',
+  'ais.rangeInput',
+  'ais.rangeSlider',
+  'ais.ratingMenu',
+  'ais.toggleRefinement',
+]);
+function isPanelWidget(child: Child): child is PanelWidget {
+  return panelWidgets.has(child.type as any);
+}
+
+const tagNames = new Map<string, string>(
+  Object.entries({
+    paragraph: 'p',
+    span: 'span',
+    h2: 'h2',
+    div: 'div',
+    link: 'a',
+    image: 'img',
+  })
+);
+
+function renderText(text: TemplateText[number], hit: any, components: any) {
+  if (text.type === 'string') {
+    return text.value;
+  }
+
+  if (text.type === 'attribute') {
+    return getPropertyByPath(hit, text.path);
+  }
+
+  if (text.type === 'highlight') {
+    return components.Highlight({
+      hit,
+      attribute: text.path,
+    });
+  }
+
+  if (text.type === 'snippet') {
+    return components.Snippet({
+      hit,
+      attribute: text.path,
+    });
+  }
+
+  return null;
+}
+
+function renderAttribute(text: TemplateAttribute[number], hit: any) {
+  if (text.type === 'string') {
+    return text.value;
+  }
+
+  if (text.type === 'attribute') {
+    return getPropertyByPath(hit, text.path);
+  }
+
+  return null;
+}
+
+function childToWidget(child: Child, container: HTMLElement): Widget[] {
+  const widgetContainer = container.appendChild(document.createElement('div'));
+
+  if (child.type === 'columns') {
+    widgetContainer.classList.add('ais-Columns');
+
+    return child.children
+      .map((column) => {
+        const columnContainer = widgetContainer.appendChild(
+          Object.assign(document.createElement('div'), {
+            className: 'ais-Column',
+          })
+        );
+        return column.map((ch) => childToWidget(ch, columnContainer));
+      })
+      .flat(2);
+  }
+
+  if (child.type === 'ais.configure') {
+    return [widgets[child.type]({ ...child.parameters })];
+  }
+
+  if (isTemplateWidget(child)) {
+    // type cast is needed here because the spread adding `container` and `templates` loses the type discriminant
+    const parameters = child.parameters as Parameters<
+      typeof widgets['ais.hits']
+    >[0];
+    const widget = widgets[child.type] as typeof widgets['ais.hits'];
+
+    return [
+      widget({
+        ...parameters,
+        container: widgetContainer,
+        templates: {
+          item: (hit: any, { components }) => {
+            if (!child.children.length) {
+              return <code> no item template given</code>;
+            }
+
+            function renderChild(ch: TemplateChild) {
+              const Tag = tagNames.get(ch.type) as keyof JSX.IntrinsicElements;
+              if (!Tag) {
+                return <Fragment></Fragment>;
+              }
+
+              let children: ComponentChildren = null;
+              if ('text' in ch.parameters) {
+                children = ch.parameters.text.map((text) =>
+                  renderText(text, hit, components)
+                );
+              } else if ('children' in ch) {
+                children = ch.children.map(renderChild);
+              }
+
+              const attributes = Object.fromEntries(
+                Object.entries(ch.parameters)
+                  .filter(
+                    (tuple): tuple is [string, TemplateAttribute] =>
+                      tuple[0] !== 'text'
+                  )
+                  .map(([key, value]) => [
+                    key,
+                    value.map((item) => renderAttribute(item, hit)).join(''),
+                  ])
+              );
+
+              return <Tag {...attributes}>{children}</Tag>;
+            }
+
+            return child.children.map(renderChild);
+          },
+        },
+      }),
+    ];
+  }
+
+  if (isPanelWidget(child)) {
+    // type cast is needed here because the spread adding `container` loses the type discriminant
+    const {
+      header,
+      collapsed: defaultCollapsed,
+      ...parameters
+    } = child.parameters as Parameters<
+      typeof widgets['ais.refinementList']
+    >[0] & { header: string; collapsed: boolean };
+    const widget = widgets[child.type] as typeof widgets['ais.refinementList'];
+    return [
+      panel<typeof widgets['ais.refinementList']>({
+        templates: {
+          header,
+          collapseButtonText: ({ collapsed }) => (
+            // @TODO: put this style in a stylesheet
+            <span style="cursor: pointer">{collapsed ? '+' : '-'}</span>
+          ),
+        },
+        collapsed:
+          typeof defaultCollapsed === 'undefined'
+            ? undefined
+            : () => defaultCollapsed,
+      })(widget)({
+        ...parameters,
+        container: widgetContainer,
+      }),
+    ];
+  }
+
+  // type cast is needed here because the spread adding `container` loses the type discriminant
+  const parameters = child.parameters as Parameters<
+    typeof widgets['ais.pagination']
+  >[0];
+  const widget = widgets[child.type] as typeof widgets['ais.pagination'];
+  return [
+    widget({
+      ...parameters,
+      container: widgetContainer,
+    }),
+  ];
+}

package/src/setup-instantsearch.ts

@@ -1,20 +1,11 @@
+/** @jsx h */
 import algoliasearch from 'algoliasearch/lite';
 import InstantSearch from 'instantsearch.js/es/lib/InstantSearch';
-import { getPropertyByPath } from 'instantsearch.js/es/lib/utils';
 
 import { fakeFetchConfiguration } from './fake-configuration';
-import { widgets } from './widgets';
-
-import type {
-  Child,
-  Configuration,
-  TemplateChild,
-  TemplateText,
-} from './types';
-import type { Widget } from 'instantsearch.js';
-
-// @TODO: hook up to some way it can be set runtime, maybe query params
-const VERBOSE = true;
+import { getElements, getSettings } from './get-information';
+import { configToIndex, injectStyles } from './render';
+import { error } from './util';
 
 declare global {
   interface Window {
@@ -47,213 +38,3 @@ export function setupInstantSearch() {
     error((err as Error).message);
   }
 }
-
-function injectStyles() {
-  const style = document.createElement('style');
-  style.textContent = `
-    .ais-Columns {
-      display: grid;
-      grid-template-columns: minmax(min-content, 200px) 1fr;
-    }
-  `;
-  document.head.appendChild(style);
-}
-
-function getSettings(): { appId: string; apiKey: string } {
-  const metaConfiguration = document.querySelector<HTMLMetaElement>(
-    'meta[name="instantsearch-configuration"]'
-  );
-
-  if (!metaConfiguration || !metaConfiguration.content) {
-    throw new Error('No meta tag found');
-  }
-
-  const { appId, apiKey } = JSON.parse(metaConfiguration.content);
-
-  if (!appId || !apiKey) {
-    throw new Error('Missing appId or apiKey in the meta tag');
-  }
-
-  return { appId, apiKey };
-}
-
-function getElements() {
-  const elements = new Map<string, HTMLElement>();
-  document
-    .querySelectorAll<HTMLElement>('[data-instantsearch-id]')
-    .forEach((element) => {
-      const id = element.dataset.instantsearchId!;
-      elements.set(id, element);
-    });
-
-  return elements;
-}
-
-function configToIndex(
-  config: Configuration,
-  elements: Map<string, HTMLElement>
-) {
-  const container = elements.get(config.id);
-  if (!container) {
-    error(`Element with id ${config.id} not found`);
-    return [];
-  }
-
-  return [
-    widgets['ais.index']({
-      indexName: config.indexName,
-      indexId: config.id,
-    }).addWidgets(
-      config.children.flatMap((child) => childToWidget(child, container))
-    ),
-  ];
-}
-
-const hitWidgets = new Set([
-  'ais.hits',
-  'ais.infiniteHits',
-  'ais.frequentlyBoughtTogether',
-  'ais.lookingSimilar',
-  'ais.relatedProducts',
-  'ais.trendingItems',
-]);
-
-function isTemplateWidget(
-  child: Child
-): child is Child & { children: TemplateChild[] } {
-  return hitWidgets.has(child.type);
-}
-
-const textChildrenObject = {
-  paragraph: 'p',
-  div: 'div',
-  span: 'span',
-  h2: 'h2',
-};
-const textChildren = new Map(Object.entries(textChildrenObject));
-
-type TextChildType = keyof typeof textChildrenObject;
-function isTextChild(child: TemplateChild): child is TemplateChild & {
-  type: TextChildType;
-} {
-  return textChildren.has(child.type as any);
-}
-
-function renderText(text: TemplateText[number], hit: any, components: any) {
-  if (text.type === 'string') {
-    return text.value;
-  }
-
-  if (text.type === 'attribute') {
-    return getPropertyByPath(hit, text.path);
-  }
-
-  if (text.type === 'highlight') {
-    return components.Highlight({
-      hit,
-      attribute: text.path,
-    });
-  }
-
-  if (text.type === 'snippet') {
-    return components.Snippet({
-      hit,
-      attribute: text.path,
-    });
-  }
-
-  return null;
-}
-
-function renderAttribute(text: TemplateText[number], hit: any) {
-  if (text.type === 'string') {
-    return text.value;
-  }
-
-  if (text.type === 'attribute') {
-    return getPropertyByPath(hit, text.path);
-  }
-
-  return null;
-}
-
-function childToWidget(child: Child, container: HTMLElement): Widget[] {
-  const widgetContainer = container.appendChild(document.createElement('div'));
-
-  if (child.type === 'columns') {
-    widgetContainer.classList.add('ais-Columns');
-
-    return child.children
-      .map((column) => column.map((ch) => childToWidget(ch, widgetContainer)))
-      .flat(2);
-  }
-
-  if (child.type === 'ais.configure') {
-    return [widgets[child.type]({ ...child.parameters })];
-  }
-
-  if (isTemplateWidget(child)) {
-    // type cast is needed here because the spread adding `container` and `templates` loses the type discriminant
-    const parameters = child.parameters as Parameters<
-      typeof widgets['ais.hits']
-    >[0];
-    const widget = widgets[child.type] as typeof widgets['ais.hits'];
-
-    return [
-      widget({
-        ...parameters,
-        container: widgetContainer,
-        templates: {
-          item: (hit: any, { html, components }) => {
-            if (!child.children.length) {
-              return html`<code> no item template given</code>`;
-            }
-
-            return child.children.map((ch) => {
-              if (isTextChild(ch)) {
-                const Tag = textChildren.get(ch.type)!;
-                return html`<${Tag}>
-                    ${ch.parameters.text.map((text) =>
-                      renderText(text, hit, components)
-                    )}
-                  </${Tag}>`;
-              }
-
-              if (ch.type === 'image') {
-                return html`<img
-                  src="${ch.parameters.src
-                    .map((src) => renderAttribute(src, hit))
-                    .join('')}"
-                  alt="${ch.parameters.alt
-                    .map((alt) => renderAttribute(alt, hit))
-                    .join('')}"
-                />`;
-              }
-
-              return html``;
-            });
-          },
-        },
-      }),
-    ];
-  }
-
-  // type cast is needed here because the spread adding `container` loses the type discriminant
-  const parameters = child.parameters as Parameters<
-    typeof widgets['ais.pagination']
-  >[0];
-  const widget = widgets[child.type] as typeof widgets['ais.pagination'];
-  return [
-    widget({
-      ...parameters,
-      container: widgetContainer,
-    }),
-  ];
-}
-
-function error(message: string) {
-  if (VERBOSE) {
-    // eslint-disable-next-line no-console
-    console.error(`[InstantSearch] ${message}`);
-  }
-}

package/src/types.ts

@@ -5,42 +5,92 @@ type Attribute = { type: 'attribute'; path: string[] };
 type Highlight = { type: 'highlight' | 'snippet'; path: string[] };
 export type TemplateText = Array<Attribute | StaticString | Highlight>;
 export type TemplateAttribute = Array<Attribute | StaticString>;
+type RegularParameters = {
+  class?: TemplateAttribute;
+};
 export type TemplateChild =
   | {
-      type: 'paragraph' | 'div' | 'span' | 'h2';
+      type: 'paragraph' | 'span' | 'h2';
       parameters: {
         text: TemplateText;
-      };
+      } & RegularParameters;
+    }
+  | {
+      type: 'div';
+      parameters: RegularParameters;
+      children: TemplateChild[];
     }
   | {
       type: 'image';
       parameters: {
         src: TemplateAttribute;
         alt: TemplateAttribute;
-      };
+      } & RegularParameters;
+    }
+  | {
+      type: 'link';
+      parameters: {
+        href: TemplateAttribute;
+      } & RegularParameters;
+      children: TemplateChild[];
+    };
+
+export type TemplateWidgetTypes =
+  | 'ais.hits'
+  | 'ais.infiniteHits'
+  | 'ais.frequentlyBoughtTogether'
+  | 'ais.lookingSimilar'
+  | 'ais.relatedProducts'
+  | 'ais.trendingItems';
+
+export type TemplateWidget<
+  TKeys extends TemplateWidgetTypes = TemplateWidgetTypes
+> = {
+  [key in TKeys]: {
+    type: key;
+    parameters: Omit<
+      Parameters<typeof widgets[key]>[0],
+      'container' | 'templates'
+    >;
+    children: TemplateChild[];
+  };
+}[TKeys];
+
+export type PanelWidgetTypes =
+  | 'ais.refinementList'
+  | 'ais.menu'
+  | 'ais.hierarchicalMenu'
+  | 'ais.breadcrumb'
+  | 'ais.numericMenu'
+  | 'ais.rangeInput'
+  | 'ais.rangeSlider'
+  | 'ais.ratingMenu'
+  | 'ais.toggleRefinement';
+export type PanelWidget<TKeys extends PanelWidgetTypes = PanelWidgetTypes> = {
+  [key in TKeys]: {
+    type: key;
+    parameters: Omit<Parameters<typeof widgets[key]>[0], 'container'> & {
+      header?: string;
+      collapsed?: boolean;
+    };
+  };
+}[TKeys];
+
+type RegularWidget<TKeys extends keyof typeof widgets = keyof typeof widgets> =
+  {
+    [key in TKeys]: {
+      type: key;
+      parameters: Omit<Parameters<typeof widgets[key]>[0], 'container'>;
     };
+  }[TKeys];
 
 export type Child =
   | {
-      [key in keyof typeof widgets]: key extends
-        | 'ais.hits'
-        | 'ais.infiniteHits'
-        | 'ais.frequentlyBoughtTogether'
-        | 'ais.lookingSimilar'
-        | 'ais.relatedProducts'
-        | 'ais.trendingItems'
-        ? {
-            type: key;
-            parameters: Omit<
-              Parameters<typeof widgets[key]>[0],
-              'container' | 'templates'
-            >;
-            children: TemplateChild[];
-          }
-        : {
-            type: key;
-            parameters: Omit<Parameters<typeof widgets[key]>[0], 'container'>;
-          };
+      [key in keyof typeof widgets]: key extends TemplateWidgetTypes
+        ? TemplateWidget<key>
+        : key extends PanelWidgetTypes
+        ? PanelWidget<key>
+        : RegularWidget<key>;
     }[keyof typeof widgets]
   | {
       type: 'columns';

package/src/util.ts

@@ -0,0 +1,9 @@
+// @TODO: hook up to some way it can be set runtime, maybe query params
+const VERBOSE = true;
+
+export function error(message: string) {
+  if (VERBOSE) {
+    // eslint-disable-next-line no-console
+    console.error(`[InstantSearch] ${message}`);
+  }
+}

package/src/widgets.ts

@@ -7,13 +7,11 @@ import {
   hierarchicalMenu,
   hits,
   hitsPerPage,
-  index,
   infiniteHits,
   lookingSimilar,
   menu,
   numericMenu,
   pagination,
-  panel,
   rangeInput,
   rangeSlider,
   ratingMenu,
@@ -35,13 +33,11 @@ export const widgets = {
   'ais.hierarchicalMenu': hierarchicalMenu,
   'ais.hits': hits,
   'ais.hitsPerPage': hitsPerPage,
-  'ais.index': index,
   'ais.infiniteHits': infiniteHits,
   'ais.lookingSimilar': lookingSimilar,
   'ais.menu': menu,
   'ais.numericMenu': numericMenu,
   'ais.pagination': pagination,
-  'ais.panel': panel,
   'ais.rangeInput': rangeInput,
   'ais.rangeSlider': rangeSlider,
   'ais.ratingMenu': ratingMenu,