react-reinspect 0.1.6 → 0.1.8
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 +21 -37
- package/dist/lib/autoWrap.d.ts +1 -8
- package/dist/lib/autoWrap.d.ts.map +1 -1
- package/dist/lib/constants.d.ts +2 -2
- package/dist/lib/constants.d.ts.map +1 -1
- package/dist/lib/context.d.ts +1 -3
- package/dist/lib/context.d.ts.map +1 -1
- package/dist/lib/core/renderCounter.d.ts +11 -0
- package/dist/lib/core/renderCounter.d.ts.map +1 -0
- package/dist/lib/core/state.d.ts +42 -0
- package/dist/lib/core/state.d.ts.map +1 -0
- package/dist/lib/dom/styleInjection.d.ts +2 -0
- package/dist/lib/dom/styleInjection.d.ts.map +1 -0
- package/dist/lib/index.cjs +1 -1
- package/dist/lib/index.d.ts +2 -5
- package/dist/lib/index.d.ts.map +1 -1
- package/dist/lib/index.js +259 -1156
- package/dist/lib/injectStyles.d.ts +1 -1
- package/dist/lib/injectStyles.d.ts.map +1 -1
- package/dist/lib/internal/auto-wrap.cjs +1 -0
- package/dist/lib/internal/auto-wrap.d.ts +9 -0
- package/dist/lib/internal/auto-wrap.d.ts.map +1 -0
- package/dist/lib/internal/auto-wrap.js +12 -0
- package/dist/lib/propsInspector.d.ts.map +1 -1
- package/dist/lib/react/context.d.ts +3 -0
- package/dist/lib/react/context.d.ts.map +1 -0
- package/dist/lib/react/overlay.d.ts +15 -0
- package/dist/lib/react/overlay.d.ts.map +1 -0
- package/dist/lib/react/provider.d.ts +4 -0
- package/dist/lib/react/provider.d.ts.map +1 -0
- package/dist/lib/react/wrap.d.ts +11 -0
- package/dist/lib/react/wrap.d.ts.map +1 -0
- package/dist/lib/store.d.ts +1 -2
- package/dist/lib/store.d.ts.map +1 -1
- package/dist/lib/types.d.ts +24 -17
- package/dist/lib/types.d.ts.map +1 -1
- package/dist/lib/utils.d.ts +4 -4
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/withReinspect.d.ts +1 -6
- package/dist/lib/withReinspect.d.ts.map +1 -1
- package/dist/lib/wrap-8xVFW-im.js +996 -0
- package/dist/lib/wrap-Bu931FVO.cjs +1 -0
- package/dist/lib/wrapInspectableMap.d.ts +1 -1
- package/dist/lib/wrapInspectableMap.d.ts.map +1 -1
- package/dist/lib/wrapMarker.d.ts +6 -3
- package/dist/lib/wrapMarker.d.ts.map +1 -1
- package/dist/plugin/internal/autoDiscoverTransform.d.ts +26 -0
- package/dist/plugin/internal/autoDiscoverTransform.d.ts.map +1 -0
- package/dist/plugin/internal/autoDiscoverTransform.js +397 -0
- package/dist/plugin/reinspectAutoDiscoverPlugin.d.ts +5 -8
- package/dist/plugin/reinspectAutoDiscoverPlugin.d.ts.map +1 -1
- package/dist/plugin/reinspectAutoDiscoverPlugin.js +11 -358
- package/dist/plugin/reinspectNextAutoDiscoverLoader.d.ts +1 -0
- package/dist/plugin/reinspectNextAutoDiscoverLoader.d.ts.map +1 -1
- package/dist/plugin/reinspectNextAutoDiscoverLoader.js +5 -27
- package/dist/plugin/reinspectNextPlugin.d.ts +2 -0
- package/dist/plugin/reinspectNextPlugin.d.ts.map +1 -1
- package/dist/plugin/reinspectNextPlugin.js +19 -15
- package/docs/assets/screenshot-example.png +0 -0
- package/package.json +8 -2
|
@@ -1,354 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import { generate } from '@babel/generator';
|
|
4
|
-
import * as t from '@babel/types';
|
|
5
|
-
const AUTO_WRAP_IMPORT_SOURCE = 'react-reinspect';
|
|
6
|
-
const AUTO_WRAP_IMPORT_NAME = 'autoWrapInspectable';
|
|
7
|
-
const DEFAULT_EXPORT_LOCAL_IDENTIFIER = '__reinspect_default_component';
|
|
8
|
-
const SUPPORTED_FILE_PATTERN = /\.[cm]?[jt]sx?$/;
|
|
9
|
-
const THIRD_PARTY_SKIP_PATTERNS = [
|
|
10
|
-
'/node_modules/react/',
|
|
11
|
-
'/node_modules/react-dom/',
|
|
12
|
-
'/node_modules/scheduler/',
|
|
13
|
-
'/node_modules/@vite/',
|
|
14
|
-
'/node_modules/vite/',
|
|
15
|
-
'/node_modules/@react-refresh/',
|
|
16
|
-
];
|
|
17
|
-
function normalizeModuleId(id) {
|
|
18
|
-
const withoutQuery = id.split('?')[0];
|
|
19
|
-
return withoutQuery.split(path.sep).join('/');
|
|
20
|
-
}
|
|
21
|
-
function isPascalCaseIdentifier(name) {
|
|
22
|
-
return /^[A-Z][A-Za-z0-9]*$/.test(name);
|
|
23
|
-
}
|
|
24
|
-
function inferFallbackName(filePath) {
|
|
25
|
-
const baseName = path.basename(filePath).replace(/\.[^.]+$/, '');
|
|
26
|
-
const tokens = baseName
|
|
27
|
-
.replace(/[^A-Za-z0-9]+/g, ' ')
|
|
28
|
-
.trim()
|
|
29
|
-
.split(/\s+/)
|
|
30
|
-
.filter(Boolean);
|
|
31
|
-
if (tokens.length === 0) {
|
|
32
|
-
return 'Component';
|
|
33
|
-
}
|
|
34
|
-
return tokens
|
|
35
|
-
.map((token) => token[0].toUpperCase() + token.slice(1))
|
|
36
|
-
.join('');
|
|
37
|
-
}
|
|
38
|
-
function unwrapExpression(node) {
|
|
39
|
-
let currentNode = node;
|
|
40
|
-
while (t.isParenthesizedExpression(currentNode) ||
|
|
41
|
-
t.isTSAsExpression(currentNode) ||
|
|
42
|
-
t.isTSTypeAssertion(currentNode) ||
|
|
43
|
-
t.isTSNonNullExpression(currentNode) ||
|
|
44
|
-
t.isTSInstantiationExpression(currentNode) ||
|
|
45
|
-
t.isTypeCastExpression(currentNode)) {
|
|
46
|
-
currentNode = currentNode.expression;
|
|
47
|
-
}
|
|
48
|
-
return currentNode;
|
|
49
|
-
}
|
|
50
|
-
function isReactCreateElementCall(node) {
|
|
51
|
-
const callee = unwrapExpression(node.callee);
|
|
52
|
-
if (t.isIdentifier(callee)) {
|
|
53
|
-
return callee.name === 'createElement';
|
|
54
|
-
}
|
|
55
|
-
if (t.isMemberExpression(callee) &&
|
|
56
|
-
t.isIdentifier(callee.object) &&
|
|
57
|
-
callee.object.name === 'React' &&
|
|
58
|
-
t.isIdentifier(callee.property)) {
|
|
59
|
-
return callee.property.name === 'createElement';
|
|
60
|
-
}
|
|
61
|
-
return false;
|
|
62
|
-
}
|
|
63
|
-
function isAstNode(value) {
|
|
64
|
-
return (typeof value === 'object' &&
|
|
65
|
-
value !== null &&
|
|
66
|
-
'type' in value &&
|
|
67
|
-
typeof value.type === 'string');
|
|
68
|
-
}
|
|
69
|
-
function containsRenderableReactNode(node) {
|
|
70
|
-
if (!node) {
|
|
71
|
-
return false;
|
|
72
|
-
}
|
|
73
|
-
if (t.isJSXElement(node) || t.isJSXFragment(node)) {
|
|
74
|
-
return true;
|
|
75
|
-
}
|
|
76
|
-
if (t.isCallExpression(node) && isReactCreateElementCall(node)) {
|
|
77
|
-
return true;
|
|
78
|
-
}
|
|
79
|
-
for (const fieldValue of Object.values(node)) {
|
|
80
|
-
if (Array.isArray(fieldValue)) {
|
|
81
|
-
for (const value of fieldValue) {
|
|
82
|
-
if (isAstNode(value) && containsRenderableReactNode(value)) {
|
|
83
|
-
return true;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
continue;
|
|
87
|
-
}
|
|
88
|
-
if (isAstNode(fieldValue) && containsRenderableReactNode(fieldValue)) {
|
|
89
|
-
return true;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
return false;
|
|
93
|
-
}
|
|
94
|
-
function isComponentFunction(node) {
|
|
95
|
-
if (t.isBlockStatement(node.body)) {
|
|
96
|
-
return containsRenderableReactNode(node.body);
|
|
97
|
-
}
|
|
98
|
-
return containsRenderableReactNode(node.body);
|
|
99
|
-
}
|
|
100
|
-
function isMemoForwardRefCallee(callee) {
|
|
101
|
-
const expression = unwrapExpression(callee);
|
|
102
|
-
if (t.isIdentifier(expression)) {
|
|
103
|
-
return expression.name === 'memo' || expression.name === 'forwardRef';
|
|
104
|
-
}
|
|
105
|
-
if (t.isMemberExpression(expression) &&
|
|
106
|
-
t.isIdentifier(expression.object) &&
|
|
107
|
-
expression.object.name === 'React' &&
|
|
108
|
-
t.isIdentifier(expression.property)) {
|
|
109
|
-
return (expression.property.name === 'memo' ||
|
|
110
|
-
expression.property.name === 'forwardRef');
|
|
111
|
-
}
|
|
112
|
-
return false;
|
|
113
|
-
}
|
|
114
|
-
function isMemoForwardRefCall(node) {
|
|
115
|
-
const callee = unwrapExpression(node.callee);
|
|
116
|
-
if (!isMemoForwardRefCallee(callee)) {
|
|
117
|
-
return false;
|
|
118
|
-
}
|
|
119
|
-
if (node.arguments.length === 0) {
|
|
120
|
-
return false;
|
|
121
|
-
}
|
|
122
|
-
const firstArgument = node.arguments[0];
|
|
123
|
-
if (!t.isExpression(firstArgument)) {
|
|
124
|
-
return false;
|
|
125
|
-
}
|
|
126
|
-
const componentCandidate = unwrapExpression(firstArgument);
|
|
127
|
-
if (t.isArrowFunctionExpression(componentCandidate) ||
|
|
128
|
-
t.isFunctionExpression(componentCandidate)) {
|
|
129
|
-
return isComponentFunction(componentCandidate);
|
|
130
|
-
}
|
|
131
|
-
if (t.isIdentifier(componentCandidate)) {
|
|
132
|
-
return isPascalCaseIdentifier(componentCandidate.name);
|
|
133
|
-
}
|
|
134
|
-
return true;
|
|
135
|
-
}
|
|
136
|
-
function isWrappedInitializer(node) {
|
|
137
|
-
const expression = unwrapExpression(node);
|
|
138
|
-
if (!t.isCallExpression(expression)) {
|
|
139
|
-
return false;
|
|
140
|
-
}
|
|
141
|
-
const callee = unwrapExpression(expression.callee);
|
|
142
|
-
return (t.isIdentifier(callee) &&
|
|
143
|
-
(callee.name === AUTO_WRAP_IMPORT_NAME || callee.name === 'withReinspect'));
|
|
144
|
-
}
|
|
145
|
-
function isComponentInitializer(node) {
|
|
146
|
-
const expression = unwrapExpression(node);
|
|
147
|
-
if (t.isArrowFunctionExpression(expression) || t.isFunctionExpression(expression)) {
|
|
148
|
-
return isComponentFunction(expression);
|
|
149
|
-
}
|
|
150
|
-
if (t.isCallExpression(expression)) {
|
|
151
|
-
return isMemoForwardRefCall(expression);
|
|
152
|
-
}
|
|
153
|
-
return false;
|
|
154
|
-
}
|
|
155
|
-
function createAutoWrapCall(expression, componentName, scope, fallbackName) {
|
|
156
|
-
const metadataProperties = [
|
|
157
|
-
t.objectProperty(t.identifier('scope'), t.stringLiteral(scope)),
|
|
158
|
-
t.objectProperty(t.identifier('fallbackName'), t.stringLiteral(fallbackName)),
|
|
159
|
-
];
|
|
160
|
-
if (componentName) {
|
|
161
|
-
metadataProperties.unshift(t.objectProperty(t.identifier('componentName'), t.stringLiteral(componentName)));
|
|
162
|
-
}
|
|
163
|
-
return t.callExpression(t.identifier(AUTO_WRAP_IMPORT_NAME), [
|
|
164
|
-
expression,
|
|
165
|
-
t.objectExpression(metadataProperties),
|
|
166
|
-
]);
|
|
167
|
-
}
|
|
168
|
-
function createFunctionWrapAssignment(name, scope, fallbackName) {
|
|
169
|
-
return t.expressionStatement(t.assignmentExpression('=', t.identifier(name), createAutoWrapCall(t.identifier(name), name, scope, fallbackName)));
|
|
170
|
-
}
|
|
171
|
-
function functionDeclarationToExpression(node) {
|
|
172
|
-
const expression = t.functionExpression(node.id, node.params, node.body, node.generator, node.async);
|
|
173
|
-
expression.typeParameters = node.typeParameters;
|
|
174
|
-
expression.returnType = node.returnType;
|
|
175
|
-
return expression;
|
|
176
|
-
}
|
|
177
|
-
function isSupportedSourceFile(id) {
|
|
178
|
-
if (id.startsWith('\0') || id.startsWith('/@')) {
|
|
179
|
-
return false;
|
|
180
|
-
}
|
|
181
|
-
return SUPPORTED_FILE_PATTERN.test(id);
|
|
182
|
-
}
|
|
183
|
-
function isFirstPartyModule(id) {
|
|
184
|
-
return id.includes('/src/') && !id.includes('/node_modules/');
|
|
185
|
-
}
|
|
186
|
-
export function shouldSkipThirdPartyModule(id) {
|
|
187
|
-
return THIRD_PARTY_SKIP_PATTERNS.some((pattern) => id.includes(pattern));
|
|
188
|
-
}
|
|
189
|
-
export function transformModuleForAutoDiscover(code, fileId, scope) {
|
|
190
|
-
let ast;
|
|
191
|
-
try {
|
|
192
|
-
ast = parse(code, {
|
|
193
|
-
sourceType: 'module',
|
|
194
|
-
plugins: ['typescript', 'jsx'],
|
|
195
|
-
});
|
|
196
|
-
}
|
|
197
|
-
catch {
|
|
198
|
-
return { code, modified: false };
|
|
199
|
-
}
|
|
200
|
-
const program = ast.program;
|
|
201
|
-
const fallbackName = inferFallbackName(fileId);
|
|
202
|
-
let modified = false;
|
|
203
|
-
let autoWrapImportDeclaration;
|
|
204
|
-
let hasAutoWrapImport = false;
|
|
205
|
-
for (const statement of program.body) {
|
|
206
|
-
if (!t.isImportDeclaration(statement)) {
|
|
207
|
-
continue;
|
|
208
|
-
}
|
|
209
|
-
if (statement.source.value !== AUTO_WRAP_IMPORT_SOURCE) {
|
|
210
|
-
continue;
|
|
211
|
-
}
|
|
212
|
-
autoWrapImportDeclaration = statement;
|
|
213
|
-
hasAutoWrapImport = statement.specifiers.some((specifier) => t.isImportSpecifier(specifier) &&
|
|
214
|
-
t.isIdentifier(specifier.imported) &&
|
|
215
|
-
specifier.imported.name === AUTO_WRAP_IMPORT_NAME);
|
|
216
|
-
}
|
|
217
|
-
for (let index = 0; index < program.body.length; index += 1) {
|
|
218
|
-
const statement = program.body[index];
|
|
219
|
-
if (t.isFunctionDeclaration(statement) && statement.id) {
|
|
220
|
-
if (isPascalCaseIdentifier(statement.id.name) &&
|
|
221
|
-
isComponentFunction(statement)) {
|
|
222
|
-
program.body.splice(index + 1, 0, createFunctionWrapAssignment(statement.id.name, scope, fallbackName));
|
|
223
|
-
index += 1;
|
|
224
|
-
modified = true;
|
|
225
|
-
}
|
|
226
|
-
continue;
|
|
227
|
-
}
|
|
228
|
-
if (t.isExportNamedDeclaration(statement) &&
|
|
229
|
-
statement.declaration &&
|
|
230
|
-
t.isFunctionDeclaration(statement.declaration) &&
|
|
231
|
-
statement.declaration.id &&
|
|
232
|
-
isPascalCaseIdentifier(statement.declaration.id.name) &&
|
|
233
|
-
isComponentFunction(statement.declaration)) {
|
|
234
|
-
program.body.splice(index + 1, 0, createFunctionWrapAssignment(statement.declaration.id.name, scope, fallbackName));
|
|
235
|
-
index += 1;
|
|
236
|
-
modified = true;
|
|
237
|
-
continue;
|
|
238
|
-
}
|
|
239
|
-
const processVariableDeclaration = (declaration) => {
|
|
240
|
-
let declarationChanged = false;
|
|
241
|
-
for (const declarator of declaration.declarations) {
|
|
242
|
-
if (!t.isIdentifier(declarator.id) || !declarator.init) {
|
|
243
|
-
continue;
|
|
244
|
-
}
|
|
245
|
-
if (!isPascalCaseIdentifier(declarator.id.name)) {
|
|
246
|
-
continue;
|
|
247
|
-
}
|
|
248
|
-
if (!isComponentInitializer(declarator.init)) {
|
|
249
|
-
continue;
|
|
250
|
-
}
|
|
251
|
-
if (isWrappedInitializer(declarator.init)) {
|
|
252
|
-
continue;
|
|
253
|
-
}
|
|
254
|
-
declarator.init = createAutoWrapCall(declarator.init, declarator.id.name, scope, fallbackName);
|
|
255
|
-
declarationChanged = true;
|
|
256
|
-
}
|
|
257
|
-
return declarationChanged;
|
|
258
|
-
};
|
|
259
|
-
if (t.isVariableDeclaration(statement)) {
|
|
260
|
-
if (processVariableDeclaration(statement)) {
|
|
261
|
-
modified = true;
|
|
262
|
-
}
|
|
263
|
-
continue;
|
|
264
|
-
}
|
|
265
|
-
if (t.isExportNamedDeclaration(statement) &&
|
|
266
|
-
statement.declaration &&
|
|
267
|
-
t.isVariableDeclaration(statement.declaration)) {
|
|
268
|
-
if (processVariableDeclaration(statement.declaration)) {
|
|
269
|
-
modified = true;
|
|
270
|
-
}
|
|
271
|
-
continue;
|
|
272
|
-
}
|
|
273
|
-
if (!t.isExportDefaultDeclaration(statement)) {
|
|
274
|
-
continue;
|
|
275
|
-
}
|
|
276
|
-
const declaration = statement.declaration;
|
|
277
|
-
if (t.isFunctionDeclaration(declaration)) {
|
|
278
|
-
if (declaration.id &&
|
|
279
|
-
isPascalCaseIdentifier(declaration.id.name) &&
|
|
280
|
-
isComponentFunction(declaration)) {
|
|
281
|
-
const localName = declaration.id.name;
|
|
282
|
-
const replacementStatements = [
|
|
283
|
-
declaration,
|
|
284
|
-
createFunctionWrapAssignment(localName, scope, fallbackName),
|
|
285
|
-
t.exportDefaultDeclaration(t.identifier(localName)),
|
|
286
|
-
];
|
|
287
|
-
program.body.splice(index, 1, ...replacementStatements);
|
|
288
|
-
index += replacementStatements.length - 1;
|
|
289
|
-
modified = true;
|
|
290
|
-
continue;
|
|
291
|
-
}
|
|
292
|
-
if (!declaration.id && isComponentFunction(declaration)) {
|
|
293
|
-
const localIdentifier = t.identifier(DEFAULT_EXPORT_LOCAL_IDENTIFIER);
|
|
294
|
-
const wrappedValue = createAutoWrapCall(functionDeclarationToExpression(declaration), undefined, scope, fallbackName);
|
|
295
|
-
const replacementStatements = [
|
|
296
|
-
t.variableDeclaration('const', [
|
|
297
|
-
t.variableDeclarator(localIdentifier, wrappedValue),
|
|
298
|
-
]),
|
|
299
|
-
t.exportDefaultDeclaration(localIdentifier),
|
|
300
|
-
];
|
|
301
|
-
program.body.splice(index, 1, ...replacementStatements);
|
|
302
|
-
index += replacementStatements.length - 1;
|
|
303
|
-
modified = true;
|
|
304
|
-
}
|
|
305
|
-
continue;
|
|
306
|
-
}
|
|
307
|
-
if (!t.isExpression(declaration)) {
|
|
308
|
-
continue;
|
|
309
|
-
}
|
|
310
|
-
if (!isComponentInitializer(declaration) || isWrappedInitializer(declaration)) {
|
|
311
|
-
continue;
|
|
312
|
-
}
|
|
313
|
-
const localIdentifier = t.identifier(DEFAULT_EXPORT_LOCAL_IDENTIFIER);
|
|
314
|
-
const wrappedValue = createAutoWrapCall(declaration, undefined, scope, fallbackName);
|
|
315
|
-
const replacementStatements = [
|
|
316
|
-
t.variableDeclaration('const', [
|
|
317
|
-
t.variableDeclarator(localIdentifier, wrappedValue),
|
|
318
|
-
]),
|
|
319
|
-
t.exportDefaultDeclaration(localIdentifier),
|
|
320
|
-
];
|
|
321
|
-
program.body.splice(index, 1, ...replacementStatements);
|
|
322
|
-
index += replacementStatements.length - 1;
|
|
323
|
-
modified = true;
|
|
324
|
-
}
|
|
325
|
-
if (!modified) {
|
|
326
|
-
return { code, modified: false };
|
|
327
|
-
}
|
|
328
|
-
if (autoWrapImportDeclaration) {
|
|
329
|
-
if (!hasAutoWrapImport) {
|
|
330
|
-
autoWrapImportDeclaration.specifiers.push(t.importSpecifier(t.identifier(AUTO_WRAP_IMPORT_NAME), t.identifier(AUTO_WRAP_IMPORT_NAME)));
|
|
331
|
-
}
|
|
332
|
-
}
|
|
333
|
-
else {
|
|
334
|
-
let insertIndex = 0;
|
|
335
|
-
while (insertIndex < program.body.length &&
|
|
336
|
-
t.isImportDeclaration(program.body[insertIndex])) {
|
|
337
|
-
insertIndex += 1;
|
|
338
|
-
}
|
|
339
|
-
program.body.splice(insertIndex, 0, t.importDeclaration([
|
|
340
|
-
t.importSpecifier(t.identifier(AUTO_WRAP_IMPORT_NAME), t.identifier(AUTO_WRAP_IMPORT_NAME)),
|
|
341
|
-
], t.stringLiteral(AUTO_WRAP_IMPORT_SOURCE)));
|
|
342
|
-
}
|
|
343
|
-
const output = generate(ast, {
|
|
344
|
-
jsescOption: { minimal: true },
|
|
345
|
-
});
|
|
1
|
+
import { normalizeModuleId, isSupportedSourceFile, resolveAutoDiscoverScope, transformModuleForAutoDiscover, } from './internal/autoDiscoverTransform';
|
|
2
|
+
function resolvePluginOptions(options) {
|
|
346
3
|
return {
|
|
347
|
-
|
|
348
|
-
|
|
4
|
+
include: options?.include ?? 'first-party',
|
|
5
|
+
thirdPartyAllowlist: options?.thirdPartyAllowlist ?? [],
|
|
349
6
|
};
|
|
350
7
|
}
|
|
351
|
-
export function reinspectAutoDiscoverPlugin() {
|
|
8
|
+
export function reinspectAutoDiscoverPlugin(options) {
|
|
9
|
+
const resolvedOptions = resolvePluginOptions(options);
|
|
352
10
|
return {
|
|
353
11
|
name: 'reinspect-auto-discover',
|
|
354
12
|
apply: 'serve',
|
|
@@ -358,16 +16,11 @@ export function reinspectAutoDiscoverPlugin() {
|
|
|
358
16
|
if (!isSupportedSourceFile(normalizedId)) {
|
|
359
17
|
return null;
|
|
360
18
|
}
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
}
|
|
367
|
-
const scope = isFirstPartyModule(normalizedId)
|
|
368
|
-
? 'first-party'
|
|
369
|
-
: 'third-party';
|
|
370
|
-
if (scope === 'third-party' && shouldSkipThirdPartyModule(normalizedId)) {
|
|
19
|
+
const scope = resolveAutoDiscoverScope(normalizedId, {
|
|
20
|
+
include: resolvedOptions.include,
|
|
21
|
+
thirdPartyAllowlist: resolvedOptions.thirdPartyAllowlist,
|
|
22
|
+
});
|
|
23
|
+
if (!scope) {
|
|
371
24
|
return null;
|
|
372
25
|
}
|
|
373
26
|
const transformedResult = transformModuleForAutoDiscover(sourceCode, normalizedId, scope);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reinspectNextAutoDiscoverLoader.d.ts","sourceRoot":"","sources":["../../src/plugin/reinspectNextAutoDiscoverLoader.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"reinspectNextAutoDiscoverLoader.d.ts","sourceRoot":"","sources":["../../src/plugin/reinspectNextAutoDiscoverLoader.ts"],"names":[],"mappings":"AAOA,UAAU,0BAA0B;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAA;CAC/B;AAED,UAAU,iBAAiB;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,0BAA0B,CAAA;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACzE;AA4BD,MAAM,CAAC,OAAO,UAAU,+BAA+B,CACrD,IAAI,EAAE,iBAAiB,EACvB,UAAU,EAAE,MAAM,GACjB,MAAM,GAAG,IAAI,CAyBf"}
|
|
@@ -1,34 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { shouldSkipThirdPartyModule, transformModuleForAutoDiscover, } from './reinspectAutoDiscoverPlugin.js';
|
|
3
|
-
const SUPPORTED_FILE_PATTERN = /\.[cm]?[jt]sx?$/;
|
|
4
|
-
function normalizeModuleId(id) {
|
|
5
|
-
return id.split(path.sep).join('/');
|
|
6
|
-
}
|
|
7
|
-
function isSupportedSourceFile(id) {
|
|
8
|
-
if (!SUPPORTED_FILE_PATTERN.test(id)) {
|
|
9
|
-
return false;
|
|
10
|
-
}
|
|
11
|
-
if (id.includes('/node_modules/react-reinspect/')) {
|
|
12
|
-
return false;
|
|
13
|
-
}
|
|
14
|
-
return true;
|
|
15
|
-
}
|
|
16
|
-
function resolveAutoDiscoverScope(normalizedId, includeThirdParty) {
|
|
17
|
-
const isThirdParty = normalizedId.includes('/node_modules/');
|
|
18
|
-
if (!isThirdParty) {
|
|
19
|
-
return 'first-party';
|
|
20
|
-
}
|
|
21
|
-
if (!includeThirdParty || shouldSkipThirdPartyModule(normalizedId)) {
|
|
22
|
-
return null;
|
|
23
|
-
}
|
|
24
|
-
return 'third-party';
|
|
25
|
-
}
|
|
1
|
+
import { normalizeModuleId, isSupportedSourceFile, resolveAutoDiscoverScope, transformModuleForAutoDiscover, } from './internal/autoDiscoverTransform.js';
|
|
26
2
|
function runTransform(sourceCode, normalizedId, options) {
|
|
27
3
|
if (!isSupportedSourceFile(normalizedId)) {
|
|
28
4
|
return sourceCode;
|
|
29
5
|
}
|
|
30
|
-
const
|
|
31
|
-
|
|
6
|
+
const scope = resolveAutoDiscoverScope(normalizedId, {
|
|
7
|
+
include: options.includeThirdParty ? 'all' : 'first-party',
|
|
8
|
+
thirdPartyAllowlist: options.thirdPartyAllowlist ?? [],
|
|
9
|
+
});
|
|
32
10
|
if (!scope) {
|
|
33
11
|
return sourceCode;
|
|
34
12
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export interface ReinspectNextPluginOptions {
|
|
2
2
|
includeThirdParty?: boolean;
|
|
3
|
+
thirdPartyAllowlist?: readonly string[];
|
|
3
4
|
enableInProduction?: boolean;
|
|
4
5
|
}
|
|
5
6
|
interface NextWebpackOptions {
|
|
@@ -10,6 +11,7 @@ interface NextWebpackUseEntry {
|
|
|
10
11
|
loader?: string;
|
|
11
12
|
options?: {
|
|
12
13
|
includeThirdParty?: boolean;
|
|
14
|
+
thirdPartyAllowlist?: readonly string[];
|
|
13
15
|
};
|
|
14
16
|
}
|
|
15
17
|
interface NextWebpackRule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reinspectNextPlugin.d.ts","sourceRoot":"","sources":["../../src/plugin/reinspectNextPlugin.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,UAAU,kBAAkB;IAC1B,GAAG,EAAE,OAAO,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE;QACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"reinspectNextPlugin.d.ts","sourceRoot":"","sources":["../../src/plugin/reinspectNextPlugin.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mBAAmB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,UAAU,kBAAkB;IAC1B,GAAG,EAAE,OAAO,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE;QACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;QAC3B,mBAAmB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;KACxC,CAAA;CACF;AAED,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,EAAE,CAAA;CAClD;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;CAC1B;AAED,UAAU,iBAAiB;IACzB,MAAM,CAAC,EAAE,uBAAuB,CAAA;CACjC;AAED,KAAK,mBAAmB,GAAG,CACzB,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,kBAAkB,KACxB,iBAAiB,CAAA;AAEtB,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,mBAAmB,CAAA;CAC9B;AA2ED,wBAAgB,yBAAyB,CACvC,UAAU,GAAE,cAAmB,EAC/B,aAAa,GAAE,0BAA+B,GAC7C,cAAc,CAsBhB"}
|
|
@@ -30,20 +30,24 @@ function addReinspectLoaderRule(config, options) {
|
|
|
30
30
|
return config;
|
|
31
31
|
}
|
|
32
32
|
const nextLoaderPath = resolveNextLoaderPath();
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
{
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
includeThirdParty: Boolean(options.includeThirdParty),
|
|
43
|
-
},
|
|
33
|
+
const reinspectRule = {
|
|
34
|
+
test: /\.[cm]?[jt]sx?$/,
|
|
35
|
+
enforce: 'pre',
|
|
36
|
+
use: [
|
|
37
|
+
{
|
|
38
|
+
loader: nextLoaderPath,
|
|
39
|
+
options: {
|
|
40
|
+
includeThirdParty: options.includeThirdParty === true,
|
|
41
|
+
thirdPartyAllowlist: options.thirdPartyAllowlist ?? [],
|
|
44
42
|
},
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
},
|
|
44
|
+
],
|
|
45
|
+
};
|
|
46
|
+
if (options.includeThirdParty !== true) {
|
|
47
|
+
reinspectRule.exclude = /node_modules/;
|
|
48
|
+
}
|
|
49
|
+
const nextRules = [
|
|
50
|
+
reinspectRule,
|
|
47
51
|
...rules,
|
|
48
52
|
];
|
|
49
53
|
config.module = {
|
|
@@ -60,8 +64,8 @@ export function withReinspectAutoDiscover(nextConfig = {}, pluginOptions = {}) {
|
|
|
60
64
|
const resolvedConfig = typeof originalWebpack === 'function'
|
|
61
65
|
? originalWebpack(config, options) ?? config
|
|
62
66
|
: config;
|
|
63
|
-
const shouldEnable = (options.dev ||
|
|
64
|
-
|
|
67
|
+
const shouldEnable = (options.dev || pluginOptions.enableInProduction === true) &&
|
|
68
|
+
options.isServer !== true;
|
|
65
69
|
if (!shouldEnable) {
|
|
66
70
|
return resolvedConfig;
|
|
67
71
|
}
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-reinspect",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"description": "Visual runtime inspector for React components with render counters and style overrides.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -27,12 +27,18 @@
|
|
|
27
27
|
"types": "./dist/plugin/reinspectNextPlugin.d.ts",
|
|
28
28
|
"import": "./dist/plugin/reinspectNextPlugin.js"
|
|
29
29
|
},
|
|
30
|
+
"./internal/auto-wrap": {
|
|
31
|
+
"types": "./dist/lib/internal/auto-wrap.d.ts",
|
|
32
|
+
"import": "./dist/lib/internal/auto-wrap.js",
|
|
33
|
+
"require": "./dist/lib/internal/auto-wrap.cjs"
|
|
34
|
+
},
|
|
30
35
|
"./style.css": "./dist/lib/style.css"
|
|
31
36
|
},
|
|
32
37
|
"files": [
|
|
33
38
|
"dist/lib",
|
|
34
39
|
"dist/plugin",
|
|
35
|
-
"README.md"
|
|
40
|
+
"README.md",
|
|
41
|
+
"docs/assets"
|
|
36
42
|
],
|
|
37
43
|
"sideEffects": [
|
|
38
44
|
"**/*.css"
|