Fix observer and interceptor behaviour with escaped slashes in path

syncstate · Oct 13, 2020 · f285226 · f285226
1 parent 78aa573
commit f285226
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 13 deletions.
diff --git a/example/index.tsx b/example/index.tsx
@@ -57,9 +57,24 @@ store.intercept(
 );
 
 const [doc, setDoc] = store.useSyncState('doc');
-setDoc(doc => (doc.test = 'paihwdih'));
-const [test, setTest] = store.useDoc('/test');
-setTest('kkkkkk');
+setDoc(doc => {
+  doc.test = {};
+  doc.test['/test3/test4/test5'] = 'paihwdih';
+});
+// const [test, setTest] = store.useDoc('/test');
+// setTest('kkkkkk');
+store.observe(
+  'doc',
+  '/test',
+  val => {
+    console.log('rerererererer &*(&(&&*(');
+  },
+  1
+);
+
+setTimeout(() => {
+  setDoc(doc => (doc.test['/test3/test4/test5'] = 'KKKkkkkkk'));
+}, 2000);
 // undoable(() => true);
 
 const disposeCompute = store.computeDoc((getValue, change) => {

diff --git a/src/interceptMiddleware.ts b/src/interceptMiddleware.ts
@@ -1,5 +1,7 @@
 import { produce } from 'immer';
 import get from 'lodash.get';
+import immerPathToJsonPatchPath from './utils/immerPathToJsonPatchPath';
+import jsonPatchPathToImmerPath from './utils/jsonPatchPathToImmerPath';
 
 export type Interceptor = {
   subtree: string;
@@ -36,15 +38,16 @@ export const createInterceptMiddleware = (
 
         // If depth x, call for x levels extra below interceptor path
         else if (interceptor.depth > 0 && interceptor.depth !== Infinity) {
-          const matchingLengthPayloadPathArray = payloadPath
-            .split('/')
-            .slice(0, interceptor.path.split('/').length);
+          const matchingLengthPayloadPathArray = jsonPatchPathToImmerPath(
+            payloadPath
+          ).slice(0, jsonPatchPathToImmerPath(interceptor.path).length);
           const remainingPayloadPathLength =
-            payloadPath.split('/').length -
+            jsonPatchPathToImmerPath(payloadPath).length -
             matchingLengthPayloadPathArray.length;
 
           if (
-            matchingLengthPayloadPathArray.join('/') === interceptor.path &&
+            immerPathToJsonPatchPath(matchingLengthPayloadPathArray) ===
+              interceptor.path &&
             remainingPayloadPathLength <= interceptor.depth
           ) {
             discardAction = callInterceptor(interceptor, store, action);

diff --git a/src/observeMiddleware.ts b/src/observeMiddleware.ts
@@ -1,4 +1,6 @@
 import get from 'lodash.get';
+import immerPathToJsonPatchPath from './utils/immerPathToJsonPatchPath';
+import jsonPatchPathToImmerPath from './utils/jsonPatchPathToImmerPath';
 
 export type Observer = {
   subtree: string;
@@ -27,15 +29,16 @@ export const createObserveMiddleware = (observers: Map<number, Observer>) => {
 
         // If depth x, call for x levels extra below observer path
         else if (observer.depth > 0 && observer.depth !== Infinity) {
-          const matchingLengthPayloadPathArray = payloadPath
-            .split('/')
-            .slice(0, observer.path.split('/').length);
+          const matchingLengthPayloadPathArray = jsonPatchPathToImmerPath(
+            payloadPath
+          ).slice(0, jsonPatchPathToImmerPath(observer.path).length);
           const remainingPayloadPathLength =
-            payloadPath.split('/').length -
+            jsonPatchPathToImmerPath(payloadPath).length -
             matchingLengthPayloadPathArray.length;
 
           if (
-            matchingLengthPayloadPathArray.join('/') === observer.path &&
+            immerPathToJsonPatchPath(matchingLengthPayloadPathArray) ===
+              observer.path &&
             remainingPayloadPathLength <= observer.depth
           ) {
             callObserver(observer, store, action);