poc: common JSX components

babel.config.js

@@ -79,6 +79,9 @@ module.exports = (api) => {
             // false positive (babel doesn't know types)
             // this is actually only called on arrays
             'String.prototype.includes',
+
+            // just for the PoC
+            'Object.assign',
           ];
           if (defaultShouldInject && !exclude.includes(name)) {
             throw new Error(

packages/instantsearch-jsx/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "instantsearch-jsx",
+  "version": "1.0.0",
+  "description": "Common JSX components for InstantSearch flavors",
+  "types": "dist/es/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "homepage": "https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/algolia/instantsearch"
+  },
+  "author": {
+    "name": "Algolia, Inc.",
+    "url": "https://www.algolia.com"
+  },
+  "keywords": [
+    "algolia",
+    "components",
+    "fast",
+    "instantsearch",
+    "react",
+    "search"
+  ],
+  "files": [
+    "README.md",
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "watch": "yarn build:cjs --watch",
+    "build": "yarn build:cjs && yarn build:es && yarn build:types",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/cjs --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet && ../../scripts/prepare-cjs.sh",
+    "build:es": "BABEL_ENV=es babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/es --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet",
+    "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/es",
+    "test:exports": "node ./test/module/is-es-module.mjs && node ./test/module/is-cjs-module.cjs",
+    "version": "./scripts/version.cjs"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.1.2"
+  }
+}

packages/instantsearch-jsx/src/Hits.tsx

@@ -0,0 +1,100 @@
+/** @jsx createElement */
+
+export type HitsClassNames = {
+  /**
+   * Class names to apply to the root element
+   */
+  root: string;
+  /**
+   * Class names to apply to the root element without results
+   */
+  emptyRoot: string;
+  /**
+   * Class names to apply to the list element
+   */
+  list: string;
+  /**
+   * Class names to apply to each item element
+   */
+  item: string;
+};
+
+type BaseHit = {
+  objectID: string;
+};
+
+export type HitsProps<T extends BaseHit> = {
+  hitComponent?: (props: {
+    hit: T;
+    item: T;
+    sendEvent: (eventName: string, hit: T, event: string) => void;
+  }) => JSX.Element;
+  itemComponent?: (props: { hit: T; index: number }) => JSX.Element;
+  hits: T[];
+  className?: string;
+  classNames?: Partial<HitsClassNames>;
+  sendEvent: (eventName: string, hit: T, event: string) => void;
+};
+
+export function cx(
+  ...classNames: Array<string | number | boolean | undefined | null>
+) {
+  return classNames.filter(Boolean).join(' ');
+}
+
+export function createHits({ createElement }: any) {
+  function DefaultHitComponent({ hit }: { hit: BaseHit }) {
+    return (
+      <div style={{ wordBreak: 'break-all' }}>
+        {JSON.stringify(hit).slice(0, 100)}…
+      </div>
+    );
+  }
+
+  return function Hits<T extends BaseHit>({
+    hitComponent: HitComponent,
+    itemComponent: ItemComponent,
+    classNames = {},
+    hits,
+    sendEvent,
+    ...props
+  }: HitsProps<T>) {
+    return (
+      <div
+        {...props}
+        className={cx(
+          'ais-Hits',
+          classNames.root,
+          hits.length === 0 && cx('ais-Hits--empty', classNames.emptyRoot),
+          props.className
+        )}
+      >
+        <ol className={cx('ais-Hits-list', classNames.list)}>
+          {hits.map((hit, index) =>
+            ItemComponent ? (
+              <ItemComponent hit={hit} index={index} />
+            ) : (
+              <li
+                key={hit.objectID}
+                className={cx('ais-Hits-item', classNames.item)}
+                onClick={() => {
+                  sendEvent('click:internal', hit, 'Hit Clicked');
+                }}
+                onAuxClick={() => {
+                  sendEvent('click:internal', hit, 'Hit Clicked');
+                }}
+              >
+                {HitComponent ? (
+                  // Vue uses `item` and React uses `hit`
+                  <HitComponent item={hit} hit={hit} sendEvent={sendEvent} />
+                ) : (
+                  <DefaultHitComponent hit={hit} />
+                )}
+              </li>
+            )
+          )}
+        </ol>
+      </div>
+    );
+  };
+}

packages/instantsearch-jsx/src/index.ts

@@ -0,0 +1 @@
+export * from './Hits';

packages/instantsearch-jsx/tsconfig.declaration.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.declaration"
+}

packages/instantsearch.js/package.json

@@ -34,6 +34,7 @@
     "@types/hogan.js": "^3.0.0",
     "@types/qs": "^6.5.3",
     "algoliasearch-helper": "3.15.0",
+    "instantsearch-jsx": "1.0.0",
     "hogan.js": "^3.0.2",
     "htm": "^3.0.0",
     "preact": "^10.10.0",

packages/instantsearch.js/src/components/Hits/Hits.tsx

@@ -1,6 +1,7 @@
 /** @jsx h */
 
 import { cx } from '@algolia/ui-components-shared';
+import { createHits } from 'instantsearch-jsx';
 import { h } from 'preact';
 
 import { createInsightsEventHandler } from '../../lib/insights/listener';
@@ -26,13 +27,15 @@ export type HitsProps = {
   templateProps: PreparedTemplateProps<HitsComponentTemplates>;
 };
 
+const UiHits = createHits({ createElement: h });
+
 export default function Hits({
   results,
   hits,
   insights,
-  bindEvent,
   sendEvent,
   cssClasses,
+  bindEvent,
   templateProps,
 }: HitsProps) {
   const handleInsightsClick = createInsightsEventHandler({
@@ -55,40 +58,41 @@ export default function Hits({
   }
 
   return (
-    <div className={cssClasses.root}>
-      <ol className={cssClasses.list}>
-        {hits.map((hit, index) => (
-          <Template
-            {...templateProps}
-            templateKey="item"
-            rootTagName="li"
-            rootProps={{
-              className: cssClasses.item,
-              onClick: (event: MouseEvent) => {
-                handleInsightsClick(event);
-                sendEvent('click:internal', hit, 'Hit Clicked');
-              },
-              onAuxClick: (event: MouseEvent) => {
-                handleInsightsClick(event);
-                sendEvent('click:internal', hit, 'Hit Clicked');
-              },
-            }}
-            key={hit.objectID}
-            data={{
-              ...hit,
-              get __hitIndex() {
-                warning(
-                  false,
-                  'The `__hitIndex` property is deprecated. Use the absolute `__position` instead.'
-                );
-                return index;
-              },
-            }}
-            bindEvent={bindEvent}
-            sendEvent={sendEvent}
-          />
-        ))}
-      </ol>
-    </div>
+    <UiHits
+      hits={hits}
+      sendEvent={sendEvent}
+      classNames={cssClasses}
+      itemComponent={({ hit, index }) => (
+        <Template
+          {...templateProps}
+          templateKey="item"
+          rootTagName="li"
+          rootProps={{
+            className: cssClasses.item,
+            onClick: (event: MouseEvent) => {
+              handleInsightsClick(event);
+              sendEvent('click:internal', hit, 'Hit Clicked');
+            },
+            onAuxClick: (event: MouseEvent) => {
+              handleInsightsClick(event);
+              sendEvent('click:internal', hit, 'Hit Clicked');
+            },
+          }}
+          key={hit.objectID}
+          data={{
+            ...hit,
+            get __hitIndex() {
+              warning(
+                false,
+                'The `__hitIndex` property is deprecated. Use the absolute `__position` instead.'
+              );
+              return index;
+            },
+          }}
+          bindEvent={bindEvent}
+          sendEvent={sendEvent}
+        />
+      )}
+    />
   );
 }

packages/react-instantsearch/package.json

@@ -49,6 +49,7 @@
   "dependencies": {
     "@babel/runtime": "^7.1.2",
     "instantsearch.js": "4.61.0",
+    "instantsearch-jsx": "1.0.0",
     "react-instantsearch-core": "7.4.0"
   },
   "peerDependencies": {

packages/react-instantsearch/src/ui/Hits.tsx

@@ -1,80 +1,6 @@
-import React from 'react';
+import { createHits } from 'instantsearch-jsx';
+import { createElement } from 'react';
 
-import { cx } from './lib/cx';
-
-import type { Hit } from 'instantsearch.js';
-import type { SendEventForHits } from 'instantsearch.js/es/lib/utils';
-
-export type HitsProps<THit> = React.ComponentProps<'div'> & {
-  hits: THit[];
-  sendEvent: SendEventForHits;
-  hitComponent?: React.JSXElementConstructor<{
-    hit: THit;
-    sendEvent: SendEventForHits;
-  }>;
-  classNames?: Partial<HitsClassNames>;
-};
-
-function DefaultHitComponent({ hit }: { hit: Hit }) {
-  return (
-    <div style={{ wordBreak: 'break-all' }}>
-      {JSON.stringify(hit).slice(0, 100)}…
-    </div>
-  );
-}
-
-export type HitsClassNames = {
-  /**
-   * Class names to apply to the root element
-   */
-  root: string;
-  /**
-   * Class names to apply to the root element without results
-   */
-  emptyRoot: string;
-  /**
-   * Class names to apply to the list element
-   */
-  list: string;
-  /**
-   * Class names to apply to each item element
-   */
-  item: string;
-};
-
-export function Hits<THit extends Hit>({
-  hits,
-  sendEvent,
-  hitComponent: HitComponent = DefaultHitComponent,
-  classNames = {},
-  ...props
-}: HitsProps<THit>) {
-  return (
-    <div
-      {...props}
-      className={cx(
-        'ais-Hits',
-        classNames.root,
-        hits.length === 0 && cx('ais-Hits--empty', classNames.emptyRoot),
-        props.className
-      )}
-    >
-      <ol className={cx('ais-Hits-list', classNames.list)}>
-        {hits.map((hit) => (
-          <li
-            key={hit.objectID}
-            className={cx('ais-Hits-item', classNames.item)}
-            onClick={() => {
-              sendEvent('click:internal', hit, 'Hit Clicked');
-            }}
-            onAuxClick={() => {
-              sendEvent('click:internal', hit, 'Hit Clicked');
-            }}
-          >
-            <HitComponent hit={hit} sendEvent={sendEvent} />
-          </li>
-        ))}
-      </ol>
-    </div>
-  );
-}
+export const Hits = createHits({
+  createElement,
+});

packages/react-instantsearch/src/widgets/Hits.tsx

@@ -3,7 +3,7 @@ import { useHits } from 'react-instantsearch-core';
 
 import { Hits as HitsUiComponent } from '../ui/Hits';
 
-import type { HitsProps as HitsUiComponentProps } from '../ui/Hits';
+import type { HitsProps as HitsUiComponentProps } from 'instantsearch-jsx';
 import type { Hit, BaseHit } from 'instantsearch.js';
 import type { UseHitsProps } from 'react-instantsearch-core';
 

packages/vue-instantsearch/package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "instantsearch.js": "4.61.0",
+    "instantsearch-jsx": "1.0.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {