- Create LayoutPreviewPage component for full-screen layout previews - Add preview route /themes/:themeId/layouts/:layoutId/preview to App routing - Update theme components with preview links and improved navigation - Fix iframe sandbox error by adding allow-scripts permission - Enhance template renderer with layout metadata support - Replace PostCSS with regex-only CSS parsing for browser compatibility - Add comprehensive standards documentation for code quality - Clean up CSS slot indicators to be always visible with descriptions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
26 lines
967 B
Markdown
26 lines
967 B
Markdown
# Import Standards
|
|
|
|
## Direct Imports Required
|
|
- **NEVER use barrel files** for component imports (violates Vite best practices)
|
|
- **ALWAYS use direct file imports** with explicit extensions for better Vite performance
|
|
- **AVOID** `import { Component } from './components'`
|
|
- **USE** `import { Component } from './components/Component.tsx'`
|
|
|
|
## Examples
|
|
```typescript
|
|
// ❌ BAD - Barrel file usage
|
|
import { ThemeBrowser, ThemeDetailPage } from './components/themes'
|
|
|
|
// ✅ GOOD - Direct imports
|
|
import { ThemeBrowser } from './components/themes/ThemeBrowser.tsx'
|
|
import { ThemeDetailPage } from './components/themes/ThemeDetailPage.tsx'
|
|
```
|
|
|
|
## Performance Impact
|
|
- Barrel files prevent Vite's tree shaking optimization
|
|
- Direct imports enable faster module resolution
|
|
- Explicit extensions reduce lookup overhead
|
|
|
|
## Exceptions
|
|
- CSS imports don't require extensions: `import './Component.css'`
|
|
- Type-only imports: `import type { Theme } from './types/theme.ts'` |