perf: web components #230
Draft
perf: web components #230
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add .gitignore files to prevent committing generated files: - Web components: Ignore compiled JS, maps, type definitions, and manifest - Client: Ignore copied ngui-elements directory Build artifacts are generated via `npm run build` and should not be versioned. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Assisted-By: Claude <[email protected]>
Implement ngui-image as a framework-agnostic web component following PatternFly v6 design system specifications. Web Component Features: - Uses PF v6 CSS custom properties (no PF Elements to wrap) - Loading states with PF v6 spinner animation - Error handling with PF v6 danger color - Alt text for accessibility (required) - Slots for custom images and captions - CSS parts for styling customization - Comprehensive JSDoc for CEM MCP integration Python Renderer: - Add ImageRenderStrategy base class - Add WebComponentsImageRenderStrategy - Create image.jinja template - Register in factory's get_render_strategy() method This demonstrates the "implement with PF v6 CSS when necessary" pattern, as PatternFly Elements does not provide an image component to wrap. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Assisted-By: Claude <[email protected]>
Implement PatternFly v6 horizontal split card layout using CSS Grid. Add comprehensive documentation for Vite and PatternFly Elements workarounds. Changes: - ngui-card: Add layout attribute (default | horizontal-split) with CSS Grid implementation - ngui-card: Implement responsive 50/50 split layout (image left, content right on 768px+) - ngui-card: Workaround pf-card article wrapper by removing it to enable grid areas - client: Add PatternFly v6 CSS for design token support - client: Add @ngui/web/ importmap for web component module resolution - client: Implement script tag injection to bypass Vite's module interceptor - templates: Add layout="horizontal-split" attribute when image is present - docs: Document Vite incompatibility with runtime importmaps - docs: Document PatternFly Elements adaptation challenges and recommendations Technical Details: - Use CSS Grid with grid-template-areas for semantic layout control - Apply display:contents to body part to make slotted content direct grid children - Remove pf-card's internal article wrapper via DOM manipulation in firstUpdated() - Load components via script tag injection to bypass Vite and use browser's native importmap 🤖 Generated with [Claude Code](https://claude.com/claude-code) Assisted-By: Claude <[email protected]>
…tegration Move web components from tests/ngui-e2e/web-components/ to libs/next_gen_ui_web/ to establish them as a proper reusable library package with streamlined development workflow. Changes: - Move directory: tests/ngui-e2e/web-components/ → libs/next_gen_ui_web/ - Rename package: "ngui-web-components" → "@rhngui/web" - Update import map: "@ngui/web/" → "@rhngui/web/" - Update all imports and references to use new package name - Configure Vite to serve TypeScript sources directly during development - Add custom Vite middleware to intercept /ngui-elements/ requests - Remove build step from dev workflow - Vite compiles on the fly - Update documentation to reflect new library location and dev workflow Development Workflow: - No separate build process needed during development - Vite middleware serves TypeScript sources from libs/next_gen_ui_web/elements/ - Hot module reload works when editing web component source files - Production builds still compile to client/public/ngui-elements/ Technical Details: - Custom Vite plugin rewrites /ngui-elements/*.js → /@fs/.../elements/*.ts - optimizeDeps.exclude prevents pre-bundling to preserve import map resolution - server.fs.allow grants access to project root for serving sources - Build outputs (.js, .d.ts, .map) are gitignored in source directory Rationale: - Web components are framework-agnostic, reusable library code (not test-specific) - Package name follows existing convention (@rhngui/web, like @rhngui/patternfly-react-renderer) - Enables future npm publishing for wider consumption - Clarifies that web components are the primary UI approach (not "one framework among many") - Simplifies dev workflow from 3 terminals + manual copy to just 2 terminals with HMR 🤖 Generated with [Claude Code](https://claude.com/claude-code) Assisted-By: Claude <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.