Update demo site

demo/README.md

@@ -28,6 +28,16 @@ npm link ../
 Now imports of `'react-recollect'` in the demo site will load from
 `react-recollect/dist`.
 
+Running `npm i` will undo this link, in which case you'll need to do it again to
+relink.
+
+Beware! Since this directory will have a `node_modules` directory, `react-dom`
+may be loaded from there, rather than the `demo/node_modules` directory. To be
+100% certain you're replicating what users get, you'll want to release as a
+prerelease and install it from npm. This is also required to test that when the
+package is installed, it doesn't install any `node_modules` when it shouldn't
+(e.g. it should share hoistNonReactStatics with material-ui).
+
 Unlink with `npm i react-recollect`.
 
 Start the demo site:

demo/src/App.js

@@ -8,10 +8,11 @@ import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { collect } from 'react-recollect';
 import './App.css';
+import BatchedUpdates from './pages/batchedUpdates/BatchedUpdates';
 import BigTree from './pages/bigTree/BigTree';
 import Products from './pages/products/Products';
 import TodoMvcPage from './pages/todomvc/components/TodoMvcPage';
-import { PAGES } from './pages/todomvc/constants';
+import { PAGES } from './shared/constants';
 import StorePropType from './propTypes/StorePropType';
 
 const App = ({ store }) => (
@@ -39,6 +40,8 @@ const App = ({ store }) => (
 
     {store.currentPage === PAGES.PRODUCTS && <Products />}
 
+    {store.currentPage === PAGES.BATCHED_UPDATES && <BatchedUpdates />}
+
     {store.currentPage === PAGES.BIG_TREE && (
       <ScopedCssBaseline>
         <BigTree />

demo/src/index.js

@@ -11,12 +11,15 @@ import {
   PRODUCT_FILTER,
   TYPES,
   VISIBILITY_FILTERS,
-} from './pages/todomvc/constants';
+} from './shared/constants';
 import Theme from './shared/Theme';
 
 initStore({
   currentPage: localStorage.currentPage || PAGES.PRODUCTS,
   loading: false,
+  batchUpdatePage: {
+    text: '×',
+  },
   productPage: {
     filter: PRODUCT_FILTER.ALL,
     products: [],

demo/src/pages/batchedUpdates/BatchedUpdates.js

@@ -0,0 +1,58 @@
+import Container from '@material-ui/core/Container';
+import React from 'react';
+import { collect } from 'react-recollect';
+import StorePropType from '../../propTypes/StorePropType';
+import Parent from './Parent';
+
+class BatchedUpdates extends React.Component {
+  renderCount = 1;
+
+  update = () => {
+    this.props.store.batchUpdatePage.text += '×';
+  };
+
+  render() {
+    return (
+      <Container>
+        <h2>Render count: {this.renderCount++}</h2>
+
+        <p>
+          When functioning correctly, clicking either button below triggers only
+          a single render for each component
+        </p>
+
+        <hr />
+        <p>
+          This changes the store within an onClick handler. In this case, React
+          will batch updates and trigger a single render by default
+        </p>
+        <button onClick={this.update}>Increment</button>
+
+        <hr />
+
+        <p>
+          This changes the store outside of a onClick handler (in a setTimeout
+          callback). In this case, React can’t batch updates, but the batching
+          is handled internally by Recollect.
+        </p>
+        <button
+          onClick={() => {
+            setTimeout(this.update);
+          }}
+        >
+          Increment async
+        </button>
+
+        <hr />
+
+        <Parent />
+      </Container>
+    );
+  }
+}
+
+BatchedUpdates.propTypes = {
+  store: StorePropType.isRequired,
+};
+
+export default collect(BatchedUpdates);

demo/src/pages/batchedUpdates/Child.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { collect, PropTypes } from 'react-recollect';
+import StorePropType from '../../propTypes/StorePropType';
+
+class Child extends React.Component {
+  renderCount = 1;
+
+  render() {
+    const { text } = this.props.store.batchUpdatePage;
+
+    return (
+      <div>
+        <h1>{`Child renders: ${this.renderCount++}`}</h1>
+        <h2>{`Child value: ${text}`}</h2>
+        <h2>{`Child value fromParent: ${this.props.fromParent}`}</h2>
+      </div>
+    );
+  }
+}
+
+Child.propTypes = {
+  fromParent: PropTypes.string.isRequired,
+  store: StorePropType.isRequired,
+};
+
+export default collect(Child);

demo/src/pages/batchedUpdates/Parent.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { collect } from 'react-recollect';
+import StorePropType from '../../propTypes/StorePropType';
+import Child from './Child';
+
+class Parent extends React.Component {
+  renderCount = 1;
+
+  render() {
+    const { text } = this.props.store.batchUpdatePage;
+
+    return (
+      <div>
+        <h1>{`Parent renders: ${this.renderCount++}`}</h1>
+        <h2>{`Parent value: ${text}`}</h2>
+        <Child fromParent={`${text}!`} />
+      </div>
+    );
+  }
+}
+
+Parent.propTypes = {
+  store: StorePropType.isRequired,
+};
+
+export default collect(Parent);

demo/src/pages/bigTree/Item.js

@@ -7,7 +7,7 @@ import { Delete } from '@material-ui/icons';
 import TreeItem from '@material-ui/lab/TreeItem';
 import React, { useRef } from 'react';
 import { PropTypes } from 'react-recollect';
-import { TYPES } from '../todomvc/constants';
+import { TYPES } from '../../shared/constants';
 import { getChildrenAsArray } from './selectors';
 import { deleteChild } from './updaters';
 import { makeItem } from './utils';

demo/src/pages/bigTree/selectors.js

@@ -1,4 +1,4 @@
-import { TYPES } from '../todomvc/constants';
+import { TYPES } from '../../shared/constants';
 
 export const getChildrenAsArray = (item) => {
   if (item.childrenType === TYPES.OBJ) {

demo/src/pages/bigTree/updaters.js

@@ -1,4 +1,4 @@
-import { TYPES } from '../todomvc/constants';
+import { TYPES } from '../../shared/constants';
 
 export const deleteChild = (parent, child) => {
   if (parent.childrenType === TYPES.OBJ) {

demo/src/pages/bigTree/utils.js

@@ -1,4 +1,4 @@
-import { TYPES } from '../todomvc/constants';
+import { TYPES } from '../../shared/constants';
 
 let id = 99;
 

demo/src/pages/products/Products.js

@@ -9,7 +9,7 @@ import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { collect } from 'react-recollect';
 import StorePropType from '../../propTypes/StorePropType';
-import { PRODUCT_FILTER } from '../todomvc/constants';
+import { PRODUCT_FILTER } from '../../shared/constants';
 import Product from './Product';
 import styles from './Products.module.css';
 

demo/src/pages/products/propTypes/ProductPagePropType.js

@@ -1,5 +1,5 @@
 import { PropTypes } from 'react-recollect';
-import { PRODUCT_FILTER } from '../../todomvc/constants';
+import { PRODUCT_FILTER } from '../../../shared/constants';
 import ProductPropType from './ProductPropType';
 
 const ProductPagePropType = PropTypes.shape({

demo/src/pages/todomvc/components/Footer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { collect, PropTypes } from 'react-recollect';
 import StorePropType from '../../../propTypes/StorePropType';
-import { VISIBILITY_FILTERS } from '../constants';
+import { VISIBILITY_FILTERS } from '../../../shared/constants';
 import Link from './Link';
 
 const Footer = (props) => {

demo/src/pages/todomvc/components/Link.js

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 import React from 'react';
 import { collect, PropTypes } from 'react-recollect';
 import StorePropType from '../../../propTypes/StorePropType';
-import { VISIBILITY_FILTERS } from '../constants';
+import { VISIBILITY_FILTERS } from '../../../shared/constants';
 
 const Link = ({ filter, children, store }) => (
   <button

demo/src/pages/todomvc/components/TodoMvcPage.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React, { useEffect } from 'react';
 import { collect, PropTypes } from 'react-recollect';
 import StorePropType from '../../../propTypes/StorePropType';
-import { LOAD_STATUSES } from '../constants';
+import { LOAD_STATUSES } from '../../../shared/constants';
 import loadTodoData from '../selectors/loadTodoData';
 import Header from './Header';
 import MainSection from './MainSection';

demo/src/pages/todomvc/propTypes/TodoMvcPropType.js

@@ -1,5 +1,5 @@
 import { PropTypes } from 'react-recollect';
-import { VISIBILITY_FILTERS } from '../constants';
+import { VISIBILITY_FILTERS } from '../../../shared/constants';
 import TodoPropType from './TodoPropType';
 
 const TodoMvcPropType = PropTypes.shape({

demo/src/pages/todomvc/selectors/getVisibleTodos.js

@@ -1,5 +1,5 @@
 import { store } from 'react-recollect';
-import { VISIBILITY_FILTERS } from '../constants';
+import { VISIBILITY_FILTERS } from '../../../shared/constants';
 
 const getVisibleTodos = () => {
   const { todos, visibilityFilter } = store.todoMvcPage;

demo/src/pages/todomvc/selectors/loadTodoData.js

@@ -1,5 +1,5 @@
 import { store } from 'react-recollect';
-import { LOAD_STATUSES } from '../constants';
+import { LOAD_STATUSES } from '../../../shared/constants';
 
 /** @return void */
 const loadTodoData = async () => {

demo/src/propTypes/StorePropType.js

@@ -1,6 +1,6 @@
 import { PropTypes } from 'react-recollect';
 import ProductPagePropType from '../pages/products/propTypes/ProductPagePropType';
-import { PAGES } from '../pages/todomvc/constants';
+import { PAGES } from '../shared/constants';
 import TodoMvcPropType from '../pages/todomvc/propTypes/TodoMvcPropType';
 
 const StorePropType = PropTypes.shape({

demo/src/pages/todomvc/constants.js → demo/src/shared/constants.js

@@ -6,6 +6,7 @@ export const VISIBILITY_FILTERS = {
 
 export const PAGES = {
   PRODUCTS: 'Products',
+  BATCHED_UPDATES: 'Batched updates',
   BIG_TREE: 'Big tree',
   TODO_MVC: 'Todo MVC',
 };