react-store-input 0.4.0 → 0.6.0

package/dist/index.mjs

@@ -1,34 +1,3 @@
-// src/store/use_store_controller.tsx
-import { useCallback, useEffect, useId, useRef } from "react";
-function useStoreController(store, props) {
-  const dispatchKey = useId();
-  const propsRef = useRef(props);
-  const subscribedStoreRef = useRef(null);
-  useEffect(() => {
-    propsRef.current = props;
-  }, [props]);
-  useEffect(() => {
-    const isReplacement = subscribedStoreRef.current !== null && subscribedStoreRef.current !== store;
-    subscribedStoreRef.current = store;
-    const unsubscribe = store.subscribe((state, key) => {
-      if (key !== dispatchKey) {
-        propsRef.current.onSubscribe(state);
-      }
-    });
-    if (isReplacement) {
-      propsRef.current.onSubscribe(store.state);
-    }
-    return unsubscribe;
-  }, [dispatchKey, store]);
-  const dispatch = useCallback(() => {
-    store.dispatch(
-      (state) => propsRef.current.onDispatch(state),
-      { key: dispatchKey }
-    );
-  }, [dispatchKey, store]);
-  return { dispatch };
-}
-
 // src/store/create_render.tsx
 import { useSelector } from "gw-store";
 import { Fragment, jsx } from "react/jsx-runtime";
@@ -54,16 +23,10 @@ function defineLens(lens) {
   return lens;
 }
 function readPath(value, path) {
-  return path.reduce(
-    (current, key) => current[key],
-    value
-  );
+  return path.reduce((current, key) => current[key], value);
 }
 function writePath(state, path, value) {
-  const parent = path.slice(0, -1).reduce(
-    (current, key) => current[key],
-    state
-  );
+  const parent = path.slice(0, -1).reduce((current, key) => current[key], state);
   parent[path.at(-1)] = value;
 }
 function createPathLens(path) {
@@ -116,10 +79,7 @@ function assertLensLaws(lens, options) {
   const equalsState = options.equalsState ?? structuralEqual;
   const equalsValue = options.equalsValue ?? structuralEqual;
   const set = (state, value) => produce(state, (draft) => lens.set(draft, value));
-  if (!equalsState(
-    set(options.state, lens.get(options.state)),
-    options.state
-  )) {
+  if (!equalsState(set(options.state, lens.get(options.state)), options.state)) {
     throw new Error("Lens law failed: setting the current value changed state.");
   }
   for (const value of options.values) {
@@ -130,10 +90,7 @@ function assertLensLaws(lens, options) {
   }
   for (const previous of options.values) {
     for (const next of options.values) {
-      if (!equalsState(
-        set(set(options.state, previous), next),
-        set(options.state, next)
-      )) {
+      if (!equalsState(set(set(options.state, previous), next), set(options.state, next))) {
         throw new Error("Lens law failed: the last set did not win.");
       }
     }
@@ -154,22 +111,109 @@ function assertCodecLaws(codec, options) {
   for (const input of options.inputs ?? []) {
     const result = codec.parse(input);
     if (result.isOk && !equalsInput(codec.format(result.value), input)) {
-      throw new Error(
-        "Codec law failed: format(parse(input).value) !== input."
-      );
+      throw new Error("Codec law failed: format(parse(input).value) !== input.");
     }
   }
 }
 
-// src/input/use_store_input.tsx
-import {
-  useCallback as useCallback2,
-  useEffect as useEffect2,
-  useRef as useRef2,
-  useState
-} from "react";
+// src/binding/use_store_binding.tsx
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+function equalStoreValue(previous, next) {
+  if (Object.is(previous, next)) {
+    return true;
+  }
+  if (previous instanceof Date && next instanceof Date) {
+    return Object.is(previous.getTime(), next.getTime());
+  }
+  if (Array.isArray(previous) && Array.isArray(next)) {
+    return previous.length === next.length && previous.every((value, index) => Object.is(value, next[index]));
+  }
+  return false;
+}
+function useStoreBinding(store, binding, options = {}) {
+  const dispatchKey = useId();
+  const [initialValue] = useState(() => binding.codec.format(binding.lens.get(store.state)));
+  const [meta, setMeta] = useState({ valid: true });
+  const metaRef = useRef(meta);
+  const optionsRef = useRef(options);
+  const subscribedStoreRef = useRef(null);
+  const subscribedBindingRef = useRef(binding);
+  useEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+  useEffect(() => {
+    const isReplacement = subscribedStoreRef.current !== null && (subscribedStoreRef.current !== store || subscribedBindingRef.current !== binding);
+    subscribedStoreRef.current = store;
+    subscribedBindingRef.current = binding;
+    const sync = (state) => {
+      if (!metaRef.current.valid) {
+        return;
+      }
+      const value = binding.lens.get(state);
+      optionsRef.current.onStoreChange?.(binding.codec.format(value), value);
+    };
+    const unsubscribe = store.subscribe((state, key) => {
+      if (key !== dispatchKey) {
+        sync(state);
+      }
+    });
+    if (isReplacement) {
+      sync(store.state);
+    }
+    return unsubscribe;
+  }, [binding, dispatchKey, store]);
+  const setValue = useCallback(
+    (value) => {
+      const currentValue = binding.lens.get(store.state);
+      const equals = binding.codec.equals ?? equalStoreValue;
+      if (equals(currentValue, value)) {
+        return;
+      }
+      store.dispatch((state) => binding.lens.set(state, value), { key: dispatchKey });
+    },
+    [binding, dispatchKey, store]
+  );
+  const commit = useCallback(
+    (input) => {
+      const result = binding.codec.parse(input);
+      if (result.isErr) {
+        const invalidMeta = {
+          valid: false,
+          error: result.error
+        };
+        metaRef.current = invalidMeta;
+        setMeta(invalidMeta);
+        return result;
+      }
+      const validMeta = { valid: true };
+      metaRef.current = validMeta;
+      setMeta((current) => current.valid ? current : validMeta);
+      setValue(result.value);
+      return result;
+    },
+    [binding, setValue]
+  );
+  const reset = useCallback(
+    (value) => {
+      const validMeta = { valid: true };
+      metaRef.current = validMeta;
+      setMeta((current) => current.valid ? current : validMeta);
+      setValue(value);
+    },
+    [setValue]
+  );
+  return {
+    initialValue,
+    meta,
+    commit,
+    reset
+  };
+}
 
-// src/input/dom_value.ts
+// src/html_element/use_store_html_element.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/html_element/dom_value.ts
 function pad(value) {
   return String(value).padStart(2, "0");
 }
@@ -203,9 +247,7 @@ function writeElementValue(element, value) {
     return;
   }
   if ("options" in element && element.multiple) {
-    const selectedValues = new Set(
-      (Array.isArray(value) ? value : [value]).map(String)
-    );
+    const selectedValues = new Set((Array.isArray(value) ? value : [value]).map(String));
     for (const option of element.options) {
       const selected = selectedValues.has(option.value);
       if (option.selected !== selected) {
@@ -219,20 +261,8 @@ function writeElementValue(element, value) {
     element.value = nextValue;
   }
 }
-function equalStateValue(previous, next) {
-  if (Object.is(previous, next)) {
-    return true;
-  }
-  if (previous instanceof Date && next instanceof Date) {
-    return Object.is(previous.getTime(), next.getTime());
-  }
-  if (Array.isArray(previous) && Array.isArray(next)) {
-    return previous.length === next.length && previous.every((value, index) => Object.is(value, next[index]));
-  }
-  return false;
-}
 
-// src/input/reset_coordinator.ts
+// src/html_element/reset_coordinator.ts
 var resettingForms = /* @__PURE__ */ new WeakSet();
 var resetCoordinators = /* @__PURE__ */ new WeakMap();
 function isFormResetting(form) {
@@ -244,10 +274,7 @@ function registerResetBinding(form, batch, reset) {
     const groups = /* @__PURE__ */ new Map();
     const handleReset = () => {
       resettingForms.add(form);
-      const groupSnapshots = Array.from(groups, ([groupBatch, bindings2]) => [
-        groupBatch,
-        [...bindings2]
-      ]);
+      const groupSnapshots = Array.from(groups, ([groupBatch, bindings2]) => [groupBatch, [...bindings2]]);
       setTimeout(() => {
         try {
           for (const [groupBatch, bindings2] of groupSnapshots) {
@@ -289,7 +316,7 @@ function registerResetBinding(form, batch, reset) {
   };
 }
 
-// src/input/value_conversion.ts
+// src/html_element/value_conversion.ts
 function convertToInputValue(value, type) {
   if (value === void 0 || value === null) {
     return "";
@@ -344,10 +371,7 @@ function resolveResetStateValue(props, stateValue, parse) {
     if (props.value !== void 0) {
       return props.value;
     }
-    return convertToStateValue(
-      String(props.defaultValue ?? ""),
-      props.type
-    );
+    return convertToStateValue(String(props.defaultValue ?? ""), props.type);
   }
   if (props.type !== "file" && props.type !== "checkbox" && props.type !== "radio" && props.defaultValue !== void 0) {
     const defaultValue = Array.isArray(props.defaultValue) ? props.defaultValue.map(String) : String(props.defaultValue);
@@ -356,7 +380,7 @@ function resolveResetStateValue(props, stateValue, parse) {
   return stateValue;
 }
 
-// src/input/use_store_input.tsx
+// src/html_element/use_store_html_element.tsx
 function isDisplayValue(value) {
   return typeof value === "string" || typeof value === "number" || Array.isArray(value) && value.every((item) => typeof item === "string");
 }
@@ -372,20 +396,10 @@ function readControlValue(element, type, radioValue) {
   }
   return readElementValue(element);
 }
-function useStoreInput(ref, store, binding, options = {}) {
+function useStoreHTMLElement(ref, store, binding, options = {}) {
   const props = options;
   const getStateValue = binding.lens.get;
-  const setStoreValue = binding.lens.set;
-  const [meta, setMeta] = useState({ valid: true });
-  const metaRef = useRef2(meta);
-  const formatValue = useCallback2(
-    (value) => binding.codec.format(value),
-    [binding]
-  );
-  const parseValue = useCallback2(
-    (value) => binding.codec.parse(value),
-    [binding]
-  );
+  const formatValue = useCallback2((value) => binding.codec.format(value), [binding]);
   const toChecked = useCallback2(
     (value) => props.type === "radio" ? Object.is(formatValue(value), props.value) : Boolean(formatValue(value)),
     [formatValue, props.type, props.value]
@@ -394,35 +408,6 @@ function useStoreInput(ref, store, binding, options = {}) {
   const resetValueRef = useRef2(
     Object.prototype.hasOwnProperty.call(options, "resetValue") ? options.resetValue : initialStateValue
   );
-  const setStateValue = useCallback2(
-    (state, value) => {
-      const equals = binding.codec.equals ?? equalStateValue;
-      if (equals(getStateValue(store.state), value)) {
-        return;
-      }
-      setStoreValue(state, value);
-    },
-    [binding, getStateValue, setStoreValue, store]
-  );
-  const commitValue = useCallback2(
-    (state, controlValue) => {
-      const result = parseValue(controlValue);
-      if (result.isErr) {
-        const invalidMeta = {
-          valid: false,
-          error: result.error
-        };
-        metaRef.current = invalidMeta;
-        setMeta(invalidMeta);
-        return;
-      }
-      const validMeta = { valid: true };
-      metaRef.current = validMeta;
-      setMeta((current) => current.valid ? current : validMeta);
-      setStateValue(state, result.value);
-    },
-    [parseValue, setStateValue]
-  );
   const writeValue = useCallback2(
     (element, value) => {
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
@@ -439,26 +424,16 @@ function useStoreInput(ref, store, binding, options = {}) {
     },
     [formatValue, props.type, toChecked]
   );
-  const { dispatch } = useStoreController(store, {
-    onSubscribe: (state) => {
+  const { commit, meta, reset } = useStoreBinding(store, binding, {
+    onStoreChange: (_input, value) => {
       const element = ref.current;
-      if (!element || !metaRef.current.valid || element.form && isFormResetting(element.form) || props.type !== "radio" && props.value !== void 0) {
+      if (!element || element.form && isFormResetting(element.form) || props.type !== "radio" && props.value !== void 0) {
         return;
       }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio") && props.checked !== void 0) {
         return;
       }
-      writeValue(element, getStateValue(state));
-    },
-    onDispatch: (state) => {
-      const element = ref.current;
-      if (!element) {
-        return;
-      }
-      const controlValue = readControlValue(element, props.type, props.value);
-      if (controlValue !== void 0) {
-        commitValue(state, controlValue);
-      }
+      writeValue(element, value);
     }
   });
   useEffect2(() => {
@@ -474,36 +449,35 @@ function useStoreInput(ref, store, binding, options = {}) {
       const resetValue = resetValueRef.current;
       const writeResetValue = () => writeValue(element, resetValue);
       writeResetValue();
-      const validMeta = { valid: true };
-      metaRef.current = validMeta;
-      setMeta((current) => current.valid ? current : validMeta);
-      store.dispatch((state) => setStateValue(state, resetValue));
+      reset(resetValue);
       setTimeout(() => {
         if (element.isConnected) {
           writeResetValue();
         }
       }, 0);
     });
-  }, [ref, setStateValue, store, store.batch, writeValue]);
+  }, [ref, reset, store.batch, writeValue]);
   const inputProps = {
     defaultValue: resolveDefaultValue(props, initialStateValue, (value) => {
       const formatted = formatValue(value);
       return isDisplayValue(formatted) ? formatted : "";
     }),
-    defaultChecked: resolveDefaultChecked(
-      props,
-      initialStateValue,
-      toChecked
-    ),
+    defaultChecked: resolveDefaultChecked(props, initialStateValue, toChecked),
     onChange: (event) => {
-      dispatch();
+      const element = ref.current;
+      if (element) {
+        const controlValue = readControlValue(element, props.type, props.value);
+        if (controlValue !== void 0) {
+          commit(controlValue);
+        }
+      }
       props.onChange?.(event);
     }
   };
   return { inputProps, meta };
 }
 
-// src/input/use_store_input_with_name.tsx
+// src/html_element/use_store_input_with_name.tsx
 import { useMemo } from "react";
 import { ok } from "gw-result";
 function formatControlValue(value, type) {
@@ -544,7 +518,7 @@ function useStoreInputWithName(ref, store, props) {
     initialStateValue,
     (value) => parseControlValue(value, props.type)
   );
-  const { inputProps } = useStoreInput(ref, store, binding, {
+  const { inputProps } = useStoreHTMLElement(ref, store, binding, {
     ...props,
     resetValue
   });
@@ -554,7 +528,7 @@ function useStoreInputWithName(ref, store, props) {
   };
 }
 
-// src/form/store_components.tsx
+// src/input/store_input.tsx
 import {
   useCallback as useCallback3,
   useRef as useRef3
@@ -584,7 +558,7 @@ function Textarea({
   const storeProps = useStoreInputWithName(ref, store, props);
   return /* @__PURE__ */ jsx2("textarea", { ref, ...props, ...storeProps });
 }
-function useStoreComponent(store) {
+function useStoreInput(store) {
   const input = useCallback3(
     function Component(props) {
       return /* @__PURE__ */ jsx2(Input, { store, ...props });
@@ -606,26 +580,8 @@ function useStoreComponent(store) {
   return { input, select, textarea };
 }
 
-// src/form/use_form_store.tsx
-import { useStore } from "gw-store";
-function useFormStore(initialState) {
-  const store = useStore(initialState);
-  const storeComponent = useStoreComponent(store);
-  return {
-    get state() {
-      return store.state;
-    },
-    dispatch: store.dispatch,
-    batch: store.batch,
-    subscribe: store.subscribe,
-    render: createRenderWithStore(store),
-    ...storeComponent
-  };
-}
-
 // src/index.tsx
 import { err, ok as ok2 } from "gw-result";
-export * from "gw-store";
 export {
   Input,
   Select,
@@ -640,9 +596,8 @@ export {
   err,
   ok2 as ok,
   stateLens,
-  useFormStore,
-  useStoreComponent,
-  useStoreController,
+  useStoreBinding,
+  useStoreHTMLElement,
   useStoreInput,
   useStoreInputWithName
 };