react-store-input 0.1.0

package/dist/use_store_input_props.js

@@ -0,0 +1,143 @@
+"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)(() => {
+      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") {
+      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
+});

package/dist/use_store_input_props.mjs

@@ -0,0 +1,122 @@
+// src/use_store_input_props.tsx
+import {
+  useEffect,
+  useId,
+  useRef
+} from "react";
+import { format } from "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 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 = useRef(null);
+    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") {
+      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 = 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
+  };
+}
+export {
+  useStoreInputProps
+};

package/dist/use_subscribe.d.mts

@@ -0,0 +1,5 @@
+import { Store, StoreSubscriber } from './use_store.mjs';
+
+declare function useSubscribe<T>(store: Store<T>, subscriber: StoreSubscriber<T>): void;
+
+export { useSubscribe };

package/dist/use_subscribe.d.ts

@@ -0,0 +1,5 @@
+import { Store, StoreSubscriber } from './use_store.js';
+
+declare function useSubscribe<T>(store: Store<T>, subscriber: StoreSubscriber<T>): void;
+
+export { useSubscribe };

package/dist/use_subscribe.js

@@ -0,0 +1,38 @@
+"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_subscribe.tsx
+var use_subscribe_exports = {};
+__export(use_subscribe_exports, {
+  useSubscribe: () => useSubscribe
+});
+module.exports = __toCommonJS(use_subscribe_exports);
+var import_react = require("react");
+function useSubscribe(store, subscriber) {
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = store.subscribe(subscriber);
+    return () => {
+      unsubscribe();
+    };
+  }, [store]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSubscribe
+});

package/dist/use_subscribe.mjs

@@ -0,0 +1,13 @@
+// src/use_subscribe.tsx
+import { useEffect } from "react";
+function useSubscribe(store, subscriber) {
+  useEffect(() => {
+    const unsubscribe = store.subscribe(subscriber);
+    return () => {
+      unsubscribe();
+    };
+  }, [store]);
+}
+export {
+  useSubscribe
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "react-store-input",
+    "version": "0.1.0",
+    "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/tsup.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/**/*.ts", "src/**/*.tsx"], // Your entry file(s)
+  format: ["cjs", "esm"], // Output both CommonJS (.cjs) and ESM (.js/.mjs)
+  dts: true, // Generate .d.ts files for both formats
+  splitting: false,
+  clean: true, // Clean dist folder before build
+});