Prevent restored file trees from crashing desktop startup (#2595)
* fix(explorer): prevent persisted trees from crashing startup Persisted expansion restored every directory and recursively flattened the resulting tree during render. Limit automatic restoration to five rendered directory levels and flatten iteratively so deep or broad workspaces cannot exhaust the JavaScript stack. * fix(explorer): preserve expansion changes during restore Reconcile completed restoration against the current expansion set atomically so folder interactions made while directory requests are in flight are not overwritten. * fix(explorer): show hidden files before restoration * fix(explorer): apply directory toggles atomically
This commit is contained in:
Mohamed Boudra
@@ -0,0 +1,197 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import type { ExplorerEntry } from "@/stores/session-store";
|
||||
import {
|
||||
MAX_AUTO_EXPANDED_DIRECTORY_DEPTH,
|
||||
flattenExplorerTree,
|
||||
reconcileRestoredExpandedPaths,
|
||||
restoreExpandedDirectories,
|
||||
setExpandedDirectoryPath,
|
||||
showHiddenFilesAndRestoreExpandedDirectories,
|
||||
} from "./tree";
|
||||
|
||||
function makeDirectoryEntry(name: string, path: string): ExplorerEntry {
|
||||
return {
|
||||
name,
|
||||
path,
|
||||
kind: "directory",
|
||||
size: 0,
|
||||
modifiedAt: "2026-01-01T00:00:00.000Z",
|
||||
};
|
||||
}
|
||||
|
||||
describe("file explorer tree", () => {
|
||||
it("flattens a deeply expanded tree without consuming the call stack", () => {
|
||||
const depth = 10_000;
|
||||
const directories = new Map<string, { path: string; entries: ExplorerEntry[] }>();
|
||||
const expandedPaths = new Set<string>(["."]);
|
||||
let parentPath = ".";
|
||||
|
||||
for (let index = 1; index <= depth; index += 1) {
|
||||
const childPath = `directory-${index}`;
|
||||
directories.set(parentPath, {
|
||||
path: parentPath,
|
||||
entries: [makeDirectoryEntry(childPath, childPath)],
|
||||
});
|
||||
expandedPaths.add(childPath);
|
||||
parentPath = childPath;
|
||||
}
|
||||
directories.set(parentPath, { path: parentPath, entries: [] });
|
||||
|
||||
const rows = flattenExplorerTree({
|
||||
directories,
|
||||
expandedPaths,
|
||||
sortOption: "name",
|
||||
showHiddenFiles: true,
|
||||
});
|
||||
|
||||
expect(rows).toHaveLength(depth);
|
||||
expect(rows[0]).toEqual({
|
||||
entry: makeDirectoryEntry("directory-1", "directory-1"),
|
||||
depth: 0,
|
||||
});
|
||||
expect(rows.at(-1)).toEqual({
|
||||
entry: makeDirectoryEntry(`directory-${depth}`, `directory-${depth}`),
|
||||
depth: depth - 1,
|
||||
});
|
||||
});
|
||||
|
||||
it("flattens a large expanded directory without spreading its rows into the parent", () => {
|
||||
const fileCount = 150_000;
|
||||
const files = Array.from(
|
||||
{ length: fileCount },
|
||||
(_, index): ExplorerEntry => ({
|
||||
name: `file-${index.toString().padStart(6, "0")}`,
|
||||
path: `generated/file-${index}`,
|
||||
kind: "file",
|
||||
size: index,
|
||||
modifiedAt: "2026-01-01T00:00:00.000Z",
|
||||
}),
|
||||
);
|
||||
const child = makeDirectoryEntry("generated", "generated");
|
||||
const directories = new Map([
|
||||
[".", { path: ".", entries: [child] }],
|
||||
["generated", { path: "generated", entries: files }],
|
||||
]);
|
||||
|
||||
const rows = flattenExplorerTree({
|
||||
directories,
|
||||
expandedPaths: new Set([".", "generated"]),
|
||||
sortOption: "name",
|
||||
showHiddenFiles: true,
|
||||
});
|
||||
|
||||
expect(rows).toHaveLength(fileCount + 1);
|
||||
expect(rows[0]).toEqual({ entry: child, depth: 0 });
|
||||
expect(rows.at(-1)).toEqual({ entry: files[fileCount - 1], depth: 1 });
|
||||
});
|
||||
|
||||
it("restores five rendered directory levels rather than counting path segments", async () => {
|
||||
const paths = [
|
||||
"generated/cache/level-1",
|
||||
"generated/cache/level-1/level-2",
|
||||
"generated/cache/level-1/level-2/level-3",
|
||||
"generated/cache/level-1/level-2/level-3/level-4",
|
||||
"generated/cache/level-1/level-2/level-3/level-4/level-5",
|
||||
"generated/cache/level-1/level-2/level-3/level-4/level-5/level-6",
|
||||
];
|
||||
const directories = new Map<string, { path: string; entries: ExplorerEntry[] }>();
|
||||
const rootDirectory = {
|
||||
path: ".",
|
||||
entries: [makeDirectoryEntry("level-1", paths[0])],
|
||||
};
|
||||
directories.set(".", rootDirectory);
|
||||
for (let index = 0; index < paths.length - 1; index += 1) {
|
||||
directories.set(paths[index], {
|
||||
path: paths[index],
|
||||
entries: [makeDirectoryEntry(`level-${index + 2}`, paths[index + 1])],
|
||||
});
|
||||
}
|
||||
|
||||
const requestedPaths: string[] = [];
|
||||
const expandedPaths = await restoreExpandedDirectories({
|
||||
rootDirectory,
|
||||
persistedExpandedPaths: new Set(paths),
|
||||
showHiddenFiles: true,
|
||||
requestDirectoryListing: async (path) => {
|
||||
requestedPaths.push(path);
|
||||
return directories.get(path) ?? null;
|
||||
},
|
||||
});
|
||||
|
||||
expect(MAX_AUTO_EXPANDED_DIRECTORY_DEPTH).toBe(5);
|
||||
expect(requestedPaths).toEqual(paths.slice(0, 5));
|
||||
expect(expandedPaths).toEqual([".", ...paths.slice(0, 5)]);
|
||||
});
|
||||
|
||||
it("does not restore persisted descendants beneath a collapsed rendered directory", async () => {
|
||||
const rootDirectory = {
|
||||
path: ".",
|
||||
entries: [makeDirectoryEntry("parent", "parent")],
|
||||
};
|
||||
const requestedPaths: string[] = [];
|
||||
|
||||
const expandedPaths = await restoreExpandedDirectories({
|
||||
rootDirectory,
|
||||
persistedExpandedPaths: new Set(["parent/child", "parent/child/grandchild"]),
|
||||
showHiddenFiles: true,
|
||||
requestDirectoryListing: async (path) => {
|
||||
requestedPaths.push(path);
|
||||
return null;
|
||||
},
|
||||
});
|
||||
|
||||
expect(requestedPaths).toEqual([]);
|
||||
expect(expandedPaths).toEqual(["."]);
|
||||
});
|
||||
|
||||
it("preserves expansion changes made while persisted directories are restoring", () => {
|
||||
const paths = reconcileRestoredExpandedPaths({
|
||||
persistedExpandedPaths: new Set([".", "parent", "parent/child"]),
|
||||
currentExpandedPaths: new Set([".", "parent/child", "manual"]),
|
||||
restoredExpandedPaths: [".", "parent"],
|
||||
});
|
||||
|
||||
expect(paths).toEqual([".", "manual"]);
|
||||
});
|
||||
|
||||
it("applies a directory click to the latest restored expansion paths", () => {
|
||||
const expanded = setExpandedDirectoryPath({
|
||||
currentExpandedPaths: [".", "restored"],
|
||||
directoryPath: "manual",
|
||||
expanded: true,
|
||||
});
|
||||
const collapsed = setExpandedDirectoryPath({
|
||||
currentExpandedPaths: expanded,
|
||||
directoryPath: "manual",
|
||||
expanded: false,
|
||||
});
|
||||
|
||||
expect(expanded).toEqual([".", "restored", "manual"]);
|
||||
expect(collapsed).toEqual([".", "restored"]);
|
||||
});
|
||||
|
||||
it("shows hidden files before waiting for expanded directories to restore", async () => {
|
||||
const rootDirectory = {
|
||||
path: ".",
|
||||
entries: [makeDirectoryEntry(".hidden", ".hidden")],
|
||||
};
|
||||
let resolveDirectory!: (directory: { path: string; entries: ExplorerEntry[] }) => void;
|
||||
const directoryListing = new Promise<{ path: string; entries: ExplorerEntry[] }>((resolve) => {
|
||||
resolveDirectory = resolve;
|
||||
});
|
||||
let hiddenFilesAreShown = false;
|
||||
|
||||
const restoration = showHiddenFilesAndRestoreExpandedDirectories({
|
||||
rootDirectory,
|
||||
persistedExpandedPaths: new Set([".hidden"]),
|
||||
showHiddenFiles: () => {
|
||||
hiddenFilesAreShown = true;
|
||||
},
|
||||
requestDirectoryListing: () => directoryListing,
|
||||
});
|
||||
|
||||
expect(hiddenFilesAreShown).toBe(true);
|
||||
resolveDirectory({ path: ".hidden", entries: [] });
|
||||
await expect(restoration).resolves.toEqual([".", ".hidden"]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,203 @@
|
||||
import type { ExplorerDirectory, ExplorerEntry } from "@/stores/session-store";
|
||||
import type { SortOption } from "@/stores/panel-store/state";
|
||||
import { filterVisibleExplorerEntries } from "./visibility";
|
||||
|
||||
export const MAX_AUTO_EXPANDED_DIRECTORY_DEPTH = 5;
|
||||
|
||||
export interface ExplorerTreeRow {
|
||||
entry: ExplorerEntry;
|
||||
depth: number;
|
||||
}
|
||||
|
||||
interface FlattenExplorerTreeInput {
|
||||
directories: ReadonlyMap<string, ExplorerDirectory>;
|
||||
expandedPaths: ReadonlySet<string>;
|
||||
sortOption: SortOption;
|
||||
showHiddenFiles: boolean;
|
||||
}
|
||||
|
||||
interface RestoreExpandedDirectoriesInput {
|
||||
rootDirectory: ExplorerDirectory;
|
||||
persistedExpandedPaths: ReadonlySet<string>;
|
||||
showHiddenFiles: boolean;
|
||||
requestDirectoryListing: (path: string) => Promise<ExplorerDirectory | null>;
|
||||
}
|
||||
|
||||
interface ShowHiddenFilesAndRestoreExpandedDirectoriesInput extends Omit<
|
||||
RestoreExpandedDirectoriesInput,
|
||||
"showHiddenFiles"
|
||||
> {
|
||||
showHiddenFiles: () => void;
|
||||
}
|
||||
|
||||
interface ReconcileRestoredExpandedPathsInput {
|
||||
persistedExpandedPaths: ReadonlySet<string>;
|
||||
currentExpandedPaths: ReadonlySet<string>;
|
||||
restoredExpandedPaths: string[];
|
||||
}
|
||||
|
||||
interface SetExpandedDirectoryPathInput {
|
||||
currentExpandedPaths: readonly string[];
|
||||
directoryPath: string;
|
||||
expanded: boolean;
|
||||
}
|
||||
|
||||
export function flattenExplorerTree({
|
||||
directories,
|
||||
expandedPaths,
|
||||
sortOption,
|
||||
showHiddenFiles,
|
||||
}: FlattenExplorerTreeInput): ExplorerTreeRow[] {
|
||||
const root = directories.get(".");
|
||||
if (!root) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const rows: ExplorerTreeRow[] = [];
|
||||
const pending = rowsForDirectory(root, 0, sortOption, showHiddenFiles).toReversed();
|
||||
|
||||
while (pending.length > 0) {
|
||||
const row = pending.pop();
|
||||
if (!row) {
|
||||
break;
|
||||
}
|
||||
rows.push(row);
|
||||
|
||||
const entry = row.entry;
|
||||
if (entry.kind !== "directory" || !expandedPaths.has(entry.path)) {
|
||||
continue;
|
||||
}
|
||||
const childDirectory = directories.get(entry.path);
|
||||
if (!childDirectory) {
|
||||
continue;
|
||||
}
|
||||
const childRows = rowsForDirectory(childDirectory, row.depth + 1, sortOption, showHiddenFiles);
|
||||
for (let index = childRows.length - 1; index >= 0; index -= 1) {
|
||||
pending.push(childRows[index]);
|
||||
}
|
||||
}
|
||||
|
||||
return rows;
|
||||
}
|
||||
|
||||
export async function restoreExpandedDirectories({
|
||||
rootDirectory,
|
||||
persistedExpandedPaths,
|
||||
showHiddenFiles,
|
||||
requestDirectoryListing,
|
||||
}: RestoreExpandedDirectoriesInput): Promise<string[]> {
|
||||
const restoredPaths = ["."];
|
||||
const restoredPathSet = new Set(restoredPaths);
|
||||
let parentDirectories = [rootDirectory];
|
||||
|
||||
for (let depth = 1; depth <= MAX_AUTO_EXPANDED_DIRECTORY_DEPTH; depth += 1) {
|
||||
const pathsToRequest: string[] = [];
|
||||
for (const directory of parentDirectories) {
|
||||
const entries = filterVisibleExplorerEntries(directory.entries, showHiddenFiles);
|
||||
for (const entry of entries) {
|
||||
const isPersistedExpandedDirectory =
|
||||
entry.kind === "directory" && persistedExpandedPaths.has(entry.path);
|
||||
if (isPersistedExpandedDirectory && !restoredPathSet.has(entry.path)) {
|
||||
pathsToRequest.push(entry.path);
|
||||
restoredPathSet.add(entry.path);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (pathsToRequest.length === 0) {
|
||||
break;
|
||||
}
|
||||
|
||||
const requestedDirectories = await Promise.all(
|
||||
pathsToRequest.map((path) => requestDirectoryListing(path)),
|
||||
);
|
||||
parentDirectories = [];
|
||||
for (const directory of requestedDirectories) {
|
||||
if (!directory) {
|
||||
continue;
|
||||
}
|
||||
restoredPaths.push(directory.path);
|
||||
parentDirectories.push(directory);
|
||||
}
|
||||
}
|
||||
|
||||
return restoredPaths;
|
||||
}
|
||||
|
||||
export function showHiddenFilesAndRestoreExpandedDirectories({
|
||||
rootDirectory,
|
||||
persistedExpandedPaths,
|
||||
showHiddenFiles,
|
||||
requestDirectoryListing,
|
||||
}: ShowHiddenFilesAndRestoreExpandedDirectoriesInput): Promise<string[]> {
|
||||
showHiddenFiles();
|
||||
return restoreExpandedDirectories({
|
||||
rootDirectory,
|
||||
persistedExpandedPaths,
|
||||
showHiddenFiles: true,
|
||||
requestDirectoryListing,
|
||||
});
|
||||
}
|
||||
|
||||
export function reconcileRestoredExpandedPaths({
|
||||
persistedExpandedPaths,
|
||||
currentExpandedPaths,
|
||||
restoredExpandedPaths,
|
||||
}: ReconcileRestoredExpandedPathsInput): string[] {
|
||||
const reconciledPaths = new Set(restoredExpandedPaths);
|
||||
|
||||
for (const path of persistedExpandedPaths) {
|
||||
if (!currentExpandedPaths.has(path)) {
|
||||
reconciledPaths.delete(path);
|
||||
}
|
||||
}
|
||||
for (const path of currentExpandedPaths) {
|
||||
if (!persistedExpandedPaths.has(path)) {
|
||||
reconciledPaths.add(path);
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(reconciledPaths);
|
||||
}
|
||||
|
||||
export function setExpandedDirectoryPath({
|
||||
currentExpandedPaths,
|
||||
directoryPath,
|
||||
expanded,
|
||||
}: SetExpandedDirectoryPathInput): string[] {
|
||||
const nextPaths = new Set(currentExpandedPaths);
|
||||
if (expanded) {
|
||||
nextPaths.add(directoryPath);
|
||||
} else {
|
||||
nextPaths.delete(directoryPath);
|
||||
}
|
||||
return Array.from(nextPaths);
|
||||
}
|
||||
|
||||
function rowsForDirectory(
|
||||
directory: ExplorerDirectory,
|
||||
depth: number,
|
||||
sortOption: SortOption,
|
||||
showHiddenFiles: boolean,
|
||||
): ExplorerTreeRow[] {
|
||||
const visibleEntries = filterVisibleExplorerEntries(directory.entries, showHiddenFiles);
|
||||
const sortedEntries = sortExplorerEntries(visibleEntries, sortOption);
|
||||
return sortedEntries.map((entry) => ({ entry, depth }));
|
||||
}
|
||||
|
||||
function sortExplorerEntries(entries: ExplorerEntry[], sortOption: SortOption): ExplorerEntry[] {
|
||||
const sorted = [...entries];
|
||||
sorted.sort((a, b) => {
|
||||
if (a.kind !== b.kind) {
|
||||
return a.kind === "directory" ? -1 : 1;
|
||||
}
|
||||
switch (sortOption) {
|
||||
case "name":
|
||||
return a.name.localeCompare(b.name);
|
||||
case "modified":
|
||||
return new Date(b.modifiedAt).getTime() - new Date(a.modifiedAt).getTime();
|
||||
case "size":
|
||||
return b.size - a.size;
|
||||
}
|
||||
});
|
||||
return sorted;
|
||||
}
|
||||
Reference in New Issue
Block a user