redux-vue 0.7.1 → 0.8.1

package/.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015","stage-0"]
-}
+  "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]],
+  "plugins": ["@babel/plugin-proposal-export-default-from"]
+}

package/.editorconfig

@@ -1,9 +1,15 @@
+# EditorConfig — https://editorconfig.org
 root = true
 
 [*]
 charset = utf-8
-indent_style = space
-indent_size = 2
 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/lib/connect.js

@@ -1,120 +1,126 @@
-'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 }; }
-
+import normalizeProps from './normalizeProps';
 function noop() {}
-
 function getStore(component) {
   return component.$store;
 }
-
 function getAttrs(component) {
-  return component._self.$options._parentVnode.data.attrs;
+  // issue #6: guard against missing attrs (root component has no _parentVnode attrs)
+  const vnode = component._self.$options._parentVnode;
+  return vnode && vnode.data && vnode.data.attrs || {};
 }
-
 function getStates(component, mapStateToProps) {
-  var store = getStore(component);
-  var attrs = getAttrs(component);
-
+  const store = getStore(component);
+  const attrs = getAttrs(component);
   return mapStateToProps(store.getState(), attrs) || {};
 }
-
 function getActions(component, mapActionsToProps) {
-  var store = getStore(component);
-
+  const 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++) {
+  const attrs = getAttrs(component);
+  const stateNames = component.vuaReduxStateNames;
+  const actionNames = component.vuaReduxActionNames;
+  const mergedNames = component.vuaReduxMergedNames;
+
+  // mergeProps path: only expose merged keys
+  if (mergedNames) {
+    const props = {};
+    for (let ii = 0; ii < mergedNames.length; ii++) {
+      props[mergedNames[ii]] = component[mergedNames[ii]];
+    }
+    return {
+      ...props,
+      ...attrs
+    };
+  }
+  const props = {};
+  for (let 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]];
+  for (let ii = 0; ii < actionNames.length; ii++) {
+    props[actionNames[ii]] = component[actionNames[ii]];
   }
-
-  return _extends({}, props, attrs);
+  return {
+    ...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
+ * @param mergeProps - optional; receives (stateProps, dispatchProps) -> props
+ * @returns Function (children) => VueComponentDescriptor
  */
-function connect(mapStateToProps, mapActionsToProps) {
+export default function connect(mapStateToProps, mapActionsToProps, mergeProps) {
   mapStateToProps = mapStateToProps || noop;
   mapActionsToProps = mapActionsToProps || noop;
-
-  return function (children) {
-
+  return 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');
-
+      children.props = {
+        ...normalizeProps(children.props || {}),
+        ...normalizeProps(children.collect || {})
+      };
+      const 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 });
+      name: `ConnectVuaRedux-${children.name || 'children'}`,
+      render(h) {
+        const props = getProps(this);
+        // issue #3: forward $slots to child
+        return h(children, {
+          props,
+          slots: this.$slots
+        });
       },
-      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, {
+      data() {
+        const state = getStates(this, mapStateToProps);
+        const actions = getActions(this, mapActionsToProps);
+        if (mergeProps) {
+          // PR #5: mergeProps support
+          const merged = mergeProps(state, actions) || {};
+          const mergedNames = Object.keys(merged);
+          return {
+            ...merged,
+            vuaReduxMergedNames: mergedNames,
+            vuaReduxStateNames: [],
+            vuaReduxActionNames: []
+          };
+        }
+        const stateNames = Object.keys(state);
+        const actionNames = Object.keys(actions);
+        return {
+          ...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]];
+      created() {
+        const store = getStore(this);
+        this.vuaReduxUnsubscribe = store.subscribe(() => {
+          const state = getStates(this, mapStateToProps);
+          const actions = getActions(this, mapActionsToProps);
+          if (mergeProps) {
+            const merged = mergeProps(state, actions) || {};
+            const mergedNames = Object.keys(merged);
+            this.vuaReduxMergedNames = mergedNames;
+            for (let ii = 0; ii < mergedNames.length; ii++) {
+              this[mergedNames[ii]] = merged[mergedNames[ii]];
+            }
+            return;
+          }
+          const stateNames = Object.keys(state);
+          this.vuaReduxStateNames = stateNames;
+          for (let ii = 0; ii < stateNames.length; ii++) {
+            this[stateNames[ii]] = state[stateNames[ii]];
           }
         });
       },
-      beforeDestroy: function beforeDestroy() {
+      beforeDestroy() {
         this.vuaReduxUnsubscribe();
       }
     };

package/lib/index.js

@@ -1,19 +1,2 @@
-'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;
+export { default as connect } from './connect';
+export { default as reduxStorePlugin } from './reduxStorePlugin';