storeon - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

CHANGELOG.md

 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 0.5
+* Add `useStoreon` hook.
+* Move `connect()` to `storeon/react/connect`.
+* Move `logger` to `storeon/devtools/logger`.
+
 ## 0.4
@@ -5,0 +10,0 @@ * Add `storeon/devtools` with Redux DevTools integration (by Hadeeb Farhan).

package.json

 {
   "name": "storeon",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Tiny (179 bytes) event-based Redux-like state manager for React and Preact",
@@ -9,3 +9,4 @@ "keywords": [
     "react",
-    "preact"
+    "preact",
+    "hook"
   ],
@@ -16,3 +17,3 @@ "author": "Andrey Sitnik <[e-mail]>",
   "browser": {
-    "./logger.js": "./logger.browser.js"
+    "./devtools/logger.js": "./devtools/logger.browser.js"
   },
@@ -19,0 +20,0 @@ "husky": {

README.md

@@ -9,3 +9,3 @@ # Storeon
   based on this state parts.
-* **Immutable.** The same Redux reducers, but already with syntax sugar on top.
+* **Hooks.** The same Redux reducers, but it already has React/Preact hooks API.
 * **Modular.** API created to move business logic away from React components.
@@ -28,15 +28,16 @@
 ```js
-import connect from 'storeon/react' // or storeon/preact
+import useStoreon from 'storeon/react' // or storeon/preact
 
-const Counter = ({ count, dispatch }) => <>
-  {count}
-  <button onClick={() => dispatch('inc')} />
-</>
-
-// Counter will be re-render only on `state.count` changes
-export default connect('count', Counter)
+export default const Counter = () => {
+  // Counter will be re-render only on `state.count` changes
+  const { dispatch, count } = useStoreon('count')
+  return <>
+    {count}
+    <button onClick={() => dispatch('inc')} />
+  </>
+}
 ```
 
 ```js
-import { StoreContext } from 'storeon/react'
+import StoreContext from 'storeon/react/context'
 
@@ -169,8 +170,8 @@ render(
 
-You can bind the store to React and Preact component with `connect()` decorator.
+For functional components, `useStoreon` hook will be the best option:
 
 ```js
 import connect from 'storeon/react' // Use 'storeon/preact' for Preact
-
-const Users = ({ users, dispatch }) => {
+const Users = () => {
+  const { dispatch, users } = useStoreon('users')
   const onAdd = useCallback(user => {
@@ -184,3 +185,21 @@ dispatch('users/add', user)
 }
+```
 
+For class components, you can use `connect()` decorator.
+
+```js
+import connect from 'storeon/react/connect' // Use 'storeon/preact/connect' for Preact
+
+class User extends React {
+  onAdd = () => {
+    this.props.dispatch('users/add', user)
+  }
+  render () {
+    return <div>
+      {this.props.users.map(user => <User key={user.id} user={user} />)}
+      <NewUser onAdd={this.onAdd} />
+    </div>
+  }
+}
+
 export default connect('users', Users)
@@ -211,3 +230,3 @@ ```
   …
-  process.env.NODE_ENV !== 'production' && require('storeon/logger')
+  process.env.NODE_ENV !== 'production' && require('storeon/devtools/logger')
 ])
@@ -214,0 +233,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18389

increased by8.63%

Number of package files

22

increased by57.14%

Lines of code

409

increased by12.05%

Number of lines in readme file

231

increased by8.96%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes