feat(context): migrate to new React context (#2178)

This PR is quite long, but is split up in these steps

- [x] **STEP 1**: migrate createConnector (#2178, this PR)
- [x] **STEP 2**: first PR with connectors (searchbox, configure, hits, pagination) (#2179)
- [x] **STEP 3**: other connectors (#2180)
- [x] **STEP 4**: Multi index core (#2181)
- [x] **STEP 5**: Multi index connectors (#2185)
- [x] **STEP 6**: SSR (#2192)
- [ ] **STEP 7**: TypeScript completion (#2189) (merged later)
- [x] **STEP 8**: documentation change (#2190)

* feat(context): migrate core [STEP 1]

This includes:

1. change to createConnector
2. change to createStore
3. skip failing tests
4. small nits found while coding

After this to do:

STEP 2: first PR with connectors (searchbox, configure, hits, pagination)
STEP 3+: other connectors
STEP 4: Multi index core
STEP 5+: Multi index connectors
STEP 6: SSR
STEP 7: TypeScript completion
STEP 8: documentation change

* chore: remove context cache

* chore(tslint): add back accidentally removed prettier

* fix(connector): call gPP with correct "this"

* chore(TS): ReactType for Root

* test(connector): swap mount for shallow where possible

* chore(InstantSearch): refactor branch

* test(InstantSearch): avoid mutation

* chore(connector): remove unused

* chore(createConnector): warn on creation instead of mount

* fix(connector): remove unused variable

* chore(connector): consistent if

* chore(store): simplify typing

* chore(stories): better display name

* chore(TS): fix typing of results

* chore: remove useless comments

* consistent naming

* fix(InstantSearch): update index name when it changes

* prettier

* chore: remove old comment

* chore: fix merge

* ci: remove no-empty rule

* fix: make TS work in new connectors

* chore: fix bundlesize

* feedback from review (remove comments & warning)

* more review comments

* Update packages/react-instantsearch-core/src/components/InstantSearch.tsx

Co-Authored-By: Haroenv <fingebimus@me.com>

* feat(context): migrate base connector [STEP 2] (#2179)

* feat(context): migrate core [STEP 1]

This includes:

1. change to createConnector
2. change to createStore
3. skip failing tests
4. small nits found while coding

After this to do:

STEP 2: first PR with connectors (searchbox, configure, hits, pagination)
STEP 3+: other connectors
STEP 4: Multi index core
STEP 5+: Multi index connectors
STEP 6: SSR
STEP 7: TypeScript completion
STEP 8: documentation change

* feat(context): migrate base connector [STEP 2]

This is enough changes to be able to look at the storybook without errors again (only pagination, hits, searchbox of course, and nothing multi-index)

For full roadmap, see #2178

* test(configure): test with non-global this

* chore: from merge

* chore: updat bundle size

* chore: remove stuff from bad merge

* feedback from review

* feat(context): migrate remaining connectors [STEP 3] (#2180)

* feat(context): migrate remaining connectors [STEP 3]

chore: remove wrong import

test(currentRefinements): remove unused context

chore(range): fix typo

fix(geoSearch): gSP

test: call connectors with unique context where possible

feedback from review

chore(infiniteHits): cleaner test

refactor: migrate new connectors

chore: prettier

fix context

default props

fix TS

chore: small fix

* feat(context): multi-index [STEP 4] (#2181)

* feat(context): migrate remaining connectors [STEP 3]

* chore: remove wrong import

* test(currentRefinements): remove unused context

* chore(range): fix typo

* fix(geoSearch): gSP

* test: call connectors with unique context where possible

* feedback from review

* chore(infiniteHits): cleaner test

* refactor: migrate new connectors

* chore: prettier

* fix context

* default props

* fix TS

* chore: small fix

* feat(context): multi-index [STEP 4]

  test(Index): re-enable and make work

  fix(Index): allow context to be empty initially

  fix(Index): onSearchParameters with correct context

  fix(connector): onSearchParameters with correct context

  chore(Index): remove else

  chore(Index): consistent integration test

  chore: clarify test

  chore: fix life cycle

  fix(ts): index context can be undefined

  feedback from review

  fix(index): correct life cycles

  fix TS on Index

  connectorWrapper

  chore: update snapshots

* feat(context): apply multi-index [STEP 5] (#2185)

Co-Authored-By: samouss <samouss@users.noreply.github.com>

  * feat(context): modify Index to use modern context

  * test(Index): re-enable and make work

  * fix(Index): allow context to be empty initially

  * fix(Index): onSearchParameters with correct context

  * fix(connector): onSearchParameters with correct context

  * chore(Index): remove else

  * chore(Index): consistent integration test

  * chore: clarify test

  * chore: fix life cycle

  * fix(ts): index context can be undefined

  * feedback from review

  * fix(index): correct life cycles

  * fix TS on Index

  * connectorWrapper

  * chore: update snapshots

  * feat(context): modify Index to use modern context

  * feat(context): apply multi-index [STEP 5]

  1. connectMenu

  * connectAutoComplete

  * connectBreadcrumb

  * connectConfigure

  * connectGeoSearch

  * connectHierarchicalMenu

  * connectHits

  * connectHitsPerPage

  * connectInfiniteHits

  * connectNumericMenu

  * connectPagination

  * connectStats

  * connectRange

  * connectRefinementList

  * connectScrollTo

  * connectSearchBox

  * test(hierarchical): remove shadowing

  * connectSortBy

  * connectStateResults

  * connectToggleRefinement

  * fix(configure): use multi-index context

  * chore(configure): replace lodash.omit by spreading

  * test(connectors): call changing context

  * chore(configure): less lodash

  * test(configure): more detailed test

  * chore(test): rename ctx to instance

  * chore: move test

  * suggestions from review (mainly making multi-index tests more interesting)

  * chore: fix bundlesize

  * wrong conflict

  * migrate connectQueryRules

  * Feedback from review

  * fix(hitInsights): re-enable multi-index tests

* feat(context): re-enable SSR [STEP 6] (#2192)

  * chore(ssr): unskip tests

  * test(ssr): better test implem

  * chore: remove unused file

  * test: more consistent mock

* docs(connectors): fix spelling [STEP 8] (#2190)

  These are misc fixes in spelling that didn't exactly fit in a different PR

  remove small typo

package.json

@@ -129,19 +129,19 @@
     },
     {
       "path": "packages/react-instantsearch/dist/umd/Connectors.min.js",
-      "maxSize": "38.50 kB"
+      "maxSize": "41 kB"
     },
     {
       "path": "packages/react-instantsearch/dist/umd/Dom.min.js",
       "maxSize": "64.20 kB"
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",
-      "maxSize": "41.50 kB"
+      "maxSize": "42 kB"
     },
     {
       "path": "packages/react-instantsearch-dom/dist/umd/ReactInstantSearchDOM.min.js",
-      "maxSize": "64.00 kB"
+      "maxSize": "64.25 kB"
     },
     {
       "path": "packages/react-instantsearch-dom-maps/dist/umd/ReactInstantSearchDOMMaps.min.js",

packages/react-instantsearch-core/src/components/Index.tsx

@@ -0,0 +1,145 @@
+import React, { Component, Children, ReactType } from 'react';
+import PropTypes from 'prop-types';
+import {
+  InstantSearchConsumer,
+  InstantSearchContext,
+  IndexProvider,
+  IndexContext,
+} from '../core/context';
+
+type Props = {
+  indexName: string;
+  indexId: string;
+  root: {
+    Root: ReactType;
+    props: {};
+  };
+};
+
+type InnerProps = Props & { contextValue: InstantSearchContext };
+
+type State = {
+  indexContext: IndexContext;
+};
+
+/**
+ * @description
+ * `<Index>` is the component that allows you to apply widgets to a dedicated index. It's
+ * useful if you want to build an interface that targets multiple indices.
+ * @kind widget
+ * @name <Index>
+ * @propType {string} indexName - index in which to search.
+ * @propType {{ Root: string|function, props: object }} [root] - Use this to customize the root element. Default value: `{ Root: 'div' }`
+ * @example
+ * import React from 'react';
+ * import { InstantSearch, Index, SearchBox, Hits, Configure } from 'react-instantsearch-dom';
+ *
+ * const App = () => (
+ *   <InstantSearch
+ *     appId="latency"
+ *     apiKey="6be0576ff61c053d5f9a3225e2a90f76"
+ *     indexName="instant_search"
+ *   >
+ *     <Configure hitsPerPage={5} />
+ *     <SearchBox />
+ *     <Index indexName="instant_search">
+ *       <Hits />
+ *     </Index>
+ *     <Index indexName="bestbuy">
+ *       <Hits />
+ *     </Index>
+ *   </InstantSearch>
+ * );
+ */
+class Index extends Component<InnerProps, State> {
+  static propTypes = {
+    // @TODO: These props are currently constant.
+    indexName: PropTypes.string.isRequired,
+    indexId: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    root: PropTypes.shape({
+      Root: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.func,
+        PropTypes.object,
+      ]),
+      props: PropTypes.object,
+    }).isRequired,
+  };
+
+  unregisterWidget?: () => void;
+
+  state = {
+    indexContext: {
+      targetedIndex: this.props.indexId,
+    },
+  };
+
+  constructor(props: InnerProps) {
+    super(props);
+
+    this.props.contextValue.onSearchParameters(
+      this.getSearchParameters.bind(this),
+      {
+        ais: this.props.contextValue,
+        multiIndexContext: this.state.indexContext,
+      },
+      this.props
+    );
+  }
+
+  componentDidMount() {
+    this.unregisterWidget = this.props.contextValue.widgetsManager.registerWidget(
+      this
+    );
+  }
+
+  componentWillReceiveProps(nextProps: InnerProps) {
+    if (this.props.indexName !== nextProps.indexName) {
+      this.props.contextValue.widgetsManager.update();
+    }
+    if (this.props.indexId !== nextProps.indexId) {
+      this.setState({
+        indexContext: {
+          targetedIndex: nextProps.indexId,
+        },
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    if (typeof this.unregisterWidget === 'function') {
+      this.unregisterWidget();
+    }
+  }
+
+  getSearchParameters(searchParameters, props) {
+    return searchParameters.setIndex(
+      this.props ? this.props.indexName : props.indexName
+    );
+  }
+
+  render() {
+    const childrenCount = Children.count(this.props.children);
+    const { Root, props } = this.props.root;
+    if (childrenCount === 0) {
+      return null;
+    }
+    return (
+      <Root {...props}>
+        <IndexProvider value={this.state.indexContext}>
+          {this.props.children}
+        </IndexProvider>
+      </Root>
+    );
+  }
+}
+
+const IndexWrapper: React.FC<Props> = props => (
+  <InstantSearchConsumer>
+    {contextValue => <Index contextValue={contextValue} {...props} />}
+  </InstantSearchConsumer>
+);
+
+export const IndexComponentWithoutContext = Index;
+export default IndexWrapper;