rewrite useAsyncState and hook to use bitwise operators & renamings

.gitignore

@@ -4,6 +4,7 @@ build
 node_modules
 stats.json
 dist
+packages/example
 
 # Cruft
 .DS_Store

README.MD

@@ -121,7 +121,7 @@ runc({
 
 #### <ins>Dynamic creation and sharing of states at runtime</ins>
 Under the `AsyncStateProvider`, you can create and share state instances
-and access them by their `key` via the `hoistToProvider` option.
+and access them by their `key` via the `hoist` option.
 
 You can even start listening to a state before it gets hoisted to the provider,
 and get notified once it gets added.
@@ -140,12 +140,12 @@ variables. It just works in the core of the library. Of course, this requires
 you to be in an environment where `setTimeout` exists.
 
 ```tsx
-import {useAsyncState, ProducerRunEffects} from "react-async-states";
+import {useAsyncState, RunEffect} from "react-async-states";
 
 const {run} = useAsyncState({
   producer: userSearchByUsername,
   // debounce runs
-  runEffect: ProducerRunEffects.debounce,
+  runEffect: RunEffect.debounce,
   runEffectDurationMs: 300,
   // skip pending status if it answers less than 200ms
   skipPendingDelayMs: 200,
@@ -163,14 +163,14 @@ and `payload`.
 Let's add cache support to the previous example:
 
 ```tsx
-import {useAsyncState, ProducerRunEffects} from "react-async-states";
+import {useAsyncState, RunEffect} from "react-async-states";
 
 // note that the whole configuration object does not depend on render
 // and can be moved to module level static object.
 const {run} = useAsyncState({
   producer: userSearchByUsername,
   // debounce runs
-  runEffect: ProducerRunEffects.debounce,
+  runEffect: RunEffect.debounce,
   runEffectDurationMs: 300,
   // skip pending status if it answers less than 200ms
   skipPendingDelayMs: 200,

packages/devtools-extension/src/DevModeApp.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
-import {createSource, useSource} from "react-async-states";
+import {createSource, useSource, useSourceLane, useProducer, useSelector} from "react-async-states";
+import {State} from "react-async-states/src";
 
 
 
 let meter = 0;
 export default function DevModeApp() {
   const source = React.useMemo(() => createSource<number>("devmodeapp", null, {initialValue: 0}), []);
-  const {state} = useSource(source);
+  const state: State<number> = useSelector(source);
   return <button
-    onClick={() => source.run(old => old.data + 1)}>{state.data}</button>
+    onClick={() => source!.run(old => old.data + 1)}>{state.data}</button>
 }

packages/devtools-extension/src/DevtoolsView/CurrentJournalDisplay.tsx

@@ -13,23 +13,30 @@ const CurrentJournalDisplay = React.memo(function Journal({lane}: { lane: string
            display: 'flex',
            flexDirection: 'row',
            height: '100%',
-           padding: 0
+           padding: 0,
+           borderRadius: 8,
          }}>
       <div style={{
+        padding: 8,
         width: 250,
         minWidth: 250,
-        padding: 8,
         overflow: 'auto',
-        borderRight: '1px dashed #C3C3C3',
+        borderRadius: 8,
+        // backgroundColor: "red",
       }} className='main-bg'>
-        <div className=' scroll-y-auto' style={{height: '100%'}}>
-          <div className="main-color main-bg">
+        <div className=' scroll-y-auto' style={{
+          // padding: 8,
+          height: '100%'
+        }}>
+          <div style={{
+          }} className="main-color main-bg">
             <JournalView lane={lane}/>
           </div>
         </div>
       </div>
-      <div className='main-bg main-color scroll-y-auto'
+      <div className='main-bg-2 main-color scroll-y-auto'
            style={{
+             borderRadius: 8,
              height: '100%',
              overflowY: 'auto',
              width: '100%',
@@ -204,7 +211,9 @@ function CurrentJson() {
       <ReactJson name={json.data?.name}
                  theme="solarized"
                  style={{
+                   borderRadius: 8,
                    padding: '1rem',
+                   backgroundColor: "#252b36",
                    minHeight: 'calc(100% - 32px)'
                  }}
                  collapsed={2}

packages/devtools-extension/src/DevtoolsView/CurrentStateDisplay.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactJson from "react-json-view";
-import {AsyncStateStatus, useSource, useSourceLane} from "react-async-states";
+import {Status, useSource, useSourceLane} from "react-async-states";
 import {DevtoolsJournalEvent} from "react-async-states/dist/devtools";
 import {
   currentJournal,
@@ -50,21 +50,24 @@ function CurrentTreeDisplay() {
       </div>
       <div
         style={{
+          borderRadius: 8,
           height: 'calc(100% - 60px)',
           display: "flex",
         }}
+        className="main-bg-2"
       >
         <div
           style={{
-            borderRight: "1px dashed #C3C3C3",
+            padding: 8,
+            borderRadius: 8,
           }}
-          className="main-bg scroll-y-auto"
+          className="main-bg-2 scroll-y-auto"
         >
           <CurrentJsonDisplay lane={lane} mode="state"/>
         </div>
         <div
-          style={{flexGrow: 10, height: '100%'}}
-          className="main-bg"
+          style={{height: 'calc(100% - 16px)', padding: 8, borderRadius: 8}}
+          className="main-bg-2"
         >
           <CurrentJsonDisplay lane={lane} mode="journal"/>
         </div>
@@ -81,34 +84,34 @@ type SiderDisplayProps = {
   lanes?: string;
 };
 
-function getBackgroundColorFromStatus(status: AsyncStateStatus | undefined) {
+function getBackgroundColorFromStatus(status: Status | undefined) {
   switch (status) {
-    case AsyncStateStatus.error:
+    case Status.error:
       return "#EB6774";
-    case AsyncStateStatus.initial:
+    case Status.initial:
       return "#DEDEDE";
-    case AsyncStateStatus.aborted:
+    case Status.aborted:
       return "#787878";
-    case AsyncStateStatus.pending:
+    case Status.pending:
       return "#5B95DB";
-    case AsyncStateStatus.success:
+    case Status.success:
       return "#17A449";
     default:
       return undefined;
   }
 }
 
-function getColorFromStatus(status: AsyncStateStatus | undefined) {
+function getColorFromStatus(status: Status | undefined) {
   switch (status) {
-    case AsyncStateStatus.error:
+    case Status.error:
       return "white";
-    case AsyncStateStatus.initial:
+    case Status.initial:
       return "black";
-    case AsyncStateStatus.aborted:
+    case Status.aborted:
       return "white";
-    case AsyncStateStatus.pending:
+    case Status.pending:
       return "white";
-    case AsyncStateStatus.success:
+    case Status.success:
       return "white";
     default:
       return undefined;
@@ -132,7 +135,7 @@ export const SideKey = React.memo(function SiderKey({
     );
   }, [uniqueId, dev]);
 
-  const {state} = useSourceLane(journalSource, `${uniqueId}`);
+  const {state, devFlags, version, source} = useSourceLane(journalSource, `${uniqueId}`);
 
   const {status} = state.data?.state ?? {};
 
@@ -152,7 +155,7 @@ export const SideKey = React.memo(function SiderKey({
           currentJournal.setState(null);
           currentState.setState(`${uniqueId}`);
         }}
-        disabled={status === AsyncStateStatus.pending}
+        disabled={status === Status.pending}
       >
         <div
           style={{
@@ -198,7 +201,7 @@ export const SideKey = React.memo(function SiderKey({
           currentJournal.setState(null);
           currentState.setState(`${uniqueId}`);
         }}
-        disabled={status === AsyncStateStatus.pending}
+        disabled={status === Status.pending}
       >
         <div
           style={{
@@ -262,32 +265,43 @@ function StateView({lane}) {
     return <span>No state information</span>;
   }
   return (
-    <div style={{height: '100%'}} className="scroll-y-auto">
-      <ReactJson name={`${data.key}'s state`}
-                 style={{
-                   padding: "1rem",
-                   overflow: "auto"
-                 }}
-                 theme="solarized"
-                 collapsed={5}
-                 displayDataTypes={false}
-                 displayObjectSize={false}
-                 enableClipboard={false}
-                 src={addFormattedDate(data.state)}
-      />
-      <hr/>
-      <ReactJson name={data.key}
-                 style={{
-                   padding: "1rem",
-                   overflow: "auto"
-                 }}
-                 theme="solarized"
-                 collapsed={1}
-                 displayDataTypes={false}
-                 displayObjectSize={false}
-                 enableClipboard={false}
-                 src={displayAsyncState(data)}
-      />
+    <div style={{height: '100%'}}>
+      <div style={{display: "flex", gap: 8, height: '100%'}}>
+        <div style={{maxWidth: '60%', height: '100%'}} className="scroll-y-auto">
+          <ReactJson name={`${data.key}'s state`}
+                     style={{
+
+                       backgroundColor: "#252b36",
+                       borderRadius: 8,
+                       padding: "1rem",
+                       overflow: "auto"
+                     }}
+                     theme="solarized"
+                     collapsed={5}
+                     displayDataTypes={false}
+                     displayObjectSize={false}
+                     enableClipboard={false}
+                     src={addFormattedDate(data.state)}
+          />
+        </div>
+        <div style={{maxWidth: '60%', height: '100%'}} className="scroll-y-auto">
+          <ReactJson name={data.key}
+                     style={{
+                       backgroundColor: "#252b36",
+                       borderRadius: 8,
+                       padding: "1rem",
+                       overflow: "auto"
+                     }}
+                     theme="solarized"
+                     collapsed={1}
+                     displayDataTypes={false}
+                     displayObjectSize={false}
+                     enableClipboard={false}
+                     src={displayAsyncState(data)}
+          />
+        </div>
+
+      </div>
     </div>
   );
 }
@@ -387,7 +401,7 @@ function EditState({lane}) {
   const {dev} = React.useContext(DevtoolsContext);
   const [isJson, setIsJson] = React.useState(true);
   const [data, setData] = React.useState<string | null>("");
-  const [status, setStatus] = React.useState(AsyncStateStatus.success);
+  const [status, setStatus] = React.useState(Status.success);
   return (
     <>
       <button
@@ -462,18 +476,18 @@ function EditState({lane}) {
                 id="next-status"
                 value={status}
                 onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                  const value = e.target.value as AsyncStateStatus;
+                  const value = e.target.value as Status;
                   setStatus(value);
-                  if (value === AsyncStateStatus.pending) {
+                  if (value === Status.pending) {
                     setData(null);
                   }
                 }}
               >
-                {Object.values(AsyncStateStatus).map((t) => (
+                {Object.values(Status).map((t) => (
                   <option value={t}>{t}</option>
                 ))}
               </select>
-              {status !== AsyncStateStatus.pending && (
+              {status !== Status.pending && (
                 <section
                   style={{
                     padding: "4px 0px",
@@ -523,6 +537,8 @@ function EditState({lane}) {
                 <ReactJson
                   name="New state"
                   style={{
+                    backgroundColor: "#252b36",
+                    borderRadius: 8,
                     padding: "1rem",
                   }}
                   theme="solarized"