Skip to content

Commit c2c6236

Browse files
ilhan007ilhan007
committed
refactor(website): rename createComponent to createReactComponent and 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
1 parent d64a3cf commit c2c6236

384 files changed

Lines changed: 1848 additions & 1759 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/base/src/createReactComponent.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* React wrapper factory for UI5 Web Components.
3+
*
4+
* This lightweight factory creates typed React components that wrap UI5 Web Components.
5+
* It handles:
6+
* - Event prop conversion (onXxx → ui5-xxx event listeners)
7+
* - Ref forwarding
8+
* - Children handling
9+
*
10+
* Note: Supports React >=19.
11+
*
12+
* Note: This is for documentation samples only - for production React apps,
13+
* use the official @ui5/webcomponents-react library.
14+
*/
15+
16+
import { createElement } from "react";
17+
import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
18+
19+
/**
20+
* Creates a React component wrapper for a UI5 Web Component.
21+
*
22+
* @param ComponentClass - The UI5 Web Component class (e.g., Button from "@ui5/webcomponents/dist/Button.js")
23+
* @returns A React component that renders the custom element with proper TypeScript types
24+
* @since 2.21.0
25+
* @example
26+
* import Button from "@ui5/webcomponents/dist/Button.js";
27+
* const ReactButton = createReactComponent(Button);
28+
*/
29+
export default function createReactComponent<T extends typeof UI5Element>(klass: T) {
30+
const tag = klass.getMetadata().getTag();
31+
32+
return function Component(props: InstanceType<T>["_jsxProps"]) {
33+
const patchedProps: Record<string, unknown> = {};
34+
35+
Object.entries(props as Record<string, unknown>).forEach(([key, value]) => {
36+
if (key.startsWith("on") && typeof value === "function") {
37+
// React 19 wraps DOM events (change, click, input, etc.) in SyntheticEvent,
38+
// hiding CustomEvent.detail under nativeEvent.detail.
39+
// Patch all event handlers to restore detail from nativeEvent.
40+
const originalHandler = value;
41+
patchedProps[key] = (e: Event) => {
42+
const nativeDetail = (e as unknown as { nativeEvent?: { detail: unknown } }).nativeEvent?.detail;
43+
if (nativeDetail !== undefined) {
44+
(e as unknown as { detail: unknown }).detail = nativeDetail;
45+
}
46+
originalHandler(e);
47+
};
48+
} else {
49+
patchedProps[key] = value;
50+
}
51+
});
52+
53+
return createElement(tag, patchedProps);
54+
};
55+
}

packages/base/src/createComponent.tsx renamed to packages/base/src/react18/createReactComponent.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
* - Ref forwarding
88
* - Children handling
99
*
10+
* Note: The function supports react >= 18.
1011
* Note: This is for documentation samples only - for production React apps,
1112
* use the official @ui5/webcomponents-react library.
1213
*/
@@ -18,7 +19,7 @@ import {
1819
useEffect,
1920
forwardRef,
2021
} from "react";
21-
import type UI5Element from "./UI5Element.js";
22+
import type UI5Element from "../UI5Element.js";
2223

2324
type EventHandler<E = Event> = (event: E) => void;
2425

@@ -51,13 +52,13 @@ const createEventCleanup = (element: UI5Element, eventName: string, handler: Eve
5152
*
5253
* @param ComponentClass - The UI5 Web Component class (e.g., Button from "@ui5/webcomponents/dist/Button.js")
5354
* @returns A React component that renders the custom element with proper TypeScript types
54-
*
55+
* @since 2.21.0
5556
* @example
5657
* import Button from "@ui5/webcomponents/dist/Button.js";
57-
* const ReactButton = createComponent(Button);
58+
* const ReactButton = createReactComponent(Button);
5859
* // ReactButton props are typed based on Button's _jsxProps
5960
*/
60-
export function createComponent<T extends UI5Element>(
61+
function createReactComponent<T extends UI5Element>(
6162
ComponentClass: UI5ComponentClass<T>,
6263
): React.ForwardRefExoticComponent<
6364
React.PropsWithoutRef<T["_jsxProps"] & { children?: ReactNode }> & React.RefAttributes<T>
@@ -136,4 +137,4 @@ export function createComponent<T extends UI5Element>(
136137
return Component;
137138
}
138139

139-
export default createComponent;
140+
export default createReactComponent;

‎packages/website/docs/_samples/ai/Button/ButtonMenu/sample.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useRef, useCallback, useEffect } from "react";
2-
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
2+
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
33
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
44
import AIButtonClass from "@ui5/webcomponents-ai/dist/Button.js";
55
import AIButtonStateClass from "@ui5/webcomponents-ai/dist/ButtonState.js";
@@ -10,11 +10,11 @@ import "@ui5/webcomponents-icons/dist/ai.js";
1010
import "@ui5/webcomponents-icons/dist/stop.js";
1111
import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
1212

13-
const AIButton = createComponent(AIButtonClass);
14-
const AIButtonState = createComponent(AIButtonStateClass);
15-
const Menu = createComponent(MenuClass);
16-
const MenuItem = createComponent(MenuItemClass);
17-
const MenuSeparator = createComponent(MenuSeparatorClass);
13+
const AIButton = createReactComponent(AIButtonClass);
14+
const AIButtonState = createReactComponent(AIButtonStateClass);
15+
const Menu = createReactComponent(MenuClass);
16+
const MenuItem = createReactComponent(MenuItemClass);
17+
const MenuSeparator = createReactComponent(MenuSeparatorClass);
1818

1919
function App() {
2020
const [buttonState, setButtonState] = useState("generate");

‎packages/website/docs/_samples/ai/Button/ButtonSplitMenu/sample.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useRef, useCallback, useEffect } from "react";
2-
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
2+
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
33
import AIButtonClass from "@ui5/webcomponents-ai/dist/Button.js";
44
import AIButtonStateClass from "@ui5/webcomponents-ai/dist/ButtonState.js";
55
import MenuClass from "@ui5/webcomponents/dist/Menu.js";
@@ -8,10 +8,10 @@ import "@ui5/webcomponents-icons/dist/ai.js";
88
import "@ui5/webcomponents-icons/dist/stop.js";
99
import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
1010

11-
const AIButton = createComponent(AIButtonClass);
12-
const AIButtonState = createComponent(AIButtonStateClass);
13-
const Menu = createComponent(MenuClass);
14-
const MenuItem = createComponent(MenuItemClass);
11+
const AIButton = createReactComponent(AIButtonClass);
12+
const AIButtonState = createReactComponent(AIButtonStateClass);
13+
const Menu = createReactComponent(MenuClass);
14+
const MenuItem = createReactComponent(MenuItemClass);
1515

1616
function App() {
1717
const [buttonState, setButtonState] = useState("generate");

‎packages/website/docs/_samples/ai/Button/IconOnlyButton/sample.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useRef, useCallback, useEffect } from "react";
2-
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
2+
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
33
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
44
import AIButtonClass from "@ui5/webcomponents-ai/dist/Button.js";
55
import AIButtonStateClass from "@ui5/webcomponents-ai/dist/ButtonState.js";
@@ -10,11 +10,11 @@ import "@ui5/webcomponents-icons/dist/ai.js";
1010
import "@ui5/webcomponents-icons/dist/stop.js";
1111
import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
1212

13-
const AIButton = createComponent(AIButtonClass);
14-
const AIButtonState = createComponent(AIButtonStateClass);
15-
const Menu = createComponent(MenuClass);
16-
const MenuItem = createComponent(MenuItemClass);
17-
const MenuSeparator = createComponent(MenuSeparatorClass);
13+
const AIButton = createReactComponent(AIButtonClass);
14+
const AIButtonState = createReactComponent(AIButtonStateClass);
15+
const Menu = createReactComponent(MenuClass);
16+
const MenuItem = createReactComponent(MenuItemClass);
17+
const MenuSeparator = createReactComponent(MenuSeparatorClass);
1818

1919
function App() {
2020
const [buttonState, setButtonState] = useState("generate");

‎packages/website/docs/_samples/ai/Input/Basic/sample.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { useState, useRef, useCallback, useEffect } from "react";
2-
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
2+
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
33
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
44
import AIInputClass from "@ui5/webcomponents-ai/dist/Input.js";
55
import MenuItemClass from "@ui5/webcomponents/dist/MenuItem.js";
66
import MenuSeparatorClass from "@ui5/webcomponents/dist/MenuSeparator.js";
77
import "@ui5/webcomponents-icons/dist/ai.js";
88
import "@ui5/webcomponents-icons/dist/stop.js";
99

10-
const AIInput = createComponent(AIInputClass);
11-
const MenuItem = createComponent(MenuItemClass);
12-
const MenuSeparator = createComponent(MenuSeparatorClass);
10+
const AIInput = createReactComponent(AIInputClass);
11+
const MenuItem = createReactComponent(MenuItemClass);
12+
const MenuSeparator = createReactComponent(MenuSeparatorClass);
1313

1414
const SAMPLE_TEXTS: Record<string, string> = {
1515
en: "Innovation managers lead with creativity.",

‎packages/website/docs/_samples/ai/PromptInput/Basic/sample.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { useState, useRef, useCallback } from "react";
2-
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
2+
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
33
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
4+
import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
45
import AIPromptInputClass from "@ui5/webcomponents-ai/dist/PromptInput.js";
56
import SuggestionItemClass from "@ui5/webcomponents/dist/SuggestionItem.js";
67
import "@ui5/webcomponents/dist/features/InputSuggestions.js";
78

8-
const AIPromptInput = createComponent(AIPromptInputClass);
9-
const SuggestionItem = createComponent(SuggestionItemClass);
9+
const AIPromptInput = createReactComponent(AIPromptInputClass);
10+
const SuggestionItem = createReactComponent(SuggestionItemClass);
1011

1112
const countries = [
1213
"Brazil",
@@ -22,7 +23,7 @@ const countries = [
2223
];
2324

2425
function App() {
25-
const [valueState, setValueState] = useState("None");
26+
const [valueState, setValueState] = useState<`${ValueState}`>("None");
2627
const [suggestions, setSuggestions] = useState<string[]>([]);
2728

2829
const handleInput = useCallback(

‎packages/website/docs/_samples/ai/TextArea/Basic/sample.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { useState, useRef, useCallback, useEffect } from "react";
2-
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
2+
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
33
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
44
import AITextAreaClass from "@ui5/webcomponents-ai/dist/TextArea.js";
55
import MenuClass from "@ui5/webcomponents/dist/Menu.js";
66
import MenuItemClass from "@ui5/webcomponents/dist/MenuItem.js";
77

8-
const AITextArea = createComponent(AITextAreaClass);
9-
const Menu = createComponent(MenuClass);
10-
const MenuItem = createComponent(MenuItemClass);
8+
const AITextArea = createReactComponent(AITextAreaClass);
9+
const Menu = createReactComponent(MenuClass);
10+
const MenuItem = createReactComponent(MenuItemClass);
1111

1212
const SAMPLE_TEXT =
1313
"Innovation managers operate with both creativity and business acumen, driving initiatives that cultivate an innovation-friendly culture, streamline the execution of new ideas, and ultimately unlock value for the organization and its customers.";

‎packages/website/docs/_samples/ai/TextArea/Extended/sample.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { useState, useRef, useCallback, useEffect } from "react";
2-
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
2+
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
33
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
44
import AITextAreaClass from "@ui5/webcomponents-ai/dist/TextArea.js";
55
import MenuClass from "@ui5/webcomponents/dist/Menu.js";
66
import MenuItemClass from "@ui5/webcomponents/dist/MenuItem.js";
77
import MenuSeparatorClass from "@ui5/webcomponents/dist/MenuSeparator.js";
88

9-
const AITextArea = createComponent(AITextAreaClass);
10-
const Menu = createComponent(MenuClass);
11-
const MenuItem = createComponent(MenuItemClass);
12-
const MenuSeparator = createComponent(MenuSeparatorClass);
9+
const AITextArea = createReactComponent(AITextAreaClass);
10+
const Menu = createReactComponent(MenuClass);
11+
const MenuItem = createReactComponent(MenuItemClass);
12+
const MenuSeparator = createReactComponent(MenuSeparatorClass);
1313

1414
const SAMPLE_TEXTS: Record<string, string> = {
1515
en: "Innovation managers operate with both creativity and business acumen, driving initiatives that cultivate an innovation-friendly culture, streamline the execution of new ideas, and ultimately unlock value for the organization and its customers.",

‎packages/website/docs/_samples/compat/Table/ActiveRows/sample.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
1+
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
22
import CompatTableClass from "@ui5/webcomponents-compat/dist/Table.js";
33
import CompatTableRowClass from "@ui5/webcomponents-compat/dist/TableRow.js";
44
import TableColumnClass from "@ui5/webcomponents-compat/dist/TableColumn.js";
55
import CompatTableCellClass from "@ui5/webcomponents-compat/dist/TableCell.js";
66
import TextClass from "@ui5/webcomponents/dist/Text.js";
77

8-
const CompatTable = createComponent(CompatTableClass);
9-
const CompatTableRow = createComponent(CompatTableRowClass);
10-
const CompatTableColumn = createComponent(TableColumnClass);
11-
const CompatTableCell = createComponent(CompatTableCellClass);
12-
const Text = createComponent(TextClass);
8+
const CompatTable = createReactComponent(CompatTableClass);
9+
const CompatTableRow = createReactComponent(CompatTableRowClass);
10+
const CompatTableColumn = createReactComponent(TableColumnClass);
11+
const CompatTableCell = createReactComponent(CompatTableCellClass);
12+
const Text = createReactComponent(TextClass);
1313

1414
function App() {
1515
return (

0 commit comments

Comments
 (0)