react-store-input 0.2.4 → 0.2.6

package/dist/use_form_store.js

@@ -24,35 +24,13 @@ __export(use_form_store_exports, {
 });
 module.exports = __toCommonJS(use_form_store_exports);
 
-// src/use_selector.tsx
-var import_react = require("react");
-function useSelector(store, selector, compare = (a, b) => a === b) {
-  const [state, setState] = (0, import_react.useState)(selector(store.state));
-  const stateRef = (0, import_react.useRef)(state);
-  (0, import_react.useEffect)(() => {
-    stateRef.current = state;
-  }, [state]);
-  (0, import_react.useEffect)(() => {
-    const unsubscribe = store.subscribe((newState) => {
-      const result = selector(newState);
-      if (compare(stateRef.current, result)) {
-        return;
-      }
-      setState(result);
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-  return state;
-}
-
 // src/create_render.tsx
+var import_gw_store = require("gw-store");
 var import_jsx_runtime = require("react/jsx-runtime");
 function createRenderWithStore(store) {
   return function createRender(selector, compare) {
     function Component() {
-      const result = useSelector(store, (state) => state, compare);
+      const result = (0, import_gw_store.useSelector)(store, (state) => state, compare);
       const content = selector(result);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: content });
     }
@@ -60,79 +38,30 @@ function createRenderWithStore(store) {
   };
 }
 
-// src/use_store.tsx
-var import_react2 = require("react");
-var import_immer = require("immer");
-function useStore(initialState) {
-  const stateRef = (0, import_react2.useRef)(initialState);
-  const subscribers = (0, import_react2.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_form_store.tsx
+var import_gw_store2 = require("gw-store");
 
 // src/use_store_component.tsx
-var import_react5 = require("react");
+var import_react3 = require("react");
 
 // src/use_store_input.tsx
 var import_date_fns = require("date-fns");
 
 // src/use_store_controller.tsx
-var import_react4 = require("react");
-
-// src/use_subscribe.tsx
-var import_react3 = require("react");
-function useSubscribe(store, subscriber) {
-  (0, import_react3.useEffect)(() => {
-    const unsubscribe = store.subscribe(subscriber);
+var import_react = require("react");
+function useStoreController(store, props) {
+  const dispatchKey = (0, import_react.useId)();
+  (0, import_react.useEffect)(() => {
+    const unsub = store.subscribe((state, key) => {
+      if (key === dispatchKey) {
+        return;
+      }
+      props.onSubscribe(state);
+    });
     return () => {
-      unsubscribe();
+      unsub();
     };
   }, []);
-}
-
-// src/use_store_controller.tsx
-function useStoreController(store, props) {
-  const dispatchKey = (0, import_react4.useId)();
-  useSubscribe(store, (state, key) => {
-    if (key === dispatchKey) {
-      return;
-    }
-    props.onSubscribe(state);
-  });
   const dispatch = () => {
     store.dispatch(
       (state) => {
@@ -263,22 +192,102 @@ function useStoreInputWithName(ref, store, props) {
   };
 }
 
-// src/use_store_component.tsx
+// src/text_editor.tsx
+var import_gw_react_text_editor = require("gw-react-text-editor");
+var import_react2 = require("react");
 var import_jsx_runtime2 = 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,
+    []
+  );
+  const { dispatch } = useStoreController(store, {
+    onSubscribe: (state) => {
+      const controller = controllerRef.current;
+      if (!controller) {
+        return;
+      }
+      const getResult = () => {
+        if (getter) {
+          return getter(state) || "";
+        }
+        if (name) {
+          return state[name] || "";
+        }
+        return "";
+      };
+      const result = getResult();
+      if (controller.value !== result) {
+        controller.value = result;
+      }
+    },
+    onDispatch: (state) => {
+      const controller = controllerRef.current;
+      if (!controller) {
+        return;
+      }
+      if (setter) {
+        setter(state, controller.value);
+        return;
+      }
+      if (name) {
+        state[name] = controller.value;
+      }
+    }
+  });
+  const getDefaultValue = () => {
+    if (getter) {
+      return getter(store.state);
+    }
+    if (name) {
+      return store.state[name];
+    }
+    return void 0;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_gw_react_text_editor.TextEditor,
+    {
+      ...props,
+      ref: controllerRef,
+      defaultValue: defaultValue ?? getDefaultValue(),
+      onChange: (e) => {
+        dispatch();
+        props.onChange?.(e);
+      }
+    }
+  );
+}
+
+// src/use_store_component.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function useStoreComponent(store) {
-  const input = (0, import_react5.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Input, { store, ...props });
+  const input = (0, import_react3.useCallback)(function Component(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, { store, ...props });
+  }, []);
+  const select = (0, import_react3.useCallback)(function Component(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Select, { store, ...props });
   }, []);
-  const select = (0, import_react5.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_runtime3.jsx)(Textarea, { store, ...props });
   }, []);
-  const textarea = (0, import_react5.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_runtime3.jsx)(TextEditor, { store, ...props });
   }, []);
   return {
     input,
     select,
-    textarea
+    textarea,
+    textEditor
   };
 }
 function Input({
@@ -289,7 +298,7 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const ref = (0, import_react5.useRef)(null);
+  const ref = (0, import_react3.useRef)(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -297,7 +306,7 @@ function Input({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { ref, ...props, ...storeProps });
 }
 function Select({
   store,
@@ -307,7 +316,7 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const ref = (0, import_react5.useRef)(null);
+  const ref = (0, import_react3.useRef)(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -315,7 +324,7 @@ function Select({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("select", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("select", { ref, ...props, ...storeProps });
 }
 function Textarea({
   store,
@@ -325,7 +334,7 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const ref = (0, import_react5.useRef)(null);
+  const ref = (0, import_react3.useRef)(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -333,12 +342,12 @@ function Textarea({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("textarea", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("textarea", { ref, ...props, ...storeProps });
 }
 
 // src/use_form_store.tsx
 function useFormStore(initialState) {
-  const store = useStore(initialState);
+  const store = (0, import_gw_store2.useStore)(initialState);
   const storeComponent = useStoreComponent(store);
   return {
     get state() {

package/dist/use_form_store.mjs

@@ -1,27 +1,5 @@
-// src/use_selector.tsx
-import { useEffect, useRef, useState } from "react";
-function useSelector(store, selector, compare = (a, b) => a === b) {
-  const [state, setState] = useState(selector(store.state));
-  const stateRef = useRef(state);
-  useEffect(() => {
-    stateRef.current = state;
-  }, [state]);
-  useEffect(() => {
-    const unsubscribe = store.subscribe((newState) => {
-      const result = selector(newState);
-      if (compare(stateRef.current, result)) {
-        return;
-      }
-      setState(result);
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-  return state;
-}
-
 // src/create_render.tsx
+import { useSelector } from "gw-store";
 import { Fragment, jsx } from "react/jsx-runtime";
 function createRenderWithStore(store) {
   return function createRender(selector, compare) {
@@ -34,79 +12,30 @@ function createRenderWithStore(store) {
   };
 }
 
-// src/use_store.tsx
-import { useRef as useRef2 } from "react";
-import { produce } from "immer";
-function useStore(initialState) {
-  const stateRef = useRef2(initialState);
-  const subscribers = useRef2([]);
-  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_form_store.tsx
+import { useStore } from "gw-store";
 
 // src/use_store_component.tsx
-import { useCallback, useRef as useRef3 } from "react";
+import { useCallback, useRef as useRef2 } from "react";
 
 // src/use_store_input.tsx
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useId } from "react";
-
-// src/use_subscribe.tsx
-import { useEffect as useEffect2 } from "react";
-function useSubscribe(store, subscriber) {
-  useEffect2(() => {
-    const unsubscribe = store.subscribe(subscriber);
+import { useEffect, useId } from "react";
+function useStoreController(store, props) {
+  const dispatchKey = useId();
+  useEffect(() => {
+    const unsub = store.subscribe((state, key) => {
+      if (key === dispatchKey) {
+        return;
+      }
+      props.onSubscribe(state);
+    });
     return () => {
-      unsubscribe();
+      unsub();
     };
   }, []);
-}
-
-// src/use_store_controller.tsx
-function useStoreController(store, props) {
-  const dispatchKey = useId();
-  useSubscribe(store, (state, key) => {
-    if (key === dispatchKey) {
-      return;
-    }
-    props.onSubscribe(state);
-  });
   const dispatch = () => {
     store.dispatch(
       (state) => {
@@ -237,22 +166,104 @@ function useStoreInputWithName(ref, store, props) {
   };
 }
 
-// src/use_store_component.tsx
+// src/text_editor.tsx
+import {
+  TextEditor as GwTextEditor
+} from "gw-react-text-editor";
+import { useImperativeHandle, useRef } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
+function TextEditor({
+  store,
+  name,
+  getter,
+  setter,
+  defaultValue,
+  ref,
+  ...props
+}) {
+  const controllerRef = useRef(null);
+  useImperativeHandle(
+    ref,
+    () => controllerRef.current,
+    []
+  );
+  const { dispatch } = useStoreController(store, {
+    onSubscribe: (state) => {
+      const controller = controllerRef.current;
+      if (!controller) {
+        return;
+      }
+      const getResult = () => {
+        if (getter) {
+          return getter(state) || "";
+        }
+        if (name) {
+          return state[name] || "";
+        }
+        return "";
+      };
+      const result = getResult();
+      if (controller.value !== result) {
+        controller.value = result;
+      }
+    },
+    onDispatch: (state) => {
+      const controller = controllerRef.current;
+      if (!controller) {
+        return;
+      }
+      if (setter) {
+        setter(state, controller.value);
+        return;
+      }
+      if (name) {
+        state[name] = controller.value;
+      }
+    }
+  });
+  const getDefaultValue = () => {
+    if (getter) {
+      return getter(store.state);
+    }
+    if (name) {
+      return store.state[name];
+    }
+    return void 0;
+  };
+  return /* @__PURE__ */ jsx2(
+    GwTextEditor,
+    {
+      ...props,
+      ref: controllerRef,
+      defaultValue: defaultValue ?? getDefaultValue(),
+      onChange: (e) => {
+        dispatch();
+        props.onChange?.(e);
+      }
+    }
+  );
+}
+
+// src/use_store_component.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
 function useStoreComponent(store) {
   const input = useCallback(function Component(props) {
-    return /* @__PURE__ */ jsx2(Input, { store, ...props });
+    return /* @__PURE__ */ jsx3(Input, { store, ...props });
   }, []);
   const select = useCallback(function Component(props) {
-    return /* @__PURE__ */ jsx2(Select, { store, ...props });
+    return /* @__PURE__ */ jsx3(Select, { store, ...props });
   }, []);
   const textarea = useCallback(function Component(props) {
-    return /* @__PURE__ */ jsx2(Textarea, { store, ...props });
+    return /* @__PURE__ */ jsx3(Textarea, { store, ...props });
+  }, []);
+  const textEditor = useCallback(function Component(props) {
+    return /* @__PURE__ */ jsx3(TextEditor, { store, ...props });
   }, []);
   return {
     input,
     select,
-    textarea
+    textarea,
+    textEditor
   };
 }
 function Input({
@@ -263,7 +274,7 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const ref = useRef3(null);
+  const ref = useRef2(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -271,7 +282,7 @@ function Input({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ jsx2("input", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ jsx3("input", { ref, ...props, ...storeProps });
 }
 function Select({
   store,
@@ -281,7 +292,7 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const ref = useRef3(null);
+  const ref = useRef2(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -289,7 +300,7 @@ function Select({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ jsx2("select", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ jsx3("select", { ref, ...props, ...storeProps });
 }
 function Textarea({
   store,
@@ -299,7 +310,7 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const ref = useRef3(null);
+  const ref = useRef2(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -307,7 +318,7 @@ function Textarea({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ jsx2("textarea", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ jsx3("textarea", { ref, ...props, ...storeProps });
 }
 
 // src/use_form_store.tsx

package/dist/use_store_component.d.mts

@@ -1,14 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DetailedHTMLProps } from 'react';
-import { Store } from './use_store.mjs';
+import { Store } from 'gw-store';
 import { StoreInputWithNameProps } from './use_store_input_with_name.mjs';
+import { TextEditorProps } from './text_editor.mjs';
 import './use_store_input.mjs';
+import 'gw-react-text-editor';
 
 type StoreInputWithNameComponentProps<TElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameProps<TElement, TState, TName, TValue> & Omit<DetailedHTMLProps<React.InputHTMLAttributes<TElement>, TElement>, keyof StoreInputWithNameProps<TElement, TState, TName, TValue>>;
 declare function useStoreComponent<TState>(store: Store<TState>): {
     input: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLInputElement, TState, TName, TValue>) => react_jsx_runtime.JSX.Element;
     select: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLSelectElement, TState, TName, TValue>) => react_jsx_runtime.JSX.Element;
     textarea: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLTextAreaElement, TState, TName, TValue>) => react_jsx_runtime.JSX.Element;
+    textEditor: (props: Omit<TextEditorProps<TState>, "store">) => react_jsx_runtime.JSX.Element;
 };
 type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameComponentProps<TElement, TState, TName, TValue> & {
     store: Store<TState>;

package/dist/use_store_component.d.ts

@@ -1,14 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DetailedHTMLProps } from 'react';
-import { Store } from './use_store.js';
+import { Store } from 'gw-store';
 import { StoreInputWithNameProps } from './use_store_input_with_name.js';
+import { TextEditorProps } from './text_editor.js';
 import './use_store_input.js';
+import 'gw-react-text-editor';
 
 type StoreInputWithNameComponentProps<TElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameProps<TElement, TState, TName, TValue> & Omit<DetailedHTMLProps<React.InputHTMLAttributes<TElement>, TElement>, keyof StoreInputWithNameProps<TElement, TState, TName, TValue>>;
 declare function useStoreComponent<TState>(store: Store<TState>): {
     input: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLInputElement, TState, TName, TValue>) => react_jsx_runtime.JSX.Element;
     select: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLSelectElement, TState, TName, TValue>) => react_jsx_runtime.JSX.Element;
     textarea: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLTextAreaElement, TState, TName, TValue>) => react_jsx_runtime.JSX.Element;
+    textEditor: (props: Omit<TextEditorProps<TState>, "store">) => react_jsx_runtime.JSX.Element;
 };
 type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameComponentProps<TElement, TState, TName, TValue> & {
     store: Store<TState>;