react-store-input 0.1.6 → 0.1.8

package/dist/use_store_component.mjs

@@ -1,5 +1,5 @@
 // src/use_store_component.tsx
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import React from "react";
 
 // src/use_store_input.tsx
@@ -7,7 +7,7 @@ import "react";
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useId, useImperativeHandle, useRef } from "react";
+import { useId } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -22,22 +22,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = useRef(null);
-  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -45,13 +40,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -98,8 +92,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -116,7 +113,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -125,7 +126,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -136,8 +136,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {
@@ -193,7 +193,8 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -210,7 +211,8 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -227,7 +229,8 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,

package/dist/use_store_controller.d.mts

@@ -1,14 +1,10 @@
-import * as React from 'react';
-import { Ref } from 'react';
 import { Store } from './use_store.mjs';
 
-type StoreControllerProps<TController, TState> = {
-    ref?: Ref<TController>;
-    onSubscribe: (state: TState, element: TController) => void;
-    onDispatch: (state: TState, element: TController) => void;
+type StoreControllerProps<TState> = {
+    onSubscribe: (state: TState) => void;
+    onDispatch: (state: TState) => void;
 };
-declare function useStoreController<TController, TState>(store: Store<TState>, props: StoreControllerProps<TController, TState>): {
-    ref: React.RefObject<TController | null>;
+declare function useStoreController<TState>(store: Store<TState>, props: StoreControllerProps<TState>): {
     dispatch: () => void;
 };
 

package/dist/use_store_controller.d.ts

@@ -1,14 +1,10 @@
-import * as React from 'react';
-import { Ref } from 'react';
 import { Store } from './use_store.js';
 
-type StoreControllerProps<TController, TState> = {
-    ref?: Ref<TController>;
-    onSubscribe: (state: TState, element: TController) => void;
-    onDispatch: (state: TState, element: TController) => void;
+type StoreControllerProps<TState> = {
+    onSubscribe: (state: TState) => void;
+    onDispatch: (state: TState) => void;
 };
-declare function useStoreController<TController, TState>(store: Store<TState>, props: StoreControllerProps<TController, TState>): {
-    ref: React.RefObject<TController | null>;
+declare function useStoreController<TState>(store: Store<TState>, props: StoreControllerProps<TState>): {
     dispatch: () => void;
 };
 

package/dist/use_store_controller.js

@@ -38,22 +38,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react2.useId)();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -61,7 +56,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }

package/dist/use_store_controller.mjs

@@ -1,5 +1,5 @@
 // src/use_store_controller.tsx
-import { useId, useImperativeHandle, useRef } from "react";
+import { useId } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -14,22 +14,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = useRef(null);
-  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -37,7 +32,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }

package/dist/use_store_input.d.mts

@@ -1,9 +1,7 @@
-import * as React$1 from 'react';
-import { Ref, HTMLInputTypeAttribute } from 'react';
+import { HTMLInputTypeAttribute, RefObject } from 'react';
 import { Store } from './use_store.mjs';
 
 type StoreInputProps<TInputElement, TState, TValue> = {
-    ref?: Ref<TInputElement>;
     type?: HTMLInputTypeAttribute;
     defaultValue?: string | number | readonly string[] | undefined;
     value?: string | number | readonly string[] | undefined;
@@ -15,8 +13,7 @@ type StoreInputProps<TInputElement, TState, TValue> = {
     toInputValue?: (value: TValue) => string;
     toStateValue?: (value: string) => TValue;
 };
-declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TValue>(store: Store<TState>, props: StoreInputProps<TInputElement, TState, TValue>): {
-    ref: React$1.RefObject<TInputElement | null>;
+declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TValue>(ref: RefObject<TInputElement | null>, store: Store<TState>, props: StoreInputProps<TInputElement, TState, TValue>): {
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
     onChange: (event: React.ChangeEvent<TInputElement>) => void;

package/dist/use_store_input.d.ts

@@ -1,9 +1,7 @@
-import * as React$1 from 'react';
-import { Ref, HTMLInputTypeAttribute } from 'react';
+import { HTMLInputTypeAttribute, RefObject } from 'react';
 import { Store } from './use_store.js';
 
 type StoreInputProps<TInputElement, TState, TValue> = {
-    ref?: Ref<TInputElement>;
     type?: HTMLInputTypeAttribute;
     defaultValue?: string | number | readonly string[] | undefined;
     value?: string | number | readonly string[] | undefined;
@@ -15,8 +13,7 @@ type StoreInputProps<TInputElement, TState, TValue> = {
     toInputValue?: (value: TValue) => string;
     toStateValue?: (value: string) => TValue;
 };
-declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TValue>(store: Store<TState>, props: StoreInputProps<TInputElement, TState, TValue>): {
-    ref: React$1.RefObject<TInputElement | null>;
+declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TValue>(ref: RefObject<TInputElement | null>, store: Store<TState>, props: StoreInputProps<TInputElement, TState, TValue>): {
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
     onChange: (event: React.ChangeEvent<TInputElement>) => void;

package/dist/use_store_input.js

@@ -42,22 +42,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react2.useId)();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -65,13 +60,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -118,8 +112,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -136,7 +133,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -145,7 +146,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {

package/dist/use_store_input.mjs

@@ -3,7 +3,7 @@ import "react";
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useId, useImperativeHandle, useRef } from "react";
+import { useId } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -18,22 +18,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = useRef(null);
-  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -41,13 +36,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -94,8 +88,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -112,7 +109,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -121,7 +122,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {

package/dist/use_store_input_with_name.d.mts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from 'react';
 import { Store } from './use_store.mjs';
 import { StoreInputProps } from './use_store_input.mjs';
 
@@ -6,9 +7,8 @@ type InferNameFromProps<TState, TName extends keyof TState | undefined, TValue>
 type StoreInputWithNameProps<TInputElement, TState, TName extends keyof TState | undefined, TValue> = Omit<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter"> & Partial<Pick<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter">> & {
     name?: TName;
 };
-declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TName extends keyof TState | undefined, TValue>(store: Store<TState>, props: StoreInputWithNameProps<TInputElement, TState, TName, TValue>): {
+declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TName extends keyof TState | undefined, TValue>(ref: RefObject<TInputElement | null>, store: Store<TState>, props: StoreInputWithNameProps<TInputElement, TState, TName, TValue>): {
     name: string | undefined;
-    ref: React.RefObject<TInputElement | null>;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
     onChange: (event: React.ChangeEvent<TInputElement>) => void;

package/dist/use_store_input_with_name.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from 'react';
 import { Store } from './use_store.js';
 import { StoreInputProps } from './use_store_input.js';
 
@@ -6,9 +7,8 @@ type InferNameFromProps<TState, TName extends keyof TState | undefined, TValue>
 type StoreInputWithNameProps<TInputElement, TState, TName extends keyof TState | undefined, TValue> = Omit<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter"> & Partial<Pick<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter">> & {
     name?: TName;
 };
-declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TName extends keyof TState | undefined, TValue>(store: Store<TState>, props: StoreInputWithNameProps<TInputElement, TState, TName, TValue>): {
+declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TName extends keyof TState | undefined, TValue>(ref: RefObject<TInputElement | null>, store: Store<TState>, props: StoreInputWithNameProps<TInputElement, TState, TName, TValue>): {
     name: string | undefined;
-    ref: React.RefObject<TInputElement | null>;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
     onChange: (event: React.ChangeEvent<TInputElement>) => void;

package/dist/use_store_input_with_name.js

@@ -44,22 +44,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react2.useId)();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -67,13 +62,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -120,8 +114,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -138,7 +135,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -147,7 +148,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -158,8 +158,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {

package/dist/use_store_input_with_name.mjs

@@ -3,7 +3,7 @@ import "react";
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useId, useImperativeHandle, useRef } from "react";
+import { useId } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -18,22 +18,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = useRef(null);
-  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -41,13 +36,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -94,8 +88,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -112,7 +109,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -121,7 +122,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -132,8 +132,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-store-input",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",