feat: webCompent plugin support new component, Chat, MarkdownRender, … (#2812)

* feat: webCompent plugin support new component, Chat, MarkdownRender, JsonView, AudioPlay etc

* feat: webCompent plugin support new component, Chat, MarkdownRender, JsonView, AudioPlay etc

* feat: webCompent plugin support new component, Chat, MarkdownRender, JsonView, AudioPlay etc

packages/semi-rspack/src/componentDependentTree.ts

@@ -1,5 +1,6 @@
 const dependentTree = {
     "Anchor": ["Typography"],
+    "AudioPlayer": ["Button", "Dropdown", "Image", "Tooltip", "Popover", "Icon"],
     "AutoComplete": ["Spin", "Popover", "Input", "Icon"],
     "Avatar": [] as any,
     "AvatarGroup": [] as any,
@@ -8,14 +9,20 @@ const dependentTree = {
     "Banner": ["IconButton", "Typography", "Icon"],
     "Breadcrumb": ["Popover", "Typography", "Icon"],
     "Button": ["Icon"],
+    "ButtonGroup": ["Button"],
+    "SplitButtonGroup": ["Button"],
     "Calendar": ["Popover", "Button", "Icon"],
     "Card": ["Space", "Skeleton", "Typography"],
     "Carousel": ["Icon"],
     "Cascader": ["Input", "Popover", "Tag", "TagInput", "Spin", "Checkbox", "Icon"],
+    "Chat": ["TextArea", "Button", "Upload", "Toast", "Progress", "Image", "Avatar", "Icon", "MarkdownRender", "Typography", "Tooltip", "Divider", "Popconfirm", "BackTop"],
     "Checkbox": ["Icon"],
+    "CodeHighlight": [] as any,
     "CheckboxGroup": ["Icon"],
     "Collapse": ["Collapsible", "Icon"],
     "Collapsible": [] as any,
+    "ColorPicker": ["Popover", "Input", "InputGroup", "InputNumber", "Select", "Button"],
+    "Cropper": [] as any,
     "DatePicker": ["Button", "Input", "IconButton", "Icon", "Typography", "ScrollList", "Icon"],
     "Descriptions": [] as any,
     "Divider": [] as any,
@@ -25,24 +32,30 @@ const dependentTree = {
     "Row": [] as any,
     "Col": [] as any,
     "Highlight": [] as any,
+    "HotKeys": [] as any,
     "IconButton": ["Button", "Spin", "Icon"],
     "Image": ["Skeleton", "Divider", "Tooltip", "Slider", "Spin", "Portal", "Icon"],
     "Input": ["Icon"],
     "InputGroup": ["Form"],
     "TextArea": ["Icon"],
     "InputNumber": ["Input", "Icon"],
+    "JsonViewer": ["Button", "Input", "Icon"],
     "Layout": [] as any,
+    "List": ["Row", "Spin"],
+    "MarkdownRender": ["Typography", "CodeHighlight", "Image", "Table", "Icon"],
     "Modal": ["Button", "Portal", "Typography", "Icon"],
     "Navigation": ["Button", "Tooltip", "Dropdown", "Collapsible", "Icon"],
     "Notification": ["Button", "Icon"],
     "OverflowList": [] as any,
     "Pagination": ["Select", "InputNumber", "Popover", "Icon"],
+    "PinCode": ["Input"],
     "Popconfirm": ["Popover", "Button", "Icon"],
     "Popover": ["Tooltip"],
     "Portal": [] as any,
     "Progress": [] as any,
     "Radio": ["Icon"],
     "Rating": ["Icon", "Tooltip"],
+    "Resizable": ["Icon"],
     "ScrollList": [] as any,
     "Select": ["Tag", "OverflowList", "Space", "Typography", "Spin", "Popover", "Icon"],
     "SideSheet": ["[Portal", "Button", "Icon"],
@@ -58,13 +71,15 @@ const dependentTree = {
     "TagGroup": ["Icon", "Popover", "Avatar"],
     "TagInput": ["Tag", "Input", "Popover", "Icon"],
     "Timeline": [] as any,
+    "TimePicker": ["Input", "Icon", "Popover", "ScrollList"],
     "Toast": ["Button", "Icon"],
     "Tooltip": ["Portal"],
     "Transfer": ["Input", "Checkbox", "Tree", "Button", "Spin", "Icon"],
     "Tree": ["Input", "Checkbox", "Spin", "Collapsible", "Icon"],
     "TreeSelect": ["Tag", "TagInput", "Checkbox", "Popover", "Input", "Icon"],
     "Typography": ["Popover", "Tooltip", "Icon"],
-    "Upload": ["Button", "Progress", "Tooltip", "Spin", "Icon"]
+    "Upload": ["Button", "Progress", "Tooltip", "Spin", "Icon"],
+    "UserGuide": ["Popover", "Button", "Modal"]
 };
   
 export default dependentTree;

packages/semi-rspack/src/loaders/semi-web-component-loader.ts

@@ -9,7 +9,9 @@ function getAllComponents(components: string[]) {
     const specialCaseBefore = {
         'AvatarGroup': 'Avatar',
         'CheckboxGroup': 'Checkbox',
-        'TagGroup': 'Tag'
+        'TagGroup': 'Tag',
+        'ButtonGroup': 'Button',
+        'SplitButtonGroup': 'Button',
     };
 
     /*
@@ -70,6 +72,7 @@ function getScssImportPaths(components: string[]) {
         'Portal': `${pathsObj.foundationPath}_portal/portal.scss`,
         "TextArea": `${pathsObj.foundationPath}input/textarea.scss`,
         "IconButton": `${pathsObj.foundationPath}button/iconButton.scss`,
+        "SplitButtonGroup": `${pathsObj.foundationPath}button/SplitButtonGroup.scss`,
     };
     const cssPaths = ["Base", ...components].map(componentName => {
         const lowFirstLetter = componentName.slice(0, 1).toLowerCase() + componentName.slice(1);

packages/semi-webpack/src/componentDependentTree.ts

@@ -1,5 +1,6 @@
 const dependentTree = {
     "Anchor": ["Typography"],
+    "AudioPlayer": ["Button", "Dropdown", "Image", "Tooltip", "Popover", "Icon"],
     "AutoComplete": ["Spin", "Popover", "Input", "Icon"],
     "Avatar": [] as any,
     "AvatarGroup": [] as any,
@@ -8,14 +9,20 @@ const dependentTree = {
     "Banner": ["IconButton", "Typography", "Icon"],
     "Breadcrumb": ["Popover", "Typography", "Icon"],
     "Button": ["Icon"],
+    "ButtonGroup": ["Button"],
+    "SplitButtonGroup": ["Button"],
     "Calendar": ["Popover", "Button", "Icon"],
     "Card": ["Space", "Skeleton", "Typography"],
     "Carousel": ["Icon"],
     "Cascader": ["Input", "Popover", "Tag", "TagInput", "Spin", "Checkbox", "Icon"],
+    "Chat": ["TextArea", "Button", "Upload", "Toast", "Progress", "Image", "Avatar", "Icon", "MarkdownRender", "Typography", "Tooltip", "Divider", "Popconfirm"],
     "Checkbox": ["Icon"],
+    "CodeHighlight": [] as any,
     "CheckboxGroup": ["Icon"],
     "Collapse": ["Collapsible", "Icon"],
     "Collapsible": [] as any,
+    "ColorPicker": ["Popover", "Input", "InputGroup", "InputNumber", "Select", "Button"],
+    "Cropper": [] as any,
     "DatePicker": ["Button", "Input", "IconButton", "Icon", "Typography", "ScrollList", "Icon"],
     "Descriptions": [] as any,
     "Divider": [] as any,
@@ -25,24 +32,30 @@ const dependentTree = {
     "Row": [] as any,
     "Col": [] as any,
     "Highlight": [] as any,
+    "HotKeys": [] as any,
     "IconButton": ["Button", "Spin", "Icon"],
     "Image": ["Skeleton", "Divider", "Tooltip", "Slider", "Spin", "Portal", "Icon"],
     "Input": ["Icon"],
     "InputGroup": ["Form"],
     "TextArea": ["Icon"],
     "InputNumber": ["Input", "Icon"],
+    "JsonViewer": ["Button", "Input", "Icon"],
     "Layout": [] as any,
+    "List": ["Row", "Spin"],
+    "MarkdownRender": ["Typography", "CodeHighlight", "Image", "Table", "Icon"],
     "Modal": ["Button", "Portal", "Typography", "Icon"],
     "Navigation": ["Button", "Tooltip", "Dropdown", "Collapsible", "Icon"],
     "Notification": ["Button", "Icon"],
     "OverflowList": [] as any,
     "Pagination": ["Select", "InputNumber", "Popover", "Icon"],
+    "PinCode": ["Input"],
     "Popconfirm": ["Popover", "Button", "Icon"],
     "Popover": ["Tooltip"],
     "Portal": [] as any,
     "Progress": [] as any,
     "Radio": ["Icon"],
     "Rating": ["Icon", "Tooltip"],
+    "Resizable": ["Icon"],
     "ScrollList": [] as any,
     "Select": ["Tag", "OverflowList", "Space", "Typography", "Spin", "Popover", "Icon"],
     "SideSheet": ["[Portal", "Button", "Icon"],
@@ -58,13 +71,15 @@ const dependentTree = {
     "TagGroup": ["Icon", "Popover", "Avatar"],
     "TagInput": ["Tag", "Input", "Popover", "Icon"],
     "Timeline": [] as any,
+    "TimePicker": ["Input", "Icon", "Popover", "ScrollList"],
     "Toast": ["Button", "Icon"],
     "Tooltip": ["Portal"],
     "Transfer": ["Input", "Checkbox", "Tree", "Button", "Spin", "Icon"],
     "Tree": ["Input", "Checkbox", "Spin", "Collapsible", "Icon"],
     "TreeSelect": ["Tag", "TagInput", "Checkbox", "Popover", "Input", "Icon"],
     "Typography": ["Popover", "Tooltip", "Icon"],
-    "Upload": ["Button", "Progress", "Tooltip", "Spin", "Icon"]
+    "Upload": ["Button", "Progress", "Tooltip", "Spin", "Icon"],
+    "UserGuide": ["Popover", "Button", "Modal"]
 };
   
 export default dependentTree;

packages/semi-webpack/src/semi-web-component-loader.ts

@@ -8,7 +8,9 @@ function getAllComponents(components: string[]) {
     const specialCaseBefore = {
         'AvatarGroup': 'Avatar',
         'CheckboxGroup': 'Checkbox',
-        'TagGroup': 'Tag'
+        'TagGroup': 'Tag',
+        'ButtonGroup': 'Button',
+        'SplitButtonGroup': 'Button',
     };
 
     /*
@@ -69,6 +71,7 @@ function getScssImportPaths(components: string[]) {
         'Portal': `${pathsObj.foundationPath}_portal/portal.scss`,
         "TextArea": `${pathsObj.foundationPath}input/textarea.scss`,
         "IconButton": `${pathsObj.foundationPath}button/iconButton.scss`,
+        "SplitButtonGroup": `${pathsObj.foundationPath}button/SplitButtonGroup.scss`,
     };
     const cssPaths = ["Base", ...components].map(componentName => {
         const lowFirstLetter = componentName.slice(0, 1).toLowerCase() + componentName.slice(1);