Improved check is busy mountPath

Update README.md. Remove 5 version node from CI. Improve examples.
MrEfrem · Nov 26, 2016 · 5d465cf · 5d465cf
1 parent e43e13a
commit 5d465cf
Show file tree

Hide file tree

Showing 10 changed files with 146 additions and 43 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,7 +1,6 @@
 language: node_js
 node_js:
   - "4"
-  - "5"
   - "6"
 
 cache:

diff --git a/README.md b/README.md
@@ -9,6 +9,21 @@ This API allow you to creation of reused components, organization effective code
 
 #### Example of container component creation which stores the state in store of Redux.
 ```javascript
+// Root component
+import React from 'react';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import { enhanceStore } from 'redux-fly';
+import Counter from './Counter';
+
+const store = createStore(null, enhanceStore);
+
+export default () => (
+  <Provider store={store}>
+    <Counter/>
+  </Provider>
+);
+
 // Counter component
 import React from 'react';
 import { createReducer } from 'redux-fly';
@@ -24,26 +39,11 @@ const Counter = ({ reduxState: { counter }, reduxSetState }) => (
 );
 
 export default createReducer({
-  mountPath: 'ui counter',
+  mountPath: 'ui counter', // Reducer mounting path
   initialState: {
     counter: 0
   }
 })(Counter);
-
-// Root component
-import React from 'react';
-import { createStore } from 'redux';
-import { Provider } from 'react-redux';
-import { enhanceStore } from 'redux-fly';
-import Counter from './Counter';
-
-const store = createStore(null, enhanceStore);
-
-export default () => (
-  <Provider store={store}>
-    <Counter/>
-  </Provider>
-);
 ```
 
 #### Example of creation reused modal window component which stores the state in store of Redux.

diff --git a/__tests__/createReducer.test.js b/__tests__/createReducer.test.js
@@ -784,6 +784,56 @@ test('Test is invalid to create of reducer in same mounting path', () => {
   )).toThrowError('Mount path "ui component" already busy')
 })
 
+test('Test is invalid to create of reducer in partially same mounting path (1)', () => {
+  const store = createStore(null, enhanceStore)
+  const Component = ({ children }) => <div>{children}</div>
+  Component.propTypes = {
+    children: PropTypes.element
+  }
+  const ExtendedComponent = createReducer({
+    mountPath: 'ui component main',
+    initialState: {}
+  })(Component)
+
+  const ExtendedComponent1 = createReducer({
+    mountPath: 'ui component',
+    initialState: {}
+  })(Component)
+
+  expect(renderer.create.bind(renderer,
+    <Provider store={store}>
+      <ExtendedComponent>
+        <ExtendedComponent1/>
+      </ExtendedComponent>
+    </Provider>
+  )).toThrowError('Mount path "ui component" already busy')
+})
+
+test('Test is invalid to create of reducer in partially same mounting path (2)', () => {
+  const store = createStore(null, enhanceStore)
+  const Component = ({ children }) => <div>{children}</div>
+  Component.propTypes = {
+    children: PropTypes.element
+  }
+  const ExtendedComponent = createReducer({
+    mountPath: 'ui component',
+    initialState: {}
+  })(Component)
+
+  const ExtendedComponent1 = createReducer({
+    mountPath: 'ui component main',
+    initialState: {}
+  })(Component)
+
+  expect(renderer.create.bind(renderer,
+    <Provider store={store}>
+      <ExtendedComponent>
+        <ExtendedComponent1/>
+      </ExtendedComponent>
+    </Provider>
+  )).toThrowError('Mount path "ui component main" already busy')
+})
+
 test('Test is valid to create of reducer after create of reducer', () => {
   const store = createStore(null, enhanceStore)
   const Component = ({ children }) => <div>{children || 'Last reducer'}</div>

diff --git a/__tests__/registerReducers.test.js b/__tests__/registerReducers.test.js
@@ -203,6 +203,52 @@ test('Test is invalid to register of reducer in same mounting path', () => {
   )).toThrowError('Mount path "ui component" already busy')
 })
 
+test('Test is invalid to register of reducer in partially same mounting path (1)', () => {
+  const store = createStore(null, enhanceStore)
+  const Component = ({ children }) => <div>{children}</div>
+  Component.propTypes = {
+    children: PropTypes.element
+  }
+  const ExtendedComponent = registerReducers({
+    'ui component main': () => ({})
+  })(Component)
+
+  const ExtendedComponent1 = registerReducers({
+    'ui component': () => ({})
+  })(Component)
+
+  expect(renderer.create.bind(renderer,
+    <Provider store={store}>
+      <ExtendedComponent>
+        <ExtendedComponent1/>
+      </ExtendedComponent>
+    </Provider>
+  )).toThrowError('Mount path "ui component" already busy')
+})
+
+test('Test is invalid to register of reducer in partially same mounting path (2)', () => {
+  const store = createStore(null, enhanceStore)
+  const Component = ({ children }) => <div>{children}</div>
+  Component.propTypes = {
+    children: PropTypes.element
+  }
+  const ExtendedComponent = registerReducers({
+    'ui component': () => ({})
+  })(Component)
+
+  const ExtendedComponent1 = registerReducers({
+    'ui component main': () => ({})
+  })(Component)
+
+  expect(renderer.create.bind(renderer,
+    <Provider store={store}>
+      <ExtendedComponent>
+        <ExtendedComponent1/>
+      </ExtendedComponent>
+    </Provider>
+  )).toThrowError('Mount path "ui component main" already busy')
+})
+
 test('Test is valid to register of reducer after register of reducer', () => {
   const store = createStore(null, enhanceStore)
   const Component = ({ children }) => <div>{children || 'Last reducer'}</div>

diff --git a/examples/nested_reused_components/src/components/Button.js b/examples/nested_reused_components/src/components/Button.js
@@ -5,6 +5,7 @@ import { createReducer } from 'redux-fly'
 type PropsType = { reduxState: Object, reduxSetState: Function }
 const Modal = ({ reduxState: { clicks }, reduxSetState }: PropsType) => (
   <div>
+    <br/>
     <button onClick={() => reduxSetState('CLICK', (state) => ({ clicks: state.clicks + 1 }))}>
       Clicks {clicks}
     </button>

diff --git a/examples/nested_reused_components/src/components/Modal.js b/examples/nested_reused_components/src/components/Modal.js
@@ -10,7 +10,7 @@ const style = {
   container: (opened) => ({
     display: opened ? 'block' : 'none',
     position: 'absolute',
-    left: '100px',
+    left: 'calc(50% - 130px)',
     top: '150px',
     width: '200px',
     height: '200px',

diff --git a/examples/reused_components/src/components/Modal.js b/examples/reused_components/src/components/Modal.js
@@ -16,7 +16,7 @@ const style = {
   container: (opened) => ({
     display: opened ? 'block' : 'none',
     position: 'absolute',
-    left: '100px',
+    left: 'calc(50% - 130px)',
     top: '150px',
     width: '200px',
     height: '200px',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "redux-fly",
-  "version": "0.0.1-rc.1",
+  "version": "0.0.1",
   "description": "Simple redux",
   "browser": "dist/redux-fly.js",
   "main": "lib/index.js",

diff --git a/src/createReducer.js b/src/createReducer.js
@@ -96,28 +96,28 @@ export default ({
       static contextTypes = {
         store: process.env.NODE_ENV === 'test' ? PropTypes.object : storeShape,
         reduxMountPaths: PropTypes.arrayOf(PropTypes.string),
-        reduxMountPath: PropTypes.string
+        lastReduxMountPath: PropTypes.string
       }
 
       static childContextTypes = {
         reduxMountPaths: PropTypes.arrayOf(PropTypes.string),
-        reduxMountPath: PropTypes.string
+        lastReduxMountPath: PropTypes.string
       }
 
       getChildContext = () => ({
         reduxMountPaths: this.reduxMountPaths,
-        reduxMountPath: this.reduxMountPath
+        lastReduxMountPath: this.lastReduxMountPath
       });
 
       store: ?Object
-      reduxSetState: any
+      reduxSetState: ?Function
       reduxResetState: any
       ChildComponent: any
-      persist: any
+      persist: ?boolean
       actionPrefix: any
       reduxMountPaths: any
-      dispatch: any
-      reduxMountPath: any
+      dispatch: ?Function
+      lastReduxMountPath: ?string
 
       props: {
         reduxMountPath: string,
@@ -129,7 +129,7 @@ export default ({
         super(props, context)
         let { store } = context
         this.reduxMountPaths = context.reduxMountPaths || []
-        this.reduxMountPath = context.reduxMountPath || ''
+        this.lastReduxMountPath = context.lastReduxMountPath || ''
         this.store = null
 
         let { reduxMountPath: propMountPath, reduxPersist: propPersist, reduxActionPrefix: propActionPrefix } = props
@@ -143,11 +143,15 @@ export default ({
         }
         const _mountPath = normalizeMountPath(`${propMountPath || ''} ${mountPath || ''}`)
 
-        if (this.reduxMountPaths.indexOf(_mountPath) !== -1) {
+
+        if (this.reduxMountPaths.some(path =>
+          ((path.indexOf(_mountPath) === 0 && !((path.substr(_mountPath.length)[0] || '').trim())) ||
+            (_mountPath.indexOf(path) === 0 && !((_mountPath.substr(path.length)[0] || '').trim()))))
+        ) {
           throw new Error(`Mount path "${_mountPath}" already busy`)
         }
-        if (this.reduxMountPath && _mountPath.indexOf(this.reduxMountPath) === -1) {
-          throw new Error(`Mount path "${_mountPath}" must be contain "${this.reduxMountPath}"`)
+        if (this.lastReduxMountPath && _mountPath.indexOf(this.lastReduxMountPath) === -1) {
+          throw new Error(`Mount path "${_mountPath}" must be contain "${this.lastReduxMountPath}"`)
         }
         this.reduxMountPaths.push(_mountPath)
 
@@ -195,7 +199,7 @@ export default ({
           if (typeof store.registerReducers !== 'function') {
             throw new Error('Redux store must be enhanced with redux-fly')
           }
-          this.reduxMountPath = normalizeMountPath(propMountPath)
+          this.lastReduxMountPath = normalizeMountPath(propMountPath)
         }
 
         if (typeof store === 'undefined' || typeof store.registerReducers !== 'function') {
@@ -244,7 +248,7 @@ export default ({
         this.persist = null
         this.reduxMountPaths = null
         this.dispatch = null
-        this.reduxMountPath = null
+        this.lastReduxMountPath = null
       }
 
       render() {

diff --git a/src/registerReducers.js b/src/registerReducers.js
@@ -25,28 +25,28 @@ export default (
       static contextTypes = {
         store: process.env.NODE_ENV === 'test' ? PropTypes.object : storeShape,
         reduxMountPaths: PropTypes.arrayOf(PropTypes.string),
-        reduxMountPath: PropTypes.string
+        lastReduxMountPath: PropTypes.string
       }
 
       static childContextTypes = {
         reduxMountPaths: PropTypes.arrayOf(PropTypes.string),
-        reduxMountPath: PropTypes.string
+        lastReduxMountPath: PropTypes.string
       }
 
       getChildContext = () => ({
         reduxMountPaths: this.reduxMountPaths,
-        reduxMountPath: this.reduxMountPath
+        lastReduxMountPath: this.lastReduxMountPath
       });
 
       store: ?Object
       reduxMountPaths: any
-      reduxMountPath: any
+      lastReduxMountPath: ?string
 
       constructor(props: any, context: any) {
         super(props, context)
         let { store } = context
         this.reduxMountPaths = context.reduxMountPaths || []
-        this.reduxMountPath = context.reduxMountPath || ''
+        this.lastReduxMountPath = context.lastReduxMountPath || ''
         this.store = null
 
         const { reduxMountPath: propMountPath } = props
@@ -64,11 +64,14 @@ export default (
         let _normReducers = {}
         Object.keys(_reducers).forEach(key => {
           const normalizedMountPath = normalizeMountPath(`${propMountPath || ''} ${key || ''}`)
-          if (this.reduxMountPaths.indexOf(normalizedMountPath) !== -1) {
+          if (this.reduxMountPaths.some(path =>
+            ((path.indexOf(normalizedMountPath) === 0 && !((path.substr(normalizedMountPath.length)[0] || '').trim())) ||
+              (normalizedMountPath.indexOf(path) === 0 && !((normalizedMountPath.substr(path.length)[0] || '').trim()))))
+          ) {
             throw new Error(`Mount path "${normalizedMountPath}" already busy`)
           }
-          if (this.reduxMountPath && normalizedMountPath.indexOf(this.reduxMountPath) === -1) {
-            throw new Error(`Mount path "${normalizedMountPath}" must be contain "${this.reduxMountPath}"`)
+          if (this.lastReduxMountPath && normalizedMountPath.indexOf(this.lastReduxMountPath) === -1) {
+            throw new Error(`Mount path "${normalizedMountPath}" must be contain "${this.lastReduxMountPath}"`)
           }
           this.reduxMountPaths.push(normalizedMountPath)
           _normReducers[normalizedMountPath] = _reducers[key]
@@ -81,7 +84,7 @@ export default (
           if (typeof store.registerReducers !== 'function') {
             throw new Error('Redux store must be enhanced with redux-fly')
           }
-          this.reduxMountPath = normalizeMountPath(propMountPath)
+          this.lastReduxMountPath = normalizeMountPath(propMountPath)
         }
 
         if (typeof store === 'undefined' || typeof store.registerReducers !== 'function') {
@@ -101,7 +104,7 @@ export default (
       componentWillUnmount() {
         this.store = null
         this.reduxMountPaths = null
-        this.reduxMountPath = null
+        this.lastReduxMountPath = null
       }
 
       render() {