algolia-experiences 1.0.1 → 1.0.2

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "algolia-experiences",
   "license": "MIT",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "src/index.ts",
   "jsdelivr": "dist/algolia-experiences.production.min.js",
   "unpkg": "dist/algolia-experiences.production.min.js",
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "instantsearch.js": "^4.73.2",
     "algoliasearch": "^4.23.2"

package/rollup.config.js

@@ -1,76 +0,0 @@
-import babel from 'rollup-plugin-babel';
-import commonjs from 'rollup-plugin-commonjs';
-import filesize from 'rollup-plugin-filesize';
-import resolve from 'rollup-plugin-node-resolve';
-import replace from 'rollup-plugin-replace';
-import { uglify } from 'rollup-plugin-uglify';
-
-import packageJson from '../../package.json';
-
-const version =
-  process.env.NODE_ENV === 'production'
-    ? packageJson.version
-    : `UNRELEASED (${new Date().toUTCString()})`;
-const algolia = '© Algolia, Inc. and contributors; MIT License';
-const link = 'https://github.com/algolia/instantsearch';
-const license = `/*! algolia-experiences ${version} | ${algolia} | ${link} */`;
-
-const plugins = [
-  resolve({
-    browser: true,
-    preferBuiltins: false,
-    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
-  }),
-  babel({
-    rootMode: 'upward',
-    runtimeHelpers: true,
-    exclude: /node_modules|algoliasearch-helper/,
-    extensions: ['.js', '.ts', '.tsx'],
-  }),
-  commonjs(),
-  filesize({
-    showMinifiedSize: false,
-    showGzippedSize: true,
-  }),
-];
-
-const createConfiguration = ({ mode, filename }) => ({
-  input: 'src/index.ts',
-  output: {
-    file: `dist/${filename}`,
-    name: 'instantsearch',
-    format: 'umd',
-    banner: license,
-    sourcemap: true,
-  },
-  onwarn(warning, warn) {
-    if (warning.code === 'CIRCULAR_DEPENDENCY')
-      throw new Error(warning.message);
-
-    warn(warning);
-  },
-  plugins: [
-    ...plugins,
-    replace({
-      __DEV__: mode === 'development',
-      'process.env.NODE_ENV': JSON.stringify('production'),
-    }),
-    mode === 'production' &&
-      uglify({
-        output: {
-          preamble: license,
-        },
-      }),
-  ].filter(Boolean),
-});
-
-export default [
-  createConfiguration({
-    mode: 'development',
-    filename: 'algolia-experiences.development.js',
-  }),
-  createConfiguration({
-    mode: 'production',
-    filename: 'algolia-experiences.production.min.js',
-  }),
-];

package/src/fake-configuration.ts

@@ -1,283 +0,0 @@
-import type { Configuration } from './types';
-
-const CONFIGURATION_OBJECT: Record<string, Configuration> = {
-  qsdfqsdf: {
-    id: 'qsdfqsdf',
-    indexName: 'instant_search',
-    children: [
-      {
-        type: 'ais.searchBox',
-        parameters: {},
-      },
-      {
-        type: 'columns',
-        children: [
-          [
-            {
-              type: 'ais.refinementList',
-              parameters: {
-                attribute: 'brand',
-                header: 'Brand',
-              },
-            },
-          ],
-          [
-            {
-              type: 'ais.hits',
-              parameters: {},
-              children: [
-                {
-                  type: 'span',
-                  parameters: {
-                    text: [
-                      { type: 'string', value: 'cols: ' },
-                      { type: 'highlight', path: ['name'] },
-                    ],
-                  },
-                },
-              ],
-            },
-          ],
-        ],
-      },
-      {
-        type: 'ais.configure',
-        parameters: {
-          hitsPerPage: 2,
-        },
-      },
-      {
-        type: 'ais.hits',
-        parameters: {},
-        children: [
-          {
-            type: 'span',
-            parameters: {
-              text: [
-                { type: 'string', value: 'one: ' },
-                { type: 'highlight', path: ['name'] },
-              ],
-            },
-          },
-        ],
-      },
-    ],
-  },
-  'other-one': {
-    id: 'other-one',
-    indexName: 'instant_search',
-    children: [
-      {
-        type: 'ais.configure',
-        parameters: {
-          hitsPerPage: 3,
-        },
-      },
-      {
-        type: 'ais.hits',
-        parameters: {},
-        children: [
-          {
-            type: 'span',
-            parameters: {
-              text: [
-                { type: 'string', value: 'other: ' },
-                { type: 'attribute', path: ['name'] },
-              ],
-            },
-          },
-        ],
-      },
-      {
-        type: 'ais.pagination',
-        parameters: {
-          padding: 2,
-        },
-      },
-      {
-        type: 'ais.trendingItems',
-        parameters: { limit: 4 },
-        children: [
-          {
-            type: 'span',
-            parameters: {
-              text: [
-                { type: 'string', value: 'trending: ' },
-                { type: 'attribute', path: ['name'] },
-              ],
-            },
-          },
-          {
-            type: 'image',
-            parameters: {
-              src: [{ type: 'attribute', path: ['image'] }],
-              alt: [{ type: 'string', value: '' }],
-            },
-          },
-        ],
-      },
-    ],
-  },
-  '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)
-);
-const FAKE_DELAY = 1000;
-
-export function fakeFetchConfiguration(ids: string[]) {
-  return new Promise((resolve) => setTimeout(resolve, FAKE_DELAY)).then(() =>
-    ids.map((id) => CONFIGURATION_MAP.get(id)!).filter(Boolean)
-  );
-}

package/src/get-information.ts

@@ -1,29 +0,0 @@
-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

@@ -1,250 +0,0 @@
-/** @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,40 +0,0 @@
-/** @jsx h */
-import algoliasearch from 'algoliasearch/lite';
-import InstantSearch from 'instantsearch.js/es/lib/InstantSearch';
-
-import { fakeFetchConfiguration } from './fake-configuration';
-import { getElements, getSettings } from './get-information';
-import { configToIndex, injectStyles } from './render';
-import { error } from './util';
-
-declare global {
-  interface Window {
-    __search: InstantSearch;
-  }
-}
-
-export function setupInstantSearch() {
-  try {
-    const settings = getSettings();
-
-    const searchClient = algoliasearch(settings.appId, settings.apiKey);
-    const search = new InstantSearch({
-      searchClient,
-    });
-    window.__search = search;
-
-    const elements = getElements();
-
-    injectStyles();
-
-    fakeFetchConfiguration([...elements.keys()]).then((configuration) => {
-      search
-        .addWidgets(
-          configuration.flatMap((config) => configToIndex(config, elements))
-        )
-        .start();
-    });
-  } catch (err) {
-    error((err as Error).message);
-  }
-}