react-store-input 0.2.4 → 0.2.5

package/dist/create_render.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Store } from 'gw-store';
 import { ReactNode } from 'react';
-import { Store } from './use_store.mjs';
 
 type CreateRender<TState> = (selector: (state: TState) => ReactNode, compare?: (a: TState, b: TState) => boolean) => ReactNode;
 declare function createRender<TState>(store: Store<TState>, selector: (state: TState) => ReactNode, compare?: (a: TState, b: TState) => boolean): react_jsx_runtime.JSX.Element;

package/dist/create_render.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Store } from 'gw-store';
 import { ReactNode } from 'react';
-import { Store } from './use_store.js';
 
 type CreateRender<TState> = (selector: (state: TState) => ReactNode, compare?: (a: TState, b: TState) => boolean) => ReactNode;
 declare function createRender<TState>(store: Store<TState>, selector: (state: TState) => ReactNode, compare?: (a: TState, b: TState) => boolean): react_jsx_runtime.JSX.Element;

package/dist/create_render.js

@@ -24,35 +24,11 @@ __export(create_render_exports, {
   createRenderWithStore: () => createRenderWithStore
 });
 module.exports = __toCommonJS(create_render_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 createRender(store, 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 });
   }
@@ -61,7 +37,7 @@ function createRender(store, selector, compare) {
 function createRenderWithStore(store) {
   return function createRender2(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 });
     }

package/dist/create_render.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 createRender(store, selector, compare) {
   function Component() {

package/dist/index.d.mts

@@ -1,11 +1,11 @@
-export { Store, StoreSubscriber, useStore } from './use_store.mjs';
-export { useSelector } from './use_selector.mjs';
-export { useSubscribe } from './use_subscribe.mjs';
 export { StoreControllerProps, useStoreController } from './use_store_controller.mjs';
 export { InferNameFromProps, StoreInputWithNameProps, useStoreInputWithName } from './use_store_input_with_name.mjs';
 export { StoreInputProps, useStoreInput } from './use_store_input.mjs';
 export { Input, Select, StoreComponentPropsWithStore, StoreInputWithNameComponentProps, Textarea, useStoreComponent } from './use_store_component.mjs';
 export { FormStore, useFormStore } from './use_form_store.mjs';
+export { TextEditor, TextEditorProps } from './text_editor.mjs';
+import 'gw-store';
 import 'react';
 import 'react/jsx-runtime';
 import './create_render.mjs';
+import 'gw-react-text-editor';

package/dist/index.d.ts

@@ -1,11 +1,11 @@
-export { Store, StoreSubscriber, useStore } from './use_store.js';
-export { useSelector } from './use_selector.js';
-export { useSubscribe } from './use_subscribe.js';
 export { StoreControllerProps, useStoreController } from './use_store_controller.js';
 export { InferNameFromProps, StoreInputWithNameProps, useStoreInputWithName } from './use_store_input_with_name.js';
 export { StoreInputProps, useStoreInput } from './use_store_input.js';
 export { Input, Select, StoreComponentPropsWithStore, StoreInputWithNameComponentProps, Textarea, useStoreComponent } from './use_store_component.js';
 export { FormStore, useFormStore } from './use_form_store.js';
+export { TextEditor, TextEditorProps } from './text_editor.js';
+import 'gw-store';
 import 'react';
 import 'react/jsx-runtime';
 import './create_render.js';
+import 'gw-react-text-editor';

package/dist/index.js

@@ -22,106 +22,31 @@ var index_exports = {};
 __export(index_exports, {
   Input: () => Input,
   Select: () => Select,
+  TextEditor: () => TextEditor,
   Textarea: () => Textarea,
   useFormStore: () => useFormStore,
-  useSelector: () => useSelector,
-  useStore: () => useStore,
   useStoreComponent: () => useStoreComponent,
   useStoreController: () => useStoreController,
   useStoreInput: () => useStoreInput,
-  useStoreInputWithName: () => useStoreInputWithName,
-  useSubscribe: () => useSubscribe
+  useStoreInputWithName: () => useStoreInputWithName
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/use_store.tsx
+// src/use_store_controller.tsx
 var import_react = require("react");
-var import_immer = require("immer");
-function useStore(initialState) {
-  const stateRef = (0, import_react.useRef)(initialState);
-  const subscribers = (0, import_react.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_selector.tsx
-var import_react2 = require("react");
-function useSelector(store, selector, compare = (a, b) => a === b) {
-  const [state, setState] = (0, import_react2.useState)(selector(store.state));
-  const stateRef = (0, import_react2.useRef)(state);
-  (0, import_react2.useEffect)(() => {
-    stateRef.current = state;
-  }, [state]);
-  (0, import_react2.useEffect)(() => {
-    const unsubscribe = store.subscribe((newState) => {
-      const result = selector(newState);
-      if (compare(stateRef.current, result)) {
+function useStoreController(store, props) {
+  const dispatchKey = (0, import_react.useId)();
+  (0, import_react.useEffect)(() => {
+    const unsub = store.subscribe((state, key) => {
+      if (key === dispatchKey) {
         return;
       }
-      setState(result);
+      props.onSubscribe(state);
     });
     return () => {
-      unsubscribe();
-    };
-  }, []);
-  return state;
-}
-
-// src/use_subscribe.tsx
-var import_react3 = require("react");
-function useSubscribe(store, subscriber) {
-  (0, import_react3.useEffect)(() => {
-    const unsubscribe = store.subscribe(subscriber);
-    return () => {
-      unsubscribe();
+      unsub();
     };
   }, []);
-}
-
-// src/use_store_controller.tsx
-var import_react4 = require("react");
-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) => {
@@ -254,22 +179,104 @@ function useStoreInputWithName(ref, store, props) {
 }
 
 // src/use_store_component.tsx
-var import_react5 = require("react");
+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,
+    []
+  );
+  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);
+      }
+    }
+  );
+}
+
+// src/use_store_component.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function useStoreComponent(store) {
-  const input = (0, import_react5.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, { store, ...props });
+  const input = (0, import_react3.useCallback)(function Component(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Input, { store, ...props });
   }, []);
-  const select = (0, import_react5.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select, { 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_react5.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Textarea, { 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 });
   }, []);
   return {
     input,
     select,
-    textarea
+    textarea,
+    textEditor
   };
 }
 function Input({
@@ -280,7 +287,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,
@@ -288,7 +295,7 @@ function Input({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { ref, ...props, ...storeProps });
 }
 function Select({
   store,
@@ -298,7 +305,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,
@@ -306,7 +313,7 @@ function Select({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("select", { ref, ...props, ...storeProps });
 }
 function Textarea({
   store,
@@ -316,7 +323,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,
@@ -324,25 +331,27 @@ function Textarea({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("textarea", { ref, ...props, ...storeProps });
 }
 
 // src/create_render.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+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 = 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_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: content });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: content });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, {});
   };
 }
 
 // src/use_form_store.tsx
+var import_gw_store2 = require("gw-store");
 function useFormStore(initialState) {
-  const store = useStore(initialState);
+  const store = (0, import_gw_store2.useStore)(initialState);
   const storeComponent = useStoreComponent(store);
   return {
     get state() {
@@ -358,13 +367,11 @@ function useFormStore(initialState) {
 0 && (module.exports = {
   Input,
   Select,
+  TextEditor,
   Textarea,
   useFormStore,
-  useSelector,
-  useStore,
   useStoreComponent,
   useStoreController,
   useStoreInput,
-  useStoreInputWithName,
-  useSubscribe
+  useStoreInputWithName
 });