react-store-input 0.1.4 → 0.1.6

package/dist/index.d.mts

@@ -2,10 +2,9 @@ export { Store, StoreSubscriber, useStore } from './use_store.mjs';
 export { useSelector } from './use_selector.mjs';
 export { useSubscribe } from './use_subscribe.mjs';
 export { StoreControllerProps, useStoreController } from './use_store_controller.mjs';
-export { useStoreInputWithName } from './use_store_input_with_name.mjs';
+export { InferNameFromProps, StoreInputWithNameProps, 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 { Input, Select, StoreComponentPropsWithStore, Textarea, useStoreComponent } from './use_store_component.mjs';
 export { FormStore, useFormStore } from './use_form_store.mjs';
-export { deserialize, serialize } from './serialize.mjs';
 import 'react';
 import './create_render.mjs';

package/dist/index.d.ts

@@ -2,10 +2,9 @@ export { Store, StoreSubscriber, useStore } from './use_store.js';
 export { useSelector } from './use_selector.js';
 export { useSubscribe } from './use_subscribe.js';
 export { StoreControllerProps, useStoreController } from './use_store_controller.js';
-export { useStoreInputWithName } from './use_store_input_with_name.js';
+export { InferNameFromProps, StoreInputWithNameProps, 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 { Input, Select, StoreComponentPropsWithStore, Textarea, useStoreComponent } from './use_store_component.js';
 export { FormStore, useFormStore } from './use_form_store.js';
-export { deserialize, serialize } from './serialize.js';
 import 'react';
 import './create_render.js';

package/dist/index.js

@@ -33,8 +33,6 @@ __export(index_exports, {
   Input: () => Input,
   Select: () => Select,
   Textarea: () => Textarea,
-  deserialize: () => deserialize,
-  serialize: () => serialize,
   useFormStore: () => useFormStore,
   useSelector: () => useSelector,
   useStore: () => useStore,
@@ -121,18 +119,8 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 var import_react4 = require("react");
 function useStoreController(store, props) {
   const ref = (0, import_react4.useRef)(null);
+  (0, import_react4.useImperativeHandle)(props.ref, () => ref.current, []);
   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;
@@ -140,7 +128,7 @@ function useStoreController(store, props) {
     if (!ref.current) return;
     props.onSubscribe(state, ref.current);
   });
-  const onChange = () => {
+  const dispatch = () => {
     store.dispatch(
       (state) => {
         const element = ref.current;
@@ -154,7 +142,7 @@ function useStoreController(store, props) {
   };
   return {
     ref,
-    onChange
+    dispatch
   };
 }
 
@@ -162,20 +150,18 @@ function useStoreController(store, props) {
 var import_react5 = require("react");
 var import_date_fns = require("date-fns");
 function useStoreInput(store, props) {
-  const toInputValue = (value) => {
+  const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
     }
     if (props.type === "datetime-local") {
-      if (value instanceof Date) {
-        return (0, import_date_fns.format)(value, "yyyy-MM-dd'T'HH:mm:ss");
-      }
-      if (typeof value === "string") {
-        return toInputValue(new Date(value));
+      const date = new Date(value);
+      if (!isNaN(date.getTime())) {
+        return (0, import_date_fns.format)(date, "yyyy-MM-dd'T'HH:mm:ss");
       }
     }
     return String(value);
-  };
+  });
   const getDefaultValue = () => {
     if (props.defaultValue !== void 0) {
       return props.defaultValue;
@@ -200,16 +186,15 @@ function useStoreInput(store, props) {
     }
     return toInputChecked(props.getter(store.state));
   };
-  function toStateValue(value) {
-    const selected = props.getter(store.state);
-    if (typeof selected === "number") {
+  const toStateValue = props.toStateValue || ((value) => {
+    if (props.type === "number" || props.type === "range") {
       return Number(value);
     }
-    if (selected instanceof Date) {
+    if (props.type === "datetime-local") {
       return new Date(value);
     }
     return value;
-  }
+  });
   const inputProps = useStoreController(store, {
     ref: props.ref,
     onSubscribe: (state, element) => {
@@ -242,7 +227,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };
@@ -276,15 +261,24 @@ function useStoreInputWithName(store, props) {
 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 });
-  }, []);
+  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,
     select,
@@ -295,27 +289,51 @@ function Input({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ import_react7.default.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ import_react7.default.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ import_react7.default.createElement("textarea", { ...props, ...storeProps });
 }
 
@@ -346,100 +364,11 @@ function useFormStore(initialState) {
     ...storeComponent
   };
 }
-
-// src/serialize.ts
-function serialize(value) {
-  if (value === void 0) {
-    return void 0;
-  }
-  if (value === null) {
-    return {
-      type: "null",
-      value: null
-    };
-  }
-  if (typeof value === "string") {
-    return {
-      type: "string",
-      value
-    };
-  }
-  if (typeof value === "number") {
-    return {
-      type: "number",
-      value
-    };
-  }
-  if (typeof value === "boolean") {
-    return {
-      type: "boolean",
-      value
-    };
-  }
-  if (value instanceof Date) {
-    return {
-      type: "date",
-      value: value.toISOString()
-    };
-  }
-  if (Array.isArray(value)) {
-    return {
-      type: "array",
-      value: value.map((item) => serialize(item))
-    };
-  }
-  if (typeof value === "object") {
-    return {
-      type: "object",
-      value: Object.entries(value).reduce((acc, [key, value2]) => {
-        return {
-          ...acc,
-          [key]: serialize(value2)
-        };
-      }, {})
-    };
-  }
-  return void 0;
-}
-function deserialize(data) {
-  if (data === void 0) {
-    return void 0;
-  }
-  if (typeof data === "object" && data !== null && "type" in data && "value" in data) {
-    const { type, value } = data;
-    switch (type) {
-      case "null":
-        return null;
-      case "string":
-        return value;
-      case "number":
-        return value;
-      case "boolean":
-        return value;
-      case "date":
-        return new Date(value);
-      case "array":
-        return value.map((item) => deserialize(item));
-      case "object":
-        return Object.entries(value).reduce((acc, [key, value2]) => {
-          return {
-            ...acc,
-            [key]: deserialize(value2)
-          };
-        }, {});
-      default:
-        return void 0;
-    }
-  }
-  return void 0;
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Input,
   Select,
   Textarea,
-  deserialize,
-  serialize,
   useFormStore,
   useSelector,
   useStore,

package/dist/index.mjs

@@ -70,21 +70,11 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 }
 
 // src/use_store_controller.tsx
-import { useEffect as useEffect2, useId, useRef as useRef2 } from "react";
+import { useId, useImperativeHandle, useRef as useRef2 } from "react";
 function useStoreController(store, props) {
   const ref = useRef2(null);
+  useImperativeHandle(props.ref, () => ref.current, []);
   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;
@@ -92,7 +82,7 @@ function useStoreController(store, props) {
     if (!ref.current) return;
     props.onSubscribe(state, ref.current);
   });
-  const onChange = () => {
+  const dispatch = () => {
     store.dispatch(
       (state) => {
         const element = ref.current;
@@ -106,7 +96,7 @@ function useStoreController(store, props) {
   };
   return {
     ref,
-    onChange
+    dispatch
   };
 }
 
@@ -114,20 +104,18 @@ function useStoreController(store, props) {
 import "react";
 import { format } from "date-fns";
 function useStoreInput(store, props) {
-  const toInputValue = (value) => {
+  const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
     }
     if (props.type === "datetime-local") {
-      if (value instanceof Date) {
-        return format(value, "yyyy-MM-dd'T'HH:mm:ss");
-      }
-      if (typeof value === "string") {
-        return toInputValue(new Date(value));
+      const date = new Date(value);
+      if (!isNaN(date.getTime())) {
+        return format(date, "yyyy-MM-dd'T'HH:mm:ss");
       }
     }
     return String(value);
-  };
+  });
   const getDefaultValue = () => {
     if (props.defaultValue !== void 0) {
       return props.defaultValue;
@@ -152,16 +140,15 @@ function useStoreInput(store, props) {
     }
     return toInputChecked(props.getter(store.state));
   };
-  function toStateValue(value) {
-    const selected = props.getter(store.state);
-    if (typeof selected === "number") {
+  const toStateValue = props.toStateValue || ((value) => {
+    if (props.type === "number" || props.type === "range") {
       return Number(value);
     }
-    if (selected instanceof Date) {
+    if (props.type === "datetime-local") {
       return new Date(value);
     }
     return value;
-  }
+  });
   const inputProps = useStoreController(store, {
     ref: props.ref,
     onSubscribe: (state, element) => {
@@ -194,7 +181,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };
@@ -225,20 +212,27 @@ function useStoreInputWithName(store, props) {
 }
 
 // src/use_store_component.tsx
-import {
-  useCallback
-} from "react";
+import { useCallback } from "react";
 import React from "react";
 function useStoreComponent(store) {
-  const input = useCallback(function Component(props) {
-    return /* @__PURE__ */ React.createElement(Input, { store, ...props });
-  }, []);
-  const select = useCallback(function Component(props) {
-    return /* @__PURE__ */ React.createElement(Select, { store, ...props });
-  }, []);
-  const textarea = useCallback(function Component(props) {
-    return /* @__PURE__ */ React.createElement(Textarea, { store, ...props });
-  }, []);
+  const input = useCallback(
+    function Component(props) {
+      return /* @__PURE__ */ React.createElement(Input, { store, ...props });
+    },
+    []
+  );
+  const select = useCallback(
+    function Component(props) {
+      return /* @__PURE__ */ React.createElement(Select, { store, ...props });
+    },
+    []
+  );
+  const textarea = useCallback(
+    function Component(props) {
+      return /* @__PURE__ */ React.createElement(Textarea, { store, ...props });
+    },
+    []
+  );
   return {
     input,
     select,
@@ -249,27 +243,51 @@ function Input({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ React.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ React.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ React.createElement("textarea", { ...props, ...storeProps });
 }
 
@@ -300,99 +318,10 @@ function useFormStore(initialState) {
     ...storeComponent
   };
 }
-
-// src/serialize.ts
-function serialize(value) {
-  if (value === void 0) {
-    return void 0;
-  }
-  if (value === null) {
-    return {
-      type: "null",
-      value: null
-    };
-  }
-  if (typeof value === "string") {
-    return {
-      type: "string",
-      value
-    };
-  }
-  if (typeof value === "number") {
-    return {
-      type: "number",
-      value
-    };
-  }
-  if (typeof value === "boolean") {
-    return {
-      type: "boolean",
-      value
-    };
-  }
-  if (value instanceof Date) {
-    return {
-      type: "date",
-      value: value.toISOString()
-    };
-  }
-  if (Array.isArray(value)) {
-    return {
-      type: "array",
-      value: value.map((item) => serialize(item))
-    };
-  }
-  if (typeof value === "object") {
-    return {
-      type: "object",
-      value: Object.entries(value).reduce((acc, [key, value2]) => {
-        return {
-          ...acc,
-          [key]: serialize(value2)
-        };
-      }, {})
-    };
-  }
-  return void 0;
-}
-function deserialize(data) {
-  if (data === void 0) {
-    return void 0;
-  }
-  if (typeof data === "object" && data !== null && "type" in data && "value" in data) {
-    const { type, value } = data;
-    switch (type) {
-      case "null":
-        return null;
-      case "string":
-        return value;
-      case "number":
-        return value;
-      case "boolean":
-        return value;
-      case "date":
-        return new Date(value);
-      case "array":
-        return value.map((item) => deserialize(item));
-      case "object":
-        return Object.entries(value).reduce((acc, [key, value2]) => {
-          return {
-            ...acc,
-            [key]: deserialize(value2)
-          };
-        }, {});
-      default:
-        return void 0;
-    }
-  }
-  return void 0;
-}
 export {
   Input,
   Select,
   Textarea,
-  deserialize,
-  serialize,
   useFormStore,
   useSelector,
   useStore,

package/dist/use_form_store.d.mts

@@ -2,6 +2,8 @@ import { CreateRender } from './create_render.mjs';
 import { Store } from './use_store.mjs';
 import { useStoreComponent } from './use_store_component.mjs';
 import 'react';
+import './use_store_input_with_name.mjs';
+import './use_store_input.mjs';
 
 type FormStore<TState> = Store<TState> & ReturnType<typeof useStoreComponent<TState>> & {
     render: CreateRender<TState>;

package/dist/use_form_store.d.ts

@@ -2,6 +2,8 @@ import { CreateRender } from './create_render.js';
 import { Store } from './use_store.js';
 import { useStoreComponent } from './use_store_component.js';
 import 'react';
+import './use_store_input_with_name.js';
+import './use_store_input.js';
 
 type FormStore<TState> = Store<TState> & ReturnType<typeof useStoreComponent<TState>> & {
     render: CreateRender<TState>;