react-store-input 0.1.1 → 0.1.3

package/dist/use_form_store.js

@@ -118,14 +118,58 @@ function useStore(initialState) {
   };
 }
 
+// src/use_store_component.tsx
+var import_react7 = require("react");
+var import_react8 = __toESM(require("react"));
+
 // src/use_store_input.tsx
 var import_react6 = require("react");
-var import_react7 = __toESM(require("react"));
+var import_date_fns = require("date-fns");
 
-// src/use_store_input_props.tsx
+// src/use_store_controller.tsx
 var import_react5 = require("react");
-var import_date_fns = require("date-fns");
-function useStoreInputProps(store, props) {
+function useStoreController(store, props) {
+  const ref = (0, import_react5.useRef)(null);
+  const dispatchKey = (0, import_react5.useId)();
+  (0, import_react5.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
+function useStoreInput(store, props) {
   const toInputValue = (value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -147,7 +191,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") {
@@ -162,103 +206,91 @@ 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_react5.useRef)(null);
-    (0, import_react5.useEffect)(() => {
-      const input = ref2.current;
-      if (!input) {
-        return;
-      }
-      if (typeof props.ref === "function") {
-        props.ref(input);
-      } else if (props.ref) {
-        props.ref.current = input;
-      }
-      return store.subscribe((state, key) => {
-        if (key === dispatchKey) {
-          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_react5.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_react6.useCallback)(function Component(props) {
-    return /* @__PURE__ */ import_react7.default.createElement(Input, { 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];
+    },
+    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
+function useStoreComponent(store) {
+  const input = (0, import_react7.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react8.default.createElement(Input, { store, ...props });
   }, []);
-  const select = (0, import_react6.useCallback)(function Component(props) {
-    return /* @__PURE__ */ import_react7.default.createElement(Select, { store, ...props });
+  const select = (0, import_react7.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react8.default.createElement(Select, { store, ...props });
   }, []);
-  const textarea = (0, import_react6.useCallback)(function Component(props) {
-    return /* @__PURE__ */ import_react7.default.createElement(Textarea, { store, ...props });
+  const textarea = (0, import_react7.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react8.default.createElement(Textarea, { store, ...props });
   }, []);
   return {
     input,
@@ -270,28 +302,28 @@ function Input({
   store,
   ...props
 }) {
-  const storeProps = useStoreInputProps(store, props);
-  return /* @__PURE__ */ import_react7.default.createElement("input", { ...props, ...storeProps });
+  const storeProps = useStoreInputWithName(store, props);
+  return /* @__PURE__ */ import_react8.default.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
   ...props
 }) {
-  const storeProps = useStoreInputProps(store, props);
-  return /* @__PURE__ */ import_react7.default.createElement("select", { ...props, ...storeProps });
+  const storeProps = useStoreInputWithName(store, props);
+  return /* @__PURE__ */ import_react8.default.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
   ...props
 }) {
-  const storeProps = useStoreInputProps(store, props);
-  return /* @__PURE__ */ import_react7.default.createElement("textarea", { ...props, ...storeProps });
+  const storeProps = useStoreInputWithName(store, props);
+  return /* @__PURE__ */ import_react8.default.createElement("textarea", { ...props, ...storeProps });
 }
 
 // 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;
@@ -299,7 +331,7 @@ function useFormStore(initialState) {
     dispatch: store.dispatch,
     subscribe: store.subscribe,
     render: createRenderWithStore(store),
-    ...storeInput
+    ...storeComponent
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/use_form_store.mjs

@@ -82,20 +82,60 @@ function useStore(initialState) {
   };
 }
 
-// src/use_store_input.tsx
+// src/use_store_component.tsx
 import {
   useCallback
 } from "react";
 import React2 from "react";
 
-// src/use_store_input_props.tsx
-import {
-  useEffect as useEffect2,
-  useId,
-  useRef as useRef2
-} from "react";
+// src/use_store_input.tsx
+import "react";
 import { format } from "date-fns";
-function useStoreInputProps(store, props) {
+
+// src/use_store_controller.tsx
+import { useEffect as useEffect2, useId, useRef as useRef2 } from "react";
+function useStoreController(store, props) {
+  const ref = useRef2(null);
+  const dispatchKey = useId();
+  useEffect2(() => {
+    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
+function useStoreInput(store, props) {
   const toInputValue = (value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -117,7 +157,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") {
@@ -132,95 +172,83 @@ 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 = useRef2(null);
-    useEffect2(() => {
-      const input = ref2.current;
-      if (!input) {
-        return;
-      }
-      if (typeof props.ref === "function") {
-        props.ref(input);
-      } else if (props.ref) {
-        props.ref.current = input;
-      }
-      return store.subscribe((state, key) => {
-        if (key === dispatchKey) {
-          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 = 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) {
+// 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];
+    },
+    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
+function useStoreComponent(store) {
   const input = useCallback(function Component(props) {
     return /* @__PURE__ */ React2.createElement(Input, { store, ...props });
   }, []);
@@ -240,28 +268,28 @@ function Input({
   store,
   ...props
 }) {
-  const storeProps = useStoreInputProps(store, props);
+  const storeProps = useStoreInputWithName(store, props);
   return /* @__PURE__ */ React2.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
   ...props
 }) {
-  const storeProps = useStoreInputProps(store, props);
+  const storeProps = useStoreInputWithName(store, props);
   return /* @__PURE__ */ React2.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
   ...props
 }) {
-  const storeProps = useStoreInputProps(store, props);
+  const storeProps = useStoreInputWithName(store, props);
   return /* @__PURE__ */ React2.createElement("textarea", { ...props, ...storeProps });
 }
 
 // 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;
@@ -269,7 +297,7 @@ function useFormStore(initialState) {
     dispatch: store.dispatch,
     subscribe: store.subscribe,
     render: createRenderWithStore(store),
-    ...storeInput
+    ...storeComponent
   };
 }
 export {

package/dist/use_store_component.d.mts

@@ -0,0 +1,21 @@
+import React__default, { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { Store } from './use_store.mjs';
+
+type StoreComponentProps<TInputElement, TState> = Omit<DetailedHTMLProps<InputHTMLAttributes<TInputElement>, TInputElement>, "name"> & {
+    name?: keyof TState;
+    getter?: (state: TState) => unknown;
+    setter?: (state: TState, value: unknown) => void;
+};
+declare function useStoreComponent<TState>(store: Store<TState>): {
+    input: React__default.FC<StoreComponentProps<HTMLInputElement, TState>>;
+    select: React__default.FC<StoreComponentProps<HTMLSelectElement, TState>>;
+    textarea: React__default.FC<StoreComponentProps<HTMLTextAreaElement, TState>>;
+};
+type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState> = StoreComponentProps<TElement, TState> & {
+    store: Store<TState>;
+};
+declare function Input<TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState>): React__default.JSX.Element;
+declare function Select<TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState>): React__default.JSX.Element;
+declare function Textarea<TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState>): React__default.JSX.Element;
+
+export { Input, Select, type StoreComponentProps, type StoreComponentPropsWithStore, Textarea, useStoreComponent };

package/dist/use_store_component.d.ts

@@ -0,0 +1,21 @@
+import React__default, { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { Store } from './use_store.js';
+
+type StoreComponentProps<TInputElement, TState> = Omit<DetailedHTMLProps<InputHTMLAttributes<TInputElement>, TInputElement>, "name"> & {
+    name?: keyof TState;
+    getter?: (state: TState) => unknown;
+    setter?: (state: TState, value: unknown) => void;
+};
+declare function useStoreComponent<TState>(store: Store<TState>): {
+    input: React__default.FC<StoreComponentProps<HTMLInputElement, TState>>;
+    select: React__default.FC<StoreComponentProps<HTMLSelectElement, TState>>;
+    textarea: React__default.FC<StoreComponentProps<HTMLTextAreaElement, TState>>;
+};
+type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState> = StoreComponentProps<TElement, TState> & {
+    store: Store<TState>;
+};
+declare function Input<TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState>): React__default.JSX.Element;
+declare function Select<TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState>): React__default.JSX.Element;
+declare function Textarea<TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState>): React__default.JSX.Element;
+
+export { Input, Select, type StoreComponentProps, type StoreComponentPropsWithStore, Textarea, useStoreComponent };