From 2b30d756e29db8af005d28fe6309701bc8c71265 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Thu, 6 Mar 2025 04:46:52 +0000 Subject: [PATCH] refactor(editor): replace debounce and throttle with lodash (#10639) --- blocksuite/affine/block-embed/package.json | 2 + .../embed-linked-doc-block.ts | 2 +- .../components/embed-synced-doc-card.ts | 3 +- .../components/frame/frame-preview.ts | 11 ++- .../edgeless/components/panel/color-panel.ts | 2 +- .../components/toolbar/edgeless-toolbar.ts | 61 +++++++------ .../widgets/linked-doc/linked-doc-popover.ts | 7 +- .../src/widgets/slash-menu/index.ts | 10 +-- .../widgets/slash-menu/slash-menu-popover.ts | 3 +- blocksuite/affine/components/package.json | 8 +- .../src/drop-indicator/file-drop-manager.ts | 2 +- blocksuite/affine/shared/package.json | 6 +- .../shared/src/services/edit-props-store.ts | 4 +- .../affine/shared/src/utils/reference.ts | 2 +- .../viewport-renderer/viewport-renderer.ts | 13 ++- .../affine/widget-drag-handle/package.json | 2 + .../src/watchers/pointer-event-watcher.ts | 19 +++- .../widget-remote-selection/package.json | 4 +- .../src/doc/doc-remote-selection.ts | 2 +- blocksuite/framework/block-std/package.json | 2 + .../framework/block-std/src/gfx/viewport.ts | 23 ++--- .../block-std/src/range/range-binding.ts | 3 +- .../framework/global/src/utils/function.ts | 90 ------------------- .../component/src/ui/masonry/masonry.tsx | 2 +- .../ai/chat-panel/components/doc-chip.ts | 7 +- .../components/ai-scrollable-text-renderer.ts | 3 +- yarn.lock | 27 +++--- 27 files changed, 118 insertions(+), 202 deletions(-) diff --git a/blocksuite/affine/block-embed/package.json b/blocksuite/affine/block-embed/package.json index cddb8ba384..1ffa801917 100644 --- a/blocksuite/affine/block-embed/package.json +++ b/blocksuite/affine/block-embed/package.json @@ -26,7 +26,9 @@ "@lit/context": "^1.1.2", "@preact/signals-core": "^1.8.0", "@toeverything/theme": "^1.1.12", + "@types/lodash-es": "^4.17.12", "lit": "^3.2.0", + "lodash-es": "^4.17.21", "minimatch": "^10.0.1", "yjs": "^13.6.21", "zod": "^3.23.8" diff --git a/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts b/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts index b740f88431..bce117957b 100644 --- a/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts +++ b/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts @@ -28,7 +28,6 @@ import { } from '@blocksuite/affine-shared/utils'; import { BlockSelection } from '@blocksuite/block-std'; import { Bound } from '@blocksuite/global/gfx'; -import { throttle } from '@blocksuite/global/utils'; import { Text } from '@blocksuite/store'; import { computed } from '@preact/signals-core'; import { html, nothing } from 'lit'; @@ -36,6 +35,7 @@ import { property, queryAsync, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { styleMap } from 'lit/directives/style-map.js'; import { when } from 'lit/directives/when.js'; +import throttle from 'lodash-es/throttle'; import * as Y from 'yjs'; import { EmbedBlockComponent } from '../common/embed-block-element.js'; diff --git a/blocksuite/affine/block-embed/src/embed-synced-doc-block/components/embed-synced-doc-card.ts b/blocksuite/affine/block-embed/src/embed-synced-doc-block/components/embed-synced-doc-card.ts index b86b83ef35..829404c261 100644 --- a/blocksuite/affine/block-embed/src/embed-synced-doc-block/components/embed-synced-doc-card.ts +++ b/blocksuite/affine/block-embed/src/embed-synced-doc-block/components/embed-synced-doc-card.ts @@ -4,10 +4,11 @@ import { isGfxBlockComponent, ShadowlessElement, } from '@blocksuite/block-std'; -import { throttle, WithDisposable } from '@blocksuite/global/utils'; +import { WithDisposable } from '@blocksuite/global/utils'; import { html, nothing } from 'lit'; import { property, queryAsync } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; +import throttle from 'lodash-es/throttle'; import { RENDER_CARD_THROTTLE_MS, diff --git a/blocksuite/affine/block-root/src/edgeless/components/frame/frame-preview.ts b/blocksuite/affine/block-root/src/edgeless/components/frame/frame-preview.ts index ffc4bd7740..d918fa60f8 100644 --- a/blocksuite/affine/block-root/src/edgeless/components/frame/frame-preview.ts +++ b/blocksuite/affine/block-root/src/edgeless/components/frame/frame-preview.ts @@ -8,15 +8,12 @@ import { } from '@blocksuite/block-std'; import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; import { Bound, deserializeXYWH } from '@blocksuite/global/gfx'; -import { - debounce, - DisposableGroup, - WithDisposable, -} from '@blocksuite/global/utils'; +import { DisposableGroup, WithDisposable } from '@blocksuite/global/utils'; import { type Query, type Store } from '@blocksuite/store'; import { css, html, nothing, type PropertyValues } from 'lit'; import { property, query, state } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; +import debounce from 'lodash-es/debounce'; import type { EdgelessRootPreviewBlockComponent } from '../../edgeless-root-preview-block.js'; @@ -182,7 +179,9 @@ export class FramePreview extends WithDisposable(ShadowlessElement) { this._clearFrameDisposables(); this._frameDisposables = new DisposableGroup(); this._frameDisposables.add( - frame.propsUpdated.on(debounce(this._updateFrameViewportWH, 10)) + frame.propsUpdated.on( + debounce(this._updateFrameViewportWH, 10, { leading: true }) + ) ); } diff --git a/blocksuite/affine/block-root/src/edgeless/components/panel/color-panel.ts b/blocksuite/affine/block-root/src/edgeless/components/panel/color-panel.ts index 193c2df7dc..3659a5d7a4 100644 --- a/blocksuite/affine/block-root/src/edgeless/components/panel/color-panel.ts +++ b/blocksuite/affine/block-root/src/edgeless/components/panel/color-panel.ts @@ -11,7 +11,7 @@ import { property } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { repeat } from 'lit/directives/repeat.js'; -import { isEqual } from 'lodash-es'; +import isEqual from 'lodash-es/isEqual'; function TransparentIcon(hollowCircle = false) { const CircleIcon: TemplateResult | typeof nothing = hollowCircle diff --git a/blocksuite/affine/block-root/src/edgeless/components/toolbar/edgeless-toolbar.ts b/blocksuite/affine/block-root/src/edgeless/components/toolbar/edgeless-toolbar.ts index 6e1ca40d3e..d8477ead2f 100644 --- a/blocksuite/affine/block-root/src/edgeless/components/toolbar/edgeless-toolbar.ts +++ b/blocksuite/affine/block-root/src/edgeless/components/toolbar/edgeless-toolbar.ts @@ -16,7 +16,7 @@ import { import { stopPropagation } from '@blocksuite/affine-shared/utils'; import { WidgetComponent } from '@blocksuite/block-std'; import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; -import { debounce, Slot } from '@blocksuite/global/utils'; +import { Slot } from '@blocksuite/global/utils'; import { ArrowLeftSmallIcon, ArrowRightSmallIcon, @@ -29,6 +29,7 @@ import { baseTheme, cssVar } from '@toeverything/theme'; import { css, html, nothing, unsafeCSS } from 'lit'; import { query, state } from 'lit/decorators.js'; import { cache } from 'lit/directives/cache.js'; +import debounce from 'lodash-es/debounce'; import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js'; import type { MenuPopper } from './common/create-popper.js'; @@ -233,36 +234,40 @@ export class EdgelessToolbarWidget extends WidgetComponent< @state() accessor containerWidth = 1920; - private readonly _onContainerResize = debounce(({ w }: { w: number }) => { - if (!this.isConnected) return; + private readonly _onContainerResize = debounce( + ({ w }: { w: number }) => { + if (!this.isConnected) return; - this.slots.resize.emit({ w, h: TOOLBAR_HEIGHT }); - this.containerWidth = w; + this.slots.resize.emit({ w, h: TOOLBAR_HEIGHT }); + this.containerWidth = w; - if (this._denseSeniorTools) { - this.scrollSeniorToolIndex = Math.min( - this._seniorTools.length - this.scrollSeniorToolSize, - this.scrollSeniorToolIndex - ); - } else { - this.scrollSeniorToolIndex = 0; - } + if (this._denseSeniorTools) { + this.scrollSeniorToolIndex = Math.min( + this._seniorTools.length - this.scrollSeniorToolSize, + this.scrollSeniorToolIndex + ); + } else { + this.scrollSeniorToolIndex = 0; + } - if ( - this._denseQuickTools && - this._moreQuickToolsMenu && - this._moreQuickToolsMenuRef - ) { - this._moreQuickToolsMenu.close(); - this._openMoreQuickToolsMenu({ - currentTarget: this._moreQuickToolsMenuRef, - }); - } - if (!this._denseQuickTools && this._moreQuickToolsMenu) { - this._moreQuickToolsMenu.close(); - this._moreQuickToolsMenu = null; - } - }, 300); + if ( + this._denseQuickTools && + this._moreQuickToolsMenu && + this._moreQuickToolsMenuRef + ) { + this._moreQuickToolsMenu.close(); + this._openMoreQuickToolsMenu({ + currentTarget: this._moreQuickToolsMenuRef, + }); + } + if (!this._denseQuickTools && this._moreQuickToolsMenu) { + this._moreQuickToolsMenu.close(); + this._moreQuickToolsMenu = null; + } + }, + 300, + { leading: true } + ); private _resizeObserver: ResizeObserver | null = null; diff --git a/blocksuite/affine/block-root/src/widgets/linked-doc/linked-doc-popover.ts b/blocksuite/affine/block-root/src/widgets/linked-doc/linked-doc-popover.ts index 62b32a454e..ff80d9d501 100644 --- a/blocksuite/affine/block-root/src/widgets/linked-doc/linked-doc-popover.ts +++ b/blocksuite/affine/block-root/src/widgets/linked-doc/linked-doc-popover.ts @@ -12,16 +12,13 @@ import { } from '@blocksuite/affine-shared/utils'; import { PropTypes, requiredProperties } from '@blocksuite/block-std'; import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; -import { - SignalWatcher, - throttle, - WithDisposable, -} from '@blocksuite/global/utils'; +import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import { MoreHorizontalIcon } from '@blocksuite/icons/lit'; import { effect } from '@preact/signals-core'; import { css, html, LitElement, nothing } from 'lit'; import { property, query, queryAll, state } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; +import throttle from 'lodash-es/throttle'; import { getPopperPosition } from '../../utils/position.js'; import type { LinkedDocContext, LinkedMenuGroup } from './config.js'; diff --git a/blocksuite/affine/block-root/src/widgets/slash-menu/index.ts b/blocksuite/affine/block-root/src/widgets/slash-menu/index.ts index 1df1dcae51..88df1ea7a2 100644 --- a/blocksuite/affine/block-root/src/widgets/slash-menu/index.ts +++ b/blocksuite/affine/block-root/src/widgets/slash-menu/index.ts @@ -4,12 +4,9 @@ import { } from '@blocksuite/affine-components/rich-text'; import type { UIEventStateContext } from '@blocksuite/block-std'; import { TextSelection, WidgetComponent } from '@blocksuite/block-std'; -import { - assertType, - debounce, - DisposableGroup, -} from '@blocksuite/global/utils'; +import { assertType, DisposableGroup } from '@blocksuite/global/utils'; import { InlineEditor } from '@blocksuite/inline'; +import debounce from 'lodash-es/debounce'; import type { RootBlockComponent } from '../../types.js'; import { @@ -75,7 +72,8 @@ const showSlashMenu = debounce( container.append(slashMenu); return slashMenu; }, - 100 + 100, + { leading: true } ); export const AFFINE_SLASH_MENU_WIDGET = 'affine-slash-menu-widget'; diff --git a/blocksuite/affine/block-root/src/widgets/slash-menu/slash-menu-popover.ts b/blocksuite/affine/block-root/src/widgets/slash-menu/slash-menu-popover.ts index 3ae91da9bc..81b546240e 100644 --- a/blocksuite/affine/block-root/src/widgets/slash-menu/slash-menu-popover.ts +++ b/blocksuite/affine/block-root/src/widgets/slash-menu/slash-menu-popover.ts @@ -13,12 +13,13 @@ import { isFuzzyMatch, substringMatchScore, } from '@blocksuite/affine-shared/utils'; -import { throttle, WithDisposable } from '@blocksuite/global/utils'; +import { WithDisposable } from '@blocksuite/global/utils'; import { autoPlacement, offset } from '@floating-ui/dom'; import { html, LitElement, nothing, type PropertyValues } from 'lit'; import { property, state } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { styleMap } from 'lit/directives/style-map.js'; +import throttle from 'lodash-es/throttle'; import { getPopperPosition } from '../../utils/position.js'; import type { diff --git a/blocksuite/affine/components/package.json b/blocksuite/affine/components/package.json index 8900a354d9..2dbee20831 100644 --- a/blocksuite/affine/components/package.json +++ b/blocksuite/affine/components/package.json @@ -26,13 +26,15 @@ "@preact/signals-core": "^1.8.0", "@toeverything/theme": "^1.1.12", "@types/hast": "^3.0.4", + "@types/katex": "^0.16.7", + "@types/lodash-es": "^4.17.12", "@types/mdast": "^4.0.4", "collapse-white-space": "^2.1.0", "date-fns": "^4.0.0", "katex": "^0.16.11", "lit": "^3.2.0", "lit-html": "^3.2.1", - "lodash.clonedeep": "^4.5.0", + "lodash-es": "^4.17.21", "remark-math": "^6.0.0", "shiki": "^3.0.0", "yjs": "^13.6.21", @@ -69,9 +71,5 @@ "!src/__tests__", "!dist/__tests__" ], - "devDependencies": { - "@types/katex": "^0.16.7", - "@types/lodash.clonedeep": "^4.5.9" - }, "version": "0.20.0" } diff --git a/blocksuite/affine/components/src/drop-indicator/file-drop-manager.ts b/blocksuite/affine/components/src/drop-indicator/file-drop-manager.ts index dfb14258eb..84c022c54c 100644 --- a/blocksuite/affine/components/src/drop-indicator/file-drop-manager.ts +++ b/blocksuite/affine/components/src/drop-indicator/file-drop-manager.ts @@ -16,9 +16,9 @@ import { SurfaceBlockModel } from '@blocksuite/block-std/gfx'; import { createIdentifier } from '@blocksuite/global/di'; import type { IVec } from '@blocksuite/global/gfx'; import { Point } from '@blocksuite/global/gfx'; -import { throttle } from '@blocksuite/global/utils'; import type { BlockModel, ExtensionType } from '@blocksuite/store'; import { computed, signal } from '@preact/signals-core'; +import throttle from 'lodash-es/throttle'; import { DropIndicator } from './drop-indicator'; diff --git a/blocksuite/affine/shared/package.json b/blocksuite/affine/shared/package.json index 78200474ad..1c142a0987 100644 --- a/blocksuite/affine/shared/package.json +++ b/blocksuite/affine/shared/package.json @@ -24,12 +24,12 @@ "@preact/signals-core": "^1.8.0", "@toeverything/theme": "^1.1.12", "@types/hast": "^3.0.4", + "@types/lodash-es": "^4.17.12", "@types/mdast": "^4.0.4", "dompurify": "^3.2.4", "fractional-indexing": "^3.2.0", "lit": "^3.2.0", - "lodash.clonedeep": "^4.5.0", - "lodash.mergewith": "^4.6.2", + "lodash-es": "^4.17.21", "mdast-util-gfm-autolink-literal": "^2.0.1", "mdast-util-gfm-footnote": "^2.0.0", "mdast-util-gfm-strikethrough": "^2.0.0", @@ -72,8 +72,6 @@ "!dist/__tests__" ], "devDependencies": { - "@types/lodash.clonedeep": "^4.5.9", - "@types/lodash.mergewith": "^4", "vitest": "3.0.7" }, "version": "0.20.0" diff --git a/blocksuite/affine/shared/src/services/edit-props-store.ts b/blocksuite/affine/shared/src/services/edit-props-store.ts index d05f204c8c..e8d9d270a3 100644 --- a/blocksuite/affine/shared/src/services/edit-props-store.ts +++ b/blocksuite/affine/shared/src/services/edit-props-store.ts @@ -7,8 +7,8 @@ import { Slot, } from '@blocksuite/global/utils'; import { computed, type Signal, signal } from '@preact/signals-core'; -import clonedeep from 'lodash.clonedeep'; -import mergeWith from 'lodash.mergewith'; +import clonedeep from 'lodash-es/cloneDeep'; +import mergeWith from 'lodash-es/mergeWith'; import * as Y from 'yjs'; import { z } from 'zod'; diff --git a/blocksuite/affine/shared/src/utils/reference.ts b/blocksuite/affine/shared/src/utils/reference.ts index f29b8b7fb9..93d369b9d9 100644 --- a/blocksuite/affine/shared/src/utils/reference.ts +++ b/blocksuite/affine/shared/src/utils/reference.ts @@ -1,5 +1,5 @@ import type { ReferenceInfo } from '@blocksuite/affine-model'; -import cloneDeep from 'lodash.clonedeep'; +import cloneDeep from 'lodash-es/cloneDeep'; /** * Clones reference info. diff --git a/blocksuite/affine/shared/src/viewport-renderer/viewport-renderer.ts b/blocksuite/affine/shared/src/viewport-renderer/viewport-renderer.ts index c20be8cc58..3b46f599dc 100644 --- a/blocksuite/affine/shared/src/viewport-renderer/viewport-renderer.ts +++ b/blocksuite/affine/shared/src/viewport-renderer/viewport-renderer.ts @@ -8,7 +8,8 @@ import { type GfxViewportElement, } from '@blocksuite/block-std/gfx'; import type { Container, ServiceIdentifier } from '@blocksuite/global/di'; -import { debounce, DisposableGroup } from '@blocksuite/global/utils'; +import { DisposableGroup } from '@blocksuite/global/utils'; +import debounce from 'lodash-es/debounce'; import { debugLog, @@ -144,13 +145,9 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher { } } - debouncedRefresh = debounce( - () => { - this.refresh().catch(console.error); - }, - debounceTime, - { leading: false, trailing: true } - ); + debouncedRefresh = debounce(() => { + this.refresh().catch(console.error); + }, debounceTime); invalidate() { this.layoutVersion++; diff --git a/blocksuite/affine/widget-drag-handle/package.json b/blocksuite/affine/widget-drag-handle/package.json index f93d60b62b..c0e0a47c14 100644 --- a/blocksuite/affine/widget-drag-handle/package.json +++ b/blocksuite/affine/widget-drag-handle/package.json @@ -30,7 +30,9 @@ "@lit/context": "^1.1.2", "@preact/signals-core": "^1.8.0", "@toeverything/theme": "^1.1.12", + "@types/lodash-es": "^4.17.12", "lit": "^3.2.0", + "lodash-es": "^4.17.21", "minimatch": "^10.0.1", "zod": "^3.23.8" }, diff --git a/blocksuite/affine/widget-drag-handle/src/watchers/pointer-event-watcher.ts b/blocksuite/affine/widget-drag-handle/src/watchers/pointer-event-watcher.ts index fda2548ce9..f3b1e95315 100644 --- a/blocksuite/affine/widget-drag-handle/src/watchers/pointer-event-watcher.ts +++ b/blocksuite/affine/widget-drag-handle/src/watchers/pointer-event-watcher.ts @@ -8,8 +8,8 @@ import { } from '@blocksuite/block-std'; import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; import { Point } from '@blocksuite/global/gfx'; -import { throttle } from '@blocksuite/global/utils'; import { computed } from '@preact/signals-core'; +import throttle from 'lodash-es/throttle'; import { DRAG_HANDLE_CONTAINER_WIDTH, @@ -34,6 +34,8 @@ import { * Used to control the drag handle visibility in page mode */ export class PointerEventWatcher { + private _isPointerDown = false; + private get _gfx() { return this.widget.std.get(GfxControllerIdentifier); } @@ -220,6 +222,7 @@ export class PointerEventWatcher { private readonly _throttledPointerMoveHandler = throttle( ctx => { + if (this._isPointerDown) return; if ( this.widget.doc.readonly || this.widget.dragging || @@ -231,6 +234,10 @@ export class PointerEventWatcher { if (this.widget.isGfxDragHandleVisible) return; const state = ctx.get('pointerState'); + + // When pointer is moving, should do nothing + if (state.delta.x !== 0 && state.delta.y !== 0) return; + const { target } = state.raw; const element = captureEventTarget(target); // When pointer not on block or on dragging, should do nothing @@ -330,6 +337,14 @@ export class PointerEventWatcher { } }; + private readonly _pointerDownHandler: UIEventHandler = () => { + this._isPointerDown = true; + }; + + private readonly _pointerUpHandler: UIEventHandler = () => { + this._isPointerDown = false; + }; + constructor(readonly widget: AffineDragHandleWidget) {} reset() { @@ -341,5 +356,7 @@ export class PointerEventWatcher { this.widget.handleEvent('click', this._clickHandler); this.widget.handleEvent('pointerMove', this._throttledPointerMoveHandler); this.widget.handleEvent('pointerOut', this._pointerOutHandler); + this.widget.handleEvent('pointerDown', this._pointerDownHandler); + this.widget.handleEvent('pointerUp', this._pointerUpHandler); } } diff --git a/blocksuite/affine/widget-remote-selection/package.json b/blocksuite/affine/widget-remote-selection/package.json index e6264f906e..89c5dc6e7c 100644 --- a/blocksuite/affine/widget-remote-selection/package.json +++ b/blocksuite/affine/widget-remote-selection/package.json @@ -22,7 +22,9 @@ "@blocksuite/icons": "^2.2.3", "@preact/signals-core": "^1.8.0", "@toeverything/theme": "^1.1.12", - "lit": "^3.2.0" + "@types/lodash-es": "^4.17.12", + "lit": "^3.2.0", + "lodash-es": "^4.17.21" }, "exports": { ".": "./src/index.ts", diff --git a/blocksuite/affine/widget-remote-selection/src/doc/doc-remote-selection.ts b/blocksuite/affine/widget-remote-selection/src/doc/doc-remote-selection.ts index 3cf1bdc063..aa13530a4a 100644 --- a/blocksuite/affine/widget-remote-selection/src/doc/doc-remote-selection.ts +++ b/blocksuite/affine/widget-remote-selection/src/doc/doc-remote-selection.ts @@ -15,12 +15,12 @@ import { WidgetComponent, } from '@blocksuite/block-std'; import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; -import { throttle } from '@blocksuite/global/utils'; import type { BaseSelection, UserInfo } from '@blocksuite/store'; import { computed, effect } from '@preact/signals-core'; import { css, html, nothing, type PropertyValues } from 'lit'; import { state } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; +import throttle from 'lodash-es/throttle'; import { RemoteColorManager } from '../manager/remote-color-manager'; import type { DocRemoteSelectionConfig } from './config'; diff --git a/blocksuite/framework/block-std/package.json b/blocksuite/framework/block-std/package.json index 9f59fa03b7..8e46a5b4f4 100644 --- a/blocksuite/framework/block-std/package.json +++ b/blocksuite/framework/block-std/package.json @@ -23,10 +23,12 @@ "@lit/context": "^1.1.2", "@preact/signals-core": "^1.8.0", "@types/hast": "^3.0.4", + "@types/lodash-es": "^4.17.12", "dompurify": "^3.2.4", "fractional-indexing": "^3.2.0", "lib0": "^0.2.97", "lit": "^3.2.0", + "lodash-es": "^4.17.21", "lz-string": "^1.5.0", "rehype-parse": "^9.0.0", "unified": "^11.0.5", diff --git a/blocksuite/framework/block-std/src/gfx/viewport.ts b/blocksuite/framework/block-std/src/gfx/viewport.ts index e41054946c..0f2adf1d8d 100644 --- a/blocksuite/framework/block-std/src/gfx/viewport.ts +++ b/blocksuite/framework/block-std/src/gfx/viewport.ts @@ -5,8 +5,9 @@ import { type IVec, Vec, } from '@blocksuite/global/gfx'; -import { debounce, Slot } from '@blocksuite/global/utils'; +import { Slot } from '@blocksuite/global/utils'; import { signal } from '@preact/signals-core'; +import debounce from 'lodash-es/debounce'; import type { GfxViewportElement } from '.'; @@ -73,21 +74,13 @@ export class Viewport { ZOOM_MIN = ZOOM_MIN; - private readonly _resetZooming = debounce( - () => { - this.zooming$.value = false; - }, - 200, - { leading: false, trailing: true } - ); + private readonly _resetZooming = debounce(() => { + this.zooming$.value = false; + }, 200); - private readonly _resetPanning = debounce( - () => { - this.panning$.value = false; - }, - 200, - { leading: false, trailing: true } - ); + private readonly _resetPanning = debounce(() => { + this.panning$.value = false; + }, 200); constructor() { this.elementReady.once(el => (this._element = el)); diff --git a/blocksuite/framework/block-std/src/range/range-binding.ts b/blocksuite/framework/block-std/src/range/range-binding.ts index f0393d151b..f0d7ecbffe 100644 --- a/blocksuite/framework/block-std/src/range/range-binding.ts +++ b/blocksuite/framework/block-std/src/range/range-binding.ts @@ -1,5 +1,5 @@ -import { throttle } from '@blocksuite/global/utils'; import type { BaseSelection, BlockModel } from '@blocksuite/store'; +import throttle from 'lodash-es/throttle'; import { TextSelection } from '../selection/index.js'; import type { BlockComponent } from '../view/element/block-component.js'; @@ -7,7 +7,6 @@ import { BLOCK_ID_ATTR } from '../view/index.js'; import { isActiveInEditor } from './active.js'; import { RANGE_SYNC_EXCLUDE_ATTR } from './consts.js'; import type { RangeManager } from './range-manager.js'; - /** * Two-way binding between native range and text selection */ diff --git a/blocksuite/framework/global/src/utils/function.ts b/blocksuite/framework/global/src/utils/function.ts index 19d275acc1..068622ac25 100644 --- a/blocksuite/framework/global/src/utils/function.ts +++ b/blocksuite/framework/global/src/utils/function.ts @@ -23,96 +23,6 @@ export function noop(_?: unknown) { return; } -/** - * @example - * ```ts - * const log = (message: string) => console.log(`[${new Date().toISOString()}] ${message}`); - * - * const throttledLog = throttle(log, 1000); - * - * throttledLog("Hello, world!"); - * throttledLog("Hello, world!"); - * throttledLog("Hello, world!"); - * throttledLog("Hello, world!"); - * throttledLog("Hello, world!"); - * ``` - */ - -export function throttle any>( - fn: T, - limit: number, - options?: { leading?: boolean; trailing?: boolean } -): T; -export function throttle< - Args extends unknown[], - T extends (...args: Args) => void, ->( - fn: (...args: Args) => void, - limit: number, - options?: { leading?: boolean; trailing?: boolean } -): T; -export function throttle< - Args extends unknown[], - T extends (this: unknown, ...args: Args) => void, ->(fn: T, limit: number, { leading = true, trailing = true } = {}): T { - let timer: ReturnType | null = null; - let lastArgs: Args | null = null; - - const setTimer = () => { - if (lastArgs && trailing) { - fn(...lastArgs); - lastArgs = null; - timer = setTimeout(setTimer, limit); - } else { - timer = null; - } - }; - - return function (this: unknown, ...args: Parameters) { - if (timer) { - // in throttle - lastArgs = args; - return; - } - // Execute the function on the leading edge - if (leading) { - fn.apply(this, args); - } - timer = setTimeout(setTimer, limit); - } as T; -} - -export const debounce = void>( - fn: T, - limit: number, - { leading = true, trailing = true } = {} -): T => { - let timer: ReturnType | null = null; - let lastArgs: Parameters | null = null; - - // eslint-disable-next-line sonarjs/no-identical-functions - const setTimer = () => { - if (lastArgs && trailing) { - fn(...lastArgs); - lastArgs = null; - timer = setTimeout(setTimer, limit); - } else { - timer = null; - } - }; - - return function (...args: Parameters) { - if (timer) { - lastArgs = args; - clearTimeout(timer); - } - if (leading && !timer) { - fn(...args); - } - timer = setTimeout(setTimer, limit); - } as T; -}; - export async function nextTick() { // @ts-expect-error check window.scheduler if ('scheduler' in window && 'yield' in window.scheduler) { diff --git a/packages/frontend/component/src/ui/masonry/masonry.tsx b/packages/frontend/component/src/ui/masonry/masonry.tsx index 17b95ec4de..cd501e3ec6 100644 --- a/packages/frontend/component/src/ui/masonry/masonry.tsx +++ b/packages/frontend/component/src/ui/masonry/masonry.tsx @@ -1,5 +1,5 @@ -import { throttle } from '@blocksuite/affine/global/utils'; import clsx from 'clsx'; +import throttle from 'lodash-es/throttle'; import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { observeResize } from '../../utils'; diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/components/doc-chip.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/components/doc-chip.ts index d9c54a48ac..a6994e2800 100644 --- a/packages/frontend/core/src/blocksuite/ai/chat-panel/components/doc-chip.ts +++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/components/doc-chip.ts @@ -2,14 +2,11 @@ import { type EditorHost, ShadowlessElement, } from '@blocksuite/affine/block-std'; -import { - SignalWatcher, - throttle, - WithDisposable, -} from '@blocksuite/affine/global/utils'; +import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/utils'; import { Signal } from '@preact/signals-core'; import { html, type PropertyValues } from 'lit'; import { property } from 'lit/decorators.js'; +import throttle from 'lodash-es/throttle'; import { extractMarkdownFromDoc } from '../../utils/extract'; import type { DocDisplayConfig } from '../chat-config'; diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-scrollable-text-renderer.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-scrollable-text-renderer.ts index efa6d54fd0..29efed7c82 100644 --- a/packages/frontend/core/src/blocksuite/ai/components/ai-scrollable-text-renderer.ts +++ b/packages/frontend/core/src/blocksuite/ai/components/ai-scrollable-text-renderer.ts @@ -3,10 +3,11 @@ import { ShadowlessElement, } from '@blocksuite/affine/block-std'; import { scrollbarStyle } from '@blocksuite/affine/blocks'; -import { throttle, WithDisposable } from '@blocksuite/affine/global/utils'; +import { WithDisposable } from '@blocksuite/affine/global/utils'; import type { PropertyValues } from 'lit'; import { css, html } from 'lit'; import { property, query } from 'lit/decorators.js'; +import throttle from 'lodash-es/throttle'; import type { AffineAIPanelState, diff --git a/yarn.lock b/yarn.lock index 53678856f5..d54a6cf4d1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2411,7 +2411,9 @@ __metadata: "@lit/context": "npm:^1.1.2" "@preact/signals-core": "npm:^1.8.0" "@toeverything/theme": "npm:^1.1.12" + "@types/lodash-es": "npm:^4.17.12" lit: "npm:^3.2.0" + lodash-es: "npm:^4.17.21" minimatch: "npm:^10.0.1" vitest: "npm:3.0.7" yjs: "npm:^13.6.21" @@ -2710,14 +2712,14 @@ __metadata: "@toeverything/theme": "npm:^1.1.12" "@types/hast": "npm:^3.0.4" "@types/katex": "npm:^0.16.7" - "@types/lodash.clonedeep": "npm:^4.5.9" + "@types/lodash-es": "npm:^4.17.12" "@types/mdast": "npm:^4.0.4" collapse-white-space: "npm:^2.1.0" date-fns: "npm:^4.0.0" katex: "npm:^0.16.11" lit: "npm:^3.2.0" lit-html: "npm:^3.2.1" - lodash.clonedeep: "npm:^4.5.0" + lodash-es: "npm:^4.17.21" remark-math: "npm:^6.0.0" shiki: "npm:^3.0.0" yjs: "npm:^13.6.21" @@ -2803,14 +2805,12 @@ __metadata: "@preact/signals-core": "npm:^1.8.0" "@toeverything/theme": "npm:^1.1.12" "@types/hast": "npm:^3.0.4" - "@types/lodash.clonedeep": "npm:^4.5.9" - "@types/lodash.mergewith": "npm:^4" + "@types/lodash-es": "npm:^4.17.12" "@types/mdast": "npm:^4.0.4" dompurify: "npm:^3.2.4" fractional-indexing: "npm:^3.2.0" lit: "npm:^3.2.0" - lodash.clonedeep: "npm:^4.5.0" - lodash.mergewith: "npm:^4.6.2" + lodash-es: "npm:^4.17.21" mdast-util-gfm-autolink-literal: "npm:^2.0.1" mdast-util-gfm-footnote: "npm:^2.0.0" mdast-util-gfm-strikethrough: "npm:^2.0.0" @@ -2857,7 +2857,9 @@ __metadata: "@lit/context": "npm:^1.1.2" "@preact/signals-core": "npm:^1.8.0" "@toeverything/theme": "npm:^1.1.12" + "@types/lodash-es": "npm:^4.17.12" lit: "npm:^3.2.0" + lodash-es: "npm:^4.17.21" minimatch: "npm:^10.0.1" zod: "npm:^3.23.8" languageName: unknown @@ -2910,7 +2912,9 @@ __metadata: "@blocksuite/icons": "npm:^2.2.3" "@preact/signals-core": "npm:^1.8.0" "@toeverything/theme": "npm:^1.1.12" + "@types/lodash-es": "npm:^4.17.12" lit: "npm:^3.2.0" + lodash-es: "npm:^4.17.21" languageName: unknown linkType: soft @@ -2954,10 +2958,12 @@ __metadata: "@lit/context": "npm:^1.1.2" "@preact/signals-core": "npm:^1.8.0" "@types/hast": "npm:^3.0.4" + "@types/lodash-es": "npm:^4.17.12" dompurify: "npm:^3.2.4" fractional-indexing: "npm:^3.2.0" lib0: "npm:^0.2.97" lit: "npm:^3.2.0" + lodash-es: "npm:^4.17.21" lz-string: "npm:^1.5.0" rehype-parse: "npm:^9.0.0" unified: "npm:^11.0.5" @@ -14146,15 +14152,6 @@ __metadata: languageName: node linkType: hard -"@types/lodash.mergewith@npm:^4": - version: 4.6.9 - resolution: "@types/lodash.mergewith@npm:4.6.9" - dependencies: - "@types/lodash": "npm:*" - checksum: 10/c5a67e83040103decfd37090127118f5758773d0ce2a1756d442b371721737c7752f48f62544cc970f44abec8471f260cc4c844e1a4fdef8b76cb96bdec8a595 - languageName: node - linkType: hard - "@types/lodash@npm:*": version: 4.17.15 resolution: "@types/lodash@npm:4.17.15"