react-store-input 0.1.1 → 0.1.4

package/dist/use_store_input_with_name.js

@@ -0,0 +1,199 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use_store_input_with_name.tsx
+var use_store_input_with_name_exports = {};
+__export(use_store_input_with_name_exports, {
+  useStoreInputWithName: () => useStoreInputWithName
+});
+module.exports = __toCommonJS(use_store_input_with_name_exports);
+
+// src/use_store_input.tsx
+var import_react3 = require("react");
+var import_date_fns = require("date-fns");
+
+// src/use_store_controller.tsx
+var import_react2 = require("react");
+
+// src/use_subscribe.tsx
+var import_react = require("react");
+function useSubscribe(store, subscriber) {
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = store.subscribe(subscriber);
+    return () => {
+      unsubscribe();
+    };
+  }, [store]);
+}
+
+// src/use_store_controller.tsx
+function useStoreController(store, props) {
+  const ref = (0, import_react2.useRef)(null);
+  const dispatchKey = (0, import_react2.useId)();
+  (0, import_react2.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 {
+    ref,
+    onChange
+  };
+}
+
+// src/use_store_input.tsx
+function useStoreInput(store, props) {
+  const 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));
+      }
+    }
+    return String(value);
+  };
+  const getDefaultValue = () => {
+    if (props.defaultValue !== void 0) {
+      return props.defaultValue;
+    }
+    if (props.type === "checkbox" || props.type === "radio") {
+      return void 0;
+    }
+    return toInputValue(props.getter(store.state));
+  };
+  const toInputChecked = (value) => {
+    if (props.type === "radio") {
+      return value !== void 0 && value === props.value;
+    }
+    return Boolean(value);
+  };
+  const getDefaultChecked = () => {
+    if (props.defaultChecked) {
+      return props.defaultChecked;
+    }
+    if (props.type !== "checkbox" && props.type !== "radio") {
+      return void 0;
+    }
+    return toInputChecked(props.getter(store.state));
+  };
+  function toStateValue(value) {
+    const selected = props.getter(store.state);
+    if (typeof selected === "number") {
+      return Number(value);
+    }
+    if (selected instanceof Date) {
+      return new Date(value);
+    }
+    return value;
+  }
+  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 {
+        const value = toInputValue(props.getter(state));
+        if (element.value === value) {
+          return;
+        }
+        element.value = value;
+      }
+      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 {
+    ref: inputProps.ref,
+    defaultValue: getDefaultValue(),
+    defaultChecked: getDefaultChecked(),
+    onChange: (event) => {
+      inputProps.onChange();
+      props.onChange?.(event);
+    }
+  };
+}
+
+// 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
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStoreInputWithName
+});

package/dist/use_store_input_with_name.mjs

@@ -0,0 +1,172 @@
+// src/use_store_input.tsx
+import "react";
+import { format } from "date-fns";
+
+// src/use_store_controller.tsx
+import { useEffect as useEffect2, useId, useRef } from "react";
+
+// src/use_subscribe.tsx
+import { useEffect } from "react";
+function useSubscribe(store, subscriber) {
+  useEffect(() => {
+    const unsubscribe = store.subscribe(subscriber);
+    return () => {
+      unsubscribe();
+    };
+  }, [store]);
+}
+
+// src/use_store_controller.tsx
+function useStoreController(store, props) {
+  const ref = useRef(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 {
+    ref,
+    onChange
+  };
+}
+
+// src/use_store_input.tsx
+function useStoreInput(store, props) {
+  const 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));
+      }
+    }
+    return String(value);
+  };
+  const getDefaultValue = () => {
+    if (props.defaultValue !== void 0) {
+      return props.defaultValue;
+    }
+    if (props.type === "checkbox" || props.type === "radio") {
+      return void 0;
+    }
+    return toInputValue(props.getter(store.state));
+  };
+  const toInputChecked = (value) => {
+    if (props.type === "radio") {
+      return value !== void 0 && value === props.value;
+    }
+    return Boolean(value);
+  };
+  const getDefaultChecked = () => {
+    if (props.defaultChecked) {
+      return props.defaultChecked;
+    }
+    if (props.type !== "checkbox" && props.type !== "radio") {
+      return void 0;
+    }
+    return toInputChecked(props.getter(store.state));
+  };
+  function toStateValue(value) {
+    const selected = props.getter(store.state);
+    if (typeof selected === "number") {
+      return Number(value);
+    }
+    if (selected instanceof Date) {
+      return new Date(value);
+    }
+    return value;
+  }
+  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 {
+        const value = toInputValue(props.getter(state));
+        if (element.value === value) {
+          return;
+        }
+        element.value = value;
+      }
+      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 {
+    ref: inputProps.ref,
+    defaultValue: getDefaultValue(),
+    defaultChecked: getDefaultChecked(),
+    onChange: (event) => {
+      inputProps.onChange();
+      props.onChange?.(event);
+    }
+  };
+}
+
+// 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
+  };
+}
+export {
+  useStoreInputWithName
+};

package/package.json

@@ -1,45 +1,45 @@
 {
-    "name": "react-store-input",
-    "version": "0.1.1",
-    "types": "./dist/index.d.ts",
-    "main": "./dist/index.mjs",
-    "module": "./dist/index.js",
-    "sideEffects": false,
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "import": "./dist/index.mjs",
-            "require": "./dist/index.js"
-        }
-    },
-    "scripts": {
-        "build": "NODE_OPTIONS='--max-old-space-size=16384' tsup",
-        "dev": "tsup --watch"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dndnsoft/react-store-input.git"
-    },
-    "author": "",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/dndnsoft/react-store-input/issues"
-    },
-    "homepage": "https://github.com/dndnsoft/react-store-input#readme",
-    "description": "",
-    "devDependencies": {
-        "@types/node": "^24.10.1",
-        "@types/react": "^19",
-        "@types/react-dom": "^19",
-        "tsup": "^8.5.1",
-        "typescript": "^5.7.3"
-    },
-    "peerDependencies": {
-        "react": "^19",
-        "react-dom": "^19"
-    },
-    "dependencies": {
-        "date-fns": "^4.1.0",
-        "immer": "^11.1.3"
+  "name": "react-store-input",
+  "version": "0.1.4",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.js",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     }
-}
+  },
+  "scripts": {
+    "build": "NODE_OPTIONS='--max-old-space-size=16384' tsup",
+    "dev": "tsup --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dndnsoft/react-store-input.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dndnsoft/react-store-input/issues"
+  },
+  "homepage": "https://github.com/dndnsoft/react-store-input#readme",
+  "description": "",
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tsup": "^8.5.1",
+    "typescript": "^5.7.3"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0",
+    "immer": "^11.1.3"
+  }
+}

package/dist/use_store_input_props.d.mts

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { Ref, HTMLInputTypeAttribute, ChangeEventHandler } from 'react';
-import { Store } from './use_store.mjs';
-
-type InputType = HTMLInputTypeAttribute;
-type InputProps<TElement, TState> = {
-    ref?: Ref<TElement>;
-    name: keyof TState;
-    type?: InputType;
-    defaultValue?: string | number | readonly string[];
-    value?: string | number | readonly string[];
-    defaultChecked?: boolean;
-    onChange?: ChangeEventHandler<TElement>;
-};
-declare function useStoreInputProps<TElement, TState>(store: Store<TState>, props: InputProps<TElement, TState>): {
-    key: string;
-    ref: React.RefObject<TElement | null>;
-    name: string;
-    defaultValue: string | number | readonly string[] | undefined;
-    defaultChecked: boolean | undefined;
-    onChange: ChangeEventHandler<TElement>;
-};
-
-export { useStoreInputProps };

package/dist/use_store_input_props.d.ts

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { Ref, HTMLInputTypeAttribute, ChangeEventHandler } from 'react';
-import { Store } from './use_store.js';
-
-type InputType = HTMLInputTypeAttribute;
-type InputProps<TElement, TState> = {
-    ref?: Ref<TElement>;
-    name: keyof TState;
-    type?: InputType;
-    defaultValue?: string | number | readonly string[];
-    value?: string | number | readonly string[];
-    defaultChecked?: boolean;
-    onChange?: ChangeEventHandler<TElement>;
-};
-declare function useStoreInputProps<TElement, TState>(store: Store<TState>, props: InputProps<TElement, TState>): {
-    key: string;
-    ref: React.RefObject<TElement | null>;
-    name: string;
-    defaultValue: string | number | readonly string[] | undefined;
-    defaultChecked: boolean | undefined;
-    onChange: ChangeEventHandler<TElement>;
-};
-
-export { useStoreInputProps };

package/dist/use_store_input_props.js

@@ -1,154 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/use_store_input_props.tsx
-var use_store_input_props_exports = {};
-__export(use_store_input_props_exports, {
-  useStoreInputProps: () => useStoreInputProps
-});
-module.exports = __toCommonJS(use_store_input_props_exports);
-var import_react = require("react");
-var import_date_fns = require("date-fns");
-function useStoreInputProps(store, props) {
-  const 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));
-      }
-    }
-    return String(value);
-  };
-  const getDefaultValue = () => {
-    if (props.defaultValue !== void 0) {
-      return props.defaultValue;
-    }
-    if (props.type === "checkbox" || props.type === "radio") {
-      return void 0;
-    }
-    return toInputValue(store.state[props.name]);
-  };
-  const toInputChecked = (value) => {
-    if (props.type === "radio") {
-      return value !== void 0 && value === props.value;
-    }
-    return Boolean(value);
-  };
-  const getDefaultChecked = () => {
-    if (props.defaultChecked) {
-      return props.defaultChecked;
-    }
-    if (props.type !== "checkbox" && props.type !== "radio") {
-      return void 0;
-    }
-    return toInputChecked(store.state[props.name]);
-  };
-  function useSubscriptionRef() {
-    const ref2 = (0, import_react.useRef)(null);
-    (0, import_react.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") {
-      return Number(value);
-    }
-    if (store.state[props.name] 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
-          }
-        );
-      } else {
-        store.dispatch(
-          (state) => {
-            state[props.name] = toStateValue(target.value);
-          },
-          {
-            key: dispatchKey
-          }
-        );
-      }
-      props.onChange?.(e);
-    };
-  }
-  const dispatchKey = (0, import_react.useId)();
-  const ref = useSubscriptionRef();
-  const name = String(props.name);
-  const defaultValue = getDefaultValue();
-  const defaultChecked = getDefaultChecked();
-  const onChange = createChangeEventHandler();
-  return {
-    key: dispatchKey,
-    ref,
-    name,
-    defaultValue,
-    defaultChecked,
-    onChange
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useStoreInputProps
-});