hugo/bDS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: handling of render in background optimized for UI

Browse Source
This commit is contained in:
hugo
2026-02-22 08:31:33 +01:00
parent 20ef4588bf
commit c9ab47d3de
10 changed files with 303 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/main/ipc/blogHandlers.ts
View File

@@ -125,20 +125,8 @@ export function registerBlogHandlers(safeHandle: SafeHandle): void {
};
};
const coreResult = await taskManager.runTask({
id: `site-render-core-${taskTimestamp}`,
name: 'Render Site Core',
groupId: taskGroupId,
groupName: taskGroupName,
execute: async (onProgress) => {
return blogGenerationEngine.generate({
...baseOptions,
sections: ['core'],
}, (progress, message) => onProgress(progress, message || ''));
},
});
const [singleResult, categoryResult, tagResult, dateResult] = await Promise.all([
const [coreResult, singleResult, categoryResult, tagResult, dateResult] = await Promise.all([
runSectionTask('core', 'Render Site Core', 'site-render-core'),
runSectionTask('single', 'Render Single Posts', 'site-render-single'),
runSectionTask('category', 'Render Category Archives', 'site-render-category'),
runSectionTask('tag', 'Render Tag Archives', 'site-render-tag'),

6
src/renderer/components/Panel/Panel.css
View File

@@ -115,6 +115,12 @@
font-weight: 600;
}
.task-group-meta {
margin-left: auto;
font-size: 11px;
color: var(--vscode-descriptionForeground);
}
.task-item {
display: flex;
align-items: center;

80
src/renderer/components/Panel/Panel.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useAppStore } from '../../store';
import type { TaskProgress } from '../../../main/shared/electronApi';
import { buildTaskEntries, summarizeTaskGroup } from '../../utils/taskGrouping';
import { openEntityTab } from '../../navigation/tabPolicy';
import { useI18n } from '../../i18n';
import './Panel.css';
@@ -36,72 +37,6 @@ function toRelativePath(absolutePath: string, projectPath: string): string {
return normalizedAbsolute;
}
interface GroupedTaskEntry {
kind: 'group';
groupId: string;
groupName: string;
tasks: TaskProgress[];
}
interface SingleTaskEntry {
kind: 'single';
task: TaskProgress;
}
type TaskEntry = GroupedTaskEntry | SingleTaskEntry;
function buildTaskEntries(tasks: TaskProgress[]): TaskEntry[] {
const groupMap = new Map<string, { groupName: string; tasks: TaskProgress[]; firstIndex: number }>();
const singles: Array<{ task: TaskProgress; index: number }> = [];
tasks.forEach((task, index) => {
if (!task.groupId) {
singles.push({ task, index });
return;
}
const existing = groupMap.get(task.groupId);
if (existing) {
existing.tasks.push(task);
return;
}
groupMap.set(task.groupId, {
groupName: task.groupName || task.groupId,
tasks: [task],
firstIndex: index,
});
});
const entries: Array<{ entry: TaskEntry; index: number }> = [];
for (const single of singles) {
entries.push({
index: single.index,
entry: {
kind: 'single',
task: single.task,
},
});
}
for (const [groupId, group] of groupMap.entries()) {
entries.push({
index: group.firstIndex,
entry: {
kind: 'group',
groupId,
groupName: group.groupName,
tasks: group.tasks,
},
});
}
return entries
.sort((a, b) => a.index - b.index)
.map((entry) => entry.entry);
}
export const Panel: React.FC = () => {
const { t, language } = useI18n();
const {
@@ -415,6 +350,16 @@ export const Panel: React.FC = () => {
return renderTaskRow(entry.task);
}
const summary = summarizeTaskGroup(entry.tasks);
const breakdownParts: string[] = [];
if (summary.running > 0) {
breakdownParts.push(`${summary.running} ${t('common.running')}`);
}
if (summary.pending > 0) {
breakdownParts.push(`${summary.pending} ${t('common.pending')}`);
}
const breakdownSuffix = breakdownParts.length > 0 ? ` · ${breakdownParts.join(' · ')}` : '';
const groupMetaText = `${summary.progressPercent}%${breakdownSuffix}`;
const expanded = !collapsedTaskGroups.has(entry.groupId);
return (
<div key={entry.groupId} className="task-group-row">
@@ -423,10 +368,11 @@ export const Panel: React.FC = () => {
className="task-group-toggle"
onClick={() => toggleTaskGroup(entry.groupId)}
aria-expanded={expanded}
aria-label={`${entry.groupName} (${entry.tasks.length})`}
aria-label={`${entry.groupName} (${entry.tasks.length}, ${groupMetaText})`}
>
<span className="task-group-chevron">{expanded ? '▾' : '▸'}</span>
<span className="task-group-title">{entry.groupName} ({entry.tasks.length})</span>
<span className="task-group-meta">{groupMetaText}</span>
</button>
{expanded && entry.tasks.map((task) => renderTaskRow(task, true))}
</div>

6
src/renderer/components/TaskPopup/TaskPopup.css
View File

@@ -139,6 +139,12 @@
font-weight: 600;
}
.task-group-meta {
margin-left: auto;
font-size: 11px;
color: var(--vscode-descriptionForeground);
}
.task-group-child {
padding-left: 28px;
}

80
src/renderer/components/TaskPopup/TaskPopup.tsx
View File

@@ -1,75 +1,10 @@
import React, { useState, useRef, useEffect } from 'react';
import { useAppStore } from '../../store';
import type { TaskProgress } from '../../../main/shared/electronApi';
import { buildTaskEntries, summarizeTaskGroup, type TaskEntry } from '../../utils/taskGrouping';
import { useI18n } from '../../i18n';
import './TaskPopup.css';
interface GroupedTaskEntry {
kind: 'group';
groupId: string;
groupName: string;
tasks: TaskProgress[];
}
interface SingleTaskEntry {
kind: 'single';
task: TaskProgress;
}
type TaskEntry = GroupedTaskEntry | SingleTaskEntry;
function buildTaskEntries(tasks: TaskProgress[]): TaskEntry[] {
const groupMap = new Map<string, { groupName: string; tasks: TaskProgress[]; firstIndex: number }>();
const singles: Array<{ task: TaskProgress; index: number }> = [];
tasks.forEach((task, index) => {
if (!task.groupId) {
singles.push({ task, index });
return;
}
const existing = groupMap.get(task.groupId);
if (existing) {
existing.tasks.push(task);
return;
}
groupMap.set(task.groupId, {
groupName: task.groupName || task.groupId,
tasks: [task],
firstIndex: index,
});
});
const groupedEntries: Array<{ entry: TaskEntry; index: number }> = [];
for (const single of singles) {
groupedEntries.push({
index: single.index,
entry: {
kind: 'single',
task: single.task,
},
});
}
for (const [groupId, group] of groupMap.entries()) {
groupedEntries.push({
index: group.firstIndex,
entry: {
kind: 'group',
groupId,
groupName: group.groupName,
tasks: group.tasks,
},
});
}
return groupedEntries
.sort((a, b) => a.index - b.index)
.map((item) => item.entry);
}
export const TaskPopup: React.FC = () => {
const { t } = useI18n();
const { tasks } = useAppStore();
@@ -192,6 +127,16 @@ export const TaskPopup: React.FC = () => {
return renderTaskItem(entry.task);
}
const summary = summarizeTaskGroup(entry.tasks);
const breakdownParts: string[] = [];
if (summary.running > 0) {
breakdownParts.push(`${summary.running} ${t('common.running')}`);
}
if (summary.pending > 0) {
breakdownParts.push(`${summary.pending} ${t('common.pending')}`);
}
const breakdownSuffix = breakdownParts.length > 0 ? ` · ${breakdownParts.join(' · ')}` : '';
const groupMetaText = `${summary.progressPercent}%${breakdownSuffix}`;
const isExpanded = !collapsedGroups.has(entry.groupId);
return (
<div key={entry.groupId} className="task-group">
@@ -199,10 +144,11 @@ export const TaskPopup: React.FC = () => {
className="task-group-toggle"
onClick={() => toggleGroup(entry.groupId)}
aria-expanded={isExpanded}
aria-label={`${entry.groupName} (${entry.tasks.length})`}
aria-label={`${entry.groupName} (${entry.tasks.length}, ${groupMetaText})`}
>
<span className="task-group-chevron">{isExpanded ? '▾' : '▸'}</span>
<span className="task-group-title">{entry.groupName} ({entry.tasks.length})</span>
<span className="task-group-meta">{groupMetaText}</span>
</button>
{isExpanded && entry.tasks.map((task) => renderTaskItem(task, 'task-group-child'))}
</div>

138
src/renderer/utils/taskGrouping.ts Normal file
View File

@@ -0,0 +1,138 @@
import type { TaskProgress } from '../../main/shared/electronApi';
export interface GroupedTaskEntry {
kind: 'group';
groupId: string;
groupName: string;
tasks: TaskProgress[];
}
export interface SingleTaskEntry {
kind: 'single';
task: TaskProgress;
}
export type TaskEntry = GroupedTaskEntry | SingleTaskEntry;
export interface TaskGroupSummary {
total: number;
running: number;
pending: number;
completed: number;
failed: number;
cancelled: number;
progressPercent: number;
}
function clampProgress(value: number): number {
if (Number.isNaN(value)) {
return 0;
}
if (value < 0) {
return 0;
}
if (value > 100) {
return 100;
}
return value;
}
function getProgressContribution(task: TaskProgress): number {
switch (task.status) {
case 'completed':
case 'failed':
case 'cancelled':
return 100;
case 'pending':
return 0;
case 'running':
default:
return clampProgress(task.progress);
}
}
export function summarizeTaskGroup(tasks: TaskProgress[]): TaskGroupSummary {
const summary: TaskGroupSummary = {
total: tasks.length,
running: 0,
pending: 0,
completed: 0,
failed: 0,
cancelled: 0,
progressPercent: 0,
};
if (tasks.length === 0) {
return summary;
}
let progressTotal = 0;
for (const task of tasks) {
if (task.status === 'running') {
summary.running += 1;
} else if (task.status === 'pending') {
summary.pending += 1;
} else if (task.status === 'completed') {
summary.completed += 1;
} else if (task.status === 'failed') {
summary.failed += 1;
} else if (task.status === 'cancelled') {
summary.cancelled += 1;
}
progressTotal += getProgressContribution(task);
}
summary.progressPercent = Math.round(progressTotal / tasks.length);
return summary;
}
export function buildTaskEntries(tasks: TaskProgress[]): TaskEntry[] {
const groupMap = new Map<string, { groupName: string; tasks: TaskProgress[]; firstIndex: number }>();
const singles: Array<{ task: TaskProgress; index: number }> = [];
tasks.forEach((task, index) => {
if (!task.groupId) {
singles.push({ task, index });
return;
}
const existing = groupMap.get(task.groupId);
if (existing) {
existing.tasks.push(task);
return;
}
groupMap.set(task.groupId, {
groupName: task.groupName || task.groupId,
tasks: [task],
firstIndex: index,
});
});
const entries: Array<{ entry: TaskEntry; index: number }> = [];
for (const single of singles) {
entries.push({
index: single.index,
entry: {
kind: 'single',
task: single.task,
},
});
}
for (const [groupId, group] of groupMap.entries()) {
entries.push({
index: group.firstIndex,
entry: {
kind: 'group',
groupId,
groupName: group.groupName,
tasks: group.tasks,
},
});
}
return entries.sort((a, b) => a.index - b.index).map((entry) => entry.entry);
}

62
tests/ipc/handlers.test.ts
View File

@@ -1697,6 +1697,68 @@ describe('IPC Handlers', () => {
// ============ Blog Handlers ============
describe('Blog Handlers', () => {
describe('blog:generateSitemap', () => {
it('should start section tasks without waiting for core completion', async () => {
const mockProject = createMockProject({
id: 'test-project',
dataPath: '/mock/data',
});
mockProjectEngine.getActiveProject.mockResolvedValue(mockProject);
mockProjectEngine.getDataDir.mockReturnValue('/mock/data/dir');
mockMetaEngine.getProjectMetadata.mockResolvedValue({
name: 'Test Project',
publicUrl: 'https://blog.example.com',
});
let resolveCoreTask: ((value: any) => void) | null = null;
const startedTaskNames: string[] = [];
const completedResult = {
path: '/mock/data/dir/html/sitemap.xml',
urlCount: 1,
postCount: 0,
feedPostCount: 0,
tagCount: 0,
categoryCount: 0,
archiveCount: 0,
pagesGenerated: 1,
feeds: {
rssPath: '/mock/data/dir/html/rss.xml',
atomPath: '/mock/data/dir/html/atom.xml',
},
changed: {
sitemap: true,
rss: true,
atom: true,
},
};
mockTaskManager.runTask.mockImplementation((task: any) => {
startedTaskNames.push(task.name);
if (task.name === 'Render Site Core') {
return new Promise((resolve) => {
resolveCoreTask = resolve;
});
}
return Promise.resolve(completedResult);
});
const generationPromise = invokeHandler('blog:generateSitemap');
for (let index = 0; index < 20 && startedTaskNames.length === 0; index += 1) {
await new Promise((resolve) => setTimeout(resolve, 0));
}
expect(startedTaskNames).toContain('Render Site Core');
expect(startedTaskNames).toContain('Render Single Posts');
expect(startedTaskNames).toContain('Render Category Archives');
expect(startedTaskNames).toContain('Render Tag Archives');
expect(startedTaskNames).toContain('Render Date Archives');
expect(resolveCoreTask).toBeTruthy();
resolveCoreTask?.(completedResult);
await generationPromise;
});
it('should create separate background tasks for single, category, tag, and date rendering', async () => {
const mockProject = createMockProject({
id: 'test-project',

2
tests/renderer/components/Panel.test.tsx
View File

@@ -263,7 +263,7 @@ describe('Panel', () => {
render(<Panel />);
const parent = screen.getByRole('button', { name: 'Render Site (2)' });
const parent = screen.getByRole('button', { name: /Render Site \(2, \d+% · 1 running · 1 pending\)/ });
expect(parent).toBeInTheDocument();
expect(await screen.findByText('Render Site Core')).toBeInTheDocument();
expect(screen.getByText('Render Tag Archives')).toBeInTheDocument();

6
tests/renderer/components/TaskPopup.test.tsx
View File

@@ -39,7 +39,8 @@ describe('TaskPopup grouped tasks', () => {
}),
makeTask({
taskId: 'site-render-date-1',
status: 'running',
status: 'pending',
progress: 0,
message: 'Generating date archive pages',
groupId: 'site-render-1',
groupName: 'Render Site',
@@ -51,8 +52,9 @@ describe('TaskPopup grouped tasks', () => {
fireEvent.click(screen.getByRole('button', { name: /running/i }));
const groupToggle = screen.getByRole('button', { name: /Render Site \(2\)/i });
const groupToggle = screen.getByRole('button', { name: /Render Site \(1, \d+% · 1 running\)/i });
expect(groupToggle).toBeInTheDocument();
expect(screen.getByRole('button', { name: /Render Site \(1, \d+% · 1 pending\)/i })).toBeInTheDocument();
expect(screen.getByText('Generating root pages')).toBeInTheDocument();
expect(screen.getByText('Generating date archive pages')).toBeInTheDocument();

58
tests/renderer/utils/taskGrouping.test.ts Normal file
View File

@@ -0,0 +1,58 @@
import { describe, it, expect } from 'vitest';
import type { TaskProgress } from '../../../src/main/shared/electronApi';
import { buildTaskEntries, summarizeTaskGroup } from '../../../src/renderer/utils/taskGrouping';
function createTask(overrides: Partial<TaskProgress>): TaskProgress {
return {
taskId: overrides.taskId || 'task-1',
name: overrides.name || 'Task',
status: overrides.status || 'running',
progress: overrides.progress ?? 0,
message: overrides.message || 'Working',
startTime: overrides.startTime || new Date('2026-02-22T00:00:00.000Z').toISOString(),
endTime: overrides.endTime,
error: overrides.error,
groupId: overrides.groupId,
groupName: overrides.groupName,
};
}
describe('taskGrouping', () => {
it('should keep first-seen order while grouping task entries', () => {
const tasks: TaskProgress[] = [
createTask({ taskId: 'single-1', name: 'Single 1' }),
createTask({ taskId: 'group-a-1', groupId: 'group-a', groupName: 'Group A' }),
createTask({ taskId: 'single-2', name: 'Single 2' }),
createTask({ taskId: 'group-a-2', groupId: 'group-a', groupName: 'Group A' }),
createTask({ taskId: 'group-b-1', groupId: 'group-b', groupName: 'Group B' }),
];
const entries = buildTaskEntries(tasks);
expect(entries).toHaveLength(4);
expect(entries[0]).toMatchObject({ kind: 'single' });
expect(entries[1]).toMatchObject({ kind: 'group', groupId: 'group-a' });
expect(entries[2]).toMatchObject({ kind: 'single' });
expect(entries[3]).toMatchObject({ kind: 'group', groupId: 'group-b' });
});
it('should compute aggregate group progress for concurrent mixed statuses', () => {
const tasks: TaskProgress[] = [
createTask({ taskId: 'core', status: 'running', progress: 40, groupId: 'site-render' }),
createTask({ taskId: 'single', status: 'running', progress: 10, groupId: 'site-render' }),
createTask({ taskId: 'tag', status: 'pending', progress: 0, groupId: 'site-render' }),
createTask({ taskId: 'category', status: 'completed', progress: 100, groupId: 'site-render', endTime: new Date('2026-02-22T00:01:00.000Z').toISOString() }),
createTask({ taskId: 'date', status: 'failed', progress: 30, groupId: 'site-render', endTime: new Date('2026-02-22T00:01:00.000Z').toISOString() }),
];
const summary = summarizeTaskGroup(tasks);
expect(summary.total).toBe(5);
expect(summary.running).toBe(2);
expect(summary.pending).toBe(1);
expect(summary.completed).toBe(1);
expect(summary.failed).toBe(1);
expect(summary.cancelled).toBe(0);
expect(summary.progressPercent).toBe(50);
});
});