只在需要的地方添加交互性。默认零 JS。
KISS 架构只有两个层级。没有 SPA——这是 S 约束（Static）。
| 层级 | 渲染方式 | JS 大小 | 使用场景 |
|---|---|---|---|
| 0 | SSG + 声明式 Shadow DOM | 0 KB | 博客、文档、营销页 |
| 1 | Islands + 懒 Hydration | ~6 KB / island | 计数器、表单、代码复制 |
默认：层级 0（零 JS）。通过 app/islands/ 按组件选择加入。
创建 Island 前，确认低层无法解决问题：
island-transform 用 __island 和 __tagName 标记 island 模块。island-extractor 构建依赖映射。SSG 输出包含 island 占位元素。
hydration 脚本只懒加载当前页面需要的 island JS 包。Islands 按需求 hydration（可见时、空闲时、或立即——可配置）。
在 app/islands/ 下创建文件：
// app/islands/counter.ts
import { LitElement, html, css } from '@kissjs/core'
export const tagName = 'my-counter'
export default class MyCounter extends LitElement {
static properties = { count: { type: Number } }
constructor() {
super()
this.count = 0
}
render() {
return html`
<button @click=${() => this.count++}>+</button>
<span>${this.count}</span>
<button @click=${() => this.count--}>-</button>
`
}
}在任何路由中使用——它会自动在客户端 hydration。
KISS 可以自动探测并注册来自 npm/JSR 包的 Islands。这使得 可复用的 Island 组件可以跨项目共享。
在你的包中，创建一个 Island 并通过 islands 数组导出它：
// packages/my-ui/src/my-counter.ts
import { LitElement, html, css } from 'lit'
export const tagName = 'my-counter'
export default class MyCounter extends LitElement {
static properties = { count: { type: Number } }
render() {
return html`<button @click=${() => this.count++}>Count: ${this.count}</button>`
}
}
// packages/my-ui/src/index.ts
import type { PackageIslandMeta } from '@kissjs/core'
import MyCounter, { tagName as counterTag } from './my-counter.js'
// 导出 islands 数组供自动探测
export const islands: PackageIslandMeta[] = [
{ tagName: counterTag, modulePath: 'my-ui/my-counter', strategy: 'eager' }
]
export { MyCounter }
在 vite.config.ts 中配置 packageIslands：
// vite.config.ts
import { kiss } from '@kissjs/core'
export default {
plugins: [
kiss({
packageIslands: ['my-ui'], // 从 my-ui 包自动探测 islands
})
]
}框架会自动导入并注册包中的所有 Islands。无需手动注册。
| 字段 | 类型 | 说明 |
|---|---|---|
tagName |
string | 自定义元素标签名（如 'my-counter'） |
modulePath |
string | 相对于包的路径（如 'my-ui/my-counter'） |
strategy |
string | hydration 策略：'eager' | 'lazy' | 'idle' | 'visible'（默认：'eager'） |
非 Island 组件（在 app/components/ 和 app/routes/）在构建时使用声明式 Shadow DOM渲染。它们的内容在 JS 加载前就可见：
| 组件类型 | DSD 输出 | 客户端 JS |
|---|---|---|
| 页面组件（routes/） | ✓ 完整 DSD + 作用域样式 | 仅 hydration（框架） |
| 布局组件（components/） | ✓ 完整 DSD + 作用域样式 | 仅 hydration（框架） |
| Island 组件（islands/） | ✓ 占位符 DSD | ✓ 懒加载包 |