storeon - npm Package Compare versions

Comparing version 2.0.2 to 3.0.0

CHANGELOG.md

 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 3.0
+* Add `customContext()` (by Phumrapee Limpianchop).
+* Remove Node.js 8 support.
+
 ## 2.0.2
@@ -5,0 +9,0 @@ * Fix `ref` in wrapped component (by Andrey Ivliev).

devtools/index.js

@@ -47,5 +47,6 @@ let print
     try {
-      extension = window.__REDUX_DEVTOOLS_EXTENSION__ ||
+      extension =
+        window.__REDUX_DEVTOOLS_EXTENSION__ ||
         window.top.__REDUX_DEVTOOLS_EXTENSION__
-    } catch (e) {}
+    } catch {}
     if (!extension) {
@@ -55,3 +56,3 @@ if (process.env.NODE_ENV !== 'production') {
           'Please install Redux devtools extension\n' +
-          'http://extension.remotedev.io/'
+            'http://extension.remotedev.io/'
         )
@@ -62,3 +63,3 @@ }
 
-    let ReduxTool = extension.connect(isStore ? { } : options)
+    let ReduxTool = extension.connect(isStore ? {} : options)
     store.on('@init', () => {
@@ -88,3 +89,3 @@ ReduxTool.subscribe(message => {
     store.on('UPDATE_FROM_DEVTOOLS', (state, data) => {
-      let newState = { }
+      let newState = {}
       let key
@@ -91,0 +92,0 @@ for (key in state) {

index.js

 let createStoreon = modules => {
-  let events = { }
-  let state = { }
+  let events = {}
+  let state = {}
 
@@ -12,3 +12,3 @@ let store = {
       if (events[event]) {
-        let changes = { }
+        let changes = {}
         let changed
@@ -29,3 +29,3 @@ events[event].forEach(i => {
     on (event, cb) {
-      (events[event] || (events[event] = [])).push(cb)
+      ;(events[event] || (events[event] = [])).push(cb)
 
@@ -32,0 +32,0 @@ return () => {

package.json

 {
   "name": "storeon",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "description": "Tiny (167 bytes) event-based Redux-like state manager for React and Preact",
@@ -29,3 +29,3 @@ "keywords": [
   "engines": {
-    "node": ">=8.3.0"
+    "node": ">=10.0.0"
   },
@@ -32,0 +32,0 @@ "type": "module",

preact/index.d.ts

@@ -1,2 +0,7 @@
-import { PreactContext, AnyComponent, FunctionalComponent } from 'preact'
+import {
+  PreactContext,
+  AnyComponent,
+  FunctionalComponent,
+  Context
+} from 'preact'
 
@@ -33,2 +38,44 @@ import { StoreonStore, StoreonDispatch } from '..'
 /**
+ * Higher-order function to let user create their own custom hooks in case of server-side rendering
+ *
+ * ```js
+ * // Parent component
+ * import { CreateContext } from 'react'
+ * import { customContext } from 'storeon/react'
+ *
+ * const CustomContext = CreateContext(storeon)
+ *
+ * export const useStoreon = customContext(CustomContext)
+ *
+ * const Component = props => {
+ *   return (
+ *     <CustomContext>
+ *       {props.children}
+ *     </CustomContext>
+ *   )
+ * }
+ * ```
+ *
+ * ```js
+ * // Children component
+ * import { useStoreon } from './parent'
+ *
+ * const Counter = () => {
+ *   const { dispatch, count } = useStoreon('count')
+ *   return <div>
+ *     {count}
+ *     <button onClick={() => dispatch('inc')}
+ *   </div>
+ * }
+ * ```
+ *
+ * @param context User's owned React context
+ * @returns useStoreon hooks that attatched to User's React context
+ */
+export function customContext(context: Context<StoreonStore>): <
+  State extends object = {},
+  EventsMap = any
+>(...keys: (keyof State)[]) => useStoreon.StoreData<State, EventsMap>
+
+/**
  * Context to put store for `connect` decorator.
@@ -35,0 +82,0 @@ *

preact/index.js

 import {
-  useMemo, useContext, useState, useLayoutEffect, useEffect
+  useMemo,
+  useContext,
+  useState,
+  useLayoutEffect,
+  useEffect
 } from 'preact/hooks'
@@ -12,12 +16,12 @@ import { createContext, h } from 'preact'
 
-let useStoreon = (...keys) => {
-  let store = useContext(StoreContext)
+let customContext = context => (...keys) => {
+  let store = useContext(context)
   if (process.env.NODE_ENV !== 'production' && !store) {
     throw new Error(
       'Could not find storeon context value.' +
-      'Please ensure the component is wrapped in a <StoreContext.Provider>'
+        'Please ensure the component is wrapped in a <StoreContext.Provider>'
     )
   }
 
-  let rerender = useState({ })
+  let rerender = useState({})
 
@@ -27,3 +31,3 @@ useIsomorphicLayoutEffect(() => {
       let changesInKeys = keys.some(key => key in changed)
-      if (changesInKeys) rerender[1]({ })
+      if (changesInKeys) rerender[1]({})
     })
@@ -34,3 +38,3 @@ }, [])
     let state = store.get()
-    let data = { }
+    let data = {}
     keys.forEach(key => {
@@ -44,2 +48,4 @@ data[key] = state[key]
 
+let useStoreon = customContext(StoreContext)
+
 let connectStoreon = (...keys) => {
@@ -53,2 +59,2 @@ let Component = keys.pop()
 
-export { useStoreon, StoreContext, connectStoreon }
+export { useStoreon, StoreContext, connectStoreon, customContext }

react/index.d.ts

@@ -33,2 +33,44 @@ import { Context, ComponentType, FunctionComponent } from 'react'
 /**
+ * Higher-order function to let user create their own custom hooks in case of server-side rendering
+ *
+ * ```js
+ * // Parent component
+ * import { CreateContext } from 'react'
+ * import { customContext } from 'storeon/react'
+ *
+ * const CustomContext = CreateContext(storeon)
+ *
+ * export const useStoreon = customContext(CustomContext)
+ *
+ * const Component = props => {
+ *   return (
+ *     <CustomContext>
+ *       {props.children}
+ *     </CustomContext>
+ *   )
+ * }
+ * ```
+ *
+ * ```js
+ * // Children component
+ * import { useStoreon } from './parent'
+ *
+ * const Counter = () => {
+ *   const { dispatch, count } = useStoreon('count')
+ *   return <div>
+ *     {count}
+ *     <button onClick={() => dispatch('inc')}
+ *   </div>
+ * }
+ * ```
+ *
+ * @param context User's owned React context
+ * @returns useStoreon hooks that attatched to User's React context
+ */
+export function customContext(context: Context<StoreonStore>): <
+  State extends object = {},
+  EventsMap = any
+>(...keys: (keyof State)[]) => useStoreon.StoreData<State, EventsMap>
+
+/**
  * Context to put store for `connect` decorator.
@@ -35,0 +77,0 @@ *

react/index.js

 import {
-  useMemo, useContext, useState, useLayoutEffect, useEffect,
-  createContext, createElement, forwardRef
+  useMemo,
+  useContext,
+  useState,
+  useLayoutEffect,
+  useEffect,
+  createContext,
+  createElement,
+  forwardRef
 } from 'react'
@@ -11,12 +17,12 @@
 
-let useStoreon = (...keys) => {
-  let store = useContext(StoreContext)
+let customContext = context => (...keys) => {
+  let store = useContext(context)
   if (process.env.NODE_ENV !== 'production' && !store) {
     throw new Error(
       'Could not find storeon context value.' +
-      'Please ensure the component is wrapped in a <StoreContext.Provider>'
+        'Please ensure the component is wrapped in a <StoreContext.Provider>'
     )
   }
 
-  let rerender = useState({ })
+  let rerender = useState({})
 
@@ -26,3 +32,3 @@ useIsomorphicLayoutEffect(() => {
       let changesInKeys = keys.some(key => key in changed)
-      if (changesInKeys) rerender[1]({ })
+      if (changesInKeys) rerender[1]({})
     })
@@ -33,3 +39,3 @@ }, [])
     let state = store.get()
-    let data = { }
+    let data = {}
     keys.forEach(key => {
@@ -43,2 +49,4 @@ data[key] = state[key]
 
+let useStoreon = customContext(StoreContext)
+
 let connectStoreon = (...keys) => {
@@ -53,2 +61,2 @@ let Component = keys.pop()
 
-export { useStoreon, StoreContext, connectStoreon }
+export { useStoreon, StoreContext, connectStoreon, customContext }

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

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

37436

increased by7.24%

Lines of code

749

increased by17.77%

No dependency changes