@buoy-gg/js-top 7.0.3

package/lib/typescript/preset.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Pre-configured JS TOP tools for FloatingDevTools.
+ *
+ * Two presets:
+ *  - jsTopPreset: toggle-only chip that turns the floating busy% pill on/off.
+ *  - jsTopModalPreset: opens the Task Manager window (ranked live table).
+ *
+ * @example
+ * ```tsx
+ * import { jsTopPreset, jsTopModalPreset } from '@buoy-gg/js-top';
+ *
+ * <FloatingDevTools apps={[jsTopPreset, jsTopModalPreset]} />
+ * ```
+ */
+import { JsTopModal } from "./js-top/components/JsTopModal";
+export declare const JS_TOP_ENABLED_COLOR = "#34D399";
+export declare const JS_TOP_DISABLED_COLOR = "#6B7280";
+declare function JsTopToggleIcon({ size }: {
+    size: number;
+}): import("react").JSX.Element;
+declare function EmptyComponent(): null;
+/** Toggle-only preset: show/hide the floating busy% pill. */
+export declare const jsTopPreset: {
+    id: string;
+    name: string;
+    description: string;
+    slot: "row";
+    icon: typeof JsTopToggleIcon;
+    component: typeof EmptyComponent;
+    props: {};
+    launchMode: "toggle-only";
+    onPress: () => void;
+};
+/** Modal preset: the live Task Manager window. */
+export declare const jsTopModalPreset: {
+    id: string;
+    name: string;
+    description: string;
+    slot: "both";
+    icon: ({ size }: {
+        size: number;
+    }) => import("react").JSX.Element;
+    component: typeof JsTopModal;
+    props: {
+        enableSharedModalDimensions: boolean;
+    };
+};
+export {};
+//# sourceMappingURL=preset.d.ts.map

package/lib/typescript/preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAKH,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAE5D,eAAO,MAAM,oBAAoB,YAAY,CAAC;AAC9C,eAAO,MAAM,qBAAqB,YAAY,CAAC;AAE/C,iBAAS,eAAe,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BASlD;AAED,iBAAS,cAAc,SAEtB;AAED,6DAA6D;AAC7D,eAAO,MAAM,WAAW;;;;;;;;;;CAYvB,CAAC;AAEF,kDAAkD;AAClD,eAAO,MAAM,gBAAgB;;;;;qBAKV;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;CAOlC,CAAC"}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@buoy-gg/js-top",
+  "version": "7.0.3",
+  "description": "Live Task Manager for the React Native JS thread — see which timers, Promises, and callbacks are eating your JS FPS, ranked in real time. Part of Buoy devtools.",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "files": [
+    "src",
+    "lib"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@buoy-gg/shared-ui": "7.0.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": ">=0.76.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-native": "^0.73.0",
+    "typescript": "~5.8.3"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Buoy-gg/buoy.git",
+    "directory": "packages/js-top"
+  },
+  "bugs": {
+    "url": "https://github.com/LovesWorking/react-native-buoy/issues"
+  },
+  "homepage": "https://buoy.gg/tools/js-top",
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "devtools",
+    "debugging",
+    "react-native-devtools",
+    "flipper-alternative",
+    "performance",
+    "profiler",
+    "js-thread",
+    "task-manager"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf lib",
+    "test": "pnpm run typecheck"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,69 @@
+/**
+ * @buoy-gg/js-top — live Task Manager for the React Native JS thread.
+ *
+ * Pure JS (Expo Go + release compatible): wraps timers / rAF / microtasks /
+ * Promise reactions / legacy-bridge call-ins and books exclusive time per
+ * scheduling origin; a calibrated busy probe measures true thread occupancy
+ * so unattributable work is surfaced honestly instead of hidden.
+ *
+ * Coverage tiers beyond the core (promises, bridge, longtask correlation)
+ * are registered here at module scope — the controller installs them lazily
+ * on first engine start, so importing this package costs nothing until a
+ * viewer opens the tool.
+ */
+
+import { JsTopController } from "./js-top/engine/JsTopController";
+import { installPromisePatches } from "./js-top/engine/patches/promises";
+import { installBridgePatch } from "./js-top/engine/patches/bridge";
+import { installTimerPatches } from "./js-top/engine/patches/timers";
+import { installMicrotaskPatches } from "./js-top/engine/patches/microtasks";
+import {
+  clearLongtasks,
+  getFreezeStats,
+  getLongtasks,
+  installLongtaskObserver,
+} from "./js-top/engine/longtasks";
+
+JsTopController.registerTierInstaller(installPromisePatches);
+JsTopController.registerTierInstaller(installBridgePatch);
+JsTopController.registerTierInstaller(installLongtaskObserver);
+JsTopController.registerLongtaskProvider(getLongtasks);
+JsTopController.registerFreezeStatsProvider(getFreezeStats);
+JsTopController.registerClearHook(clearLongtasks);
+
+// Timer/microtask patches install at import so callbacks scheduled at APP
+// BOOT — the classic forgotten setInterval, the tool's #1 target — are
+// wrapped and attributable the moment any viewer opens the tool. Wrappers
+// resolve their origin lazily and cost one boolean per fire while the
+// engine is off. (Promise/bridge patches are more invasive and stay lazy —
+// they install on first engine start and cover work scheduled after it.)
+try {
+  installTimerPatches();
+  installMicrotaskPatches();
+} catch {
+  // Never let instrumentation break an app at import time.
+}
+
+export { JsTopController } from "./js-top/engine/JsTopController";
+export { jsTopSyncAdapter } from "./js-top/sync/jsTopSyncAdapter";
+export { JsTopModal } from "./js-top/components/JsTopModal";
+export type {
+  JsTopModalProps,
+  JsTopRemoteActions,
+} from "./js-top/components/JsTopModal";
+export { JsTopHudOverlay } from "./js-top/components/JsTopHudOverlay";
+export {
+  jsTopPreset,
+  jsTopModalPreset,
+  JS_TOP_ENABLED_COLOR,
+  JS_TOP_DISABLED_COLOR,
+} from "./preset";
+export type {
+  JsTopSnapshot,
+  JsTopRow,
+  JsTopLongtask,
+  JsTopOriginDetail,
+  JsTopTiers,
+  JsTopStatus,
+  TaskApi,
+} from "./js-top/types";

package/src/js-top/components/BusySparkline.tsx

@@ -0,0 +1,59 @@
+/**
+ * Busy% history sparkline — plain View bars (no SVG dependency), tinted by
+ * severity. Renders at most the trailing 60 buckets (15s).
+ */
+
+import { memo } from "react";
+import { StyleSheet, View } from "react-native";
+import { macOSColors } from "@buoy-gg/shared-ui";
+
+const MAX_POINTS = 60;
+
+function barColor(pct: number): string {
+  if (pct >= 80) return macOSColors.semantic.error;
+  if (pct >= 40) return macOSColors.semantic.warning;
+  return macOSColors.semantic.success;
+}
+
+export const BusySparkline = memo(function BusySparkline({
+  history,
+}: {
+  history: number[];
+}) {
+  const points = history.slice(-MAX_POINTS);
+  return (
+    <View style={styles.row} pointerEvents="none">
+      {points.map((pct, i) => (
+        <View
+          // Bars are positional by nature (a scrolling time axis); the array
+          // is fixed-length and rewritten wholesale each tick, so positional
+          // keys are correct here — this is not a prepend-list.
+          key={`b${i}`}
+          style={[
+            styles.bar,
+            {
+              height: Math.max(2, (pct / 100) * 28),
+              backgroundColor: barColor(pct),
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 1,
+    height: 28,
+    alignSelf: "stretch",
+  },
+  bar: {
+    flex: 1,
+    maxWidth: 6,
+    borderRadius: 1,
+    opacity: 0.9,
+  },
+});

package/src/js-top/components/JsTopHudOverlay.tsx

@@ -0,0 +1,78 @@
+/**
+ * Minimal floating HUD pill: busy% + the current top offender. Rendered by
+ * FloatingDevTools (guarded require) when the JS TOP toggle chip is on —
+ * same auto-mount pattern as the perf-monitor overlay. Display-only in v1
+ * (no drag; sits under the status bar on the left).
+ */
+
+import { useEffect, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { macOSColors } from "@buoy-gg/shared-ui";
+import type { JsTopSnapshot } from "../types";
+import { JsTopController } from "../engine/JsTopController";
+
+function busyColor(pct: number): string {
+  if (pct >= 80) return macOSColors.semantic.error;
+  if (pct >= 40) return macOSColors.semantic.warning;
+  return macOSColors.semantic.success;
+}
+
+export function JsTopHudOverlay() {
+  const [enabled, setEnabled] = useState(() => JsTopController.isEnabled());
+  const [snapshot, setSnapshot] = useState<JsTopSnapshot | null>(null);
+
+  useEffect(() => JsTopController.subscribeEnabled(setEnabled), []);
+
+  useEffect(() => {
+    if (!enabled) {
+      setSnapshot(null);
+      return;
+    }
+    return JsTopController.subscribe(setSnapshot);
+  }, [enabled]);
+
+  if (!enabled || !snapshot) return null;
+
+  const top = snapshot.rows.find((r) => r.api !== "unattributed");
+
+  return (
+    <View style={styles.pill} pointerEvents="none">
+      <Text style={[styles.busy, { color: busyColor(snapshot.busyPct) }]}>
+        {snapshot.busyPct.toFixed(0)}%
+      </Text>
+      {top && (
+        <Text style={styles.label} numberOfLines={1}>
+          {top.label}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  pill: {
+    position: "absolute",
+    top: 60,
+    left: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    backgroundColor: "rgba(10,10,12,0.85)",
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    maxWidth: 220,
+  },
+  busy: {
+    fontSize: 11,
+    fontWeight: "700",
+    fontVariant: ["tabular-nums"],
+  },
+  label: {
+    color: macOSColors.text.secondary ?? macOSColors.text.primary,
+    fontSize: 10,
+    flexShrink: 1,
+  },
+});