fix: 배포 버그 수정

Author: gabrielyoon7

README.md

@@ -1,27 +1,127 @@
-# React + TypeScript + Vite
+# external-state
+external-state is an easy and lightweight React state management library.
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+[한국어](https://github.com/gabrielyoon7/external-state/blob/main/docs/readme-kr.md)
 
-Currently, two official plugins are available:
+### Installation
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```
+npm install external-store
+```
+
+or
+
+```
+yarn add external-store
+```
+
+### Usage
+1. Creating initial state value
+- The initial state value is created using the `store()` function.
+
+```tsx
+import { store } from "external-state";
+
+export const countStore = store<number>(0);
+```
+
+
+2. Using state management hook: useExternalState
+- `useExternalState()` has a similar usage pattern to the react `useState()` hook.
+- It has the same usage pattern as recoil's useRecoilState.
+
+```tsx
+import { useExternalState } from "external-state";
+
+function Count() {
+  const [count, setCount] = useExternalState(countStore);
 
-## Expanding the ESLint configuration
+  return (
+    <div>
+      <div>{count}</div>
+      <button onClick={() => setCount(count + 1)}>
+        increase
+      </button>
+    </div>
+  )
+}
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+export default Count;
+```
+
+3. Using state management hook: useSetExternalState
+- `useSetExternalState()` is a function used to update the state.
+- It has the same usage pattern as recoil's useSetRecoilState.
+
+```tsx
+import { useSetExternalState } from "external-state";
+
+function Count() {
+  const setCount = useSetExternalState(countStore);
+
+  return (
+    <div>
+      <button onClick={() => setCount(count + 1)}>
+        increase
+      </button>
+    </div>
+  )
+}
+
+export default Count;
+```
 
-- Configure the top-level `parserOptions` property like this:
+4. Using state management hook: useExternalValue
 
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
+- `useExternalValue()` is a function used to subscribe the state value.
+- It has the same usage pattern as recoil's useRecoilValue.
+
+```tsx
+import { useExternalValue } from "external-state";
+
+function Count() {
+  const count = useExternalValue(countStore);
+
+  return (
+    <div>
+      {count}
+    </div>
+  )
+}
+
+export default Count;
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+5. Accessing/Modifying the store outside of React
+
+- Once a store is created, you can use the `.getState()` and `.setState()` methods.
+- The `.getState()` method reads the latest state value at the time of invocation.
+- The `.setState()` method updates the state value.
+- All of this can be done directly in a vanilla environment, and even if the state is modified outside of React, all components subscribing to the store through the hook will be accurately re-rendered.
+- It is also possible to use `async/await`.
+- You can separate the logic for better reusability, as shown in the example below:
+
+```tsx
+export const countActions = {
+  increase: () => {
+    const prevCount = countStore.getState();
+    countStore.setState(prevCount + 1);
+  },
+  decrease: () => {
+    const prevCount = countStore.getState();
+    countStore.setState(prevCount - 1);
+  },
+  increaseIfOdd: () => {
+    const prevCount = countStore.getState();
+    if (prevCount % 2 === 1) {
+      countStore.setState(prevCount + 1);
+    }
+  },
+  increaseAsync: async () => {
+    const prevCount = countStore.getState();
+    const response = await fetchCount(1)
+    const amount = response.data;
+    countStore.setState(prevCount + amount)
+  }
+}
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "external-state",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "private": false,
   "description": "Easy and Lightweight State Management for React",
   "type": "module",

src/lib/index.tsx

@@ -0,0 +1,4 @@
+export { useExternalState } from "./external-state/tools.ts";
+export {useSetExternalState} from "./external-state/tools.ts";
+export {useExternalValue} from "./external-state/tools.ts";
+export {store} from "./external-state/tools.ts";

tsconfig.json

@@ -20,6 +20,6 @@
     "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src", "src/lib"],
+  "include": ["src/lib"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
   base: "/external-state/",
   build: {
     lib: {
-      entry: path.resolve(__dirname, "src/lib/external-state/index.ts"),
+      entry: path.resolve(__dirname, "src/lib/index.tsx"),
       name: "index",
       fileName: "index",
     },