KISS 框架如何实现 K·I·S·S 架构约束—— 将 Hono、Lit 和 Vite 融合为一个插件。
// vite.config.ts —— 你唯一的配置
import { kiss } from '@kissjs/core';
export default defineConfig({
plugins: [kiss()]
})K·I·S·S 约束与 Jamstack 三大支柱一一对应， 完全通过 Web 标准实现：
| Jamstack | KISS 约束 | 实现方式 | Web 标准 |
|---|---|---|---|
| Markup | K + S（知识 + 语义） | SSG + DSD —— 零 JS 静态 HTML | 声明式 Shadow DOM |
| APIs | S（Static —— Serverless 扩展） | API Routes —— Hono handlers + RPC | Fetch API |
| JavaScript | I（Isolated） | Islands —— Shadow DOM + 懒 Hydration | Web Components |
没有其他框架用原生 Web 标准覆盖 Jamstack 的全部三个维度。
kiss() 函数返回一组 Vite 插件，每个强制一个特定的 KISS 约束：
| 插件 | Hook | 职责 | 约束 |
|---|---|---|---|
| kiss:core | configResolved + buildStart | 路由扫描 + 虚拟模块生成 | K（知识） |
| kiss:virtual-entry | resolveId + load | 提供 virtual:kiss-hono-entry | — |
| @hono/vite-dev-server | configureServer | 开发模式 Hono 中间件 | — |
| island-transform | transform | AST 标记（__island, __tagName） | I（隔离） |
| island-extractor | build | 构建时 Island 依赖分析 | I（隔离） |
| html-template | transformIndexHtml | Preload、meta、hydration 注入 | I（隔离） |
| kiss:ssg | closeBundle | 带 DSD 的静态站点生成 | K + S（知识 + 静态） |
| kiss:build | build | Island 客户端 JS 打包 | I（隔离） |
请求 → Vite Dev Server → Hono 中间件 → 路由匹配
→ Vite SSR (ssrLoadModule) → @lit-labs/ssr 渲染 Lit
→ HTML + 声明式 Shadow DOM → 注入 Island hydration → 响应vite build → closeBundle hook:
1. 扫描路由 ← K：所有路由在构建时已知
2. 生成带 DOM shim 的 SSG 入口
3. 创建 Vite SSR 服务器（configFile: false）
4. 加载入口 → Hono app → toSSG()
5. @lit-labs/ssr 用 DSD 渲染每页 ← K：内容编码在 HTML 中
6. Island 组件 → 独立 JS chunks ← I：隔离的 JS 包
7. 非 Island 组件 → 零客户端 JS ← I：不需要的地方无 JS
8. 写入 dist/ 为静态 HTML ← S：仅静态输出KISS 架构的 S 约束（Static）意味着你独立部署两样东西：
| 组件 | 内容 | 约束 | 部署到 |
|---|---|---|---|
| dist/（静态） | HTML + DSD + Island JS | K + I + S | CDN / GitHub Pages / S3 |
| API Routes（动态） | Hono Handlers | S（Serverless） | Serverless（Deno Deploy / CF Workers） |
静态文件走 CDN 获得全球性能。API Routes 部署为 Serverless 函数。两者零耦合。这就是 S 约束强制执行的 Jamstack 模型。
每个由 @lit-labs/ssr 渲染的 Lit 组件都输出 声明式 Shadow DOM。这满足了 K 约束（构建时内容知识）和 S 约束 （无 JS 的语义基线）：
<!-- SSG 输出的 Lit 组件 -->
<app-layout>
<template shadowrootmode="open">
<style>/* 作用域样式 */</style>
<header>...</header>
<main><slot></slot></main>
<footer>...</footer>
</template>
<!-- 插槽页面内容 -->
</app-layout>支持 DSD 的浏览器立即渲染 Shadow DOM 内容。 当 Lit hydration 时，它复用现有 DOM —— 无闪烁，无重复。
构建时，island-transform 标记 island 模块。island-extractor > 构建依赖映射。HTML 模板插件注入 hydration 脚本，只懒加载页面需要的 island JS 包。这强制执行 I 约束——只有 Islands 获得 JS。