Dev

packages/devtools-extension/src/DevModeApp.tsx

@@ -7,15 +7,16 @@ import {
   useProducer,
   useSelector
 } from "react-async-states";
-import type {State} from "react-async-states";
 
-createSource<number>("test-1", null, {initialValue: 0}).getLaneSource("test-1-lane")
 createSource<number>("test-2", null, {initialValue: 0})
+createSource<number>("test-1", null, {initialValue: 0})
+  .getLaneSource("test-1-lane")
+  .getLaneSource("test-1-lane-lane-nested");
 
 
 function DevModeApp({alias}) {
   const source = React.useMemo(() => createSource<number>(alias, null, {initialValue: 0}), []);
-  const {state} = useSourceLane(source);
+  const {state} = useSourceLane(source, `${alias}-lane`);
   return <button
     onClick={() => source.run(old => old.data + 1)}>{alias} - {state.data}</button>
 }

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

@@ -4,12 +4,13 @@ import {
   instanceDetails,
   InstancePlaceholder,
   InstancesList,
-  instancesList
+  instancesList, shapeSource
 } from "./sources";
 import {Status, useSource, useAsyncState, State} from "react-async-states";
 
 export default function Sider() {
   let [state] = useAsyncState(instancesList);
+  // console.log('this is sider', useAsyncState(shapeSource).state.data);
 
   if (state.status !== Status.success) {
     return null;

packages/devtools-extension/src/DevtoolsView/sources.ts

@@ -8,7 +8,6 @@ import {shimChromeRuntime} from "./ShimChromeRuntime";
 import type {ProducerProps} from "react-async-states/dist/es/src";
 
 export function resetAllSources() {
-  // currentView.setState(null);
   instancesList.setState({});
   devtoolsInfo.setState({connected: false});
   instanceDetails.setState(null);
@@ -101,6 +100,23 @@ export function getPort(isDevMode) {
   return (window as any).chrome.runtime.connect({name: "panel"});
 }
 
+
+export type SideShapeItem = {
+  key: string,
+  uniqueId: number,
+
+  parent?: number,
+  lanes?: Record<string, string>,
+}
+
+export type SideShape = Record<string, SideShapeItem>
+
+export let shapeSource = createSource<SideShape>("shape", null, {
+  initialValue: {},
+  hideFromDevtools: true
+});
+
+
 function gatewayProducer(props) {
   const {dev} = props.payload;
   const port = getPort(dev);
@@ -114,11 +130,12 @@ function gatewayProducer(props) {
       return;
     }
     // console.log('received this', message)
+    let payload = message.payload;
     switch (message.type) {
       case DevtoolsEvent.setKeys: {
         devtoolsInfo.setState({connected: true});
 
-        let newKeys = Object.entries(message.payload as Record<number, string>)
+        let newKeys = Object.entries(payload as Record<number, string>)
           .reduce((acc, [uniqueId, key]) => {
             acc[`${uniqueId}`] = {uniqueId: +uniqueId, key};
             return acc;
@@ -128,7 +145,41 @@ function gatewayProducer(props) {
         return;
       }
       case DevtoolsEvent.setAsyncState: {
-        instanceDetails.getLaneSource(`${message.uniqueId}`).setState(message.payload);
+
+        let uniqueIdString = `${message.uniqueId}`;
+        instanceDetails.getLaneSource(uniqueIdString).setState(payload);
+
+        // let shapeData = shapeSource.getState().data;
+        // let nextShape = {...shapeData};
+        //
+        // if (!nextShape[uniqueIdString]) {
+        //   nextShape[uniqueIdString] = {
+        //     key: payload.key,
+        //     uniqueId: payload.uniqueId,
+        //   }
+        //   if (payload.parent) {
+        //     nextShape[uniqueIdString].parent = payload.parent.uniqueId;
+        //   }
+        // }
+        //
+        // if (payload.parent) {
+        //   let parentKey = payload.parent.key;
+        //   let parentId = payload.parent.uniqueId;
+        //   if (!nextShape[`${parentId}`]) {
+        //     nextShape[`${parentId}`] = {
+        //       key: parentKey,
+        //       uniqueId: payload.parent.uniqueId,
+        //       lanes: {},
+        //     }
+        //   }
+        //   if (!nextShape[`${parentId}`].lanes) {
+        //     nextShape[`${parentId}`].lanes = {};
+        //   }
+        //   nextShape[`${parentId}`].lanes![uniqueIdString] = payload.key;
+        // }
+        //
+        // shapeSource.setState(nextShape);
+
         return;
       }
       case DevtoolsEvent.partialSync: {

packages/docs/docs/api/4-use-async-state.md

@@ -510,13 +510,13 @@ import {State, Status, useAsyncState, UseAsyncState} from "react-async-states";
 // syncSelector
 // if you want that your state is always synchronous
 // you may be interested only by the data inside the state
-function syncSelector(state: State<T>): E {
+function syncSelector(state: State<T>): S {
   return state.data;
 }
 
 // this selector throws if the state is error so it is leveraged to the nearest
 // error boundary
-function errorBoundarySelector(state: State<T>): E {
+function errorBoundarySelector(state: State<T>): S {
   // assuming you have an error boundary
   if (state.status === Status.error) {
     throw state.data;
@@ -525,7 +525,7 @@ function errorBoundarySelector(state: State<T>): E {
 }
 
 // this selector gives the last success data
-function keepPreviousDataSelector(state: State<T>, lastSuccess): E {
+function keepPreviousDataSelector(state: State<T>, lastSuccess): S {
   if (state.status === Status.pending) {
     return {
       ...state,
@@ -536,7 +536,7 @@ function keepPreviousDataSelector(state: State<T>, lastSuccess): E {
 }
 
 // select from cache selector
-function errorBoundarySelector(state, lastSuccess, cache): E {
+function errorBoundarySelector(state, lastSuccess, cache): S {
   // this requires the cache to be enabled
   if (cache['user-1-details']) {
     return cache['user-1-details']; // or cache['user-1-details'].data depending or your needs
@@ -554,7 +554,7 @@ function lazyDeveloperSelector(state: State<T>) {
   }
 }
 
-const result: UseAsyncState<T, E> = useAsyncState({
+const result: UseAsyncState<T, S> = useAsyncState({
   key,
   selector: mySelector,
 })

packages/docs/docs/faq/how-the-library-works.md

@@ -245,7 +245,7 @@ It allows the library to cascade the props:
 
 ```typescript
 
-export function createProducerEffectsCreator(manager: AsyncStateManagerInterface) {
+export function createProducerEffectsCreator(manager: ManagerInterface) {
   return function closeOverProps<T>(props: ProducerProps<T>): ProducerEffects {
     return {
       run: createRunFunction(manager, props),
@@ -405,17 +405,17 @@ is added (`hoisted`), that's why `watchAll` exists in a nutshell.
 It simply uses a special symbol as a record to save watchers into it.
 
 ```typescript
-const asyncStateEntries: AsyncStateEntries = Object
+const asyncStateEntries: StateEntries = Object
     .values(initializer ?? EMPTY_OBJECT)
     .reduce(
       createInitialAsyncStatesReducer,
       Object.create(null)
-    ) as AsyncStateEntries;
+    ) as StateEntries;
 
   // stores all listeners/watchers about an async state
   let watchers: ManagerWatchers = Object.create(null);
 
-  const output: AsyncStateManagerInterface = {
+  const output: ManagerInterface = {
     entries: asyncStateEntries,
     run,
     get,
@@ -493,10 +493,10 @@ some logic: like `focus`, `scroll` or any other event on any platform.
 ### How `useAsyncState` subscription config works ?
 The exposed `useAsyncState`'s signature is the following:
 ```typescript
-function useAsyncStateExport<T, E>(
-  subscriptionConfig: UseAsyncStateConfig<T, E>,
+function useAsyncStateExport<T, S>(
+  subscriptionConfig: UseAsyncStateConfig<T, S>,
   dependencies?: any[]
-): UseAsyncState<T, E> {
+): UseAsyncState<T, S> {
   return useAsyncStateBase(
     subscriptionConfig,
     dependencies

packages/react-async-states/package.json

@@ -3,7 +3,7 @@
   "license": "MIT",
   "author": "incepter",
   "sideEffects": false,
-  "version": "1.0.0-rc-13",
+  "version": "1.0.0-rc-14",
   "main": "dist/umd/index",
   "module": "dist/es/index",
   "name": "react-async-states",
@@ -83,6 +83,7 @@
   ],
   "files": [
     "dist/*",
-    "README.MD"
+    "README.MD",
+    "package.json"
   ]
 }

packages/react-async-states/rollup/rollup.config.dev.js

@@ -4,7 +4,7 @@ const typescript = require('rollup-plugin-typescript2');
 const json = require('@rollup/plugin-json');
 const {babel} = require('@rollup/plugin-babel');
 
-const umdBuild = {
+const devBuild = {
   input: `src/index.ts`,
   globals: {
     react: 'React',
@@ -23,8 +23,10 @@ const umdBuild = {
     },
     {
       format: 'es',
+      dir: "dist/es",
       sourcemap: true,
-      file: `dist/index.js`,
+      preserveModules: true,
+      // file: `dist/index.js`,
       name: "ReactAsyncStates",
       globals: {
         react: 'React',
@@ -84,6 +86,6 @@ const devtoolsSharedBuild = {
 };
 
 module.exports = [
-  umdBuild,
+  devBuild,
   devtoolsSharedBuild,
 ];

packages/react-async-states/src/README.MD

@@ -68,7 +68,7 @@ even if some appear to be impossible:
 
 ## AsyncStateProvider
 
-The provider wires a `AsyncStateContext` in your tree, it accepts the following props:
+The provider wires a `StateContext` in your tree, it accepts the following props:
 
 |Prop                | PropType                  | Default value         | Usage                                     |
 |--------------------|---------------------------|-----------------------|-------------------------------------------|