algolia-experiences 1.0.0 → 1.0.2

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "algolia-experiences",
   "license": "MIT",
-  "version": "1.0.0",
+  "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,130 +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',
-              },
-            },
-          ],
-          [
-            {
-              type: 'ais.hits',
-              parameters: {},
-              children: [
-                {
-                  type: 'div',
-                  parameters: {
-                    text: [
-                      { type: 'string', value: 'cols: ' },
-                      { type: 'highlight', path: ['name'] },
-                    ],
-                  },
-                },
-              ],
-            },
-          ],
-        ],
-      },
-      {
-        type: 'ais.configure',
-        parameters: {
-          hitsPerPage: 2,
-        },
-      },
-      {
-        type: 'ais.hits',
-        parameters: {},
-        children: [
-          {
-            type: 'div',
-            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: 'div',
-            parameters: {
-              text: [
-                { type: 'string', value: 'other: ' },
-                { type: 'attribute', path: ['name'] },
-              ],
-            },
-          },
-        ],
-      },
-      {
-        type: 'ais.pagination',
-        parameters: {
-          padding: 2,
-        },
-      },
-      {
-        type: 'ais.trendingItems',
-        parameters: { limit: 4 },
-        children: [
-          {
-            type: 'div',
-            parameters: {
-              text: [
-                { type: 'string', value: 'trending: ' },
-                { type: 'attribute', path: ['name'] },
-              ],
-            },
-          },
-          {
-            type: 'image',
-            parameters: {
-              src: [{ type: 'attribute', path: ['image'] }],
-              alt: [{ type: 'string', value: '' }],
-            },
-          },
-        ],
-      },
-    ],
-  },
-};
-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/setup-instantsearch.ts

@@ -1,259 +0,0 @@
-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;
-
-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);
-  }
-}
-
-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

@@ -1,54 +0,0 @@
-import type { widgets } from './widgets';
-
-type StaticString = { type: 'string'; value: string };
-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>;
-export type TemplateChild =
-  | {
-      type: 'paragraph' | 'div' | 'span' | 'h2';
-      parameters: {
-        text: TemplateText;
-      };
-    }
-  | {
-      type: 'image';
-      parameters: {
-        src: TemplateAttribute;
-        alt: TemplateAttribute;
-      };
-    };
-
-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'>;
-          };
-    }[keyof typeof widgets]
-  | {
-      type: 'columns';
-      children: Child[][];
-    };
-
-export type Configuration = {
-  id: string;
-  indexName: string;
-  children: Child[];
-};

package/src/widgets.ts

@@ -1,55 +0,0 @@
-import {
-  breadcrumb,
-  clearRefinements,
-  configure,
-  currentRefinements,
-  frequentlyBoughtTogether,
-  hierarchicalMenu,
-  hits,
-  hitsPerPage,
-  index,
-  infiniteHits,
-  lookingSimilar,
-  menu,
-  numericMenu,
-  pagination,
-  panel,
-  rangeInput,
-  rangeSlider,
-  ratingMenu,
-  refinementList,
-  relatedProducts,
-  searchBox,
-  sortBy,
-  stats,
-  toggleRefinement,
-  trendingItems,
-} from 'instantsearch.js/es/widgets';
-
-export const widgets = {
-  'ais.breadcrumb': breadcrumb,
-  'ais.clearRefinements': clearRefinements,
-  'ais.configure': configure,
-  'ais.currentRefinements': currentRefinements,
-  'ais.frequentlyBoughtTogether': frequentlyBoughtTogether,
-  '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,
-  'ais.refinementList': refinementList,
-  'ais.relatedProducts': relatedProducts,
-  'ais.searchBox': searchBox,
-  'ais.sortBy': sortBy,
-  'ais.stats': stats,
-  'ais.toggleRefinement': toggleRefinement,
-  'ais.trendingItems': trendingItems,
-};