Merge branch 'main' into release

content/show/table/index.md

@@ -4922,6 +4922,7 @@ function Demo() {
 ## FAQ
 
 -   **表格数据为何没有更新？**  
+
      Table 组件目前所有参数都为浅层对比，也就是说如果该参数值类型为一个 Array 或者 Object，你需要手动改变其引用才能触发更新。同理，如果你不想触发额外更新，尽量不要直接在传参的时候使用字面量或是在 render 过程中定义引用型参数值：
 
     ```text

content/start/changelog/index-en-US.md

@@ -16,6 +16,26 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 
 ---
 
+#### 🎉 2.31.2 (2023-03-24)
+- 【Fix】
+    - Fix the problem of using resizable Table and form at the same time in the dev environment to report an error  [#1506](https://github.com/DouyinFE/semi-design/issues/1506)
+    - Fix the problem that the delay props related to Nav tooltip does not take effect  [#1454](https://github.com/DouyinFE/semi-design/issues/1454)
+    - Fix: When selecting remote and autoClearSearchValue is false, the optionList is not displayed correctly after updating, (range of impact: v2.28 - 2.31) [#1386](https://github.com/DouyinFE/semi-design/issues/1386)
+
+#### 🎉 2.31.1 (2023-03-22)
+- 【Chore】
+    - Semi Webpack Plugin adds logic to directly retrieve NormalModule from the Compiler Instance [#1503](https://github.com/DouyinFE/semi-design/pull/1503)
+
+#### 🎉 2.31.0 (2023-03-17)
+- 【Fix】
+    - Fix the problem that the ratio of the new picture is incorrect after switching the ratio state of the preview picture and switching the picture in ImagePreview  [#1494 ](https://github.com/DouyinFE/semi-design/issues/1494)
+    - fix the problem that the component is not re-updated after Carousel props.children is updated  [#1482 ](https://github.com/DouyinFE/semi-design/issues/1482)
+    - fix the conflict between the Carousel ref method play and the mouseEnter event of autoPlay.hoverToPause, which does not have the highest priority
+    - Fix the wrong state of the selection box in the header of the second page after selecting all the Table  [#325](https://github.com/DouyinFE/semi-design/issues/325)
+    - Select onSearch provides a second input parameter to solve the problem of indistinguishable 1. Automatically clear the input after selection to trigger onSearch, 2. Actively use backspace to clear the input to trigger onSearch 3. Click the clear icon to trigger onSearch and other different scenarios  [#867](https://github.com/DouyinFE/semi-design/issues/867)
+    - Fixed confirmation button and cancel button not displaying the loading icon when returning promise (2.30 ~ 2.31 versions are affected)  [#1489](https://github.com/DouyinFE/semi-design/issues/1489)
+    - Fix the problem that the user needs to click the option twice to select it for single selection, searchable and search box in Trigger, virtualized TreeSelect  [#1487 ](https://github.com/DouyinFE/semi-design/issues/1487)
+    
 #### 🎉 2.31.0-beta.0 (2023-03-13)
 
 - 【Feat】

content/start/changelog/index.md

@@ -14,6 +14,26 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 -   不同版本间的详细关系，可查阅 [FAQ](/zh-CN/start/faq)
 
 
+#### 🎉 2.31.2 (2023-03-24)
+- 【Fix】
+    - 修复 resizable Table 与 form 标签同时存在在 dev 环境下报错问题  [#1506](https://github.com/DouyinFE/semi-design/issues/1506)
+    - 修复 Nav tooltip 相关延迟 props 不生效的问题  [#1454](https://github.com/DouyinFE/semi-design/issues/1454)
+    - 修复 Select remote 且 autoClearSearchValue 为 false时，更新 optionList 后未正确显示的问题（影响范围：v2.28 - 2.31）[#1386](https://github.com/DouyinFE/semi-design/issues/1386)
+
+#### 🎉 2.31.1 (2023-03-22)
+- 【Chore】
+    - Semi Webpack Plugin 增加直接从 Compiler Instance 中获取NormalModule的逻辑 [#1503](https://github.com/DouyinFE/semi-design/pull/1503)
+
+#### 🎉 2.31.0 (2023-03-17)
+- 【Fix】
+    - 修复 ImagePreview 组件中预览图片改变 ratio 状态并切换图片后，新图片 ratio 不正确问题 [#1494](https://github.com/DouyinFE/semi-design/issues/1494)
+    - 修复 Carousel props.children 更新后组件未重新更新问题  [#1482](https://github.com/DouyinFE/semi-design/issues/1482)
+    - 修复 Carousel ref method play 与 autoPlay.hoverToPause 的mouseEnter事件冲突，未拥有最高优先级问题
+    - 修复 Table 全选后翻页表头选择框状态错误问题  [#325](https://github.com/DouyinFE/semi-design/issues/325)
+    - Select onSearch 提供第二个入参，解决无法区分 1选择后自动清空input 触发onSearch 、2 主动使用 backspace清空input触发 onSearch 3 点击 clear icon触发onSearch 等不同场景的问题   [#867](https://github.com/DouyinFE/semi-design/issues/867)
+    - 修复 Popconfirm 确认按钮与取消按钮在返回 promise 时没有展示 loading 问题（影响 2.30 ~ 2.31 版本）  [#1489](https://github.com/DouyinFE/semi-design/issues/1489)
+    - 修复对于单选，可搜索且搜索框在 Trigger中，虚拟化的 TreeSelect ，用户需要点击两次选项才能选中问题  [#1487](https://github.com/DouyinFE/semi-design/issues/1487)
+
 #### 🎉 2.31.0-beta.0 (2023-03-13)
 - 【Feat】
     - Table 固定列支持 RTL，Table 支持 direction prop  [#1471](https://github.com/DouyinFE/semi-design/issues/1471)

cypress/integration/select.spec.js

@@ -54,6 +54,14 @@ describe('Select', () => {
         cy.get('.semi-popover-wrapper').eq(0).should('have.css', 'height', '0px');
     });
 
+    it('autoClearSearchValue false + remote + optionList update async', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--auto-clear-search-value');
+        cy.get('.remote-select').eq(0).click();
+        cy.get('.semi-select-option').eq(0).click();
+        cy.get('.remote-select .semi-input').eq(0).type('123');
+        cy.wait(500);
+        cy.get('.semi-select-option').should('have.text', 'Design');
+    });
     // it('should trigger onSearch when click x icon', () => {
     //     cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--select-filter-single');
     //     cy.get('.semi-select').eq(0).click();

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.31.0-beta.0"
+    "version": "2.31.2"
 }

package.json

@@ -200,6 +200,7 @@
         "ts-loader": "^5.4.5",
         "typescript": "^4.8.3",
         "webpack": "^4.46.0",
+        "webpack-5": "npm:webpack@^5.0.0",
         "webpack-cli": "^3.3.12",
         "webpack-dev-server": "^3.11.2",
         "webpackbar": "^5.0.0-3"

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-react",
-    "version": "2.31.0-beta.0",
+    "version": "2.31.2",
     "description": "motion library for semi-ui-react",
     "keywords": [
         "motion",

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-styled",
-    "version": "2.31.0-beta.0",
+    "version": "2.31.2",
     "description": "semi styled animation",
     "keywords": [
         "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation",
-    "version": "2.31.0-beta.0",
+    "version": "2.31.2",
     "description": "animation base library for semi-ui",
     "keywords": [
         "animation",

packages/semi-eslint-plugin/__tests__/index.js

@@ -9,7 +9,11 @@ ruleTester.run('no-import', rule['no-import'], {
     valid: [
         {
             code: 'var invalidVariable = true',
-        }
+        },
+        {
+            code: "import { Input } from '@douyinfe/semi-ui'",
+            filename: 'packages/semi-ui/table/_story/v2/fixedResizableWithForm.tsx',
+        },
     ],
     invalid: [
         {

packages/semi-eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-semi-design",
-    "version": "2.31.0-beta.0",
+    "version": "2.31.2",
     "description": "semi ui eslint plugin",
     "keywords": [
         "semi",

packages/semi-eslint-plugin/src/rules/no-import.ts

@@ -62,10 +62,12 @@ const rule: Rule.RuleModule = {
                                 }
                             });
                         } else if (isImportSelf({ path: importName, fileName })) {
-                            context.report({
-                                node,
-                                messageId: "unexpectedImportSelf",
-                            });
+                            if (!fileName.includes('story')) {
+                                context.report({
+                                    node,
+                                    messageId: "unexpectedImportSelf",
+                                });
+                            }
                         }
                     }
                 }

packages/semi-foundation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.31.0-beta.0",
+    "version": "2.31.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",

packages/semi-foundation/select/foundation.ts

@@ -94,7 +94,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         if (isFilterable && isMultiple) {
             // when filter and multiple, only focus input
             this.focusInput();
-        } else if (isFilterable && !isMultiple){
+        } else if (isFilterable && !isMultiple) {
             // when filter and not multiple, only show input and focus input
             this.toggle2SearchInput(true);
         } else {
@@ -196,7 +196,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
     // call when props.value change
     handleValueChange(value: PropValue) {
-        const { allowCreate, autoClearSearchValue } = this.getProps();
+        const { allowCreate, autoClearSearchValue, remote } = this.getProps();
         const { inputValue } = this.getStates();
         let originalOptions;
         // AllowCreate and controlled mode, no need to re-collect optionList
@@ -212,7 +212,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         // Multi-selection, controlled mode, you need to reposition the drop-down menu after updating
         this._adapter.rePositionDropdown();
 
-        if (this._isFilterable() && !autoClearSearchValue && inputValue) {
+        if (this._isFilterable() && !autoClearSearchValue && inputValue && !remote) {
             originalOptions = this._filterOption(originalOptions, inputValue);
         }
 
@@ -555,7 +555,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     clearInput(event?: any) {
         const { inputValue } = this.getStates();
         // only when input is not null, select should notifySearch and updateOptions
-        if (inputValue !== ''){
+        if (inputValue !== '') {
             this._adapter.updateInputValue('');
             this._adapter.notifySearch('', event);
             // reset options filter
@@ -793,16 +793,16 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         isOpen ? this._getEnableFocusIndex(offset) : this.open();
     }
 
-    _handleTabKeyDown(event: any){
+    _handleTabKeyDown(event: any) {
         const { isOpen } = this.getStates();
         this._adapter.updateFocusState(false);
 
-        if (isOpen){
+        if (isOpen) {
             const container = this._adapter.getContainer();
             const focusableElements = this._adapter.getFocusableElements(container);
             const focusableNum = focusableElements.length;
 
-            if (focusableNum > 0){
+            if (focusableNum > 0) {
                 // Shift + Tab will move focus backward
                 if (event.shiftKey) {
                     this._handlePanelOpenShiftTabKeyDown(focusableElements, event);
@@ -823,7 +823,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     _handlePanelOpenTabKeyDown(focusableElements: any[], event: any) {
         const activeElement = this._adapter.getActiveElement();
         const isFocusInContainer = this._adapter.getIsFocusInContainer();
-        if (!isFocusInContainer){
+        if (!isFocusInContainer) {
             // focus in trigger, set next focus to the first element in container
             focusableElements[0].focus();
             this._adapter.setIsFocusInContainer(true);
@@ -854,7 +854,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
     _handleEnterKeyDown(event: KeyboardEvent) {
         const { isOpen, options, focusIndex } = this.getStates();
-        if (!isOpen){
+        if (!isOpen) {
             this.open();
         } else {
             if (focusIndex !== -1) {

packages/semi-foundation/switch/foundation.ts

@@ -15,8 +15,7 @@ export default class SwitchFoundation<P = Record<string, any>, S = Record<string
     }
 
     init(): void {
-        const { defaultChecked, checked, disabled } = this.getProps();
-        this.setChecked(defaultChecked || checked);
+        const { disabled } = this.getProps();
         this.setDisabled(disabled);
     }
 
@@ -45,7 +44,7 @@ export default class SwitchFoundation<P = Record<string, any>, S = Record<string
             if (target.matches(':focus-visible')) {
                 this._adapter.setFocusVisible(true);
             }
-        } catch (error){
+        } catch (error) {
             warning(true, 'Warning: [Semi Switch] The current browser does not support the focus-visible');
         }
     }

packages/semi-foundation/table/utils.ts

@@ -65,6 +65,11 @@ export function mergeColumns(oldColumns: any[] = [], newColumns: any[] = [], key
     const finalColumns: any[] = [];
     const clone = deep ? cloneDeep : lodashClone;
 
+    if (deep) {
+        const logger = new Logger('[@douyinfe/semi-ui Table]');
+        logger.warn('Should not deep merge columns from foundation since columns may have react elements. Merge columns deep from semi-ui');
+    }
+
     map(newColumns, newColumn => {
         newColumn = { ...newColumn };
         const key = getColumnKey(newColumn, keyPropNames);

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-icons",
-    "version": "2.31.0-beta.0",
+    "version": "2.31.2",
     "description": "semi icons",
     "keywords": [
         "semi",

packages/semi-illustrations/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-illustrations",
-    "version": "2.31.0-beta.0",
+    "version": "2.31.2",
     "description": "semi illustrations",
     "keywords": [
         "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.31.0-beta.0",
+    "version": "2.31.2",
     "description": "Plugin that support Semi Design in Next.js",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-scss-compile",
-    "version": "2.31.0-beta.0",
+    "version": "2.31.2",
     "description": "compile semi scss to css",
     "author": "[email protected]",
     "license": "MIT",

packages/semi-theme-default/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-theme-default",
-    "version": "2.31.0-beta.0",
+    "version": "2.31.2",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/_utils/index.tsx

@@ -22,11 +22,9 @@ export function stopPropagation(e: React.MouseEvent, noImmediate?: boolean) {
 }
 
 /**
- *
- * @param {any} value
- * @param {Function} customizer
- * @returns {any}
  * use in Table, Form, Navigation
+ * 
+ * skip clone function and react element
  */
 export function cloneDeep(value: any, customizer?: (value: any) => void) {
     return cloneDeepWith(value, v => {
@@ -39,6 +37,8 @@ export function cloneDeep(value: any, customizer?: (value: any) => void) {
         if (Object.prototype.toString.call(v) === '[object Error]') {
             return v;
         }
+        // it is tricky
+        // when array length beyond max length, array.length will be 0
         if (Array.isArray(v) && v.length === 0) {
             const keys: string[] = Object.keys(v);
             if (keys.length) {
@@ -54,7 +54,7 @@ export function cloneDeep(value: any, customizer?: (value: any) => void) {
                     The maximum length of an array is 4294967295.
                     Please check whether the array subscript in your data exceeds the maximum value of the JS array subscript`
                     );
-                } catch (e){
+                } catch (e) {
 
                 }
                 return newArray;

packages/semi-ui/navigation/Item.tsx

@@ -158,14 +158,16 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
 
     wrapTooltip = (node: React.ReactNode) => {
         const { text, tooltipHideDelay, tooltipShowDelay } = this.props;
+        const hideDelay = tooltipHideDelay ?? this.context.tooltipHideDelay;
+        const showDelay = tooltipShowDelay ?? this.context.tooltipShowDelay;
 
         return (
             <Tooltip
                 content={text}
                 position="right"
                 trigger={'hover'}
-                mouseEnterDelay={tooltipShowDelay}
-                mouseLeaveDelay={tooltipHideDelay}
+                mouseEnterDelay={showDelay}
+                mouseLeaveDelay={hideDelay}
             >
                 {node}
             </Tooltip>

packages/semi-ui/navigation/nav-context.ts

@@ -22,7 +22,9 @@ export interface NavContextType {
     subNavOpenDelay?: NavProps['subNavOpenDelay'];
     canUpdateOpenKeys?: boolean;
     renderWrapper?: NavProps['renderWrapper'];
-    getPopupContainer?: DropdownProps['getPopupContainer']
+    getPopupContainer?: DropdownProps['getPopupContainer'];
+    tooltipShowDelay?: number;
+    tooltipHideDelay?: number
 }
 
 const NavContext = React.createContext<NavContextType>({

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.31.0-beta.0",
+    "version": "2.31.2",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.31.0-beta.0",
-        "@douyinfe/semi-animation-react": "2.31.0-beta.0",
-        "@douyinfe/semi-foundation": "2.31.0-beta.0",
-        "@douyinfe/semi-icons": "2.31.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.31.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.31.0-beta.0",
+        "@douyinfe/semi-animation": "2.31.2",
+        "@douyinfe/semi-animation-react": "2.31.2",
+        "@douyinfe/semi-foundation": "2.31.2",
+        "@douyinfe/semi-icons": "2.31.2",
+        "@douyinfe/semi-illustrations": "2.31.2",
+        "@douyinfe/semi-theme-default": "2.31.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",

packages/semi-ui/select/_story/select.stories.jsx

@@ -2907,6 +2907,32 @@ export const AutoClearSearchValue = () => {
         { label: 'semi6', value: 'semi6' },
     ];
 
+    const [loading, setLoading] = useState(false);
+    const [list, setList] = useState(optionList);
+    const [value, setValue] = useState('');
+
+    const handleChange = newValue => { setValue(newValue); };
+
+    const data2 = [
+        {
+            label: "Design",
+            value: '123456',
+        }
+    ]
+
+    const handleSearch = (inputValue) => {
+        setLoading(true);
+        if (inputValue) {
+            setTimeout(() => {
+                setLoading(false);
+                setList(data2);
+            }, 1000);
+        } else {
+            setList(optionList)
+            setLoading(false);
+        }
+    };
+
     return (
         <>  
             <h4>autoClearSearchValue</h4>
@@ -2920,6 +2946,22 @@ export const AutoClearSearchValue = () => {
             <Select style={{ width: 400 }} multiple optionList={optionList} filter autoClearSearchValue={clear}></Select>
             <h4>Uncontrolled mode + multiple + defaultValue</h4>
             <Select style={{ width: 400 }} multiple optionList={optionList} filter defaultValue={['semi2']} autoClearSearchValue={clear}></Select>
+
+            <h4>controlled mode + update optionList + remote + autoClearSearchValue = false</h4>
+            <Select
+              style={{ width: 400 }}
+              multiple
+              optionList={list}
+              filter
+              remote
+              className='remote-select'
+              loading={loading}
+              value={value}
+              onChange={handleChange}
+              autoClearSearchValue={clear}
+              onSearch={handleSearch}
+            >
+            </Select>
         </>
     )
 }
@@ -3209,3 +3251,4 @@ export const emptyContent = () => {
   )
 }
 
+

packages/semi-ui/switch/index.tsx

@@ -73,7 +73,7 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
     constructor(props: SwitchProps) {
         super(props);
         this.state = {
-            nativeControlChecked: false,
+            nativeControlChecked: props.defaultChecked || props.checked,
             nativeControlDisabled: false,
             focusVisible: false
         };

packages/semi-ui/table/ResizableTable.tsx

@@ -8,10 +8,10 @@ import { merge, get, find, noop } from 'lodash';
 
 import { addClass, removeClass } from '@douyinfe/semi-foundation/utils/classnames';
 import { strings, numbers } from '@douyinfe/semi-foundation/table/constants';
-import { mergeColumns, assignColumnKeys, findColumn, withResizeWidth } from '@douyinfe/semi-foundation/table/utils';
+import { assignColumnKeys, findColumn, withResizeWidth } from '@douyinfe/semi-foundation/table/utils';
 
 import Table from './Table';
-import { cloneDeep } from './utils';
+import { cloneDeep, mergeColumns } from './utils';
 import getColumns from './getColumns';
 import ResizableHeaderCell from './ResizableHeaderCell';
 import { TableProps, ColumnProps } from './interface';

packages/semi-ui/table/_story/v2/fixedResizableWithForm.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+// eslint-disable-next-line semi-design/no-import
+import { Table } from '@douyinfe/semi-ui';
+
+App.storyName = 'fixed resizable table with form';
+/**
+ * @see https://github.com/DouyinFE/semi-design/issues/1506
+ */
+export default function App() {
+    return (
+        <div className="App">
+            <form />
+            <Table
+                resizable
+                dataSource={[]}
+                columns={[
+                    {
+                        dataIndex: 'dau',
+                        title: <div>ccc</div>,
+                        width: 300,
+                    },
+                ]}
+            />
+        </div>
+    );
+}

packages/semi-ui/table/_story/v2/index.js

@@ -12,4 +12,5 @@ export { default as FixedFilter } from './FixedFilter';
 export { default as FixedSorter } from './FixedSorter';
 export { default as stickyHeaderTable } from './stickyHeader';
 export { default as Fixed1188 } from './Fixed1188';
-export { default as EmptyFilters } from './emptyFilters';
+export { default as EmptyFilters } from './emptyFilters';
+export { default as fixedResizableWithForm } from './fixedResizableWithForm';

packages/semi-ui/table/utils.ts

@@ -1,8 +1,9 @@
-import { merge } from 'lodash';
+import { merge, clone as lodashClone, find, map } from 'lodash';
 import Logger from '@douyinfe/semi-foundation/utils/Logger';
 import { numbers } from '@douyinfe/semi-foundation/table/constants';
 import { cloneDeep } from '../_utils';
 import { TableComponents, Virtualized } from './interface';
+import { getColumnKey } from '@douyinfe/semi-foundation/table/utils';
 
 
 let scrollbarVerticalSize: number,
@@ -120,4 +121,30 @@ export function mergeComponents(components: TableComponents, virtualized: Virtua
 }
 
 export const logger = new Logger('[@douyinfe/semi-ui Table]');
+
+export function mergeColumns(oldColumns: any[] = [], newColumns: any[] = [], keyPropNames: any[] = null, deep = true) {
+    const finalColumns: any[] = [];
+    const clone = deep ? cloneDeep : lodashClone;
+
+    map(newColumns, newColumn => {
+        newColumn = { ...newColumn };
+        const key = getColumnKey(newColumn, keyPropNames);
+
+        const oldColumn = key != null && find(oldColumns, item => getColumnKey(item, keyPropNames) === key);
+
+        if (oldColumn) {
+            finalColumns.push(
+                clone({
+                    ...oldColumn,
+                    ...newColumn,
+                })
+            );
+        } else {
+            finalColumns.push(clone(newColumn));
+        }
+    });
+
+    return finalColumns;
+}
+
 export { cloneDeep };

packages/semi-webpack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-webpack-plugin",
-    "version": "2.31.0-beta.0",
+    "version": "2.31.2",
     "description": "",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",
@@ -24,7 +24,7 @@
         "css-loader": "4.3.0",
         "enhanced-resolve": "^5.8.3",
         "loader-utils": "2.0.0",
-        "sass": "1.54.9",
+        "sass": "^1.54.9",
         "sass-loader": "^10.1.1",
         "semver": "7.3.2",
         "style-loader": "1.3.0"

packages/semi-webpack/src/semi-webpack-plugin.ts

@@ -1,6 +1,7 @@
 import path from 'path';
+import { Compiler as LegacyCompiler } from 'webpack';
+import { Compiler } from 'webpack-5';
 import { transformPath } from './utils';
-const _NormalModule_ = require('webpack/lib/NormalModule');
 
 export interface WebpackContext {
     NormalModule?: any
@@ -16,9 +17,10 @@ export interface SemiWebpackPluginOptions {
     variables?: {[key: string]: string | number};
     include?: string;
     omitCss?: boolean;
+    /** @deprecated SemiWebpackPlugin will get webpack context from compiler instance. */
     webpackContext?: WebpackContext;
     extractCssOptions?: ExtractCssOptions;
-    overrideStylesheetLoaders?:(loaders:any[])=>any[]
+    overrideStylesheetLoaders?: (loaders: any[]) => any[]
 
 }
 
@@ -33,8 +35,12 @@ export default class SemiWebpackPlugin {
         this.options = options;
     }
 
-    apply(compiler: any) {
-        const NormalModule = this.options.webpackContext?.NormalModule || _NormalModule_;
+    apply(compiler: Compiler | LegacyCompiler) {
+        let NormalModule = this.options.webpackContext?.NormalModule;
+        if (!NormalModule && 'webpack' in compiler) NormalModule = compiler.webpack.NormalModule;
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        if (!NormalModule) NormalModule = require('webpack/lib/NormalModule');
+
         compiler.hooks.compilation.tap('SemiPlugin', (compilation: any) => {
             if (this.options.theme || this.options.prefixCls || this.options.omitCss) {
                 if (NormalModule.getCompilationHooks) {

src/templates/postTemplate.js

@@ -164,17 +164,22 @@ const code = ({ ...props }) => {
     newProps.lineNumber = false;
 
     const Placeholder = () => (
-        <Skeleton
-            active
-            placeholder={
-                <Skeleton.Image
-                    style={{
-                        width: '100%',
-                        height: 518,
-                    }}
-                />
-            }
-        />
+        <>
+            <Skeleton
+                active
+                placeholder={
+                    <Skeleton.Image
+                        style={{
+                            width: '100%',
+                            height: 518,
+                        }}
+                    />
+                }
+            />
+        <div className={"markdown-code-ssr"} style={{display:"none"}}>
+            {props.children}
+        </div>
+        </>
     );
 
     const [Component, _setComponent] = useState(() => Placeholder);