@linhey/rhine-design 0.10.0 → 0.11.1

package/tests/Review.test.tsx

@@ -0,0 +1,117 @@
+import { describe, it, expect, vi } from 'vitest';
+import { defineReview, parseReviewState, serializeReviewState } from '../review/state';
+import { ReviewLifecycle } from '../review/lifecycle';
+import { createMockFetch, MemoryStorage } from '../review/isolation';
+import type { ReviewContext, ReviewScene, ReviewSession } from '../review/types';
+
+const session = (): ReviewSession => ({ render: () => null, dispose: vi.fn() });
+const scene: ReviewScene = { id: 'projects', title: '项目', setup: session, motionControls: ['full', 'paused'], dimensions: [
+  { id: 'status', label: '状态', options: [{ id: 'normal', label: '正常' }, { id: 'error', label: '错误' }] },
+  { id: 'role', label: '角色', options: [{ id: 'editor', label: '编辑' }, { id: 'reader', label: '只读' }] },
+] };
+const catalog = defineReview({ title: 'Review', scenes: [scene, { id: 'other', title: '其他', setup: session }] });
+describe('review URL contract', () => {
+  it('restores independent dimensions and all controls', () => {
+    const hash = '#scene=projects&d.status=error&d.role=reader&theme=arknights&width=520&zoom=2&motion=paused';
+    const state = parseReviewState(hash, catalog);
+    expect(state).toEqual({ scene: 'projects', dimensions: { status: 'error', role: 'reader' }, theme: 'arknights', width: 520, zoom: 2, motion: 'paused' });
+    expect(parseReviewState(serializeReviewState(state), catalog)).toEqual(state);
+  });
+  it('drops unknown values and arbitrary form drafts with deterministic fallback', () => {
+    const state = parseReviewState('#scene=gone&theme=unknown&width=999&zoom=5&motion=bad&d.role=admin&draft=secret', catalog);
+    expect(state).toEqual({ scene: 'projects', dimensions: { status: 'normal', role: 'editor' }, theme: 'rhine', width: 'fit', zoom: 1, motion: 'system' });
+    expect(serializeReviewState(state)).not.toContain('secret');
+  });
+  it('does not leak dimensions to a scene which does not support them', () => {
+    expect(parseReviewState('#scene=other&d.role=reader', catalog).dimensions).toEqual({});
+  });
+  it('rejects duplicate IDs, empty dimensions and invalid widths', () => {
+    expect(() => defineReview({ title: '', scenes: [] })).toThrow();
+    expect(() => defineReview({ title: '', scenes: [scene, scene] })).toThrow();
+    expect(() => defineReview({ title: '', scenes: [{ ...scene, dimensions: [{ id: 'x', label: '', options: [] }] }] })).toThrow();
+    expect(() => defineReview({ title: '', scenes: [scene], widths: [0] })).toThrow();
+  });
+});
+const deferred = <T,>() => { let resolve!: (value: T) => void; const promise = new Promise<T>(yes => { resolve = yes; }); return { promise, resolve }; };
+function harness() {
+  const hooks = { clear: vi.fn(), ready: vi.fn(), error: vi.fn(), context: () => ({ mockHttp: vi.fn(), report: vi.fn() }) };
+  return { hooks, lifecycle: new ReviewLifecycle(hooks) };
+}
+describe('review lifecycle', () => {
+  it('aborts pending setup and cleans resources registered before it returns', async () => {
+    const { lifecycle, hooks } = harness();
+    const pending = deferred<ReviewSession>();
+    const earlyCleanup = vi.fn();
+    let context!: ReviewContext;
+    const first = lifecycle.select({ ...scene, setup: ctx => { context = ctx; ctx.onDispose(earlyCleanup); return pending.promise; } }, {});
+    await lifecycle.select(catalog.scenes[1], {});
+    expect(context.signal.aborted).toBe(true);
+    expect(earlyCleanup).toHaveBeenCalledOnce();
+    const stale = session(); pending.resolve(stale); await first;
+    expect(stale.dispose).toHaveBeenCalledOnce();
+    expect(hooks.ready).toHaveBeenCalledTimes(1);
+    await lifecycle.dispose();
+  });
+  it('waits for async disposal across rapid consecutive selections', async () => {
+    const { lifecycle, hooks } = harness(); const disposal = deferred<void>();
+    await lifecycle.select({ ...scene, setup: () => ({ ...session(), dispose: () => disposal.promise }) }, {});
+    const discarded = vi.fn(session), accepted = vi.fn(session);
+    const second = lifecycle.select({ ...scene, setup: discarded }, {});
+    const third = lifecycle.select({ ...scene, setup: accepted }, {});
+    await Promise.resolve(); expect(accepted).not.toHaveBeenCalled();
+    disposal.resolve(); await Promise.all([second, third]);
+    expect(discarded).not.toHaveBeenCalled(); expect(accepted).toHaveBeenCalledOnce();
+    expect(hooks.error).not.toHaveBeenCalled(); await lifecycle.dispose();
+  });
+  it('resets then disposes and creates a fresh session', async () => {
+    const { lifecycle } = harness(); const log: string[] = [];
+    const definition = { ...scene, setup: (context: ReviewContext) => { log.push(`setup:${context.reason}`); return { render: () => null, reset: () => { log.push('reset'); }, dispose: () => { log.push('dispose'); } }; } };
+    await lifecycle.select(definition, {}); await lifecycle.select(definition, {}, 'reset');
+    expect(log).toEqual(['setup:select', 'reset', 'dispose', 'setup:reset']); await lifecycle.dispose();
+  });
+  it('runs cleanup on setup rejection and surfaces failure', async () => {
+    const { lifecycle, hooks } = harness(); const cleanup = vi.fn();
+    await lifecycle.select({ ...scene, setup: async context => { context.onDispose(cleanup); throw new Error('setup failed'); } }, {});
+    expect(cleanup).toHaveBeenCalledOnce(); expect(hooks.error).toHaveBeenCalledWith(expect.objectContaining({ message: 'setup failed' }), 'projects');
+  });
+  it('attributes a disposal failure to the old scene while accepting the next scene', async () => {
+    const { lifecycle, hooks } = harness();
+    await lifecycle.select({ ...scene, setup: () => ({ ...session(), dispose() { throw new Error('cleanup failed'); } }) }, {});
+    await lifecycle.select(catalog.scenes[1], {});
+    expect(hooks.error).toHaveBeenCalledWith(expect.objectContaining({ message: 'cleanup failed' }), 'projects');
+    expect(hooks.ready).toHaveBeenLastCalledWith(expect.anything(), catalog.scenes[1]);
+    await lifecycle.dispose();
+  });
+});
+describe('synthetic request boundary', () => {
+  it('preserves Request method/body and omits credentials', async () => {
+    const handler = vi.fn(async (request: Request) => {
+      expect(request.method).toBe('POST'); expect(request.credentials).toBe('omit');
+      return Response.json({ body: await request.text() });
+    });
+    const fetch = createMockFetch(() => handler, () => new AbortController().signal, vi.fn());
+    const response = await fetch(new Request('https://synthetic.invalid/items', { method: 'POST', body: 'hello' }));
+    expect(await response.json()).toEqual({ body: 'hello' });
+  });
+  it('rejects unmatched requests with visible failure instead of fallback network', async () => {
+    const report = vi.fn(); const fetch = createMockFetch(() => undefined, () => new AbortController().signal, report);
+    await expect(fetch(new URL('https://synthetic.invalid/missing'))).rejects.toThrow('未实现模拟请求');
+    expect(report).toHaveBeenCalledWith('未实现模拟请求：GET /missing');
+  });
+  it('cancels a noncooperative handler when its scene is disposed', async () => {
+    const abort = new AbortController(); const fetch = createMockFetch(() => () => new Promise(() => {}), () => abort.signal, vi.fn());
+    const pending = fetch('https://synthetic.invalid/items'); abort.abort();
+    await expect(pending).rejects.toMatchObject({ name: 'AbortError' });
+  });
+  it('honors a Request abort signal and a pre-aborted request', async () => {
+    const abort = new AbortController(); const handler = vi.fn(() => new Promise<Response>(() => {}));
+    const fetch = createMockFetch(() => handler, () => new AbortController().signal, vi.fn());
+    abort.abort(); await expect(fetch(new Request('https://synthetic.invalid', { signal: abort.signal }))).rejects.toMatchObject({ name: 'AbortError' });
+    expect(handler).not.toHaveBeenCalled();
+  });
+  it('keeps storage in memory and resets all keys', () => {
+    const storage = new MemoryStorage(); storage.setItem('name', 'synthetic');
+    expect(storage.getItem('name')).toBe('synthetic'); expect(storage.length).toBe(1);
+    storage.clear(); expect(storage.getItem('name')).toBeNull(); expect(storage.key(0)).toBeNull();
+  });
+});

package/tests/ReviewBuild.test.tsx

@@ -0,0 +1,59 @@
+// @vitest-environment node
+import { afterEach, describe, expect, it } from 'vitest';
+import { mkdtemp, mkdir, readFile, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join, resolve } from 'node:path';
+import { build, preview } from 'vite';
+import react from '@vitejs/plugin-react';
+import { reviewPlugin, reviewProductionGuard } from '../review/vite.mjs';
+
+const directories: string[] = [];
+async function fixture() { const path = await mkdtemp(join(tmpdir(), 'rhine-review-test-')); directories.push(path); return path; }
+afterEach(async () => { await Promise.all(directories.splice(0).map(path => rm(path, { recursive: true, force: true }))); });
+describe('review build integration', () => {
+  it.each(['/nested/review/', './'])('emits final CSS and usable preview for base %s', async base => {
+    const root = await fixture();
+    await build({ configFile: false, root, base, logLevel: 'silent', plugins: [react(), reviewPlugin({ catalog: resolve('examples/review/http/catalog.tsx') })] });
+    for (const name of ['index.html', 'canvas.html']) {
+      const html = await readFile(join(root, 'dist', name), 'utf8');
+      const stylesheet = html.match(/rel="stylesheet" href="([^\"]+\.css)"/)?.[1];
+      expect(stylesheet?.startsWith(base)).toBe(true);
+      const css = stylesheet?.slice(base.length);
+      expect(css).toBeTruthy();
+      expect(await readFile(join(root, 'dist', css!), 'utf8')).toContain('.rhine-review-header');
+      expect(html).toContain("connect-src 'none'");
+      expect(html).toContain(`src="${base}assets/`);
+    }
+    const server = await preview({ configFile: false, root, base, logLevel: 'silent', plugins: [reviewPlugin({ catalog: resolve('examples/review/http/catalog.tsx') })], preview: { host: '127.0.0.1', port: 0 } });
+    try {
+      const address = server.httpServer.address();
+      if (!address || typeof address === 'string') throw new Error('Missing preview port');
+      const url = `http://127.0.0.1:${address.port}${base === './' ? '/' : base}`;
+      const response = await fetch(url);
+      expect(response.status).toBe(200);
+      expect(await response.text()).toContain('Rhine Review');
+      expect((await fetch(`${url}api/missing`)).status).toBe(404);
+    } finally { await new Promise<void>((resolve, reject) => server.httpServer.close(error => error ? reject(error) : resolve())); }
+  }, 20000);
+  it('allows production theme directories but rejects explicit fixture paths', async () => {
+    const root = await fixture();
+    await mkdir(join(root, 'design')); await mkdir(join(root, 'fixtures'));
+    await writeFile(join(root, 'design/theme.js'), 'export const theme = "synthetic-theme";');
+    await writeFile(join(root, 'fixtures/data.js'), 'export const data = "synthetic-fixture";');
+    const entry = join(root, 'entry.js');
+    const options = { configFile: false as const, root, logLevel: 'silent' as const, plugins: [reviewProductionGuard({ forbidden: ['./fixtures'] })], build: { lib: { entry, formats: ['es' as const] } } };
+    await writeFile(entry, 'export {theme} from "./design/theme.js";');
+    await expect(build(options)).resolves.toBeTruthy();
+    await writeFile(entry, 'export {data} from "./fixtures/data.js";');
+    await expect(build(options)).rejects.toThrow('forbidden fixtures: fixtures/data.js');
+  }, 20000);
+  it('rejects accidental official runtime inclusion without a product denylist', async () => {
+    const root = await fixture(); const entry = join(root, 'entry.js');
+    await writeFile(entry, `export { defineReview } from ${JSON.stringify(resolve('review/index.ts'))};`);
+    await expect(build({ configFile: false, root, logLevel: 'silent', plugins: [reviewProductionGuard()], build: { lib: { entry, formats: ['es'] } } })).rejects.toThrow('Production bundle imports review runtime');
+  }, 20000);
+  it('refuses backend proxy and project env configuration', async () => {
+    const root = await fixture();
+    await expect(build({ configFile: false, root, logLevel: 'silent', plugins: [reviewPlugin({ catalog: './catalog.tsx' })], server: { proxy: { '/api': 'http://synthetic.invalid' } } })).rejects.toThrow('no server/preview proxies');
+  });
+});

package/tests/ReviewShell.test.tsx

@@ -0,0 +1,63 @@
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ReviewShell, reviewWaitMs } from '../review/shell';
+import { appendFeedback, emptyFeedback } from '../review/feedback';
+import { protocol } from '../review/protocol';
+
+const catalog = { title: '故障恢复', scenes: [{ id: 'a', title: '场景 A' }, { id: 'b', title: '场景 B' }] };
+function iframe() { return screen.getByTitle('产品场景画布') as HTMLIFrameElement; }
+function send(data: Record<string, unknown>, source = iframe().contentWindow!) {
+  fireEvent(window, new MessageEvent('message', { origin: location.origin, source, data: { protocol, ...data } }));
+}
+function connect() {
+  const post = vi.spyOn(iframe().contentWindow!, 'postMessage');
+  send({ type: 'ready', catalog });
+  return { post, request: () => post.mock.calls.filter(call => call[0].type === 'select').at(-1)![0].requestId as number };
+}
+beforeEach(() => { vi.useFakeTimers(); history.replaceState(null, '', '#scene=a'); });
+afterEach(() => { cleanup(); vi.useRealTimers(); });
+describe('review shell recovery', () => {
+  it('offers recovery when the initial iframe never handshakes', () => {
+    render(<ReviewShell />); const oldFrame = iframe();
+    act(() => vi.advanceTimersByTime(reviewWaitMs));
+    expect(screen.getByRole('alert')).toHaveTextContent('连接画布超时');
+    fireEvent.click(screen.getByRole('button', { name: '重新载入画布' }));
+    expect(iframe()).not.toBe(oldFrame);
+    const { request } = connect(); send({ type: 'rendered', requestId: request() });
+    expect(screen.getByRole('status')).toHaveTextContent('已就绪');
+    expect(screen.getByRole('alert')).toHaveTextContent('连接画布超时');
+  });
+  it('replaces a stuck browsing context, keeps selection, ignores old acknowledgements', () => {
+    render(<ReviewShell />); const { request } = connect();
+    send({ type: 'rendered', requestId: request() });
+    fireEvent.click(screen.getByRole('link', { name: '场景 B' }));
+    const pending = request();
+    send({ type: 'rendered', requestId: pending - 1 });
+    act(() => vi.advanceTimersByTime(reviewWaitMs));
+    expect(screen.getByRole('alert')).toHaveTextContent('初始化或清理超过');
+    const oldFrame = iframe(), oldWindow = oldFrame.contentWindow!;
+    fireEvent.click(screen.getByRole('button', { name: '重新载入画布' }));
+    expect(oldFrame.isConnected).toBe(false); expect(location.hash).toContain('scene=b');
+    send({ type: 'feedback', kind: 'error', message: 'stale error' }, oldWindow);
+    expect(screen.queryByText(/stale error/)).not.toBeInTheDocument();
+    const next = connect(); send({ type: 'rendered', requestId: next.request() });
+    expect(screen.getByRole('status')).toHaveTextContent('已就绪');
+  });
+  it('retains scoped errors across ready and selection until explicit acknowledgement', () => {
+    render(<ReviewShell />); const { request } = connect();
+    send({ type: 'feedback', scene: 'a', kind: 'error', message: '清理失败 A' });
+    send({ type: 'rendered', requestId: request() });
+    fireEvent.click(screen.getByRole('link', { name: '场景 B' }));
+    send({ type: 'rendered', requestId: request() });
+    expect(screen.getByRole('alert')).toHaveTextContent('清理失败 A');
+    fireEvent.click(screen.getByText(/评审反馈 ·/));
+    expect(screen.getByText('场景 A', { selector: 'strong' })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: '确认并清除反馈' }));
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+  it('does not silently lose unacknowledged errors when bounded history overflows', () => {
+    let log = emptyFeedback();
+    for (let id = 0; id < 30; id++) log = appendFeedback(log, { id, kind: id < 4 ? 'error' : 'info', message: String(id), scene: 'a' });
+    expect(log.entries).toHaveLength(20); expect(log.errors).toBe(4); expect(log.omittedErrors).toBe(4);
+  });
+});

package/tsconfig.json

@@ -20,13 +20,16 @@
     "types": [
       "vite/client",
       "node"
-    ]
+    ],
+    "allowJs": true
   },
   "include": [
     "components",
     "preview",
     "tests",
     "vite.config.ts",
-    "vitest.config.ts"
+    "vitest.config.ts",
+    "review",
+    "examples/review"
   ]
 }