Add native typecheck and storage fallback

Author: roncohen

package.json

@@ -13,6 +13,7 @@
     "build": "lerna run build --stream",
     "test:ci": "lerna run test:ci --stream",
     "test": "lerna run test --stream",
+    "typecheck:native": "lerna run typecheck:native --stream",
     "format": "lerna run format --stream",
     "prettier": "lerna run prettier --stream",
     "prettier:fix": "lerna run prettier -- --write",

packages/browser-sdk/package.json

@@ -18,6 +18,7 @@
     "test:e2e": "yarn build && playwright test",
     "test:ci": "yarn test --reporter=default --reporter=junit --outputFile=junit.xml && yarn test:e2e",
     "coverage": "yarn test --coverage",
+    "typecheck:native": "tsc --project tsconfig.native.json",
     "lint": "eslint .",
     "lint:ci": "eslint --output-file eslint-report.json --format json .",
     "prettier": "prettier --check .",

packages/browser-sdk/src/feedback/ui/index.native.ts

@@ -1,12 +1,5 @@
-import { Position } from "../../ui/types";
-
 import { OpenFeedbackFormOptions } from "./types";
 
-export const DEFAULT_POSITION: Position = {
-  type: "DIALOG",
-  placement: "bottom-right",
-};
-
 export function openFeedbackForm(_options: OpenFeedbackFormOptions): void {
   // React Native doesn't support the web feedback UI.
   // Users should implement their own UI and use `feedback` or `useSendFeedback`.

packages/browser-sdk/src/flag/flagCache.ts

@@ -2,6 +2,8 @@ import { StorageAdapter } from "../storage";
 
 import { RawFlags } from "./flags";
 
+const DEFAULT_STORAGE_KEY = "__reflag_fetched_flags";
+
 interface cacheEntry {
   expireAt: number;
   staleAt: number;
@@ -48,25 +50,36 @@ export interface CacheResult {
   stale: boolean;
 }
 
+const memoryStorage = (): StorageAdapter => {
+  let value: string | null = null;
+  return {
+    getItem: async () => value,
+    setItem: async (_key, nextValue) => {
+      value = nextValue;
+    },
+    removeItem: async () => {
+      value = null;
+    },
+  };
+};
+
 export class FlagCache {
-  private storage: StorageAdapter | null;
+  private storage: StorageAdapter;
   private readonly storageKey: string;
   private readonly staleTimeMs: number;
   private readonly expireTimeMs: number;
 
   constructor({
     storage,
-    storageKey,
     staleTimeMs,
     expireTimeMs,
   }: {
     storage: StorageAdapter | null;
-    storageKey: string;
     staleTimeMs: number;
     expireTimeMs: number;
   }) {
-    this.storage = storage;
-    this.storageKey = storageKey;
+    this.storage = storage ?? memoryStorage();
+    this.storageKey = DEFAULT_STORAGE_KEY;
     this.staleTimeMs = staleTimeMs;
     this.expireTimeMs = expireTimeMs;
   }
@@ -82,7 +95,6 @@ export class FlagCache {
     let cacheData: CacheData = {};
 
     try {
-      if (!this.storage) return cacheData;
       const cachedResponseRaw = await this.storage.getItem(this.storageKey);
       if (cachedResponseRaw) {
         cacheData = validateCacheData(JSON.parse(cachedResponseRaw)) ?? {};
@@ -101,15 +113,13 @@ export class FlagCache {
       Object.entries(cacheData).filter(([_k, v]) => v.expireAt > Date.now()),
     );
 
-    if (!this.storage) return cacheData;
     await this.storage.setItem(this.storageKey, JSON.stringify(cacheData));
 
     return cacheData;
   }
 
   async get(key: string): Promise<CacheResult | undefined> {
     try {
-      if (!this.storage) return;
       const cachedResponseRaw = await this.storage.getItem(this.storageKey);
       if (cachedResponseRaw) {
         const cachedResponse = validateCacheData(JSON.parse(cachedResponseRaw));

packages/browser-sdk/src/flag/flags.ts

@@ -176,8 +176,9 @@ export interface CheckEvent {
   missingContextFields?: string[];
 }
 
-const localStorageFetchedFlagsKey = `__reflag_fetched_flags`;
 const storageOverridesKey = `__reflag_overrides`;
+const REFRESH_LIMIT_COUNT = 10;
+const REFRESH_LIMIT_WINDOW_MS = 5 * 60 * 1000;
 
 export type FlagOverrides = Record<string, boolean | undefined>;
 
@@ -205,6 +206,7 @@ export class FlagsClient {
   private flags: RawFlags = {};
   private fallbackFlags: FallbackFlags = {};
   private storage: StorageAdapter | null;
+  private refreshEvents: number[] = [];
 
   private config: Config = DEFAULT_FLAGS_CONFIG;
 
@@ -232,7 +234,11 @@ export class FlagsClient {
     this.logger = loggerWithPrefix(logger, "[Flags]");
     this.rateLimiter =
       rateLimiter ?? new RateLimiter(FLAG_EVENTS_PER_MIN, this.logger);
-    this.storage = resolveStorageAdapter(cache ? undefined : storage);
+    const storageResolution = resolveStorageAdapter(
+      cache ? undefined : storage,
+    );
+    this.storage = storageResolution.adapter;
+    this.logger.debug(`storage adapter: ${storageResolution.type}`);
     this.cache =
       cache ??
       this.setupCache(this.config.staleTimeMs, this.config.expireTimeMs);
@@ -416,6 +422,17 @@ export class FlagsClient {
       return;
     }
 
+    // rate limit refreshes to prevent accidental abuse
+    const now = Date.now();
+    this.refreshEvents = this.refreshEvents.filter(
+      (timestamp) => now - timestamp < REFRESH_LIMIT_WINDOW_MS,
+    );
+    if (this.refreshEvents.length >= REFRESH_LIMIT_COUNT) {
+      this.logger.warn("refresh rate limit exceeded");
+      return;
+    }
+    this.refreshEvents.push(now);
+
     const flags = await this.fetchFlags();
     if (flags) {
       this.setFetchedFlags(flags);
@@ -533,7 +550,6 @@ export class FlagsClient {
   private setupCache(staleTimeMs = 0, expireTimeMs = FLAGS_EXPIRE_MS) {
     return new FlagCache({
       storage: this.storage,
-      storageKey: localStorageFetchedFlagsKey,
       staleTimeMs,
       expireTimeMs,
     });

packages/browser-sdk/src/storage.ts

@@ -4,6 +4,12 @@ export type StorageAdapter = {
   removeItem?(key: string): Promise<void>;
 };
 
+export type StorageAdapterType =
+  | "custom"
+  | "localStorage"
+  | "asyncStorage"
+  | "none";
+
 function isLocalStorageUsable() {
   return (
     typeof localStorage !== "undefined" &&
@@ -14,17 +20,20 @@ function isLocalStorageUsable() {
 
 export function resolveStorageAdapter(
   storage?: StorageAdapter,
-): StorageAdapter | null {
-  if (storage) return storage;
+): { adapter: StorageAdapter | null; type: StorageAdapterType } {
+  if (storage) return { adapter: storage, type: "custom" };
   if (isLocalStorageUsable()) {
     return {
-      getItem: async (key) => localStorage.getItem(key),
-      setItem: async (key, value) => {
-        localStorage.setItem(key, value);
-      },
-      removeItem: async (key) => {
-        localStorage.removeItem(key);
+      adapter: {
+        getItem: async (key) => localStorage.getItem(key),
+        setItem: async (key, value) => {
+          localStorage.setItem(key, value);
+        },
+        removeItem: async (key) => {
+          localStorage.removeItem(key);
+        },
       },
+      type: "localStorage",
     };
   }
   // React Native: try AsyncStorage if available.
@@ -33,10 +42,10 @@ export function resolveStorageAdapter(
     const asyncStorage = require("@react-native-async-storage/async-storage");
     const adapter = asyncStorage?.default ?? asyncStorage;
     if (adapter?.getItem && adapter?.setItem) {
-      return adapter as StorageAdapter;
+      return { adapter: adapter as StorageAdapter, type: "asyncStorage" };
     }
   } catch {
     // ignore - not running in React Native or AsyncStorage not installed
   }
-  return null;
+  return { adapter: null, type: "none" };
 }

packages/browser-sdk/tsconfig.native.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "lib": [],
+    "types": [],
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.native.ts", "src/**/*.native.tsx"]
+}

packages/react-sdk/README.md

@@ -14,30 +14,6 @@ Install via npm:
 npm i @reflag/react-sdk
 ```
 
-### React Native (Expo)
-
-The React SDK works in React Native for flag evaluation and tracking. Web-only UI
-features (the toolbar and built-in feedback form) are not supported on React Native.
-Use your own UI and call `useSendFeedback` or `client.feedback` instead.
-
-An Expo example app lives at `packages/react-sdk/dev/expo`.
-
-AsyncStorage is automatically detected in React Native if you have
-`@react-native-async-storage/async-storage` installed. You can also pass it
-explicitly if you prefer:
-
-```tsx
-import AsyncStorage from "@react-native-async-storage/async-storage";
-
-<ReflagProvider
-  publishableKey="{YOUR_PUBLISHABLE_KEY}"
-  storage={AsyncStorage}
-  context={{ user: { id: "user_123" } }}
->
-  {children}
-</ReflagProvider>;
-```
-
 ## Get started
 
 ### 1. Add the `ReflagProvider` context provider
@@ -176,6 +152,25 @@ To retrieve flags along with their targeting information, use `useFlag(key: stri
 Note that accessing `isEnabled` on the object returned by `useFlag()` automatically
 generates a `check` event.
 
+## React Native
+
+The React SDK works in React Native for flag evaluation and tracking.
+Web-only UI features (the toolbar and built-in feedback form) are not supported on React Native.
+Use your own UI and call `useSendFeedback` or `client.feedback` instead.
+
+An Expo example app lives at `packages/react-sdk/dev/expo`.
+
+AsyncStorage is automatically detected in React Native if you have
+`@react-native-async-storage/async-storage` installed.
+
+Since the toolbar is not available in React Native, you can set local overrides
+programmatically:
+
+```tsx
+const client = useClient();
+client.getFlag("my-flag").setIsEnabledOverride(true);
+```
+
 ## Remote config
 
 Remote config is a dynamic and flexible approach to configuring flag behavior outside of your app – without needing to re-deploy it.

packages/react-sdk/package.json

@@ -16,6 +16,7 @@
     "test:watch": "vitest",
     "test:ci": "yarn test --reporter=default --reporter=junit --outputFile=junit.xml",
     "coverage": "yarn test --coverage",
+    "typecheck:native": "tsc --project tsconfig.native.json",
     "lint": "eslint .",
     "lint:ci": "eslint --output-file eslint-report.json --format json .",
     "prettier": "prettier --check .",

packages/react-sdk/tsconfig.native.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "lib": [],
+    "types": [],
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.native.ts", "src/**/*.native.tsx"]
+}