refactor(root): remove createIndex & createInstantSearch

package.json

@@ -129,7 +129,7 @@
     },
     {
       "path": "packages/react-instantsearch/dist/umd/Connectors.min.js",
-      "maxSize": "41 kB"
+      "maxSize": "42 kB"
     },
     {
       "path": "packages/react-instantsearch/dist/umd/Dom.min.js",

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

@@ -1,4 +1,4 @@
-import React, { Component, Children, ReactType } from 'react';
+import React, { Component, Children } from 'react';
 import PropTypes from 'prop-types';
 import {
   InstantSearchConsumer,
@@ -7,13 +7,15 @@ import {
   IndexContext,
 } from '../core/context';
 
+function getIndexContext(props: Props): IndexContext {
+  return {
+    targetedIndex: props.indexId || props.indexName,
+  };
+}
+
 type Props = {
   indexName: string;
-  indexId: string;
-  root: {
-    Root: ReactType;
-    props: {};
-  };
+  indexId?: string;
 };
 
 type InnerProps = Props & { contextValue: InstantSearchContext };
@@ -29,7 +31,6 @@ type State = {
  * @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 algoliasearch from 'algoliasearch/lite';
@@ -58,36 +59,31 @@ type State = {
  */
 class Index extends Component<InnerProps, State> {
   static propTypes = {
-    // @TODO: These props are currently constant.
     indexName: PropTypes.string.isRequired,
-    indexId: PropTypes.string.isRequired,
+    indexId: PropTypes.string,
     children: PropTypes.node,
-    root: PropTypes.shape({
-      Root: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.func,
-        PropTypes.object,
-      ]),
-      props: PropTypes.object,
-    }).isRequired,
   };
 
-  unregisterWidget?: () => void;
+  static getDerivedStateFromProps(props: InnerProps) {
+    return {
+      indexContext: getIndexContext(props),
+    };
+  }
 
   state = {
-    indexContext: {
-      targetedIndex: this.props.indexId,
-    },
+    indexContext: getIndexContext(this.props),
   };
 
+  unregisterWidget?: () => void;
+
   constructor(props: InnerProps) {
     super(props);
 
     this.props.contextValue.onSearchParameters(
       this.getSearchParameters.bind(this),
       {
         ais: this.props.contextValue,
-        multiIndexContext: this.state.indexContext,
+        multiIndexContext: getIndexContext(props),
       },
       this.props
     );
@@ -99,18 +95,10 @@ class Index extends Component<InnerProps, State> {
     );
   }
 
-  componentWillReceiveProps(nextProps: InnerProps) {
-    // @TODO: DidUpdate
-    if (this.props.indexName !== nextProps.indexName) {
+  componentDidUpdate(prevProps: InnerProps) {
+    if (this.props.indexName !== prevProps.indexName) {
       this.props.contextValue.widgetsManager.update();
     }
-    if (this.props.indexId !== nextProps.indexId) {
-      this.setState({
-        indexContext: {
-          targetedIndex: nextProps.indexId,
-        },
-      });
-    }
   }
 
   componentWillUnmount() {
@@ -119,24 +107,21 @@ class Index extends Component<InnerProps, State> {
     }
   }
 
-  getSearchParameters(searchParameters, props) {
+  getSearchParameters(searchParameters, props: InnerProps) {
     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>
+      <IndexProvider value={this.state.indexContext}>
+        {this.props.children}
+      </IndexProvider>
     );
   }
 }

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

@@ -1,4 +1,4 @@
-import React, { Component, Children, ReactType } from 'react';
+import React, { Component, Children } from 'react';
 import PropTypes from 'prop-types';
 import createInstantSearchManager from '../core/createInstantSearchManager';
 import { InstantSearchProvider, InstantSearchContext } from '../core/context';
@@ -61,10 +61,6 @@ type Props = {
     searchState: SearchState
   ) => void;
   stalledSearchDelay?: number;
-  root: {
-    Root: ReactType;
-    props: {};
-  };
   resultsState: SearchResults | { [indexId: string]: SearchResults };
 };
 
@@ -113,6 +109,7 @@ type State = {
 class InstantSearch extends Component<Props, State> {
   static defaultProps = {
     stalledSearchDelay: 200,
+    refresh: false,
   };
 
   static propTypes = {
@@ -128,7 +125,7 @@ class InstantSearch extends Component<Props, State> {
 
     createURL: PropTypes.func,
 
-    refresh: PropTypes.bool.isRequired,
+    refresh: PropTypes.bool,
 
     searchState: PropTypes.object,
     onSearchStateChange: PropTypes.func,
@@ -137,16 +134,6 @@ class InstantSearch extends Component<Props, State> {
     resultsState: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 
     children: PropTypes.node,
-
-    root: PropTypes.shape({
-      Root: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.func,
-        PropTypes.object,
-      ]),
-      props: PropTypes.object,
-    }).isRequired,
-
     stalledSearchDelay: PropTypes.number,
   };
 
@@ -261,16 +248,13 @@ class InstantSearch extends Component<Props, State> {
 
   render() {
     const childrenCount = Children.count(this.props.children);
-    const { Root, props } = this.props.root;
     if (childrenCount === 0) {
       return null;
     }
     return (
-      <Root {...props}>
-        <InstantSearchProvider value={this.state.contextValue}>
-          {this.props.children}
-        </InstantSearchProvider>
-      </Root>
+      <InstantSearchProvider value={this.state.contextValue}>
+        {this.props.children}
+      </InstantSearchProvider>
     );
   }
 }

packages/react-instantsearch-core/src/components/__tests__/Index.js

@@ -55,7 +55,8 @@ describe('Index', () => {
   it('calls update if indexName prop changes', () => {
     const context = createContext();
 
-    const wrapper = shallow(
+    // componentDidUpdate wasn't called on `shallow`
+    const wrapper = mount(
       <IndexComponentWithoutContext {...requiredProps} contextValue={context}>
         <div />
       </IndexComponentWithoutContext>

packages/react-instantsearch-core/src/components/__tests__/InstantSearch.js

@@ -326,15 +326,15 @@ describe('InstantSearch', () => {
       indexName: 'foobar',
     });
 
-    expect(wrapper.html()).toMatchInlineSnapshot(`"<div>foobar</div>"`);
+    expect(wrapper.html()).toMatchInlineSnapshot(`"foobar"`);
 
     expect(ism.updateIndex).not.toHaveBeenCalled();
 
     wrapper.setProps({
       indexName: 'newIndexName',
     });
 
-    expect(wrapper.html()).toMatchInlineSnapshot(`"<div>newIndexName</div>"`);
+    expect(wrapper.html()).toMatchInlineSnapshot(`"newIndexName"`);
 
     expect(ism.updateIndex).toHaveBeenCalledTimes(1);
   });