react-store-input 0.4.0 → 0.5.0

package/dist/index.js

@@ -15,7 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
@@ -34,45 +33,13 @@ __export(src_exports, {
   err: () => import_gw_result2.err,
   ok: () => import_gw_result2.ok,
   stateLens: () => stateLens,
-  useFormStore: () => useFormStore,
-  useStoreComponent: () => useStoreComponent,
-  useStoreController: () => useStoreController,
+  useStoreBinding: () => useStoreBinding,
+  useStoreHTMLElement: () => useStoreHTMLElement,
   useStoreInput: () => useStoreInput,
   useStoreInputWithName: () => useStoreInputWithName
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/store/use_store_controller.tsx
-var import_react = require("react");
-function useStoreController(store, props) {
-  const dispatchKey = (0, import_react.useId)();
-  const propsRef = (0, import_react.useRef)(props);
-  const subscribedStoreRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    propsRef.current = props;
-  }, [props]);
-  (0, import_react.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 = (0, import_react.useCallback)(() => {
-    store.dispatch(
-      (state) => propsRef.current.onDispatch(state),
-      { key: dispatchKey }
-    );
-  }, [dispatchKey, store]);
-  return { dispatch };
-}
-
 // src/store/create_render.tsx
 var import_gw_store = require("gw-store");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -98,16 +65,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) {
@@ -160,10 +121,7 @@ function assertLensLaws(lens, options) {
   const equalsState = options.equalsState ?? structuralEqual;
   const equalsValue = options.equalsValue ?? structuralEqual;
   const set = (state, value) => (0, import_immer.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) {
@@ -174,10 +132,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.");
       }
     }
@@ -198,17 +153,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
+// src/binding/use_store_binding.tsx
+var import_react = require("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 = (0, import_react.useId)();
+  const [initialValue] = (0, import_react.useState)(() => binding.codec.format(binding.lens.get(store.state)));
+  const [meta, setMeta] = (0, import_react.useState)({ valid: true });
+  const metaRef = (0, import_react.useRef)(meta);
+  const optionsRef = (0, import_react.useRef)(options);
+  const subscribedStoreRef = (0, import_react.useRef)(null);
+  const subscribedBindingRef = (0, import_react.useRef)(binding);
+  (0, import_react.useEffect)(() => {
+    optionsRef.current = options;
+  }, [options]);
+  (0, import_react.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 = (0, import_react.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 = (0, import_react.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 = (0, import_react.useCallback)(
+    (value) => {
+      const validMeta = { valid: true };
+      metaRef.current = validMeta;
+      setMeta((current) => current.valid ? current : validMeta);
+      setValue(value);
+    },
+    [setValue]
+  );
+  return {
+    initialValue,
+    meta,
+    commit,
+    reset
+  };
+}
+
+// src/html_element/use_store_html_element.tsx
 var import_react2 = require("react");
 
-// src/input/dom_value.ts
+// src/html_element/dom_value.ts
 function pad(value) {
   return String(value).padStart(2, "0");
 }
@@ -242,9 +289,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) {
@@ -258,20 +303,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) {
@@ -283,10 +316,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) {
@@ -328,7 +358,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 "";
@@ -383,10 +413,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);
@@ -395,7 +422,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");
 }
@@ -411,20 +438,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] = (0, import_react2.useState)({ valid: true });
-  const metaRef = (0, import_react2.useRef)(meta);
-  const formatValue = (0, import_react2.useCallback)(
-    (value) => binding.codec.format(value),
-    [binding]
-  );
-  const parseValue = (0, import_react2.useCallback)(
-    (value) => binding.codec.parse(value),
-    [binding]
-  );
+  const formatValue = (0, import_react2.useCallback)((value) => binding.codec.format(value), [binding]);
   const toChecked = (0, import_react2.useCallback)(
     (value) => props.type === "radio" ? Object.is(formatValue(value), props.value) : Boolean(formatValue(value)),
     [formatValue, props.type, props.value]
@@ -433,35 +450,6 @@ function useStoreInput(ref, store, binding, options = {}) {
   const resetValueRef = (0, import_react2.useRef)(
     Object.prototype.hasOwnProperty.call(options, "resetValue") ? options.resetValue : initialStateValue
   );
-  const setStateValue = (0, import_react2.useCallback)(
-    (state, value) => {
-      const equals = binding.codec.equals ?? equalStateValue;
-      if (equals(getStateValue(store.state), value)) {
-        return;
-      }
-      setStoreValue(state, value);
-    },
-    [binding, getStateValue, setStoreValue, store]
-  );
-  const commitValue = (0, import_react2.useCallback)(
-    (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 = (0, import_react2.useCallback)(
     (element, value) => {
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
@@ -478,26 +466,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);
     }
   });
   (0, import_react2.useEffect)(() => {
@@ -513,36 +491,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
 var import_react3 = require("react");
 var import_gw_result = require("gw-result");
 function formatControlValue(value, type) {
@@ -583,7 +560,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
   });
@@ -593,7 +570,7 @@ function useStoreInputWithName(ref, store, props) {
   };
 }
 
-// src/form/store_components.tsx
+// src/input/store_input.tsx
 var import_react4 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Input({
@@ -620,7 +597,7 @@ function Textarea({
   const storeProps = useStoreInputWithName(ref, store, props);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("textarea", { ref, ...props, ...storeProps });
 }
-function useStoreComponent(store) {
+function useStoreInput(store) {
   const input = (0, import_react4.useCallback)(
     function Component(props) {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Input, { store, ...props });
@@ -642,26 +619,8 @@ function useStoreComponent(store) {
   return { input, select, textarea };
 }
 
-// src/form/use_form_store.tsx
-var import_gw_store2 = require("gw-store");
-function useFormStore(initialState) {
-  const store = (0, import_gw_store2.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
 var import_gw_result2 = require("gw-result");
-__reExport(src_exports, require("gw-store"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Input,
@@ -677,11 +636,9 @@ __reExport(src_exports, require("gw-store"), module.exports);
   err,
   ok,
   stateLens,
-  useFormStore,
-  useStoreComponent,
-  useStoreController,
+  useStoreBinding,
+  useStoreHTMLElement,
   useStoreInput,
-  useStoreInputWithName,
-  ...require("gw-store")
+  useStoreInputWithName
 });
 //# sourceMappingURL=index.js.map