feat: add content change checks

Author: mrousavy

example/__tests__/MMKV.harness.ts

@@ -416,6 +416,17 @@ describe('MMKV Configuration & Multiple Instances', () => {
 
       storage.clearAll();
     });
+
+    it('should check for external content changes', () => {
+      const storage = createMMKV({ id: 'content-change-check-test' });
+
+      storage.checkContentChanged();
+
+      storage.set('content-change-check', 'value');
+      expect(storage.getString('content-change-check')).toStrictEqual('value');
+
+      storage.clearAll();
+    });
   });
 
   describe('Instance Management', () => {

packages/react-native-mmkv/cpp/HybridMMKV.cpp

@@ -229,6 +229,10 @@ void HybridMMKV::trim() {
   instance->clearMemoryCache();
 }
 
+void HybridMMKV::checkContentChanged() {
+  instance->checkContentChanged();
+}
+
 Listener HybridMMKV::addOnValueChangedListener(const std::function<void(const std::string& /* key */)>& onValueChanged) {
   // Add listener
   auto mmkvID = instance->mmapID();

packages/react-native-mmkv/cpp/HybridMMKV.hpp

@@ -41,6 +41,7 @@ class HybridMMKV final : public HybridMMKVSpec {
   void encrypt(const std::string& key, std::optional<EncryptionType> encryptionType) override;
   void decrypt() override;
   void trim() override;
+  void checkContentChanged() override;
   Listener addOnValueChangedListener(const std::function<void(const std::string& /* key */)>& onValueChanged) override;
   double importAllFrom(const std::shared_ptr<HybridMMKVSpec>& other) override;
 

packages/react-native-mmkv/nitrogen/generated/shared/c++/HybridMMKVSpec.cpp

@@ -33,6 +33,7 @@ namespace margelo::nitro::mmkv {
       prototype.registerHybridMethod("encrypt", &HybridMMKVSpec::encrypt);
       prototype.registerHybridMethod("decrypt", &HybridMMKVSpec::decrypt);
       prototype.registerHybridMethod("trim", &HybridMMKVSpec::trim);
+      prototype.registerHybridMethod("checkContentChanged", &HybridMMKVSpec::checkContentChanged);
       prototype.registerHybridMethod("addOnValueChangedListener", &HybridMMKVSpec::addOnValueChangedListener);
       prototype.registerHybridMethod("importAllFrom", &HybridMMKVSpec::importAllFrom);
     });

packages/react-native-mmkv/nitrogen/generated/shared/c++/HybridMMKVSpec.hpp

@@ -80,6 +80,7 @@ namespace margelo::nitro::mmkv {
       virtual void encrypt(const std::string& key, std::optional<EncryptionType> encryptionType) = 0;
       virtual void decrypt() = 0;
       virtual void trim() = 0;
+      virtual void checkContentChanged() = 0;
       virtual Listener addOnValueChangedListener(const std::function<void(const std::string& /* key */)>& onValueChanged) = 0;
       virtual double importAllFrom(const std::shared_ptr<HybridMMKVSpec>& other) = 0;
 

packages/react-native-mmkv/src/__tests__/hooks.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Button, Text } from 'react-native'
+import { AppState, Button, Text } from 'react-native'
+import type { AppStateStatus, NativeEventSubscription } from 'react-native'
 import {
   act,
   fireEvent,
@@ -9,7 +10,7 @@ import {
   cleanup,
   waitFor,
 } from '@testing-library/react-native'
-import { createMMKV, useMMKVNumber, useMMKVString } from '..'
+import { createMMKV, useMMKVKeys, useMMKVNumber, useMMKVString } from '..'
 
 const mmkv = createMMKV()
 
@@ -20,8 +21,37 @@ beforeEach(() => {
 
 afterEach(() => {
   cleanup()
+  jest.restoreAllMocks()
 })
 
+function mockAppStateChangeListener(): {
+  emit: (state: AppStateStatus) => void
+} {
+  const listeners = new Set<(state: AppStateStatus) => void>()
+
+  jest
+    .spyOn(AppState, 'addEventListener')
+    .mockImplementation((type, listener): NativeEventSubscription => {
+      if (type === 'change') {
+        listeners.add(listener as (state: AppStateStatus) => void)
+      }
+
+      return {
+        remove: () => {
+          listeners.delete(listener as (state: AppStateStatus) => void)
+        },
+      } as NativeEventSubscription
+    })
+
+  return {
+    emit: (state) => {
+      act(() => {
+        listeners.forEach((listener) => listener(state))
+      })
+    },
+  }
+}
+
 test('hooks update when the value is changed directly through the instance', () => {
   const { result } = renderHook(() => useMMKVString('string-key', mmkv))
 
@@ -129,3 +159,40 @@ test('useMMKV hook stays consistent during rapid updates', async () => {
     expect(result.current[0]).toBe(100)
   })
 })
+
+test('useMMKV hook checks for external content changes when app becomes active', () => {
+  const appState = mockAppStateChangeListener()
+  const key = 'app-state-key'
+  let value = 'before'
+
+  const checkContentChanged = jest.spyOn(mmkv, 'checkContentChanged')
+  jest.spyOn(mmkv, 'getString').mockImplementation((requestedKey) => {
+    return requestedKey === key ? value : undefined
+  })
+
+  const { result } = renderHook(() => useMMKVString(key, mmkv))
+  expect(result.current[0]).toStrictEqual('before')
+
+  value = 'after'
+  appState.emit('active')
+
+  expect(checkContentChanged).toHaveBeenCalledTimes(1)
+  expect(result.current[0]).toStrictEqual('after')
+})
+
+test('useMMKVKeys checks for external content changes when app becomes active', () => {
+  const appState = mockAppStateChangeListener()
+  let keys: string[] = []
+
+  const checkContentChanged = jest.spyOn(mmkv, 'checkContentChanged')
+  jest.spyOn(mmkv, 'getAllKeys').mockImplementation(() => keys)
+
+  const { result } = renderHook(() => useMMKVKeys(mmkv))
+  expect(result.current).toStrictEqual([])
+
+  keys = ['external-key']
+  appState.emit('active')
+
+  expect(checkContentChanged).toHaveBeenCalledTimes(1)
+  expect(result.current).toStrictEqual(['external-key'])
+})

packages/react-native-mmkv/src/createMMKV/createMMKV.web.ts

@@ -126,6 +126,9 @@ export function createMMKV(
     trim: () => {
       // no-op
     },
+    checkContentChanged: () => {
+      // no-op
+    },
     dispose: () => {},
     equals: () => false,
     name: 'MMKV',

packages/react-native-mmkv/src/createMMKV/createMockMMKV.ts

@@ -80,6 +80,9 @@ export function createMockMMKV(
     trim: () => {
       // no-op
     },
+    checkContentChanged: () => {
+      // no-op
+    },
     name: 'MMKV',
     dispose: () => {},
     equals: () => {

packages/react-native-mmkv/src/hooks/addContentChangedAppStateListener.ts

@@ -0,0 +1,15 @@
+import { AppState } from 'react-native'
+import type { AppStateStatus, NativeEventSubscription } from 'react-native'
+import type { MMKV } from '../specs/MMKV.nitro'
+
+export function addContentChangedAppStateListener(
+  mmkv: MMKV,
+  onContentChanged: () => void
+): NativeEventSubscription {
+  return AppState.addEventListener('change', (state: AppStateStatus) => {
+    if (state === 'active') {
+      mmkv.checkContentChanged()
+      onContentChanged()
+    }
+  })
+}

packages/react-native-mmkv/src/hooks/addContentChangedAppStateListener.web.ts

@@ -0,0 +1,12 @@
+import type { MMKV } from '../specs/MMKV.nitro'
+
+export function addContentChangedAppStateListener(
+  _mmkv: MMKV,
+  _onContentChanged: () => void
+): { remove(): void } {
+  return {
+    remove: () => {
+      // no-op
+    },
+  }
+}