Enable noImgElement biome rule for @liam-hq/erd-core package #3420
Description
Overview
The noImgElement biome rule needs to be enabled for the @liam-hq/erd-core package to improve performance by replacing <img> elements with optimized image components. After enabling this rule, lint errors have been detected that need to be fixed.
Steps to Enable the Rule
- Update
frontend/packages/erd-core/biome.jsoncwith the following configuration:
{
"extends": "//",
"root": false,
"linter": {
"rules": {
"performance": {
"noImgElement": "error"
}
}
}
}This overrides the base configuration in frontend/internal-packages/configs/biome.jsonc where noImgElement is set to "off".
- Run lint to see the errors:
cd frontend/packages/erd-core && pnpm lint:biomeLint Errors to Fix
After enabling the rule, noImgElement errors appear in the following file:
src/features/erd/components/ERDRenderer/CommandPalette/CommandPalettePreview/CommandPreview.tsx
These violations can lead to:
- Slower loading of command preview images
- Higher bandwidth usage for command demonstration images
- Missing automatic image optimization
- Poor performance in the command palette feature
Root Cause
The component contains <img> elements for displaying command preview images that should be replaced with optimized image components. Since this is a library package, it needs a solution that works independently of the consuming application's image optimization strategy.
Required Fix Patterns
Option 1: Implement Lazy Loading with Native APIs
// Before
<img
src={COMMAND_IMAGE_SOURCE[commandName]}
className={styles.image}
alt={`Demonstration of the ${commandName} command execution result`}
/>
// After
<img
src={COMMAND_IMAGE_SOURCE[commandName]}
className={styles.image}
alt={`Demonstration of the ${commandName} command execution result`}
loading="lazy"
decoding="async"
onLoad={handleImageLoad}
/>Option 2: Create a Command Image Component
// Create CommandImage component with optimization
interface CommandImageProps {
src: string;
alt: string;
className?: string;
}
const CommandImage = ({ src, alt, className }: CommandImageProps) => {
const [loaded, setLoaded] = useState(false);
return (
<img
src={src}
alt={alt}
className={className}
loading="lazy"
decoding="async"
onLoad={() => setLoaded(true)}
style={{ opacity: loaded ? 1 : 0.7 }}
/>
);
};Action Items
- Enable the
noImgElement: "error"rule infrontend/packages/erd-core/biome.jsonc - Run
pnpm lint:biometo identify all<img>element violations - Choose appropriate optimization strategy for command preview images
- Replace
<img>elements in:src/features/erd/components/ERDRenderer/CommandPalette/CommandPalettePreview/CommandPreview.tsx
- Implement lazy loading for better performance
- Run
pnpm lintto verify all errors are resolved - Test command palette functionality to ensure images load correctly
- Verify performance improvements in the ERD renderer
Testing
After implementing all fixes:
- All lint errors should be resolved
- Command preview images should display correctly
- Images should load efficiently with lazy loading
- Command palette should maintain full functionality
- Performance should be improved, especially for users with slow connections
Related
- Issue Enable noImgElement biome rule for @liam-hq/app package #3418 - Similar fix for app package
- Issue Enable noImgElement biome rule for @liam-hq/ui package #3419 - Similar fix for ui package
- Part of the broader effort to enforce
noImgElementacross all packages for better performance