refactor(gui): rebuild the client loading kernel as dsh-client-modules with a two-phase boot

The module system moves out of dsh-client-runtime (./loader retired) into
its own package: a lazy CJS table where executing a bundle only registers
its factory and materialization happens at first require, memoized, with
recursive requires self-ordering. ClientModuleSystem is a class; index.ts
keeps the types and a thin factory. Boot is two-phase: phase one prefetches
the immediately tier in parallel (registration only, failures deferred to
phase two's loud import); phase two mounts the vendored Loader with the
module system as internal, creates one entry per graph row plus the
app-shell pseudo-row the kernel appends itself, and settles on an
all-ACTIVE sweep. The shell kernel is self-sufficient: hand-rolled
loader-status stores, no plugin value imports, platform seed list single-
sourced in platform.ts.
This commit is contained in:
imccyu
2026-07-23 21:55:39 +08:00
parent 15fde82f80
commit b58f0989f9
30 changed files with 1064 additions and 1015 deletions

View File

@@ -1,42 +1,33 @@
// @vitest-environment jsdom
/**
* AppRoot boot-gate smoke: loading page until the settled signal flips (status
* alone never opens the gate), fail-loud plugin list, one-pass switch to the
* real UI. The full browser chain (real loader + bundles) is the e2e's job;
* this pins the shell-owned gate semantics.
* alone never opens the gate), fail-loud entry list + boot failure report,
* one-pass switch to the real UI. The full browser chain (real module system
* + vendored Loader + bundles) is the e2e's job; this pins the shell-owned
* gate semantics. Stores are the kernel-own signals production boot uses
* (shell self-sufficiency: the loading page depends on no plugin package).
*/
import { afterEach, describe, expect, it } from 'vitest'
import { act, cleanup, render } from '@testing-library/react'
afterEach(cleanup)
// The snapshot-store engine lives with runtime now; the status-store stub
// uses the same channel production code does.
import { createSnapshotStore, type ObservableSnapshot } from '@deepseek-ai/dsh-client-runtime/client'
import type { LoaderStatus } from '@deepseek-ai/dsh-client-runtime/client'
import { AppRoot } from '@deepseek-ai/dsh-client-web/src/AppRoot.tsx'
function signal(): ObservableSnapshot<boolean> & { flip: () => void } {
let value = false
const listeners = new Set<() => void>()
return {
getSnapshot: () => value,
subscribe: (fn) => { listeners.add(fn); return () => { listeners.delete(fn) } },
flip: () => { value = true; for (const fn of [...listeners]) fn() },
}
}
import { createLoaderStatusStore, createSignal } from '@deepseek-ai/dsh-client-web/src/loader-status.ts'
function mount() {
const settled = signal()
const status = createSnapshotStore<LoaderStatus>({})
const settled = createSignal(false)
const error = createSignal<string | undefined>(undefined)
const status = createLoaderStatusStore()
let renders = 0
const utils = render(
<AppRoot
settled={settled}
status={status}
error={error}
renderApp={() => { renders += 1; return <div data-testid="real-ui" /> }}
/>,
)
return { settled, status, counts: () => renders, ...utils }
return { settled, status, error, counts: () => renders, ...utils }
}
describe('AppRoot', () => {
@@ -50,24 +41,34 @@ describe('AppRoot', () => {
it('all-active status alone does not open the gate (settled signal is the only key)', () => {
const { status, queryByTestId } = mount()
act(() => {
status.update((d) => { d['a'] = 'active'; d['b'] = 'active' })
status.set('a', 'active')
status.set('b', 'active')
})
expect(queryByTestId('real-ui')).toBeNull()
})
it('lists failed plugins and stays on the loading page', () => {
it('lists failed entries and stays on the loading page', () => {
const { status, getByText, queryByTestId } = mount()
act(() => {
status.update((d) => { d['@deepseek-ai/dsh-client-ui-theme'] = 'failed'; d['ok'] = 'active' })
status.set('@deepseek-ai/dsh-client-ui-layout', 'failed')
status.set('ok', 'active')
})
expect(getByText('Failed to load plugins')).toBeTruthy()
expect(getByText('@deepseek-ai/dsh-client-ui-theme')).toBeTruthy()
expect(getByText('@deepseek-ai/dsh-client-ui-layout')).toBeTruthy()
expect(queryByTestId('real-ui')).toBeNull()
})
it('renders the boot failure report even when no entry projected failed', () => {
const { error, getByText, queryByTestId } = mount()
act(() => { error.set('web boot: 1 entry did not activate\nx: pending (waiting for service: y)') })
expect(getByText('Failed to load plugins')).toBeTruthy()
expect(getByText(/waiting for service/)).toBeTruthy()
expect(queryByTestId('real-ui')).toBeNull()
})
it('flipping settled switches to the real UI in one pass', () => {
const { settled, getByTestId, queryByText, counts } = mount()
act(() => { settled.flip() })
act(() => { settled.set(true) })
expect(getByTestId('real-ui')).toBeTruthy()
expect(queryByText('HARNESS')).toBeNull()
expect(counts()).toBe(1)

View File

@@ -1,233 +0,0 @@
// @vitest-environment jsdom
/**
* bootWebShell over the REAL client loader in jsdom (runScripts:dangerously —
* the loader's <script> execute path runs for real): fetch is stubbed to
* serve fake bundle text, everything else is production code — seeded module
* table, DSHClientProxy handoff, inject topology, renderer install after
* settled, the one-line renderSlot('root') shell, and the fail-loud paths —
* through the loader's fetch/execute seams (jsdom's <script> vm context
* cannot reach the test window, so execute is indirect eval). The fake
* runtime is the REAL SlotsService mounted by the real runtime plugin shape;
* full-fidelity plugin content belongs to the apps/web e2e.
*/
import { afterEach, describe, expect, it } from 'vitest'
import { act } from '@testing-library/react'
import { bootWebShell } from '@deepseek-ai/dsh-client-web'
import { createSnapshotStore, defineStore, SlotsService } from '@deepseek-ai/dsh-client-runtime/client'
interface BootWindow extends Window {
__DSH_BOOT__?: { plugins: { id: string; url: string; inject: string[]; immediately?: boolean }[] }
DSHClientProxy?: unknown
__TEST_SLOTS_SERVICE__?: unknown
__TEST_RUNTIME_STORE__?: { createSnapshotStore: unknown; defineStore: unknown }
}
const win = window as unknown as BootWindow
/**
* Fake runtime half: mounts the REAL SlotsService (built-in 'root', ledger,
* install/renderSlot) plus a minimal sessions face for the renderer host.
* The runtime package is not a seeded library (in production it arrives as a
* bundle), so the spec hands the real class in through a window global — the
* plugin body and everything downstream stay production code.
*/
const RUNTIME_STUB = `
window.DSHClientProxy.loadPlugin({
id: 'fake-runtime',
factory: (require) => {
const SlotsService = window.__TEST_SLOTS_SERVICE__
const { createSnapshotStore } = window.__TEST_RUNTIME_STORE__
return {
apply: (ctx) => {
ctx.plugin(SlotsService)
const list = createSnapshotStore({ ids: ['s1'], byId: { s1: { id: 's1', title: 'S1', displayTitle: 'S1', running: false, updatedAt: 1 } }, current: 's1' })
ctx.provide('sessions', {
list,
cell: (id) => (id === 's1' ? { sessionId: 's1', session: { getSnapshot: () => ({}), subscribe: () => () => {} } } : undefined),
})
},
}
},
})`
/** Fake layout half: ONE terminal register() call — occupy 'root', declare a
* child, seat a store factory, expose the store round trip as a probe. */
const LAYOUT_STUB = `
window.DSHClientProxy.loadPlugin({
id: 'fake-layout',
factory: (require) => {
const React = require('react')
const { defineStore } = window.__TEST_RUNTIME_STORE__
return {
inject: ['slots'],
apply: (ctx) => {
const createProbeStore = () => defineStore({
init: () => ({ sidebar: 300, details: 360 }),
actions: {
setSidebar: (d, px) => { d.sidebar = px },
setDetails: (d, px) => { d.details = px },
},
})
ctx.slots.register({
name: 'root',
children: { 'probe.child': { kind: 'single', scope: 'root' } },
store: createProbeStore,
}, (props) => {
const sw = props.useStore((st) => st.sidebar)
const dw = props.useStore((st) => st.details)
return React.createElement('div', {
'data-testid': 'fake-frame',
'data-widths': sw + 'x' + dw,
onClick: () => { props.actions.setSidebar(311); props.actions.setDetails(411) },
}, props.renderSlot('probe.child', {}))
})
},
}
},
})`
// The shell assembly requires the layout surface under its production id.
const LAYOUT_ID = '@deepseek-ai/dsh-client-ui-layout'
/** Loader seams: serve fake bundle text and execute it via indirect eval (jsdom's <script> vm context cannot see the test window). */
function seams(bundles: Record<string, string>) {
return {
fetchBundle: (url: string): Promise<string> => {
const hit = Object.keys(bundles).find((b) => url.endsWith(b))
if (hit === undefined) return Promise.reject(new Error(`bundle fetch ${url} answered 404`))
return Promise.resolve(bundles[hit]!)
},
executeBundle: (code: string): void => {
(0, eval)(code)
},
}
}
function mountPoint(): HTMLElement {
const el = document.createElement('div')
document.body.appendChild(el)
return el
}
async function flushLoader(): Promise<void> {
// fetch + per-plugin apply chain across macrotask turns; a few settle it.
for (let i = 0; i < 10; i++) await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
}
function bootPlugins(): { id: string; url: string; inject: string[]; immediately?: boolean }[] {
return [
{ id: 'fake-runtime', url: '/plugins/fake-runtime.js', inject: [], immediately: true },
{ id: LAYOUT_ID, url: '/plugins/fake-layout.js', inject: ['fake-runtime'] },
]
}
function fakeBundles(): Record<string, string> {
return {
'/plugins/fake-runtime.js': RUNTIME_STUB,
'/plugins/fake-layout.js': LAYOUT_STUB.replace("id: 'fake-layout'", `id: '${LAYOUT_ID}'`),
}
}
afterEach(() => {
delete win.__DSH_BOOT__
delete win.DSHClientProxy
delete win.__TEST_SLOTS_SERVICE__
delete win.__TEST_RUNTIME_STORE__
document.body.innerHTML = ''
document.head.querySelectorAll('script').forEach((s) => { s.remove() })
document.title = ''
})
/** Hand the real runtime surface to the stub bundle (runtime is not a seeded library). */
function seedSlotsService(): void {
win.__TEST_SLOTS_SERVICE__ = SlotsService
win.__TEST_RUNTIME_STORE__ = { createSnapshotStore, defineStore }
}
describe('bootWebShell (real loader + real script execution)', () => {
it('loading page → settled → renderer installed → assembled UI in one pass; unmount clears the tree', async () => {
win.__DSH_BOOT__ = { plugins: bootPlugins() }
seedSlotsService()
const el = mountPoint()
document.title = 'DeepSeek Harness'
let unmount: (() => void) | undefined
act(() => { unmount = bootWebShell(el, seams(fakeBundles())) })
expect(el.textContent).toContain('HARNESS')
expect(el.querySelector('[data-testid="fake-frame"]')).toBeNull()
await flushLoader()
expect(el.querySelector('[data-testid="fake-frame"]')).not.toBeNull()
expect(el.textContent).not.toContain('HARNESS')
expect(document.title).toBe('S1 — DeepSeek Harness')
act(() => { unmount!() })
expect(el.childElementCount).toBe(0)
expect(document.title).toBe('DeepSeek Harness')
})
it('store seat round-trips through the entry props (useStore + actions)', async () => {
win.__DSH_BOOT__ = { plugins: bootPlugins() }
seedSlotsService()
const el = mountPoint()
act(() => { bootWebShell(el, seams(fakeBundles())) })
await flushLoader()
const frame = el.querySelector('[data-testid="fake-frame"]')
expect(frame).not.toBeNull()
// Width write/read round trip through the framework-delivered store share.
expect((frame as HTMLElement).dataset['widths']).toBe('300x360')
act(() => { (frame as HTMLElement).click() })
expect((frame as HTMLElement).dataset['widths']).toBe('311x411')
})
it('fail loud: a 404 bundle keeps the loading page and lists the plugin id', async () => {
win.__DSH_BOOT__ = { plugins: [{ id: 'absent-plugin', url: '/plugins/absent.js', inject: [] }] }
const el = mountPoint()
act(() => { bootWebShell(el, seams({})) })
await flushLoader()
expect(el.textContent).toContain('Failed to load plugins')
expect(el.textContent).toContain('absent-plugin')
expect(el.querySelector('[data-testid="fake-frame"]')).toBeNull()
})
it("fail loud: rendering with no 'root' registration throws through the shell error surface", async () => {
// Runtime loads (slots service present, renderer installed) but no layout
// entry ever registers into 'root' — the ctx-level renderSlot must throw.
win.__DSH_BOOT__ = {
plugins: [{ id: 'fake-runtime', url: '/plugins/fake-runtime.js', inject: [], immediately: true }],
}
seedSlotsService()
const el = mountPoint()
// React logs the render error before the boundary rethrow reaches us — keep the spec output clean.
const consoleError = console.error
console.error = () => {}
try {
act(() => { bootWebShell(el, seams({ '/plugins/fake-runtime.js': RUNTIME_STUB })) })
let thrown: unknown
try {
await flushLoader()
} catch (error) {
thrown = error
}
expect(String(thrown)).toMatch(/'root' has no registration/)
} finally {
console.error = consoleError
}
})
})
describe('buildRenderApp — assembly contract', () => {
it('is exactly the ctx-level root render call (fail-loud before install)', async () => {
const { buildRenderApp } = await import('@deepseek-ai/dsh-client-web')
const { Context } = await import('cordis')
const { SlotsService } = await import('@deepseek-ai/dsh-client-runtime/client')
const ctx = new Context()
const fiber = ctx.plugin(SlotsService)
await fiber.await()
ctx.provide('sessions', {
list: createSnapshotStore({ ids: [], byId: {}, current: undefined }),
})
const renderApp = buildRenderApp({ ctx, requireModule: () => undefined })
expect(renderApp).toBeTypeOf('function')
// No renderer installed: the one-line shell must surface the boot-order error.
expect(() => renderApp()).toThrow(/renderer not installed/)
})
})