Skip to content

Commit 42b13af

Browse files
weareoutmanweareoutman
authored
Merge pull request #1569 from easyops-cn/steve/jsx
Steve/jsx
2 parents 7d7e645 + 49df3ff commit 42b13af

File tree

15 files changed

+433
-26
lines changed

15 files changed

+433
-26
lines changed

‎bricks/basic/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,14 @@
2424
},
2525
"./*": {
2626
"types": "./dist-types/*/index.d.ts"
27-
}
27+
},
28+
"./jsx.d.ts": "./dist-types/jsx.d.ts"
2829
},
2930
"scripts": {
3031
"start": "cross-env NODE_ENV=development build-next-bricks --watch",
3132
"build": "npm run build:main && npm run build:types",
3233
"build:main": "cross-env NODE_ENV=production build-next-bricks",
33-
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist-types --project tsconfig.json",
34+
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist-types --project tsconfig.json && cp src/jsx.d.ts dist-types/jsx.d.ts",
3435
"build:manifest": "cross-env NODE_ENV=production build-next-bricks --manifest-only",
3536
"test": "cross-env NODE_ENV='test' test-next",
3637
"test:ci": "cross-env NODE_ENV='test' CI=true test-next",

‎bricks/basic/src/image/index.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { describe, test, expect } from "@jest/globals";
22
import { act } from "react-dom/test-utils";
33
import "./index.jsx";
4-
import { Image } from "./index.jsx";
4+
import { EoImage } from "./index.jsx";
55

66
jest.mock("@next-core/theme", () => ({}));
77

88
// Todo(nlicro): fix test fail
99
describe("eo-image", () => {
1010
test("basic usage", () => {
1111
const onVisibleChange = jest.fn();
12-
const element = document.createElement("eo-image") as Image;
12+
const element = document.createElement("eo-image") as EoImage;
1313
element.addEventListener("visibleChange", onVisibleChange);
1414

1515
expect(element.shadowRoot).toBeFalsy();

‎bricks/basic/src/image/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ interface ImageProps {
2929
styleTexts: [imageComponentStyleText, previewStyleText],
3030
alias: ["basic.general-image"],
3131
})
32-
class Image extends ReactNextElement implements ImageListProps {
32+
class EoImage extends ReactNextElement implements ImageListProps {
3333
private _ImageListRef = createRef<ImageListRef>();
3434

3535
/**
@@ -95,4 +95,4 @@ class Image extends ReactNextElement implements ImageListProps {
9595
}
9696
}
9797

98-
export { Image, ImageProps };
98+
export { EoImage, ImageProps };

‎bricks/basic/src/jsx.d.ts‎

Lines changed: 258 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
import type { DetailedHTMLProps, HTMLAttributes } from "react";
2+
import type { Button, ButtonProps } from "./button";
3+
import type { EoActions, ActionsProps, SimpleAction } from "./actions";
4+
import type { Link, LinkProps } from "./link";
5+
import type { ToggleLink, ToggleLinkProps } from "./toggle-link";
6+
import type { EoBreadcrumb } from "./breadcrumb";
7+
import type { EoBreadcrumbItem, BreadcrumbItemProps } from "./breadcrumb-item";
8+
import type { EoText, TextProps } from "./text";
9+
import type { EoMenuGroup } from "./menu-group";
10+
import type { DropdownButton, DropdownButtonProps } from "./dropdown-button";
11+
import type {
12+
EoDropdownActions,
13+
DropdownActionsProps,
14+
} from "./dropdown-actions";
15+
import type { EoAvatarGroup, EoAvatarGroupProps } from "./avatar-group";
16+
import type { Tag, TagProps } from "./tag";
17+
import type { EoAvatar, AvatarProps } from "./avatar";
18+
import type { MenuItem, MenuComponentProps } from "./menu-item";
19+
import type { EoSidebarSubMenu } from "./sidebar-sub-menu";
20+
import type { Menu, MenuProps } from "./menu";
21+
import type { List, ListProps } from "./list";
22+
import type { Popover, PopoverProps } from "./popover";
23+
import type { EoContextMenu, EoContextMenuProps } from "./context-menu";
24+
import type { TagList, TagListProps } from "./tag-list";
25+
import type { EoPageTitle, PageTitleProps } from "./page-title";
26+
import type { EoImage, ImageListProps } from "./image";
27+
import type { EoEasyopsAvatar, EoEasyopsAvatarProps } from "./easyops-avatar";
28+
import type { EoMiniActions, EoMiniActionsProps } from "./mini-actions";
29+
import type {
30+
DropdownSelect,
31+
DropdownSelectProps,
32+
DropdownSelectOption,
33+
} from "./dropdown-select";
34+
import type {
35+
EoFrameBreadcrumb,
36+
EoFrameBreadcrumbProps,
37+
} from "./frame-breadcrumb";
38+
import type {
39+
LoadingContainer,
40+
LoadingContainerProps,
41+
} from "./loading-container";
42+
import type {
43+
EoBroadcastChannel,
44+
BroadcastChannelProps,
45+
} from "./broadcast-channel";
46+
import type {
47+
EoFormatterNumber,
48+
EoFormatterNumberProps,
49+
} from "./formatter-number";
50+
import type {
51+
EoMessageListener,
52+
EoMessageListenerProps,
53+
MessageDetail,
54+
} from "./message-listener";
55+
import type {
56+
EoMenuItemSubMenu,
57+
EoMenuSubMenuProps,
58+
} from "./menu-item-sub-menu";
59+
import type { EoViewport, ViewportProps } from "./viewport";
60+
import type { Iframe, IframeProps } from "./iframe";
61+
import type { EoAppBarWrapper, AppBarWrapperProps } from "./app-bar-wrapper";
62+
import type { EoTooltip, ToolTipProps } from "./tooltip";
63+
import type { EoCounterBadge, BadgeProps } from "./counter-badge";
64+
import type { EoSidebar, EoSidebarProps } from "./sidebar";
65+
import type { EoSidebarMenu, EoSidebarMenuProps } from "./sidebar/sidebar-menu";
66+
import type {
67+
EoSidebarMenuGroup,
68+
EoSidebarMenuGroupProps,
69+
} from "./sidebar/sidebar-menu-group";
70+
import type {
71+
EoSidebarMenuSubmenu,
72+
EoSidebarMenuSubmenuProps,
73+
} from "./sidebar/sidebar-menu-submenu";
74+
import type {
75+
EoSidebarMenuItem,
76+
EoSidebarMenuItemProps,
77+
} from "./sidebar/sidebar-menu-item";
78+
79+
declare global {
80+
namespace JSX {
81+
interface IntrinsicElements {
82+
"eo-actions": DetailedHTMLProps<HTMLAttributes<EoActions>, EoActions> &
83+
ActionsProps & {
84+
onActionClick?: (event: CustomEvent<SimpleAction>) => void;
85+
onItemDragStart?: (event: CustomEvent<SimpleAction>) => void;
86+
onItemDragEnd?: (event: CustomEvent<SimpleAction>) => void;
87+
};
88+
"eo-app-bar-wrapper": DetailedHTMLProps<
89+
HTMLAttributes<EoAppBarWrapper>,
90+
EoAppBarWrapper
91+
> &
92+
AppBarWrapperProps;
93+
"eo-avatar": DetailedHTMLProps<HTMLAttributes<EoAvatar>, EoAvatar> &
94+
AvatarProps;
95+
"eo-avatar-group": DetailedHTMLProps<
96+
HTMLAttributes<EoAvatarGroup>,
97+
EoAvatarGroup
98+
> &
99+
EoAvatarGroupProps;
100+
"eo-breadcrumb": DetailedHTMLProps<
101+
HTMLAttributes<EoBreadcrumb>,
102+
EoBreadcrumb
103+
>;
104+
"eo-breadcrumb-item": DetailedHTMLProps<
105+
HTMLAttributes<EoBreadcrumbItem>,
106+
EoBreadcrumbItem
107+
> &
108+
BreadcrumbItemProps;
109+
"eo-broadcast-channel": DetailedHTMLProps<
110+
HTMLAttributes<EoBroadcastChannel>,
111+
EoBroadcastChannel
112+
> &
113+
BroadcastChannelProps & {
114+
onMessage?: (event: CustomEvent<unknown>) => void;
115+
};
116+
"eo-button": DetailedHTMLProps<HTMLAttributes<Button>, Button> &
117+
ButtonProps;
118+
"eo-context-menu": DetailedHTMLProps<
119+
HTMLAttributes<EoContextMenu>,
120+
EoContextMenu
121+
> &
122+
EoContextMenuProps & {
123+
onActionClick?: (event: CustomEvent<SimpleAction>) => void;
124+
onItemDragStart?: (event: CustomEvent<SimpleAction>) => void;
125+
onItemDragEnd?: (event: CustomEvent<SimpleAction>) => void;
126+
};
127+
"eo-counter-badge": DetailedHTMLProps<
128+
HTMLAttributes<EoCounterBadge>,
129+
EoCounterBadge
130+
> &
131+
BadgeProps;
132+
"eo-dropdown-actions": DetailedHTMLProps<
133+
HTMLAttributes<EoDropdownActions>,
134+
EoDropdownActions
135+
> &
136+
DropdownActionsProps;
137+
"eo-dropdown-button": DetailedHTMLProps<
138+
HTMLAttributes<DropdownButton>,
139+
DropdownButton
140+
> &
141+
DropdownButtonProps;
142+
"eo-dropdown-select": DetailedHTMLProps<
143+
HTMLAttributes<DropdownSelect>,
144+
DropdownSelect
145+
> &
146+
DropdownSelectProps & {
147+
onChange?: (event: CustomEvent<DropdownSelectOption>) => void;
148+
};
149+
"eo-easyops-avatar": DetailedHTMLProps<
150+
HTMLAttributes<EoEasyopsAvatar>,
151+
EoEasyopsAvatar
152+
> &
153+
EoEasyopsAvatarProps;
154+
"eo-formatter-number": DetailedHTMLProps<
155+
HTMLAttributes<EoFormatterNumber>,
156+
EoFormatterNumber
157+
> &
158+
EoFormatterNumberProps;
159+
"eo-frame-breadcrumb": DetailedHTMLProps<
160+
HTMLAttributes<EoFrameBreadcrumb>,
161+
EoFrameBreadcrumb
162+
> &
163+
EoFrameBreadcrumbProps;
164+
"eo-iframe": DetailedHTMLProps<HTMLAttributes<Iframe>, Iframe> &
165+
IframeProps & {
166+
onLoad?: (event: CustomEvent<void>) => void;
167+
};
168+
"eo-image": DetailedHTMLProps<HTMLAttributes<EoImage>, EoImage> &
169+
ImageListProps;
170+
"eo-link": DetailedHTMLProps<HTMLAttributes<Link>, Link> & LinkProps;
171+
"eo-list": DetailedHTMLProps<HTMLAttributes<List>, List> & ListProps;
172+
"eo-loading-container": DetailedHTMLProps<
173+
HTMLAttributes<LoadingContainer>,
174+
LoadingContainer
175+
> &
176+
LoadingContainerProps;
177+
"eo-menu": DetailedHTMLProps<HTMLAttributes<Menu>, Menu> & MenuProps;
178+
"eo-menu-group": DetailedHTMLProps<
179+
HTMLAttributes<EoMenuGroup>,
180+
EoMenuGroup
181+
>;
182+
"eo-menu-item": DetailedHTMLProps<HTMLAttributes<MenuItem>, MenuItem> &
183+
MenuComponentProps;
184+
"eo-menu-item-sub-menu": DetailedHTMLProps<
185+
HTMLAttributes<EoMenuItemSubMenu>,
186+
EoMenuItemSubMenu
187+
> &
188+
EoMenuSubMenuProps;
189+
"eo-message-listener": DetailedHTMLProps<
190+
HTMLAttributes<EoMessageListener>,
191+
EoMessageListener
192+
> &
193+
EoMessageListenerProps & {
194+
onMessage?: (event: CustomEvent<MessageDetail>) => void;
195+
};
196+
"eo-mini-actions": DetailedHTMLProps<
197+
HTMLAttributes<EoMiniActions>,
198+
EoMiniActions
199+
> &
200+
EoMiniActionsProps & {
201+
onActionClick?: (event: CustomEvent<SimpleAction>) => void;
202+
};
203+
"eo-page-title": DetailedHTMLProps<
204+
HTMLAttributes<EoPageTitle>,
205+
EoPageTitle
206+
> &
207+
PageTitleProps;
208+
"eo-popover": DetailedHTMLProps<HTMLAttributes<Popover>, Popover> &
209+
PopoverProps & {
210+
onVisibleChange?: (event: CustomEvent<boolean>) => void;
211+
onBeforeVisibleChange?: (event: CustomEvent<boolean>) => void;
212+
};
213+
"eo-sidebar": DetailedHTMLProps<HTMLAttributes<EoSidebar>, EoSidebar> &
214+
EoSidebarProps;
215+
"eo-sidebar-menu": DetailedHTMLProps<
216+
HTMLAttributes<EoSidebarMenu>,
217+
EoSidebarMenu
218+
> &
219+
EoSidebarMenuProps;
220+
"eo-sidebar-menu-group": DetailedHTMLProps<
221+
HTMLAttributes<EoSidebarMenuGroup>,
222+
EoSidebarMenuGroup
223+
> &
224+
EoSidebarMenuGroupProps;
225+
"eo-sidebar-menu-item": DetailedHTMLProps<
226+
HTMLAttributes<EoSidebarMenuItem>,
227+
EoSidebarMenuItem
228+
> &
229+
EoSidebarMenuItemProps;
230+
"eo-sidebar-menu-submenu": DetailedHTMLProps<
231+
HTMLAttributes<EoSidebarMenuSubmenu>,
232+
EoSidebarMenuSubmenu
233+
> &
234+
EoSidebarMenuSubmenuProps;
235+
"eo-sidebar-sub-menu": DetailedHTMLProps<
236+
HTMLAttributes<EoSidebarSubMenu>,
237+
EoSidebarSubMenu
238+
>;
239+
"eo-tag": DetailedHTMLProps<HTMLAttributes<Tag>, Tag> &
240+
TagProps & {
241+
onCheck?: (event: CustomEvent<TagProps>) => void;
242+
onClose?: (event: CustomEvent<TagProps>) => void;
243+
};
244+
"eo-tag-list": DetailedHTMLProps<HTMLAttributes<TagList>, TagList> &
245+
TagListProps;
246+
"eo-text": DetailedHTMLProps<HTMLAttributes<EoText>, EoText> & TextProps;
247+
"eo-toggle-link": DetailedHTMLProps<
248+
HTMLAttributes<ToggleLink>,
249+
ToggleLink
250+
> &
251+
ToggleLinkProps;
252+
"eo-tooltip": DetailedHTMLProps<HTMLAttributes<EoTooltip>, EoTooltip> &
253+
ToolTipProps;
254+
"eo-viewport": DetailedHTMLProps<HTMLAttributes<EoViewport>, EoViewport> &
255+
ViewportProps;
256+
}
257+
}
258+
}

‎bricks/basic/src/text/index.spec.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { act } from "react-dom/test-utils";
33
import { queryByTestId, getByTestId, fireEvent } from "@testing-library/dom";
44

55
import "./index.js";
6-
import { Text } from "./index.js";
6+
import { EoText } from "./index.js";
77
describe("eo-text", () => {
88
test("basic usage", async () => {
9-
const element = document.createElement("eo-text") as Text;
9+
const element = document.createElement("eo-text") as EoText;
1010
const div = document.createElement("div");
1111
div.textContent = "Hello world";
1212
element.color = "blue";
@@ -28,7 +28,7 @@ describe("eo-text", () => {
2828
});
2929

3030
test("editable", async () => {
31-
const element = document.createElement("eo-text") as Text;
31+
const element = document.createElement("eo-text") as EoText;
3232
const onChange = jest.fn();
3333
const onUpdate = jest.fn();
3434

@@ -96,7 +96,9 @@ describe("eo-text", () => {
9696
fireEvent(editControl, new CustomEvent("change", { detail: "b" }));
9797
});
9898

99-
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ detail: "b" }));
99+
expect(onChange).toHaveBeenCalledWith(
100+
expect.objectContaining({ detail: "b" })
101+
);
100102

101103
// edit control blur
102104
expect(onUpdate).not.toHaveBeenCalled();
@@ -105,7 +107,9 @@ describe("eo-text", () => {
105107
fireEvent.blur(editControl);
106108
});
107109

108-
expect(onUpdate).toHaveBeenCalledWith(expect.objectContaining({ detail: "b" }));
110+
expect(onUpdate).toHaveBeenCalledWith(
111+
expect.objectContaining({ detail: "b" })
112+
);
109113

110114
act(() => {
111115
document.body.removeChild(element);

‎bricks/basic/src/text/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ const { defineElement, property, event } = createDecorators();
9898
styleTexts: [styleText],
9999
alias: ["basic.general-text"],
100100
})
101-
class Text extends ReactNextElement implements TextProps {
101+
class EoText extends ReactNextElement implements TextProps {
102102
/**
103103
* 文本类型
104104
* @default "default"
@@ -317,4 +317,4 @@ export function TextComponent(props: TextComponentProps): React.ReactElement {
317317
</TextElementName>
318318
);
319319
}
320-
export { Text };
320+
export { EoText };

0 commit comments

Comments
 (0)