Skip to content

Commit 1cad91e

Browse files
aidenybailxsmnsyc
aidenybai
and
lxsmnsyc
authored
refactor(core.ts): add getFiberSource function and update dependencies (#28)
* refactor(core.ts): add getFiberSource function and update dependencies * Rework source map (#29) * Rework source map * Update inspect.tsx * Fix deps * patch * refactor(bippy): Remove console logs from inspect.tsx * refactor(bippy): Remove unused import and code in inspect.tsx --------- Co-authored-by: Alexis H. Munsayac <[email protected]>
1 parent 949c6f9 commit 1cad91e

File tree

11 files changed

+861
-193
lines changed

11 files changed

+861
-193
lines changed

‎biome.json

+7-5
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,18 @@
1111
"ignore": ["*.gen.ts", "node_modules", "dist", "coverage"]
1212
},
1313
"formatter": {
14+
"enabled": true,
1415
"indentStyle": "space",
1516
"indentWidth": 2,
1617
"lineWidth": 80,
1718
"lineEnding": "lf"
1819
},
20+
"javascript": {
21+
"formatter": {
22+
"quoteStyle": "single",
23+
"trailingCommas": "all"
24+
}
25+
},
1926
"organizeImports": {
2027
"enabled": true
2128
},
@@ -52,10 +59,5 @@
5259
}
5360
}
5461
}
55-
},
56-
"javascript": {
57-
"formatter": {
58-
"quoteStyle": "single"
59-
}
6062
}
6163
}

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"packageManager": "[email protected]",
1616
"private": true,
1717
"devDependencies": {
18+
"@biomejs/biome": "1.9.4",
1819
"@changesets/changelog-git": "^0.2.0",
1920
"@changesets/cli": "^2.27.11",
2021
"sherif": "^1.2.0"

‎packages/bippy/package.json

+125-123
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,127 @@
11
{
2-
"name": "bippy",
3-
"version": "0.2.24",
4-
"description": "hack into react internals",
5-
"keywords": [
6-
"bippy",
7-
"react",
8-
"react-instrumentation",
9-
"react instrumentation",
10-
"fiber",
11-
"internals"
12-
],
13-
"homepage": "https://bippy.dev",
14-
"bugs": {
15-
"url": "https://github.com/aidenybai/bippy/issues"
16-
},
17-
"repository": {
18-
"type": "git",
19-
"url": "git+https://github.com/aidenybai/bippy.git"
20-
},
21-
"license": "MIT",
22-
"author": {
23-
"name": "Aiden Bai",
24-
"email": "[email protected]"
25-
},
26-
"sideEffects": false,
27-
"type": "module",
28-
"exports": {
29-
"./package.json": "./package.json",
30-
".": {
31-
"import": {
32-
"types": "./dist/index.d.ts",
33-
"default": "./dist/index.js"
34-
},
35-
"require": {
36-
"types": "./dist/index.d.cts",
37-
"default": "./dist/index.cjs"
38-
}
39-
},
40-
"./core": {
41-
"import": {
42-
"types": "./dist/core.d.ts",
43-
"default": "./dist/core.js"
44-
},
45-
"require": {
46-
"types": "./dist/core.d.cts",
47-
"default": "./dist/core.cjs"
48-
}
49-
},
50-
"./sw": {
51-
"import": {
52-
"types": "./dist/sw.d.ts",
53-
"default": "./dist/sw.js"
54-
},
55-
"require": {
56-
"types": "./dist/sw.d.cts",
57-
"default": "./dist/sw.cjs"
58-
}
59-
},
60-
"./experiments/inspect": {
61-
"import": {
62-
"types": "./dist/experiments/inspect.d.ts",
63-
"default": "./dist/experiments/inspect.js"
64-
},
65-
"require": {
66-
"types": "./dist/experiments/inspect.d.cts",
67-
"default": "./dist/experiments/inspect.cjs"
68-
}
69-
},
70-
"./dist/*": "./dist/*.js",
71-
"./dist/*.js": "./dist/*.js",
72-
"./dist/*.cjs": "./dist/*.cjs",
73-
"./dist/*.mjs": "./dist/*.mjs"
74-
},
75-
"main": "dist/index.js",
76-
"module": "dist/index.js",
77-
"browser": "dist/index.global.js",
78-
"types": "dist/index.d.ts",
79-
"files": [
80-
"dist",
81-
"bin",
82-
"package.json",
83-
"README.md",
84-
"LICENSE"
85-
],
86-
"scripts": {
87-
"build": "NODE_ENV=production tsup",
88-
"dev": "NODE_ENV=development tsup --watch",
89-
"publint": "publint",
90-
"test": "vitest",
91-
"coverage": "vitest run --coverage",
92-
"prepublishOnly": "cp ../../README.md . && pnpm build"
93-
},
94-
"devDependencies": {
95-
"@biomejs/biome": "1.9.4",
96-
"@testing-library/dom": "^10.4.0",
97-
"@testing-library/react": "^16.1.0",
98-
"@types/node": "^20",
99-
"@types/react": "^19.0.4",
100-
"@types/react-dom": "^19.0.2",
101-
"@vitest/coverage-istanbul": "2.1.8",
102-
"esbuild": "^0.24.2",
103-
"happy-dom": "^15.11.7",
104-
"pkg-pr-new": "^0.0.39",
105-
"publint": "^0.2.12",
106-
"react": "19.0.0",
107-
"react-devtools-inline": "^6.0.1",
108-
"react-dom": "19.0.0",
109-
"react-inspector": "^6.0.2",
110-
"react-reconciler": "^0.31.0",
111-
"react-refresh": "^0.16.0",
112-
"terser": "^5.36.0",
113-
"tsup": "^8.2.4",
114-
"vitest": "^2.1.8"
115-
},
116-
"publishConfig": {
117-
"access": "public"
118-
},
119-
"peerDependencies": {
120-
"react": ">=17.0.1"
121-
},
122-
"dependencies": {
123-
"@types/react-reconciler": "^0.28.9"
124-
}
2+
"name": "bippy",
3+
"version": "0.2.24",
4+
"description": "hack into react internals",
5+
"keywords": [
6+
"bippy",
7+
"react",
8+
"react-instrumentation",
9+
"react instrumentation",
10+
"fiber",
11+
"internals"
12+
],
13+
"homepage": "https://bippy.dev",
14+
"bugs": {
15+
"url": "https://github.com/aidenybai/bippy/issues"
16+
},
17+
"repository": {
18+
"type": "git",
19+
"url": "git+https://github.com/aidenybai/bippy.git"
20+
},
21+
"license": "MIT",
22+
"author": {
23+
"name": "Aiden Bai",
24+
"email": "[email protected]"
25+
},
26+
"sideEffects": false,
27+
"type": "module",
28+
"exports": {
29+
"./package.json": "./package.json",
30+
".": {
31+
"import": {
32+
"types": "./dist/index.d.ts",
33+
"default": "./dist/index.js"
34+
},
35+
"require": {
36+
"types": "./dist/index.d.cts",
37+
"default": "./dist/index.cjs"
38+
}
39+
},
40+
"./core": {
41+
"import": {
42+
"types": "./dist/core.d.ts",
43+
"default": "./dist/core.js"
44+
},
45+
"require": {
46+
"types": "./dist/core.d.cts",
47+
"default": "./dist/core.cjs"
48+
}
49+
},
50+
"./source": {
51+
"import": {
52+
"types": "./dist/source.d.ts",
53+
"default": "./dist/source.js"
54+
},
55+
"require": {
56+
"types": "./dist/source.d.cts",
57+
"default": "./dist/source.cjs"
58+
}
59+
},
60+
"./experiments/inspect": {
61+
"import": {
62+
"types": "./dist/experiments/inspect.d.ts",
63+
"default": "./dist/experiments/inspect.js"
64+
},
65+
"require": {
66+
"types": "./dist/experiments/inspect.d.cts",
67+
"default": "./dist/experiments/inspect.cjs"
68+
}
69+
},
70+
"./dist/*": "./dist/*.js",
71+
"./dist/*.js": "./dist/*.js",
72+
"./dist/*.cjs": "./dist/*.cjs",
73+
"./dist/*.mjs": "./dist/*.mjs"
74+
},
75+
"main": "dist/index.js",
76+
"module": "dist/index.js",
77+
"browser": "dist/index.global.js",
78+
"types": "dist/index.d.ts",
79+
"files": [
80+
"dist",
81+
"bin",
82+
"package.json",
83+
"README.md",
84+
"LICENSE"
85+
],
86+
"scripts": {
87+
"build": "NODE_ENV=production tsup",
88+
"dev": "NODE_ENV=development tsup --watch",
89+
"publint": "publint",
90+
"test": "vitest",
91+
"coverage": "vitest run --coverage",
92+
"prepublishOnly": "cp ../../README.md . && pnpm build"
93+
},
94+
"devDependencies": {
95+
"@biomejs/biome": "1.9.4",
96+
"@testing-library/dom": "^10.4.0",
97+
"@testing-library/react": "^16.1.0",
98+
"@types/node": "^20",
99+
"@types/react": "^19.0.4",
100+
"@types/react-dom": "^19.0.2",
101+
"@vitest/coverage-istanbul": "2.1.8",
102+
"error-stack-parser-es": "^1.0.5",
103+
"esbuild": "^0.24.2",
104+
"happy-dom": "^15.11.7",
105+
"pkg-pr-new": "^0.0.39",
106+
"publint": "^0.2.12",
107+
"react": "19.0.0",
108+
"react-devtools-inline": "^6.0.1",
109+
"react-dom": "19.0.0",
110+
"react-inspector": "^6.0.2",
111+
"react-reconciler": "^0.31.0",
112+
"react-refresh": "^0.16.0",
113+
"source-map-js": "^1.2.1",
114+
"terser": "^5.36.0",
115+
"tsup": "^8.2.4",
116+
"vitest": "^2.1.8"
117+
},
118+
"publishConfig": {
119+
"access": "public"
120+
},
121+
"peerDependencies": {
122+
"react": ">=17.0.1"
123+
},
124+
"dependencies": {
125+
"@types/react-reconciler": "^0.28.9"
126+
}
125127
}

‎packages/bippy/src/core.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -478,10 +478,13 @@ export const getType = (type: unknown): React.ComponentType<unknown> | null => {
478478
};
479479

480480
/**
481-
* Returns the display name of the {@link Fiber}.
481+
* Returns the display name of the {@link Fiber} type.
482482
*/
483483
export const getDisplayName = (type: unknown): string | null => {
484484
const currentType = type as FiberType;
485+
if (typeof currentType === 'string') {
486+
return currentType;
487+
}
485488
if (
486489
typeof currentType !== 'function' &&
487490
!(typeof currentType === 'object' && currentType)

‎packages/bippy/src/experiments/inspect.tsx

+25-21
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,29 @@
1-
import {
2-
getDisplayName,
3-
getFiberFromHostInstance,
4-
traverseFiber,
5-
isInstrumentationActive,
6-
getRDTHook,
7-
detectReactBuildType,
8-
getFiberStack,
9-
getFiberId,
10-
type Fiber,
11-
getNearestHostFiber,
12-
hasRDTHook,
13-
isCompositeFiber,
14-
} from '../index.js';
151
import React, {
16-
useState,
17-
useEffect,
18-
type ReactNode,
192
type MouseEvent,
3+
type ReactNode,
204
useCallback,
5+
useEffect,
6+
useState,
217
} from 'react';
8+
import ReactDOM from 'react-dom';
229
import {
23-
Inspector as ReactInspector,
24-
ObjectRootLabel,
2510
ObjectLabel,
11+
ObjectRootLabel,
12+
Inspector as ReactInspector,
2613
} from 'react-inspector';
27-
import ReactDOM from 'react-dom';
14+
import {
15+
type Fiber,
16+
detectReactBuildType,
17+
getDisplayName,
18+
getFiberFromHostInstance,
19+
getFiberId,
20+
getFiberStack,
21+
getNearestHostFiber,
22+
getRDTHook,
23+
hasRDTHook,
24+
isInstrumentationActive,
25+
traverseFiber,
26+
} from '../index.js';
2827

2928
const FIBER_PROP_EXPLANATIONS: Record<string, string> = {
3029
tag: 'Numeric type identifier for this fiber (e.g. 1=FunctionComponent, 5=HostComponent)',
@@ -253,6 +252,7 @@ export const RawInspector = React.memo(
253252
const getFiberForDisplay = useCallback(() => {
254253
if (selectedFiber) return selectedFiber;
255254
const fiber = getFiberFromHostInstance(element);
255+
256256
return fiber;
257257
}, [selectedFiber, element]);
258258

@@ -518,7 +518,11 @@ export const RawInspector = React.memo(
518518
margin: 0,
519519
}}
520520
>
521-
{`<${typeof fiber.type === 'string' ? fiber.type : getDisplayName(fiber.type) || 'unknown'}>`}
521+
{`<${
522+
typeof fiber.type === 'string'
523+
? fiber.type
524+
: getDisplayName(fiber.type) || 'unknown'
525+
}>`}
522526
{!isDialogMode && (
523527
<span
524528
style={{

0 commit comments

Comments
 (0)