Merge pull request #61 from springload/chore/unstated

Moving from mobx to unstated

Author: vincentaudebert

CHANGELOG.md

@@ -3,21 +3,26 @@
 > All notable changes to this project are documented in this file.
 > This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## Next
+
+### Changed
+
+* Refactored to use `unstated` for state-management instead of `mobx` + `mobx-react`, cutting the
+  size of the bundle by approximately 60% 🎉.
+
 ## [[v2.2.1]](https://github.com/springload/react-accessible-accordion/releases/tag/v2.2.1)
 
 ### Changed
 
 * Fixes mixed up filenames in the README
 
-
 ## [[v2.2.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v2.2.0)
 
 ### Added
 
 * Demo styles added to the bundle as two optional files:
-  - `minimal-example.css`: 'Minimal' theme - hide/show the AccordionBody component
-  - `fancy-example.css`: 'Fancy' theme - boilerplate styles for all components, as seen on our demo
-
+    * `minimal-example.css`: 'Minimal' theme - hide/show the AccordionBody component
+    * `fancy-example.css`: 'Fancy' theme - boilerplate styles for all components, as seen on our demo
 
 ## [[v2.1.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v2.1.0)
 

package-lock.json

@@ -17,13 +17,10 @@
     "build:clean": "rm -rf dist/*",
     "build:rollup": "NODE_ENV=production rollup -c",
     "build:flow": "flow-copy-source src dist/es -i \"**/*.spec.js\"",
-    "build":
-      "npm run build:clean && npm run build:css && npm run build:flow && npm run build:rollup",
+    "build": "npm run build:clean && npm run build:css && npm run build:flow && npm run build:rollup",
     "start": "npm run js:watch",
-    "start-demo":
-      "webpack-dev-server --config ./webpack/webpack.config.demo.js",
-    "pages":
-      "rm -rf pages && cp -R demo pages && webpack --config=./webpack/webpack.config.pages.js",
+    "start-demo": "webpack-dev-server --config ./webpack/webpack.config.demo.js",
+    "pages": "rm -rf pages && cp -R demo pages && webpack --config=./webpack/webpack.config.pages.js",
     "deploy": "npm run pages && ./bin/deploy.sh",
     "prettier": "prettier **/*.js --write",
     "prepublishOnly": "npm run build"
@@ -45,13 +42,22 @@
     ],
     "env": {
       "test": {
-        "presets": ["es2015", "react", "stage-2"]
+        "presets": [
+          "es2015",
+          "react",
+          "stage-2"
+        ]
       }
     }
   },
   "jest": {
-    "setupFiles": ["./src/setupTests.js"],
-    "testPathIgnorePatterns": ["/node_modules/", "/dist/"]
+    "setupFiles": [
+      "./src/setupTests.js"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/dist/"
+    ]
   },
   "keywords": [
     "react",
@@ -61,7 +67,9 @@
     "accessible",
     "accessibility"
   ],
-  "authors": ["Vincent Audebert <[email protected]>"],
+  "authors": [
+    "Vincent Audebert <[email protected]>"
+  ],
   "contributors": [
     {
       "name": "Mitch Ryan",
@@ -83,6 +91,7 @@
     "babel-cli": "^6.26.0",
     "babel-eslint": "^8.2.2",
     "babel-loader": "^7.1.2",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
@@ -120,8 +129,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "consecutive": "^5.0.4",
-    "mobx": "^3.4.0",
-    "mobx-react": "^4.3.5"
+    "unstated": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^15.4.0 || ^16.0.0",

package.json

@@ -21,7 +21,10 @@ export default [
                 browser: true,
             }),
             eslint(),
-            babel(),
+            babel({
+                plugins: ['external-helpers'],
+                externalHelpers: true,
+            }),
             commonjs(),
             replace({
                 exclude: 'node_modules/**',

rollup.config.js

@@ -0,0 +1,54 @@
+// @flow
+
+import React, { Component } from 'react';
+import type { ElementProps } from 'react';
+
+import { Provider, Subscribe } from 'unstated';
+import AccordionContainer from '../AccordionContainer/AccordionContainer';
+import Accordion from './accordion';
+
+type AccordionWrapperProps = ElementProps<'div'> & {
+    accordion: boolean,
+    onChange: Function,
+};
+
+const defaultProps: AccordionWrapperProps = {
+    accordion: true,
+    onChange: () => {},
+    className: 'accordion',
+    children: null,
+};
+
+class AccordionWrapper extends Component<AccordionWrapperProps> {
+    accordionStore = new AccordionContainer();
+
+    static defaultProps = defaultProps;
+
+    componentWillMount() {
+        this.accordionStore.setAccordion(this.props.accordion);
+        this.accordionStore.setOnChange(this.props.onChange);
+    }
+
+    componentWillUpdate(nextProps: AccordionWrapperProps) {
+        this.accordionStore.setAccordion(nextProps.accordion);
+        this.accordionStore.setOnChange(nextProps.onChange);
+    }
+
+    render() {
+        const { accordion, onChange, ...rest } = this.props;
+        return (
+            <Provider inject={[this.accordionStore]}>
+                <Subscribe to={[AccordionContainer]}>
+                    {accordionStore => (
+                        <Accordion
+                            accordion={accordionStore.state.accordion}
+                            {...rest}
+                        />
+                    )}
+                </Subscribe>
+            </Provider>
+        );
+    }
+}
+
+export default AccordionWrapper;

src/Accordion/accordion-wrapper.js

@@ -1,37 +1,18 @@
 // @flow
 
-import React, { Component, type ElementProps } from 'react';
-import { Provider } from 'mobx-react';
-import { createAccordionStore } from '../accordionStore/accordionStore';
+import React, { type ElementProps } from 'react';
 
 type AccordionProps = ElementProps<'div'> & {
-    accordion: boolean,
-    onChange: Function,
+    accordion: ?boolean,
 };
 
-class Accordion extends Component<AccordionProps, *> {
-    static defaultProps = {
-        accordion: true,
-        onChange: () => {},
-        className: 'accordion',
-        children: null,
-    };
-
-    accordionStore = createAccordionStore({
-        accordion: this.props.accordion,
-        onChange: this.props.onChange,
-    });
-
-    render() {
-        const { accordion: accordionProp, onChange, ...rest } = this.props;
-        const { accordion } = this.accordionStore;
+const accordionDefaultProps = {
+    accordion: true,
+};
 
-        return (
-            <Provider accordionStore={this.accordionStore}>
-                <div role={accordion ? 'tablist' : null} {...rest} />
-            </Provider>
-        );
-    }
-}
+const Accordion = ({ accordion, ...rest }: AccordionProps) => (
+    <div role={accordion ? 'tablist' : null} {...rest} />
+);
+Accordion.defaultProps = accordionDefaultProps;
 
 export default Accordion;