react-native-network-lens 0.0.0-stage → 0.1.0

package/src/components/ui/Pill.tsx

@@ -0,0 +1,53 @@
+import {
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+interface Props {
+  label: string;
+  color: string;
+  filled?: boolean;
+  small?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const Pill = ({ label, color, filled, small, style }: Props) => (
+  <View
+    style={[
+      styles.pill,
+      small && styles.pillSmall,
+      { borderColor: color },
+      filled ? { backgroundColor: color } : styles.outline,
+      style,
+    ]}
+  >
+    <Text
+      numberOfLines={1}
+      style={[
+        styles.text,
+        small && styles.textSmall,
+        filled ? styles.textFilled : { color },
+      ]}
+    >
+      {label}
+    </Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  pill: {
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    alignSelf: 'flex-start',
+  },
+  pillSmall: { paddingHorizontal: 4, paddingVertical: 1, borderRadius: 4 },
+  outline: { backgroundColor: 'transparent' },
+  text: { fontSize: 12, fontWeight: '700', letterSpacing: 0.3 },
+  textSmall: { fontSize: 11 },
+  textFilled: { color: '#ffffff' },
+});

package/src/components/ui/SearchInput.tsx

@@ -0,0 +1,97 @@
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import { IconButton } from './Button';
+
+interface Props {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder?: string;
+  /** When provided, shows "n/m" and previous/next buttons. */
+  matches?: {
+    count: number;
+    index: number;
+    onPrev: () => void;
+    onNext: () => void;
+  };
+  style?: StyleProp<ViewStyle>;
+}
+
+export const SearchInput = ({
+  value,
+  onChangeText,
+  placeholder = 'Search',
+  matches,
+  style,
+}: Props) => {
+  const theme = useTheme();
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: theme.colors.surfaceAlt },
+        style,
+      ]}
+    >
+      <TextInput
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={theme.colors.textMuted}
+        accessibilityLabel={placeholder}
+        autoCapitalize="none"
+        autoCorrect={false}
+        returnKeyType="search"
+        onSubmitEditing={matches?.onNext}
+        style={[styles.input, { color: theme.colors.text }]}
+      />
+      {matches && value.length > 0 && (
+        <Text style={[styles.count, { color: theme.colors.textMuted }]}>
+          {matches.count === 0 ? '0' : `${matches.index + 1}/${matches.count}`}
+        </Text>
+      )}
+      {matches && (
+        <>
+          <IconButton
+            glyph="↑"
+            accessibilityLabel="Previous match"
+            onPress={matches.onPrev}
+            disabled={!matches.count}
+          />
+          <IconButton
+            glyph="↓"
+            accessibilityLabel="Next match"
+            onPress={matches.onNext}
+            disabled={!matches.count}
+          />
+        </>
+      )}
+      {value.length > 0 && (
+        <IconButton
+          glyph="✕"
+          accessibilityLabel="Clear search"
+          onPress={() => onChangeText('')}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 10,
+    paddingLeft: 10,
+    paddingRight: 2,
+    minHeight: 38,
+  },
+  input: { flex: 1, fontSize: 14, paddingVertical: 6, paddingHorizontal: 0 },
+  count: { fontSize: 12, marginHorizontal: 4, fontVariant: ['tabular-nums'] },
+});

package/src/components/ui/Section.tsx

@@ -0,0 +1,133 @@
+import type { ReactNode } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '../../theme';
+
+export const Section = ({
+  title,
+  right,
+  children,
+}: {
+  title: string;
+  right?: ReactNode;
+  children: ReactNode;
+}) => {
+  const theme = useTheme();
+  return (
+    <View style={styles.section}>
+      <View style={styles.header}>
+        <Text style={[styles.title, { color: theme.colors.textMuted }]}>
+          {title.toUpperCase()}
+        </Text>
+        {right}
+      </View>
+      <View style={[styles.body, { backgroundColor: theme.colors.surface }]}>
+        {children}
+      </View>
+    </View>
+  );
+};
+
+export const KeyValueList = ({
+  entries,
+  emptyLabel = 'None',
+  mono,
+}: {
+  entries: [string, string][];
+  emptyLabel?: string;
+  mono?: boolean;
+}) => {
+  const theme = useTheme();
+  if (entries.length === 0) {
+    return (
+      <Text style={[styles.empty, { color: theme.colors.textMuted }]}>
+        {emptyLabel}
+      </Text>
+    );
+  }
+  return (
+    <View>
+      {entries.map(([key, value], index) => (
+        <View
+          key={`${key}-${index}`}
+          style={[
+            styles.row,
+            index > 0 && {
+              borderTopColor: theme.colors.border,
+              borderTopWidth: StyleSheet.hairlineWidth,
+            },
+          ]}
+        >
+          <Text
+            selectable
+            style={[styles.key, { color: theme.colors.textMuted }]}
+          >
+            {key}
+          </Text>
+          <Text
+            selectable
+            style={[
+              styles.value,
+              { color: theme.colors.text },
+              mono && [styles.mono, { fontFamily: theme.fonts.mono }],
+            ]}
+          >
+            {value}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+export const EmptyState = ({
+  title,
+  subtitle,
+}: {
+  title: string;
+  subtitle?: string;
+}) => {
+  const theme = useTheme();
+  return (
+    <View style={styles.emptyState}>
+      <Text style={[styles.emptyTitle, { color: theme.colors.text }]}>
+        {title}
+      </Text>
+      {subtitle ? (
+        <Text style={[styles.emptySubtitle, { color: theme.colors.textMuted }]}>
+          {subtitle}
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: { marginTop: 14, paddingHorizontal: 12 },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 6,
+    paddingHorizontal: 2,
+  },
+  title: { fontSize: 11, fontWeight: '700', letterSpacing: 0.8 },
+  body: { borderRadius: 10, paddingHorizontal: 12, paddingVertical: 4 },
+  row: { paddingVertical: 8 },
+  key: { fontSize: 12, fontWeight: '600', marginBottom: 2 },
+  value: { fontSize: 14 },
+  mono: { fontSize: 12 },
+  empty: { fontSize: 13, paddingVertical: 10, fontStyle: 'italic' },
+  emptyState: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 32,
+  },
+  emptyTitle: { fontSize: 16, fontWeight: '600', textAlign: 'center' },
+  emptySubtitle: {
+    fontSize: 13,
+    textAlign: 'center',
+    marginTop: 6,
+    lineHeight: 18,
+  },
+});

package/src/components/ui/SegmentedControl.tsx

@@ -0,0 +1,79 @@
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+
+interface Props<T extends string> {
+  options: { value: T; label: string; badge?: boolean }[];
+  value: T;
+  onChange: (value: T) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const SegmentedControl = <T extends string>({
+  options,
+  value,
+  onChange,
+  style,
+}: Props<T>) => {
+  const theme = useTheme();
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: theme.colors.surfaceAlt },
+        style,
+      ]}
+    >
+      {options.map((option) => {
+        const selected = option.value === value;
+        return (
+          <Pressable
+            key={option.value}
+            accessibilityRole="tab"
+            accessibilityState={{ selected }}
+            onPress={() => onChange(option.value)}
+            style={[
+              styles.segment,
+              selected && { backgroundColor: theme.colors.surface },
+            ]}
+          >
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.label,
+                {
+                  color: selected ? theme.colors.text : theme.colors.textMuted,
+                },
+                selected && styles.labelSelected,
+              ]}
+            >
+              {option.label}
+              {option.badge && (
+                <Text style={{ color: theme.colors.primary }}> •</Text>
+              )}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flexDirection: 'row', borderRadius: 10, padding: 3 },
+  segment: {
+    flex: 1,
+    paddingVertical: 7,
+    paddingHorizontal: 6,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  label: { fontSize: 13, fontWeight: '500' },
+  labelSelected: { fontWeight: '700' },
+});

package/src/components/ui/index.ts

@@ -0,0 +1,6 @@
+export { Pill } from './Pill';
+export { TextButton, IconButton } from './Button';
+export { SegmentedControl } from './SegmentedControl';
+export { SearchInput } from './SearchInput';
+export { Section, KeyValueList, EmptyState } from './Section';
+export { ActionSheet, type ActionItem } from './ActionSheet';

package/src/core/Logger.ts

@@ -0,0 +1,293 @@
+import NetworkRequest from './NetworkRequest';
+import * as XHRInterceptor from './XHRInterceptor';
+import type { NetworkLensOptions, RequestMethod } from '../types';
+import debounce from '../utils/debounce';
+import { extractHost } from '../utils/url';
+import { byteLength } from '../utils/format';
+import { warn } from '../utils/logger';
+
+export const DEFAULT_MAX_REQUESTS = 500;
+
+/** Best-effort byte size when the server sent no Content-Length. */
+const measureResponse = (response: unknown): number => {
+  if (typeof response === 'string') return byteLength(response);
+  if (response && typeof response === 'object') {
+    const sized = response as { size?: unknown; byteLength?: unknown };
+    if (typeof sized.size === 'number') return sized.size; // Blob
+    if (typeof sized.byteLength === 'number') return sized.byteLength; // ArrayBuffer
+    try {
+      return byteLength(JSON.stringify(response));
+    } catch {
+      return 0;
+    }
+  }
+  return 0;
+};
+export const DEFAULT_REFRESH_RATE = 50;
+
+type Listener = () => void;
+
+/**
+ * Central store. Holds the captured requests (newest first) and publishes an
+ * immutable snapshot that React reads through `useSyncExternalStore`.
+ */
+export default class Logger {
+  private requests: NetworkRequest[] = [];
+  private snapshot: NetworkRequest[] = [];
+  private byXhrId = new Map<number, NetworkRequest>();
+  private listeners = new Set<Listener>();
+  private nextId = 0;
+  private maxRequests = DEFAULT_MAX_REQUESTS;
+  private refreshRate = DEFAULT_REFRESH_RATE;
+  private ignoredHosts?: Set<string>;
+  private ignoredUrls?: Set<string>;
+  private ignoredPatterns?: RegExp[];
+  private paused = false;
+  private dirty = false;
+  private publishDebounced = debounce(() => this.publish(), this.refreshRate);
+
+  /** True while XMLHttpRequest is being intercepted by this logger. */
+  enabled = false;
+
+  // ---------------------------------------------------------------------
+  // Subscriptions
+  // ---------------------------------------------------------------------
+
+  subscribe = (listener: Listener): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  getSnapshot = (): NetworkRequest[] => this.snapshot;
+
+  isPaused = (): boolean => this.paused;
+
+  private emit() {
+    this.listeners.forEach((listener) => listener());
+  }
+
+  private publish() {
+    if (this.paused) return;
+    if (!this.dirty) return;
+    this.dirty = false;
+    this.snapshot = this.requests.slice();
+    this.emit();
+  }
+
+  private schedulePublish() {
+    this.dirty = true;
+    this.publishDebounced();
+  }
+
+  // ---------------------------------------------------------------------
+  // Interceptor callbacks
+  // ---------------------------------------------------------------------
+
+  private isIgnored(method: string, url: string): boolean {
+    if (this.ignoredHosts?.has(extractHost(url))) return true;
+    if (this.ignoredUrls?.has(url)) return true;
+    if (
+      this.ignoredPatterns?.some((pattern) => pattern.test(`${method} ${url}`))
+    )
+      return true;
+    return false;
+  }
+
+  private onOpen = (
+    method: RequestMethod,
+    url: string,
+    xhr: XHRInterceptor.InterceptedXHR
+  ) => {
+    if (this.isIgnored(method, url)) return;
+    const id = this.nextId++;
+    xhr.__lensId = id;
+    const request = new NetworkRequest(String(id), method, url);
+    this.byXhrId.set(id, request);
+    this.requests.unshift(request);
+    while (this.requests.length > this.maxRequests) {
+      const dropped = this.requests.pop();
+      if (dropped) this.byXhrId.delete(Number(dropped.id));
+    }
+    this.schedulePublish();
+  };
+
+  private get = (xhr: XHRInterceptor.InterceptedXHR) =>
+    xhr.__lensId === undefined ? undefined : this.byXhrId.get(xhr.__lensId);
+
+  private onRequestHeader = (
+    header: string,
+    value: string,
+    xhr: XHRInterceptor.InterceptedXHR
+  ) => {
+    const request = this.get(xhr);
+    if (!request) return;
+    request.requestHeaders[header] = value;
+  };
+
+  private onSend = (body: unknown, xhr: XHRInterceptor.InterceptedXHR) => {
+    const request = this.get(xhr);
+    if (!request) return;
+    request.update({ startTime: Date.now(), dataSent: body });
+    this.schedulePublish();
+  };
+
+  private onHeadersReceived = (
+    status: number,
+    contentType: string,
+    contentLength: number,
+    headers: Record<string, string>,
+    xhr: XHRInterceptor.InterceptedXHR
+  ) => {
+    const request = this.get(xhr);
+    if (!request) return;
+    request.update({
+      status,
+      responseContentType: contentType,
+      responseSize: contentLength,
+      responseHeaders: headers,
+    });
+    this.schedulePublish();
+  };
+
+  private onResponse = (
+    status: number,
+    timeout: number,
+    response: unknown,
+    responseURL: string,
+    responseType: string,
+    xhr: XHRInterceptor.InterceptedXHR
+  ) => {
+    const request = this.get(xhr);
+    if (!request) return;
+    const failed = status <= 0;
+    request.update({
+      endTime: Date.now(),
+      status,
+      timeout,
+      response,
+      responseURL,
+      responseType,
+      state: failed ? 'failed' : 'done',
+      failureReason: failed ? (request.failureReason ?? 'error') : undefined,
+    });
+    if (!failed && !request.responseSize) {
+      request.responseSize = measureResponse(response);
+    }
+    this.schedulePublish();
+  };
+
+  private onFailure = (
+    reason: 'error' | 'timeout' | 'abort',
+    xhr: XHRInterceptor.InterceptedXHR
+  ) => {
+    const request = this.get(xhr);
+    if (!request) return;
+    request.update({
+      state: 'failed',
+      failureReason: reason,
+      endTime: request.endTime || Date.now(),
+    });
+    this.schedulePublish();
+  };
+
+  // ---------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------
+
+  start = (options: NetworkLensOptions = {}): void => {
+    if (options.enabled === false) {
+      if (this.enabled) this.stop();
+      return;
+    }
+    if (this.enabled) return;
+
+    if (options.maxRequests !== undefined) {
+      if (typeof options.maxRequests !== 'number' || options.maxRequests < 1) {
+        warn(
+          '`maxRequests` must be a number greater than 0. Using the default.'
+        );
+      } else {
+        this.maxRequests = options.maxRequests;
+      }
+    }
+    if (options.refreshRate !== undefined) {
+      if (typeof options.refreshRate !== 'number' || options.refreshRate < 1) {
+        warn(
+          '`refreshRate` must be a number greater than 0. Using the default.'
+        );
+      } else {
+        this.refreshRate = options.refreshRate;
+        this.publishDebounced = debounce(
+          () => this.publish(),
+          this.refreshRate
+        );
+      }
+    }
+    this.ignoredHosts = options.ignoredHosts?.length
+      ? new Set(options.ignoredHosts)
+      : undefined;
+    this.ignoredUrls = options.ignoredUrls?.length
+      ? new Set(options.ignoredUrls)
+      : undefined;
+    this.ignoredPatterns = options.ignoredPatterns?.length
+      ? options.ignoredPatterns
+      : undefined;
+
+    XHRInterceptor.setCallbacks({
+      onOpen: this.onOpen,
+      onRequestHeader: this.onRequestHeader,
+      onSend: this.onSend,
+      onHeadersReceived: this.onHeadersReceived,
+      onResponse: this.onResponse,
+      onFailure: this.onFailure,
+    });
+    XHRInterceptor.enableInterception();
+    this.enabled = true;
+    this.emit();
+  };
+
+  stop = (): void => {
+    if (!this.enabled) return;
+    XHRInterceptor.disableInterception();
+    this.publishDebounced.cancel();
+    this.enabled = false;
+    this.paused = false;
+    this.requests = [];
+    this.byXhrId.clear();
+    this.nextId = 0;
+    this.maxRequests = DEFAULT_MAX_REQUESTS;
+    this.refreshRate = DEFAULT_REFRESH_RATE;
+    this.ignoredHosts = undefined;
+    this.ignoredUrls = undefined;
+    this.ignoredPatterns = undefined;
+    this.snapshot = [];
+    this.dirty = false;
+    this.emit();
+  };
+
+  getRequests = (): NetworkRequest[] => this.snapshot;
+
+  getRequest = (id: string): NetworkRequest | undefined =>
+    this.requests.find((request) => request.id === id);
+
+  clear = (): void => {
+    this.requests = [];
+    this.byXhrId.clear();
+    this.snapshot = [];
+    this.dirty = false;
+    this.emit();
+  };
+
+  setPaused = (paused: boolean): void => {
+    if (this.paused === paused) return;
+    this.paused = paused;
+    if (!paused) {
+      this.dirty = true;
+      this.publish();
+    } else {
+      this.emit();
+    }
+  };
+}