refactor: generate examples for showcases via mitosis #5794
Conversation
github-project-automation
bot
moved this to 🏗 In progress
in UX Engineering Team Backlog
|
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
… refactor-generate-examples
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
… refactor-generate-examples
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
… refactor-generate-examples
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
… refactor-generate-examples
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
… refactor-generate-examples
nmerget
moved this from 🏗 In progress
to 🎁 Ready for review
in UX Engineering Team Backlog
sarahbrng
moved this from 🎁 Ready for review
to 👀 Actively In Review
in UX Engineering Team Backlog
There was a problem hiding this comment.
Pull request overview
This PR refactors the component showcase generation system to use Mitosis for generating examples across multiple frameworks (Angular, React, Vue, Stencil). The change enables automatic generation of framework-specific showcase examples from a single source of truth written in Mitosis's .lite.tsx format.
Changes:
- Migrated component examples from framework-specific implementations to Mitosis
.lite.tsxfiles for unified cross-framework example generation - Added new Mitosis plugins for handling slots, attributes, and framework-specific transformations
- Updated build scripts and configurations to support the new Mitosis-based workflow
- Modified test snapshots to reflect changes in generated showcase structure
Reviewed changes
Copilot reviewed 206 out of 598 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/src/components//examples/.example.lite.tsx | Added Mitosis example files for all components (radio, popover, notification, navigation, link, input, etc.) |
| packages/components/src/components//showcase/.showcase.lite.tsx | Added Mitosis showcase wrapper files for components |
| packages/components/configs/plugins/**/*.cjs | New Mitosis plugins for handling slots (Vue, Stencil, Angular), className mapping, and attribute passing |
| packages/components/configs/angular/index.cjs | Updated Angular config to include new plugins for proper code generation |
| packages/components/configs/vue/index.cjs | Added slots plugin to Vue configuration |
| packages/components/configs/stencil/index.cjs | Added slots and attribute-passing plugins to Stencil configuration |
| packages/components/scripts/post-build/react.ts | Added 'data-density' to rootProps array for React builds |
| packages/components/scripts/post-build/angular.ts | Fixed output path to use dynamic outputFolder variable and removed obsolete replacements |
| packages/components/package.json | Extended dev watch patterns to include configs folder and .cjs files |
| .config/.jscpd.json | Excluded generated example files from code duplication checks |
| snapshots/**/*.yaml | Updated test snapshots reflecting structural changes in generated showcases |
There was a problem hiding this comment.
@nmerget why are we ignoring so many files? I totally get that the false positives are a pain in the … bucket, but not checking files in total, that done't seem to be build outputs or something similar seems to be wrong as well.
|
@nmerget could you please add at least a simple description to this PR? |
sarahbrng
left a comment
sarahbrng
left a comment
There was a problem hiding this comment.
The branch adds complex transformation logic without visible unit tests for the plugins. Do we need a test coverage here?
| ); | ||
| }); | ||
|
|
||
| node.children.push(); |
| ); | ||
| } | ||
| } | ||
| }); |
There was a problem hiding this comment.
The Angular plugin only performs string replacements whitespace fixes. However, it doesn't validate that these patterns exist before applying replacements, which could silently fail on edge cases.
| bindings: {}, | ||
| children: binding, | ||
| properties: { | ||
| 'v-slot': key.replace(/([A-Z])/g, '-$1').toLowerCase() |
There was a problem hiding this comment.
Just an idea:
Regex patterns and string literals are repeated; these should be extracted to constants.
const KEBAB_CASE_REGEX = /([A-Z])/g;
const KEBAB_CASE_REPLACEMENT = '-$1';
const toKebabCase = (str) => str.replace(KEBAB_CASE_REGEX, KEBAB_CASE_REPLACEMENT).toLowerCase();
// Usage
SLOT: toKebabCase(key)
| @@ -102,6 +106,10 @@ const getStories = ({ target, name, fragment, meta, componentName }) => { | |||
| args | |||
| ); | |||
| example = changedExample; | |||
There was a problem hiding this comment.
The new error check if (!example) comes AFTER example is already used in processBindings(example, target, args), which could throw before the check.
| ); | ||
| example = changedExample; | ||
| if (!example) { | ||
| throw Error(`somethings wrong with: ${name}`); |
There was a problem hiding this comment.
Typo: "somethings" -> "something's"
| test.describe('DBNavigationItem', () => { | ||
| // Set fixed height, because of issues with angulars `ngAfterContentInit` | ||
| getDefaultScreenshotTest({ | ||
| path, | ||
| fixedHeight | ||
| fixedHeight, | ||
| skip: { stencil: true } |
There was a problem hiding this comment.
please add a comment why this is skipped
Proposed changes
resolves https://github.com/db-ux-design-system/core-team/issues/1433
This PR refactors the component showcase generation system to use Mitosis for generating examples across multiple frameworks (Angular, React, Vue, Stencil). The change enables automatic generation of framework-specific showcase examples from a single source of truth written in Mitosis's .lite.tsx format.
Types of changes
Further comments
🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/refactor-generate-examples