react-store-input 0.2.2 → 0.2.4

package/dist/create_render.js

@@ -26,29 +26,25 @@ __export(create_render_exports, {
 module.exports = __toCommonJS(create_render_exports);
 
 // src/use_selector.tsx
-var import_react2 = require("react");
-
-// src/use_subscribe.tsx
 var import_react = require("react");
-function useSubscribe(store, subscriber) {
+function useSelector(store, selector, compare = (a, b) => a === b) {
+  const [state, setState] = (0, import_react.useState)(selector(store.state));
+  const stateRef = (0, import_react.useRef)(state);
   (0, import_react.useEffect)(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    stateRef.current = state;
+  }, [state]);
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = store.subscribe((newState) => {
+      const result = selector(newState);
+      if (compare(stateRef.current, result)) {
+        return;
+      }
+      setState(result);
+    });
     return () => {
       unsubscribe();
     };
-  }, [store]);
-}
-
-// src/use_selector.tsx
-function useSelector(store, selector, compare = (a, b) => a === b) {
-  const [state, setState] = (0, import_react2.useState)(selector(store.state));
-  useSubscribe(store, (newState) => {
-    const result = selector(newState);
-    if (compare(state, result)) {
-      return;
-    }
-    setState(result);
-  });
+  }, []);
   return state;
 }
 

package/dist/create_render.mjs

@@ -1,27 +1,23 @@
 // src/use_selector.tsx
-import { useState } from "react";
-
-// src/use_subscribe.tsx
-import { useEffect } from "react";
-function useSubscribe(store, subscriber) {
+import { useEffect, useRef, useState } from "react";
+function useSelector(store, selector, compare = (a, b) => a === b) {
+  const [state, setState] = useState(selector(store.state));
+  const stateRef = useRef(state);
   useEffect(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    stateRef.current = state;
+  }, [state]);
+  useEffect(() => {
+    const unsubscribe = store.subscribe((newState) => {
+      const result = selector(newState);
+      if (compare(stateRef.current, result)) {
+        return;
+      }
+      setState(result);
+    });
     return () => {
       unsubscribe();
     };
-  }, [store]);
-}
-
-// src/use_selector.tsx
-function useSelector(store, selector, compare = (a, b) => a === b) {
-  const [state, setState] = useState(selector(store.state));
-  useSubscribe(store, (newState) => {
-    const result = selector(newState);
-    if (compare(state, result)) {
-      return;
-    }
-    setState(result);
-  });
+  }, []);
   return state;
 }
 

package/dist/index.js

@@ -79,30 +79,37 @@ function useStore(initialState) {
 }
 
 // src/use_selector.tsx
-var import_react3 = require("react");
-
-// src/use_subscribe.tsx
 var import_react2 = require("react");
-function useSubscribe(store, subscriber) {
+function useSelector(store, selector, compare = (a, b) => a === b) {
+  const [state, setState] = (0, import_react2.useState)(selector(store.state));
+  const stateRef = (0, import_react2.useRef)(state);
   (0, import_react2.useEffect)(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    stateRef.current = state;
+  }, [state]);
+  (0, import_react2.useEffect)(() => {
+    const unsubscribe = store.subscribe((newState) => {
+      const result = selector(newState);
+      if (compare(stateRef.current, result)) {
+        return;
+      }
+      setState(result);
+    });
     return () => {
       unsubscribe();
     };
-  }, [store]);
+  }, []);
+  return state;
 }
 
-// src/use_selector.tsx
-function useSelector(store, selector, compare = (a, b) => a === b) {
-  const [state, setState] = (0, import_react3.useState)(selector(store.state));
-  useSubscribe(store, (newState) => {
-    const result = selector(newState);
-    if (compare(state, result)) {
-      return;
-    }
-    setState(result);
-  });
-  return state;
+// src/use_subscribe.tsx
+var import_react3 = require("react");
+function useSubscribe(store, subscriber) {
+  (0, import_react3.useEffect)(() => {
+    const unsubscribe = store.subscribe(subscriber);
+    return () => {
+      unsubscribe();
+    };
+  }, []);
 }
 
 // src/use_store_controller.tsx

package/dist/index.mjs

@@ -43,30 +43,37 @@ function useStore(initialState) {
 }
 
 // src/use_selector.tsx
-import { useState } from "react";
+import { useEffect, useRef as useRef2, useState } from "react";
+function useSelector(store, selector, compare = (a, b) => a === b) {
+  const [state, setState] = useState(selector(store.state));
+  const stateRef = useRef2(state);
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+  useEffect(() => {
+    const unsubscribe = store.subscribe((newState) => {
+      const result = selector(newState);
+      if (compare(stateRef.current, result)) {
+        return;
+      }
+      setState(result);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  return state;
+}
 
 // src/use_subscribe.tsx
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 function useSubscribe(store, subscriber) {
-  useEffect(() => {
+  useEffect2(() => {
     const unsubscribe = store.subscribe(subscriber);
     return () => {
       unsubscribe();
     };
-  }, [store]);
-}
-
-// src/use_selector.tsx
-function useSelector(store, selector, compare = (a, b) => a === b) {
-  const [state, setState] = useState(selector(store.state));
-  useSubscribe(store, (newState) => {
-    const result = selector(newState);
-    if (compare(state, result)) {
-      return;
-    }
-    setState(result);
-  });
-  return state;
+  }, []);
 }
 
 // src/use_store_controller.tsx
@@ -211,7 +218,7 @@ function useStoreInputWithName(ref, store, props) {
 }
 
 // src/use_store_component.tsx
-import { useCallback, useRef as useRef2 } from "react";
+import { useCallback, useRef as useRef3 } from "react";
 import { jsx } from "react/jsx-runtime";
 function useStoreComponent(store) {
   const input = useCallback(function Component(props) {
@@ -237,7 +244,7 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -255,7 +262,7 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -273,7 +280,7 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,

package/dist/use_form_store.js

@@ -25,29 +25,25 @@ __export(use_form_store_exports, {
 module.exports = __toCommonJS(use_form_store_exports);
 
 // src/use_selector.tsx
-var import_react2 = require("react");
-
-// src/use_subscribe.tsx
 var import_react = require("react");
-function useSubscribe(store, subscriber) {
+function useSelector(store, selector, compare = (a, b) => a === b) {
+  const [state, setState] = (0, import_react.useState)(selector(store.state));
+  const stateRef = (0, import_react.useRef)(state);
   (0, import_react.useEffect)(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    stateRef.current = state;
+  }, [state]);
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = store.subscribe((newState) => {
+      const result = selector(newState);
+      if (compare(stateRef.current, result)) {
+        return;
+      }
+      setState(result);
+    });
     return () => {
       unsubscribe();
     };
-  }, [store]);
-}
-
-// src/use_selector.tsx
-function useSelector(store, selector, compare = (a, b) => a === b) {
-  const [state, setState] = (0, import_react2.useState)(selector(store.state));
-  useSubscribe(store, (newState) => {
-    const result = selector(newState);
-    if (compare(state, result)) {
-      return;
-    }
-    setState(result);
-  });
+  }, []);
   return state;
 }
 
@@ -65,11 +61,11 @@ function createRenderWithStore(store) {
 }
 
 // src/use_store.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_immer = require("immer");
 function useStore(initialState) {
-  const stateRef = (0, import_react3.useRef)(initialState);
-  const subscribers = (0, import_react3.useRef)([]);
+  const stateRef = (0, import_react2.useRef)(initialState);
+  const subscribers = (0, import_react2.useRef)([]);
   const dispatch = (recipe, options = {}) => {
     if (typeof recipe === "function") {
       stateRef.current = (0, import_immer.produce)(stateRef.current, recipe);
@@ -116,6 +112,19 @@ var import_date_fns = require("date-fns");
 
 // src/use_store_controller.tsx
 var import_react4 = require("react");
+
+// src/use_subscribe.tsx
+var import_react3 = require("react");
+function useSubscribe(store, subscriber) {
+  (0, import_react3.useEffect)(() => {
+    const unsubscribe = store.subscribe(subscriber);
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+}
+
+// src/use_store_controller.tsx
 function useStoreController(store, props) {
   const dispatchKey = (0, import_react4.useId)();
   useSubscribe(store, (state, key) => {

package/dist/use_form_store.mjs

@@ -1,27 +1,23 @@
 // src/use_selector.tsx
-import { useState } from "react";
-
-// src/use_subscribe.tsx
-import { useEffect } from "react";
-function useSubscribe(store, subscriber) {
+import { useEffect, useRef, useState } from "react";
+function useSelector(store, selector, compare = (a, b) => a === b) {
+  const [state, setState] = useState(selector(store.state));
+  const stateRef = useRef(state);
   useEffect(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    stateRef.current = state;
+  }, [state]);
+  useEffect(() => {
+    const unsubscribe = store.subscribe((newState) => {
+      const result = selector(newState);
+      if (compare(stateRef.current, result)) {
+        return;
+      }
+      setState(result);
+    });
     return () => {
       unsubscribe();
     };
-  }, [store]);
-}
-
-// src/use_selector.tsx
-function useSelector(store, selector, compare = (a, b) => a === b) {
-  const [state, setState] = useState(selector(store.state));
-  useSubscribe(store, (newState) => {
-    const result = selector(newState);
-    if (compare(state, result)) {
-      return;
-    }
-    setState(result);
-  });
+  }, []);
   return state;
 }
 
@@ -39,11 +35,11 @@ function createRenderWithStore(store) {
 }
 
 // src/use_store.tsx
-import { useRef } from "react";
+import { useRef as useRef2 } from "react";
 import { produce } from "immer";
 function useStore(initialState) {
-  const stateRef = useRef(initialState);
-  const subscribers = useRef([]);
+  const stateRef = useRef2(initialState);
+  const subscribers = useRef2([]);
   const dispatch = (recipe, options = {}) => {
     if (typeof recipe === "function") {
       stateRef.current = produce(stateRef.current, recipe);
@@ -83,13 +79,26 @@ function useStore(initialState) {
 }
 
 // src/use_store_component.tsx
-import { useCallback, useRef as useRef2 } from "react";
+import { useCallback, useRef as useRef3 } from "react";
 
 // src/use_store_input.tsx
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
 import { useId } from "react";
+
+// src/use_subscribe.tsx
+import { useEffect as useEffect2 } from "react";
+function useSubscribe(store, subscriber) {
+  useEffect2(() => {
+    const unsubscribe = store.subscribe(subscriber);
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+}
+
+// src/use_store_controller.tsx
 function useStoreController(store, props) {
   const dispatchKey = useId();
   useSubscribe(store, (state, key) => {
@@ -254,7 +263,7 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -272,7 +281,7 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -290,7 +299,7 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,

package/dist/use_selector.js

@@ -23,29 +23,25 @@ __export(use_selector_exports, {
   useSelector: () => useSelector
 });
 module.exports = __toCommonJS(use_selector_exports);
-var import_react2 = require("react");
-
-// src/use_subscribe.tsx
 var import_react = require("react");
-function useSubscribe(store, subscriber) {
+function useSelector(store, selector, compare = (a, b) => a === b) {
+  const [state, setState] = (0, import_react.useState)(selector(store.state));
+  const stateRef = (0, import_react.useRef)(state);
   (0, import_react.useEffect)(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    stateRef.current = state;
+  }, [state]);
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = store.subscribe((newState) => {
+      const result = selector(newState);
+      if (compare(stateRef.current, result)) {
+        return;
+      }
+      setState(result);
+    });
     return () => {
       unsubscribe();
     };
-  }, [store]);
-}
-
-// src/use_selector.tsx
-function useSelector(store, selector, compare = (a, b) => a === b) {
-  const [state, setState] = (0, import_react2.useState)(selector(store.state));
-  useSubscribe(store, (newState) => {
-    const result = selector(newState);
-    if (compare(state, result)) {
-      return;
-    }
-    setState(result);
-  });
+  }, []);
   return state;
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/use_selector.mjs

@@ -1,27 +1,23 @@
 // src/use_selector.tsx
-import { useState } from "react";
-
-// src/use_subscribe.tsx
-import { useEffect } from "react";
-function useSubscribe(store, subscriber) {
+import { useEffect, useRef, useState } from "react";
+function useSelector(store, selector, compare = (a, b) => a === b) {
+  const [state, setState] = useState(selector(store.state));
+  const stateRef = useRef(state);
   useEffect(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    stateRef.current = state;
+  }, [state]);
+  useEffect(() => {
+    const unsubscribe = store.subscribe((newState) => {
+      const result = selector(newState);
+      if (compare(stateRef.current, result)) {
+        return;
+      }
+      setState(result);
+    });
     return () => {
       unsubscribe();
     };
-  }, [store]);
-}
-
-// src/use_selector.tsx
-function useSelector(store, selector, compare = (a, b) => a === b) {
-  const [state, setState] = useState(selector(store.state));
-  useSubscribe(store, (newState) => {
-    const result = selector(newState);
-    if (compare(state, result)) {
-      return;
-    }
-    setState(result);
-  });
+  }, []);
   return state;
 }
 export {

package/dist/use_store_component.js

@@ -42,7 +42,7 @@ function useSubscribe(store, subscriber) {
     return () => {
       unsubscribe();
     };
-  }, [store]);
+  }, []);
 }
 
 // src/use_store_controller.tsx

package/dist/use_store_component.mjs

@@ -15,7 +15,7 @@ function useSubscribe(store, subscriber) {
     return () => {
       unsubscribe();
     };
-  }, [store]);
+  }, []);
 }
 
 // src/use_store_controller.tsx

package/dist/use_store_controller.js

@@ -33,7 +33,7 @@ function useSubscribe(store, subscriber) {
     return () => {
       unsubscribe();
     };
-  }, [store]);
+  }, []);
 }
 
 // src/use_store_controller.tsx

package/dist/use_store_controller.mjs

@@ -9,7 +9,7 @@ function useSubscribe(store, subscriber) {
     return () => {
       unsubscribe();
     };
-  }, [store]);
+  }, []);
 }
 
 // src/use_store_controller.tsx

package/dist/use_store_input.js

@@ -36,7 +36,7 @@ function useSubscribe(store, subscriber) {
     return () => {
       unsubscribe();
     };
-  }, [store]);
+  }, []);
 }
 
 // src/use_store_controller.tsx

package/dist/use_store_input.mjs

@@ -12,7 +12,7 @@ function useSubscribe(store, subscriber) {
     return () => {
       unsubscribe();
     };
-  }, [store]);
+  }, []);
 }
 
 // src/use_store_controller.tsx

package/dist/use_store_input_with_name.d.mts

@@ -11,7 +11,7 @@ declare function useStoreInputWithName<TInputElement extends HTMLInputElement |
     name: string | undefined;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
-    onChange: (event: react.ChangeEvent<TInputElement>) => void;
+    onChange: (event: react.ChangeEvent<TInputElement, Element>) => void;
 };
 
 export { type InferNameFromProps, type StoreInputWithNameProps, useStoreInputWithName };

package/dist/use_store_input_with_name.d.ts

@@ -11,7 +11,7 @@ declare function useStoreInputWithName<TInputElement extends HTMLInputElement |
     name: string | undefined;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
-    onChange: (event: react.ChangeEvent<TInputElement>) => void;
+    onChange: (event: react.ChangeEvent<TInputElement, Element>) => void;
 };
 
 export { type InferNameFromProps, type StoreInputWithNameProps, useStoreInputWithName };

package/dist/use_store_input_with_name.js

@@ -38,7 +38,7 @@ function useSubscribe(store, subscriber) {
     return () => {
       unsubscribe();
     };
-  }, [store]);
+  }, []);
 }
 
 // src/use_store_controller.tsx

package/dist/use_store_input_with_name.mjs

@@ -12,7 +12,7 @@ function useSubscribe(store, subscriber) {
     return () => {
       unsubscribe();
     };
-  }, [store]);
+  }, []);
 }
 
 // src/use_store_controller.tsx

package/dist/use_subscribe.js

@@ -30,7 +30,7 @@ function useSubscribe(store, subscriber) {
     return () => {
       unsubscribe();
     };
-  }, [store]);
+  }, []);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/use_subscribe.mjs

@@ -6,7 +6,7 @@ function useSubscribe(store, subscriber) {
     return () => {
       unsubscribe();
     };
-  }, [store]);
+  }, []);
 }
 export {
   useSubscribe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-store-input",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",
@@ -29,14 +29,14 @@
   "description": "",
   "devDependencies": {
     "@types/node": "^24.10.1",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^18.3.1 || ^19.2.1",
+    "@types/react-dom": "^18.3.1 || ^19.2.1",
     "tsup": "^8.5.1",
     "typescript": "^5.7.3"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18.3.1 || ^19.2.1",
+    "react-dom": "^18.3.1 || ^19.2.1"
   },
   "dependencies": {
     "date-fns": "^4.1.0",