mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-04-27 15:17:38 +00:00
Remove unnecessary memoization from clickable-path component
- The formatPathForDisplay function is extremely cheap (single regex replace) - LitElement already optimizes renders efficiently - Removing memoization reduces code complexity and memory overhead - The performance difference is negligible for such a simple operation
This commit is contained in:
parent
f90478b74a
commit
039f27112e
1 changed files with 3 additions and 11 deletions
|
|
@ -8,7 +8,7 @@
|
||||||
* @fires path-copy-failed - When path copy fails (detail: { path: string, error: string })
|
* @fires path-copy-failed - When path copy fails (detail: { path: string, error: string })
|
||||||
*/
|
*/
|
||||||
import { html, LitElement } from 'lit';
|
import { html, LitElement } from 'lit';
|
||||||
import { customElement, property, state } from 'lit/decorators.js';
|
import { customElement, property } from 'lit/decorators.js';
|
||||||
import { createLogger } from '../utils/logger.js';
|
import { createLogger } from '../utils/logger.js';
|
||||||
import { copyToClipboard, formatPathForDisplay } from '../utils/path-utils.js';
|
import { copyToClipboard, formatPathForDisplay } from '../utils/path-utils.js';
|
||||||
import './copy-icon.js';
|
import './copy-icon.js';
|
||||||
|
|
@ -26,10 +26,6 @@ export class ClickablePath extends LitElement {
|
||||||
@property({ type: String }) class = '';
|
@property({ type: String }) class = '';
|
||||||
@property({ type: Number }) iconSize = 12;
|
@property({ type: Number }) iconSize = 12;
|
||||||
|
|
||||||
// Cache formatted path to avoid re-computation on every render
|
|
||||||
@state() private _formattedPath = '';
|
|
||||||
private _lastPath = '';
|
|
||||||
|
|
||||||
private async handleClick(e: Event) {
|
private async handleClick(e: Event) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
@ -68,11 +64,7 @@ export class ClickablePath extends LitElement {
|
||||||
render() {
|
render() {
|
||||||
if (!this.path) return html``;
|
if (!this.path) return html``;
|
||||||
|
|
||||||
// Only recompute if path has changed
|
const displayPath = formatPathForDisplay(this.path);
|
||||||
if (this.path !== this._lastPath) {
|
|
||||||
this._formattedPath = formatPathForDisplay(this.path);
|
|
||||||
this._lastPath = this.path;
|
|
||||||
}
|
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div
|
<div
|
||||||
|
|
@ -82,7 +74,7 @@ export class ClickablePath extends LitElement {
|
||||||
title="Click to copy path"
|
title="Click to copy path"
|
||||||
@click=${this.handleClick}
|
@click=${this.handleClick}
|
||||||
>
|
>
|
||||||
<span class="truncate">${this._formattedPath}</span>
|
<span class="truncate">${displayPath}</span>
|
||||||
<copy-icon size="${this.iconSize}" class="flex-shrink-0"></copy-icon>
|
<copy-icon size="${this.iconSize}" class="flex-shrink-0"></copy-icon>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue