├── .babelrc
├── test
├── .eslintrc
├── action-fabric-test.js
├── reducer-tools-test.js
├── reducer-fabric-test.js
└── collection-tools-test.js
├── .npmignore
├── .gitignore
├── .travis.yml
├── .eslintignore
├── src
├── index.js
├── model-add-batcher.js
├── reducer-tools.js
├── action-fabric.js
├── collection-tools.js
├── reducer-fabric.js
└── ear-fabric.js
├── CHANGELOG.md
├── .eslintrc
├── examples
└── todomvc
│ ├── README.md
│ ├── legacy
│ ├── router.js
│ ├── todo.js
│ ├── todos.js
│ └── app_view.jsx
│ ├── server.js
│ ├── containers
│ └── TodoApp
│ │ ├── components
│ │ └── TodoList
│ │ │ ├── components
│ │ │ ├── MarkAll.jsx
│ │ │ ├── Todo.jsx
│ │ │ ├── Header.jsx
│ │ │ └── Footer.jsx
│ │ │ └── index.jsx
│ │ └── index.jsx
│ ├── index.js
│ ├── webpack.config.js
│ ├── package.json
│ └── index.html
├── webpack.config.js
├── LICENSE.md
├── CODE_OF_CONDUCT.md
├── package.json
└── README.md
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "stage": 0,
3 | "loose": "all"
4 | }
5 |
--------------------------------------------------------------------------------
/test/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | rules: {
3 | no-shadow: 0
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | *.log
3 | src
4 | test
5 | examples
6 | coverage
7 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .DS_Store
4 | dist
5 | lib
6 | coverage
7 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "4.1.2"
4 | script:
5 | - npm run ci
6 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | lib
2 | **/node_modules
3 | **/webpack.config.js
4 | examples/**/server.js
5 | examples/**/node_modules
6 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export {syncCollection, syncCollections, buildReducers, buildEars} from './collection-tools';
2 | export {default as actionFabric} from './action-fabric';
3 | export {default as reducerFabric} from './reducer-fabric';
4 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change log
2 |
3 | This project adheres to [Semantic Versioning](http://semver.org/).
4 | Every release, along with the migration instructions, is documented on the [Github Releases page](https://github.com/redbooth/backbone-redux/releases).
5 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "eslint-config-airbnb",
3 | "env": {
4 | "browser": true,
5 | "mocha": true,
6 | "node": true
7 | },
8 | "rules": {
9 | "func-names": 0,
10 | "id-length": 0,
11 | "react/jsx-uses-react": 2,
12 | "react/jsx-uses-vars": 2,
13 | "react/react-in-jsx-scope": 2
14 | },
15 | "plugins": [
16 | "react"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/examples/todomvc/README.md:
--------------------------------------------------------------------------------
1 | ### TodoMVC Example
2 |
3 | To see it in action:
4 | 1. clone the repo
5 | 2. `npm install`
6 | 3. `npm start`
7 | 4. open `localhost:3000`
8 |
9 | You will see classic todomvc app that uses Backbone collection for data handling, Backbone Router for URIs and React + Redux for UI.
10 |
11 | All data synchronisation between backbone collection and redux tree is happenning because of `backbone-redux`: see `index.js` as a starting point.
12 |
--------------------------------------------------------------------------------
/examples/todomvc/legacy/router.js:
--------------------------------------------------------------------------------
1 | /* global app */
2 | import Backbone from 'backbone';
3 |
4 | export default Backbone.Router.extend({
5 | routes: {
6 | '*filter': 'setFilter',
7 | },
8 |
9 | setFilter: function(param) {
10 | // Set the current filter to be used
11 | app.TodoFilter = param || '';
12 |
13 | // Trigger a collection filter event, causing hiding/unhiding
14 | // of Todo view items
15 | app.todos.trigger('filter');
16 | },
17 | });
18 |
--------------------------------------------------------------------------------
/examples/todomvc/legacy/todo.js:
--------------------------------------------------------------------------------
1 | import Backbone from 'backbone';
2 |
3 | export default Backbone.Model.extend({
4 | // Default attributes for the todo
5 | // and ensure that each todo created has `title` and `completed` keys.
6 | defaults: {
7 | title: '',
8 | completed: false,
9 | },
10 |
11 | // Toggle the `completed` state of this todo item.
12 | toggle: function() {
13 | this.save({
14 | completed: !this.get('completed'),
15 | });
16 | },
17 | });
18 |
--------------------------------------------------------------------------------
/examples/todomvc/server.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var WebpackDevServer = require('webpack-dev-server');
3 | var config = require('./webpack.config');
4 |
5 | new WebpackDevServer(webpack(config), {
6 | publicPath: config.output.publicPath,
7 | hot: true,
8 | historyApiFallback: true,
9 | stats: {
10 | colors: true
11 | }
12 | }).listen(3000, 'localhost', function (err) {
13 | if (err) {
14 | console.log(err);
15 | }
16 |
17 | console.log('Listening at localhost:3000');
18 | });
19 |
--------------------------------------------------------------------------------
/examples/todomvc/containers/TodoApp/components/TodoList/components/MarkAll.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default class Footer extends React.Component {
4 | onChange(event) {
5 | this.props.onToggleAll(event.target.checked);
6 | }
7 |
8 | render() {
9 | const active = this.props.todos.filter(todo => !todo.completed).length;
10 |
11 | return (
12 |
13 |
19 |
20 |
21 | );
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/model-add-batcher.js:
--------------------------------------------------------------------------------
1 | import defer from 'lodash.defer';
2 |
3 | /**
4 | * This class is responsible of batching adds, so when a fetch happens, a
5 | * single ADD action is triggered, instead of once per model.
6 | */
7 | export default class ModelAddBatcher {
8 | constructor({ handle }) {
9 | this.models = [];
10 | this.handle = handle;
11 | }
12 |
13 | add(model) {
14 | this.flushAfter();
15 | this.models.push(model);
16 | }
17 |
18 | flushAfter() {
19 | if (this.models.length > 0) {
20 | return;
21 | }
22 |
23 | defer(() => this.flush());
24 | }
25 |
26 | flush() {
27 | this.handle(this.models);
28 | this.models = [];
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/examples/todomvc/containers/TodoApp/index.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import TodoList from './components/TodoList';
3 | import _ from 'lodash';
4 |
5 | const mapStateToProps = state => ({
6 | todos: state.todos.entities
7 | });
8 |
9 | const mergeProps = (stateProps, dispatchActions, ownProps) => {
10 | const filters = {
11 | all: (() => true),
12 | active: (todo => !todo.completed),
13 | completed: (todo => todo.completed)
14 | };
15 |
16 | const filter = filters[ownProps.taskFilter] || filters.all;
17 |
18 | return Object.assign({}, stateProps, ownProps, {
19 | filteredTodos: stateProps.todos.filter(filter)
20 | });
21 | };
22 |
23 | export default connect(mapStateToProps, {}, mergeProps)(TodoList);
24 |
--------------------------------------------------------------------------------
/src/reducer-tools.js:
--------------------------------------------------------------------------------
1 | import groupBy from 'lodash.groupby';
2 | import compact from 'lodash.compact';
3 | import flatten from 'lodash.flatten';
4 |
5 | export function buildIndex(entities, field) {
6 | return entities.reduce((acc, entity) => (acc[entity[field]] = entity, acc), {});
7 | }
8 |
9 | export function buildRelation(entities, field) {
10 | return groupBy(entities, field);
11 | }
12 |
13 | export function addEntities(currentEntities, newEntities) {
14 | return [...currentEntities, ...newEntities];
15 | }
16 |
17 | export function removeEntities(currentEntities, idsToRemove) {
18 | const ids = compact(flatten(idsToRemove));
19 | return currentEntities.filter(entity => {
20 | return (ids.indexOf(entity.id) < 0) && (ids.indexOf(entity.__optimistic_id) < 0);
21 | });
22 | }
23 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var webpack = require('webpack');
4 |
5 | var plugins = [
6 | new webpack.optimize.OccurenceOrderPlugin(),
7 | new webpack.DefinePlugin({
8 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
9 | })
10 | ];
11 |
12 | if (process.env.NODE_ENV === 'production') {
13 | plugins.push(
14 | new webpack.optimize.UglifyJsPlugin({
15 | compressor: {
16 | screw_ie8: true,
17 | warnings: false
18 | }
19 | })
20 | );
21 | }
22 |
23 | module.exports = {
24 | module: {
25 | loaders: [{
26 | test: /\.js$/,
27 | loaders: ['babel-loader'],
28 | exclude: /node_modules/
29 | }]
30 | },
31 | output: {
32 | library: 'backbone-redux',
33 | libraryTarget: 'umd'
34 | },
35 | plugins: plugins,
36 | resolve: {
37 | extensions: ['', '.js']
38 | }
39 | };
40 |
--------------------------------------------------------------------------------
/examples/todomvc/index.js:
--------------------------------------------------------------------------------
1 | import 'todomvc-app-css/index.css';
2 |
3 | import Backbone from 'backbone';
4 | import $ from 'jquery';
5 |
6 | import Todos from './legacy/todos';
7 | import AppView from './legacy/app_view';
8 | import Router from './legacy/router';
9 |
10 | import { syncCollections } from 'backbone-redux';
11 | import { createStore, compose } from 'redux';
12 |
13 | import { devTools } from 'redux-devtools';
14 |
15 | function createReduxStore() {
16 | const finalCreateStore = compose(devTools())(createStore);
17 | return finalCreateStore(() => {});
18 | }
19 |
20 | $(() => {
21 | const app = {};
22 | window.app = app;
23 |
24 | app.todos = new Todos();
25 | app.TodoRouter = new Router();
26 | app.appView = new AppView();
27 | Backbone.history.start();
28 |
29 | window.store = createReduxStore();
30 | syncCollections({todos: app.todos}, window.store);
31 |
32 | app.appView.render();
33 | });
34 |
--------------------------------------------------------------------------------
/examples/todomvc/containers/TodoApp/components/TodoList/components/Todo.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default class Todo extends React.Component {
4 | onCheckboxToggle() {
5 | this.props.onCompleteToggle(this.props.todo.id);
6 | }
7 |
8 | onRemove() {
9 | this.props.onClear(this.props.todo.id);
10 | }
11 |
12 | render() {
13 | return (
14 |
15 |
16 |
22 |
23 |
27 |
28 |
29 | );
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/examples/todomvc/containers/TodoApp/components/TodoList/components/Header.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | const ENTER_KEY = 13;
5 |
6 | export default class Header extends React.Component {
7 | componentDidMount(){
8 | ReactDOM.findDOMNode(this.refs.input).focus();
9 | }
10 |
11 | onPossibleTask({keyCode}) {
12 | if (keyCode != ENTER_KEY) {
13 | return;
14 | }
15 |
16 | const input = ReactDOM.findDOMNode(this.refs.input);
17 | const input_val = input.value.trim();
18 |
19 | if (input_val) {
20 | this.props.onEnterPressed(input_val);
21 | input.value = '';
22 | }
23 | }
24 |
25 | render() {
26 | return (
27 |
35 | );
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/action-fabric.js:
--------------------------------------------------------------------------------
1 | /*
2 | This fabric creates actions object skeleton for passed constants and serializer.
3 | Useful to create all actions for ear just in one line.
4 | */
5 | function serializeFabric(serializer, payload) {
6 | return [].concat(payload).map(serializer);
7 | }
8 |
9 | export default function({ADD, REMOVE, MERGE, RESET}, serializer) {
10 | const serialize = serializeFabric.bind(this, serializer);
11 |
12 | return {
13 | add(payload) {
14 | return {
15 | type: ADD,
16 | entities: serialize(payload),
17 | };
18 | },
19 |
20 | remove(payload) {
21 | return {
22 | type: REMOVE,
23 | entities: serialize(payload),
24 | };
25 | },
26 |
27 | merge(payload) {
28 | return {
29 | type: MERGE,
30 | entities: serialize(payload),
31 | };
32 | },
33 |
34 | reset(payload) {
35 | return {
36 | type: RESET,
37 | entities: serialize(payload),
38 | };
39 | },
40 | };
41 | }
42 |
--------------------------------------------------------------------------------
/examples/todomvc/legacy/todos.js:
--------------------------------------------------------------------------------
1 | import Backbone from 'backbone';
2 | import LocalStorage from 'backbone.localstorage';
3 | import Todo from './todo';
4 |
5 | export default Backbone.Collection.extend({
6 | // Reference to this collection's model.
7 | model: Todo,
8 |
9 | // Save all of the todo items under the `"todos"` namespace.
10 | localStorage: new LocalStorage('todos-backbone'),
11 |
12 | // Filter down the list of all todo items that are finished.
13 | completed: function() {
14 | return this.where({completed: true});
15 | },
16 |
17 | // Filter down the list to only todo items that are still not finished.
18 | remaining: function() {
19 | return this.where({completed: false});
20 | },
21 |
22 | // We keep the Todos in sequential order, despite being saved by unordered
23 | // GUID in the database. This generates the next order number for new items.
24 | nextOrder: function() {
25 | return this.length ? this.last().get('order') + 1 : 1;
26 | },
27 |
28 | // Todos are sorted by their original insertion order.
29 | comparator: 'order',
30 | });
31 |
--------------------------------------------------------------------------------
/examples/todomvc/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'webpack-dev-server/client?http://localhost:3000',
8 | 'webpack/hot/only-dev-server',
9 | './index'
10 | ],
11 | output: {
12 | path: path.join(__dirname, 'dist'),
13 | filename: 'bundle.js',
14 | publicPath: '/static/'
15 | },
16 | plugins: [
17 | new webpack.HotModuleReplacementPlugin(),
18 | new webpack.NoErrorsPlugin()
19 | ],
20 | resolve: {
21 | alias: {
22 | 'backbone-redux': path.join(__dirname, '..', '..', 'src')
23 | },
24 | extensions: ['', '.js', '.jsx']
25 | },
26 | module: {
27 | loaders: [{
28 | test: /\.jsx?$/,
29 | loaders: ['react-hot', 'babel?optional[]=runtime'],
30 | exclude: /node_modules/,
31 | include: __dirname
32 | }, {
33 | test: /\.jsx?$/,
34 | loaders: ['babel'],
35 | include: path.join(__dirname, '..', '..', 'src')
36 | }, {
37 | test: /\.css$/,
38 | loaders: ['style', 'css']
39 | }]
40 | }
41 | };
42 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Ilya Zayats
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 |
--------------------------------------------------------------------------------
/examples/todomvc/containers/TodoApp/components/TodoList/components/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default class Footer extends React.Component {
4 | render() {
5 | const active = this.props.todos.filter(todo => !todo.completed).length;
6 | const completed = this.props.todos.filter(todo => todo.completed).length;
7 |
8 | return (
9 |
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/examples/todomvc/containers/TodoApp/components/TodoList/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Header from './components/Header';
3 | import Footer from './components/Footer';
4 | import MarkAll from './components/MarkAll';
5 | import Todo from './components/Todo';
6 | import _ from 'lodash';
7 |
8 | export default class TodoList extends React.Component {
9 | render() {
10 | const todos = _.sortBy(this.props.filteredTodos, 'id').map(todo => {
11 | return (
12 |
17 | )
18 | });
19 | const anyTodos = !!this.props.todos.length;
20 |
21 | return (
22 |
23 |
24 |
25 | {anyTodos && }
26 |
29 |
30 | {anyTodos &&
35 | }
36 |
37 | );
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Code of Conduct
2 |
3 | As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
4 |
5 | We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.
6 |
7 | Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
8 |
9 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
10 |
11 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
12 |
13 | This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)
14 |
15 |
--------------------------------------------------------------------------------
/test/action-fabric-test.js:
--------------------------------------------------------------------------------
1 | import test from 'tape';
2 | import actionFabric from '../src/action-fabric';
3 |
4 | test('Building action creators', t => {
5 | const serializer = ({id}) => ({id});
6 | const ADD = 'ADD';
7 | const REMOVE = 'REMOVE';
8 | const MERGE = 'MERGE';
9 | const RESET = 'RESET';
10 | const constants = {ADD, REMOVE, MERGE, RESET};
11 | const actionCreator = actionFabric(constants, serializer);
12 |
13 | t.test('returns action creator that works with single entities', t => {
14 | const entity = {id: 1};
15 |
16 | t.deepEqual(actionCreator.add(entity), {type: ADD, entities: [entity]});
17 | t.deepEqual(actionCreator.remove(entity), {type: REMOVE, entities: [entity]});
18 | t.deepEqual(actionCreator.merge(entity), {type: MERGE, entities: [entity]});
19 | t.deepEqual(actionCreator.reset(entity), {type: RESET, entities: [entity]});
20 |
21 | t.end();
22 | });
23 |
24 | t.test('returns action creator that works with multiple entities', t => {
25 | const entities = [{id: 1}, {id: 2}];
26 |
27 | t.deepEqual(actionCreator.add(entities), {type: ADD, entities: [...entities]});
28 | t.deepEqual(actionCreator.remove(entities), {type: REMOVE, entities: [...entities]});
29 | t.deepEqual(actionCreator.merge(entities), {type: MERGE, entities: [...entities]});
30 | t.deepEqual(actionCreator.reset(entities), {type: RESET, entities: [...entities]});
31 |
32 | t.end();
33 | });
34 |
35 | t.end();
36 | });
37 |
38 |
--------------------------------------------------------------------------------
/examples/todomvc/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "backbone-redux-todomvc-example",
3 | "version": "1.0.0",
4 | "description": "Backbone Collection synced through backbone-redux with redux store that drives React UI",
5 | "main": "server.js",
6 | "scripts": {
7 | "start": "node server.js"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/redbooth/backbone-redux.git"
12 | },
13 | "keywords": [
14 | "backbone",
15 | "collections",
16 | "redux",
17 | "state",
18 | "functional",
19 | "immutable",
20 | "hot",
21 | "replay"
22 | ],
23 | "license": "MIT",
24 | "bugs": {
25 | "url": "https://github.com/redbooth/backbone-redux/issues"
26 | },
27 | "homepage": "https://github.com/redbooth/backbone-redux",
28 | "dependencies": {
29 | "babel-runtime": "^5.8.20",
30 | "backbone": "^1.2.2",
31 | "backbone.localstorage": "^1.1.16",
32 | "jquery": "^3.0.0",
33 | "lodash": "^3.10.1",
34 | "react": "0.14.0",
35 | "react-dom": "0.14.0",
36 | "react-redux": "^3.0.0",
37 | "redux": "^3.0.0",
38 | "todomvc-app-css": "^2.0.1"
39 | },
40 | "devDependencies": {
41 | "babel-core": "^5.6.18",
42 | "babel-loader": "^5.1.4",
43 | "css-loader": "^0.19.0",
44 | "node-libs-browser": "^0.5.2",
45 | "react-hot-loader": "^1.2.7",
46 | "redux-devtools": "^2.1.0",
47 | "style-loader": "^0.12.3",
48 | "webpack": "^1.9.11",
49 | "webpack-dev-server": "^1.9.0"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/examples/todomvc/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | TodoMVC example
4 |
5 |
6 |
18 |
23 |
31 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "backbone-redux",
3 | "version": "0.3.0-rc.1",
4 | "description": "Easy way to keep your backbone collections and redux store in sync",
5 | "main": "lib/index.js",
6 | "scripts": {
7 | "clean": "rimraf lib dist",
8 | "build": "babel src --out-dir lib",
9 | "build:umd": "webpack src/index.js dist/backbone-redux.js && NODE_ENV=production webpack src/index.js dist/backbone-redux.min.js",
10 | "lint": "eslint src test examples",
11 | "test": "NODE_ENV=test babel-tape-runner test/**/*.js | tap-dot",
12 | "ci": "npm run lint && npm run test",
13 | "prepublish": "npm run ci && npm run clean && npm run build && npm run build:umd"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "https://github.com/redbooth/backbone-redux.git"
18 | },
19 | "keywords": [
20 | "backbone",
21 | "collections",
22 | "redux",
23 | "state",
24 | "functional",
25 | "immutable",
26 | "hot",
27 | "replay"
28 | ],
29 | "author": "Ilya Zayats (http://github.com/somebody32)",
30 | "license": "MIT",
31 | "bugs": {
32 | "url": "https://github.com/redbooth/backbone-redux/issues"
33 | },
34 | "homepage": "https://github.com/redbooth/backbone-redux",
35 | "devDependencies": {
36 | "async": "^2.1.4",
37 | "babel": "^5.5.8",
38 | "babel-core": "^5.6.18",
39 | "babel-eslint": "^4.1.1",
40 | "babel-loader": "^5.1.4",
41 | "babel-tape-runner": "^1.2.0",
42 | "backbone": "^1.2.3",
43 | "eslint": "^1.3",
44 | "eslint-config-airbnb": "^0.1.0",
45 | "eslint-plugin-react": "^3.3.1",
46 | "rimraf": "^2.3.4",
47 | "tap-dot": "^1.0.0",
48 | "tape": "^4.2.0",
49 | "webpack": "^1.9.6",
50 | "webpack-dev-server": "^1.8.2"
51 | },
52 | "dependencies": {
53 | "lodash.compact": "^3.0.0",
54 | "lodash.defer": "^4.1.0",
55 | "lodash.flatten": "^3.0.2",
56 | "lodash.groupby": "^3.1.1",
57 | "redux": "^3.0.0"
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/examples/todomvc/legacy/app_view.jsx:
--------------------------------------------------------------------------------
1 | import Backbone from 'backbone';
2 | import _ from 'lodash';
3 |
4 | import React from 'react';
5 | import ReactDOM from 'react-dom';
6 | import { Provider } from 'react-redux';
7 | import TodoApp from '../containers/TodoApp';
8 |
9 | import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
10 |
11 | export default Backbone.View.extend({
12 | el: '.todoapp',
13 |
14 | initialize() {
15 | this.listenTo(app.todos, 'filter', _.debounce(this.render, 0));
16 | app.todos.fetch({reset: true});
17 | },
18 |
19 | render() {
20 | const TodoAppContainer = (
21 |
22 |
23 |
31 |
32 |
33 |
34 |
35 |