From 75cd7105781872d5b71a7df3180b046f1c7e3c6b Mon Sep 17 00:00:00 2001 From: alhacen Date: Tue, 24 Aug 2021 23:54:55 +0530 Subject: [PATCH] feat: created selectState and createState API --- dist/index.js | 1 - dist/index.min.js | 1 + gulpfile.js | 1 + package.json | 7 +++-- readme.md | 71 ++++++++++++++++++++++++++++++++++++++++++----- src/index.js | 24 ++++++++++++++-- 6 files changed, 92 insertions(+), 13 deletions(-) delete mode 100644 dist/index.js create mode 100644 dist/index.min.js diff --git a/dist/index.js b/dist/index.js deleted file mode 100644 index 69c0796..0000000 --- a/dist/index.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=require("react");function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Map"===(r="Object"===r&&e.constructor?e.constructor.name:r)||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);re.length)&&(t=e.length);for(var r=0,n=new Array(t);r { return gulp.src('src/**/*.js') .pipe(babel()) .pipe(uglify()) + .pipe(rename("index.min.js")) .pipe(gulp.dest('dist')) }); \ No newline at end of file diff --git a/package.json b/package.json index bd39976..6538da5 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "jedisdb", - "version": "0.1.6", + "version": "0.2.4", "description": "React key-value state management solution, accessible in all components", - "main": "dist/index.js", + "main": "dist/index.min.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "gulp minify" @@ -31,7 +31,8 @@ "gulp-babel": "^8.0.0", "gulp-uglify": "^3.0.2", "react": "^16.6.1", - "react-dom": "^16.6.3" + "react-dom": "^16.6.3", + "gulp-rename": "^2.0.0" }, "keywords": [ "react", diff --git a/readme.md b/readme.md index 8be6010..6c7963b 100644 --- a/readme.md +++ b/readme.md @@ -1,16 +1,15 @@

jedisdb

redis like key-value state management solution for React

-

Reactive, Redux alternative, Simple and powerfull global state management system, accessible in all components

+

Reactive. Redux alternative. Simple and powerful global state management system, accessible through every component.

Philosophy

-jedisdb is a wrapper on react useState hook, that makes it accessible through all the components without passing in the components, so no need to create stores, actions, or dispatchers. - +jedisdb is a wrapper for React.JS useState hook. jedisdb makes the hook accessible in every component without the need to explicity pass it down or to create stores, actions, and dispatchers.

Features 📋

1. Reactive -2. State accessable in all components +2. State accessable through every components 3. no reducer, no action needed 4. small bundle size @@ -28,9 +27,9 @@ import React from 'react' import useJedis from 'jedisdb' const Counter = () =>{ /* -if a key is not present in jedis, useJedis('myKey', fallbackValue) will create create that key in jedis and then it will return that object, -if key is present it will simply return that key -if we don't pass fallbackValue it will create jedis object of value undefined +if a key is not present in jedis, useJedis('myKey', fallbackValue) will create create that key in jedisdb and then it will return that jedis object, +if key is present it will simply return that jedis object +if we don't pass fallbackValue it will create jedis object with value undefined */ const counter = useJedis('counter', 0) return ( @@ -48,3 +47,61 @@ Counter [Codesandbox](https://codesandbox.io/s/usejedis-demo1-owozg?file=/src/Ap Shopping Cart [Codesandbox](https://codesandbox.io/s/shopping-cart-usejedis-qbgwq?file=/src/App.js). +>`useJedis` returns a react hook so it can only used in react functional components,

+`selectState` has no side effects, it can be used anywhere,
+`createState` creates jedis object without any side effects.
+demo: Accessing value in JS funciton [Codesandbox](https://codesandbox.io/s/usejedis-demo2-pdfsm?file=/src/myjsfunction.js). + +

Best Practice

+ +use `createState` to create jedis object and then use `useJedis` to access it, is considered best practice + +```javascript +//myGlobalHook.js +//create jedis object +import {createState} from 'jedisdb' +createState({ + theme: 'dark', + uesrLevel: 'admin', + counter: 7 +}) +``` + +```javascript +//app.js +//import jedis object in app +import React from 'react'; +import Main from './main'; +require('./myGlobalHook') +function App() { + return ( +
+ ); +} +export default App; +``` + +```javascript +//counter.js +//access anywhere +import React from 'react'; +import useJedis from "jedisdb"; + +function Counter() { + const counter = useJedis('counter') //no need to pass fallback value + return ( + <> + {counter.state} + + + ); +} +export default Counter; +``` +demo: [Codesandbox](https://codesandbox.io/s/usejedis-practice-lxrhs) + +
+ +# 🤝 Contributing + +Contributions, issues and feature requests are welcome! Feel free to check [issues page](https://github.com/alhaqhassan/jedisdb/issues). diff --git a/src/index.js b/src/index.js index d487295..107da8a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -let myProxy = { +let jedisProxy = { get(target, key) { if (key === 'state') { return target.get(); @@ -38,7 +38,27 @@ const useJedis = (key, defaultValue) =>{ jedisObj.setters.map(setter=> setter(value)); jedisObj.state = value; } - }, myProxy) + }, jedisProxy) } +export const createState = (defaultValue) =>{ + if (!window.useJedisStateOBJ) //create jedisObject, if not exist + window.useJedisStateOBJ = {}; + for (const [key, value] of Object.entries(defaultValue)) { + if(!window.useJedisStateOBJ[key])//create key, if not exist + window.useJedisStateOBJ[key] = { state: value, setters: [] } + } + +} +export const selectState = (key) => { + if(!window.useJedisStateOBJ[key]?.state) + return ; + return new Proxy({ + get: ()=> window.useJedisStateOBJ[key].state, + set: (value) => { + window.useJedisStateOBJ[key].setters.map(setter=> setter(value)); + window.useJedisStateOBJ[key].state = value; + } + }, jedisProxy) +} export default useJedis \ No newline at end of file