Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
In this article, we review how the store is managed in react-scan source code. The below code is picked from .
export const Store: StoreType = {
wasDetailsOpen: signal(true),
isInIframe: signal(
typeof window !== 'undefined' && window.self !== window.top,
),
inspectState: signal<States>({
kind: 'uninitialized',
}),
monitor: signal<Monitor | null>(null),
fiberRoots: new Set<Fiber>(),
reportData: new Map<number, RenderData>(),
legacyReportData: new Map<string, RenderData>(),
lastReportTime: signal(0),
};
You will find Set, Map but I don’t know what signal here is. Let’s find out.
signal is imported from preact as shown below
import { type Signal, signal } from '@preact/signals';
Signals in Preact
Signals are reactive primitives for managing application state.
What makes Signals unique is that state changes automatically update components and UI in the most efficient way possible. Automatic state binding and dependency tracking allows Signals to provide excellent ergonomics and productivity while eliminating the most common state management footguns.
Signals are effective in applications of any size, with ergonomics that speed up the development of small apps, and performance characteristics that ensure apps of any size are fast by default.
Read more about .
How this state is used in react-scan?
I and found that it is used in 30 files.
I have picked some instances where this state is used.
// todo: update monitoring api to expose filters for component names
export function initPerformanceMonitoring(options?: Partial<PathFilters>) {
const filters = { ...DEFAULT_FILTERS, ...options };
const monitor = Store.monitor.value;
if (!monitor) return;
export const Content = () => {
const isInspecting = useComputed(
() => Store.inspectState.value.kind === 'inspecting',
);
return (
<div
const updateVisibility = () => {
const isFocused = Store.inspectState.value.kind === 'focused';
const shouldShow = signalWidgetViews.value.view !== 'none';
const isVisible =
(isFocused || shouldShow) &&
getHandleVisibility(
position,
signalWidget.value.corner,
signalWidget.value.dimensions.isFullWidth,
signalWidget.value.dimensions.isFullHeight,
);
About me:
Hey, my name is . I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com
My Github —
My website —
My Youtube channel —
Learning platform —
Codebase Architecture —
Best practices —
Production-grade projects —
References:
export const Store: StoreType = {
wasDetailsOpen: signal(true),
isInIframe: signal(
typeof window !== 'undefined' && window.self !== window.top,
),
inspectState: signal<States>({
kind: 'uninitialized',
}),
monitor: signal<Monitor | null>(null),
fiberRoots: new Set<Fiber>(),
reportData: new Map<number, RenderData>(),
legacyReportData: new Map<string, RenderData>(),
lastReportTime: signal(0),
};
You will find Set, Map but I don’t know what signal here is. Let’s find out.
signal is imported from preact as shown below
import { type Signal, signal } from '@preact/signals';
Signals in Preact
Signals are reactive primitives for managing application state.
What makes Signals unique is that state changes automatically update components and UI in the most efficient way possible. Automatic state binding and dependency tracking allows Signals to provide excellent ergonomics and productivity while eliminating the most common state management footguns.
Signals are effective in applications of any size, with ergonomics that speed up the development of small apps, and performance characteristics that ensure apps of any size are fast by default.
Read more about .
How this state is used in react-scan?
I and found that it is used in 30 files.
I have picked some instances where this state is used.
// todo: update monitoring api to expose filters for component names
export function initPerformanceMonitoring(options?: Partial<PathFilters>) {
const filters = { ...DEFAULT_FILTERS, ...options };
const monitor = Store.monitor.value;
if (!monitor) return;
export const Content = () => {
const isInspecting = useComputed(
() => Store.inspectState.value.kind === 'inspecting',
);
return (
<div
const updateVisibility = () => {
const isFocused = Store.inspectState.value.kind === 'focused';
const shouldShow = signalWidgetViews.value.view !== 'none';
const isVisible =
(isFocused || shouldShow) &&
getHandleVisibility(
position,
signalWidget.value.corner,
signalWidget.value.dimensions.isFullWidth,
signalWidget.value.dimensions.isFullHeight,
);
About me:
Hey, my name is . I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com
My Github —
My website —
My Youtube channel —
Learning platform —
Codebase Architecture —
Best practices —
Production-grade projects —
References: