repository·main·Indexed 19 days ago
https://github.com/huxpro/vue-lynxA custom Vue 3 renderer that enables building applications for the Lynx framework, bridging the Vue ecosystem with Lynx's high-performance runtime. It supports a Single File Component (SFC) pipeline including <script setup>, template interpolation, dynamic attribute binding, and directives like v-if and v-for, as well as plain h() render functions.
vue-lynx is a Vue 3 custom renderer designed for building applications on Lynx. It allows developers to use Vue's core features and ecosystem to target the Lynx runtime.
Note: This project is currently in Pre-Alpha status; expect bugs.
Vue Lynx re-exports approximately 80 Vue 3 public APIs. These are categorized by their compatibility with the Lynx dual-thread model and renderer:
ref, reactive, computed, isRef).withDefaults, withMemo, createSlots). If Single File Components (SFCs) render correctly, these are functional.useId, useModel, onErrorCaptured).createStaticVNode, Teleport).The Swiper example provides three distinct implementation patterns for creating horizontal image galleries in Vue Lynx, ported from React Lynx. Depending on your requirements for interactivity and performance, you can choose from:
display: linear property.useUpdateSwiperStyle: Manages the container reference and sets styles on the Main Thread (MT).useOffset: Handles touch events, manages offset clamping, controls animations, and synchronizes via runOnBackground.useAnimate: A shared RequestAnimationFrame (RAF) animation utility.'main thread' directive, bypassing cross-thread communication latency.The touch-fx example demonstrates high-performance touch animations that run entirely on the Main Thread to avoid the latency of Background-to-Main Thread (BG↔MT) round-trips.
Key features include:
By using 'main thread' worklets and a requestAnimationFrame loop, the animation remains fluid and responsive to touch input without waiting for the Background Thread to process updates.
The Vue Lynx SFC pipeline supports standard Vue features. Based on the basic example, the following features are exercised and supported:
<script setup> including defineProps and defineEmits macros.{{ interpolation }}.:style.v-if, v-else, v-show, and v-for.@tap (the Lynx-specific tap event).The @vue-lynx-example/elk package provides a port of the Elk social client to Lynx. This documentation provides visual comparisons between the Lynx implementation (running on Lynx for Web via @lynx-js/web-core's <lynx-view>) and the original Elk running in Chromium.
When evaluating the port, focus on the anatomy of the UI components rather than the specific content of the timelines, as both versions connect to live instances (e.g., mas.to) at different times.
The implementation relies on three primary packages:
@vue-vine/runtime-lynx: Provides the Vue 3 custom renderer, the dual-thread event system, and the Worklet runtime.@vue-vine/rspeedy-plugin-vue-vine: An Rspeedy/Rsbuild build plugin that manages dual-bundle splitting for the Main and Background threads.packages/e2e-lynx: A demo/test application used to showcase progressive implementation stages.The HackerNews Slopfork example showcases the integration of several modern web technologies within the Vue Lynx environment:
@lynx-js/tailwind-preset to map atomic utility classes to Lynx flexbox properties.createMemoryHistory().The current implementation supports the following core features:
backgroundColor, padding, fontSize) and CSS class + selector support (via enableCSSSelector: true).v-if and v-for logic.bindtap and MTS (Main Thread Service) worklet events.<list> virtual list support.MainThreadRef element binding, MainThreadRef value state, and runOnMainThread execution.The HackerNews Slopfork example showcases several key capabilities within the Vue Lynx environment:
.class selectors, nesting, and CSS variables.createMemoryHistory().