refactor(website): rename createComponent to createReactComponent and add React 19 variant#13205
Merged
refactor(website): rename createComponent to createReactComponent and add React 19 variant#13205
Conversation
- Fix 42 samples: wrap CSS in template literals inside <style> tags so Babel JSX parser doesn't treat CSS braces as expressions - Fix 10 Form samples: close truncated template literals and handler functions - Fix 17 samples: convert HTML comments to JSX comments - Fix 11 samples: remove leftover <script> tags from HTML conversion - Fix 7 samples: close truncated handler function bodies and add proper React state management (refs, useState, useEffect) - Fix 5 samples: repair mismatched HTML tags, extra closing divs, unclosed components - All 376 React samples now pass Babel transpilation successfully
The createReactComponent function imports React at the top level, causing all consumers of @ui5/webcomponents-base (including icons) to require React. Moved to a direct module import with a Webpack alias in docusaurus.config.ts so only the website pulls in React. Also reverted sample imports back to @ui5/webcomponents-base (the import is decorative - stripped at runtime by the ReactPlayground).
…esolution Restore createReactComponent to the @ui5/webcomponents-base barrel export so samples can use the short import path. Add a Webpack alias in docusaurus.config.ts to ensure 'react' resolves from the project's node_modules rather than a parent directory.
The React playground renders UI5 components directly in the document (unlike the HTML playground which uses an iframe with playground-support.js). Added useEffect hooks to call setTheme() and applyDirection() when the theme or text direction context changes.
Import Assets.js for main, fiori, and ai packages so that setTheme() can load CSS custom properties when switching themes.
Add 24 missing component classes: compat Table components (TableColumn, TableGroupRow), main Table features (Growing, Selection, Virtualizer), fiori components (NavigationLayout, Search*, ShellBar*, UserSettings*), and others (DynamicDateRange, SuggestionItemGroup).
32 sample.tsx files still had unconverted <ui5-*> tags (TabContainer, MultiComboBoxItem, AvatarBadge, TableRowAction, ExpandableText, etc). Converted all to proper React components with createReactComponent wrappers. Added 6 missing component imports to ReactPlayground.
The DDR component needs its option modules (Today, Yesterday, Tomorrow, SingleDate, DateRange, DateTimeRange, LastOptions, NextOptions) imported as side effects to work properly.
The barrel import from @ui5/webcomponents-base failed at Webpack static analysis time because createReactComponent.js imports 'react' which can't be resolved from within the base package context. Defining the function locally avoids this resolution issue.
Reset line-height and font-smoothing in the React preview container to match the iframe defaults used by the HTML preview. Infima's line-height: 1.65 and -webkit-font-smoothing: antialiased were causing subtle text rendering differences.
All 376 React samples are generated and manually fixed. Running the script again would overwrite those fixes. New samples can be written directly as sample.tsx files.
…export Remove createReactComponent from the base package barrel export and remove the react peer dependency to avoid breaking non-React consumers. The createReactComponent function is now defined locally in the website's ReactPlayground component.
Remove unused createReactComponent.tsx (no longer exported from barrel) and fix extra blank line in index.ts.
…xport
Keep createReactComponent exported from the barrel so that the sample
import `import { createReactComponent } from "@ui5/webcomponents-base"`
works for users who copy it. React is an optional peer dependency.
… import
Remove createReactComponent from the barrel export to avoid forcing
non-React consumers to resolve the react dependency. The file remains
in the package and samples now import it via the direct path:
import { createReactComponent } from "@ui5/webcomponents-base/dist/createReactComponent.js"
…ction
- Fix eventDetails regex in generate-monaco-types.mjs to handle
intersection types (ParentType["eventDetails"] & { ... }) used by
AI components. This adds onVersionChange, onStopGeneration etc.
- Replace deprecated startsSection prop with MenuSeparator component
in all Menu samples (main and AI packages).
…itor - Add onKeyDown handler to stop "/" key propagation in Monaco editor, preventing Algolia DocSearch from opening while typing code - Add global error handler to suppress webpack-dev-server's full-page error overlay for eval'd sample code errors, showing inline errors only
Show "React >=18" next to "App.tsx" in the code editor tab bar to inform users which React version the sample code targets.
…teComponent Shorter name for the React wrapper factory used in documentation samples. Renamed the file, function, and all 376 sample imports accordingly.
Add a Copy button next to "Hide code" in the action bar, visible only when the React code editor is open. Copies the current editor content (including any user edits) to the clipboard with brief "Copied" feedback.
Add UI5CustomEvent<T> type so that event handlers have a properly typed currentTarget and target (e.g., e.currentTarget.value works on Select onChange without TS errors). Regenerated Monaco type definitions.
Simplify icon names in sample code (e.g., icon="edit" instead of icon="sap-icon://edit") for cleaner, more readable samples.
…s tsconfig - Type all 91 event handlers across 58 samples with proper UI5CustomEvent<ComponentClass, "event-name"> for typed detail/currentTarget - Import UI5CustomEvent from @ui5/webcomponents-base (barrel export) - Add docs/_samples/tsconfig.json for VS Code autocompletion in samples - Fix compat Table samples: add missing React imports and export default - Update Monaco type generator to support eventDetails on component classes - Add compat Table samples with React support
…ed handlers - Add class prop to UI5BaseProps for web components (className also supported) - Handle className→class conversion in createComponent - Remove font-family:inherit wildcard that overrode HTML preview fonts - Wire up unused Dialog/Popover close handlers to onClick props - Wire up MediaGallery onOverflowClick/onDisplayAreaClick handlers - Remove dead code: Form slider handler, List getSelectedCount
- Use boolean prop {true} instead of string "true" for showManageAccount
- Remove invalid design prop from Toast components
- Use e.currentTarget instead of e.target for typed FileUploader access
…Box SelectedValues - ShellBar/Overflow: declarative popover with overflow button for hidden content items - MultiComboBox/SelectedValues: static pre-selected values - MultiComboBox/SelectedValuesDynamic: dynamic selection with Select All/Clear/Europe buttons
…d event types
- Fix Monaco type generator to inherit events from base classes (Popup
events like close, open, before-close now appear on Dialog, Popover,
ResponsivePopover, ViewSettingsDialog, etc.)
- Fix Slider/RangeSlider missing onInput/onChange events (inherited from
SliderBase)
- Convert 27 React samples from imperative ref-based open/opener to
declarative state-based props using open={state} and onClose handler
- Affected components: Dialog, Popover, ResponsivePopover, Menu,
ColorPalettePopover, Toast, ViewSettingsDialog, BarcodeScannerDialog
… add React 19 variant - Rename createComponent to createReactComponent across all 379 samples - Update import to default export syntax - Add React 19 createReactComponent (packages/base/src/createReactComponent.ts) with detail patching for all event handlers - Move React 18 version to packages/base/src/react18/createReactComponent.tsx - Fix TypeScript types: useState generics, untyped function params, empty arrays - Update monaco-ui5-types.d.ts and generate-monaco-types.mjs accordingly
Sample sync reminderReact sample changed but HTML sample (
Please keep both samples in sync, or ignore if the change does not apply to both. |
Collaborator
|
🧹 Preview deployment cleaned up: https://pr-13205--ui5-webcomponents.netlify.app |
ilhan007
changed the title
pskelin
reviewed
Mar 6, 2026
|
|
||
| Object.entries(props as Record<string, unknown>).forEach(([key, value]) => { | ||
| if (key.startsWith("on") && typeof value === "function") { | ||
| // React 19 wraps DOM events (change, click, input, etc.) in SyntheticEvent, |
Contributor
There was a problem hiding this comment.
when playing around, I found that if you attach the event with lower case like onchange, react will attach it to the dom element directly and the detail will be directly on the event object. This is only necessary for events that match native events, instead of all events like here, because events that don't match native events are also directly attached to the dom and have the detail directly.
ilhan007
added a commit
that referenced
this pull request
Mar 13, 2026
… add React 19 variant (#13205) * docs: add react editor * chore: update deps * chore: update * chore: lint * fix(website): fix all React sample files to compile and work correctly - Fix 42 samples: wrap CSS in template literals inside <style> tags so Babel JSX parser doesn't treat CSS braces as expressions - Fix 10 Form samples: close truncated template literals and handler functions - Fix 17 samples: convert HTML comments to JSX comments - Fix 11 samples: remove leftover <script> tags from HTML conversion - Fix 7 samples: close truncated handler function bodies and add proper React state management (refs, useState, useEffect) - Fix 5 samples: repair mismatched HTML tags, extra closing divs, unclosed components - All 376 React samples now pass Babel transpilation successfully * fix(website): remove createReactComponent from base barrel export The createReactComponent function imports React at the top level, causing all consumers of @ui5/webcomponents-base (including icons) to require React. Moved to a direct module import with a Webpack alias in docusaurus.config.ts so only the website pulls in React. Also reverted sample imports back to @ui5/webcomponents-base (the import is decorative - stripped at runtime by the ReactPlayground). * chore: fix lint indentation in base index.ts * fix(website): restore createReactComponent barrel export, fix react resolution Restore createReactComponent to the @ui5/webcomponents-base barrel export so samples can use the short import path. Add a Webpack alias in docusaurus.config.ts to ensure 'react' resolves from the project's node_modules rather than a parent directory. * fix(website): apply theme changes to React playground preview The React playground renders UI5 components directly in the document (unlike the HTML playground which uses an iframe with playground-support.js). Added useEffect hooks to call setTheme() and applyDirection() when the theme or text direction context changes. * fix(website): register theme asset loaders for React playground Import Assets.js for main, fiori, and ai packages so that setTheme() can load CSS custom properties when switching themes. * fix(website): add missing component imports to React playground Add 24 missing component classes: compat Table components (TableColumn, TableGroupRow), main Table features (Growing, Selection, Virtualizer), fiori components (NavigationLayout, Search*, ShellBar*, UserSettings*), and others (DynamicDateRange, SuggestionItemGroup). * fix(website): convert remaining raw ui5 tags to React components 32 sample.tsx files still had unconverted <ui5-*> tags (TabContainer, MultiComboBoxItem, AvatarBadge, TableRowAction, ExpandableText, etc). Converted all to proper React components with createReactComponent wrappers. Added 6 missing component imports to ReactPlayground. * fix(website): add DynamicDateRange option imports for React playground The DDR component needs its option modules (Today, Yesterday, Tomorrow, SingleDate, DateRange, DateTimeRange, LastOptions, NextOptions) imported as side effects to work properly. * fix(website): define createReactComponent locally in ReactPlayground The barrel import from @ui5/webcomponents-base failed at Webpack static analysis time because createReactComponent.js imports 'react' which can't be resolved from within the base package context. Defining the function locally avoids this resolution issue. * fix(website): match React preview font rendering with HTML preview Reset line-height and font-smoothing in the React preview container to match the iframe defaults used by the HTML preview. Infima's line-height: 1.65 and -webkit-font-smoothing: antialiased were causing subtle text rendering differences. * chore(website): remove generate-react-samples script All 376 React samples are generated and manually fixed. Running the script again would overwrite those fixes. New samples can be written directly as sample.tsx files. * fix(ui5-webcomponents-base): remove createReactComponent from barrel export Remove createReactComponent from the base package barrel export and remove the react peer dependency to avoid breaking non-React consumers. The createReactComponent function is now defined locally in the website's ReactPlayground component. * fix(ui5-webcomponents-base): fix lint errors in base package Remove unused createReactComponent.tsx (no longer exported from barrel) and fix extra blank line in index.ts. * fix(ui5-webcomponents-base): restore createReactComponent in barrel export Keep createReactComponent exported from the barrel so that the sample import `import { createReactComponent } from "@ui5/webcomponents-base"` works for users who copy it. React is an optional peer dependency. * fix(ui5-webcomponents-base): move createReactComponent to direct path import Remove createReactComponent from the barrel export to avoid forcing non-React consumers to resolve the react dependency. The file remains in the package and samples now import it via the direct path: import { createReactComponent } from "@ui5/webcomponents-base/dist/createReactComponent.js" * chore: remove .claude/settings.json from tracking * fix(website): fix missing events in Monaco types and replace startsSection - Fix eventDetails regex in generate-monaco-types.mjs to handle intersection types (ParentType["eventDetails"] & { ... }) used by AI components. This adds onVersionChange, onStopGeneration etc. - Replace deprecated startsSection prop with MenuSeparator component in all Menu samples (main and AI packages). * fix(website): suppress webpack error overlay and Algolia search in editor - Add onKeyDown handler to stop "/" key propagation in Monaco editor, preventing Algolia DocSearch from opening while typing code - Add global error handler to suppress webpack-dev-server's full-page error overlay for eval'd sample code errors, showing inline errors only * docs(website): add React version label to editor tab bar Show "React >=18" next to "App.tsx" in the code editor tab bar to inform users which React version the sample code targets. * refactor(ui5-webcomponents-base): rename createReactComponent to createComponent Shorter name for the React wrapper factory used in documentation samples. Renamed the file, function, and all 376 sample imports accordingly. * feat(website): add copy button for React code samples Add a Copy button next to "Hide code" in the action bar, visible only when the React code editor is open. Copies the current editor content (including any user edits) to the clipboard with brief "Copied" feedback. * fix(website): type event currentTarget with component props in Monaco Add UI5CustomEvent<T> type so that event handlers have a properly typed currentTarget and target (e.g., e.currentTarget.value works on Select onChange without TS errors). Regenerated Monaco type definitions. * chore(website): remove sap-icon:// prefix from React samples Simplify icon names in sample code (e.g., icon="edit" instead of icon="sap-icon://edit") for cleaner, more readable samples. * feat(website): type event handlers with UI5CustomEvent and add samples tsconfig - Type all 91 event handlers across 58 samples with proper UI5CustomEvent<ComponentClass, "event-name"> for typed detail/currentTarget - Import UI5CustomEvent from @ui5/webcomponents-base (barrel export) - Add docs/_samples/tsconfig.json for VS Code autocompletion in samples - Fix compat Table samples: add missing React imports and export default - Update Monaco type generator to support eventDetails on component classes - Add compat Table samples with React support * fix(website): add curly braces to satisfy lint rules in createComponent * fix(website): add class prop support, fix font override, wire up unused handlers - Add class prop to UI5BaseProps for web components (className also supported) - Handle className→class conversion in createComponent - Remove font-family:inherit wildcard that overrode HTML preview fonts - Wire up unused Dialog/Popover close handlers to onClick props - Wire up MediaGallery onOverflowClick/onDisplayAreaClick handlers - Remove dead code: Form slider handler, List getSelectedCount * fix(website): fix boolean prop and typed event access in React samples - Use boolean prop {true} instead of string "true" for showManageAccount - Remove invalid design prop from Toast components - Use e.currentTarget instead of e.target for typed FileUploader access * feat(website): add React samples for ShellBar Overflow and MultiComboBox SelectedValues - ShellBar/Overflow: declarative popover with overflow button for hidden content items - MultiComboBox/SelectedValues: static pre-selected values - MultiComboBox/SelectedValuesDynamic: dynamic selection with Select All/Clear/Europe buttons * refactor(website): use declarative open/opener props and fix inherited event types - Fix Monaco type generator to inherit events from base classes (Popup events like close, open, before-close now appear on Dialog, Popover, ResponsivePopover, ViewSettingsDialog, etc.) - Fix Slider/RangeSlider missing onInput/onChange events (inherited from SliderBase) - Convert 27 React samples from imperative ref-based open/opener to declarative state-based props using open={state} and onClose handler - Affected components: Dialog, Popover, ResponsivePopover, Menu, ColorPalettePopover, Toast, ViewSettingsDialog, BarcodeScannerDialog * refactor(website): rename createComponent to createReactComponent and add React 19 variant - Rename createComponent to createReactComponent across all 379 samples - Update import to default export syntax - Add React 19 createReactComponent (packages/base/src/createReactComponent.ts) with detail patching for all event handlers - Move React 18 version to packages/base/src/react18/createReactComponent.tsx - Fix TypeScript types: useState generics, untyped function params, empty arrays - Update monaco-ui5-types.d.ts and generate-monaco-types.mjs accordingly * chore: update DP sample * chore: update * fix(ui5-base): fix lint errors in createReactComponent.ts
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Summary
createComponenttocreateReactComponentacross all ~380 sample filesimport createReactComponent from "..."createReactComponentvariant atpackages/base/src/createReactComponent.ts(patchesCustomEvent.detailon all event handlers)packages/base/src/react18/createReactComponent.tsxuseStategenerics for enums, untyped function params, empty arraysexport defaultTest plan
cd packages/website && yarn buildsucceedsimport createReactComponent from "..."