Enhance
以 HTML、服务端渲染 Web Components 和渐进增强为核心的全栈多页应用框架。
项目概述
Enhance 从可访问的服务端 HTML 开始，通过文件路由、数据 API 和 Custom Elements 组织应用，只在确有需要时加入浏览器 JavaScript。
Enhance 是一个 HTML-first 全栈 Web 框架，目标是使用长期稳定的 Web 标准构建轻量、可访问且易维护的多页应用。页面直接写成 HTML，并通过 app/pages 形成文件路由；可复用 UI 使用符合 Custom Elements 命名规则的 Enhance Elements，在服务器展开成完整 HTML，同时自动处理 Slot、样式作用域和脚本位置。app/api 中的函数在页面渲染前读取或写入数据，并把结果放入 state.store；原生表单在没有 JavaScript 时也能完成完整流程。需要局部交互时，可以再加载浏览器模块或把 Element 升级为真正的 Web Component。完整 Enhance 应用由 OpenJS Architect 与多个 @enhance 包组成，默认部署路径偏向 AWS/Begin，也可单独使用 Enhance SSR 或 WASM 将服务端 Web Components 接入其他语言与平台。
主要特点
Enhance 用服务端 HTML、原生表单和 Web Components 提供稳定基线，再按实际需求增量加入客户端行为。
HTML-first 页面
app/pages 中的标准 HTML 直接形成多页路由，浏览器无需框架 Runtime 即可获得内容、导航和表单基线。
服务端 Custom Elements
Enhance Elements 是返回 HTML 的纯函数，服务器会展开自定义标签、处理 Slot，并输出完整可解析的页面。
渐进增强
先交付可工作的 HTML，再为筛选、局部提交或复杂控件加载浏览器模块，使核心流程不依赖 JavaScript。
自动作用域样式
Element 内的 style 会去重并提升到 head，选择器自动加上 Custom Element 前缀，也可显式声明全局样式。
文件路由与数据 API
app/pages 定义页面，匹配的 app/api Route 在渲染前加载数据，并处理 GET、POST、PUT、PATCH 和 DELETE。
统一服务端状态
API 返回的 json 自动进入 state.store，Element 还可读取 attrs、instanceID 和 context，减少客户端状态同步。
静态资源与浏览器 Bundle
public 文件支持指纹化，app/browser 中的模块按需打包并通过 /_public 路径加载，页面可精确控制脚本范围。
全栈与可移植 SSR
完整应用可结合 Architect Cloud Functions 与数据库，也可通过 Enhance SSR/WASM 在其他服务器或语言渲染组件。
适用场景
适合重视可访问性、页面韧性和长期维护，并希望避免默认下载大型客户端 Runtime 的内容或表单型应用。
内容与机构网站
HTML-first、文件路由和服务端组件适合品牌站、文档、博客、政府与非营利组织网站。
表单密集型业务
注册、预约、申请、结账和后台录入可依靠原生表单完成，再用客户端脚本改善提交反馈。
无障碍优先产品
从语义 HTML 和浏览器默认行为起步，有助于让键盘、辅助技术和低能力设备获得稳定基线。
轻量电商与目录
商品和分类由服务器渲染，筛选、购物车或局部更新按组件增强，可控制每页 JavaScript。
长期维护型应用
依赖 HTML、CSS、ES Modules 和 Custom Elements 等标准，适合希望降低框架重写频率的团队。
跨平台组件库
Enhance SSR 与 WASM 可让服务端渲染的 Custom Elements 在多种语言、CMS 或现有服务器中复用。
优点与注意事项
技术选型不仅要看能力，也要理解它带来的团队成本。
主要优点
Enhance 擅长的地方
- 核心用户流程默认由 HTML、链接和原生表单完成，对脚本失败和弱网更有韧性
- 服务端输出完整内容，首屏、SEO 和辅助技术无需等待客户端渲染
- 组件建立在 Custom Elements、CSS 和 ES Modules 等浏览器标准之上
- 客户端 JavaScript 由页面显式选择，不会默认把全部组件逻辑发送给浏览器
- API Route 与 state.store 将服务端数据自然传给页面和 Element
- 作用域样式、Slot 展开、资源指纹和文件路由减少常见样板工作
- 维护策略强调稳定和较少破坏性变化，适合长生命周期项目
需要注意
采用前应考虑的问题
Enhance 以多页导航和服务器为中心；需要大量离线状态、画布或复杂客户端工作区时，原生 DOM 管理成本可能较高。
默认 API、Session、数据库与部署模型围绕 OpenJS Architect 和 AWS Cloud Functions，采用其他基础设施需要额外适配。
第三方组件、教程、集成和人才数量少于 React、Vue 或 Next.js，复杂问题可能需要直接阅读各个 @enhance 包。
维护者强调稳定、安全修复和渐进演进；需要快速增加前沿框架功能的团队应确认路线与维护响应符合预期。
标签名必须包含连字符，HTML Attribute 以字符串和小写为基础，复杂数据通常应通过 store 或服务端 context 传递。
Web Component 生命周期、事件、焦点和局部 DOM 更新需要显式设计，不会自动获得虚拟 DOM 状态同步。
默认项目主要使用 .mjs；官方提供 TypeScript Starter，但构建目录和开发流程与标准模板有所不同。
API Route 必须验证输入、授权资源、保护 Session 与 CSRF，并避免把敏感 state.store 数据渲染进 HTML。
快速开始
创建 Enhance 项目，并通过 HTML 页面、服务端 Element、API Route 和浏览器 Custom Element 构建渐进增强任务列表。
bashnpx "@enhance/create@latest" ./enhance-tasks -y
cd enhance-tasks
npm install
npm starthtml<main>
<h1>任务</h1>
<form method="post" action="/">
<label>
任务标题
<input name="title" required maxlength="120">
</label>
<button type="submit">添加</button>
</form>
<task-list></task-list>
</main>javascriptexport default function TaskList({ html, state }) {
const { tasks = [] } = state.store;
return html`
<style>
ul {
display: grid;
gap: 0.75rem;
padding: 0;
list-style: none;
}
</style>
<ul>
${tasks.map((task) => html`
<li data-task-id="${task.id}">
${task.title}
</li>
`)}
</ul>
`;
}javascriptconst tasks = [
{
id: "1",
title: "学习 Enhance",
completed: false,
},
];
export async function get() {
return { json: { tasks } };
}
export async function post(request) {
const title = String(request.body.title ?? "").trim();
if (!title || title.length > 120) {
return {
json: { tasks, error: "Invalid title" },
statusCode: 422,
};
}
tasks.push({
id: crypto.randomUUID(),
title,
completed: false,
});
return {
json: { tasks },
location: "/",
statusCode: 303,
};
}javascriptclass TaskFilter extends HTMLElement {
connectedCallback() {
const input = this.querySelector("input");
const tasks = document.querySelectorAll("[data-task-id]");
input?.addEventListener("input", () => {
const query = input.value.toLowerCase();
for (const task of tasks) {
task.hidden = !task.textContent
?.toLowerCase()
.includes(query);
}
});
}
}
if (!customElements.get("task-filter")) {
customElements.define("task-filter", TaskFilter);
}下一步：始终先实现无需 JavaScript 也能完成的链接和表单流程，再用 Web Component 改善局部体验；用户输入仍应在 API Route 服务端验证。
类似项目
这些方案同样强调服务端 HTML、局部交互或渐进增强，但在组件模型、运行时与全栈能力上有所不同。
Fresh
基于 Deno、Preact 与 Islands 架构，默认服务端渲染的全栈 Web 框架。
查看项目Astro
面向内容网站的 Web 框架，默认发送更少的客户端 JavaScript。
查看项目Eleventy
灵活、稳定且支持多种模板语言的 JavaScript 静态站点生成器。
查看项目Qwik City
基于 Qwik 可恢复执行模型，提供路由、数据加载和 Server Action 的全栈 Meta-framework。
查看项目htmx
通过 HTML Attribute 发起请求并交换服务端 HTML 的渐进增强库。
访问官网WebC
Eleventy 生态中用于编写可复用、服务端渲染 Web Components 的组件工具。
访问官网Enhance vs Fresh
Enhance 与 Fresh 都从服务端 HTML 和渐进增强出发，并允许只为局部交互发送 JavaScript。Enhance 使用标准 Custom Elements、原生表单与 Architect Function；Fresh 使用 Preact Islands、Deno Handler 和 Partials，组件与状态工具更接近现代 JSX 框架。
| 比较维度 | Enhance | Fresh |
|---|---|---|
| 核心技术 | HTML、Custom Elements、Node.js、Architect | Deno、Preact、Signals、Islands |
| 页面模型 | HTML-first 多页应用与文件路由 | 默认 SSR 页面，可通过 Partials 渐进导航 |
| 组件 | 服务端 Element 纯函数与 Web Component | 服务端 Preact 组件与客户端 Island |
| 客户端增强 | 显式加载 ES Module，使用原生 DOM 和生命周期 | Fresh 自动序列化并水合 Islands |
| 服务端数据 | app/api Route 返回 state.store 与响应 | Handler、Middleware、page() 和 Web API |
| 默认基础设施 | Architect、AWS Function、Begin | Deno 优先，可部署 Deploy、Workers、Docker |
| TypeScript | 可选官方 Starter，默认 JavaScript ESM | Deno 原生 TypeScript 工作流 |
| 更适合 | HTML 标准、表单和长期稳定优先的 MPA | Preact 组件、Islands 和 Deno 全栈产品 |
如果团队希望最大程度使用 HTML、Custom Elements 和原生浏览器行为，并接受 Architect/AWS 约定，Enhance 提供了非常直接的渐进增强路径；如果更偏好 JSX、Signals、类型化 Handler 和 Deno 工具链，同时需要更成熟的局部应用式导航，Fresh 更合适。两者都应先以真实表单、认证和部署环境验证数据与缓存边界。
资料核验
版本、维护信息与本页采用的官方资料来源。
本次核验覆盖 Enhance 的核心定位、主要能力、官方入口与开源许可。项目版本持续更新，具体补丁版本、兼容性和迁移要求请在采用前继续核对官方发布记录。
官方仓库未归档，但核验时最近可见的代码活动停留在 2024 年 5 月 7 日，且未发现近期正式发布。采用前应进一步确认维护响应、依赖兼容性和替代方案。