context-state - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

CHANGELOG.md

@@ -1,7 +0,17 @@
-# [0.0.0](https://github.com/hemengke1997/context-state/compare/v1.0.0...v0.0.0) (2023-02-06)
+## [2.0.0](https://github.com/hemengke1997/context-state/compare/v1.0.1...v2.0.0) (2023-02-06)
 
 
 
+## [1.0.1](https://github.com/hemengke1997/context-state/compare/v1.0.0...v1.0.1) (2023-02-06)
+
+
+### Bug Fixes
+
+* process.env透传 ([9617b69](https://github.com/hemengke1997/context-state/commit/9617b69ed165e6c4b8bd5e4b859906faba9a3dc9))
+
+
+
 # 1.0.0 (2023-02-06)
 
-init
+
+

dist/index.d.ts

@@ -0,0 +0,0 @@ import React, { MutableRefObject } from 'react';

dist/index.js

@@ -35,3 +35,3 @@ // src/index.ts
 function useMemoizedFn(fn) {
-  if (void 0 === "development") {
+  if (process.env.NODE_ENV === "development") {
     if (typeof fn !== "function") {
@@ -80,3 +80,3 @@ console.error(`useMemoizedFn expected parameter is a function, got ${typeof fn}`);
 var ContainerCache = /* @__PURE__ */ new Map();
-var isDev = void 0 !== "production";
+var isDev = process.env.NODE_ENV !== "production";
 function createContainer(useHook) {
@@ -83,0 +83,0 @@ const Context = React.createContext(EMPTY);

package.json

 {
   "name": "context-state",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "React state management library",
@@ -68,4 +68,5 @@ "keywords": [
     "upgrade:deps": "pnpm update --i --L",
-    "bump": "pnpm changelog && bumpp package.json --commit --push --tag"
-  }
+    "bump": "pnpm changelog && bumpp package.json CHANGELOG.md --commit --push --tag -all"
+  },
+  "readme": "# context-state\n\n> React hooks 状态管理方案\n\n## 🔧 安装\n\n```bash\npnpm add context-state\n```\n\n## ✨ 介绍\n\nReact Context 和 useContext 存在一些性能问题，当 context 上下文改变时，所有使用到 context 的组件都会更新渲染。\n使用 `context-state`，**开发者不必考虑 context 穿透问题** 👏\n\n## 🎈 Example\n\n```tsx\nimport React from 'react'\nimport { createContainer, useMemoizedFn } from 'context-state'\n\nfunction useCounter() {\n  const [count, setCount] = React.useState(0)\n  const increment = useMemoizedFn(() => setCount((c) => c + 1))\n\n  return {\n    count,\n    increment,\n  }\n}\n\nconst CounterContainer = createContainer(useCounter)\n\nfunction CounterDisplay() {\n  const { count, increment } = CounterContainer.usePicker(['count', 'increment'])\n\n  return (\n    <div>\n      {count}\n      <button type='button' onClick={increment}>\n        ADD\n      </button>\n    </div>\n  )\n}\n\nfunction App() {\n  return (\n    <CounterContainer.Provider>\n      <CounterDisplay />\n    </CounterContainer.Provider>\n  )\n}\n\nrender(<App />, document.getElementById('root'))\n```\n\n## 🐱‍💻 API\n\n### `createContainer(useHook)`\n\n```tsx\nimport { createContainer, useMemoizedFn } from 'context-state'\n\nfunction useCustomHook() {\n  const [value, setInput] = useState()\n  const onChange = useMemoizedFn((e) => setValue(e.currentTarget.value))\n  return {\n    value,\n    onChange,\n  }\n}\n\nconst Container = createContainer(useCustomHook)\n// Container === { Provider, usePicker }\n```\n\n### `<Container.Provider>`\n\n```tsx\nconst Container = createContainer(useCustomHook)\nfunction ParentComponent({ children }) {\n  return <Container.Provider>{children}</Container.Provider>\n}\n```\n\n### `<Container.Provider value>`\n\n```tsx\nfunction useCustomHook(value = '') {\n  const [value, setValue] = useState(value)\n  // ...\n}\n\nconst Container = createContainer(useCustomHook)\n\nfunction ParentComponent({ children }) {\n  return (\n    <Container.Provider value='value'>\n      {children}\n    </Container.Provider>\n  )\n}\n```\n\n### `Container.useSelector()`\n\n监听当前容器中选择后的值，若值发生改变，则触发 `rerender`\n\n```tsx\nfunction ChildComponent() {\n  const value = Container.useSelector((state) => state.value)\n  return <span>{value}</span>\n}\n```\n\n### `Container.usePicker()`\n\n`useSelector` 的语法糖\n\n```tsx\nfunction ChildComponent() {\n  const { value } = Container.usePicker(['value'])\n  return <span>{value}</span>\n}\n```\n\n### `useMemoizedFn`\n\n持久化 `function` 的 `Hook`。（来自 `ahooks` 中 `useMemoizedFn`）\n\n_你可能会需要用 `useCallback` 记住一个回调，但由于内部函数必须经常重新创建，记忆效果不佳，导致子组件重复 render。对于复杂的子组件，重新渲染会对性能造成影响。通过 `useMemoizedFn`，可以保证函数地址永远不会变化。_\n\n## 💡 灵感来源\n\n[unstated-next](https://github.com/jamiebuilds/unstated-next) | [use-context-selector](https://github.com/dai-shi/use-context-selector)\n"
 }

README.md

@@ -0,0 +0,0 @@ # context-state

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30736

increased by50.97%

Number of package files

8

increased by14.29%

Lines of code

657

increased by50%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low supply chain risk alerts

6

increased byInfinity%

No dependency changes