add computed, escape slashes

example/Todo.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import history from '@syncstate/history';
-import { useDoc } from '@syncstate/react';
+import { useDoc, useComputed } from '@syncstate/react';
 import { TodoItem } from './TodoItem';
 import { useState, useEffect } from 'react';
 
@@ -18,6 +18,12 @@ export function TodoApp() {
     dispatch(history.enable('/todos'));
   }, []);
 
+  // const [todoLength] = useComputed('doc', getValue => {
+  //   const todos = getValue('/todos');
+
+  //   return todos.length;
+  // });
+
   // console.log('todo app render');
 
   const filteredTodos = todos

example/index.tsx

@@ -62,6 +62,17 @@ const [test, setTest] = store.useDoc('/test');
 setTest('kkkkkk');
 // undoable(() => true);
 
+const disposeCompute = store.computeDoc((getValue, change) => {
+  const todos = getValue('/todos');
+
+  // const [val, setVal] = store.useDoc("path/to/nested/data")
+  console.log('$$$computed todos.length', todos.length, 'change', change);
+});
+
+setTimeout(() => {
+  disposeCompute();
+}, 5000);
+
 console.log(store.getPatches('doc'));
 
 const disposeObs = store.observe(

src/DocStore.ts

@@ -16,6 +16,8 @@ import { SyncStatePath } from './index';
 import removeFirstElement from './utils/jsonPatchPathToImmerPath';
 import jsonPatchPathToImmerPath from './utils/jsonPatchPathToImmerPath';
 import getNextId from './utils/getNextId';
+import { Watch, ComputeCallback } from 'types';
+import { createPostObserveMiddleware } from './postObserveMiddleware';
 
 type ReduxStore = Store<
   CombinedState<{
@@ -31,6 +33,7 @@ export default class DocStore {
   plugins: Array<any>;
   private observers = new Map<number, Observer>();
   private interceptors = new Map<number, Interceptor>();
+  private postObserveCallbacks: Array<() => void> = [];
 
   constructor(
     initialDoc: {},
@@ -97,6 +100,7 @@ by passing name in plugin configuration to createPlugin.
         applyMiddleware(
           createInterceptMiddleware(this.interceptors),
           createObserveMiddleware(this.observers),
+          createPostObserveMiddleware(this.postObserveCallbacks),
           ...this.plugins.map(p => p.middleware)
         )
       )
@@ -117,6 +121,11 @@ by passing name in plugin configuration to createPlugin.
         },
       });
     });
+
+    if (process.env.NODE_ENV !== 'production') {
+      // @ts-ignore
+      window['store'] = this;
+    }
   }
   getState = (subtree: string) => {
     const subtreeState = this.reduxStore.getState()[subtree];
@@ -151,7 +160,7 @@ by passing name in plugin configuration to createPlugin.
   observe = (
     subtree: string,
     path: string = '',
-    callback: any,
+    callback: (value: any, change: any) => void,
     depth: number = 1
   ) => {
     const observerId = getNextId();
@@ -162,15 +171,27 @@ by passing name in plugin configuration to createPlugin.
       depth,
     });
 
+    console.log(
+      '$$$$added observer with id ',
+      {
+        subtree,
+        path,
+        callback,
+        depth,
+      },
+      observerId
+    );
+
     return () => {
       this.observers.delete(observerId);
+      console.log('$$$$$removing observer with id ', observerId);
     };
   };
 
   intercept = (
     subtree: string,
     path: string = '',
-    callback: any,
+    callback: (value: any, change: any) => any,
     depth: number = 1
   ) => {
     const interceptorId = getNextId();
@@ -186,7 +207,79 @@ by passing name in plugin configuration to createPlugin.
     };
   };
 
+  postObserve = (callback: () => void) => {
+    this.postObserveCallbacks.push(callback);
+  };
+
   useSyncState = (subtree: string, path: string = '') =>
     useSyncState(this, subtree, path);
   useDoc = (path: string = '') => useSyncState(this, 'doc', path);
+
+  computeDoc = (computeCallback: ComputeCallback) => {
+    return this.compute('doc', computeCallback);
+  };
+
+  compute = (subtree: string, computeCallback: ComputeCallback) => {
+    let oldDispose: any;
+    const watch: Watch = (
+      watchPath: string,
+      depth: number = 1,
+      firstWatch: boolean = false
+    ) => {
+      if (oldDispose) {
+        oldDispose();
+      }
+
+      if (!firstWatch) {
+        this.postObserve(() => {
+          // postObserve bcoz otherwise a new observer gets added to the end of the array when calling
+          // a previous observer leading to an infinite loop
+          console.log('$$$$compute observer 1');
+          const dispose = this.observe(
+            subtree,
+            watchPath,
+            (updatedValue, change) => {
+              oldDispose = dispose;
+              computeCallback(getValue, change);
+            },
+            depth
+          );
+        });
+      } else {
+        console.log('$$$$compute observer 2');
+        const dispose = this.observe(
+          subtree,
+          watchPath,
+          (updatedValue, change) => {
+            oldDispose = dispose;
+            computeCallback(getValue, change);
+          },
+          depth
+        );
+      }
+
+      // return dispose;
+    };
+
+    const getValue = (
+      path: string,
+      depth: number = 1,
+      firstRun: boolean = false
+    ) => {
+      watch(path, depth, firstRun);
+      const [doc, setDoc] = this.useSyncState(subtree, path);
+      return doc;
+    };
+
+    computeCallback(
+      (path: string, depth: number = 1) => getValue(path, depth, true),
+      {}
+    );
+
+    return () => {
+      if (oldDispose) {
+        oldDispose();
+      }
+    };
+  };
 }

src/index.ts

@@ -50,3 +50,4 @@ export function createDocStore(initialDoc: {}, plugins?: Array<any>) {
 
 export type SyncStatePath = Array<string | number>;
 export { DocStore };
+export * from './types';

src/interceptMiddleware.ts

@@ -4,7 +4,7 @@ import get from 'lodash.get';
 export type Interceptor = {
   subtree: string;
   path: string;
-  callback: any;
+  callback: (value: any, change: any) => any;
   depth: number;
 };
 

src/observeMiddleware.ts

@@ -3,7 +3,7 @@ import get from 'lodash.get';
 export type Observer = {
   subtree: string;
   path: string;
-  callback: any;
+  callback: (value: any, change: any) => void;
   depth: number;
 };
 
@@ -12,7 +12,7 @@ export const createObserveMiddleware = (observers: Map<number, Observer>) => {
     const result = next(action);
 
     if (action.type === 'PATCH') {
-      observers.forEach(observer => {
+      observers.forEach((observer, key) => {
         const payloadPath = action.payload.patch.path;
 
         if (observer.subtree !== action.payload.subtree) {

src/postObserveMiddleware.ts

@@ -0,0 +1,22 @@
+import get from 'lodash.get';
+
+export type Observer = {
+  subtree: string;
+  path: string;
+  callback: any;
+  depth: number;
+};
+
+export const createPostObserveMiddleware = (callbacks: Array<() => void>) => {
+  return (store: any) => (next: any) => (action: any) => {
+    const result = next(action);
+
+    callbacks.forEach((cb, index) => {
+      cb();
+    });
+
+    callbacks.length = 0;
+
+    return result;
+  };
+};

src/storeMethods/useSyncState.ts

@@ -1,4 +1,4 @@
-import { produceWithPatches } from 'immer';
+import { Patch, produceWithPatches } from 'immer';
 import DocStore from '../DocStore';
 import { SyncStatePath } from '../index';
 import jsonPatchPathToImmerPath from '../utils/jsonPatchPathToImmerPath';
@@ -33,11 +33,8 @@ export default function useSyncState(
         // let parentPath = [...path];
         const immerPath = jsonPatchPathToImmerPath(path);
         const childKey = immerPath.pop();
-        path = immerPath.join('/');
-        stateAtPath = store.getStateAtPath(
-          subtree,
-          immerPathToJsonPatchPath(immerPath)
-        );
+        path = immerPathToJsonPatchPath(immerPath); // immerPath.join('/');
+        stateAtPath = store.getStateAtPath(subtree, path);
         produceCallback = (draft: any) => {
           if (childKey) {
             draft[childKey] = callbackOrData;
@@ -54,12 +51,15 @@ export default function useSyncState(
       );
       // console.log(path, 'path');
       // console.log(JSON.stringify(patches, null, 2), 'patches before');
-      patches = patches.map((p: any) => {
-        return { ...p, path: path + '/' + p.path.join('/') };
+      patches = patches.map((p: Patch) => {
+        return {
+          ...p,
+          path: path + immerPathToJsonPatchPath(p.path),
+        };
       });
 
       inversePatches = inversePatches.map((p: any) => {
-        return { ...p, path: path + '/' + p.path.join('/') };
+        return { ...p, path: path + immerPathToJsonPatchPath(p.path) };
       });
       // console.log(JSON.stringify(patches, null, 2), 'patches');
 

src/types.ts

@@ -0,0 +1,10 @@
+export type Watch = (
+  path: string,
+  depth?: number,
+  firstWatch?: boolean
+) => void;
+
+export type ComputeCallback = (
+  getValue: (path: string, depth?: number, firstRun?: boolean) => any,
+  change: any
+) => any;

src/utils/escapeSlashes.ts

@@ -0,0 +1,3 @@
+export default function escapeSlashes(str: string | number) {
+  return String(str).replaceAll('/', '\\/');
+}

src/utils/immerPathToJsonPatchPath.ts

@@ -1,8 +1,9 @@
 import { SyncStatePath } from '../index';
+import escapeSlashes from './escapeSlashes';
 
 export default function immerPathToJsonPatchPath(path: SyncStatePath) {
   if (path.length === 0) {
     return '';
   }
-  return '/' + path.join('/');
+  return '/' + path.map(p => escapeSlashes(p)).join('/');
 }

src/utils/jsonPatchPathToImmerPath.ts

@@ -1,8 +1,13 @@
+import unescapeSlashes from './unescapeSlashes';
+
 export default function jsonPatchPathToImmerPath(path: string) {
   if (!path) {
     return [];
   }
+
+  path = path.replaceAll('\\/', ':::');
+
   const immerPath = path.split('/');
   immerPath.shift();
-  return immerPath;
+  return immerPath.map(p => p.replaceAll(':::', '/'));
 }

src/utils/unescapeSlashes.ts

@@ -0,0 +1,3 @@
+export default function unescapeSlashes(str: string | number) {
+  return String(str).replaceAll('\\/', '/');
+}