react-store-input 0.2.5 → 0.4.0

package/dist/index.js

@@ -15,340 +15,634 @@ 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
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   Input: () => Input,
   Select: () => Select,
-  TextEditor: () => TextEditor,
   Textarea: () => Textarea,
+  assertCodecLaws: () => assertCodecLaws,
+  assertLensLaws: () => assertLensLaws,
+  createRender: () => createRender,
+  createRenderWithStore: () => createRenderWithStore,
+  defineBinding: () => defineBinding,
+  defineCodec: () => defineCodec,
+  defineLens: () => defineLens,
+  err: () => import_gw_result2.err,
+  ok: () => import_gw_result2.ok,
+  stateLens: () => stateLens,
   useFormStore: () => useFormStore,
   useStoreComponent: () => useStoreComponent,
   useStoreController: () => useStoreController,
   useStoreInput: () => useStoreInput,
   useStoreInputWithName: () => useStoreInputWithName
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
-// src/use_store_controller.tsx
+// 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)(() => {
-    const unsub = store.subscribe((state, key) => {
-      if (key === dispatchKey) {
-        return;
+    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);
       }
-      props.onSubscribe(state);
     });
-    return () => {
-      unsub();
-    };
-  }, []);
-  const dispatch = () => {
+    if (isReplacement) {
+      propsRef.current.onSubscribe(store.state);
+    }
+    return unsubscribe;
+  }, [dispatchKey, store]);
+  const dispatch = (0, import_react.useCallback)(() => {
     store.dispatch(
-      (state) => {
-        props.onDispatch(state);
-      },
-      {
-        key: dispatchKey
-      }
+      (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");
+function createRender(store, selector, compare) {
+  function Component() {
+    const result = (0, import_gw_store.useSelector)(store, (state) => state, compare);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: selector(result) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {});
+}
+function createRenderWithStore(store) {
+  return function createRender2(selector, compare) {
+    function Component() {
+      const result = (0, import_gw_store.useSelector)(store, (state) => state, compare);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: selector(result) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {});
   };
+}
+
+// src/binding/lens.ts
+function defineLens(lens) {
+  return lens;
+}
+function readPath(value, path) {
+  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
+  );
+  parent[path.at(-1)] = value;
+}
+function createPathLens(path) {
+  return {
+    get: (state) => readPath(state, path),
+    set: (state, value) => writePath(state, path, value),
+    prop: (key) => createPathLens([...path, key])
+  };
+}
+function stateLens() {
   return {
-    dispatch
+    prop: (key) => createPathLens([key])
   };
 }
 
-// src/use_store_input.tsx
-var import_date_fns = require("date-fns");
-function useStoreInput(ref, store, props) {
-  const toInputValue = props.toInputValue || ((value) => {
-    if (value === void 0 || value === null) {
-      return "";
+// src/binding/codec.ts
+function defineCodec(codec) {
+  return codec;
+}
+
+// src/binding/binding.ts
+function defineBinding(binding) {
+  return binding;
+}
+
+// src/binding/laws.ts
+var import_immer = require("immer");
+function structuralEqual(previous, next) {
+  if (Object.is(previous, next)) {
+    return true;
+  }
+  if (previous instanceof Date && next instanceof Date) {
+    return previous.getTime() === next.getTime();
+  }
+  if (Array.isArray(previous) && Array.isArray(next)) {
+    return previous.length === next.length && previous.every((value, index) => structuralEqual(value, next[index]));
+  }
+  if (previous !== null && next !== null && typeof previous === "object" && typeof next === "object") {
+    const previousRecord = previous;
+    const nextRecord = next;
+    const previousKeys = Reflect.ownKeys(previousRecord);
+    const nextKeys = Reflect.ownKeys(nextRecord);
+    return previousKeys.length === nextKeys.length && previousKeys.every(
+      (key) => Object.prototype.hasOwnProperty.call(nextRecord, key) && structuralEqual(previousRecord[key], nextRecord[key])
+    );
+  }
+  return false;
+}
+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
+  )) {
+    throw new Error("Lens law failed: setting the current value changed state.");
+  }
+  for (const value of options.values) {
+    const updated = set(options.state, value);
+    if (!equalsValue(lens.get(updated), value)) {
+      throw new Error("Lens law failed: get(set(state, value)) !== value.");
     }
-    if (props.type === "datetime-local") {
-      const date = new Date(value);
-      if (!isNaN(date.getTime())) {
-        return (0, import_date_fns.format)(date, "yyyy-MM-dd'T'HH:mm:ss");
+  }
+  for (const previous of options.values) {
+    for (const next of options.values) {
+      if (!equalsState(
+        set(set(options.state, previous), next),
+        set(options.state, next)
+      )) {
+        throw new Error("Lens law failed: the last set did not win.");
       }
     }
-    return String(value);
-  });
-  const getDefaultValue = () => {
-    if (props.defaultValue !== void 0) {
-      return props.defaultValue;
+  }
+}
+function assertCodecLaws(codec, options) {
+  const equals = options.equals ?? codec.equals ?? structuralEqual;
+  const equalsInput = options.equalsInput ?? structuralEqual;
+  for (const value of options.values) {
+    const result = codec.parse(codec.format(value));
+    if (result.isErr) {
+      throw new Error("Codec law failed: parse(format(value)) returned Err.");
     }
-    if (props.type === "checkbox" || props.type === "radio") {
-      return void 0;
+    if (!equals(result.value, value)) {
+      throw new Error("Codec law failed: parse(format(value)) !== value.");
     }
-    return toInputValue(props.getter(store.state));
-  };
-  const toInputChecked = (value) => {
-    if (props.type === "radio") {
-      return value !== void 0 && value === props.value;
+  }
+  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."
+      );
     }
-    return Boolean(value);
-  };
-  const getDefaultChecked = () => {
-    if (props.defaultChecked) {
-      return props.defaultChecked;
+  }
+}
+
+// src/input/use_store_input.tsx
+var import_react2 = require("react");
+
+// src/input/dom_value.ts
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function formatDateTimeLocal(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  return [
+    date.getFullYear(),
+    "-",
+    pad(date.getMonth() + 1),
+    "-",
+    pad(date.getDate()),
+    "T",
+    pad(date.getHours()),
+    ":",
+    pad(date.getMinutes()),
+    ":",
+    pad(date.getSeconds())
+  ].join("");
+}
+function readElementValue(element) {
+  if ("options" in element && element.multiple) {
+    return Array.from(element.selectedOptions, (option) => option.value);
+  }
+  return element.value;
+}
+function writeElementValue(element, value) {
+  if ("files" in element && element.type === "file") {
+    return;
+  }
+  if ("options" in element && element.multiple) {
+    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) {
+        option.selected = selected;
+      }
     }
-    if (props.type !== "checkbox" && props.type !== "radio") {
-      return void 0;
+    return;
+  }
+  const nextValue = String(value);
+  if (element.value !== nextValue) {
+    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
+var resettingForms = /* @__PURE__ */ new WeakSet();
+var resetCoordinators = /* @__PURE__ */ new WeakMap();
+function isFormResetting(form) {
+  return resettingForms.has(form);
+}
+function registerResetBinding(form, batch, reset) {
+  let coordinator = resetCoordinators.get(form);
+  if (!coordinator) {
+    const groups = /* @__PURE__ */ new Map();
+    const handleReset = () => {
+      resettingForms.add(form);
+      const groupSnapshots = Array.from(groups, ([groupBatch, bindings2]) => [
+        groupBatch,
+        [...bindings2]
+      ]);
+      setTimeout(() => {
+        try {
+          for (const [groupBatch, bindings2] of groupSnapshots) {
+            groupBatch(() => {
+              for (const binding of bindings2) {
+                binding();
+              }
+            });
+          }
+        } finally {
+          setTimeout(() => resettingForms.delete(form), 0);
+        }
+      }, 0);
+    };
+    coordinator = { groups, handleReset };
+    resetCoordinators.set(form, coordinator);
+    form.addEventListener("reset", handleReset);
+  }
+  let bindings = coordinator.groups.get(batch);
+  if (!bindings) {
+    bindings = /* @__PURE__ */ new Set();
+    coordinator.groups.set(batch, bindings);
+  }
+  bindings.add(reset);
+  return () => {
+    const currentCoordinator = resetCoordinators.get(form);
+    if (!currentCoordinator) {
+      return;
     }
-    return toInputChecked(props.getter(store.state));
-  };
-  const toStateValue = props.toStateValue || ((value) => {
-    if (props.type === "number" || props.type === "range") {
-      return Number(value);
+    const currentBindings = currentCoordinator.groups.get(batch);
+    currentBindings?.delete(reset);
+    if (currentBindings?.size === 0) {
+      currentCoordinator.groups.delete(batch);
     }
-    if (props.type === "datetime-local") {
-      return new Date(value);
+    if (currentCoordinator.groups.size === 0) {
+      form.removeEventListener("reset", currentCoordinator.handleReset);
+      resetCoordinators.delete(form);
     }
+  };
+}
+
+// src/input/value_conversion.ts
+function convertToInputValue(value, type) {
+  if (value === void 0 || value === null) {
+    return "";
+  }
+  if (type === "datetime-local") {
+    return formatDateTimeLocal(value);
+  }
+  return Array.isArray(value) ? value.map(String) : String(value);
+}
+function convertToStateValue(value, type) {
+  if (Array.isArray(value)) {
     return value;
-  });
-  const inputProps = useStoreController(store, {
-    onSubscribe: (state) => {
-      const element = ref.current;
-      if (!element) {
+  }
+  if (type === "number" || type === "range") {
+    return value === "" ? void 0 : Number(value);
+  }
+  if (type === "datetime-local") {
+    if (value === "") {
+      return void 0;
+    }
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? void 0 : date;
+  }
+  return value;
+}
+function resolveDefaultValue(props, stateValue, format) {
+  if (props.type !== "radio" && props.value !== void 0) {
+    return void 0;
+  }
+  if (props.defaultValue !== void 0) {
+    return props.defaultValue;
+  }
+  if (props.type === "checkbox" || props.type === "radio" || props.type === "file") {
+    return void 0;
+  }
+  return format(stateValue);
+}
+function resolveDefaultChecked(props, stateValue, toChecked) {
+  if (props.checked !== void 0) {
+    return void 0;
+  }
+  if (props.defaultChecked !== void 0) {
+    return props.defaultChecked;
+  }
+  return props.type === "checkbox" || props.type === "radio" ? toChecked(stateValue) : void 0;
+}
+function resolveResetStateValue(props, stateValue, parse) {
+  if (props.type === "checkbox" && props.defaultChecked !== void 0) {
+    return props.defaultChecked;
+  }
+  if (props.type === "radio" && props.defaultChecked) {
+    if (props.value !== void 0) {
+      return props.value;
+    }
+    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);
+    return parse(defaultValue);
+  }
+  return stateValue;
+}
+
+// src/input/use_store_input.tsx
+function isDisplayValue(value) {
+  return typeof value === "string" || typeof value === "number" || Array.isArray(value) && value.every((item) => typeof item === "string");
+}
+function readControlValue(element, type, radioValue) {
+  if ("files" in element && type === "file") {
+    return element.files?.length ? element.files : null;
+  }
+  if ("checked" in element && type === "checkbox") {
+    return element.checked;
+  }
+  if ("checked" in element && type === "radio") {
+    return element.checked ? radioValue ?? element.value : void 0;
+  }
+  return readElementValue(element);
+}
+function useStoreInput(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 toChecked = (0, import_react2.useCallback)(
+    (value) => props.type === "radio" ? Object.is(formatValue(value), props.value) : Boolean(formatValue(value)),
+    [formatValue, props.type, props.value]
+  );
+  const initialStateValue = getStateValue(store.state);
+  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;
       }
-      if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
-        const checked = toInputChecked(props.getter(state));
-        if (element.checked === checked) {
-          return;
-        }
-        element.checked = checked;
-      } else {
-        const value = toInputValue(props.getter(state));
-        if (element.value === value) {
-          return;
-        }
-        element.value = value;
+      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 event = new Event("input", { bubbles: true });
-      element.dispatchEvent(event);
+      const validMeta = { valid: true };
+      metaRef.current = validMeta;
+      setMeta((current) => current.valid ? current : validMeta);
+      setStateValue(state, result.value);
     },
-    onDispatch: (state) => {
-      const element = ref.current;
-      if (!element) {
+    [parseValue, setStateValue]
+  );
+  const writeValue = (0, import_react2.useCallback)(
+    (element, value) => {
+      if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
+        element.checked = toChecked(value);
         return;
       }
-      if ("checked" in element && props.type === "checkbox") {
-        props.setter(state, element.checked);
-      } else {
-        props.setter(state, toStateValue(element.value));
+      if ("files" in element && props.type === "file") {
+        return;
       }
-    }
-  });
-  return {
-    defaultValue: getDefaultValue(),
-    defaultChecked: getDefaultChecked(),
-    onChange: (event) => {
-      inputProps.dispatch();
-      props.onChange?.(event);
-    }
-  };
-}
-
-// src/use_store_input_with_name.tsx
-function useStoreInputWithName(ref, store, props) {
-  const inputProps = useStoreInput(ref, store, {
-    ...props,
-    getter: (state) => {
-      if (props.getter) {
-        return props.getter(state);
+      const formatted = formatValue(value);
+      if (isDisplayValue(formatted)) {
+        writeElementValue(element, formatted);
       }
-      return state[props.name];
     },
-    setter: (state, value) => {
-      if (props.setter) {
-        props.setter(state, value);
-        return;
-      }
-      state[props.name] = value;
-    }
-  });
-  return {
-    ...inputProps,
-    name: "name" in props ? String(props.name) : void 0
-  };
-}
-
-// src/use_store_component.tsx
-var import_react3 = require("react");
-
-// src/text_editor.tsx
-var import_gw_react_text_editor = require("gw-react-text-editor");
-var import_react2 = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-function TextEditor({
-  store,
-  name,
-  getter,
-  setter,
-  defaultValue,
-  ref,
-  ...props
-}) {
-  const controllerRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(
-    ref,
-    () => controllerRef.current,
-    []
+    [formatValue, props.type, toChecked]
   );
   const { dispatch } = useStoreController(store, {
     onSubscribe: (state) => {
-      const controller = controllerRef.current;
-      if (!controller) {
+      const element = ref.current;
+      if (!element || !metaRef.current.valid || element.form && isFormResetting(element.form) || props.type !== "radio" && props.value !== void 0) {
         return;
       }
-      const getResult = () => {
-        if (getter) {
-          return getter(state) || "";
-        }
-        if (name) {
-          return state[name] || "";
-        }
-        return "";
-      };
-      const result = getResult();
-      if (controller.value !== result) {
-        controller.value = result;
+      if ("checked" in element && (props.type === "checkbox" || props.type === "radio") && props.checked !== void 0) {
+        return;
       }
+      writeValue(element, getStateValue(state));
     },
     onDispatch: (state) => {
-      const controller = controllerRef.current;
-      if (!controller) {
-        return;
-      }
-      if (setter) {
-        setter(state, controller.value);
+      const element = ref.current;
+      if (!element) {
         return;
       }
-      if (name) {
-        state[name] = controller.value;
+      const controlValue = readControlValue(element, props.type, props.value);
+      if (controlValue !== void 0) {
+        commitValue(state, controlValue);
       }
     }
   });
-  const getDefaultValue = () => {
-    if (getter) {
-      return getter(store.state);
-    }
-    if (name) {
-      return store.state[name];
+  (0, import_react2.useEffect)(() => {
+    const element = ref.current;
+    const form = element?.form;
+    if (!element || !form) {
+      return;
     }
-    return void 0;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_gw_react_text_editor.TextEditor,
-    {
-      ...props,
-      ref: controllerRef,
-      defaultValue: defaultValue ?? getDefaultValue(),
-      onChange: (e) => {
-        dispatch();
-        props.onChange?.(e);
+    return registerResetBinding(form, store.batch, () => {
+      if (!element.isConnected) {
+        return;
       }
+      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));
+      setTimeout(() => {
+        if (element.isConnected) {
+          writeResetValue();
+        }
+      }, 0);
+    });
+  }, [ref, setStateValue, store, store.batch, writeValue]);
+  const inputProps = {
+    defaultValue: resolveDefaultValue(props, initialStateValue, (value) => {
+      const formatted = formatValue(value);
+      return isDisplayValue(formatted) ? formatted : "";
+    }),
+    defaultChecked: resolveDefaultChecked(
+      props,
+      initialStateValue,
+      toChecked
+    ),
+    onChange: (event) => {
+      dispatch();
+      props.onChange?.(event);
     }
-  );
+  };
+  return { inputProps, meta };
 }
 
-// src/use_store_component.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function useStoreComponent(store) {
-  const input = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Input, { store, ...props });
-  }, []);
-  const select = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Select, { store, ...props });
-  }, []);
-  const textarea = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Textarea, { store, ...props });
-  }, []);
-  const textEditor = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextEditor, { store, ...props });
-  }, []);
+// src/input/use_store_input_with_name.tsx
+var import_react3 = require("react");
+var import_gw_result = require("gw-result");
+function formatControlValue(value, type) {
+  if (type === "checkbox") {
+    return Boolean(value);
+  }
+  if (type === "radio" || type === "file") {
+    return value;
+  }
+  return convertToInputValue(value, type);
+}
+function parseControlValue(value, type) {
+  if (typeof value === "string" || Array.isArray(value)) {
+    const stateInputValue = Array.isArray(value) ? [...value] : value;
+    return convertToStateValue(stateInputValue, type);
+  }
+  return value;
+}
+function useStoreInputWithName(ref, store, props) {
+  const binding = (0, import_react3.useMemo)(
+    () => ({
+      lens: {
+        get: (state) => state[props.name],
+        set: (state, value) => {
+          state[props.name] = value;
+        }
+      },
+      codec: {
+        format: (value) => formatControlValue(value, props.type),
+        parse: (value) => (0, import_gw_result.ok)(parseControlValue(value, props.type))
+      }
+    }),
+    [props.name, props.type]
+  );
+  const initialStateValue = binding.lens.get(store.state);
+  const resetValue = resolveResetStateValue(
+    props,
+    initialStateValue,
+    (value) => parseControlValue(value, props.type)
+  );
+  const { inputProps } = useStoreInput(ref, store, binding, {
+    ...props,
+    resetValue
+  });
   return {
-    input,
-    select,
-    textarea,
-    textEditor
+    ...inputProps,
+    name: String(props.name)
   };
 }
+
+// src/form/store_components.tsx
+var import_react4 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Input({
   store,
-  getter,
-  setter,
-  toInputValue,
-  toStateValue,
   ...props
 }) {
-  const ref = (0, import_react3.useRef)(null);
-  const storeProps = useStoreInputWithName(ref, store, {
-    ...props,
-    getter,
-    setter,
-    toInputValue,
-    toStateValue
-  });
+  const ref = (0, import_react4.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, props);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { ref, ...props, ...storeProps });
 }
 function Select({
   store,
-  getter,
-  setter,
-  toInputValue,
-  toStateValue,
   ...props
 }) {
-  const ref = (0, import_react3.useRef)(null);
-  const storeProps = useStoreInputWithName(ref, store, {
-    ...props,
-    getter,
-    setter,
-    toInputValue,
-    toStateValue
-  });
+  const ref = (0, import_react4.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, props);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("select", { ref, ...props, ...storeProps });
 }
 function Textarea({
   store,
-  getter,
-  setter,
-  toInputValue,
-  toStateValue,
   ...props
 }) {
-  const ref = (0, import_react3.useRef)(null);
-  const storeProps = useStoreInputWithName(ref, store, {
-    ...props,
-    getter,
-    setter,
-    toInputValue,
-    toStateValue
-  });
+  const ref = (0, import_react4.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, props);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("textarea", { ref, ...props, ...storeProps });
 }
-
-// src/create_render.tsx
-var import_gw_store = require("gw-store");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function createRenderWithStore(store) {
-  return function createRender(selector, compare) {
-    function Component() {
-      const result = (0, import_gw_store.useSelector)(store, (state) => state, compare);
-      const content = selector(result);
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: content });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, {});
-  };
+function useStoreComponent(store) {
+  const input = (0, import_react4.useCallback)(
+    function Component(props) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Input, { store, ...props });
+    },
+    [store]
+  );
+  const select = (0, import_react4.useCallback)(
+    function Component(props) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Select, { store, ...props });
+    },
+    [store]
+  );
+  const textarea = (0, import_react4.useCallback)(
+    function Component(props) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Textarea, { store, ...props });
+    },
+    [store]
+  );
+  return { input, select, textarea };
 }
 
-// src/use_form_store.tsx
+// src/form/use_form_store.tsx
 var import_gw_store2 = require("gw-store");
 function useFormStore(initialState) {
   const store = (0, import_gw_store2.useStore)(initialState);
@@ -358,20 +652,36 @@ function useFormStore(initialState) {
       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,
   Select,
-  TextEditor,
   Textarea,
+  assertCodecLaws,
+  assertLensLaws,
+  createRender,
+  createRenderWithStore,
+  defineBinding,
+  defineCodec,
+  defineLens,
+  err,
+  ok,
+  stateLens,
   useFormStore,
   useStoreComponent,
   useStoreController,
   useStoreInput,
-  useStoreInputWithName
+  useStoreInputWithName,
+  ...require("gw-store")
 });
+//# sourceMappingURL=index.js.map