feat(react instantsearch widget): add connector and widget metadata (#570)

Author: dhayab

e2e/__snapshots__/templates.test.js.snap

@@ -7032,8 +7032,8 @@ yarn add @algolia/react-instantsearch-widget-date-picker
 ### Usage
 
 \`\`\`jsx
-import instantsearch from 'instantsearch.js';
 import algoliasearch from 'algoliasearch/lite';
+import { InstantSearch } from 'react-instantsearch-dom';
 import { DatePicker } from '@algolia/react-instantsearch-widget-date-picker';
 
 const searchClient = algoliasearch('appId', 'apiKey');
@@ -7260,16 +7260,19 @@ export const DatePickerComponent = ({}: Props) => {
 `;
 
 exports[`Templates React InstantSearch widget File content: src/lib/connector.ts 1`] = `
-"import { createConnector } from 'react-instantsearch-dom';
+"import type { Connector } from '../types/connector';
+
+import { createConnector } from 'react-instantsearch-dom';
 
 export type ProvidedProps = {
   // TODO: fill props that are returned by \`getProvidedProps\`
-};
+}
 
-export const connectDatePicker = createConnector({
+export const connectDatePicker: Connector<ProvidedProps> = createConnector<ProvidedProps>({
   displayName: 'DatePicker',
+  $$type: 'algolia.date-picker',
 
-  getProvidedProps(props, searchState, searchResults): ProvidedProps {
+  getProvidedProps(props, searchState, searchResults) {
     return {
       // TODO: return a props for the component
     };
@@ -7281,7 +7284,7 @@ export const connectDatePicker = createConnector({
     };
   },
 
-  cleanUp(props, searchState, context) {
+  cleanUp(props, searchState) {
     return {
       // TODO: return a searchState where this widget is removed from the widget tree
     };
@@ -7298,17 +7301,37 @@ exports[`Templates React InstantSearch widget File content: src/lib/widget.tsx 1
 "import { DatePickerComponent } from './component';
 import { connectDatePicker } from './connector';
 
-import type { ElementType } from 'react';
-
 type WidgetParams = {
   /**
    * Placeholder text for input element.
    */
   placeholder?: string;
 };
 
-export const DatePicker: ElementType<WidgetParams> =
-  connectDatePicker(DatePickerComponent);"
+export const DatePicker: React.ElementType<WidgetParams> = connectDatePicker(
+  DatePickerComponent,
+  { $$widgetType: 'algolia.date-picker' }
+);"
+`;
+
+exports[`Templates React InstantSearch widget File content: src/types/connector.ts 1`] = `
+"import type {
+  ConnectedComponentClass,
+  ConnectorProvided,
+} from 'react-instantsearch-core';
+
+type AdditionalWidgetProperties = {
+  $$widgetType?: string;
+};
+
+export type Connector<TProvided = {}, TExposed = {}> = ((
+  stateless: React.FunctionComponent<ConnectorProvided<TProvided>>,
+  additionalWidgetProperties: AdditionalWidgetProperties
+) => React.ComponentClass<TExposed>) &
+  (<TProps extends Partial<ConnectorProvided<TProvided>>>(
+    Composed: React.ComponentType<TProps>,
+    additionalWidgetProperties: AdditionalWidgetProperties
+  ) => ConnectedComponentClass<TProps, ConnectorProvided<TProvided>, TExposed>);"
 `;
 
 exports[`Templates React InstantSearch widget File content: tsconfig.declaration.json 1`] = `
@@ -7402,6 +7425,7 @@ Array [
   "src/lib/component.tsx",
   "src/lib/connector.ts",
   "src/lib/widget.tsx",
+  "src/types/connector.ts",
   "tsconfig.declaration.json",
   "tsconfig.json",
   "vite.config.ts",

src/templates/React InstantSearch widget/README.md

@@ -19,8 +19,8 @@ yarn add {{ packageName }}
 ### Usage
 
 ```jsx
-import instantsearch from 'instantsearch.js';
 import algoliasearch from 'algoliasearch/lite';
+import { InstantSearch } from 'react-instantsearch-dom';
 import { {{ pascalCaseName }} } from '{{ packageName }}';
 
 const searchClient = algoliasearch('appId', 'apiKey');

src/templates/React InstantSearch widget/package.json.hbs

@@ -42,7 +42,7 @@
     "algoliasearch": "4",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-instantsearch-dom": "^6.11.0"
+    "react-instantsearch-dom": "^6.26.0"
   },
   "devDependencies": {
     "@babel/core": "7.14.3",
@@ -54,6 +54,7 @@
     "@types/node": "15.3.0",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
+    "@types/react-instantsearch-core": "6.26.0",
     "@types/react-instantsearch-dom": "6.10.0",
     "@typescript-eslint/eslint-plugin": "4.24.0",
     "@typescript-eslint/parser": "4.24.0",

src/templates/React InstantSearch widget/src/lib/connector.ts.hbs

@@ -1,13 +1,16 @@
+import type { Connector } from '../types/connector';
+
 import { createConnector } from 'react-instantsearch-dom';
 
 export type ProvidedProps = {
   // TODO: fill props that are returned by `getProvidedProps`
 }
 
-export const connect{{ pascalCaseName }} = createConnector({
+export const connect{{ pascalCaseName }}: Connector<ProvidedProps> = createConnector<ProvidedProps>({
   displayName: '{{ pascalCaseName }}',
+  $$type: '{{ widgetType }}',
 
-  getProvidedProps(props, searchState, searchResults): ProvidedProps {
+  getProvidedProps(props, searchState, searchResults) {
     return {
       // TODO: return a props for the component
     };
@@ -19,7 +22,7 @@ export const connect{{ pascalCaseName }} = createConnector({
     };
   },
 
-  cleanUp(props, searchState, context) {
+  cleanUp(props, searchState) {
     return {
       // TODO: return a searchState where this widget is removed from the widget tree
     };

src/templates/React InstantSearch widget/src/lib/widget.tsx.hbs

@@ -1,14 +1,14 @@
 import { {{ pascalCaseName }}Component } from './component';
 import { connect{{ pascalCaseName }} } from './connector';
 
-import type { ElementType } from 'react';
-
 type WidgetParams = {
   /**
    * Placeholder text for input element.
    */
   placeholder?: string;
 };
 
-export const {{ pascalCaseName }}: ElementType<WidgetParams> =
-  connect{{ pascalCaseName }}({{ pascalCaseName }}Component);
+export const {{ pascalCaseName }}: React.ElementType<WidgetParams> = connect{{ pascalCaseName }}(
+  {{ pascalCaseName }}Component,
+  { $$widgetType: '{{ widgetType }}' }
+);

src/templates/React InstantSearch widget/src/types/connector.ts

@@ -0,0 +1,17 @@
+import type {
+  ConnectedComponentClass,
+  ConnectorProvided,
+} from 'react-instantsearch-core';
+
+type AdditionalWidgetProperties = {
+  $$widgetType?: string;
+};
+
+export type Connector<TProvided = {}, TExposed = {}> = ((
+  stateless: React.FunctionComponent<ConnectorProvided<TProvided>>,
+  additionalWidgetProperties: AdditionalWidgetProperties
+) => React.ComponentClass<TExposed>) &
+  (<TProps extends Partial<ConnectorProvided<TProvided>>>(
+    Composed: React.ComponentType<TProps>,
+    additionalWidgetProperties: AdditionalWidgetProperties
+  ) => ConnectedComponentClass<TProps, ConnectorProvided<TProvided>, TExposed>);