HackerNews
为了更好地测试所有生态系统组件能否协同工作,我们 Fork 了 Evan You 的经典 Vue HackerNews 2.0 作为 Vue Lynx 的「真实世界」验证基准。由于 Vue Lynx 基于 Vue 3,我们同时使用了社区的 Vue HackerNews 3.0 移植版作为参考。这个移植验证了四个主流生态库的协同工作:Vue Router、Pinia、TanStack Vue Query 和 Tailwind CSS。
Tailwind CSS 版本
在第一轮迭代中,我们让 AI 用 Tailwind CSS (@lynx-js/tailwind-preset) 重写了样式。
CSS 版本
在这一版中,我们让 AI 尽可能复用参考实现原有的 SCSS 文件。有趣的是,CSS 版本保留了桌面端的 max-width 居中布局。你可以点击下方的「全屏」按钮来体验这个效果。
两个 HackerNews 版本都特意保留了最外层的显式 <page>。Vue Lynx 会把这个包装上的 class、样式和事件转发到唯一的原生 page 根节点,而不会再创建一个原生元素。这样示例就能在 LynxExplorer 中同时覆盖 Tailwind 和 SCSS 的根节点样式。
Lynx 引擎兼容性
我们同时对前端 bundle 和 Lynx Engine 版本进行了回归 bisect:
这些示例请使用 Lynx Engine 3.8.1 或更高版本。3.8.1 是测试中能够完整渲染 Tailwind 应用的最早引擎。3.6.0 和 3.7.0 即使数据请求成功,仍存在独立的路由不可见问题。
CSS 错误在 3.6.0、3.8.1 和 4.1 上保持一致,因此它属于前端根节点处理回归,不能据此认为显式 <page> 要求 Engine 4.1。修复后的 bundle 已在源码构建的 4.1 引擎上直接验证;对 3.8.1 和 3.9.0 的支持是根据这次 bisect 以及本修复复用既有原生 page 的实现推断得出,仍待在对应 Explorer release 上直接复测。
改动概览
大部分代码可以直接迁移 —— 组件逻辑、Vue Router、Composition API,甚至 <Transition>/<TransitionGroup> 都完全一致。Vue HackerNews 3.0 参考实现是一个基于 Webpack 的 SSR 应用,使用 Vue 3 + Vuex 4 + axios。移植到 Lynx 时的改动如下:
值得注意的适配:
- 没有
v-html:Lynx 没有 HTML 解析器,所以我们用stripHtml()工具函数将 HTML 评论转换为纯文本 <router-link>:用 Vue Router 的customslot API 包装,因为 Lynx 没有<a>标签