react-store-input 0.1.0

package/dist/use_form_store.js

@@ -0,0 +1,294 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use_form_store.tsx
+var use_form_store_exports = {};
+__export(use_form_store_exports, {
+  useFormStore: () => useFormStore
+});
+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) {
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = store.subscribe(subscriber);
+    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;
+}
+
+// src/create_render.tsx
+var import_react3 = __toESM(require("react"));
+function createRender(store) {
+  return function createRender2(selector, compare) {
+    function Component() {
+      const result = useSelector(store, (state) => state, compare);
+      const content = selector(result);
+      return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, content);
+    }
+    return /* @__PURE__ */ import_react3.default.createElement(Component, null);
+  };
+}
+
+// src/use_store.tsx
+var import_react4 = require("react");
+var import_immer = require("immer");
+function useStore(initialState) {
+  const stateRef = (0, import_react4.useRef)(initialState);
+  const subscribers = (0, import_react4.useRef)([]);
+  const dispatch = (recipe, options = {}) => {
+    if (typeof recipe === "function") {
+      stateRef.current = (0, import_immer.produce)(stateRef.current, recipe);
+    } else {
+      stateRef.current = (0, import_immer.produce)(
+        stateRef.current,
+        (draft) => {
+          for (const key in recipe) {
+            draft[key] = recipe[key];
+          }
+        }
+      );
+    }
+    notify(options.key);
+  };
+  const subscribe = (subscriber) => {
+    subscribers.current.push(subscriber);
+    return () => {
+      const index = subscribers.current.indexOf(subscriber);
+      if (index !== -1) {
+        subscribers.current.splice(index, 1);
+      }
+    };
+  };
+  const notify = (key) => {
+    for (const listener of subscribers.current) {
+      listener(stateRef.current, key);
+    }
+  };
+  return {
+    get state() {
+      return stateRef.current;
+    },
+    dispatch,
+    subscribe
+  };
+}
+
+// src/use_store_input.tsx
+var import_react6 = require("react");
+var import_react7 = __toESM(require("react"));
+
+// src/use_store_input_props.tsx
+var import_react5 = require("react");
+var import_date_fns = require("date-fns");
+function useStoreInputProps(store, props) {
+  const toInputValue = (value) => {
+    if (value === void 0 || value === null) {
+      return "";
+    }
+    if (props.type === "datetime-local") {
+      if (value instanceof Date) {
+        return (0, import_date_fns.format)(value, "yyyy-MM-dd'T'HH:mm:ss");
+      }
+      if (typeof value === "string") {
+        return toInputValue(new Date(value));
+      }
+    }
+    return String(value);
+  };
+  const getDefaultValue = () => {
+    if (props.defaultValue !== void 0) {
+      return props.defaultValue;
+    }
+    if (props.type === "checkbox" || props.type === "radio") {
+      return void 0;
+    }
+    return toInputValue(store.state[props.name]);
+  };
+  const toInputChecked = (value) => {
+    if (props.type === "radio") {
+      return value !== void 0 && value === props.value;
+    }
+    return Boolean(value);
+  };
+  const getDefaultChecked = () => {
+    if (props.defaultChecked) {
+      return props.defaultChecked;
+    }
+    if (props.type !== "checkbox" && props.type !== "radio") {
+      return void 0;
+    }
+    return toInputChecked(store.state[props.name]);
+  };
+  function useSubscriptionRef() {
+    const ref2 = (0, import_react5.useRef)(null);
+    (0, import_react5.useEffect)(() => {
+      return store.subscribe((state, key) => {
+        if (key === dispatchKey) {
+          return;
+        }
+        const input = ref2.current;
+        if (!input) {
+          return;
+        }
+        if (props.type === "checkbox" || props.type === "radio") {
+          const checked = toInputChecked(state[props.name]);
+          if (input.checked === checked) {
+            return;
+          }
+          input.checked = checked;
+        } else {
+          const value = toInputValue(state[props.name]);
+          if (input.value === value) {
+            return;
+          }
+          input.value = value;
+        }
+        const event = new Event("input", { bubbles: true });
+        input.dispatchEvent(event);
+      });
+    }, []);
+    return ref2;
+  }
+  function toStateValue(value) {
+    if (typeof store.state[props.name] === "number") {
+      return Number(value);
+    }
+    if (store.state[props.name] instanceof Date) {
+      return new Date(value);
+    }
+    return value;
+  }
+  function createChangeEventHandler() {
+    return (e) => {
+      const target = e.target;
+      if (props.type === "checkbox") {
+        store.dispatch((state) => {
+          state[props.name] = target.checked;
+        }, {
+          key: dispatchKey
+        });
+      } else {
+        store.dispatch((state) => {
+          state[props.name] = toStateValue(target.value);
+        }, {
+          key: dispatchKey
+        });
+      }
+      props.onChange?.(e);
+    };
+  }
+  const dispatchKey = (0, import_react5.useId)();
+  const ref = useSubscriptionRef();
+  const name = String(props.name);
+  const defaultValue = getDefaultValue();
+  const defaultChecked = getDefaultChecked();
+  const onChange = createChangeEventHandler();
+  return {
+    key: dispatchKey,
+    ref,
+    name,
+    defaultValue,
+    defaultChecked,
+    onChange
+  };
+}
+
+// src/use_store_input.tsx
+function useStoreInput(store) {
+  const input = (0, import_react6.useCallback)(
+    function Component(props) {
+      return /* @__PURE__ */ import_react7.default.createElement(Input, { store, ...props });
+    },
+    []
+  );
+  const select = (0, import_react6.useCallback)(
+    function Component(props) {
+      return /* @__PURE__ */ import_react7.default.createElement(Select, { store, ...props });
+    },
+    []
+  );
+  const textarea = (0, import_react6.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react7.default.createElement(Textarea, { store, ...props });
+  }, []);
+  return {
+    input,
+    select,
+    textarea
+  };
+}
+function Input({ store, ...props }) {
+  const storeProps = useStoreInputProps(store, props);
+  return /* @__PURE__ */ import_react7.default.createElement("input", { ...props, ...storeProps });
+}
+function Select({ store, ...props }) {
+  const storeProps = useStoreInputProps(store, props);
+  return /* @__PURE__ */ import_react7.default.createElement("select", { ...props, ...storeProps });
+}
+function Textarea({ store, ...props }) {
+  const storeProps = useStoreInputProps(store, props);
+  return /* @__PURE__ */ import_react7.default.createElement("textarea", { ...props, ...storeProps });
+}
+
+// src/use_form_store.tsx
+function useFormStore(initialState) {
+  const store = useStore(initialState);
+  const storeInput = useStoreInput(store);
+  return {
+    get state() {
+      return store.state;
+    },
+    dispatch: store.dispatch,
+    subscribe: store.subscribe,
+    render: createRender(store),
+    ...storeInput
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useFormStore
+});

package/dist/use_form_store.mjs

@@ -0,0 +1,263 @@
+// src/use_selector.tsx
+import { useState } from "react";
+
+// src/use_subscribe.tsx
+import { useEffect } from "react";
+function useSubscribe(store, subscriber) {
+  useEffect(() => {
+    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/create_render.tsx
+import React from "react";
+function createRender(store) {
+  return function createRender2(selector, compare) {
+    function Component() {
+      const result = useSelector(store, (state) => state, compare);
+      const content = selector(result);
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, content);
+    }
+    return /* @__PURE__ */ React.createElement(Component, null);
+  };
+}
+
+// src/use_store.tsx
+import { useRef } from "react";
+import { produce } from "immer";
+function useStore(initialState) {
+  const stateRef = useRef(initialState);
+  const subscribers = useRef([]);
+  const dispatch = (recipe, options = {}) => {
+    if (typeof recipe === "function") {
+      stateRef.current = produce(stateRef.current, recipe);
+    } else {
+      stateRef.current = produce(
+        stateRef.current,
+        (draft) => {
+          for (const key in recipe) {
+            draft[key] = recipe[key];
+          }
+        }
+      );
+    }
+    notify(options.key);
+  };
+  const subscribe = (subscriber) => {
+    subscribers.current.push(subscriber);
+    return () => {
+      const index = subscribers.current.indexOf(subscriber);
+      if (index !== -1) {
+        subscribers.current.splice(index, 1);
+      }
+    };
+  };
+  const notify = (key) => {
+    for (const listener of subscribers.current) {
+      listener(stateRef.current, key);
+    }
+  };
+  return {
+    get state() {
+      return stateRef.current;
+    },
+    dispatch,
+    subscribe
+  };
+}
+
+// src/use_store_input.tsx
+import {
+  useCallback
+} from "react";
+import React2 from "react";
+
+// src/use_store_input_props.tsx
+import {
+  useEffect as useEffect2,
+  useId,
+  useRef as useRef2
+} from "react";
+import { format } from "date-fns";
+function useStoreInputProps(store, props) {
+  const toInputValue = (value) => {
+    if (value === void 0 || value === null) {
+      return "";
+    }
+    if (props.type === "datetime-local") {
+      if (value instanceof Date) {
+        return format(value, "yyyy-MM-dd'T'HH:mm:ss");
+      }
+      if (typeof value === "string") {
+        return toInputValue(new Date(value));
+      }
+    }
+    return String(value);
+  };
+  const getDefaultValue = () => {
+    if (props.defaultValue !== void 0) {
+      return props.defaultValue;
+    }
+    if (props.type === "checkbox" || props.type === "radio") {
+      return void 0;
+    }
+    return toInputValue(store.state[props.name]);
+  };
+  const toInputChecked = (value) => {
+    if (props.type === "radio") {
+      return value !== void 0 && value === props.value;
+    }
+    return Boolean(value);
+  };
+  const getDefaultChecked = () => {
+    if (props.defaultChecked) {
+      return props.defaultChecked;
+    }
+    if (props.type !== "checkbox" && props.type !== "radio") {
+      return void 0;
+    }
+    return toInputChecked(store.state[props.name]);
+  };
+  function useSubscriptionRef() {
+    const ref2 = useRef2(null);
+    useEffect2(() => {
+      return store.subscribe((state, key) => {
+        if (key === dispatchKey) {
+          return;
+        }
+        const input = ref2.current;
+        if (!input) {
+          return;
+        }
+        if (props.type === "checkbox" || props.type === "radio") {
+          const checked = toInputChecked(state[props.name]);
+          if (input.checked === checked) {
+            return;
+          }
+          input.checked = checked;
+        } else {
+          const value = toInputValue(state[props.name]);
+          if (input.value === value) {
+            return;
+          }
+          input.value = value;
+        }
+        const event = new Event("input", { bubbles: true });
+        input.dispatchEvent(event);
+      });
+    }, []);
+    return ref2;
+  }
+  function toStateValue(value) {
+    if (typeof store.state[props.name] === "number") {
+      return Number(value);
+    }
+    if (store.state[props.name] instanceof Date) {
+      return new Date(value);
+    }
+    return value;
+  }
+  function createChangeEventHandler() {
+    return (e) => {
+      const target = e.target;
+      if (props.type === "checkbox") {
+        store.dispatch((state) => {
+          state[props.name] = target.checked;
+        }, {
+          key: dispatchKey
+        });
+      } else {
+        store.dispatch((state) => {
+          state[props.name] = toStateValue(target.value);
+        }, {
+          key: dispatchKey
+        });
+      }
+      props.onChange?.(e);
+    };
+  }
+  const dispatchKey = useId();
+  const ref = useSubscriptionRef();
+  const name = String(props.name);
+  const defaultValue = getDefaultValue();
+  const defaultChecked = getDefaultChecked();
+  const onChange = createChangeEventHandler();
+  return {
+    key: dispatchKey,
+    ref,
+    name,
+    defaultValue,
+    defaultChecked,
+    onChange
+  };
+}
+
+// src/use_store_input.tsx
+function useStoreInput(store) {
+  const input = useCallback(
+    function Component(props) {
+      return /* @__PURE__ */ React2.createElement(Input, { store, ...props });
+    },
+    []
+  );
+  const select = useCallback(
+    function Component(props) {
+      return /* @__PURE__ */ React2.createElement(Select, { store, ...props });
+    },
+    []
+  );
+  const textarea = useCallback(function Component(props) {
+    return /* @__PURE__ */ React2.createElement(Textarea, { store, ...props });
+  }, []);
+  return {
+    input,
+    select,
+    textarea
+  };
+}
+function Input({ store, ...props }) {
+  const storeProps = useStoreInputProps(store, props);
+  return /* @__PURE__ */ React2.createElement("input", { ...props, ...storeProps });
+}
+function Select({ store, ...props }) {
+  const storeProps = useStoreInputProps(store, props);
+  return /* @__PURE__ */ React2.createElement("select", { ...props, ...storeProps });
+}
+function Textarea({ store, ...props }) {
+  const storeProps = useStoreInputProps(store, props);
+  return /* @__PURE__ */ React2.createElement("textarea", { ...props, ...storeProps });
+}
+
+// src/use_form_store.tsx
+function useFormStore(initialState) {
+  const store = useStore(initialState);
+  const storeInput = useStoreInput(store);
+  return {
+    get state() {
+      return store.state;
+    },
+    dispatch: store.dispatch,
+    subscribe: store.subscribe,
+    render: createRender(store),
+    ...storeInput
+  };
+}
+export {
+  useFormStore
+};

package/dist/use_selector.d.mts

@@ -0,0 +1,5 @@
+import { Store } from './use_store.mjs';
+
+declare function useSelector<TState, TSelected>(store: Store<TState>, selector: (state: TState) => TSelected, compare?: (a: TSelected, b: TSelected) => boolean): TSelected;
+
+export { useSelector };

package/dist/use_selector.d.ts

@@ -0,0 +1,5 @@
+import { Store } from './use_store.js';
+
+declare function useSelector<TState, TSelected>(store: Store<TState>, selector: (state: TState) => TSelected, compare?: (a: TSelected, b: TSelected) => boolean): TSelected;
+
+export { useSelector };

package/dist/use_selector.js

@@ -0,0 +1,54 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use_selector.tsx
+var use_selector_exports = {};
+__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) {
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = store.subscribe(subscriber);
+    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:
+0 && (module.exports = {
+  useSelector
+});

package/dist/use_selector.mjs

@@ -0,0 +1,29 @@
+// src/use_selector.tsx
+import { useState } from "react";
+
+// src/use_subscribe.tsx
+import { useEffect } from "react";
+function useSubscribe(store, subscriber) {
+  useEffect(() => {
+    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;
+}
+export {
+  useSelector
+};

package/dist/use_store.d.mts

@@ -0,0 +1,12 @@
+type Store<TState> = ReturnType<typeof useStore<TState>>;
+type DispatchOptions = {
+    key?: string;
+};
+type StoreSubscriber<TState> = (state: TState, key?: string) => void;
+declare function useStore<TState>(initialState: TState): {
+    readonly state: TState;
+    dispatch: (recipe: Partial<TState> | ((draft: TState) => void), options?: DispatchOptions) => void;
+    subscribe: (subscriber: StoreSubscriber<TState>) => () => void;
+};
+
+export { type Store, type StoreSubscriber, useStore };

package/dist/use_store.d.ts

@@ -0,0 +1,12 @@
+type Store<TState> = ReturnType<typeof useStore<TState>>;
+type DispatchOptions = {
+    key?: string;
+};
+type StoreSubscriber<TState> = (state: TState, key?: string) => void;
+declare function useStore<TState>(initialState: TState): {
+    readonly state: TState;
+    dispatch: (recipe: Partial<TState> | ((draft: TState) => void), options?: DispatchOptions) => void;
+    subscribe: (subscriber: StoreSubscriber<TState>) => () => void;
+};
+
+export { type Store, type StoreSubscriber, useStore };