Skip to content

Commit 3899c7b

Browse files
lxsmnsyclxsmnsyc
authored
perf: cleanup useComputed (#308)
* Simplify computeds * Update helpers.ts * Update index.tsx
1 parent 6e470b0 commit 3899c7b

File tree

5 files changed

+71
-85
lines changed

5 files changed

+71
-85
lines changed

‎packages/scan/src/web/utils/helpers.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
import {
22
type Fiber,
3-
ForwardRefTag,
43
MemoComponentTag,
54
SimpleMemoComponentTag,
65
SuspenseComponentTag,
76
getDisplayName,
87
hasMemoCache,
98
} from 'bippy';
109
import { type ClassValue, clsx } from 'clsx';
11-
import { twMerge } from 'tailwind-merge';
1210
import { IS_CLIENT } from './constants';
1311

1412
export const cn = (...inputs: Array<ClassValue>): string => {
15-
return twMerge(clsx(inputs));
13+
return clsx(inputs); // no twMerge for now
1614
};
1715

1816
export const isFirefox =

‎packages/scan/src/web/views/index.tsx

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { type ReadonlySignal, useComputed } from '@preact/signals';
1+
import { type ReadonlySignal, computed } from '@preact/signals';
22
import type { ReactNode } from 'preact/compat';
33
import { Store } from '~core/index';
44
import { signalWidgetViews } from '~web/state';
@@ -8,11 +8,31 @@ import { ViewInspector } from './inspector';
88
import { Toolbar } from './toolbar';
99
import { NotificationWrapper } from './notifications/notifications';
1010

11-
export const Content = () => {
12-
const isInspecting = useComputed(
13-
() => Store.inspectState.value.kind === 'inspecting',
14-
);
11+
const isInspecting = computed(
12+
() => Store.inspectState.value.kind === 'inspecting',
13+
);
14+
15+
const headerClassName = computed(() =>
16+
cn(
17+
'relative',
18+
'flex-1',
19+
'flex flex-col',
20+
'rounded-t-lg',
21+
'overflow-hidden',
22+
'opacity-100',
23+
'transition-[opacity]',
24+
isInspecting.value && 'opacity-0 duration-0 delay-0',
25+
),
26+
);
27+
28+
const isInspectorViewOpen = computed(
29+
() => signalWidgetViews.value.view === 'inspector',
30+
);
31+
const isNotificationsViewOpen = computed(
32+
() => signalWidgetViews.value.view === 'notifications',
33+
);
1534

35+
export const Content = () => {
1636
return (
1737
<div
1838
className={cn(
@@ -28,20 +48,7 @@ export const Content = () => {
2848
'peer-hover/bottom:rounded-b-none',
2949
)}
3050
>
31-
<div
32-
className={useComputed(() =>
33-
cn(
34-
'relative',
35-
'flex-1',
36-
'flex flex-col',
37-
'rounded-t-lg',
38-
'overflow-hidden',
39-
'opacity-100',
40-
'transition-[opacity]',
41-
isInspecting.value && 'opacity-0 duration-0 delay-0',
42-
),
43-
)}
44-
>
51+
<div className={headerClassName}>
4552
<Header />
4653
<div
4754
className={cn(
@@ -54,20 +61,12 @@ export const Content = () => {
5461
'border-b border-[#222]',
5562
)}
5663
>
57-
<ContentView
58-
isOpen={useComputed(
59-
() => signalWidgetViews.value.view === 'inspector',
60-
)}
61-
>
64+
<ContentView isOpen={isInspectorViewOpen}>
6265
<ViewInspector />
6366
</ContentView>
6467

65-
<ContentView
66-
isOpen={useComputed(
67-
() => signalWidgetViews.value.view === 'notifications',
68-
)}
69-
>
70-
<NotificationWrapper/>
68+
<ContentView isOpen={isNotificationsViewOpen}>
69+
<NotificationWrapper />
7170
</ContentView>
7271
</div>
7372
</div>
@@ -84,15 +83,13 @@ interface ContentViewProps {
8483
const ContentView = ({ isOpen, children }: ContentViewProps) => {
8584
return (
8685
<div
87-
className={useComputed(() =>
88-
cn(
89-
'flex-1',
90-
'opacity-0',
91-
'overflow-y-auto overflow-x-hidden',
92-
'transition-opacity delay-0',
93-
'pointer-events-none',
94-
isOpen.value && 'opacity-100 delay-150 pointer-events-auto',
95-
),
86+
className={cn(
87+
'flex-1',
88+
'opacity-0',
89+
'overflow-y-auto overflow-x-hidden',
90+
'transition-opacity delay-0',
91+
'pointer-events-none',
92+
isOpen.value && 'opacity-100 delay-150 pointer-events-auto',
9693
)}
9794
>
9895
<div className="absolute inset-0 flex">{children}</div>

‎packages/scan/src/web/views/inspector/header.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
1-
import { untracked, useComputed, useSignalEffect } from '@preact/signals';
1+
import { computed, untracked, useSignalEffect } from '@preact/signals';
22
import type { Fiber } from 'bippy';
33
import { useMemo, useRef, useState } from 'preact/hooks';
44
import { Store } from '~core/index';
55
import { signalIsSettingsOpen } from '~web/state';
66
import { cn, getExtendedDisplayName } from '~web/utils/helpers';
77
import { timelineState } from './states';
88

9+
const headerInspectClassName = computed(() =>
10+
cn(
11+
'absolute inset-0 flex items-center gap-x-2',
12+
'translate-y-0',
13+
'transition-transform duration-300',
14+
signalIsSettingsOpen.value && '-translate-y-[200%]',
15+
),
16+
);
17+
918
export const HeaderInspect = () => {
1019
const refReRenders = useRef<HTMLSpanElement>(null);
1120
const refTiming = useRef<HTMLSpanElement>(null);
@@ -102,16 +111,7 @@ export const HeaderInspect = () => {
102111
}, [currentFiber]);
103112

104113
return (
105-
<div
106-
className={useComputed(() =>
107-
cn(
108-
'absolute inset-0 flex items-center gap-x-2',
109-
'translate-y-0',
110-
'transition-transform duration-300',
111-
signalIsSettingsOpen.value && '-translate-y-[200%]',
112-
),
113-
)}
114-
>
114+
<div className={headerInspectClassName}>
115115
{componentName}
116116
<div className="flex items-center gap-x-2 mr-auto text-xs text-[#888]">
117117
<span

‎packages/scan/src/web/views/inspector/index.tsx

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { untracked, useComputed, useSignalEffect } from '@preact/signals';
1+
import { computed, untracked, useSignalEffect } from '@preact/signals';
22
import type { Fiber } from 'bippy';
33
import { Component } from 'preact';
44
import { useEffect, useRef } from 'preact/hooks';
@@ -78,6 +78,18 @@ class InspectorErrorBoundary extends Component {
7878
}
7979
}
8080

81+
const inspectorContainerClassName = computed(() =>
82+
cn(
83+
'react-scan-inspector',
84+
'flex-1',
85+
'opacity-0',
86+
'overflow-y-auto overflow-x-hidden',
87+
'transition-opacity delay-0',
88+
'pointer-events-none',
89+
!signalIsSettingsOpen.value && 'opacity-100 delay-300 pointer-events-auto',
90+
),
91+
);
92+
8193
const Inspector = /* @__PURE__ */ constant(() => {
8294
const refLastInspectedFiber = useRef<Fiber | null>(null);
8395

@@ -188,20 +200,7 @@ const Inspector = /* @__PURE__ */ constant(() => {
188200

189201
return (
190202
<InspectorErrorBoundary>
191-
<div
192-
className={useComputed(() =>
193-
cn(
194-
'react-scan-inspector',
195-
'flex-1',
196-
'opacity-0',
197-
'overflow-y-auto overflow-x-hidden',
198-
'transition-opacity delay-0',
199-
'pointer-events-none',
200-
!signalIsSettingsOpen.value &&
201-
'opacity-100 delay-300 pointer-events-auto',
202-
),
203-
)}
204-
>
203+
<div className={inspectorContainerClassName}>
205204
<WhatChangedSection />
206205
<StickySection>
207206
{(props) => <PropertySection section="props" {...props} />}

‎packages/scan/src/web/views/inspector/what-changed.tsx

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -92,26 +92,18 @@ export const WhatChangedSection = /* @__PURE__ */ memo(() => {
9292
}
9393
});
9494

95-
return (
95+
return useComputed(() => (
9696
<>
97-
{useComputed(
98-
() =>
99-
showTimeline.value && (
100-
<StickySection>{(props) => <Timeline {...props} />}</StickySection>
101-
),
97+
{showTimeline.value && (
98+
<StickySection>{(props) => <Timeline {...props} />}</StickySection>
10299
)}
103-
{useComputed(() => (
104-
<StickySection>
105-
{(props) => (
106-
<WhatChanged
107-
{...props}
108-
shouldShowChanges={shouldShowChanges.value}
109-
/>
110-
)}
111-
</StickySection>
112-
))}
100+
<StickySection>
101+
{(props) => (
102+
<WhatChanged {...props} shouldShowChanges={shouldShowChanges.value} />
103+
)}
104+
</StickySection>
113105
</>
114-
);
106+
));
115107
});
116108

117109
export const WhatChanged = /* @__PURE__ */ memo(

0 commit comments

Comments
 (0)