@slidejs/runner-swiper 0.1.1 → 0.1.3

package/src/runner.ts

@@ -9,6 +9,9 @@ import { SlideRunner } from '@slidejs/runner';
 import type { SlideContext } from '@slidejs/context';
 import { SwiperAdapter } from './adapter';
 import type { SwiperAdapterOptions } from './types';
+// 导入 CSS 内容用于注入
+import swiperCSS from 'swiper/css?inline';
+import customCSS from './style.css?inline';
 
 /**
  * SlideRunner 配置选项
@@ -65,10 +68,44 @@ export async function createSlideRunner<TContext extends SlideContext = SlideCon
   // 2. 编译为 SlideDSL
   const slideDSL = compile<TContext>(ast);
 
-  // 3. 创建适配器和 Runner
+  // 2.1 Set to Global
+  const globalStyles = document.head.querySelector('#swiper-styles');
+  if (!globalStyles) {
+    const style = document.createElement('style');
+    style.id = 'swiper-styles';
+    style.textContent = swiperCSS;
+    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-swiper-styles';
+  if (!userContainer.querySelector(`#${styleId}`)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = customCSS;
+    userContainer.appendChild(style);
+  }
+
+  // 2.4 创建一个新的 div 节点用于 Swiper（Swiper 会接管这个 div）
+  const swiperContainer = document.createElement('div');
+  userContainer.appendChild(swiperContainer);
+
+  // 3. 创建适配器和 Runner（将 swiperContainer 传给 Runner，而不是 userContainer）
   const adapter = new SwiperAdapter();
   const runner = new SlideRunner<TContext>({
-    container: config.container,
+    container: swiperContainer,
     adapter,
     adapterOptions: {
       swiperConfig: config.swiperOptions,

package/src/style.css

@@ -0,0 +1,154 @@
+/**
+ * @slidejs/runner-swiper - Swiper 核心样式
+ *
+ * 此文件导入 Swiper 的核心 CSS，用户只需导入此包即可获得所有必需的样式。
+ * 可选样式（如 navigation、pagination）需要单独导入。
+ *
+ * 使用示例：
+ * ```typescript
+ * import '@slidejs/runner-swiper';
+ * // 或显式导入样式
+ * import '@slidejs/runner-swiper/style.css';
+ * ```
+ *
+ * 自定义样式：
+ * 可以通过 CSS 变量自定义样式，例如：
+ * ```css
+ * :root {
+ *   --slidejs-swiper-navigation-color: #007aff;
+ *   --slidejs-swiper-pagination-color: #007aff;
+ * }
+ * ```
+ */
+
+/* Swiper 容器基础样式 */
+.swiper {
+  width: 100%;
+  height: 100%;
+
+  /* Runner 特定变量映射 - 将标准变量映射到 Swiper 特定变量 */
+  /* 注意：标准变量的默认值由 @slidejs/theme 包定义，runner 只消费这些变量 */
+
+  /* Swiper 导航按钮颜色 - 从标准变量映射（fallback 仅作为临时默认值） */
+  --slidejs-swiper-navigation-color: var(--slidejs-navigation-color, #007aff);
+  /* Swiper 分页器颜色 - 从标准变量映射（fallback 仅作为临时默认值） */
+  --slidejs-swiper-pagination-color: var(--slidejs-pagination-color, #007aff);
+  /* Swiper 分页器激活颜色 - 从标准变量映射（fallback 仅作为临时默认值） */
+  --slidejs-swiper-pagination-bullet-active-color: var(--slidejs-pagination-active-color, #007aff);
+  /* Swiper 滚动条颜色 - 从标准变量映射（fallback 仅作为临时默认值） */
+  --slidejs-swiper-scrollbar-bg: var(--slidejs-scrollbar-bg, rgba(0, 0, 0, 0.1));
+  --slidejs-swiper-scrollbar-drag-bg: var(--slidejs-scrollbar-drag-bg, rgba(0, 0, 0, 0.5));
+
+  /* 同时设置 Swiper 自己的 CSS 变量（Swiper 的 CSS 使用这些变量） */
+  /* 注意：标准变量的默认值由 @slidejs/theme 包定义 */
+  --swiper-navigation-color: var(--slidejs-navigation-color, #007aff);
+  --swiper-pagination-color: var(--slidejs-pagination-color, #007aff);
+  --swiper-pagination-bullet-active-color: var(--slidejs-pagination-active-color, #007aff);
+  --swiper-theme-color: var(--slidejs-navigation-color, #007aff);
+}
+
+/* 应用 CSS 变量到 Swiper 组件 */
+/* 使用更具体的选择器确保能够覆盖 Swiper 的默认样式 */
+.swiper .swiper-button-next,
+.swiper .swiper-button-prev {
+  color: var(--swiper-navigation-color, var(--slidejs-swiper-navigation-color, #007aff)) !important;
+}
+
+.swiper .swiper-pagination-bullet {
+  background-color: var(
+    --swiper-pagination-color,
+    var(--slidejs-swiper-pagination-color, #007aff)
+  ) !important;
+}
+
+.swiper .swiper-pagination-bullet-active {
+  background-color: var(
+    --swiper-pagination-bullet-active-color,
+    var(--slidejs-swiper-pagination-bullet-active-color, #007aff)
+  ) !important;
+}
+
+.swiper .swiper-scrollbar {
+  background: var(--slidejs-swiper-scrollbar-bg, rgba(0, 0, 0, 0.1)) !important;
+}
+
+.swiper .swiper-scrollbar-drag {
+  background: var(--slidejs-swiper-scrollbar-drag-bg, rgba(0, 0, 0, 0.5)) !important;
+}
+
+/* Swiper Slide 样式 - 确保内容垂直和水平居中 */
+/* 注意：标准变量的默认值由 @slidejs/theme 包定义，fallback 仅作为临时默认值 */
+.swiper-slide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: var(--slidejs-background-color, #fff);
+  padding: 2rem;
+  box-sizing: border-box;
+}
+
+/* Slide Content 容器样式 - 允许通过 CSS 变量自定义 */
+/* 注意：标准变量的默认值由 @slidejs/theme 包定义，fallback 仅作为临时默认值 */
+.slide-content {
+  width: 100%;
+  text-align: center;
+}
+
+.slide-content h1 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  color: var(--slidejs-heading-color, #333);
+}
+
+.slide-content h2 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  color: var(--slidejs-heading-color, #666);
+}
+
+.slide-content h3 {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+  color: var(--slidejs-heading-color, #666);
+}
+
+.slide-content p {
+  font-size: 1.2rem;
+  line-height: 1.6;
+  color: var(--slidejs-text-color, #555);
+  margin-bottom: 1rem;
+}
+
+.slide-content ul {
+  text-align: left;
+  display: inline-block;
+  font-size: 1.2rem;
+  line-height: 1.8;
+  color: var(--slidejs-text-color, #555);
+}
+
+.slide-content li {
+  margin-bottom: 0.5rem;
+}
+
+.slide-content img {
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* 导航按钮样式 */
+.swiper-button-next:after,
+.swiper-button-prev:after {
+  font-size: 24px;
+}
+
+/* 分页器样式 */
+.swiper-pagination-bullet {
+  opacity: 0.5;
+}
+
+.swiper-pagination-bullet-active {
+  opacity: 1;
+}

package/tsconfig.json

@@ -6,7 +6,7 @@
     "composite": true,
     "declarationMap": true
   },
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "src/env.d.ts"],
   "exclude": ["**/*.test.ts", "dist", "node_modules"],
   "references": [{ "path": "../core" }, { "path": "../runner" }]
 }

package/vite.config.ts

@@ -20,8 +20,20 @@ export default defineConfig({
         // Only externalize JS modules from swiper, NOT CSS
         /^swiper\/.*\.js$/,
       ],
+      output: {
+        // 确保 CSS 文件被正确提取为 style.css
+        assetFileNames: assetInfo => {
+          // 将所有 CSS 文件重命名为 style.css（与 package.json exports 一致）
+          if (assetInfo.name && assetInfo.name.endsWith('.css')) {
+            return 'style.css';
+          }
+          return assetInfo.name || 'assets/[name].[ext]';
+        },
+      },
     },
     sourcemap: true,
+    // CSS 被提取到单独文件，但通过 import 语句自动加载
+    cssCodeSplit: false,
   },
   plugins: [
     dts({