├── .eslintrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── index.js ├── inferno.js ├── package.json ├── src └── connect.js └── test ├── fixtures └── components.js └── react.test.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | // http://eslint.org/docs/rules/ 3 | "parser": "babel-eslint", 4 | 5 | "ecmaFeatures": { 6 | "binaryLiterals": false, // enable binary literals 7 | "blockBindings": true, // enable let and const (aka block bindings) 8 | "defaultParams": true, // enable default function parameters 9 | "forOf": false, // enable for-of loops 10 | "generators": true, // enable generators 11 | "objectLiteralComputedProperties": true, // enable computed object literal property names 12 | "objectLiteralDuplicateProperties": false, // enable duplicate object literal properties in strict mode 13 | "objectLiteralShorthandMethods": true, // enable object literal shorthand methods 14 | "objectLiteralShorthandProperties": true, // enable object literal shorthand properties 15 | "octalLiterals": true, // enable octal literals 16 | "regexUFlag": false, // enable the regular expression u flag 17 | "regexYFlag": false, // enable the regular expression y flag 18 | "templateStrings": true, // enable template strings 19 | "unicodeCodePointEscapes": false, // enable code point escapes 20 | "jsx": true // enable JSX 21 | }, 22 | 23 | "env": { 24 | "browser": true, // browser global variables. 25 | "node": true, // Node.js global variables and Node.js-specific rules. 26 | "amd": true, // defines require() and define() as global variables as per the amd spec. 27 | "mocha": true // adds all of the Mocha testing global variables. 28 | }, 29 | 30 | "globals": { 31 | "mapboxgl": true, 32 | "isClient": true, 33 | "isServer": true, 34 | "__dirname": true, 35 | "map": true 36 | }, 37 | 38 | "plugins": [ 39 | "react", 40 | "babel" 41 | ], 42 | 43 | "rules": { 44 | ////////// Possible Errors ////////// 45 | "no-cond-assign": 1, // disallow assignment in conditional expressions 46 | "no-console": 0, // disallow use of console (off by default in the node environment) 47 | "no-constant-condition": 0, // disallow use of constant expressions in conditions 48 | "no-control-regex": 1, // disallow control characters in regular expressions 49 | "no-debugger": 0, // disallow use of debugger 50 | "no-dupe-keys": 2, // disallow duplicate keys when creating object literals 51 | "no-dupe-args": 2, // disallow duplicate arguments in functions 52 | "no-duplicate-case": 2, // disallow a duplicate case label 53 | "no-empty": 0, // disallow empty statements 54 | "no-ex-assign": 1, // disallow assigning to the exception in a catch block 55 | "no-extra-boolean-cast": 1, // disallow double-negation boolean casts in a boolean context 56 | "no-extra-parens": 0, // disallow unnecessary parentheses (off by default) 57 | "no-extra-semi": 1, // disallow unnecessary semicolons 58 | "no-func-assign": 2, // disallow overwriting functions written as function declarations 59 | "no-inner-declarations": 1, // disallow function or variable declarations in nested blocks 60 | "no-invalid-regexp": 2, // disallow invalid regular expression strings in the RegExp constructor 61 | "no-irregular-whitespace": 0, // disallow irregular whitespace outside of strings and comments 62 | "no-negated-in-lhs": 0, // disallow negation of the left operand of an in expression 63 | "no-obj-calls": 0, // disallow the use of object properties of the global object (Math and JSON) as functions 64 | "no-regex-spaces": 1, // disallow multiple spaces in a regular expression literal 65 | "no-sparse-arrays": 1, // disallow sparse arrays 66 | "no-unreachable": 1, // disallow unreachable statements after a return, throw, continue, or break statement 67 | "use-isnan": 2, // disallow comparisons with the value NaN 68 | "valid-jsdoc": 0, // Ensure JSDoc comments are valid (off by default) 69 | "valid-typeof": 1, // Ensure that the results of typeof are compared against a valid string 70 | 71 | 72 | ////////// Best Practices ////////// 73 | "block-scoped-var": 0, // treat var statements as if they were block scoped (off by default) 74 | "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default) 75 | "curly": 0, // specify curly brace conventions for all control statements 76 | "default-case": 0, // require default case in switch statements (off by default) 77 | "dot-notation": 0, // encourages use of dot notation whenever possible 78 | "eqeqeq": 1, // require the use of === and !== 79 | "guard-for-in": 0, // make sure for-in loops have an if statement (off by default) 80 | "no-alert": 1, // disallow the use of alert, confirm, and prompt 81 | "no-caller": 1, // disallow use of arguments.caller or arguments.callee 82 | "no-div-regex": 1, // disallow division operators explicitly at beginning of regular expression (off by default) 83 | "no-else-return": 0, // disallow else after a return in an if (off by default) 84 | "no-empty-label": 1, // disallow use of labels for anything other then loops and switches 85 | "no-eq-null": 1, // disallow comparisons to null without a type-checking operator (off by default) 86 | "no-eval": 2, // disallow use of eval() 87 | "no-extend-native": 0, // disallow adding to native types 88 | "no-extra-bind": 2, // disallow unnecessary function binding 89 | "no-fallthrough": 1, // disallow fallthrough of case statements 90 | "no-floating-decimal": 0, // disallow the use of leading or trailing decimal points in numeric literals (off by default) 91 | "no-implied-eval": 1, // disallow use of eval()-like methods 92 | "no-iterator": 2, // disallow usage of __iterator__ property 93 | "no-labels": 1, // disallow use of labeled statements 94 | "no-lone-blocks": 1, // disallow unnecessary nested blocks 95 | "no-loop-func": 2, // disallow creation of functions within loops 96 | "no-multi-spaces": 0, // disallow use of multiple spaces 97 | "no-multi-str": 1, // disallow use of multiline strings 98 | "no-native-reassign": 2, // disallow reassignments of native objects 99 | "no-new": 1, // disallow use of new operator when not part of the assignment or comparison 100 | "no-new-func": 1, // disallow use of new operator for Function object 101 | "no-new-wrappers": 1, // disallows creating new instances of String, Number, and Boolean 102 | "no-octal": 1, // disallow use of octal literals 103 | "no-octal-escape": 1, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251"; 104 | "no-process-env": 0, // disallow use of process.env (off by default) 105 | "no-proto": 1, // disallow usage of __proto__ property 106 | "no-redeclare": 2, // disallow declaring the same variable more then once 107 | "no-return-assign": 2, // disallow use of assignment in return statement 108 | "no-script-url": 1, // disallow use of javascript: urls. 109 | "no-self-compare": 0, // disallow comparisons where both sides are exactly the same (off by default) 110 | "no-sequences": 0, // disallow use of comma operator 111 | "no-unused-expressions": 0, // disallow usage of expressions in statement position 112 | "no-void": 0, // disallow use of void operator (off by default) 113 | "no-warning-comments": 0, // disallow usage of configurable warning terms in comments, e.g. TODO or FIXME (off by default) 114 | "no-with": 2, // disallow use of the with statement 115 | "radix": 0, // require use of the second argument for parseInt() (off by default) 116 | "vars-on-top": 0, // requires to declare all vars on top of their containing scope (off by default) 117 | "wrap-iife": 0, // require immediate function invocation to be wrapped in parentheses (off by default) 118 | 119 | ////////// Strict Mode ////////// 120 | "strict": 0, // controls location of Use Strict Directives 121 | 122 | ////////// Variables ////////// 123 | "no-catch-shadow": 0, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment) 124 | "no-delete-var": 1, // disallow deletion of variables 125 | "no-label-var": 1, // disallow labels that share a name with a variable 126 | "no-shadow": 2, // disallow declaration of variables already declared in the outer scope 127 | "no-shadow-restricted-names": 2, // disallow shadowing of names such as arguments 128 | "no-undef": 2, // disallow use of undeclared variables unless mentioned in a /*global */ block 129 | "no-undef-init": 2, // disallow use of undefined when initializing variables 130 | "no-undefined": 2, // disallow use of undefined variable (off by default) 131 | "no-unused-vars": 1, // disallow declaration of variables that are not used in the code 132 | "no-use-before-define": 0, // disallow use of variables before they are defined 133 | 134 | 135 | ////////// Node.js ////////// 136 | "handle-callback-err": 1, // enforces error handling in callbacks (off by default) (on by default in the node environment) 137 | "no-mixed-requires": 1, // disallow mixing regular variable and require declarations (off by default) (on by default in the node environment) 138 | "no-new-require": 1, // disallow use of new operator with the require function (off by default) (on by default in the node environment) 139 | "no-path-concat": 1, // disallow string concatenation with __dirname and __filename (off by default) (on by default in the node environment) 140 | "no-process-exit": 0, // disallow process.exit() (on by default in the node environment) 141 | "no-restricted-modules": 0, // restrict usage of specified node modules (off by default) 142 | "no-sync": 0, // disallow use of synchronous methods (off by default) 143 | 144 | 145 | ////////// Stylistic Issues ////////// 146 | "brace-style": 0, // enforce one true brace style (off by default) 147 | "camelcase": 0, // require camel case names 148 | "comma-spacing": 1, // enforce spacing before and after comma 149 | "comma-style": 0, // enforce one true comma style (off by default) 150 | "consistent-this": 0, // enforces consistent naming when capturing the current execution context (off by default) 151 | "eol-last": 1, // enforce newline at the end of file, with no multiple empty lines 152 | "func-names": 0, // require function expressions to have a name (off by default) 153 | "func-style": 0, // enforces use of function declarations or expressions (off by default) 154 | "key-spacing": 0, // enforces spacing between keys and values in object literal properties 155 | "max-nested-callbacks": 0, // specify the maximum depth callbacks can be nested (off by default) 156 | "new-cap": 0, // require a capital letter for constructors 157 | "new-parens": 2, // disallow the omission of parentheses when invoking a constructor with no arguments 158 | "no-array-constructor": 2, // disallow use of the Array constructor 159 | "no-inline-comments": 0, // disallow comments inline after code (off by default) 160 | "no-lonely-if": 0, // disallow if as the only statement in an else block (off by default) 161 | "no-mixed-spaces-and-tabs": 1, // disallow mixed spaces and tabs for indentation 162 | "no-multiple-empty-lines": 0, // disallow multiple empty lines (off by default) 163 | "no-nested-ternary": 0, // disallow nested ternary expressions (off by default) 164 | "no-new-object": 0, // disallow use of the Object constructor 165 | "semi-spacing": 0, // enforce spacing before and after semicolons 166 | "no-spaced-func": 0, // disallow space between function identifier and application 167 | "no-ternary": 0, // disallow the use of ternary operators (off by default) 168 | "no-trailing-spaces": 0, // disallow trailing whitespace at the end of lines 169 | "no-underscore-dangle": 0, // disallow dangling underscores in identifiers 170 | "one-var": 0, // allow just one var statement per function (off by default) 171 | "operator-assignment": 0, // require assignment operator shorthand where possible or prohibit it entirely (off by default) 172 | "padded-blocks": 0, // enforce padding within blocks (off by default) 173 | "quote-props": 0, // require quotes around object literal property names (off by default) 174 | "quotes": 0, // specify whether double or single quotes should be used 175 | "semi": 0, // require or disallow use of semicolons instead of ASI 176 | "sort-vars": 0, // sort variables within the same declaration block (off by default) 177 | "space-after-keywords": 0, // require a space after certain keywords (off by default) 178 | "space-before-blocks": 0, // require or disallow space before blocks (off by default) 179 | "space-in-parens": 0, // require or disallow spaces inside parentheses (off by default) 180 | "space-infix-ops": 0, // require spaces around operators 181 | "space-return-throw-case": 0, // require a space after return, throw, and case 182 | "wrap-regex": 0, // require regex literals to be wrapped in parentheses (off by default) 183 | 184 | 185 | ////////// ECMAScript 6 ////////// 186 | //"arrow-spacing": { "before": true, "after": true }, // require space before/after arrow function's arrow 187 | "no-class-assign": 2, // disallow modifying variables of class declarations 188 | "no-const-assign": 2, // disallow modifying variables that are declared using const 189 | "no-dupe-class-members": 2, // disallow duplicate name in class members 190 | "no-this-before-super": 2, // disallow use of this/super before calling super() 191 | "no-var": 0, // require let or const instead of var (off by default) 192 | 193 | 194 | ////////// React ////////// 195 | "react/display-name": 0, // Prevent missing displayName in a React component definition 196 | "react/jsx-no-undef": 2, // Disallow undeclared variables in JSX 197 | "react/jsx-sort-props": 0, // Enforce props alphabetical sorting 198 | "react/jsx-uses-react": 2, // Prevent React to be incorrectly marked as unused 199 | "react/jsx-uses-vars": 2, // Prevent variables used in JSX to be incorrectly marked as unused 200 | "react/jsx-no-duplicate-props": 1, //Prevent duplicate props in JSX 201 | "react/no-did-mount-set-state": 0, // Prevent usage of setState in componentDidMount (default 2) 202 | "react/no-did-update-set-state": 2, // Prevent usage of setState in componentDidUpdate 203 | "react/no-direct-mutation-state": 1, 204 | "react/no-multi-comp": 0, // Prevent multiple component definition per file 205 | "react/no-unknown-property": 2, // Prevent usage of unknown DOM property 206 | "react/prop-types": 0, // Prevent missing props validation in a React component definition 207 | "react/react-in-jsx-scope": 2, // Prevent missing React when using JSX 208 | "react/self-closing-comp": 2, // Prevent extra closing tags for components without children 209 | "react/wrap-multilines": 0, // Prevent missing parentheses around multilines JSX 210 | 211 | 212 | ////////// Legacy ////////// 213 | 214 | "max-depth": 0, // specify the maximum depth that blocks can be nested (off by default) 215 | "max-len": 0, // specify the maximum length of a line in your program (off by default) 216 | "max-params": 0, // limits the number of parameters that can be used in the function declaration. (off by default) 217 | "max-statements": 0, // specify the maximum number of statement allowed in a function (off by default) 218 | "no-bitwise": 0, // disallow use of bitwise operators (off by default) 219 | "no-plusplus": 0, // disallow use of unary operators, ++ and -- (off by default) 220 | 221 | ////////// Stage 0 ////////// 222 | "babel/generator-star-spacing": 1, 223 | "babel/new-cap": 0, 224 | "babel/object-curly-spacing": 0, 225 | "babel/object-shorthand": 0, 226 | "babel/arrow-parens": 0 227 | } 228 | } 229 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | .DS_Store 3 | node_modules/ 4 | npm-debug.log 5 | build 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | *.log 3 | .idea 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Ryan Megidov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### DEPRECATED 2 | 3 | Now that MobX has Provider support, you should use that instead. 4 | 5 | For React: 6 | [mobx-react](https://github.com/mobxjs/mobx-react) 7 | 8 | For Inferno: 9 | [mobx-inferno](https://github.com/nightwolfz/mobx-inferno) 10 | 11 | # mobx-connect 12 | 13 |

 

14 |

 

15 |

 

16 | 17 |

18 | 19 |   +   20 | 21 |   + 22 | 23 |

24 |

 

25 | 26 | Super lightweight (2 kb uncompressed) [MobX](https://github.com/mobxjs/mobx) `@connect` decorator for react/inferno components. 27 | Similar to `@connect` from react-redux. 28 | 29 | ## Installation 30 | 31 | npm install --save mobx-connect 32 | 33 | 34 | ## How it works 35 | 36 | By decorating your react/inferno component with `@connect` 2 things happen: 37 | 38 | + Your components becomes observable (so no need to define @observable, since @connect does it for you). 39 | + Your state and the store actions are inject into `this.context`. 40 | 41 | 42 | ## Usage example (React.JS) 43 | 44 | ```javascript 45 | import React from 'react' 46 | import { connect } from 'mobx-connect' 47 | 48 | @connect 49 | class App extends React.Component { 50 | 51 | toggleSetting(key) { 52 | const { settings} = this.context.state 53 | settings[key] = !settings[key] 54 | } 55 | 56 | render() { 57 | const { settings } = this.context.state 58 | 59 | return
60 | 61 | 64 | 67 |
68 | } 69 | } 70 | 71 | const SettingsView = connect(function(props, context) { 72 | const { settings } = context.state 73 | 74 | return
75 |

Settings

76 |

Fullscreen: {settings.fullscreen ? 'OFF' : 'ON'}

77 |

Logger: {settings.fullscreen ? 'OFF' : 'ON'}

78 |
79 | }) 80 | ``` 81 | 82 | 83 | ## Usage example (inferno.JS) 84 | 85 | ```javascript 86 | import Inferno from 'inferno' 87 | import Component from 'inferno-component' 88 | import { connect } from 'mobx-connect/inferno' // <---- 89 | 90 | @connect 91 | class App extends Component { 92 | // Everything else same as with React... 93 | } 94 | ``` 95 | 96 | ## Configuration 97 | 98 | Ccreate a file called `ContextProvider.js`. 99 | We need to wrap our root component (`App` in this case) around this `ContextProvider` before rendering. 100 | 101 | ```javascript 102 | const React = require('react') 103 | const { contextTypes } = require('mobx-connect') 104 | 105 | class ContextProvider extends React.Component { 106 | getChildContext() { 107 | return this.props.context; 108 | } 109 | render() { 110 | return this.props.children; 111 | } 112 | } 113 | 114 | ContextProvider.childContextTypes = contextTypes; 115 | ``` 116 | 117 | Then we define our default state and our store methods which affect the state. 118 | 119 | ```javascript 120 | const { observable } = require('mobx') 121 | 122 | const context = { 123 | // An observable mobx object 124 | state: observable({ 125 | username: '' 126 | }), 127 | store: { 128 | // Your methods that affect the state here 129 | // You can make this object deeper for more complicated structures 130 | // or import from another file 131 | setUsername(username) { 132 | context.state.username = username; 133 | } 134 | } 135 | } 136 | ``` 137 | 138 | Finally we inject context into our app and render HTML on the browser 139 | 140 | ```javascript 141 | ReactDOM.render( 142 | 143 | , document.getElementById('content')); 144 | ``` 145 | 146 | 147 | 148 | ## Usage with React-router 149 | 150 | ```javascript 151 | const React = require('react') 152 | const ReactDOM = require('react-dom') 153 | const { observable } = require('mobx') 154 | const { Router, RouterContext, browserHistory } = require('react-router') 155 | const ContextProvider = require('./ContextProvider') // or where ever you put it 156 | const routes = require('./routes') // or where ever you put it 157 | 158 | const context = { 159 | state: observable({}), 160 | store: {} 161 | } 162 | 163 | function createElement(props) { 164 | return 165 | 166 | 167 | } 168 | 169 | // Render HTML on the browser 170 | ReactDOM.render(, 173 | document.getElementById('container')) 174 | ``` 175 | 176 | ## Usage with Inferno-router 177 | 178 | ```javascript 179 | import Inferno from 'inferno' 180 | import Component from 'inferno-component' 181 | import InfernoDOM from 'inferno-dom' 182 | import { observable } from 'mobx' 183 | import ContextProvider from './ContextProvider' 184 | import routes from './routes' 185 | 186 | const context = { 187 | state: observable({}), 188 | store: {} 189 | } 190 | // Render HTML on the browser 191 | InfernoDOM.render( 192 | {routes} 193 | , 194 | document.getElementById('root')) 195 | 196 | ReactDOM.render(, 199 | document.getElementById('container')) 200 | ``` 201 | 202 | # Author 203 | 204 | https://github.com/nightwolfz 205 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | try { 8 | var mobxBinding = require('mobx-react'); 9 | var mobxConnect = require('./src/connect')(mobxBinding); 10 | } catch(e) { 11 | console.error(e.toString()) 12 | console.error('WARNING: You need to have `mobx-react` installed.\n', 13 | 'Example: npm install mobx-react --save\n', 14 | 'If you are using Inferno, use `mobx-connect/inferno` instead') 15 | } 16 | 17 | exports.default = mobxConnect; 18 | module.exports = exports['default']; 19 | -------------------------------------------------------------------------------- /inferno.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | try { 8 | var mobxBinding = require('mobx-inferno'); 9 | var mobxConnect = require('./src/connect')(mobxBinding); 10 | } catch(e) { 11 | console.error(e.toString()) 12 | console.error('WARNING: You need to have `mobx-inferno` installed.\n', 13 | 'Example: npm install mobx-inferno --save') 14 | } 15 | 16 | exports.default = mobxConnect; 17 | module.exports = exports['default']; 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mobx-connect", 3 | "version": "0.3.9", 4 | "description": "MobX @connect decorator for your react/inferno components", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "mocha ./test" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/nightwolfz/mobx-connect.git" 12 | }, 13 | "keywords": [ 14 | "react", 15 | "reactjs", 16 | "reactive", 17 | "inferno", 18 | "connect", 19 | "context", 20 | "store", 21 | "state", 22 | "redux", 23 | "mobx", 24 | "mobx-connect", 25 | "mobx-infero", 26 | "mobx-react", 27 | "mobservable", 28 | "observable" 29 | ], 30 | "author": "Ryan Megidov ", 31 | "license": "MIT", 32 | "bugs": { 33 | "url": "https://github.com/nightwolfz/mobx-connect/issues" 34 | }, 35 | "homepage": "https://github.com/nightwolfz/mobx-connect#readme", 36 | "dependencies": { 37 | "mobx": "2.x", 38 | "mobx-inferno": "^0.1.x", 39 | "mobx-react": "^3.5.x" 40 | }, 41 | "peerDependencies": { 42 | "mobx": "2.x", 43 | "mobx-inferno": "^0.1.x", 44 | "mobx-react": "^3.5.x" 45 | }, 46 | "devDependencies": { 47 | "chai": "^3.5.0", 48 | "enzyme": "^2.4.1", 49 | "mocha": "^3.0.2", 50 | "react": "^15.x.x", 51 | "react-addons-test-utils": "^15.x.x", 52 | "react-dom": "^15.x.x", 53 | "sinon": "^1.17.4" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/connect.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var mobxBinding; 4 | var defaultContextTypes = { 5 | router: function() {}, 6 | history: function() {}, 7 | actions: function() {}, 8 | action: function() {}, 9 | state: function() {}, 10 | store: function() {} 11 | } 12 | 13 | module.exports = function(bindings) { 14 | mobxBinding = bindings; 15 | 16 | return { 17 | connect: connect, 18 | provide: provide, 19 | observer: mobxBinding.observer, 20 | contextTypes: defaultContextTypes 21 | } 22 | } 23 | 24 | 25 | /** 26 | * Create contextTypes object from an array of strings. 27 | * @param ctxTypes {Array} 28 | * @returns {Object} 29 | */ 30 | function createContextTypes(ctxTypes) { 31 | return ctxTypes.reduce(function(obj, ctxItem) { 32 | obj[ctxItem] = function() {} 33 | return obj 34 | }, {}); 35 | } 36 | 37 | function composeWithContext(args) { 38 | if (args && args.length) { 39 | 40 | // @connect / The first argument is the component. 41 | if (typeof args[0] === 'function') { 42 | args[0].contextTypes = defaultContextTypes; 43 | return mobxBinding.observer(args[0]) 44 | } 45 | 46 | // @connect('store', 'state', ''...) / Custom context 47 | return function(component) { 48 | component.contextTypes = createContextTypes(args); 49 | return mobxBinding.observer(component) 50 | } 51 | 52 | } else { 53 | 54 | // @connect() / Use default context 55 | return function(component) { 56 | component.contextTypes = defaultContextTypes; 57 | return mobxBinding.observer(component) 58 | } 59 | } 60 | } 61 | 62 | /** 63 | * Decorate components with context and observable 64 | * @param args {Component|...String} 65 | * @returns {Function|Class} 66 | */ 67 | function connect() { 68 | return composeWithContext(Array.prototype.slice.call(arguments)) 69 | } 70 | 71 | /** 72 | * Grant components access to store and state without making observable 73 | * @param args {Component|...String} 74 | * @returns {Component|Object} 75 | */ 76 | function provide() { 77 | if (console) console.warn('@provide is now deprecated. Use @connect instead'); 78 | return composeWithContext(Array.prototype.slice.call(arguments)) 79 | } 80 | -------------------------------------------------------------------------------- /test/fixtures/components.js: -------------------------------------------------------------------------------- 1 | const { PropTypes, Component, createElement: h } = require('react') 2 | const { connect } = require('../../index.js') 3 | 4 | // Our context provider 5 | class ContextProvider extends Component { 6 | getChildContext() { 7 | return this.props.context; 8 | } 9 | render() { 10 | return this.props.children 11 | } 12 | } 13 | 14 | // Here we are passing methods to @connect 15 | ContextProvider.childContextTypes = { 16 | state: PropTypes.object, 17 | store: PropTypes.object 18 | } 19 | 20 | // Our components created for testing purposes 21 | class ParentComponent extends Component { 22 | render() { 23 | const { props } = this; 24 | return h('div', props, 25 | [ 26 | h('h1', { key: '1' }, props.title), 27 | props.children ? h(props.children, { key: '2'}) : null 28 | ] 29 | ); 30 | } 31 | } 32 | 33 | function ChildComponent(props, context) { 34 | return h('p', null, 'Some text here'); 35 | } 36 | 37 | exports.ContextProvider = ContextProvider 38 | exports.ParentComponent = connect(ParentComponent) 39 | exports.ChildComponent = connect(ChildComponent) 40 | 41 | -------------------------------------------------------------------------------- /test/react.test.js: -------------------------------------------------------------------------------- 1 | const sinon = require('sinon') 2 | const { expect } = require('chai') 3 | const { observable } = require('mobx') 4 | const { render, shallow } = require('enzyme') 5 | const { createElement: h } = require('react') 6 | const { ContextProvider, ParentComponent, ChildComponent } = require('./fixtures/components') 7 | 8 | describe('', () => { 9 | 10 | const context = { 11 | state: observable({ 12 | toggle: false 13 | }), 14 | store: { 15 | handleToggle: (bool) => context.state.toggle = bool 16 | } 17 | } 18 | 19 | it('ParentComponent should be observable', (done) => { 20 | const {unrendered} = shallow(h(ParentComponent, { title: 'unique' })); 21 | expect(unrendered.type.contextTypes).to.be.object; 22 | expect(unrendered.type.contextTypes.state).to.be.function; 23 | expect(unrendered.type.contextTypes.store).to.be.function; 24 | expect(unrendered.type.isMobXReactObserver).to.equal(true); 25 | done() 26 | }) 27 | 28 | it('ChildComponent should be observable', (done) => { 29 | const {unrendered} = shallow(h(ChildComponent)); 30 | expect(unrendered.type.contextTypes).to.be.object; 31 | expect(unrendered.type.contextTypes.state).to.be.function; 32 | expect(unrendered.type.contextTypes.store).to.be.function; 33 | expect(unrendered.type.isMobXReactObserver).to.equal(true); 34 | done() 35 | }) 36 | 37 | it.skip('updates observable state', (done) => { 38 | // Work in progress... 39 | done() 40 | //const handleClick = sinon.spy() 41 | /*const wrapper = render( 42 | h(ContextProvider, { context }, 43 | h(ParentComponent, { 44 | title: 'unique' 45 | }) 46 | ) 47 | ); 48 | console.log('1. ', wrapper.text()) 49 | 50 | context.store.handleToggle(true) 51 | 52 | setTimeout(() => { 53 | console.log('2. ', wrapper.text()) 54 | expect(ParentComponent.prototype.componentDidMount.calledOnce).to.be.true; 55 | ParentComponent.prototype.componentDidMount.restore(); 56 | done() 57 | }, 1000)*/ 58 | //expect(wrapper.text()).to.contain('unique'); 59 | //expect(wrapper.prototype.componentDidMount.calledOnce).to.equal(true); 60 | }); 61 | 62 | }); 63 | --------------------------------------------------------------------------------