react-native-vconsole 0.0.1 → 0.2.0

package/src/core/consoleProxy.ts

@@ -0,0 +1,108 @@
+import type { LogEntry, LogLevel } from '../types';
+
+type LogListener = (entries: LogEntry[]) => void;
+type ConsoleMethod = (...args: unknown[]) => void;
+
+const MAX_LOG_COUNT = 1000;
+
+const listeners = new Set<LogListener>();
+const entries: LogEntry[] = [];
+const originalConsole: Partial<Record<LogLevel, ConsoleMethod>> = {};
+
+let isInstalled = false;
+let logId = 1;
+
+function safeSerialize(value: unknown): string {
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (value instanceof Error) {
+    return `${value.name}: ${value.message}`;
+  }
+
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function buildText(args: unknown[]): string {
+  return args.map((item) => safeSerialize(item)).join(' ');
+}
+
+function notify() {
+  const next = [...entries];
+  listeners.forEach((listener) => {
+    listener(next);
+  });
+}
+
+function pushEntry(level: LogLevel, args: unknown[]) {
+  entries.push({
+    id: logId++,
+    level,
+    args,
+    text: buildText(args),
+    timestamp: Date.now(),
+  });
+
+  if (entries.length > MAX_LOG_COUNT) {
+    entries.splice(0, entries.length - MAX_LOG_COUNT);
+  }
+}
+
+export function installConsoleProxy() {
+  if (isInstalled) {
+    return;
+  }
+
+  const levels: LogLevel[] = ['log', 'info', 'warn', 'error'];
+  levels.forEach((level) => {
+    const original = console[level] as ConsoleMethod;
+    originalConsole[level] = original;
+
+    console[level] = (...args: unknown[]) => {
+      pushEntry(level, args);
+      notify();
+      original(...args);
+    };
+  });
+
+  isInstalled = true;
+}
+
+export function uninstallConsoleProxy() {
+  if (!isInstalled) {
+    return;
+  }
+
+  const levels: LogLevel[] = ['log', 'info', 'warn', 'error'];
+  levels.forEach((level) => {
+    const original = originalConsole[level];
+    if (original) {
+      console[level] = original as ConsoleMethod;
+    }
+  });
+
+  isInstalled = false;
+}
+
+export function getLogEntries(): LogEntry[] {
+  return [...entries];
+}
+
+export function clearLogEntries() {
+  entries.length = 0;
+  notify();
+}
+
+export function subscribeLogEntries(listener: LogListener) {
+  listeners.add(listener);
+  listener(getLogEntries());
+
+  return () => {
+    listeners.delete(listener);
+  };
+}

package/src/core/xhrProxy.ts

@@ -0,0 +1,319 @@
+import type { NetworkEntry } from '../types';
+
+type NetworkListener = (entries: NetworkEntry[]) => void;
+type InstallXhrProxyOptions = {
+  filterHosts?: string[];
+};
+
+const MAX_NETWORK_COUNT = 500;
+
+const listeners = new Set<NetworkListener>();
+const entries: NetworkEntry[] = [];
+
+let isInstalled = false;
+let networkId = 1;
+let OriginalXHR: typeof XMLHttpRequest | undefined;
+let ignoredHosts = new Set<string>();
+
+function normalizeHosts(hosts?: string[]): Set<string> {
+  return new Set(
+    (hosts ?? []).map((item) => item.trim().toLowerCase()).filter(Boolean)
+  );
+}
+
+function getHostFromUrl(rawUrl: string): string | undefined {
+  if (!rawUrl) {
+    return undefined;
+  }
+
+  const isAbsoluteHttp = /^https?:\/\//i.test(rawUrl);
+  const isProtocolRelative = /^\/\//.test(rawUrl);
+  if (!isAbsoluteHttp && !isProtocolRelative) {
+    return undefined;
+  }
+
+  try {
+    const normalizedUrl = isProtocolRelative ? `https:${rawUrl}` : rawUrl;
+    return new URL(normalizedUrl).host.toLowerCase();
+  } catch {
+    const normalizedUrl = isProtocolRelative ? `https:${rawUrl}` : rawUrl;
+    const matched = normalizedUrl.match(/^https?:\/\/([^/]+)/i);
+    return matched?.[1]?.toLowerCase();
+  }
+}
+
+function shouldSkipNetworkCapture(rawUrl: string): boolean {
+  const host = getHostFromUrl(rawUrl);
+  if (!host) {
+    return false;
+  }
+  return ignoredHosts.has(host);
+}
+
+function notify() {
+  const next = [...entries];
+  listeners.forEach((listener) => {
+    listener(next);
+  });
+}
+
+function trimEntries() {
+  if (entries.length > MAX_NETWORK_COUNT) {
+    entries.splice(0, entries.length - MAX_NETWORK_COUNT);
+  }
+}
+
+function isPromiseLike(value: unknown): value is Promise<unknown> {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'then' in value &&
+    typeof (value as { then?: unknown }).then === 'function'
+  );
+}
+
+function getHeaderCaseInsensitive(
+  headers: Record<string, string>,
+  key: string
+): string | undefined {
+  const target = key.toLowerCase();
+  const foundKey = Object.keys(headers).find(
+    (item) => item.toLowerCase() === target
+  );
+  return foundKey ? headers[foundKey] : undefined;
+}
+
+function parseBlobLikeJson(blobLike: unknown): Promise<unknown> | undefined {
+  if (
+    typeof blobLike === 'object' &&
+    blobLike !== null &&
+    'text' in blobLike &&
+    typeof (blobLike as { text?: unknown }).text === 'function'
+  ) {
+    const textFn = (blobLike as { text: () => Promise<string> }).text;
+    return textFn()
+      .then((text) => {
+        try {
+          return JSON.parse(text);
+        } catch {
+          return text;
+        }
+      })
+      .catch(() => '[Blob response]');
+  }
+
+  if (typeof Response !== 'undefined') {
+    try {
+      const response = new Response(blobLike as never);
+      return response
+        .text()
+        .then((text) => {
+          try {
+            return JSON.parse(text);
+          } catch {
+            return text;
+          }
+        })
+        .catch(() => '[Blob response]');
+    } catch {
+      return undefined;
+    }
+  }
+
+  return undefined;
+}
+
+function parseResponseData(
+  xhr: XMLHttpRequest,
+  responseHeaders: Record<string, string>
+): unknown | Promise<unknown> {
+  const responseType = xhr.responseType ?? '';
+  const canReadResponseText = responseType === '' || responseType === 'text';
+
+  if (canReadResponseText) {
+    try {
+      const responseText = xhr.responseText;
+      if (!responseText) {
+        return '';
+      }
+      try {
+        return JSON.parse(responseText);
+      } catch {
+        return responseText;
+      }
+    } catch {
+      // Some RN runtimes still throw for responseText access.
+      return xhr.response ?? '';
+    }
+  }
+
+  if (responseType === 'json') {
+    return xhr.response ?? null;
+  }
+
+  if (responseType === 'blob') {
+    const contentType =
+      getHeaderCaseInsensitive(responseHeaders, 'content-type') ?? '';
+    if (contentType.toLowerCase().includes('application/json')) {
+      const parsed = parseBlobLikeJson(xhr.response);
+      if (parsed) {
+        return parsed;
+      }
+    }
+    return '[Blob response]';
+  }
+
+  if (responseType === 'arraybuffer') {
+    return '[ArrayBuffer response]';
+  }
+
+  return xhr.response ?? '';
+}
+
+function parseHeaders(rawHeaders: string): Record<string, string> {
+  const result: Record<string, string> = {};
+  rawHeaders
+    .split('\r\n')
+    .filter(Boolean)
+    .forEach((line) => {
+      const splitIndex = line.indexOf(':');
+      if (splitIndex > 0) {
+        const key = line.slice(0, splitIndex).trim();
+        const value = line.slice(splitIndex + 1).trim();
+        result[key] = value;
+      }
+    });
+  return result;
+}
+
+export function installXhrProxy(options?: InstallXhrProxyOptions) {
+  ignoredHosts = normalizeHosts(options?.filterHosts);
+
+  if (isInstalled || typeof XMLHttpRequest === 'undefined') {
+    return;
+  }
+
+  OriginalXHR = global.XMLHttpRequest;
+  if (!OriginalXHR) {
+    return;
+  }
+
+  class PatchedXMLHttpRequest extends OriginalXHR {
+    private _entryId = 0;
+    private _requestHeaders: Record<string, string> = {};
+    private _method = 'GET';
+    private _url = '';
+
+    open(method: string, url: string, ...rest: unknown[]) {
+      this._method = (method || 'GET').toUpperCase();
+      this._url = url;
+      return super.open(method, url, ...(rest as []));
+    }
+
+    setRequestHeader(header: string, value: string) {
+      this._requestHeaders[header] = value;
+      return super.setRequestHeader(header, value);
+    }
+
+    send(body?: unknown) {
+      if (shouldSkipNetworkCapture(this._url)) {
+        return super.send(body as never);
+      }
+
+      const entry: NetworkEntry = {
+        id: networkId++,
+        method: this._method,
+        url: this._url,
+        startedAt: Date.now(),
+        requestHeaders: { ...this._requestHeaders },
+        requestBody: body ?? undefined,
+        responseHeaders: {},
+      };
+
+      this._entryId = entry.id;
+      entries.push(entry);
+      trimEntries();
+      notify();
+
+      this.addEventListener('readystatechange', () => {
+        if (this.readyState !== 4) {
+          return;
+        }
+
+        const current = entries.find((item) => item.id === this._entryId);
+        if (!current) {
+          return;
+        }
+
+        // Some internal RN/Metro requests start as relative paths (e.g. /symbolicate).
+        // Re-check with responseURL at completion to apply host filters correctly.
+        const finalUrl = this.responseURL || this._url;
+        if (shouldSkipNetworkCapture(finalUrl)) {
+          const index = entries.findIndex((item) => item.id === this._entryId);
+          if (index >= 0) {
+            entries.splice(index, 1);
+            notify();
+          }
+          return;
+        }
+
+        const finishedAt = Date.now();
+        current.status = this.status;
+        current.finishedAt = finishedAt;
+        current.durationMs = finishedAt - current.startedAt;
+        current.responseHeaders = parseHeaders(this.getAllResponseHeaders());
+        try {
+          const parsedData = parseResponseData(this, current.responseHeaders);
+          if (isPromiseLike(parsedData)) {
+            current.responseData = '[Parsing blob response...]';
+            notify();
+            parsedData
+              .then((resolved) => {
+                current.responseData = resolved;
+                notify();
+              })
+              .catch(() => {
+                current.responseData = '[Blob response]';
+                notify();
+              });
+            return;
+          }
+          current.responseData = parsedData;
+        } catch {
+          current.responseData = '[Unreadable response]';
+        }
+        notify();
+      });
+
+      return super.send(body as never);
+    }
+  }
+
+  global.XMLHttpRequest = PatchedXMLHttpRequest as typeof XMLHttpRequest;
+  isInstalled = true;
+}
+
+export function uninstallXhrProxy() {
+  if (!isInstalled || !OriginalXHR) {
+    return;
+  }
+  global.XMLHttpRequest = OriginalXHR;
+  isInstalled = false;
+}
+
+export function getNetworkEntries(): NetworkEntry[] {
+  return [...entries];
+}
+
+export function clearNetworkEntries() {
+  entries.length = 0;
+  notify();
+}
+
+export function subscribeNetworkEntries(listener: NetworkListener) {
+  listeners.add(listener);
+  listener(getNetworkEntries());
+  return () => {
+    listeners.delete(listener);
+  };
+}

package/src/index.tsx

@@ -0,0 +1,36 @@
+import { NativeModules, Platform } from 'react-native';
+import { VConsole } from './VConsole';
+import type { AppInfo, SystemInfo } from './types';
+import type { VConsoleProps } from './VConsole';
+
+const LINKING_ERROR =
+  `The package 'react-native-vconsole' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
+
+const Vconsole = NativeModules.Vconsole
+  ? NativeModules.Vconsole
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
+
+export function multiply(a: number, b: number): Promise<number> {
+  return Vconsole.multiply(a, b);
+}
+
+export function getSystemInfo(): Promise<SystemInfo> {
+  return Vconsole.getSystemInfo();
+}
+
+export function getAppInfo(): Promise<AppInfo> {
+  return Vconsole.getAppInfo();
+}
+
+export { VConsole };
+export type { AppInfo, SystemInfo, VConsoleProps };

package/src/types.ts

@@ -0,0 +1,42 @@
+export type VConsoleTab = 'Log' | 'Network' | 'System' | 'App';
+
+export type LogLevel = 'log' | 'info' | 'warn' | 'error';
+
+export type LogFilterTab = 'All' | LogLevel;
+
+export interface LogEntry {
+  id: number;
+  level: LogLevel;
+  args: unknown[];
+  text: string;
+  timestamp: number;
+}
+
+export interface NetworkEntry {
+  id: number;
+  method: string;
+  url: string;
+  status?: number;
+  startedAt: number;
+  finishedAt?: number;
+  durationMs?: number;
+  requestHeaders: Record<string, string>;
+  requestBody?: unknown;
+  responseHeaders: Record<string, string>;
+  responseData?: unknown;
+}
+
+export interface SystemInfo {
+  manufacturer: string;
+  model: string;
+  osVersion: string;
+  networkType: string;
+  isNetworkReachable: boolean;
+  totalMemory: number;
+  availableMemory: number;
+}
+
+export interface AppInfo {
+  appVersion: string;
+  buildNumber: string;
+}

package/android/README.md

@@ -1,14 +0,0 @@
-README
-======
-
-If you want to publish the lib as a maven dependency, follow these steps before publishing a new version to npm:
-
-1. Be sure to have the Android [SDK](https://developer.android.com/studio/index.html) and [NDK](https://developer.android.com/ndk/guides/index.html) installed
-2. Be sure to have a `local.properties` file in this folder that points to the Android SDK and NDK
-```
-ndk.dir=/Users/{username}/Library/Android/sdk/ndk-bundle
-sdk.dir=/Users/{username}/Library/Android/sdk
-```
-3. Delete the `maven` folder
-4. Run `./gradlew installArchives`
-5. Verify that latest set of generated files is in the maven folder with the correct version number

package/android/src/main/java/wiki/qdc/rn/vconsole/ReactNativeVconsoleModule.java

@@ -1,27 +0,0 @@
-package wiki.qdc.rn.vconsole;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.bridge.Callback;
-
-public class ReactNativeVconsoleModule extends ReactContextBaseJavaModule {
-
-    private final ReactApplicationContext reactContext;
-
-    public ReactNativeVconsoleModule(ReactApplicationContext reactContext) {
-        super(reactContext);
-        this.reactContext = reactContext;
-    }
-
-    @Override
-    public String getName() {
-        return "ReactNativeVconsole";
-    }
-
-    @ReactMethod
-    public void sampleMethod(String stringArgument, int numberArgument, Callback callback) {
-        // TODO: Implement some actually useful functionality
-        callback.invoke("Received numberArgument: " + numberArgument + " stringArgument: " + stringArgument);
-    }
-}

package/android/src/main/java/wiki/qdc/rn/vconsole/ReactNativeVconsolePackage.java

@@ -1,23 +0,0 @@
-package wiki.qdc.rn.vconsole;
-
-import java.util.Arrays;
-import java.util.Collections;
-import java.util.List;
-
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.NativeModule;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-import com.facebook.react.bridge.JavaScriptModule;
-
-public class ReactNativeVconsolePackage implements ReactPackage {
-    @Override
-    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
-        return Arrays.<NativeModule>asList(new ReactNativeVconsoleModule(reactContext));
-    }
-
-    @Override
-    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-        return Collections.emptyList();
-    }
-}

package/index.js

@@ -1,5 +0,0 @@
-import { NativeModules } from 'react-native';
-
-const { ReactNativeVconsole } = NativeModules;
-
-export default ReactNativeVconsole;

package/ios/ReactNativeVconsole.h

@@ -1,5 +0,0 @@
-#import <React/RCTBridgeModule.h>
-
-@interface ReactNativeVconsole : NSObject <RCTBridgeModule>
-
-@end

package/ios/ReactNativeVconsole.m

@@ -1,13 +0,0 @@
-#import "ReactNativeVconsole.h"
-
-@implementation ReactNativeVconsole
-
-RCT_EXPORT_MODULE()
-
-RCT_EXPORT_METHOD(sampleMethod:(NSString *)stringArgument numberParameter:(nonnull NSNumber *)numberArgument callback:(RCTResponseSenderBlock)callback)
-{
-    // TODO: Implement some actually useful functionality
-    callback(@[[NSString stringWithFormat: @"numberArgument: %@ stringArgument: %@", numberArgument, stringArgument]]);
-}
-
-@end