@rozenite/storage-plugin 1.4.0

package/dist/useRozeniteStoragePlugin.js

@@ -0,0 +1,212 @@
+import { useRozeniteDevToolsClient as I } from "@rozenite/plugin-bridge";
+import { useMemo as h, useEffect as S } from "react";
+import { g as m, s as b } from "./types.js";
+const $ = 1500, d = (t) => t.kind === "async", g = (t) => t.type === "buffer" ? `${t.type}:${t.value.join(",")}` : `${t.type}:${String(t.value)}`, v = (t) => new Map(t.map((e) => [e.key, e])), u = (t, e) => t.blacklist ? (t.blacklist.lastIndex = 0, t.blacklist.test(e)) : !1, E = (t, e, r) => {
+  if (!b(t, e))
+    throw new Error(
+      `Type "${e}" is not supported by storage "${r.storageId}" in adapter "${r.adapterId}".`
+    );
+}, f = async (t) => (d(t), t.getAllKeys()), y = async (t, e) => (d(t), t.get(e)), P = async (t, e) => {
+  if (d(t)) {
+    await t.set(e);
+    return;
+  }
+  t.set(e);
+}, z = async (t, e) => {
+  if (d(t)) {
+    await t.delete(e);
+    return;
+  }
+  t.delete(e);
+}, w = async (t) => {
+  const e = await t();
+  return v(e);
+}, M = (t, e, r) => {
+  e.forEach((i, c) => {
+    const p = t.get(c);
+    if (!p) {
+      r.onSet(i);
+      return;
+    }
+    g(p) !== g(i) && r.onSet(i);
+  }), t.forEach((i, c) => {
+    e.has(c) || r.onDelete(c);
+  });
+}, R = async (t, e) => {
+  let r = await w(t);
+  const i = setInterval(async () => {
+    try {
+      const c = await w(t);
+      M(r, c, e), r = c;
+    } catch {
+    }
+  }, $);
+  return {
+    remove: () => {
+      clearInterval(i);
+    }
+  };
+}, A = (t, e) => {
+  const r = e.storage, i = {
+    adapterId: t.id,
+    storageId: e.id
+  }, c = async (o) => {
+    if (!u(e, o))
+      return y(r, o);
+  }, p = async () => {
+    const o = await f(r);
+    return (await Promise.all(
+      o.filter((s) => !u(e, s)).map((s) => y(r, s))
+    )).filter((s) => !!s);
+  };
+  return {
+    id: m(i),
+    target: i,
+    adapterName: t.name,
+    storageName: e.name,
+    capabilities: e.capabilities,
+    get: c,
+    set: async (o) => {
+      E(e.capabilities, o.type, i), await P(r, o);
+    },
+    delete: async (o) => {
+      await z(r, o);
+    },
+    getAllKeys: async () => (await f(r)).filter((a) => !u(e, a)),
+    getAllEntries: p,
+    watch: async ({ onSet: o, onDelete: a }) => r.subscribe ? r.subscribe(async (s) => {
+      try {
+        const n = await c(s);
+        if (!n) {
+          a(s);
+          return;
+        }
+        o(n);
+      } catch {
+      }
+    }) : R(p, { onSet: o, onDelete: a })
+  };
+}, F = (t) => t.flatMap(
+  (e) => e.storages.map((r) => A(e, r))
+), k = ({
+  storages: t
+}) => {
+  const e = h(() => F(t), [t]), r = I({
+    pluginId: "@rozenite/storage-plugin"
+  });
+  return S(() => {
+    if (!r)
+      return;
+    const i = async (a) => {
+      const s = a ? e.filter((n) => n.id === a) : e;
+      for (const n of s)
+        try {
+          const l = await n.getAllEntries();
+          r.send("snapshot", {
+            type: "snapshot",
+            target: n.target,
+            adapterName: n.adapterName,
+            storageName: n.storageName,
+            capabilities: n.capabilities,
+            entries: l
+          });
+        } catch (l) {
+          console.warn(
+            `[Rozenite] Storage Plugin: Failed to snapshot ${n.target.adapterId}/${n.target.storageId}.`,
+            l
+          );
+        }
+    };
+    i();
+    const c = [];
+    let p = !1;
+    Promise.all(
+      e.map(async (a) => {
+        try {
+          const s = await a.watch({
+            onSet: (n) => {
+              r.send("set-entry", {
+                type: "set-entry",
+                target: a.target,
+                entry: n
+              });
+            },
+            onDelete: (n) => {
+              r.send("delete-entry", {
+                type: "delete-entry",
+                target: a.target,
+                key: n
+              });
+            }
+          });
+          if (p) {
+            s.remove();
+            return;
+          }
+          c.push(s);
+        } catch (s) {
+          console.warn(
+            `[Rozenite] Storage Plugin: Failed to attach watcher for ${a.target.adapterId}/${a.target.storageId}.`,
+            s
+          );
+        }
+      })
+    );
+    const o = [
+      r.onMessage("set-entry", async ({ target: a, entry: s }) => {
+        const n = e.find(
+          (l) => l.target.adapterId === a.adapterId && l.target.storageId === a.storageId
+        );
+        if (!n) {
+          console.warn(
+            `[Rozenite] Storage Plugin: Storage target not found for ${a.adapterId}/${a.storageId}`
+          );
+          return;
+        }
+        try {
+          await n.set(s);
+        } catch (l) {
+          console.warn(
+            `[Rozenite] Storage Plugin: Failed to set entry in ${a.adapterId}/${a.storageId}.`,
+            l
+          );
+        }
+      }),
+      r.onMessage(
+        "delete-entry",
+        async ({ target: a, key: s }) => {
+          const n = e.find(
+            (l) => l.target.adapterId === a.adapterId && l.target.storageId === a.storageId
+          );
+          if (!n) {
+            console.warn(
+              `[Rozenite] Storage Plugin: Storage target not found for ${a.adapterId}/${a.storageId}`
+            );
+            return;
+          }
+          try {
+            await n.delete(s);
+          } catch (l) {
+            console.warn(
+              `[Rozenite] Storage Plugin: Failed to delete entry in ${a.adapterId}/${a.storageId}.`,
+              l
+            );
+          }
+        }
+      ),
+      r.onMessage("get-snapshot", async ({ target: a }) => {
+        if (a === "all") {
+          await i();
+          return;
+        }
+        await i(`${a.adapterId}:${a.storageId}`);
+      })
+    ];
+    return () => {
+      p = !0, c.forEach((a) => a.remove()), o.forEach((a) => a.remove());
+    };
+  }, [r, e]), r;
+};
+export {
+  k as useRozeniteStoragePlugin
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@rozenite/storage-plugin",
+  "version": "1.4.0",
+  "description": "Generic Storage Inspector for Rozenite.",
+  "type": "module",
+  "main": "./dist/react-native.cjs",
+  "module": "./dist/react-native.js",
+  "types": "./dist/react-native.d.ts",
+  "dependencies": {
+    "@rozenite/plugin-bridge": "1.4.0"
+  },
+  "devDependencies": {
+    "@tanstack/react-table": "^8.21.3",
+    "@types/react": "~19.2.2",
+    "autoprefixer": "^10.4.21",
+    "lucide-react": "^0.263.1",
+    "postcss": "^8.5.6",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-json-tree": "^0.20.0",
+    "react-native": "0.83.1",
+    "react-native-mmkv": "^3.3.0",
+    "react-native-mmkv-v3": "npm:react-native-mmkv@^3.0.0",
+    "react-native-mmkv-v4": "npm:react-native-mmkv@^4.0.0",
+    "react-native-nitro-modules": "*",
+    "react-native-web": "^0.21.2",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "@rozenite/vite-plugin": "1.4.0",
+    "rozenite": "1.4.0"
+  },
+  "peerDependencies": {
+    "@react-native-async-storage/async-storage": "*",
+    "expo-secure-store": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-mmkv": "*"
+  },
+  "peerDependenciesMeta": {
+    "@react-native-async-storage/async-storage": {
+      "optional": true
+    },
+    "expo-secure-store": {
+      "optional": true
+    },
+    "react-native-mmkv": {
+      "optional": true
+    }
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "rozenite build",
+    "dev": "rozenite dev",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "eslint ."
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/react-native.ts

@@ -0,0 +1,40 @@
+export {
+  createAsyncStorageAdapter,
+  createExpoAsyncStorageAdapter,
+  createExpoSecureStorageAdapter,
+  createMMKVStorageAdapter,
+} from './src/react-native/adapters';
+export type {
+  AsyncStorageInstanceConfig,
+  AsyncStorageLike,
+  CreateAsyncStorageAdapterOptions,
+  CreateExpoAsyncStorageAdapterOptions,
+  CreateExpoSecureStorageAdapterOptions,
+  CreateMMKVStorageAdapterOptions,
+  SecureStorageLike,
+} from './src/react-native/adapters';
+
+export type {
+  AsyncStorage,
+  StorageAdapter,
+  StorageCapabilities,
+  StorageEntry,
+  StorageEntryType,
+  StorageEntryValue,
+  StorageNode,
+  SyncStorage,
+} from './src/shared/types';
+
+export let useRozeniteStoragePlugin: typeof import('./src/react-native/useRozeniteStoragePlugin').useRozeniteStoragePlugin;
+
+const isWeb =
+  typeof window !== 'undefined' && window.navigator.product !== 'ReactNative';
+const isDev = process.env.NODE_ENV !== 'production';
+const isServer = typeof window === 'undefined';
+
+if (isDev && !isWeb && !isServer) {
+  useRozeniteStoragePlugin =
+    require('./src/react-native/useRozeniteStoragePlugin').useRozeniteStoragePlugin;
+} else {
+  useRozeniteStoragePlugin = () => null;
+}

package/rozenite.config.ts

@@ -0,0 +1,8 @@
+export default {
+  panels: [
+    {
+      name: 'Storage',
+      source: './src/ui/panel.tsx',
+    },
+  ],
+};

package/src/css-modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/src/react-native/adapters/async-storage.ts

@@ -0,0 +1,115 @@
+import type { StorageAdapter, StorageNode } from '../../shared/types';
+
+export type AsyncStorageLike = {
+  getAllKeys: () => Promise<string[]>;
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+  removeItem: (key: string) => Promise<void>;
+};
+
+export type AsyncStorageInstanceConfig = {
+  storage: AsyncStorageLike;
+  name?: string;
+  blacklist?: RegExp;
+};
+
+type SingleStorageOptions = {
+  storage: AsyncStorageLike;
+  adapterId?: string;
+  adapterName?: string;
+  storageId?: string;
+  storageName?: string;
+  blacklist?: RegExp;
+};
+
+type MultiStorageOptions = {
+  storages: Record<string, AsyncStorageLike | AsyncStorageInstanceConfig>;
+  adapterId?: string;
+  adapterName?: string;
+};
+
+export type CreateAsyncStorageAdapterOptions =
+  | SingleStorageOptions
+  | MultiStorageOptions;
+
+const toStorageNode = (
+  storageId: string,
+  config: AsyncStorageLike | AsyncStorageInstanceConfig,
+  fallbackName?: string,
+  fallbackBlacklist?: RegExp
+): StorageNode => {
+  const resolved =
+    'storage' in config
+      ? config
+      : {
+          storage: config,
+        };
+
+  const { storage, name, blacklist } = resolved;
+
+  return {
+    id: storageId,
+    name: name ?? fallbackName ?? storageId,
+    blacklist: blacklist ?? fallbackBlacklist,
+    capabilities: {
+      supportedTypes: ['string'],
+    },
+    storage: {
+      kind: 'async',
+      getAllKeys: () => storage.getAllKeys(),
+      get: async (key) => {
+        const value = await storage.getItem(key);
+        if (value === null) {
+          return undefined;
+        }
+
+        return {
+          key,
+          type: 'string',
+          value,
+        };
+      },
+      set: async (entry) => {
+        if (entry.type !== 'string') {
+          throw new Error('AsyncStorage adapter supports only string values.');
+        }
+
+        await storage.setItem(entry.key, entry.value);
+      },
+      delete: (key) => storage.removeItem(key),
+    },
+  };
+};
+
+export const createAsyncStorageAdapter = (
+  options: CreateAsyncStorageAdapterOptions
+): StorageAdapter => {
+  const { adapterId = 'async-storage', adapterName = 'AsyncStorage' } =
+    options;
+
+  const storageNodes: StorageNode[] =
+    'storages' in options
+      ? Object.entries(options.storages).map(([storageId, config]) =>
+          toStorageNode(storageId, config)
+        )
+      : [
+          toStorageNode(
+            options.storageId ?? 'default',
+            options.storage,
+            options.storageName ?? 'Default Storage',
+            options.blacklist
+          ),
+        ];
+
+  return {
+    id: adapterId,
+    name: adapterName,
+    storages: storageNodes,
+  };
+};
+
+/**
+ * @deprecated Use createAsyncStorageAdapter instead.
+ */
+export const createExpoAsyncStorageAdapter = createAsyncStorageAdapter;
+export type CreateExpoAsyncStorageAdapterOptions = CreateAsyncStorageAdapterOptions;

package/src/react-native/adapters/index.ts

@@ -0,0 +1,19 @@
+export { createMMKVStorageAdapter } from './mmkv';
+export type { CreateMMKVStorageAdapterOptions } from './mmkv';
+
+export {
+  createAsyncStorageAdapter,
+  createExpoAsyncStorageAdapter,
+} from './async-storage';
+export type {
+  AsyncStorageInstanceConfig,
+  AsyncStorageLike,
+  CreateAsyncStorageAdapterOptions,
+  CreateExpoAsyncStorageAdapterOptions,
+} from './async-storage';
+
+export { createExpoSecureStorageAdapter } from './secure-storage';
+export type {
+  CreateExpoSecureStorageAdapterOptions,
+  SecureStorageLike,
+} from './secure-storage';

package/src/react-native/adapters/mmkv.ts

@@ -0,0 +1,187 @@
+import type { MMKV as MMKVV3 } from 'react-native-mmkv-v3';
+import type { MMKV as MMKVV4 } from 'react-native-mmkv-v4';
+import type { StorageAdapter, StorageEntry, StorageNode } from '../../shared/types';
+import { DEFAULT_SUPPORTED_TYPES } from '../../shared/types';
+import { looksLikeGarbled } from '../is-garbled';
+
+type MMKV = MMKVV3 | MMKVV4;
+
+type MMKVAdapter = {
+  set: (key: string, value: boolean | string | number | ArrayBuffer) => void;
+  getBoolean: (key: string) => boolean | undefined;
+  getString: (key: string) => string | undefined;
+  getNumber: (key: string) => number | undefined;
+  getBuffer: (key: string) => ArrayBuffer | undefined;
+  delete: (key: string) => void;
+  getAllKeys: () => string[];
+  addOnValueChangedListener: (callback: (key: string) => void) => {
+    remove: () => void;
+  };
+};
+
+export type MMKVBlacklistConfig = RegExp | Record<string, RegExp | undefined>;
+
+export type CreateMMKVStorageAdapterOptions = {
+  adapterId?: string;
+  adapterName?: string;
+  storages: MMKV[] | Record<string, MMKV>;
+  blacklist?: MMKVBlacklistConfig;
+};
+
+const isMMKVV4 = (mmkv: MMKV): mmkv is MMKVV4 => 'remove' in mmkv;
+
+const normalizeStorages = (storages: MMKV[] | Record<string, MMKV>) => {
+  if (Array.isArray(storages)) {
+    const isAnyStorageV4 = storages.some(isMMKVV4);
+
+    if (isAnyStorageV4) {
+      throw new Error(
+        '[Rozenite] Storage Plugin: MMKV arrays are not supported for v4 storages. Pass a record of storage IDs and MMKV instances.'
+      );
+    }
+
+    return Object.fromEntries(
+      (storages as MMKVV3[]).map((storage) => [storage['id'], storage])
+    );
+  }
+
+  return storages;
+};
+
+const getMMKVAdapter = (mmkv: MMKV): MMKVAdapter => {
+  if (isMMKVV4(mmkv)) {
+    return {
+      set: (key, value) => mmkv.set(key, value),
+      getBoolean: (key) => mmkv.getBoolean(key),
+      getString: (key) => mmkv.getString(key),
+      getNumber: (key) => mmkv.getNumber(key),
+      getBuffer: (key) => mmkv.getBuffer(key),
+      delete: (key) => mmkv.remove(key),
+      getAllKeys: () => mmkv.getAllKeys(),
+      addOnValueChangedListener: (callback) =>
+        mmkv.addOnValueChangedListener(callback),
+    };
+  }
+
+  return {
+    set: (key, value) => mmkv.set(key, value),
+    getBoolean: (key) => mmkv.getBoolean(key),
+    getString: (key) => mmkv.getString(key),
+    getNumber: (key) => mmkv.getNumber(key),
+    getBuffer: (key) => mmkv.getBuffer(key) as ArrayBuffer | undefined,
+    delete: (key) => mmkv.delete(key),
+    getAllKeys: () => mmkv.getAllKeys(),
+    addOnValueChangedListener: (callback) => mmkv.addOnValueChangedListener(callback),
+  };
+};
+
+const getEntry = (adapter: MMKVAdapter, key: string): StorageEntry | undefined => {
+  const stringValue = adapter.getString(key);
+
+  if (stringValue !== undefined && stringValue.length > 0) {
+    if (looksLikeGarbled(stringValue)) {
+      return {
+        key,
+        type: 'buffer',
+        value: Array.from(new TextEncoder().encode(stringValue)),
+      };
+    }
+
+    return {
+      key,
+      type: 'string',
+      value: stringValue,
+    };
+  }
+
+  const numberValue = adapter.getNumber(key);
+  if (numberValue !== undefined) {
+    return {
+      key,
+      type: 'number',
+      value: numberValue,
+    };
+  }
+
+  const booleanValue = adapter.getBoolean(key);
+  if (booleanValue !== undefined) {
+    return {
+      key,
+      type: 'boolean',
+      value: booleanValue,
+    };
+  }
+
+  const bufferValue = adapter.getBuffer(key);
+  if (bufferValue !== undefined) {
+    return {
+      key,
+      type: 'buffer',
+      value: Array.from(new Uint8Array(bufferValue)),
+    };
+  }
+
+  return undefined;
+};
+
+const setEntry = (adapter: MMKVAdapter, entry: StorageEntry) => {
+  if (entry.type === 'buffer') {
+    adapter.set(entry.key, new Uint8Array(entry.value).buffer);
+    return;
+  }
+
+  adapter.set(entry.key, entry.value);
+};
+
+const getStorageBlacklist = (
+  config: MMKVBlacklistConfig | undefined,
+  storageId: string
+) => {
+  if (!config) {
+    return undefined;
+  }
+
+  if (config instanceof RegExp) {
+    return config;
+  }
+
+  return config[storageId];
+};
+
+export const createMMKVStorageAdapter = ({
+  adapterId = 'mmkv',
+  adapterName = 'MMKV',
+  storages,
+  blacklist,
+}: CreateMMKVStorageAdapterOptions): StorageAdapter => {
+  const normalizedStorages = normalizeStorages(storages) as Record<string, MMKV>;
+
+  const storageNodes: StorageNode[] = Object.entries(normalizedStorages).map(
+    ([storageId, storage]) => {
+      const mmkv = getMMKVAdapter(storage);
+
+      return {
+        id: storageId,
+        name: storageId,
+        blacklist: getStorageBlacklist(blacklist, storageId),
+        capabilities: {
+          supportedTypes: DEFAULT_SUPPORTED_TYPES,
+        },
+        storage: {
+          kind: 'sync',
+          getAllKeys: () => mmkv.getAllKeys(),
+          get: (key) => getEntry(mmkv, key),
+          set: (entry) => setEntry(mmkv, entry),
+          delete: (key) => mmkv.delete(key),
+          subscribe: (callback) => mmkv.addOnValueChangedListener(callback),
+        },
+      };
+    }
+  );
+
+  return {
+    id: adapterId,
+    name: adapterName,
+    storages: storageNodes,
+  };
+};