@slidejs/runner-revealjs 0.1.2 → 0.1.3

package/src/__tests__/adapter.test.ts

@@ -0,0 +1,299 @@
+/**
+ * @slidejs/runner-revealjs - RevealJsAdapter 单元测试
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { RevealJsAdapter } from '../adapter';
+import type { SlideDefinition } from '@slidejs/core';
+import type { RevealJsOptions } from '../types';
+
+// Mock reveal.js
+const mockReveal = {
+  initialize: vi.fn().mockResolvedValue(undefined),
+  sync: vi.fn(),
+  destroy: vi.fn(),
+  slide: vi.fn(),
+  getIndices: vi.fn().mockReturnValue({ h: 0, v: 0 }),
+  getTotalSlides: vi.fn().mockReturnValue(1),
+  on: vi.fn(),
+};
+
+vi.mock('reveal.js', () => {
+  return {
+    default: vi.fn().mockImplementation(() => mockReveal),
+  };
+});
+
+// 创建测试用的幻灯片定义
+function createTestSlide(id: string, content: string[]): SlideDefinition {
+  return {
+    id,
+    content: {
+      type: 'text',
+      lines: content,
+    },
+  };
+}
+
+describe('RevealJsAdapter', () => {
+  let adapter: RevealJsAdapter;
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    adapter = new RevealJsAdapter();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    // 重置 mock
+    vi.clearAllMocks();
+  });
+
+  afterEach(async () => {
+    if (adapter) {
+      await adapter.destroy();
+    }
+    if (container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+  });
+
+  describe('构造函数', () => {
+    it('应该创建 RevealJsAdapter 实例', () => {
+      expect(adapter).toBeInstanceOf(RevealJsAdapter);
+      expect(adapter.name).toBe('revealjs');
+    });
+  });
+
+  describe('initialize()', () => {
+    it('应该成功初始化适配器', async () => {
+      await adapter.initialize(container);
+
+      expect(mockReveal.initialize).toHaveBeenCalled();
+    });
+
+    it('应该创建 reveal.js DOM 结构', async () => {
+      await adapter.initialize(container);
+
+      const viewport = container.querySelector('.reveal-viewport');
+      const reveal = container.querySelector('.reveal');
+      const slides = container.querySelector('.slides');
+
+      expect(viewport).toBeTruthy();
+      expect(reveal).toBeTruthy();
+      expect(slides).toBeTruthy();
+    });
+
+    it('应该使用默认配置', async () => {
+      await adapter.initialize(container);
+
+      const Reveal = (await import('reveal.js')).default;
+      expect(Reveal).toHaveBeenCalledWith(
+        expect.any(HTMLElement),
+        expect.objectContaining({
+          controls: true,
+          progress: true,
+          center: true,
+          hash: false,
+          transition: 'slide',
+        })
+      );
+    });
+
+    it('应该接受自定义配置', async () => {
+      const options: RevealJsOptions = {
+        revealConfig: {
+          controls: false,
+          progress: false,
+          transition: 'fade',
+        },
+      };
+
+      await adapter.initialize(container, options);
+
+      const Reveal = (await import('reveal.js')).default;
+      expect(Reveal).toHaveBeenCalledWith(
+        expect.any(HTMLElement),
+        expect.objectContaining({
+          controls: false,
+          progress: false,
+          transition: 'fade',
+        })
+      );
+    });
+
+    it('应该在初始化失败时抛出错误', async () => {
+      mockReveal.initialize.mockRejectedValueOnce(new Error('Init failed'));
+
+      await expect(adapter.initialize(container)).rejects.toThrow(
+        'Failed to initialize RevealJsAdapter'
+      );
+    });
+  });
+
+  describe('render()', () => {
+    it('应该在未初始化时抛出错误', async () => {
+      const slides = [createTestSlide('slide-1', ['Test'])];
+
+      await expect(adapter.render(slides)).rejects.toThrow('RevealJsAdapter not initialized');
+    });
+
+    it('应该成功渲染幻灯片', async () => {
+      await adapter.initialize(container);
+
+      const slides = [
+        createTestSlide('slide-1', ['# Slide 1']),
+        createTestSlide('slide-2', ['# Slide 2']),
+      ];
+
+      await adapter.render(slides);
+
+      const sections = container.querySelectorAll('.slides section');
+      expect(sections.length).toBe(2);
+      expect(mockReveal.sync).toHaveBeenCalled();
+    });
+
+    it('应该清空现有幻灯片后渲染新幻灯片', async () => {
+      await adapter.initialize(container);
+
+      const slides1 = [createTestSlide('slide-1', ['# Slide 1'])];
+      await adapter.render(slides1);
+
+      const slides2 = [createTestSlide('slide-2', ['# Slide 2'])];
+      await adapter.render(slides2);
+
+      const sections = container.querySelectorAll('.slides section');
+      expect(sections.length).toBe(1);
+    });
+  });
+
+  describe('navigateTo()', () => {
+    it('应该在未初始化时抛出错误', () => {
+      expect(() => adapter.navigateTo(0)).toThrow('RevealJsAdapter not initialized');
+    });
+
+    it('应该成功导航到指定幻灯片', async () => {
+      await adapter.initialize(container);
+      await adapter.render([createTestSlide('slide-1', ['Test'])]);
+
+      adapter.navigateTo(0);
+
+      expect(mockReveal.slide).toHaveBeenCalledWith(0, 0);
+    });
+  });
+
+  describe('getCurrentIndex()', () => {
+    it('应该在未初始化时返回 0', () => {
+      expect(adapter.getCurrentIndex()).toBe(0);
+    });
+
+    it('应该返回当前幻灯片索引', async () => {
+      await adapter.initialize(container);
+      await adapter.render([createTestSlide('slide-1', ['Test'])]);
+
+      mockReveal.getIndices.mockReturnValue({ h: 2, v: 0 });
+      expect(adapter.getCurrentIndex()).toBe(2);
+    });
+  });
+
+  describe('getTotalSlides()', () => {
+    it('应该在未初始化时返回 0', () => {
+      expect(adapter.getTotalSlides()).toBe(0);
+    });
+
+    it('应该返回幻灯片总数', async () => {
+      await adapter.initialize(container);
+      await adapter.render([
+        createTestSlide('slide-1', ['Test']),
+        createTestSlide('slide-2', ['Test']),
+      ]);
+
+      mockReveal.getTotalSlides.mockReturnValue(2);
+      expect(adapter.getTotalSlides()).toBe(2);
+    });
+  });
+
+  describe('destroy()', () => {
+    it('应该成功销毁适配器', async () => {
+      await adapter.initialize(container);
+      await adapter.destroy();
+
+      expect(mockReveal.destroy).toHaveBeenCalled();
+    });
+
+    it('应该清理 DOM 结构', async () => {
+      await adapter.initialize(container);
+
+      // 验证 DOM 结构存在
+      const reveal = container.querySelector('.reveal');
+      expect(reveal).toBeTruthy();
+
+      await adapter.destroy();
+
+      // 验证 reveal 实例被销毁
+      expect(mockReveal.destroy).toHaveBeenCalled();
+    });
+  });
+
+  describe('事件处理', () => {
+    it('应该注册事件监听器', async () => {
+      await adapter.initialize(container);
+
+      const handler = vi.fn();
+      adapter.on('ready', handler);
+
+      // 触发 ready 事件（通过 emit）
+      // 注意：这里我们测试的是适配器内部的事件系统
+      expect(handler).toBeDefined();
+    });
+
+    it('应该移除事件监听器', async () => {
+      await adapter.initialize(container);
+
+      const handler = vi.fn();
+      adapter.on('ready', handler);
+      adapter.off('ready', handler);
+
+      // 验证监听器已移除
+      expect(handler).toBeDefined();
+    });
+  });
+
+  describe('renderSlide()', () => {
+    it('应该渲染文本内容幻灯片', async () => {
+      await adapter.initialize(container);
+
+      const slide = createTestSlide('slide-1', ['# Title', '## Subtitle', 'Content']);
+      await adapter.render([slide]);
+
+      const section = container.querySelector('.slides section');
+      expect(section).toBeTruthy();
+
+      const slideContent = section?.querySelector('.slide-content');
+      expect(slideContent).toBeTruthy();
+    });
+
+    it('应该渲染动态内容幻灯片', async () => {
+      await adapter.initialize(container);
+
+      const slide: SlideDefinition = {
+        id: 'slide-1',
+        content: {
+          type: 'dynamic',
+          component: 'my-component',
+          props: {
+            title: 'Test',
+          },
+        },
+      };
+
+      await adapter.render([slide]);
+
+      const section = container.querySelector('.slides section');
+      expect(section).toBeTruthy();
+
+      const component = section?.querySelector('my-component');
+      expect(component).toBeTruthy();
+      expect(component?.getAttribute('title')).toBe('Test');
+    });
+  });
+});

package/src/__tests__/runner.test.ts

@@ -0,0 +1,238 @@
+/**
+ * @slidejs/runner-revealjs - createSlideRunner 单元测试
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { createSlideRunner } from '../runner';
+import type { SlideContext } from '@slidejs/context';
+
+// Mock reveal.js
+vi.mock('reveal.js', () => {
+  return {
+    default: vi.fn().mockImplementation(() => {
+      return {
+        initialize: vi.fn().mockResolvedValue(undefined),
+        sync: vi.fn(),
+        destroy: vi.fn(),
+        slide: vi.fn(),
+        getIndices: vi.fn().mockReturnValue({ h: 0, v: 0 }),
+        getTotalSlides: vi.fn().mockReturnValue(1),
+        on: vi.fn(),
+      };
+    }),
+  };
+});
+
+// Mock CSS imports
+vi.mock('reveal.js/dist/reveal.css?inline', () => ({
+  default: '/* reveal.js CSS */',
+}));
+
+vi.mock('../style.css?inline', () => ({
+  default: '/* custom CSS */',
+}));
+
+// 创建测试用的 SlideContext
+function createTestContext(): SlideContext {
+  return {
+    sourceType: 'quiz',
+    sourceId: 'test-id',
+    metadata: {
+      title: 'Test Presentation',
+    },
+    items: [],
+  };
+}
+
+// 创建测试用的 DSL 源代码
+function createTestDSLSource(): string {
+  return `
+    present quiz "test-id" {
+      rules {
+        rule start "intro" {
+          slide {
+            content text {
+              "# Welcome"
+              "## Test Slide"
+            }
+          }
+        }
+        rule end "end" {
+          slide {
+            content text {
+              "# End"
+            }
+          }
+        }
+      }
+    }
+  `;
+}
+
+describe('createSlideRunner', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    // 创建 DOM 容器
+    container = document.createElement('div');
+    container.id = 'test-container';
+    document.body.appendChild(container);
+
+    // 清空 document.head 中的样式
+    const existingStyles = document.head.querySelectorAll('style');
+    existingStyles.forEach(style => style.remove());
+  });
+
+  afterEach(() => {
+    // 清理 DOM
+    if (container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+    const existingStyles = document.head.querySelectorAll('style');
+    existingStyles.forEach(style => style.remove());
+  });
+
+  describe('基本功能', () => {
+    it('应该成功创建 SlideRunner 实例', async () => {
+      const dslSource = createTestDSLSource();
+      const context = createTestContext();
+
+      const runner = await createSlideRunner(dslSource, context, {
+        container: '#test-container',
+      });
+
+      expect(runner).toBeDefined();
+      expect(runner.getTotalSlides()).toBeGreaterThan(0);
+    });
+
+    it('应该接受 HTMLElement 作为容器', async () => {
+      const dslSource = createTestDSLSource();
+      const context = createTestContext();
+
+      const runner = await createSlideRunner(dslSource, context, {
+        container,
+      });
+
+      expect(runner).toBeDefined();
+    });
+
+    it('应该在容器不存在时抛出错误', async () => {
+      const dslSource = createTestDSLSource();
+      const context = createTestContext();
+
+      await expect(
+        createSlideRunner(dslSource, context, {
+          container: '#non-existent',
+        })
+      ).rejects.toThrow('Container not found');
+    });
+  });
+
+  describe('CSS 注入', () => {
+    it('应该注入 Reveal.js CSS 到 document.head', async () => {
+      const dslSource = createTestDSLSource();
+      const context = createTestContext();
+
+      await createSlideRunner(dslSource, context, {
+        container: '#test-container',
+      });
+
+      const globalStyle = document.head.querySelector('#reveal-styles');
+      expect(globalStyle).toBeTruthy();
+      expect(globalStyle?.textContent).toContain('reveal.js CSS');
+    });
+
+    it('应该只注入一次 Reveal.js CSS（避免重复）', async () => {
+      const dslSource = createTestDSLSource();
+      const context = createTestContext();
+
+      // 创建第一个 runner
+      await createSlideRunner(dslSource, context, {
+        container: '#test-container',
+      });
+
+      // 创建第二个容器和 runner
+      const container2 = document.createElement('div');
+      container2.id = 'test-container-2';
+      document.body.appendChild(container2);
+
+      await createSlideRunner(dslSource, context, {
+        container: '#test-container-2',
+      });
+
+      // 应该只有一个全局样式
+      const globalStyles = document.head.querySelectorAll('#reveal-styles');
+      expect(globalStyles.length).toBe(1);
+
+      container2.remove();
+    });
+
+    it('应该注入自定义 CSS 到容器', async () => {
+      const dslSource = createTestDSLSource();
+      const context = createTestContext();
+
+      await createSlideRunner(dslSource, context, {
+        container: '#test-container',
+      });
+
+      const customStyle = container.querySelector('#slidejs-runner-revealjs-styles');
+      expect(customStyle).toBeTruthy();
+      expect(customStyle?.textContent).toContain('custom CSS');
+    });
+
+    it('应该为每个容器创建独立的 revealContainer', async () => {
+      const dslSource = createTestDSLSource();
+      const context = createTestContext();
+
+      await createSlideRunner(dslSource, context, {
+        container: '#test-container',
+      });
+
+      // 应该有一个 revealContainer div
+      const revealContainers = container.querySelectorAll('div');
+      expect(revealContainers.length).toBeGreaterThan(0);
+
+      // revealContainer 应该有正确的样式
+      const revealContainer = Array.from(revealContainers).find(
+        div => div.style.width === '100%' && div.style.height === '100%'
+      );
+      expect(revealContainer).toBeTruthy();
+    });
+  });
+
+  describe('reveal.js 配置', () => {
+    it('应该传递 reveal.js 配置选项', async () => {
+      const dslSource = createTestDSLSource();
+      const context = createTestContext();
+
+      const revealOptions = {
+        controls: false,
+        progress: false,
+        center: false,
+        transition: 'fade' as const,
+      };
+
+      await createSlideRunner(dslSource, context, {
+        container: '#test-container',
+        revealOptions,
+      });
+
+      // 验证 Reveal 构造函数被调用（通过 mock）
+      const Reveal = (await import('reveal.js')).default;
+      expect(Reveal).toHaveBeenCalled();
+    });
+  });
+
+  describe('错误处理', () => {
+    it('应该在 DSL 解析失败时抛出错误', async () => {
+      const invalidDSL = 'invalid dsl syntax';
+      const context = createTestContext();
+
+      await expect(
+        createSlideRunner(invalidDSL, context, {
+          container: '#test-container',
+        })
+      ).rejects.toThrow();
+    });
+  });
+});

package/src/env.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="vite/client" />
+
+/**
+ * 支持 ?inline 导入 CSS 文件作为字符串
+ */
+declare module '*.css?inline' {
+  const content: string;
+  export default content;
+}
+
+/**
+ * 支持 ?raw 导入 CSS 文件作为字符串（备用）
+ */
+declare module '*.css?raw' {
+  const content: string;
+  export default content;
+}

package/src/index.ts

@@ -4,6 +4,7 @@
  * 导出 reveal.js 适配器和 SlideRunner 工厂函数
  *
  * 样式会自动加载（包含 reveal.js 核心 CSS）。
+ * CSS 通过 runner.ts 动态注入，无需手动导入。
  * 主题样式需要单独导入（可选）：
  * ```typescript
  * import 'reveal.js/dist/theme/black.css';
@@ -11,9 +12,6 @@
  * ```
  */
 
-// 导入核心样式（自动加载）
-import './style.css';
-
 // 适配器（低级 API）
 export { RevealJsAdapter } from './adapter';
 export type { RevealJsOptions } from './types';

package/src/runner.ts

@@ -9,6 +9,9 @@ import { SlideRunner } from '@slidejs/runner';
 import type { SlideContext } from '@slidejs/context';
 import { RevealJsAdapter } from './adapter';
 import type { RevealJsOptions } from './types';
+// 导入 CSS 内容用于注入
+import revealCSS from 'reveal.js/dist/reveal.css?inline';
+import customCSS from './style.css?inline';
 
 /**
  * SlideRunner 配置选项
@@ -65,10 +68,48 @@ export async function createSlideRunner<TContext extends SlideContext = SlideCon
   // 2. 编译为 SlideDSL
   const slideDSL = compile<TContext>(ast);
 
-  // 3. 创建适配器和 Runner
+  // 2.1 注入 Reveal.js CSS 到 document.head（全局，如果尚未注入）
+  const globalStyleId = 'reveal-styles';
+  const globalStyles = document.head.querySelector(`#${globalStyleId}`);
+  if (!globalStyles) {
+    const style = document.createElement('style');
+    style.id = globalStyleId;
+    style.textContent = revealCSS;
+    document.head.appendChild(style);
+  }
+
+  // 2.2 获取用户提供的容器元素
+  let userContainer: HTMLElement;
+  if (typeof config.container === 'string') {
+    const element = document.querySelector(config.container);
+    if (!element) {
+      throw new Error(`Container not found: ${config.container}`);
+    }
+    userContainer = element as HTMLElement;
+  } else {
+    userContainer = config.container;
+  }
+
+  // 2.3 注入自定义 CSS 样式到容器
+  const styleId = 'slidejs-runner-revealjs-styles';
+  if (!userContainer.querySelector(`#${styleId}`)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = customCSS;
+    userContainer.appendChild(style);
+  }
+
+  // 2.4 创建一个新的 div 节点用于 Reveal.js（Reveal.js 会接管这个 div）
+  const revealContainer = document.createElement('div');
+  // 确保容器占满父元素的高度和宽度
+  revealContainer.style.width = '100%';
+  revealContainer.style.height = '100%';
+  userContainer.appendChild(revealContainer);
+
+  // 3. 创建适配器和 Runner（将 revealContainer 传给 Runner，而不是 userContainer）
   const adapter = new RevealJsAdapter();
   const runner = new SlideRunner<TContext>({
-    container: config.container,
+    container: revealContainer,
     adapter,
     adapterOptions: {
       revealConfig: config.revealOptions,