algolia · Haroenv · Oct 20, 2022 · Oct 25, 2022
diff --git a/instantsearch.js/injected-content/.gitignore b/instantsearch.js/injected-content/.gitignore
@@ -0,0 +1,2 @@
+dist
+.parcel-cache
diff --git a/instantsearch.js/injected-content/favicon.png b/instantsearch.js/injected-content/favicon.png
diff --git a/instantsearch.js/injected-content/index.html b/instantsearch.js/injected-content/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+
+  <link rel="manifest" href="./manifest.webmanifest">
+  <link rel="shortcut icon" href="./favicon.png">
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/algolia.css" />
+  <link rel="stylesheet" href="./src/index.css">
+  <link rel="stylesheet" href="./src/app.css">
+
+  <title>injected hits</title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="search-panel">
+      <div class="search-panel__filters">
+        <div id="clear"></div>
+      </div>
+      <div class="search-panel__results">
+        <div id="searchbox" />
+        <div id="hits"></div>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
+  <script type="module" src="./src/app.js"></script>
+</body>
+
+</html>
diff --git a/instantsearch.js/injected-content/manifest.webmanifest b/instantsearch.js/injected-content/manifest.webmanifest
@@ -0,0 +1,15 @@
+{
+  "short_name": "injected content",
+  "name": "injected content Sample",
+  "icons": [
+    {
+      "src": "favicon.png",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/instantsearch.js/injected-content/package.json b/instantsearch.js/injected-content/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "injected-content",
+  "scripts": {
+    "start": "parcel index.html"
+  },
+  "dependencies": {
+    "algoliasearch": "^4.14.2",
+    "instantsearch.js": "^4.48.1",
+    "preact": "^10.5.14",
+    "htm": "^3.0.4"
+  },
+  "devDependencies": {
+    "@parcel/packager-raw-url": "2.7.0",
+    "@parcel/transformer-webmanifest": "2.7.0",
+    "parcel": "2.0.1",
+    "typescript": "4.7.3"
+  }
+}
diff --git a/instantsearch.js/injected-content/src/app.css b/instantsearch.js/injected-content/src/app.css
@@ -0,0 +1,27 @@
+em {
+  background: cyan;
+  font-style: normal;
+}
+
+h1 {
+  margin-bottom: 1rem;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.search-panel {
+  display: flex;
+}
+
+.search-panel__results {
+  flex: 1;
+}
+
+#maps {
+  margin-top: 1rem;
+  height: 500px;
+}
diff --git a/instantsearch.js/injected-content/src/app.js b/instantsearch.js/injected-content/src/app.js
@@ -0,0 +1,43 @@
+import { injectedInfiniteHits } from './injected-infinite-hits';
+const { algoliasearch, instantsearch } = window;
+
+const searchClient = algoliasearch(
+  'latency',
+  '6be0576ff61c053d5f9a3225e2a90f76'
+);
+
+const search = instantsearch({
+  indexName: 'instant_search',
+  searchClient,
+});
+
+search.addWidgets([
+  instantsearch.widgets.searchBox({
+    container: '#searchbox',
+  }),
+  injectedInfiniteHits({
+    container: '#hits',
+    slots() {
+      return [
+        {
+          getHits: () => [{ cool: true }],
+          injectAt: 1,
+        },
+        {
+          getHits: () => [{ cool: false }],
+          injectAt: Math.random() > 0.5 ? 1 : false,
+        },
+      ];
+    },
+    templates: {
+      item({ hit }, { html }) {
+        return html`${hit.name}`;
+      },
+      injected({ hit }, { html }) {
+        return html`cool=${String(hit.cool)}`;
+      },
+    },
+  }),
+]);
+
+search.start();
diff --git a/instantsearch.js/injected-content/src/connectInjectedHits.ts b/instantsearch.js/injected-content/src/connectInjectedHits.ts
@@ -0,0 +1,108 @@
+import { InjectedHitsConnector } from './types';
+
+export const connectInjectedHits: InjectedHitsConnector =
+  (renderFn, unmountFn) => (widgetParams) => {
+    const widget = widgetParams.connector(
+      () => {},
+      () => {}
+    )(widgetParams);
+
+    return {
+      ...widget,
+      $$type: 'ais.injectedHits',
+      init(initOptions) {
+        renderFn(
+          {
+            ...this.getWidgetRenderState(initOptions),
+            instantSearchInstance: initOptions.instantSearchInstance,
+          },
+          true
+        );
+      },
+      render(renderOptions) {
+        var widgetRenderState = this.getWidgetRenderState(renderOptions);
+        renderFn(
+          {
+            ...this.getWidgetRenderState(renderOptions),
+            instantSearchInstance: renderOptions.instantSearchInstance,
+          },
+          false
+        );
+
+        widgetRenderState.sendEvent?.(
+          'view',
+          // infinite hits
+          widgetRenderState.currentPageHits ||
+            // other widgets
+            widgetRenderState.hits
+        );
+      },
+      getWidgetRenderState(renderOptions) {
+        const widgetRenderState = widget.getWidgetRenderState(renderOptions);
+
+        const injectedHits = widgetRenderState.hits
+          .map((hit, position) => {
+            // Wrap main hits and injected hits into a common format
+            // for easier templating
+            const hitFromMainIndex = {
+              type: 'item',
+              props: { hit },
+            };
+
+            return widgetParams
+              .slots({ scopedResults: renderOptions.scopedResults })
+              .reverse()
+              .reduce(
+                (acc, { injectAt, getHits = () => [null] }) => {
+                  const slotScopeProps = {
+                    position,
+                    scopedResults: renderOptions.scopedResults,
+                  };
+                  const shouldInject =
+                    typeof injectAt === 'function'
+                      ? injectAt({
+                          ...slotScopeProps,
+                          hit,
+                        })
+                      : position === injectAt;
+
+                  if (!shouldInject) {
+                    return acc;
+                  }
+
+                  const hitsFromSlotIndex = getHits({
+                    ...slotScopeProps,
+                    hit,
+                  });
+
+                  // Merge injected and main hits
+                  return [
+                    ...hitsFromSlotIndex.map((hitFromSlotIndex) => ({
+                      type: 'injected',
+                      props: {
+                        ...slotScopeProps,
+                        hit: hitFromSlotIndex,
+                      },
+                    })),
+                    ...acc,
+                  ];
+                },
+                [hitFromMainIndex]
+              );
+          })
+          .flat();
+
+        return {
+          ...widgetRenderState,
+          widgetParams,
+          injectedHits,
+        };
+      },
+      getRenderState(renderState, renderOptions) {
+        return {
+          ...renderState,
+          injectedHits: this.getWidgetRenderState(renderOptions),
+        };
+      },
+    };
+  };
diff --git a/instantsearch.js/injected-content/src/global.d.ts b/instantsearch.js/injected-content/src/global.d.ts
@@ -0,0 +1,9 @@
+import algoliasearch from 'algoliasearch/lite';
+import instantsearch from 'instantsearch.js/dist/instantsearch.production.min';
+
+declare global {
+  interface Window {
+    algoliasearch: typeof algoliasearch;
+    instantsearch: typeof instantsearch;
+  }
+}
diff --git a/instantsearch.js/injected-content/src/index.css b/instantsearch.js/injected-content/src/index.css
@@ -0,0 +1,10 @@
+body,
+h1 {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
diff --git a/instantsearch.js/injected-content/src/injected-infinite-hits.ts b/instantsearch.js/injected-content/src/injected-infinite-hits.ts
@@ -0,0 +1,35 @@
+import connectInfiniteHits from 'instantsearch.js/es/connectors/infinite-hits/connectInfiniteHits';
+import { connectInjectedHits } from './connectInjectedHits';
+import { createRenderer } from './renderer';
+import type {
+  WidgetCreator,
+  InjectedHitsConnectorParams,
+  InjectedInfiniteHitsWidgetParams,
+} from './types';
+
+/*
+ * Widget creator
+ * Returns a widget instance
+ */
+export const injectedInfiniteHits: WidgetCreator = function (widgetParams) {
+  const rendererWidgetParams: InjectedInfiniteHitsWidgetParams = {
+    container: widgetParams.container,
+    templates: widgetParams.templates,
+  };
+
+  const connector = connectInfiniteHits;
+
+  const { render, dispose } = createRenderer(rendererWidgetParams);
+
+  const createWidget = connectInjectedHits(render, dispose);
+
+  const connectorParams: InjectedHitsConnectorParams = {
+    connector,
+    slots: widgetParams.slots,
+  };
+
+  return {
+    ...createWidget(connectorParams),
+    $$widgetType: 'ais.injectedInfiniteHits',
+  };
+};
diff --git a/instantsearch.js/injected-content/src/renderer.ts b/instantsearch.js/injected-content/src/renderer.ts
@@ -0,0 +1,78 @@
+import type {
+  InjectedHitsRenderState,
+  InjectedInfiniteHitsWidgetParams,
+  RendererCreator,
+} from './types';
+import { render } from 'preact';
+import { html } from 'htm/preact';
+import { InfiniteHitsRenderState } from 'instantsearch.js/es/connectors/infinite-hits/connectInfiniteHits';
+
+export const createRenderer: RendererCreator = ({ container, templates }) => {
+  const containerNode: Element =
+    typeof container === 'string'
+      ? document.querySelector(container)!
+      : container;
+
+  const root = document.createElement('div');
+
+  return {
+    render(renderOptions, isFirstRender) {
+      if (isFirstRender) {
+        containerNode.appendChild(root);
+      }
+      render(Rendering({ ...renderOptions, templates }), root);
+    },
+    dispose() {
+      containerNode.removeChild(root);
+    },
+  };
+};
+
+function Rendering({
+  injectedHits,
+  isLastPage,
+  showMore,
+  templates,
+}: InjectedHitsRenderState &
+  InfiniteHitsRenderState &
+  Pick<InjectedInfiniteHitsWidgetParams, 'templates'>) {
+  return html` <div className="ais-InfiniteHits">
+    <ul className="ais-InfiniteHits-list">
+      ${injectedHits.map(({ props, type }, index) => {
+        return html`<li
+          key=${index}
+          className=${`ais-InfiniteHits-item ${type}`}
+        >
+          <${Template}
+            data=${props}
+            templateKey=${type}
+            templates=${templates}
+          />
+        </li>`;
+      })}
+    </ul>
+    ${!isLastPage
+      ? html`<button className="ais-InfiniteHits-loadMore" onClick=${showMore}>
+          Load more
+        </button>`
+      : null}
+  </div>`;
+}
+
+function Template({
+  templates,
+  templateKey,
+  data,
+}: Pick<InjectedInfiniteHitsWidgetParams, 'templates'> & {
+  templateKey: string;
+  data: any;
+}) {
+  const template = templates[templateKey] || FallbackTemplate;
+  return template(data, { html });
+}
+
+function FallbackTemplate(data) {
+  return html`<div style=${{ wordBreak: 'break-all' }}>
+    ${JSON.stringify(data).slice(0, 100)}…
+  </div>`;
+}