react-store-input 0.2.4 → 0.2.6

package/dist/index.mjs

@@ -1,91 +1,18 @@
-// 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_selector.tsx
-import { useEffect, useRef as useRef2, useState } from "react";
-function useSelector(store, selector, compare = (a, b) => a === b) {
-  const [state, setState] = useState(selector(store.state));
-  const stateRef = useRef2(state);
-  useEffect(() => {
-    stateRef.current = state;
-  }, [state]);
+// src/use_store_controller.tsx
+import { useEffect, useId } from "react";
+function useStoreController(store, props) {
+  const dispatchKey = useId();
   useEffect(() => {
-    const unsubscribe = store.subscribe((newState) => {
-      const result = selector(newState);
-      if (compare(stateRef.current, result)) {
+    const unsub = store.subscribe((state, key) => {
+      if (key === dispatchKey) {
         return;
       }
-      setState(result);
+      props.onSubscribe(state);
     });
     return () => {
-      unsubscribe();
-    };
-  }, []);
-  return state;
-}
-
-// src/use_subscribe.tsx
-import { useEffect as useEffect2 } from "react";
-function useSubscribe(store, subscriber) {
-  useEffect2(() => {
-    const unsubscribe = store.subscribe(subscriber);
-    return () => {
-      unsubscribe();
+      unsub();
     };
   }, []);
-}
-
-// src/use_store_controller.tsx
-import { useId } from "react";
-function useStoreController(store, props) {
-  const dispatchKey = useId();
-  useSubscribe(store, (state, key) => {
-    if (key === dispatchKey) {
-      return;
-    }
-    props.onSubscribe(state);
-  });
   const dispatch = () => {
     store.dispatch(
       (state) => {
@@ -218,22 +145,106 @@ function useStoreInputWithName(ref, store, props) {
 }
 
 // src/use_store_component.tsx
-import { useCallback, useRef as useRef3 } from "react";
+import { useCallback, useRef as useRef2 } from "react";
+
+// src/text_editor.tsx
+import {
+  TextEditor as GwTextEditor
+} from "gw-react-text-editor";
+import { useImperativeHandle, useRef } from "react";
 import { jsx } 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__ */ jsx(
+    GwTextEditor,
+    {
+      ...props,
+      ref: controllerRef,
+      defaultValue: defaultValue ?? getDefaultValue(),
+      onChange: (e) => {
+        dispatch();
+        props.onChange?.(e);
+      }
+    }
+  );
+}
+
+// src/use_store_component.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 function useStoreComponent(store) {
   const input = useCallback(function Component(props) {
-    return /* @__PURE__ */ jsx(Input, { store, ...props });
+    return /* @__PURE__ */ jsx2(Input, { store, ...props });
   }, []);
   const select = useCallback(function Component(props) {
-    return /* @__PURE__ */ jsx(Select, { store, ...props });
+    return /* @__PURE__ */ jsx2(Select, { store, ...props });
   }, []);
   const textarea = useCallback(function Component(props) {
-    return /* @__PURE__ */ jsx(Textarea, { store, ...props });
+    return /* @__PURE__ */ jsx2(Textarea, { store, ...props });
+  }, []);
+  const textEditor = useCallback(function Component(props) {
+    return /* @__PURE__ */ jsx2(TextEditor, { store, ...props });
   }, []);
   return {
     input,
     select,
-    textarea
+    textarea,
+    textEditor
   };
 }
 function Input({
@@ -244,7 +255,7 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const ref = useRef3(null);
+  const ref = useRef2(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -252,7 +263,7 @@ function Input({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ jsx("input", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ jsx2("input", { ref, ...props, ...storeProps });
 }
 function Select({
   store,
@@ -262,7 +273,7 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const ref = useRef3(null);
+  const ref = useRef2(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -270,7 +281,7 @@ function Select({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ jsx("select", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ jsx2("select", { ref, ...props, ...storeProps });
 }
 function Textarea({
   store,
@@ -280,7 +291,7 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const ref = useRef3(null);
+  const ref = useRef2(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -288,23 +299,25 @@ function Textarea({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ jsx("textarea", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ jsx2("textarea", { ref, ...props, ...storeProps });
 }
 
 // src/create_render.tsx
-import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+import { useSelector } from "gw-store";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
 function createRenderWithStore(store) {
   return function createRender(selector, compare) {
     function Component() {
       const result = useSelector(store, (state) => state, compare);
       const content = selector(result);
-      return /* @__PURE__ */ jsx2(Fragment, { children: content });
+      return /* @__PURE__ */ jsx3(Fragment, { children: content });
     }
-    return /* @__PURE__ */ jsx2(Component, {});
+    return /* @__PURE__ */ jsx3(Component, {});
   };
 }
 
 // src/use_form_store.tsx
+import { useStore } from "gw-store";
 function useFormStore(initialState) {
   const store = useStore(initialState);
   const storeComponent = useStoreComponent(store);
@@ -318,16 +331,17 @@ function useFormStore(initialState) {
     ...storeComponent
   };
 }
+
+// src/index.tsx
+export * from "gw-store";
 export {
   Input,
   Select,
+  TextEditor,
   Textarea,
   useFormStore,
-  useSelector,
-  useStore,
   useStoreComponent,
   useStoreController,
   useStoreInput,
-  useStoreInputWithName,
-  useSubscribe
+  useStoreInputWithName
 };

package/dist/text_editor.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TextEditorProps as TextEditorProps$1 } from 'gw-react-text-editor';
+import { Store } from 'gw-store';
+
+type TextEditorProps<TState> = {
+    store: Store<TState>;
+    name?: keyof TState;
+    getter?: (state: TState) => string;
+    setter?: (state: TState, value: string) => void;
+} & TextEditorProps$1;
+declare function TextEditor<TState>({ store, name, getter, setter, defaultValue, ref, ...props }: TextEditorProps<TState>): react_jsx_runtime.JSX.Element;
+
+export { TextEditor, type TextEditorProps };

package/dist/text_editor.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TextEditorProps as TextEditorProps$1 } from 'gw-react-text-editor';
+import { Store } from 'gw-store';
+
+type TextEditorProps<TState> = {
+    store: Store<TState>;
+    name?: keyof TState;
+    getter?: (state: TState) => string;
+    setter?: (state: TState, value: string) => void;
+} & TextEditorProps$1;
+declare function TextEditor<TState>({ store, name, getter, setter, defaultValue, ref, ...props }: TextEditorProps<TState>): react_jsx_runtime.JSX.Element;
+
+export { TextEditor, type TextEditorProps };

package/dist/text_editor.js

@@ -0,0 +1,135 @@
+"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/text_editor.tsx
+var text_editor_exports = {};
+__export(text_editor_exports, {
+  TextEditor: () => TextEditor
+});
+module.exports = __toCommonJS(text_editor_exports);
+var import_gw_react_text_editor = require("gw-react-text-editor");
+var import_react2 = require("react");
+
+// src/use_store_controller.tsx
+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 () => {
+      unsub();
+    };
+  }, []);
+  const dispatch = () => {
+    store.dispatch(
+      (state) => {
+        props.onDispatch(state);
+      },
+      {
+        key: dispatchKey
+      }
+    );
+  };
+  return {
+    dispatch
+  };
+}
+
+// src/text_editor.tsx
+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,
+    []
+  );
+  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_runtime.jsx)(
+    import_gw_react_text_editor.TextEditor,
+    {
+      ...props,
+      ref: controllerRef,
+      defaultValue: defaultValue ?? getDefaultValue(),
+      onChange: (e) => {
+        dispatch();
+        props.onChange?.(e);
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextEditor
+});

package/dist/text_editor.mjs

@@ -0,0 +1,112 @@
+// src/text_editor.tsx
+import {
+  TextEditor as GwTextEditor
+} from "gw-react-text-editor";
+import { useImperativeHandle, useRef } from "react";
+
+// src/use_store_controller.tsx
+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 () => {
+      unsub();
+    };
+  }, []);
+  const dispatch = () => {
+    store.dispatch(
+      (state) => {
+        props.onDispatch(state);
+      },
+      {
+        key: dispatchKey
+      }
+    );
+  };
+  return {
+    dispatch
+  };
+}
+
+// src/text_editor.tsx
+import { jsx } 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__ */ jsx(
+    GwTextEditor,
+    {
+      ...props,
+      ref: controllerRef,
+      defaultValue: defaultValue ?? getDefaultValue(),
+      onChange: (e) => {
+        dispatch();
+        props.onChange?.(e);
+      }
+    }
+  );
+}
+export {
+  TextEditor
+};

package/dist/use_form_store.d.mts

@@ -1,10 +1,12 @@
 import { CreateRender } from './create_render.mjs';
-import { Store } from './use_store.mjs';
+import { Store } from 'gw-store';
 import { useStoreComponent } from './use_store_component.mjs';
 import 'react/jsx-runtime';
 import 'react';
 import './use_store_input_with_name.mjs';
 import './use_store_input.mjs';
+import './text_editor.mjs';
+import 'gw-react-text-editor';
 
 type FormStore<TState> = Store<TState> & ReturnType<typeof useStoreComponent<TState>> & {
     render: CreateRender<TState>;

package/dist/use_form_store.d.ts

@@ -1,10 +1,12 @@
 import { CreateRender } from './create_render.js';
-import { Store } from './use_store.js';
+import { Store } from 'gw-store';
 import { useStoreComponent } from './use_store_component.js';
 import 'react/jsx-runtime';
 import 'react';
 import './use_store_input_with_name.js';
 import './use_store_input.js';
+import './text_editor.js';
+import 'gw-react-text-editor';
 
 type FormStore<TState> = Store<TState> & ReturnType<typeof useStoreComponent<TState>> & {
     render: CreateRender<TState>;