Skip to content

Commit 8918598

Browse files
RobPruzanRobPruzan
committed
build config for react native
1 parent acc5032 commit 8918598

File tree

13 files changed

+131
-40
lines changed

13 files changed

+131
-40
lines changed

‎package.json‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-scan",
3-
"version": "0.0.11",
3+
"version": "0.0.15",
44
"description": "Scan your React app for renders",
55
"keywords": [
66
"react",
@@ -97,6 +97,7 @@
9797
"main": "dist/index.js",
9898
"module": "dist/index.mjs",
9999
"browser": "dist/auto.global.js",
100+
"react-native": "dist/core/native/index.js",
100101
"types": "dist/index.d.ts",
101102
"files": [
102103
"dist",
@@ -113,7 +114,7 @@
113114
"publint": "publint"
114115
},
115116
"devDependencies": {
116-
"@shopify/react-native-skia": "^1.5.5",
117+
"@shopify/react-native-skia": "*",
117118
"@types/react": "^18.3.12",
118119
"@types/react-reconciler": "^0.28.8",
119120
"@vercel/style-guide": "^6.0.0",
@@ -122,12 +123,23 @@
122123
"publint": "^0.2.12",
123124
"react": "*",
124125
"react-dom": "*",
125-
"react-native": "0.76.2",
126-
"react-native-reanimated": "~3.16.1",
126+
"react-native": "*",
127+
"react-native-reanimated": "*",
127128
"react-reconciler": "^0.29.2",
128129
"terser": "^5.36.0",
129130
"tsup": "^8.2.4"
130131
},
132+
"peerDependenciesMeta": {
133+
"@shopify/react-native-skia": {
134+
"optional": true
135+
},
136+
"react-native": {
137+
"optional": true
138+
},
139+
"react-native-reanimated": {
140+
"optional": true
141+
}
142+
},
131143
"publishConfig": {
132144
"access": "public"
133145
}

‎pnpm-lock.yaml‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/core/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,8 @@ export const ReactScanInternals = createStore<Internals>({
156156
activeOutlines: [],
157157
});
158158

159+
export type ReactScanInternals = typeof ReactScanInternals;
160+
159161
export const getReport = () => ReactScanInternals.reportData;
160162

161163
export const setOptions = (options: Options) => {

‎src/core/instrumentation/index.ts‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,6 @@ import {
1212
traverseFiber,
1313
} from './fiber';
1414

15-
declare global {
16-
interface Window {
17-
__REACT_SCAN__?: {
18-
ReactScanInternals: typeof ReactScanInternals;
19-
};
20-
reactScan: any;
21-
__REACT_DEVTOOLS_GLOBAL_HOOK__?: {
22-
checkDCE: typeof NO_OP;
23-
supportsFiber: boolean;
24-
renderers: Map<number, any>;
25-
onScheduleFiberRoot: typeof NO_OP;
26-
onCommitFiberRoot: (rendererID: number, root: FiberRoot) => void;
27-
onCommitFiberUnmount: typeof NO_OP;
28-
inject: (renderer: any) => number;
29-
};
30-
}
31-
}
32-
3315
export interface Change {
3416
name: string;
3517
prevValue: unknown;

‎src/core/native/index.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export const hasSkia = (): boolean => {
2+
if (typeof window !== 'undefined' && !('ReactNative' in window)) {
3+
return false;
4+
}
5+
6+
try {
7+
require('@shopify/react-native-skia');
8+
return true;
9+
} catch (e) {
10+
return false;
11+
}
12+
};
13+
14+
export const requireSkia = () => {
15+
if (!hasSkia()) {
16+
throw new Error(
17+
'[your-package]: @shopify/react-native-skia is required for this component.\n' +
18+
'Please install it with: npm install @shopify/react-native-skia\n' +
19+
'Or: yarn add @shopify/react-native-skia',
20+
);
21+
}
22+
};
23+
24+
export * from './scan';

‎src/core/native/index.tsx‎ renamed to ‎src/core/native/instrument.ts‎

File renamed without changes.

‎src/core/native/scan.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
ScaledSize,
77
View,
88
} from 'react-native';
9-
import { Measurement, MeasurementValue, ReactScanInternals } from '../..';
9+
import { Measurement, MeasurementValue, ReactScanInternals } from '../../index';
1010

1111
import {
1212
Canvas,
@@ -22,8 +22,8 @@ import React, {
2222
useSyncExternalStore,
2323
} from 'react';
2424
import { Dimensions, Platform } from 'react-native';
25-
import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
26-
import { assertNative, instrumentNative } from '.';
25+
// import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
26+
import { assertNative, instrumentNative } from './instrument';
2727

2828
// can't use useSyncExternalStore for compat
2929
const useIsPaused = () => {
@@ -157,7 +157,7 @@ const getTextWidth = (text: string) => {
157157
return (text || 'unknown').length * 7;
158158
};
159159
const ReactNativeScan = ({ id: _ }: { id: string }) => {
160-
const opacity = useSharedValue(1);
160+
// const opacity = useSharedValue(1);
161161
// todo: polly fill
162162
const outlines = useSyncExternalStore(
163163
(listener) =>
@@ -172,7 +172,7 @@ const ReactNativeScan = ({ id: _ }: { id: string }) => {
172172
() => ReactScanInternals.activeOutlines,
173173
);
174174
// );
175-
const animatedOpacity = useDerivedValue(() => opacity.value);
175+
// const animatedOpacity = useDerivedValue(() => opacity.value);
176176

177177
return (
178178
<Canvas
@@ -186,7 +186,7 @@ const ReactNativeScan = ({ id: _ }: { id: string }) => {
186186
pointerEvents: 'none',
187187
}}
188188
>
189-
<Group opacity={animatedOpacity}>
189+
<Group>
190190
{outlines
191191
.filter(({ outline }) => {
192192
const measurement = assertNative(outline.latestMeasurement).value;

‎src/core/platform.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export const hasSkia = (): boolean => {
2+
if (typeof window !== 'undefined' && !('ReactNative' in window)) {
3+
return false;
4+
}
5+
6+
try {
7+
require('@shopify/react-native-skia');
8+
return true;
9+
} catch (e) {
10+
return false;
11+
}
12+
};
13+
14+
export const requireSkia = () => {
15+
if (!hasSkia()) {
16+
throw new Error(
17+
'[your-package]: @shopify/react-native-skia is required for this component.\n' +
18+
'Please install it with: npm install @shopify/react-native-skia\n' +
19+
'Or: yarn add @shopify/react-native-skia',
20+
);
21+
}
22+
};

‎src/core/utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactScanInternals } from '../';
1+
import { ReactScanInternals } from '../index';
22
import type { Render } from './instrumentation/index';
33

44
export const NO_OP = () => {

‎src/core/web/outline.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { getLabelText } from '../utils';
66
import { isOutlineUnstable, onIdle, throttle } from './utils';
77
import { log } from './log';
88
import { recalcOutlineColor } from './perf-observer';
9-
import { genId } from '../native';
9+
import { genId } from '../native/instrument';
1010

1111
export const assertDom = (measurement: Measurement) => {
1212
if (measurement.kind !== 'dom') {
@@ -393,7 +393,7 @@ export const fadeOutOutline = (ctx: CanvasRenderingContext2D) => {
393393

394394
for (let i = 0, len = pendingLabeledOutlines.length; i < len; i++) {
395395
const { alpha, outline, text } = pendingLabeledOutlines[i];
396-
const { value: rect } = assertDom(outline.latestMeasurement); // todo: fix for dom
396+
const { value: rect } = assertDom(outline.latestMeasurement);
397397
ctx.save();
398398

399399
if (text) {

0 commit comments

Comments
 (0)