kiss() 选项和 Vite 配置参考。
| 选项 | 默认值 | 说明 |
|---|---|---|
| routesDir | 'app/routes' | 页面和 API 路由目录 |
| islandsDir | 'app/islands' | 交互式 Island 组件目录 |
| componentsDir | 'app/components' | 共享组件目录 |
| middleware | undefined | Hono 中间件模块路径 |
| inject 新 | undefined | 注入样式表、脚本、HTML 片段到 <head> |
| packageIslands 新 | [] | 要扫描 Island 的包名数组（自动探测） |
| ui 已弃用 | undefined | 请使用 inject 替代 |
通用 <head> 注入——替代旧的 ui 选项。适用于 任何 CDN 或本地资源：
kiss({
inject: {
stylesheets: [
'https://cdn.example.com/style.css',
],
scripts: [
'https://cdn.example.com/ui.js',
],
headFragments: [
'<meta name="theme-color" content="#0a0a0a">',
],
},
})
自动探测并注册来自 npm/JSR 包的 Islands。框架会扫描包的
islands 导出并自动注册：
kiss({
// 从 @kissjs/ui 包自动探测 Islands
packageIslands: ['@kissjs/ui'],
})
包必须导出 islands 数组。详见
Islands 架构。
// vite.config.ts
import { kiss } from '@kissjs/core';
import { defineConfig } from 'vite';
export default defineConfig({
base: '/', // GitHub Pages 设为 '/repo/'
plugins: [
kiss({
routesDir: 'app/routes',
islandsDir: 'app/islands',
componentsDir: 'app/components',
middleware: 'app/middleware.ts',
// 从包自动探测 Islands
packageIslands: ['@kissjs/ui'],
// 通用 head 注入（推荐）
inject: {
stylesheets: ['https://cdn.jsdelivr.net/npm/@awesome-webcomponents/webawesome@3.5.0/dist/styles.css'],
scripts: ['https://cdn.jsdelivr.net/npm/@awesome-webcomponents/webawesome@3.5.0/dist/webawesome.loader.js'],
},
// 旧版 WebAwesome CDN 快捷方式（已弃用，请用 inject）
// ui: { cdn: true, version: '3.5.0' },
}),
],
})my-app/
app/
routes/ # 基于文件的路由
index.ts # /
about.ts # /about
api/
posts.ts # /api/posts (Hono)
islands/ # 交互式组件（自动探测）
counter.ts
components/ # 共享 Lit 组件
header.ts
deno.json
vite.config.ts