react-store-input 0.1.0 → 0.1.3

package/README.md

@@ -8,6 +8,8 @@ At the same time, it allows you to use all the attributes originally provided by
 
 ## Get Started
 
+This is a simple example of how to use this package.
+
 ```tsx
 import { useFormStore } from "dn-react-input";
 
@@ -37,3 +39,184 @@ export default function App() {
     );
 }
 ```
+
+## How to define state?
+
+You can define any state you want as an object when calling `useStore`.
+
+```tsx
+function Component() {
+    ...
+
+    const store = useStore({
+        email: "",
+        password: "",
+        rememberMe: false,
+    });
+
+    ...
+}
+```
+
+It's a single source of truth for your form state.
+
+## How to get input values?
+
+You can access the current values of the input elements through the `state` property of the store.
+
+```tsx
+function Component() {
+    ...
+
+    const submit = () => {
+        const { email, password, rememberMe } = store.state;
+    };
+
+    ...
+}
+```
+
+## How to add input elements?
+
+You can add input elements using the `Input` component provided by the store. There are 'Select' and 'Textarea' components as well.
+
+```tsx
+import { Input } from "dn-react-input";
+
+function Component() {
+    ...
+
+    return (
+        <form>
+            <Input store={store} name="email" type="email" />
+            <Input store={store} name="password" type="password" />
+            <Input store={store} name="rememberMe" type="checkbox" />
+        </form>
+    );
+}
+```
+
+If you want to avoid passing the store to each input component, use `useStoreInput`. This hook provides input components that are already connected to the store.
+
+```tsx
+import { useStoreInput } from "dn-react-input";
+
+function Component() {
+    ...
+    const Input = useStoreInput(store);
+
+    return (
+        <form>
+            <Input.input name="email" type="email" />
+            <Input.input name="password" type="password" />
+            <Input.input name="rememberMe" type="checkbox" />
+        </form>
+    );
+}
+```
+
+`useFormStore` is a facade that combines `useStore` and `useStoreInput` for convenience.
+
+```tsx
+import { useFormStore } from "dn-react-input";
+
+function Component() {
+    ...
+    const store = useFormStore({
+        email: "",
+        password: "",
+        rememberMe: false,
+    });
+
+    return (
+        <form>
+            <store.input name="email" type="email" />
+            <store.input name="password" type="password" />
+            <store.input name="rememberMe" type="checkbox" />
+        </form>
+    );
+}
+```
+
+## How to render components on state changes?
+
+If you want to render a component only when specific parts of the state change, use the `useSelector` hook.
+
+```tsx
+import { useSelector } from "dn-react-input";
+
+function Component() {
+    ...
+    const email = useSelector(store, (state) => state.email);
+
+    return <div>Your email is: {email}</div>;
+}
+```
+
+If you want to render components in an inline manner, use the `createRender` function. By using this, you can avoid creating separate components for each part of the state you want to track.
+
+```tsx
+import { createRender } from "dn-react-input";
+
+function Component() {
+    ...
+    return (
+        <div>
+            {createRender(store, (state) => <p>{state.email}</p>)}
+            {createRender(store, (state) => <p>{state.password}</p>)}
+        </div>
+    );
+}
+```
+
+## How to subscribe to state changes?
+
+You can subscribe to state changes using the `subscribe` method of the store.
+
+```tsx
+function Component() {
+    ...
+    useEffect(() => {
+        const unsubscribe = store.subscribe((state) => {
+            console.log(`State changed`, state);
+        });
+
+        return () => {
+            unsubscribe();
+        };
+    }, []);
+
+    ...
+}
+```
+
+## How to update state manually?
+
+You can update the state manually using the `dispatch` method of the store.
+
+```tsx
+function Component() {
+    ...
+    const updateEmail = () => {
+        store.dispatch({ email: "ohjinsu98@icloud.com" });
+    };
+
+    return <button onClick={updateEmail}>Update Email</button>;
+}
+```
+
+The `dispatch` method uses immerjs internally to update the state, so you can also use a function to update the state based on the previous state.
+
+```tsx
+function Component() {
+    ...
+
+    const updateEmail = () => {
+        store.dispatch((state) => {
+            state.email = "ohjinsu98@icloud.com";
+        });
+    };
+
+    return <button onClick={updateEmail}>Update Email</button>;
+}
+```

package/dist/create_render.d.mts

@@ -1,7 +1,8 @@
-import { ReactNode } from 'react';
+import React__default, { ReactNode } from 'react';
 import { Store } from './use_store.mjs';
 
 type CreateRender<TState> = (selector: (state: TState) => ReactNode, compare?: (a: TState, b: TState) => boolean) => ReactNode;
-declare function createRender<TState>(store: Store<TState>): CreateRender<TState>;
+declare function createRender<TState>(store: Store<TState>, selector: (state: TState) => ReactNode, compare?: (a: TState, b: TState) => boolean): React__default.JSX.Element;
+declare function createRenderWithStore<TState>(store: Store<TState>): CreateRender<TState>;
 
-export { type CreateRender, createRender };
+export { type CreateRender, createRender, createRenderWithStore };

package/dist/create_render.d.ts

@@ -1,7 +1,8 @@
-import { ReactNode } from 'react';
+import React__default, { ReactNode } from 'react';
 import { Store } from './use_store.js';
 
 type CreateRender<TState> = (selector: (state: TState) => ReactNode, compare?: (a: TState, b: TState) => boolean) => ReactNode;
-declare function createRender<TState>(store: Store<TState>): CreateRender<TState>;
+declare function createRender<TState>(store: Store<TState>, selector: (state: TState) => ReactNode, compare?: (a: TState, b: TState) => boolean): React__default.JSX.Element;
+declare function createRenderWithStore<TState>(store: Store<TState>): CreateRender<TState>;
 
-export { type CreateRender, createRender };
+export { type CreateRender, createRender, createRenderWithStore };

package/dist/create_render.js

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/create_render.tsx
 var create_render_exports = {};
 __export(create_render_exports, {
-  createRender: () => createRender
+  createRender: () => createRender,
+  createRenderWithStore: () => createRenderWithStore
 });
 module.exports = __toCommonJS(create_render_exports);
 
@@ -63,7 +64,15 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 
 // src/create_render.tsx
 var import_react3 = __toESM(require("react"));
-function createRender(store) {
+function createRender(store, selector, compare) {
+  function Component() {
+    const result = useSelector(store, (state) => state, compare);
+    const content = selector(result);
+    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, content);
+  }
+  return /* @__PURE__ */ import_react3.default.createElement(Component, null);
+}
+function createRenderWithStore(store) {
   return function createRender2(selector, compare) {
     function Component() {
       const result = useSelector(store, (state) => state, compare);
@@ -75,5 +84,6 @@ function createRender(store) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createRender
+  createRender,
+  createRenderWithStore
 });

package/dist/create_render.mjs

@@ -27,7 +27,15 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 
 // src/create_render.tsx
 import React from "react";
-function createRender(store) {
+function createRender(store, selector, compare) {
+  function Component() {
+    const result = useSelector(store, (state) => state, compare);
+    const content = selector(result);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, content);
+  }
+  return /* @__PURE__ */ React.createElement(Component, null);
+}
+function createRenderWithStore(store) {
   return function createRender2(selector, compare) {
     function Component() {
       const result = useSelector(store, (state) => state, compare);
@@ -38,5 +46,6 @@ function createRender(store) {
   };
 }
 export {
-  createRender
+  createRender,
+  createRenderWithStore
 };

package/dist/index.d.mts

@@ -1,8 +1,10 @@
 export { Store, StoreSubscriber, useStore } from './use_store.mjs';
 export { useSelector } from './use_selector.mjs';
 export { useSubscribe } from './use_subscribe.mjs';
-export { Input, Select, StoreInputPropsWithStore, Textarea, useStoreInput } from './use_store_input.mjs';
-export { useStoreInputProps } from './use_store_input_props.mjs';
+export { StoreControllerProps, useStoreController } from './use_store_controller.mjs';
+export { useStoreInputWithName } from './use_store_input_with_name.mjs';
+export { StoreInputProps, useStoreInput } from './use_store_input.mjs';
+export { Input, Select, StoreComponentProps, StoreComponentPropsWithStore, Textarea, useStoreComponent } from './use_store_component.mjs';
 export { FormStore, useFormStore } from './use_form_store.mjs';
 export { deserialize, serialize } from './serialize.mjs';
 import 'react';

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 export { Store, StoreSubscriber, useStore } from './use_store.js';
 export { useSelector } from './use_selector.js';
 export { useSubscribe } from './use_subscribe.js';
-export { Input, Select, StoreInputPropsWithStore, Textarea, useStoreInput } from './use_store_input.js';
-export { useStoreInputProps } from './use_store_input_props.js';
+export { StoreControllerProps, useStoreController } from './use_store_controller.js';
+export { useStoreInputWithName } from './use_store_input_with_name.js';
+export { StoreInputProps, useStoreInput } from './use_store_input.js';
+export { Input, Select, StoreComponentProps, StoreComponentPropsWithStore, Textarea, useStoreComponent } from './use_store_component.js';
 export { FormStore, useFormStore } from './use_form_store.js';
 export { deserialize, serialize } from './serialize.js';
 import 'react';

package/dist/index.js

@@ -38,8 +38,10 @@ __export(index_exports, {
   useFormStore: () => useFormStore,
   useSelector: () => useSelector,
   useStore: () => useStore,
+  useStoreComponent: () => useStoreComponent,
+  useStoreController: () => useStoreController,
   useStoreInput: () => useStoreInput,
-  useStoreInputProps: () => useStoreInputProps,
+  useStoreInputWithName: () => useStoreInputWithName,
   useSubscribe: () => useSubscribe
 });
 module.exports = __toCommonJS(index_exports);
@@ -115,14 +117,52 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
   return state;
 }
 
+// src/use_store_controller.tsx
+var import_react4 = require("react");
+function useStoreController(store, props) {
+  const ref = (0, import_react4.useRef)(null);
+  const dispatchKey = (0, import_react4.useId)();
+  (0, import_react4.useEffect)(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    if (typeof props.ref === "function") {
+      props.ref(element);
+    } else if (props.ref) {
+      props.ref.current = element;
+    }
+  }, []);
+  useSubscribe(store, (state, key) => {
+    if (key === dispatchKey) {
+      return;
+    }
+    if (!ref.current) return;
+    props.onSubscribe(state, ref.current);
+  });
+  const onChange = () => {
+    store.dispatch(
+      (state) => {
+        const element = ref.current;
+        if (!element) return;
+        props.onDispatch(state, element);
+      },
+      {
+        key: dispatchKey
+      }
+    );
+  };
+  return {
+    dispatchKey,
+    ref,
+    onChange
+  };
+}
+
 // src/use_store_input.tsx
 var import_react5 = require("react");
-var import_react6 = __toESM(require("react"));
-
-// src/use_store_input_props.tsx
-var import_react4 = require("react");
 var import_date_fns = require("date-fns");
-function useStoreInputProps(store, props) {
+function useStoreInput(store, props) {
   const toInputValue = (value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -144,7 +184,7 @@ function useStoreInputProps(store, props) {
     if (props.type === "checkbox" || props.type === "radio") {
       return void 0;
     }
-    return toInputValue(store.state[props.name]);
+    return toInputValue(props.getter(store.state));
   };
   const toInputChecked = (value) => {
     if (props.type === "radio") {
@@ -159,98 +199,93 @@ function useStoreInputProps(store, props) {
     if (props.type !== "checkbox" && props.type !== "radio") {
       return void 0;
     }
-    return toInputChecked(store.state[props.name]);
+    return toInputChecked(props.getter(store.state));
   };
-  function useSubscriptionRef() {
-    const ref2 = (0, import_react4.useRef)(null);
-    (0, import_react4.useEffect)(() => {
-      return store.subscribe((state, key) => {
-        if (key === dispatchKey) {
-          return;
-        }
-        const input = ref2.current;
-        if (!input) {
-          return;
-        }
-        if (props.type === "checkbox" || props.type === "radio") {
-          const checked = toInputChecked(state[props.name]);
-          if (input.checked === checked) {
-            return;
-          }
-          input.checked = checked;
-        } else {
-          const value = toInputValue(state[props.name]);
-          if (input.value === value) {
-            return;
-          }
-          input.value = value;
-        }
-        const event = new Event("input", { bubbles: true });
-        input.dispatchEvent(event);
-      });
-    }, []);
-    return ref2;
-  }
   function toStateValue(value) {
-    if (typeof store.state[props.name] === "number") {
+    const selected = props.getter(store.state);
+    if (typeof selected === "number") {
       return Number(value);
     }
-    if (store.state[props.name] instanceof Date) {
+    if (selected instanceof Date) {
       return new Date(value);
     }
     return value;
   }
-  function createChangeEventHandler() {
-    return (e) => {
-      const target = e.target;
-      if (props.type === "checkbox") {
-        store.dispatch((state) => {
-          state[props.name] = target.checked;
-        }, {
-          key: dispatchKey
-        });
+  const inputProps = useStoreController(store, {
+    ref: props.ref,
+    onSubscribe: (state, element) => {
+      if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
+        const checked = toInputChecked(props.getter(state));
+        if (element.checked === checked) {
+          return;
+        }
+        element.checked = checked;
       } else {
-        store.dispatch((state) => {
-          state[props.name] = toStateValue(target.value);
-        }, {
-          key: dispatchKey
-        });
+        const value = toInputValue(props.getter(state));
+        if (element.value === value) {
+          return;
+        }
+        element.value = value;
       }
-      props.onChange?.(e);
-    };
-  }
-  const dispatchKey = (0, import_react4.useId)();
-  const ref = useSubscriptionRef();
-  const name = String(props.name);
-  const defaultValue = getDefaultValue();
-  const defaultChecked = getDefaultChecked();
-  const onChange = createChangeEventHandler();
+      const event = new Event("input", { bubbles: true });
+      element.dispatchEvent(event);
+    },
+    onDispatch: (state, element) => {
+      if ("checked" in element && props.type === "checkbox") {
+        props.setter(state, element.checked);
+      } else {
+        props.setter(state, toStateValue(element.value));
+      }
+    }
+  });
   return {
-    key: dispatchKey,
-    ref,
-    name,
-    defaultValue,
-    defaultChecked,
-    onChange
+    ref: inputProps.ref,
+    dispatchKey: inputProps.dispatchKey,
+    defaultValue: getDefaultValue(),
+    defaultChecked: getDefaultChecked(),
+    onChange: (event) => {
+      inputProps.onChange();
+      props.onChange?.(event);
+    }
   };
 }
 
-// src/use_store_input.tsx
-function useStoreInput(store) {
-  const input = (0, import_react5.useCallback)(
-    function Component(props) {
-      return /* @__PURE__ */ import_react6.default.createElement(Input, { store, ...props });
-    },
-    []
-  );
-  const select = (0, import_react5.useCallback)(
-    function Component(props) {
-      return /* @__PURE__ */ import_react6.default.createElement(Select, { store, ...props });
+// src/use_store_input_with_name.tsx
+function useStoreInputWithName(store, props) {
+  const inputProps = useStoreInput(store, {
+    ...props,
+    getter: (state) => {
+      if (props.getter) {
+        return props.getter(state);
+      }
+      return state[props.name];
     },
-    []
-  );
-  const textarea = (0, import_react5.useCallback)(function Component(props) {
-    return /* @__PURE__ */ import_react6.default.createElement(Textarea, { store, ...props });
+    setter: (state, value) => {
+      if (props.setter) {
+        props.setter(state, value);
+        return;
+      }
+      state[props.name] = value;
+    }
+  });
+  return {
+    ...inputProps,
+    name: "name" in props ? String(props.name) : void 0
+  };
+}
+
+// src/use_store_component.tsx
+var import_react6 = require("react");
+var import_react7 = __toESM(require("react"));
+function useStoreComponent(store) {
+  const input = (0, import_react6.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react7.default.createElement(Input, { store, ...props });
+  }, []);
+  const select = (0, import_react6.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react7.default.createElement(Select, { store, ...props });
+  }, []);
+  const textarea = (0, import_react6.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react7.default.createElement(Textarea, { store, ...props });
   }, []);
   return {
     input,
@@ -258,44 +293,53 @@ function useStoreInput(store) {
     textarea
   };
 }
-function Input({ store, ...props }) {
-  const storeProps = useStoreInputProps(store, props);
-  return /* @__PURE__ */ import_react6.default.createElement("input", { ...props, ...storeProps });
+function Input({
+  store,
+  ...props
+}) {
+  const storeProps = useStoreInputWithName(store, props);
+  return /* @__PURE__ */ import_react7.default.createElement("input", { ...props, ...storeProps });
 }
-function Select({ store, ...props }) {
-  const storeProps = useStoreInputProps(store, props);
-  return /* @__PURE__ */ import_react6.default.createElement("select", { ...props, ...storeProps });
+function Select({
+  store,
+  ...props
+}) {
+  const storeProps = useStoreInputWithName(store, props);
+  return /* @__PURE__ */ import_react7.default.createElement("select", { ...props, ...storeProps });
 }
-function Textarea({ store, ...props }) {
-  const storeProps = useStoreInputProps(store, props);
-  return /* @__PURE__ */ import_react6.default.createElement("textarea", { ...props, ...storeProps });
+function Textarea({
+  store,
+  ...props
+}) {
+  const storeProps = useStoreInputWithName(store, props);
+  return /* @__PURE__ */ import_react7.default.createElement("textarea", { ...props, ...storeProps });
 }
 
 // src/create_render.tsx
-var import_react7 = __toESM(require("react"));
-function createRender(store) {
-  return function createRender2(selector, compare) {
+var import_react8 = __toESM(require("react"));
+function createRenderWithStore(store) {
+  return function createRender(selector, compare) {
     function Component() {
       const result = useSelector(store, (state) => state, compare);
       const content = selector(result);
-      return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, content);
+      return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, content);
     }
-    return /* @__PURE__ */ import_react7.default.createElement(Component, null);
+    return /* @__PURE__ */ import_react8.default.createElement(Component, null);
   };
 }
 
 // src/use_form_store.tsx
 function useFormStore(initialState) {
   const store = useStore(initialState);
-  const storeInput = useStoreInput(store);
+  const storeComponent = useStoreComponent(store);
   return {
     get state() {
       return store.state;
     },
     dispatch: store.dispatch,
     subscribe: store.subscribe,
-    render: createRender(store),
-    ...storeInput
+    render: createRenderWithStore(store),
+    ...storeComponent
   };
 }
 
@@ -395,7 +439,9 @@ function deserialize(data) {
   useFormStore,
   useSelector,
   useStore,
+  useStoreComponent,
+  useStoreController,
   useStoreInput,
-  useStoreInputProps,
+  useStoreInputWithName,
   useSubscribe
 });