wip: simple single field use complete

Author: craig-waite

fast-context-generic-extended/src/App.tsx

@@ -1,70 +1,24 @@
-import createFastContext from "./createFastContext";
-
-const { Provider, useStore } = createFastContext({
-  first: "",
-  last: "",
+import createFastContext from "./app/createFastContext";
+import MainPage from "./pages/MainPage";
+
+export const { 
+  FastContextProvider:AppFastContextProvider,
+  useFastContextField:useAppFastContextField,
+  useFastContextFields:useAppFastContextFields
+} = createFastContext({
+  first: "" as string,
+  last: "" as string,
 });
 
-const TextInput = ({ value }: { value: "first" | "last" }) => {
-  const [fieldValue, setStore] = useStore((store) => store[value]);
-  return (
-    <div className="field">
-      {value}:{" "}
-      <input
-        value={fieldValue}
-        onChange={(e) => setStore({ [value]: e.target.value })}
-      />
-    </div>
-  );
-};
-
-const Display = ({ value }: { value: "first" | "last" }) => {
-  const [fieldValue] = useStore((store) => store[value]);
-  return (
-    <div className="value">
-      {value}: {fieldValue}
-    </div>
-  );
-};
-
-const FormContainer = () => {
-  return (
-    <div className="container">
-      <h5>FormContainer</h5>
-      <TextInput value="first" />
-      <TextInput value="last" />
-    </div>
-  );
-};
-
-const DisplayContainer = () => {
-  return (
-    <div className="container">
-      <h5>DisplayContainer</h5>
-      <Display value="first" />
-      <Display value="last" />
-    </div>
-  );
-};
-
-const ContentContainer = () => {
-  return (
-    <div className="container">
-      <h5>ContentContainer</h5>
-      <FormContainer />
-      <DisplayContainer />
-    </div>
-  );
-};
-
 function App() {
+  console.log(`App Rendering`)
   return (
-    <Provider>
+    <AppFastContextProvider>
       <div className="container">
-        <h5>App</h5>
-        <ContentContainer />
+        <h1>App</h1>
+        <MainPage />
       </div>
-    </Provider>
+    </AppFastContextProvider>
   );
 }
 

fast-context-generic-extended/src/app/createFastContext.tsx

@@ -0,0 +1,87 @@
+import React, {
+  useRef,
+  createContext,
+  useContext,
+  useCallback,
+  useSyncExternalStore,
+} from "react";
+
+export default function createFastContext<FastContext>(initialState: FastContext) {
+  function useFastContextData(): {
+    get: () => FastContext;
+    set: (value: Partial<FastContext>) => void;
+    subscribe: (callback: () => void) => () => void;
+  } {
+    const store = useRef(initialState);
+
+    const get = useCallback(() => store.current, []);
+
+    const subscribers = useRef(new Set<() => void>());
+
+    const set = useCallback((value: Partial<FastContext>) => {
+      console.log('set', value);
+      store.current = { ...store.current, ...value };
+      subscribers.current.forEach((callback) => callback());
+    }, []);
+
+    const subscribe = useCallback((callback: () => void) => {
+      subscribers.current.add(callback);
+      return () => subscribers.current.delete(callback);
+    }, []);
+
+    return {
+      get,
+      set,
+      subscribe,
+    };
+  }
+
+  type UseFastContextDataReturnType = ReturnType<typeof useFastContextData>;
+
+  const FastContext = createContext<UseFastContextDataReturnType | null>(null);
+
+  function FastContextProvider({ children }: Readonly<{ children: React.ReactNode }>) {
+    return (
+      <FastContext.Provider value={useFastContextData()}>
+        {children}
+      </FastContext.Provider>
+    );
+  }
+
+  function useFastContext<SelectorOutput>(
+    selector: (store: FastContext) => SelectorOutput
+  ): [SelectorOutput, (value: Partial<FastContext>) => void] {
+    const fastContext = useContext(FastContext);
+    if (!fastContext) {
+      throw new Error("Store not found");
+    }
+
+    const state = useSyncExternalStore(
+      fastContext.subscribe,
+      () => selector(fastContext.get()),
+      () => selector(initialState),
+    );
+
+    return [state, fastContext.set];
+  }
+
+  function useFastContextField<SelectorOutput>(
+    field: string
+  ): [SelectorOutput, (value: SelectorOutput) => void]{
+    const [fieldValue, setter] = useFastContext((store) => (store as Record<string, SelectorOutput>)[field]);
+    const setField = (value: any) => setter({ [field]: value } as Partial<FastContext>);
+    return [fieldValue, setField as (value: SelectorOutput) => void];
+  }
+
+  function useFastContextFields<SelectorOutput>(
+    field: string[]
+  ): [SelectorOutput, (value: Partial<FastContext>) => void][] {
+    return [useFastContext((store) => (store as Record<string, SelectorOutput>)[field[0]])];
+  }
+
+  return {
+    FastContextProvider,
+    useFastContextField,
+    useFastContextFields,
+  };
+}

fast-context-generic-extended/src/components/ContentContainer.tsx

@@ -0,0 +1,13 @@
+import FormContainer from "./FormContainer";
+import DisplayContainer from "./DisplayContainer";
+
+export default function ContentContainer() {
+  console.log(`Content Rendering`)
+  return (
+    <div className="container">
+      <h3>ContentContainer</h3>
+      <FormContainer />
+      <DisplayContainer />
+    </div>
+  );
+};

fast-context-generic-extended/src/components/Display.tsx

@@ -0,0 +1,13 @@
+type Props = {
+  label?: string;
+  value: string;
+};
+export default function Display({label, value}: Readonly<Props>) {
+  console.log(`${label} display change`)
+  return (
+    <div className="value">
+      {label ? <label>{label} : </label> : null}
+      <input value={value} readOnly style={{backgroundColor: "#eee", cursor: 'auto', border: 0}}/>
+    </div>
+  );
+};

fast-context-generic-extended/src/components/DisplayContainer.tsx

@@ -0,0 +1,15 @@
+import { useAppFastContextField } from "../App";
+import Display from "./Display";
+
+export default function DisplayContainer() {
+  console.log(`Display Rendering`)
+  const [first] = useAppFastContextField('first');
+  const [last] = useAppFastContextField('last');
+  return (
+    <div className="container">
+      <h4>DisplayContainer</h4>
+        <Display label="First Name" value={first as string} />
+        <Display label="Last Name" value={last as string} />
+    </div>
+  );
+};

fast-context-generic-extended/src/components/FormContainer.tsx

@@ -0,0 +1,15 @@
+import { useAppFastContextField } from "../App";
+import TextInput from "./TextInput";
+
+export default function FormContainer() {
+  console.log(`Form Rendering`)
+  const [firstName, setFirstName] = useAppFastContextField("first");
+  const [lastName, setLastName] = useAppFastContextField("last");
+  return (
+    <div className="container">
+      <h4>FormContainer</h4>
+      <TextInput value={firstName as string} label='First Name' onChange={setFirstName}/>
+      <TextInput value={lastName as string} label='Last Name' onChange={setLastName} />
+    </div>
+  );
+};

fast-context-generic-extended/src/components/TextInput.tsx

@@ -0,0 +1,16 @@
+type Props = {
+  label?: string;
+  value: string;
+  onChange: (value: string) => void;
+};
+export default function TextInput( { label = '', value, onChange}: Readonly<Props> ) {
+  return (
+    <div className="field">
+      {label ? <label>{label} : </label> : null}
+      <input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  );
+};

fast-context-generic-extended/src/createFastContext.tsx

@@ -0,0 +1,12 @@
+import ContentContainer from "../components/ContentContainer";
+
+
+export default function MainPage() {
+  console.log(`Page Rendering`)
+  return (
+      <div className="container">
+        <h2>Page</h2>
+        <ContentContainer />
+      </div>
+  );
+}