react-native-inapp-inspector 2.3.14 → 2.3.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/commonjs/components/AnimatedEntrance.js +3 -3
- package/dist/commonjs/components/ConsoleLogCard.js +174 -100
- package/dist/commonjs/components/Inspector/AnalyticsTab.js +0 -22
- package/dist/commonjs/components/Inspector/ConsoleTab.js +25 -38
- package/dist/commonjs/components/Inspector/CrashTab.js +19 -28
- package/dist/commonjs/components/Inspector/DeviceInfoTab.js +198 -98
- package/dist/commonjs/components/Inspector/FeedbackModal.d.ts +7 -0
- package/dist/commonjs/components/Inspector/FeedbackModal.js +552 -0
- package/dist/commonjs/components/Inspector/InspectorHeader.js +58 -6
- package/dist/commonjs/components/Inspector/MainScreen.js +100 -58
- package/dist/commonjs/components/Inspector/NetworkTab.js +26 -371
- package/dist/commonjs/components/Inspector/NpmStarPrompt.d.ts +3 -0
- package/dist/commonjs/components/Inspector/NpmStarPrompt.js +494 -0
- package/dist/commonjs/components/Inspector/PerformanceTab.js +40 -7
- package/dist/commonjs/components/Inspector/ReduxTab.js +3 -23
- package/dist/commonjs/components/Inspector/SettingsPanel.js +1035 -173
- package/dist/commonjs/components/Inspector/StorageTab.js +23 -28
- package/dist/commonjs/components/Inspector/TabBar.js +50 -15
- package/dist/commonjs/components/JsonViewer.js +14 -2
- package/dist/commonjs/components/LogCard.js +428 -227
- package/dist/commonjs/components/NetworkIcons.d.ts +5 -0
- package/dist/commonjs/components/NetworkIcons.js +33 -2
- package/dist/commonjs/constants/version.d.ts +1 -1
- package/dist/commonjs/constants/version.js +1 -1
- package/dist/commonjs/customHooks/analyticsLogger.js +1 -1
- package/dist/commonjs/customHooks/consoleLogger.js +34 -2
- package/dist/commonjs/customHooks/crashHandler.js +1 -1
- package/dist/commonjs/customHooks/networkLogger.js +184 -26
- package/dist/commonjs/helpers/index.d.ts +1 -0
- package/dist/commonjs/helpers/index.js +1 -0
- package/dist/commonjs/helpers/remoteConfig.d.ts +4 -0
- package/dist/commonjs/helpers/remoteConfig.js +165 -0
- package/dist/commonjs/helpers/searchQueryParser.d.ts +1 -1
- package/dist/commonjs/helpers/searchQueryParser.js +39 -291
- package/dist/commonjs/helpers/telemetry.d.ts +5 -0
- package/dist/commonjs/helpers/telemetry.js +339 -8
- package/dist/commonjs/index.d.ts +1 -0
- package/dist/commonjs/index.js +173 -29
- package/dist/commonjs/styles/AppFonts.d.ts +2 -0
- package/dist/commonjs/styles/AppFonts.js +1 -0
- package/dist/commonjs/styles/index.d.ts +22 -0
- package/dist/commonjs/styles/index.js +19 -0
- package/dist/commonjs/types/enums.d.ts +1 -0
- package/dist/commonjs/types/enums.js +1 -0
- package/dist/commonjs/types/interfaces.d.ts +12 -0
- package/dist/esm/components/AnimatedEntrance.js +3 -3
- package/dist/esm/components/ConsoleLogCard.js +141 -100
- package/dist/esm/components/Inspector/AnalyticsTab.js +1 -23
- package/dist/esm/components/Inspector/ConsoleTab.js +26 -39
- package/dist/esm/components/Inspector/CrashTab.js +20 -29
- package/dist/esm/components/Inspector/DeviceInfoTab.js +198 -98
- package/dist/esm/components/Inspector/FeedbackModal.d.ts +7 -0
- package/dist/esm/components/Inspector/FeedbackModal.js +515 -0
- package/dist/esm/components/Inspector/InspectorHeader.js +60 -8
- package/dist/esm/components/Inspector/MainScreen.js +101 -59
- package/dist/esm/components/Inspector/NetworkTab.js +27 -372
- package/dist/esm/components/Inspector/NpmStarPrompt.d.ts +3 -0
- package/dist/esm/components/Inspector/NpmStarPrompt.js +454 -0
- package/dist/esm/components/Inspector/PerformanceTab.js +40 -7
- package/dist/esm/components/Inspector/ReduxTab.js +4 -24
- package/dist/esm/components/Inspector/SettingsPanel.js +1038 -176
- package/dist/esm/components/Inspector/StorageTab.js +23 -28
- package/dist/esm/components/Inspector/TabBar.js +50 -15
- package/dist/esm/components/JsonViewer.js +14 -2
- package/dist/esm/components/LogCard.js +422 -221
- package/dist/esm/components/NetworkIcons.d.ts +5 -0
- package/dist/esm/components/NetworkIcons.js +26 -0
- package/dist/esm/constants/version.d.ts +1 -1
- package/dist/esm/constants/version.js +1 -1
- package/dist/esm/customHooks/analyticsLogger.js +1 -1
- package/dist/esm/customHooks/consoleLogger.js +34 -2
- package/dist/esm/customHooks/crashHandler.js +1 -1
- package/dist/esm/customHooks/networkLogger.js +184 -26
- package/dist/esm/helpers/index.d.ts +1 -0
- package/dist/esm/helpers/index.js +1 -0
- package/dist/esm/helpers/remoteConfig.d.ts +4 -0
- package/dist/esm/helpers/remoteConfig.js +160 -0
- package/dist/esm/helpers/searchQueryParser.d.ts +1 -1
- package/dist/esm/helpers/searchQueryParser.js +39 -291
- package/dist/esm/helpers/telemetry.d.ts +5 -0
- package/dist/esm/helpers/telemetry.js +332 -9
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.js +171 -29
- package/dist/esm/styles/AppFonts.d.ts +2 -0
- package/dist/esm/styles/AppFonts.js +1 -0
- package/dist/esm/styles/index.d.ts +22 -0
- package/dist/esm/styles/index.js +19 -0
- package/dist/esm/types/enums.d.ts +1 -0
- package/dist/esm/types/enums.js +1 -0
- package/dist/esm/types/interfaces.d.ts +12 -0
- package/package.json +1 -1
- package/src/components/AnimatedEntrance.tsx +3 -3
- package/src/components/ConsoleLogCard.tsx +154 -103
- package/src/components/Inspector/AnalyticsTab.tsx +0 -23
- package/src/components/Inspector/ConsoleTab.tsx +27 -41
- package/src/components/Inspector/CrashTab.tsx +19 -28
- package/src/components/Inspector/DeviceInfoTab.tsx +224 -102
- package/src/components/Inspector/FeedbackModal.tsx +626 -0
- package/src/components/Inspector/InspectorHeader.tsx +83 -5
- package/src/components/Inspector/MainScreen.tsx +61 -6
- package/src/components/Inspector/NetworkTab.tsx +70 -480
- package/src/components/Inspector/NpmStarPrompt.tsx +532 -0
- package/src/components/Inspector/PerformanceTab.tsx +44 -8
- package/src/components/Inspector/ReduxTab.tsx +9 -24
- package/src/components/Inspector/SettingsPanel.tsx +1162 -197
- package/src/components/Inspector/StorageTab.tsx +27 -30
- package/src/components/Inspector/TabBar.tsx +57 -20
- package/src/components/JsonViewer.tsx +15 -2
- package/src/components/LogCard.tsx +528 -339
- package/src/components/NetworkIcons.tsx +92 -0
- package/src/constants/version.ts +1 -1
- package/src/customHooks/analyticsLogger.ts +1 -1
- package/src/customHooks/consoleLogger.ts +36 -3
- package/src/customHooks/crashHandler.ts +1 -1
- package/src/customHooks/networkLogger.ts +214 -26
- package/src/helpers/index.ts +1 -0
- package/src/helpers/remoteConfig.ts +212 -0
- package/src/helpers/searchQueryParser.ts +42 -284
- package/src/helpers/telemetry.ts +381 -10
- package/src/index.tsx +374 -211
- package/src/styles/AppFonts.ts +2 -0
- package/src/styles/index.ts +20 -1
- package/src/types/enums.ts +1 -0
- package/src/types/interfaces.ts +12 -0
|
@@ -0,0 +1,494 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
+
};
|
|
38
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
exports.NpmStarPrompt = void 0;
|
|
40
|
+
const react_1 = __importStar(require("react"));
|
|
41
|
+
const react_native_1 = require("react-native");
|
|
42
|
+
const AppColors_1 = require("../../styles/AppColors");
|
|
43
|
+
const AppFonts_1 = require("../../styles/AppFonts");
|
|
44
|
+
const TouchableScale_1 = __importDefault(require("../TouchableScale"));
|
|
45
|
+
const settingsStore_1 = require("../../helpers/settingsStore");
|
|
46
|
+
const telemetry_1 = require("../../helpers/telemetry");
|
|
47
|
+
const NetworkIcons_1 = require("../NetworkIcons");
|
|
48
|
+
const FIVE_DAYS_MS = 5 * 24 * 60 * 60 * 1000;
|
|
49
|
+
const GITHUB_REPO_URL = 'https://github.com/vengatmacuser/react-native-inapp-inspector';
|
|
50
|
+
const NPM_PACKAGE_URL = 'https://www.npmjs.com/package/react-native-inapp-inspector';
|
|
51
|
+
const NpmStarPrompt = () => {
|
|
52
|
+
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
53
|
+
const slideAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(200)).current;
|
|
54
|
+
const fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
|
|
55
|
+
const pulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
|
|
56
|
+
(0, react_1.useEffect)(() => {
|
|
57
|
+
let isMounted = true;
|
|
58
|
+
async function checkEligibility() {
|
|
59
|
+
try {
|
|
60
|
+
const settings = await (0, settingsStore_1.loadSettings)();
|
|
61
|
+
if (settings.starPromptActioned) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
const now = Date.now();
|
|
65
|
+
const firstSeen = settings.starPromptFirstSeen || now;
|
|
66
|
+
if (!settings.starPromptFirstSeen) {
|
|
67
|
+
await (0, settingsStore_1.saveSettings)({
|
|
68
|
+
...settings,
|
|
69
|
+
starPromptFirstSeen: now,
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
const lastShown = settings.starPromptLastShown || firstSeen;
|
|
73
|
+
const timeElapsed = now - lastShown;
|
|
74
|
+
if (timeElapsed >= FIVE_DAYS_MS) {
|
|
75
|
+
const shouldShow = Math.random() < 0.65;
|
|
76
|
+
if (shouldShow && isMounted) {
|
|
77
|
+
setTimeout(() => {
|
|
78
|
+
if (isMounted) {
|
|
79
|
+
openPrompt();
|
|
80
|
+
}
|
|
81
|
+
}, 1800);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
catch {
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
checkEligibility();
|
|
89
|
+
return () => {
|
|
90
|
+
isMounted = false;
|
|
91
|
+
};
|
|
92
|
+
}, []);
|
|
93
|
+
const openPrompt = async () => {
|
|
94
|
+
setIsOpen(true);
|
|
95
|
+
try {
|
|
96
|
+
const settings = await (0, settingsStore_1.loadSettings)();
|
|
97
|
+
await (0, settingsStore_1.saveSettings)({
|
|
98
|
+
...settings,
|
|
99
|
+
starPromptLastShown: Date.now(),
|
|
100
|
+
});
|
|
101
|
+
(0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_shown', {
|
|
102
|
+
trigger: '5_day_interval',
|
|
103
|
+
platform: react_native_1.Platform.OS,
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
catch { }
|
|
107
|
+
react_native_1.Animated.parallel([
|
|
108
|
+
react_native_1.Animated.spring(slideAnim, {
|
|
109
|
+
toValue: 0,
|
|
110
|
+
friction: 8,
|
|
111
|
+
tension: 50,
|
|
112
|
+
useNativeDriver: true,
|
|
113
|
+
}),
|
|
114
|
+
react_native_1.Animated.timing(fadeAnim, {
|
|
115
|
+
toValue: 1,
|
|
116
|
+
duration: 250,
|
|
117
|
+
useNativeDriver: true,
|
|
118
|
+
}),
|
|
119
|
+
]).start();
|
|
120
|
+
react_native_1.Animated.loop(react_native_1.Animated.sequence([
|
|
121
|
+
react_native_1.Animated.timing(pulseAnim, {
|
|
122
|
+
toValue: 1.15,
|
|
123
|
+
duration: 900,
|
|
124
|
+
useNativeDriver: true,
|
|
125
|
+
}),
|
|
126
|
+
react_native_1.Animated.timing(pulseAnim, {
|
|
127
|
+
toValue: 1,
|
|
128
|
+
duration: 900,
|
|
129
|
+
useNativeDriver: true,
|
|
130
|
+
}),
|
|
131
|
+
])).start();
|
|
132
|
+
};
|
|
133
|
+
const closePrompt = (callback) => {
|
|
134
|
+
react_native_1.Animated.parallel([
|
|
135
|
+
react_native_1.Animated.timing(fadeAnim, {
|
|
136
|
+
toValue: 0,
|
|
137
|
+
duration: 180,
|
|
138
|
+
useNativeDriver: true,
|
|
139
|
+
}),
|
|
140
|
+
react_native_1.Animated.timing(slideAnim, {
|
|
141
|
+
toValue: 200,
|
|
142
|
+
duration: 180,
|
|
143
|
+
useNativeDriver: true,
|
|
144
|
+
}),
|
|
145
|
+
]).start(() => {
|
|
146
|
+
setIsOpen(false);
|
|
147
|
+
if (callback)
|
|
148
|
+
callback();
|
|
149
|
+
});
|
|
150
|
+
};
|
|
151
|
+
const handleStarNow = async () => {
|
|
152
|
+
try {
|
|
153
|
+
const settings = await (0, settingsStore_1.loadSettings)();
|
|
154
|
+
await (0, settingsStore_1.saveSettings)({
|
|
155
|
+
...settings,
|
|
156
|
+
starPromptActioned: true,
|
|
157
|
+
});
|
|
158
|
+
(0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_action', {
|
|
159
|
+
action: 'starred',
|
|
160
|
+
platform: react_native_1.Platform.OS,
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
catch { }
|
|
164
|
+
closePrompt(() => {
|
|
165
|
+
react_native_1.Linking.openURL(GITHUB_REPO_URL).catch(() => {
|
|
166
|
+
react_native_1.Linking.openURL(NPM_PACKAGE_URL).catch(() => { });
|
|
167
|
+
});
|
|
168
|
+
});
|
|
169
|
+
};
|
|
170
|
+
const handleAlreadyStarred = async () => {
|
|
171
|
+
try {
|
|
172
|
+
const settings = await (0, settingsStore_1.loadSettings)();
|
|
173
|
+
await (0, settingsStore_1.saveSettings)({
|
|
174
|
+
...settings,
|
|
175
|
+
starPromptActioned: true,
|
|
176
|
+
});
|
|
177
|
+
(0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_action', {
|
|
178
|
+
action: 'already_starred',
|
|
179
|
+
platform: react_native_1.Platform.OS,
|
|
180
|
+
});
|
|
181
|
+
}
|
|
182
|
+
catch { }
|
|
183
|
+
closePrompt();
|
|
184
|
+
};
|
|
185
|
+
const handleRemindLater = async () => {
|
|
186
|
+
try {
|
|
187
|
+
const settings = await (0, settingsStore_1.loadSettings)();
|
|
188
|
+
await (0, settingsStore_1.saveSettings)({
|
|
189
|
+
...settings,
|
|
190
|
+
starPromptLastShown: Date.now(),
|
|
191
|
+
});
|
|
192
|
+
(0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_action', {
|
|
193
|
+
action: 'remind_later',
|
|
194
|
+
platform: react_native_1.Platform.OS,
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
catch { }
|
|
198
|
+
closePrompt();
|
|
199
|
+
};
|
|
200
|
+
const handleDontAskAgain = async () => {
|
|
201
|
+
try {
|
|
202
|
+
const settings = await (0, settingsStore_1.loadSettings)();
|
|
203
|
+
await (0, settingsStore_1.saveSettings)({
|
|
204
|
+
...settings,
|
|
205
|
+
starPromptActioned: true,
|
|
206
|
+
});
|
|
207
|
+
(0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_action', {
|
|
208
|
+
action: 'dont_ask_again',
|
|
209
|
+
platform: react_native_1.Platform.OS,
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
catch { }
|
|
213
|
+
closePrompt();
|
|
214
|
+
};
|
|
215
|
+
if (!isOpen)
|
|
216
|
+
return null;
|
|
217
|
+
return (<react_native_1.Modal transparent visible={isOpen} animationType="none" onRequestClose={handleRemindLater}>
|
|
218
|
+
<react_native_1.Animated.View style={[
|
|
219
|
+
styles.backdrop,
|
|
220
|
+
{
|
|
221
|
+
opacity: fadeAnim,
|
|
222
|
+
},
|
|
223
|
+
]}>
|
|
224
|
+
<react_native_1.TouchableOpacity style={react_native_1.StyleSheet.absoluteFill} activeOpacity={1} onPress={handleRemindLater}/>
|
|
225
|
+
|
|
226
|
+
<react_native_1.Animated.View style={[
|
|
227
|
+
styles.cardContainer,
|
|
228
|
+
{
|
|
229
|
+
transform: [{ translateY: slideAnim }],
|
|
230
|
+
},
|
|
231
|
+
]}>
|
|
232
|
+
|
|
233
|
+
<react_native_1.View style={styles.headerIconWrapper}>
|
|
234
|
+
<react_native_1.Animated.View style={[
|
|
235
|
+
styles.iconGlow,
|
|
236
|
+
{
|
|
237
|
+
transform: [{ scale: pulseAnim }],
|
|
238
|
+
},
|
|
239
|
+
]}/>
|
|
240
|
+
<react_native_1.View style={styles.iconCircle}>
|
|
241
|
+
<NetworkIcons_1.StarIcon size={26} color="#F59E0B"/>
|
|
242
|
+
</react_native_1.View>
|
|
243
|
+
</react_native_1.View>
|
|
244
|
+
|
|
245
|
+
|
|
246
|
+
<react_native_1.TouchableOpacity onPress={handleRemindLater} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} style={styles.closeBtn}>
|
|
247
|
+
<NetworkIcons_1.CloseWhite size={12} color={AppColors_1.AppColors.grayText}/>
|
|
248
|
+
</react_native_1.TouchableOpacity>
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
<react_native_1.View style={styles.pillBadge}>
|
|
252
|
+
<react_native_1.Text style={styles.pillBadgeText}>SUPPORT OPEN SOURCE</react_native_1.Text>
|
|
253
|
+
</react_native_1.View>
|
|
254
|
+
|
|
255
|
+
|
|
256
|
+
<react_native_1.Text style={styles.title}>Enjoying In-App Inspector?</react_native_1.Text>
|
|
257
|
+
<react_native_1.Text style={styles.description}>
|
|
258
|
+
If this debugging tool saves you time, please consider giving us a
|
|
259
|
+
star on GitHub & npm. Your support helps us build more features!
|
|
260
|
+
</react_native_1.Text>
|
|
261
|
+
|
|
262
|
+
|
|
263
|
+
<react_native_1.View style={styles.metricsBar}>
|
|
264
|
+
<react_native_1.View style={styles.metricItem}>
|
|
265
|
+
<NetworkIcons_1.GitHubIcon size={13} color={AppColors_1.AppColors.grayText}/>
|
|
266
|
+
<react_native_1.Text style={styles.metricText}>GitHub Star</react_native_1.Text>
|
|
267
|
+
</react_native_1.View>
|
|
268
|
+
<react_native_1.View style={styles.metricDot}/>
|
|
269
|
+
<react_native_1.View style={styles.metricItem}>
|
|
270
|
+
<NetworkIcons_1.NpmIcon size={13} color="#CB3837"/>
|
|
271
|
+
<react_native_1.Text style={styles.metricText}>npm Package</react_native_1.Text>
|
|
272
|
+
</react_native_1.View>
|
|
273
|
+
<react_native_1.View style={styles.metricDot}/>
|
|
274
|
+
<react_native_1.View style={styles.metricItem}>
|
|
275
|
+
<react_native_1.Text style={styles.metricText}>100% Free</react_native_1.Text>
|
|
276
|
+
</react_native_1.View>
|
|
277
|
+
</react_native_1.View>
|
|
278
|
+
|
|
279
|
+
|
|
280
|
+
<TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Star on GitHub" onPress={handleStarNow} style={styles.primaryButton}>
|
|
281
|
+
<react_native_1.View style={styles.primaryButtonContent}>
|
|
282
|
+
<NetworkIcons_1.StarIcon size={16} color={AppColors_1.AppColors.white}/>
|
|
283
|
+
<react_native_1.Text style={styles.primaryButtonText}>⭐ Star on GitHub & npm</react_native_1.Text>
|
|
284
|
+
</react_native_1.View>
|
|
285
|
+
</TouchableScale_1.default>
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
<TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="I already starred" onPress={handleAlreadyStarred} style={styles.secondaryButton}>
|
|
289
|
+
<react_native_1.View style={styles.secondaryButtonContent}>
|
|
290
|
+
<NetworkIcons_1.CheckIcon size={13} color={AppColors_1.AppColors.purple}/>
|
|
291
|
+
<react_native_1.Text style={styles.secondaryButtonText}>I Already Starred</react_native_1.Text>
|
|
292
|
+
</react_native_1.View>
|
|
293
|
+
</TouchableScale_1.default>
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
<react_native_1.View style={styles.footerRow}>
|
|
297
|
+
<react_native_1.TouchableOpacity onPress={handleRemindLater} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
|
|
298
|
+
<react_native_1.Text style={styles.footerLinkText}>Remind Me Later</react_native_1.Text>
|
|
299
|
+
</react_native_1.TouchableOpacity>
|
|
300
|
+
|
|
301
|
+
<react_native_1.View style={styles.footerSeparator}/>
|
|
302
|
+
|
|
303
|
+
<react_native_1.TouchableOpacity onPress={handleDontAskAgain} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
|
|
304
|
+
<react_native_1.Text style={styles.footerLinkTextMuted}>Don't Ask Again</react_native_1.Text>
|
|
305
|
+
</react_native_1.TouchableOpacity>
|
|
306
|
+
</react_native_1.View>
|
|
307
|
+
</react_native_1.Animated.View>
|
|
308
|
+
</react_native_1.Animated.View>
|
|
309
|
+
</react_native_1.Modal>);
|
|
310
|
+
};
|
|
311
|
+
exports.NpmStarPrompt = NpmStarPrompt;
|
|
312
|
+
const styles = react_native_1.StyleSheet.create({
|
|
313
|
+
backdrop: {
|
|
314
|
+
...react_native_1.StyleSheet.absoluteFillObject,
|
|
315
|
+
backgroundColor: 'rgba(15, 23, 42, 0.65)',
|
|
316
|
+
justifyContent: 'center',
|
|
317
|
+
alignItems: 'center',
|
|
318
|
+
paddingHorizontal: 20,
|
|
319
|
+
zIndex: 99999,
|
|
320
|
+
},
|
|
321
|
+
cardContainer: {
|
|
322
|
+
width: '100%',
|
|
323
|
+
maxWidth: 380,
|
|
324
|
+
backgroundColor: AppColors_1.AppColors.white,
|
|
325
|
+
borderRadius: 22,
|
|
326
|
+
padding: 22,
|
|
327
|
+
alignItems: 'center',
|
|
328
|
+
shadowColor: AppColors_1.AppColors.black,
|
|
329
|
+
shadowOffset: { width: 0, height: 8 },
|
|
330
|
+
shadowOpacity: 0.22,
|
|
331
|
+
shadowRadius: 20,
|
|
332
|
+
elevation: 12,
|
|
333
|
+
borderWidth: 1.5,
|
|
334
|
+
borderColor: `${AppColors_1.AppColors.purple}25`,
|
|
335
|
+
},
|
|
336
|
+
headerIconWrapper: {
|
|
337
|
+
position: 'relative',
|
|
338
|
+
alignItems: 'center',
|
|
339
|
+
justifyContent: 'center',
|
|
340
|
+
marginBottom: 12,
|
|
341
|
+
},
|
|
342
|
+
iconGlow: {
|
|
343
|
+
position: 'absolute',
|
|
344
|
+
width: 68,
|
|
345
|
+
height: 68,
|
|
346
|
+
borderRadius: 34,
|
|
347
|
+
backgroundColor: '#F59E0B22',
|
|
348
|
+
},
|
|
349
|
+
iconCircle: {
|
|
350
|
+
width: 54,
|
|
351
|
+
height: 54,
|
|
352
|
+
borderRadius: 27,
|
|
353
|
+
backgroundColor: '#FEF3C7',
|
|
354
|
+
borderWidth: 2,
|
|
355
|
+
borderColor: '#FDE68A',
|
|
356
|
+
alignItems: 'center',
|
|
357
|
+
justifyContent: 'center',
|
|
358
|
+
},
|
|
359
|
+
closeBtn: {
|
|
360
|
+
position: 'absolute',
|
|
361
|
+
top: 14,
|
|
362
|
+
right: 14,
|
|
363
|
+
width: 28,
|
|
364
|
+
height: 28,
|
|
365
|
+
borderRadius: 14,
|
|
366
|
+
backgroundColor: AppColors_1.AppColors.grayBackground,
|
|
367
|
+
alignItems: 'center',
|
|
368
|
+
justifyContent: 'center',
|
|
369
|
+
},
|
|
370
|
+
pillBadge: {
|
|
371
|
+
backgroundColor: `${AppColors_1.AppColors.purple}14`,
|
|
372
|
+
paddingHorizontal: 9,
|
|
373
|
+
paddingVertical: 3,
|
|
374
|
+
borderRadius: 10,
|
|
375
|
+
marginBottom: 8,
|
|
376
|
+
},
|
|
377
|
+
pillBadgeText: {
|
|
378
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
379
|
+
fontSize: 9.5,
|
|
380
|
+
color: AppColors_1.AppColors.purple,
|
|
381
|
+
letterSpacing: 0.6,
|
|
382
|
+
},
|
|
383
|
+
title: {
|
|
384
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
385
|
+
fontSize: 18,
|
|
386
|
+
lineHeight: 23,
|
|
387
|
+
color: AppColors_1.AppColors.primaryBlack,
|
|
388
|
+
textAlign: 'center',
|
|
389
|
+
marginBottom: 6,
|
|
390
|
+
},
|
|
391
|
+
description: {
|
|
392
|
+
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
393
|
+
fontSize: 12.5,
|
|
394
|
+
lineHeight: 18,
|
|
395
|
+
color: AppColors_1.AppColors.grayText,
|
|
396
|
+
textAlign: 'center',
|
|
397
|
+
marginBottom: 14,
|
|
398
|
+
paddingHorizontal: 8,
|
|
399
|
+
},
|
|
400
|
+
metricsBar: {
|
|
401
|
+
flexDirection: 'row',
|
|
402
|
+
alignItems: 'center',
|
|
403
|
+
justifyContent: 'center',
|
|
404
|
+
backgroundColor: AppColors_1.AppColors.grayBackground,
|
|
405
|
+
paddingVertical: 7,
|
|
406
|
+
paddingHorizontal: 14,
|
|
407
|
+
borderRadius: 10,
|
|
408
|
+
marginBottom: 16,
|
|
409
|
+
gap: 8,
|
|
410
|
+
},
|
|
411
|
+
metricItem: {
|
|
412
|
+
flexDirection: 'row',
|
|
413
|
+
alignItems: 'center',
|
|
414
|
+
gap: 4,
|
|
415
|
+
},
|
|
416
|
+
metricText: {
|
|
417
|
+
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
418
|
+
fontSize: 11,
|
|
419
|
+
color: AppColors_1.AppColors.primaryBlack,
|
|
420
|
+
},
|
|
421
|
+
metricDot: {
|
|
422
|
+
width: 3.5,
|
|
423
|
+
height: 3.5,
|
|
424
|
+
borderRadius: 2,
|
|
425
|
+
backgroundColor: AppColors_1.AppColors.dividerColor,
|
|
426
|
+
},
|
|
427
|
+
primaryButton: {
|
|
428
|
+
width: '100%',
|
|
429
|
+
backgroundColor: AppColors_1.AppColors.purple,
|
|
430
|
+
borderRadius: 12,
|
|
431
|
+
paddingVertical: 12,
|
|
432
|
+
alignItems: 'center',
|
|
433
|
+
justifyContent: 'center',
|
|
434
|
+
marginBottom: 8,
|
|
435
|
+
shadowColor: AppColors_1.AppColors.purple,
|
|
436
|
+
shadowOffset: { width: 0, height: 4 },
|
|
437
|
+
shadowOpacity: 0.3,
|
|
438
|
+
shadowRadius: 8,
|
|
439
|
+
elevation: 4,
|
|
440
|
+
},
|
|
441
|
+
primaryButtonContent: {
|
|
442
|
+
flexDirection: 'row',
|
|
443
|
+
alignItems: 'center',
|
|
444
|
+
gap: 7,
|
|
445
|
+
},
|
|
446
|
+
primaryButtonText: {
|
|
447
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
448
|
+
fontSize: 14,
|
|
449
|
+
color: AppColors_1.AppColors.white,
|
|
450
|
+
},
|
|
451
|
+
secondaryButton: {
|
|
452
|
+
width: '100%',
|
|
453
|
+
backgroundColor: `${AppColors_1.AppColors.purple}10`,
|
|
454
|
+
borderWidth: 1,
|
|
455
|
+
borderColor: `${AppColors_1.AppColors.purple}30`,
|
|
456
|
+
borderRadius: 12,
|
|
457
|
+
paddingVertical: 10,
|
|
458
|
+
alignItems: 'center',
|
|
459
|
+
justifyContent: 'center',
|
|
460
|
+
marginBottom: 14,
|
|
461
|
+
},
|
|
462
|
+
secondaryButtonContent: {
|
|
463
|
+
flexDirection: 'row',
|
|
464
|
+
alignItems: 'center',
|
|
465
|
+
gap: 6,
|
|
466
|
+
},
|
|
467
|
+
secondaryButtonText: {
|
|
468
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
469
|
+
fontSize: 13,
|
|
470
|
+
color: AppColors_1.AppColors.purple,
|
|
471
|
+
},
|
|
472
|
+
footerRow: {
|
|
473
|
+
flexDirection: 'row',
|
|
474
|
+
alignItems: 'center',
|
|
475
|
+
justifyContent: 'center',
|
|
476
|
+
gap: 12,
|
|
477
|
+
},
|
|
478
|
+
footerLinkText: {
|
|
479
|
+
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
480
|
+
fontSize: 11.5,
|
|
481
|
+
color: AppColors_1.AppColors.grayText,
|
|
482
|
+
},
|
|
483
|
+
footerSeparator: {
|
|
484
|
+
width: 1,
|
|
485
|
+
height: 12,
|
|
486
|
+
backgroundColor: AppColors_1.AppColors.dividerColor,
|
|
487
|
+
},
|
|
488
|
+
footerLinkTextMuted: {
|
|
489
|
+
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
490
|
+
fontSize: 11.5,
|
|
491
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
492
|
+
},
|
|
493
|
+
});
|
|
494
|
+
exports.default = exports.NpmStarPrompt;
|
|
@@ -51,6 +51,7 @@ const helpers_1 = require("../../helpers");
|
|
|
51
51
|
const NetworkIcons_1 = require("../NetworkIcons");
|
|
52
52
|
const performanceTracker_1 = require("../../customHooks/performanceTracker");
|
|
53
53
|
const NativeInspector_1 = require("../../native/NativeInspector");
|
|
54
|
+
const telemetry_1 = require("../../helpers/telemetry");
|
|
54
55
|
const PerformanceTab = react_1.default.memo(() => {
|
|
55
56
|
const { t } = (0, i18n_1.useTranslation)();
|
|
56
57
|
const [isRecording, setIsRecording] = (0, react_1.useState)(true);
|
|
@@ -186,10 +187,19 @@ const PerformanceTab = react_1.default.memo(() => {
|
|
|
186
187
|
}, [isRecording]);
|
|
187
188
|
const filteredEvents = (0, react_1.useMemo)(() => {
|
|
188
189
|
return events.filter(e => {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
190
|
+
let matchSearch = true;
|
|
191
|
+
if (search && search.trim().length > 0) {
|
|
192
|
+
const queryTokens = search.trim().toLowerCase().split(/\s+/).filter(Boolean);
|
|
193
|
+
const corpus = [
|
|
194
|
+
e.label || '',
|
|
195
|
+
e.detail || '',
|
|
196
|
+
e.source || '',
|
|
197
|
+
e.category || '',
|
|
198
|
+
e.severity || '',
|
|
199
|
+
e.bottleneckThread || '',
|
|
200
|
+
].join(' ').toLowerCase();
|
|
201
|
+
matchSearch = queryTokens.every(tok => corpus.includes(tok));
|
|
202
|
+
}
|
|
193
203
|
const matchFilter = filterCategory === 'ALL'
|
|
194
204
|
? true
|
|
195
205
|
: filterCategory === 'JANKY'
|
|
@@ -366,7 +376,13 @@ const PerformanceTab = react_1.default.memo(() => {
|
|
|
366
376
|
</react_native_1.View>
|
|
367
377
|
|
|
368
378
|
|
|
369
|
-
<TouchableScale_1.default onPress={() =>
|
|
379
|
+
<TouchableScale_1.default onPress={() => {
|
|
380
|
+
setIsRecording(prev => {
|
|
381
|
+
const next = !prev;
|
|
382
|
+
(0, telemetry_1.trackInspectorScreenRecord)(next ? 'start' : 'stop', 'performance_fps');
|
|
383
|
+
return next;
|
|
384
|
+
});
|
|
385
|
+
}} style={[
|
|
370
386
|
perfStyles.recordToggleBtn,
|
|
371
387
|
isRecording
|
|
372
388
|
? perfStyles.recordToggleActive
|
|
@@ -814,10 +830,27 @@ const PerformanceTab = react_1.default.memo(() => {
|
|
|
814
830
|
|
|
815
831
|
{filteredEvents.length === 0 ? (<react_native_1.View style={perfStyles.emptyCard}>
|
|
816
832
|
<NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.amber500} size={30}/>
|
|
817
|
-
<react_native_1.Text style={perfStyles.emptyTitle}>
|
|
833
|
+
<react_native_1.Text style={perfStyles.emptyTitle}>
|
|
834
|
+
{search.trim().length > 0 ? 'No Matching Events' : t('performance.emptyTitle')}
|
|
835
|
+
</react_native_1.Text>
|
|
818
836
|
<react_native_1.Text style={perfStyles.emptySub}>
|
|
819
|
-
{
|
|
837
|
+
{search.trim().length > 0
|
|
838
|
+
? `No performance events match "${search}"`
|
|
839
|
+
: t('performance.emptySubtitle')}
|
|
820
840
|
</react_native_1.Text>
|
|
841
|
+
{search.trim().length > 0 && (<TouchableScale_1.default onPress={() => setSearch('')} style={{
|
|
842
|
+
marginTop: 10,
|
|
843
|
+
paddingHorizontal: 14,
|
|
844
|
+
paddingVertical: 6,
|
|
845
|
+
borderRadius: 8,
|
|
846
|
+
backgroundColor: AppColors_1.AppColors.grayBackground,
|
|
847
|
+
borderWidth: 1,
|
|
848
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
849
|
+
}}>
|
|
850
|
+
<react_native_1.Text style={{ color: AppColors_1.AppColors.brandPurple, fontSize: 12, fontFamily: AppFonts_1.AppFonts.interBold }}>
|
|
851
|
+
Clear Search
|
|
852
|
+
</react_native_1.Text>
|
|
853
|
+
</TouchableScale_1.default>)}
|
|
821
854
|
</react_native_1.View>) : (filteredEvents.map(event => {
|
|
822
855
|
const isOptimal = event.severity === 'optimal';
|
|
823
856
|
const isWarning = event.severity === 'warning';
|
|
@@ -492,32 +492,12 @@ const ReduxTab = react_1.default.memo(() => {
|
|
|
492
492
|
</react_native_1.View>
|
|
493
493
|
|
|
494
494
|
|
|
495
|
-
<react_native_1.FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={reduxSearch.length > 0}
|
|
495
|
+
<react_native_1.FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={reduxSearch.trim().length > 0} searchQuery={reduxSearch} onClearSearch={() => setReduxSearch('')} customTitle={reduxSearch.trim().length > 0 ? 'No Matching Slices' : 'No Redux State Detected'} customSub={reduxSearch.trim().length > 0
|
|
496
|
+
? `No Redux slices match "${reduxSearch}"`
|
|
497
|
+
: 'Attach the Redux store or dispatch actions to see state slices.'}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter_1.default count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
|
|
496
498
|
reduxTabStyles.listContent,
|
|
497
499
|
filteredSlices.length === 0 && { flexGrow: 1 },
|
|
498
500
|
]} keyboardShouldPersistTaps="handled"/>
|
|
499
|
-
|
|
500
|
-
<TouchableScale_1.default onPress={() => {
|
|
501
|
-
try {
|
|
502
|
-
listRef.current?.scrollToOffset({
|
|
503
|
-
offset: 0,
|
|
504
|
-
animated: true,
|
|
505
|
-
});
|
|
506
|
-
}
|
|
507
|
-
catch {
|
|
508
|
-
try {
|
|
509
|
-
listRef.current?.scrollToIndex({
|
|
510
|
-
index: 0,
|
|
511
|
-
animated: true,
|
|
512
|
-
});
|
|
513
|
-
}
|
|
514
|
-
catch { }
|
|
515
|
-
}
|
|
516
|
-
}} hitSlop={12} style={styles_1.default.scrollTopBtn}>
|
|
517
|
-
<react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
|
|
518
|
-
<NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
|
|
519
|
-
</react_native_1.View>
|
|
520
|
-
</TouchableScale_1.default>
|
|
521
501
|
</react_native_1.View>);
|
|
522
502
|
});
|
|
523
503
|
const reduxTabStyles = react_native_1.StyleSheet.create({
|