Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@swear-js/core
Advanced tools
@swear-js/core - npm Package Compare versions
Comparing version 1.0.0 to 1.1.0
@@ -1,1 +0,2 @@ | ||
| export * from './store'; | ||
| export * from './createStore'; | ||
| export * from './types'; |
@@ -13,3 +13,4 @@ "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| __exportStar(require("./store"), exports); | ||
| __exportStar(require("./createStore"), exports); | ||
| __exportStar(require("./types"), exports); | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "@swear-js/core", | ||
| "version": "1.0.0", | ||
| "description": "Simple promise based state manager", | ||
| "version": "1.1.0", | ||
| "description": "Simple observer state manager", | ||
| "repository": { | ||
@@ -9,2 +9,3 @@ "type": "git", | ||
| }, | ||
| "private": false, | ||
| "keywords": [ | ||
@@ -26,34 +27,6 @@ "state-manager", | ||
| "typings": "lib/index.d.ts", | ||
| "eslintConfig": { | ||
| "extends": [ | ||
| "@azimutlabs/eslint-config/legacy", | ||
| "@azimutlabs/eslint-config/prettier", | ||
| "@azimutlabs/eslint-config/jest", | ||
| "./eslint-config/react" | ||
| ] | ||
| }, | ||
| "eslintIgnore": [ | ||
| "**/node_modules", | ||
| "**/lib" | ||
| ], | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "lint-staged", | ||
| "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" | ||
| } | ||
| }, | ||
| "lint-staged": { | ||
| "**/*.{ts,tsx}": "eslint --no-ignore --cache --max-warnings 0" | ||
| }, | ||
| "commitlint": { | ||
| "extends": [ | ||
| "@commitlint/config-conventional" | ||
| ] | ||
| }, | ||
| "scripts": { | ||
| "ci": "run-p ci:*", | ||
| "ci:lint": "eslint --cache --max-warnings 0 src", | ||
| "clean": "rm -rf lib", | ||
| "compile": "yarn clean && tsc --outDir lib -p src -d", | ||
| "release": "yarn compile && yarn standard-version && git push --follow-tags origin main && yarn publish --access public" | ||
| "compile": "npm run clean && tsc --outDir lib -p src -d", | ||
| "release": "npm run compile && yarn standard-version && git push --follow-tags origin main && npm publish --access public" | ||
| }, | ||
@@ -66,25 +39,13 @@ "dependencies": { | ||
| "devDependencies": { | ||
| "@azimutlabs/eslint-config": "^0.2.0", | ||
| "@commitlint/cli": "^9.0.1", | ||
| "@commitlint/config-conventional": "^9.0.1", | ||
| "@typescript-eslint/eslint-plugin": "^3.3.0", | ||
| "@typescript-eslint/parser": "^3.3.0", | ||
| "eslint": "^7.3.0", | ||
| "eslint-config-prettier": "^6.11.0", | ||
| "eslint-plugin-array-func": "^3.1.6", | ||
| "eslint-plugin-functional": "^3.0.1", | ||
| "eslint-plugin-import": "^2.21.1", | ||
| "eslint-plugin-jest": "^23.13.2", | ||
| "eslint-plugin-jsx-a11y": "^6.3.1", | ||
| "eslint-plugin-prettier": "^3.1.3", | ||
| "eslint-plugin-react": "^7.20.0", | ||
| "eslint-plugin-react-hooks": "^4.0.4", | ||
| "eslint-plugin-simple-import-sort": "^5.0.3", | ||
| "husky": "^4.2.5", | ||
| "lint-staged": "^10.2.9", | ||
| "prettier": "^2.0.5", | ||
| "@typescript-eslint/eslint-plugin": "^5.19.0", | ||
| "@typescript-eslint/parser": "^5.19.0", | ||
| "eslint-config-airbnb": "^19.0.4", | ||
| "eslint-plugin-import": "^2.26.0", | ||
| "eslint-plugin-jsx-a11y": "^6.5.1", | ||
| "eslint-plugin-react": "^7.29.4", | ||
| "eslint-plugin-react-hooks": "^4.4.0", | ||
| "react-docgen-typescript-loader": "^3.7.2", | ||
| "standard-version": "^9.3.1", | ||
| "yarn-run-all": "^3.1.1" | ||
| "eslint": "^8.13.0" | ||
| } | ||
| } |
140
README.md
@@ -1,100 +0,94 @@ | ||
| ## Swear JS | ||
| [](https://gitlab.com/soundsnick/swear-js) | ||
| # 🍭 Swear JS | ||
| ## @swear-js/core | ||
| ___ | ||
| [](https://www.npmjs.com/package/@swear-js/core) | ||
|  | ||
| [](https://bundlephobia.com/result?p=@swear-js/core) | ||
|  | ||
| Simple react state-manager | ||
| Core package of [SwearJS](https://github.com/soundsnick/swear-js) state manager | ||
| ### Wrap your application with StoreContext | ||
| ```typescript | ||
| import {createStore, StoreContext} from "swear-js"; | ||
| ### Frameworks: | ||
| - [Framework agnostic (@swear-js/core)](https://npmjs.org/@swear-js/core) | ||
| - [React (@swear-js/react)](https://npmjs.org/@swear-js/react) | ||
| ## Installation | ||
| ``` | ||
| $ npm install @swear-js/core | ||
| ``` | ||
| function App() { | ||
| const store = createStore(); | ||
| return ( | ||
| <StoreContext.Provider value={store}> | ||
| ... | ||
| </StoreContext.Provider> | ||
| ); | ||
| } | ||
| or in case you are using Yarn: | ||
| ``` | ||
| $ yarn add @swear-js/core | ||
| ``` | ||
| ### Creating Swear | ||
| ## Usage | ||
| ___ | ||
| First you have to initialize your store. | ||
| "Swear" is the name of your state particle. | ||
| 1. Default swear that stores numeric value of counter. | ||
| ```typescript | ||
| import {createSwear} from "swear-js"; | ||
| import { createStore } from "@swear-js/core"; | ||
| // createSwear gets 3 arguments: name, defaultValue, actions | ||
| // Action is closure type function, which gets `mutate` argument, that is used for mutating state | ||
| const countSwear = createSwear('counter', 0, { | ||
| set: (mutate) => (payload: number) => { | ||
| mutate(payload); | ||
| } | ||
| }); | ||
| const store = createStore(); | ||
| ``` | ||
| 2. You can also pass function to `mutate` with previous value of your state. | ||
| ```typescript | ||
| import {createSwear} from "swear-js"; | ||
| Then you have to create | ||
| ```javascript | ||
| import { createStore } from "@swear-js/core"; | ||
| // createSwear gets 3 arguments: name, defaultValue, actions | ||
| // Action is closure type function, which gets `mutate` argument, that is used for mutating state | ||
| const countSwear = createSwear('counter', 0, { | ||
| set: (mutate) => (payload: number) => { | ||
| mutate(prev => prev + payload); | ||
| } | ||
| const store = createStore(); | ||
| // This will create swear, and triggers onUpdate everytime it changes | ||
| store.subscribe({ | ||
| swearId: 'count', | ||
| defaultState: 0, | ||
| onUpdate: (newValue) => { | ||
| // You can here trigger things when it updates. You can trigger here your render function, or something | ||
| } | ||
| }); | ||
| const decreaseHandler = () => { | ||
| store.setSwearValue('count', 'decrease', store.getSwearValue('count') - 1); | ||
| }; | ||
| const increaseHandler = () => { | ||
| store.setSwearValue('count', 'increase', store.getSwearValue('count') + 1); | ||
| }; | ||
| ``` | ||
| ### Usage | ||
| ## Logging | ||
| ___ | ||
| You can pass your custom logger to the store, or use @swear-js/logger. | ||
| Swear-js logger usage: | ||
| ```typescript | ||
| import { createStore } from "@swear-js/core"; | ||
| import { swearLogger } from "@swear-js/logger"; | ||
| const store = createStore({ onPatch: swearLogger }); | ||
| ``` | ||
| In order to implement your own logger solution, you just have to keep in mind an API of `onPatch` argument of the store. | ||
| `onPatch` is any callback that get `SwearPatch`(you can find it in package) type as an argument. | ||
| Simply SwearPatch is: | ||
| ```typescript | ||
| import {createSwear, useSwear} from "swear-js"; | ||
| const countSwear = createSwear('counter', 0, { | ||
| set: (mutate) => (payload: number) => { | ||
| mutate(prev => prev + payload); | ||
| return "Test string"; | ||
| } | ||
| }); | ||
| // useSwear returns tuple of two elements: first is reactive value of your state, second is an object of your actions. | ||
| const [value, {set}] = useSwear(countSwear); | ||
| const foo = () => { | ||
| set(10); | ||
| { | ||
| swearId, // String value which gets a name of patched swear state | ||
| actionType, // String value which gets a name of a dispatched action | ||
| prev, // Previous store state (object) | ||
| payload, // Payload passed | ||
| next // Current store state | ||
| } | ||
| foo(); | ||
| ``` | ||
| Example very-simple implementation of logger: | ||
| Operating with return values of actions | ||
| ```typescript | ||
| import {createSwear, useSwear} from "swear-js"; | ||
| import { SwearPatch, createStore } from "@swear-js/core"; | ||
| const countSwear = createSwear('counter', 0, { | ||
| set: (mutate) => (payload: number) => { | ||
| mutate(prev => prev + payload); | ||
| // Here you can return whatever you want | ||
| return "Test string"; | ||
| } | ||
| }); | ||
| const logger = ({ swearId, actionType, prev, payload, next }: SwearPatch) => { | ||
| console.log(`Swear: ${swearId}, Action: ${actionType}, Payload: ${payload}`); | ||
| console.log(`Previous state: ${prev}`, `Current state: ${next}`); | ||
| }; | ||
| const [value, {set}] = useSwear(countSwear); | ||
| const foo = () => { | ||
| // And here get that returned value | ||
| const response = set(10); | ||
| console.log(response); // Will log "Test string" | ||
| } | ||
| foo(); | ||
| const store = createStore({ onPatch: logger }); | ||
| ``` | ||
| ## Contributing | ||
| Project repository: https://gitlab.com/soundsnick/swear-js |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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 riskPackage 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-54.55%
10
- Lines of code
- increased by12.94%
96
Worsened metrics
- Total package byte prevSize
- decreased by-63.08%
9333
- Number of package files
- decreased by-26.67%
11
- Number of lines in readme file
- decreased by-5.94%
95
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes