├── .gitignore
├── .npmignore
├── LICENCE
├── README.md
├── lib
├── __tests__
│ └── react-mvp.test.jsx
└── react-mvp.jsx
├── package-lock.json
├── package.json
└── webpack.prod.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) Jonathan Conway
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 | # react-mvp
2 |
3 | Lightweight Model-View-Presenter framework for React.
4 |
5 | 
6 |
7 | Bootstrapped with [create-react-app-minimal](http://conwy.codes/cram).
8 |
9 | ## Getting started
10 |
11 | ### Installing
12 |
13 | ```
14 | npm install react-mvp
15 | ```
16 |
17 | ### Usage
18 |
19 | Declare your view, as a "dumb" component, with all input and output taking place through props (values and event handlers).
20 |
21 | ```js
22 | import React from 'react'
23 |
24 | class TodoApp extends Component {
25 | render = () => {
26 | const { todoList, newItem, onAddNewItem, onChangeNewItem } = this.props
27 |
28 | return
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | {todoList.map(item =>
37 |
{item}
38 | )}
39 |
40 |
41 | }
42 | }
43 | ```
44 |
45 | Then declare your model, with any needed defaults.
46 |
47 | ```js
48 | class TodoAppModel {
49 | todoList = []
50 |
51 | newItem = ''
52 | }
53 | ```
54 |
55 | Then declare your presenter, as a class that inherits from `Presenter` in react-mvp.
56 |
57 | ```js
58 | import { Presenter } from 'react-mvp'
59 |
60 | class TodoAppPresenter extends Presenter {
61 | constructor(model, setModel) {
62 | super(model, setModel);
63 | }
64 |
65 | onChangeNewItem = event =>
66 | this.setModel({
67 | newItem: event.target.value
68 | })
69 |
70 | onAddNewItem = () =>
71 | this.setModel({
72 | newItem: '',
73 | todoList: this.model.todoList.concat([ this.model.newItem ])
74 | })
75 | }
76 | ```
77 |
78 | Finally, hook them all up together, using `connect`, and render the result. (This example assumes a web-browser.)
79 |
80 | ```js
81 | import { connect } from 'react-mvp'
82 |
83 | const App = connect(TodoAppModel, TodoAppPresenter, TodoApp)
84 |
85 | import React from 'react'
86 | import ReactDOM from 'react-dom'
87 |
88 | ReactDOM.render(, document.getElementById('root'))
89 | ```
90 |
91 | ## Contributing
92 |
93 | You're welcome to fork and/or contribute pull-requests and issues to the project.
94 |
95 | ### Cloning and installing
96 |
97 | ```bash
98 | git clone https://github.com/jonathanconway/react-mvp
99 | cd react-mvp
100 | npm install
101 | ```
102 |
103 | ### Running tests
104 |
105 | ```bash
106 | npm test
107 | ```
108 |
--------------------------------------------------------------------------------
/lib/__tests__/react-mvp.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { mount } from 'enzyme'
3 |
4 | import { connect, Presenter } from '../react-mvp'
5 |
6 | describe('connect', () => {
7 |
8 | it(`- renders a component,
9 | - passes the component, as props, the model props and the presenter methods
10 | - passes the presenter the current model
11 | - passes model-updates from the presenter to the model`, () => {
12 |
13 | class MyPresenter extends Presenter {
14 | constructor(model, setModel) {
15 | super(model, setModel)
16 | }
17 |
18 | getNameLength = () => (this.model.firstName + ' ' + this.model.lastName).length
19 |
20 | onButtonClick = () => this.setModel({ firstName: 'Gandalf', lastName: 'Grey' })
21 | }
22 |
23 | class MyModel {
24 | firstName = 'Bilbo'
25 |
26 | lastName = 'Baggins'
27 | }
28 |
29 | class MyComponent extends React.Component {
30 | render = () =>