redux-vue 0.7.0 → 0.8.0

package/.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015","stage-0"]
-}
+  "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
+}

package/.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig — https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,json,md,yml,yaml}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,17 @@
+---
+name: Bug report
+about: Something broken? Let us know.
+labels: bug
+---
+
+**redux-vue version:**
+**Vue version:**
+**redux version:**
+
+**Steps to reproduce:**
+
+**Expected behaviour:**
+
+**Actual behaviour:**
+
+**Minimal reproduction (snippet or repo link):**

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,11 @@
+---
+name: Feature request
+about: Suggest an improvement or new behaviour.
+labels: enhancement
+---
+
+**Problem this would solve:**
+
+**Proposed solution:**
+
+**Alternatives considered:**

package/.github/pull_request_template.md

@@ -0,0 +1,8 @@
+## Description
+
+## Checklist
+
+- [ ] Tests added or updated
+- [ ] `npm test` passes locally
+- [ ] README updated if API changed
+- [ ] No secrets or hardcoded URLs introduced

package/.github/workflows/ci.yml

@@ -0,0 +1,23 @@
+name: CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18, 20]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: npm
+      - run: npm ci
+      - run: npm test

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,26 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We pledge to make participation in this project a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity, level of experience, nationality, personal appearance, race, religion, or sexual identity.
+
+## Our Standards
+
+Positive behaviour includes:
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+
+Unacceptable behaviour includes:
+- Harassment, trolling, or personal attacks
+- Publishing others' private information without permission
+- Other conduct which could reasonably be considered inappropriate
+
+## Enforcement
+
+Project maintainers may remove, edit, or reject comments, commits, code, issues, and other contributions not aligned with this Code of Conduct.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 2.1.

package/CONTRIBUTING.md

@@ -0,0 +1,35 @@
+# Contributing to redux-vue
+
+Thanks for taking the time to contribute!
+
+## Setup
+
+```bash
+git clone https://github.com/nadimtuhin/redux-vue.git
+cd redux-vue
+npm install
+npm test
+```
+
+## Development Workflow
+
+1. Fork the repo and create a branch: `git checkout -b fix/my-fix`
+2. Write a failing test first (TDD — see `src/connect.spec.js` for examples)
+3. Implement the fix / feature
+4. Ensure all tests pass: `npm test`
+5. Submit a pull request against `master`
+
+## Pull Request Guidelines
+
+- One concern per PR
+- Include tests for any behaviour change
+- Update README if you add a new API argument
+- Keep commits conventional: `fix:`, `feat:`, `docs:`, `test:`
+
+## Reporting Bugs
+
+Use the GitHub issue tracker. Include:
+- redux-vue version
+- Vue version
+- Minimal reproduction (snippet or repo link)
+- Expected vs actual behaviour

package/README.md

@@ -1,110 +1,184 @@
-# vue redux binding higher order component
-Vue Redux is tested to work on vue v2 and should be used with vue-jsx or in component template string. For more on vue-jsx https://github.com/vuejs/babel-plugin-transform-vue-jsx
+# redux-vue
+
+[![CI](https://github.com/nadimtuhin/redux-vue/actions/workflows/ci.yml/badge.svg)](https://github.com/nadimtuhin/redux-vue/actions/workflows/ci.yml)
+[![npm](https://img.shields.io/npm/v/redux-vue.svg)](https://www.npmjs.com/package/redux-vue)
+[![npm downloads](https://img.shields.io/npm/dm/redux-vue.svg)](https://www.npmjs.com/package/redux-vue)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+
+Redux bindings for **Vue 2** — a higher-order component (HOC) that connects Vue
+components to a Redux store, similar to `react-redux`'s `connect()`.
+
+> **Vue 2 only.** This library targets Vue 2.x. For Vue 3, use Pinia or `vuex` 4.x.
+
+---
 
 ## Install
-install through ``npm i redux-vue --save``
 
-## Initialize
-install in your root component
+```bash
+npm install redux-vue
+# or
+yarn add redux-vue
+```
+
+## Setup
+
+Register the plugin on your root Vue instance so all child components can access
+the store:
 
 ```js
 // main.js
 import Vue from 'vue';
 import { reduxStorePlugin } from 'redux-vue';
-import AppStore from './AppStore';
-import App from './Component/App';
+import store from './store';
+import App from './App';
 
-// install redux-vue
 Vue.use(reduxStorePlugin);
 
 new Vue({
-    store: AppStore,
-    render(h) {
-    	return <App />
-	}
+  store,
+  render: h => h(App),
 });
 ```
 
+## Usage
+
+### `connect(mapStateToProps, mapDispatchToProps, [mergeProps])(Component)`
+
+Wraps a Vue component and injects store state and dispatch functions as props.
+
 ```js
-// store.js
-import { createStore } from 'redux';
+// components/TodoApp.js
+import { connect } from 'redux-vue';
 
-const initialState = {
-  todos: []
+const TodoApp = {
+  props: {
+    todos: { type: Array },
+    addTodo: { type: Function },
+  },
+  render(h) {
+    return (
+      <div>
+        <ul>{this.todos.map(t => <li>{t}</li>)}</ul>
+        <button onClick={() => this.addTodo('new item')}>Add</button>
+      </div>
+    );
+  },
 };
 
-const reducer = (state = initialState, action) => {
-  switch(action.type){
-    case 'ADD_TODO':
-      return {
-        ...state,
-        todos: [...state.todos, action.data.todo]
-      }
+const mapStateToProps = state => ({ todos: state.todos });
 
-    default:
-      return state;
-    }
-}
-
-const AppStore = createStore(reducer);
+const mapDispatchToProps = dispatch => ({
+  addTodo: todo => dispatch({ type: 'ADD_TODO', payload: todo }),
+});
 
-export default AppStore;
+export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);
 ```
 
-## Use in your component
+### Single-file components
+
 ```js
 // components/App.js
-
 import { connect } from 'redux-vue';
+import Comp from './Comp.vue';
+
+const mapStateToProps = state => ({ count: state.count });
+const mapDispatchToProps = dispatch => ({
+  increment: () => dispatch({ type: 'INCREMENT' }),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Comp);
+```
+
+---
+
+## API
+
+### `connect([mapStateToProps], [mapDispatchToProps], [mergeProps])(Component)`
+
+| Argument                                | Type                  | Description                                              |
+| --------------------------------------- | --------------------- | -------------------------------------------------------- |
+| `mapStateToProps(state, ownAttrs)`      | Function              | Maps store state to props. Called on every store update. |
+| `mapDispatchToProps(dispatch)`          | Function              | Maps dispatch calls to props.                            |
+| `mergeProps(stateProps, dispatchProps)` | Function _(optional)_ | Combine or rename keys before they reach the child.      |
+
+**Pass-through props** — props not declared in the map functions are forwarded to
+the wrapped component automatically.
+
+**Slots** — slot content on the connected wrapper is forwarded to the inner component.
+
+### `reduxStorePlugin`
+
+A Vue plugin. Call `Vue.use(reduxStorePlugin)` once with `store` set on the root
+instance. All descendant components will have `this.$store` available.
 
-const App = {
-	props: {
-		todos: {
-			type: Array,
-		},
-		addTodo: {
-			type: Function,
-		},
-	},
-
-	methods: {
-		handleAddTodo() {
-			const todo = this.$refs.input.value;
-			this.addTodo(todo);
-		}
-	},
-
-	render(h) {
-		return <div>
-			<ul>
-				{this.todos.map(todo => <li>{todo}</li>)}
-			</ul>
-
-			<div>
-				<input type="text" ref="input" />
-				<button on-click={this.handleAddTodo}>add todo</button>
-			</div>
-		</div>
-	}
+---
+
+## Examples
+
+### `mergeProps`
+
+```js
+const mergeProps = (stateProps, dispatchProps) => ({
+  fullCount: stateProps.count * 2,
+  onAdd: dispatchProps.addTodo,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(App);
+```
+
+### Pass-through props
+
+```html
+<!-- nonMappedProp is not in mapStateToProps — it still reaches the wrapped component -->
+<ConnectedApp nonMappedProp="Foo" />
+```
+
+### Slots
+
+```html
+<ConnectedApp>
+  <span>This slot content is forwarded to the inner component</span>
+</ConnectedApp>
+```
+
+---
+
+## Store example
+
+```js
+// store.js
+import { createStore } from 'redux';
+
+const initialState = { todos: [] };
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case 'ADD_TODO':
+      return { ...state, todos: [...state.todos, action.payload] };
+    default:
+      return state;
+  }
 };
 
-function mapStateToProps(state) {
-	return {
-		todos: state.todos
-	};
-}
-
-function mapActionToProps(dispatch) {
-	return {
-		addTodo(todo) {
-			dispatch({
-				type: 'ADD_TODO',
-				data: { todo }
-			})
-		}
-	}
-}
-
-export default connect(mapStateToProps, mapActionToProps)(App);
+export default createStore(reducer);
+```
+
+---
+
+## Development
 
+```bash
+git clone https://github.com/nadimtuhin/redux-vue.git
+cd redux-vue
+npm install
+npm test
 ```
+
+Tests live in `src/*.spec.js` and use Mocha. See [CONTRIBUTING.md](CONTRIBUTING.md)
+for contribution guidelines.
+
+---
+
+## License
+
+[MIT](LICENSE) © Nadim Tuhin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redux-vue",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Vue Redux binding higher order component",
   "author": "Nadim Tuhin",
   "repository": {
@@ -8,11 +8,11 @@
     "url": "https://github.com/nadimtuhin/redux-vue.git"
   },
   "bugs": "https://github.com/nadimtuhin/redux-vue/issues",
-  "homepage": "http://nadimtuhin.com",
+  "homepage": "https://github.com/nadimtuhin/redux-vue#readme",
   "license": "MIT",
   "main": "lib/index.js",
   "scripts": {
-    "test": "mocha \"./src/**/*.spec.js\" --compilers js:babel-core/register",
+    "test": "mocha \"./src/**/*.spec.js\" --require @babel/register",
     "test:watch": "npm test -- --watch",
     "compile": "babel -d lib/ src/",
     "prepublish": "npm run compile"
@@ -26,10 +26,11 @@
     "immutable"
   ],
   "devDependencies": {
-    "babel-cli": "^6.14.0",
-    "babel-preset-es2015": "^6.14.0",
-    "babel-preset-stage-0": "^6.5.0",
+    "@babel/core": "^8.0.1",
+    "@babel/preset-env": "^8.0.2",
+    "@babel/register": "^8.0.1",
     "expect": "^1.20.2",
-    "mocha": "^3.0.2"
+    "mocha": "^11.7.6",
+    "redux": "^5.0.1"
   }
 }

package/.npmignore

@@ -1,5 +0,0 @@
-# .npmignore - the files to not push to NPM
-src/
-lib/**/*.spec
-.idea
-node_modules

package/lib/connect.js

@@ -1,122 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-exports.default = connect;
-
-var _normalizeProps = require('./normalizeProps');
-
-var _normalizeProps2 = _interopRequireDefault(_normalizeProps);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function noop() {}
-
-function getStore(component) {
-  return component.$store;
-}
-
-function getAttrs(component) {
-  return component._self.$options._parentVnode.data.attrs;
-}
-
-function getStates(component, mapStateToProps) {
-  var store = getStore(component);
-  var attrs = getAttrs(component);
-
-  return mapStateToProps(store.getState(), attrs) || {};
-}
-
-function getActions(component, mapActionsToProps) {
-  var store = getStore(component);
-
-  return mapActionsToProps(store.dispatch, getAttrs.bind(null, component)) || {};
-}
-
-function getProps(component) {
-  var props = {};
-  var attrs = getAttrs(component);
-  var stateNames = component.vuaReduxStateNames;
-  var actionNames = component.vuaReduxActionNames;
-
-  for (var ii = 0; ii < stateNames.length; ii++) {
-    props[stateNames[ii]] = component[stateNames[ii]];
-  }
-
-  for (var _ii = 0; _ii < actionNames.length; _ii++) {
-    props[actionNames[_ii]] = component[actionNames[_ii]];
-  }
-
-  return _extends({}, props, attrs);
-}
-
-/**
- * 1. utilities are moved above because vue stores methods, states and props
- * in the same namespace
- * 2. actions are set while created
- */
-
-/**
- * @param mapStateToProps
- * @param mapActionsToProps
- * @returns Object
- */
-function connect(mapStateToProps, mapActionsToProps) {
-  mapStateToProps = mapStateToProps || noop;
-  mapActionsToProps = mapActionsToProps || noop;
-
-  return function (children) {
-
-    /** @namespace children.collect */
-    if (children.collect) {
-      children.props = _extends({}, (0, _normalizeProps2.default)(children.props || {}), (0, _normalizeProps2.default)(children.collect || {}));
-
-      var msg = 'vua-redux: collect is deprecated, use props ' + ('in ' + (children.name || 'anonymous') + ' component');
-
-      console.warn(msg);
-    }
-
-    return {
-      name: 'ConnectVuaRedux-' + (children.name || 'children'),
-
-      render: function render(h) {
-        var props = getProps(this);
-
-        return h(children, { props: props });
-      },
-      data: function data() {
-        var state = getStates(this, mapStateToProps);
-        var actions = getActions(this, mapActionsToProps);
-        var stateNames = Object.keys(state);
-        var actionNames = Object.keys(actions);
-
-        return _extends({}, state, actions, {
-          vuaReduxStateNames: stateNames,
-          vuaReduxActionNames: actionNames
-        });
-      },
-      created: function created() {
-        var _this = this;
-
-        var store = getStore(this);
-
-        this.vuaReduxUnsubscribe = store.subscribe(function () {
-          var state = getStates(_this, mapStateToProps);
-          var stateNames = Object.keys(state);
-          _this.vuaReduxStateNames = stateNames;
-
-          for (var ii = 0; ii < stateNames.length; ii++) {
-            _this[stateNames[ii]] = state[stateNames[ii]];
-          }
-        });
-      },
-      beforeDestroy: function beforeDestroy() {
-        this.vuaReduxUnsubscribe();
-      }
-    };
-  };
-}

package/lib/index.js

@@ -1,19 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.reduxStorePlugin = exports.connect = undefined;
-
-var _connect2 = require('./connect');
-
-var _connect3 = _interopRequireDefault(_connect2);
-
-var _reduxStorePlugin2 = require('./reduxStorePlugin');
-
-var _reduxStorePlugin3 = _interopRequireDefault(_reduxStorePlugin2);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.connect = _connect3.default;
-exports.reduxStorePlugin = _reduxStorePlugin3.default;

package/lib/normalizeProps.js

@@ -1,48 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = normalizeProps;
-
-var _isArray = require('lodash/isArray');
-
-var _isArray2 = _interopRequireDefault(_isArray);
-
-var _isPlainObject = require('lodash/isPlainObject');
-
-var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// https://github.com/vuejs/vue/blob/dev/src/util/options.js
-function normalizeProps(props) {
-  var i,
-      val,
-      normalizedProps = {};
-
-  if ((0, _isArray2.default)(props)) {
-    i = props.length;
-    while (i--) {
-      val = props[i];
-      if (typeof val === 'string') {
-        normalizedProps[val] = null;
-      } else if (val.name) {
-        normalizedProps[val.name] = val;
-      }
-    }
-  } else if ((0, _isPlainObject2.default)(props)) {
-    var keys = Object.keys(props);
-    i = keys.length;
-    while (i--) {
-      var key = keys[i];
-      val = props[key];
-      normalizedProps[key] = props[key];
-      if (typeof val === 'function') {
-        normalizedProps[key] = { type: val };
-      }
-    }
-  }
-
-  return normalizedProps;
-}

package/lib/normalizeProps.spec.js

@@ -1,22 +0,0 @@
-'use strict';
-
-var _expect = require('expect');
-
-var _expect2 = _interopRequireDefault(_expect);
-
-var _normalizeProps = require('./normalizeProps');
-
-var _normalizeProps2 = _interopRequireDefault(_normalizeProps);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('normalize props', function () {
-	it('should normalize array props', function () {
-		(0, _expect2.default)((0, _normalizeProps2.default)(['a', 'b'])).toEqual({ a: null, b: null });
-	});
-
-	it('should normalize object props', function () {
-		var props = { 'a': { type: String }, 'b': null };
-		(0, _expect2.default)((0, _normalizeProps2.default)(props)).toEqual(props);
-	});
-});