[DevXP] Improve Linaria pre-build speed (#18382)
## Summary This PR improves Linaria/WYW pre-build speed and continues the migration of `twenty-ui` components away from runtime `ThemeContext` reads toward static CSS variables and theme constants. ### Linaria/WYW profiling plugin improvements (`twenty-shared`) - **Babel JIT warmup**: added a `buildStart` warmup step that triggers WYW's Babel JIT compilation before the real build starts, so the first real file doesn't pay the cold-start penalty - **`configResolved` hook**: detects dev vs prod mode and resolves the correct warmup file path relative to `config.root` - **Dev-only per-file logging**: slow file warnings are now gated behind `isDevMode`, keeping production/CI build output clean - **`closeBundle` summary**: moved the final top-slow-files report to `closeBundle` for accurate end-of-build reporting - **Removed noisy progress interval logging** in favor of the warmup log + final summary ### Migration from `ThemeContext` to static CSS variables / constants Across `twenty-ui`, replaced runtime `useTheme()` reads with: - `themeCssVariables` CSS custom properties (colors, spacing) - Hard-coded design-system constants (`ICON.size.md` → `16`, `ICON.stroke.sm` → `1.6`) so components no longer need a React context at render time — enabling Linaria static extraction **Components migrated:** - `Button`, `AnimatedButton`, `LightButton`, `LightIconButton`, `AnimatedLightIconButton`, `ButtonIcon`, `ButtonSoon` - `ProgressBar` (Framer Motion width animation → CSS `transition`) - `Info`, `HorizontalSeparator`, `LinkChip` - `MenuPicker`, `MenuItemLeftContent`, `MenuItemIconWithGripSwap`, `NavigationBarItem` - `JsonArrow`, `JsonNestedNode` - `ModalHeader` ### Other - Added `aria-valuenow` to `ProgressBar` for accessibility - `VisibilityHidden` component updated to inline accessibility styles
This commit is contained in:
Charles Bochet
+22
-54
@@ -2,52 +2,10 @@ import { Table } from '@/ui/layout/table/components/Table';
|
||||
import { TableBody } from '@/ui/layout/table/components/TableBody';
|
||||
import { TableCell } from '@/ui/layout/table/components/TableCell';
|
||||
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
||||
import { styled } from '@linaria/react';
|
||||
import { useContext } from 'react';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { type IconComponent } from 'twenty-ui/display';
|
||||
import { Card } from 'twenty-ui/layout';
|
||||
import { ThemeContext } from 'twenty-ui/theme';
|
||||
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
||||
|
||||
const StyledCard = styled(Card)`
|
||||
background-color: ${themeCssVariables.background.secondary};
|
||||
border: 1px solid ${themeCssVariables.border.color.medium};
|
||||
`;
|
||||
|
||||
const StyledTableRow = styled(TableRow)`
|
||||
height: ${themeCssVariables.spacing[6]};
|
||||
`;
|
||||
|
||||
const StyledTableCellLabel = styled(TableCell)<{
|
||||
align?: 'left' | 'center' | 'right';
|
||||
}>`
|
||||
color: ${themeCssVariables.font.color.tertiary};
|
||||
height: ${themeCssVariables.spacing[6]};
|
||||
display: flex;
|
||||
gap: ${themeCssVariables.spacing[2]};
|
||||
justify-content: ${({ align }) =>
|
||||
align === 'right'
|
||||
? 'flex-end'
|
||||
: align === 'center'
|
||||
? 'center'
|
||||
: 'flex-start'};
|
||||
`;
|
||||
|
||||
const StyledTableCellValue = styled(TableCell)<{
|
||||
align?: 'left' | 'center' | 'right';
|
||||
clickable?: boolean;
|
||||
}>`
|
||||
color: ${themeCssVariables.font.color.primary};
|
||||
cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};
|
||||
height: ${themeCssVariables.spacing[6]};
|
||||
justify-content: ${({ align }) =>
|
||||
align === 'left'
|
||||
? 'flex-start'
|
||||
: align === 'center'
|
||||
? 'center'
|
||||
: 'flex-end'};
|
||||
`;
|
||||
import { ICON_SIZES, themeCssVariables } from 'twenty-ui/theme-constants';
|
||||
|
||||
type TableItem = {
|
||||
Icon?: IconComponent;
|
||||
@@ -73,32 +31,42 @@ export const SettingsAdminTableCard = ({
|
||||
valueAlign = 'left',
|
||||
className,
|
||||
}: SettingsAdminTableCardProps) => {
|
||||
const { theme } = useContext(ThemeContext);
|
||||
|
||||
return (
|
||||
<StyledCard rounded={rounded} className={className}>
|
||||
<Card
|
||||
rounded={rounded}
|
||||
className={className}
|
||||
backgroundColor={themeCssVariables.background.secondary}
|
||||
>
|
||||
<Table>
|
||||
<TableBody>
|
||||
{items.map((item, index) => (
|
||||
<StyledTableRow
|
||||
<TableRow
|
||||
key={index + item.label}
|
||||
gridAutoColumns={gridAutoColumns}
|
||||
height={themeCssVariables.spacing[6]}
|
||||
>
|
||||
<StyledTableCellLabel align={labelAlign}>
|
||||
{item.Icon && <item.Icon size={theme.icon.size.md} />}
|
||||
<TableCell
|
||||
align={labelAlign}
|
||||
color={themeCssVariables.font.color.tertiary}
|
||||
height={themeCssVariables.spacing[6]}
|
||||
gap={themeCssVariables.spacing[2]}
|
||||
>
|
||||
{item.Icon && <item.Icon size={ICON_SIZES.md} />}
|
||||
<span>{item.label}</span>
|
||||
</StyledTableCellLabel>
|
||||
<StyledTableCellValue
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align={valueAlign}
|
||||
color={themeCssVariables.font.color.primary}
|
||||
height={themeCssVariables.spacing[6]}
|
||||
onClick={item.onClick}
|
||||
clickable={isDefined(item.onClick)}
|
||||
>
|
||||
{item.value}
|
||||
</StyledTableCellValue>
|
||||
</StyledTableRow>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledCard>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
+23
-40
@@ -61,42 +61,10 @@ const StyledPaginationContainer = styled.div`
|
||||
padding: ${themeCssVariables.spacing[2]};
|
||||
`;
|
||||
|
||||
const StyledTableCell = styled(TableCell)`
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const StyledExpandableTableRow = styled(TableRow)<{ isExpanded: boolean }>`
|
||||
cursor: pointer;
|
||||
background-color: ${({ isExpanded }) =>
|
||||
isExpanded
|
||||
? themeCssVariables.background.transparent.light
|
||||
: 'transparent'};
|
||||
|
||||
&:hover {
|
||||
background-color: ${themeCssVariables.background.transparent.light};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledJobRowWrapper = styled.div`
|
||||
display: contents;
|
||||
`;
|
||||
|
||||
const StyledCheckboxCell = styled(TableCell)`
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
padding-left: ${themeCssVariables.spacing[1]};
|
||||
`;
|
||||
|
||||
const StyledHeaderCheckboxCell = styled(TableHeader)`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-right: ${themeCssVariables.spacing[1]};
|
||||
`;
|
||||
|
||||
const StyledButtonGroup = styled.div`
|
||||
display: flex;
|
||||
gap: ${themeCssVariables.spacing[2]};
|
||||
@@ -299,7 +267,10 @@ export const SettingsAdminQueueJobsTable = ({
|
||||
<>
|
||||
<Table>
|
||||
<TableRow gridAutoColumns="32px 2fr 1fr 2fr 32px">
|
||||
<StyledHeaderCheckboxCell>
|
||||
<TableHeader
|
||||
align="center"
|
||||
padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`}
|
||||
>
|
||||
{jobs.length > 0 && (
|
||||
<Checkbox
|
||||
checked={allJobsSelected}
|
||||
@@ -307,7 +278,7 @@ export const SettingsAdminQueueJobsTable = ({
|
||||
onChange={handleToggleAll}
|
||||
/>
|
||||
)}
|
||||
</StyledHeaderCheckboxCell>
|
||||
</TableHeader>
|
||||
<TableHeader>{t`Job Name`}</TableHeader>
|
||||
<TableHeader>{t`State`}</TableHeader>
|
||||
<TableHeader align="right">{t`Timestamp`}</TableHeader>
|
||||
@@ -320,22 +291,34 @@ export const SettingsAdminQueueJobsTable = ({
|
||||
|
||||
return (
|
||||
<StyledJobRowWrapper key={job.id}>
|
||||
<StyledExpandableTableRow
|
||||
<TableRow
|
||||
gridAutoColumns="32px 2fr 1fr 2fr 32px"
|
||||
onClick={() => handleRowClick(job.id)}
|
||||
isExpanded={isExpanded}
|
||||
cursor="pointer"
|
||||
hoverBackgroundColor={
|
||||
themeCssVariables.background.transparent.light
|
||||
}
|
||||
>
|
||||
<StyledCheckboxCell
|
||||
<TableCell
|
||||
align="center"
|
||||
padding={`0 0 0 ${themeCssVariables.spacing[1]}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleToggleJob(e, job.id);
|
||||
}}
|
||||
>
|
||||
<Checkbox checked={isSelected} />
|
||||
</StyledCheckboxCell>
|
||||
<StyledTableCell title={job.name}>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
title={job.name}
|
||||
maxWidth="200px"
|
||||
overflow="hidden"
|
||||
textOverflow="ellipsis"
|
||||
whiteSpace="nowrap"
|
||||
>
|
||||
{job.name}
|
||||
</StyledTableCell>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<SettingsAdminJobStateBadge
|
||||
state={job.state}
|
||||
@@ -364,7 +347,7 @@ export const SettingsAdminQueueJobsTable = ({
|
||||
onDelete={() => handleDeleteOne(job.id)}
|
||||
/>
|
||||
</TableCell>
|
||||
</StyledExpandableTableRow>
|
||||
</TableRow>
|
||||
<SettingsAdminJobDetailsExpandable
|
||||
job={job}
|
||||
isExpanded={isExpanded}
|
||||
|
||||
Reference in New Issue
Block a user