Incremark Solid 版本上线:Vue/React/Svelte/Solid 四大框架,统一体验

Incremark 现已支持 Solid,至此完成了对 Vue、React、Svelte、Solid 四大主流前端框架的全面覆盖。

为什么要做框架无关

市面上大多数 Markdown 渲染库都是针对特定框架开发的。这带来几个问题:

  1. 重复造轮子:每个框架社区都在独立实现相似的功能
  2. 能力不一致:不同框架的实现质量参差不齐
  3. 团队切换成本:换框架意味着重新学习新的 API

Incremark 采用不同的思路:核心逻辑与 UI 框架完全解耦

@incremark/core 负责所有解析、转换、增量更新的工作,输出的是框架无关的数据结构。各框架包(@incremark/vue@incremark/react@incremark/svelte@incremark/solid)只需要把这些数据渲染成对应框架的组件即可。

这意味着:

  • 核心能力一次实现,四个框架同时受益
  • Bug 修复和性能优化自动同步到所有框架
  • API 设计保持高度一致,切换框架几乎零学习成本

包结构

text
复制代码
┌───────────────────────────────┐ │ @incremark/core │ │ │ │ 增量解析 · 双引擎 · 插件系统 │ └───────────────┬───────────────┘ │ ▼ ┌───────────────────────────────┐ │ @incremark/vue │ │ @incremark/react │ │ @incremark/svelte │ │ @incremark/solid ← NEW │ └───────────────┬───────────────┘ │ ▼ ┌───────────────────────────────┐ │ @incremark/theme │ │ │ │ 样式 · 主题 · 代码高亮 │ └───────────────────────────────┘

增量解析

传统 Markdown 渲染器在流式场景下存在性能问题:每次新内容到达都要重新解析整个文档,复杂度是 O(n²)。

Incremark 只处理新增内容,已解析的块不再重复处理,复杂度降至 O(n)。

四个框架的用法对比

四个框架的组件 API 完全一致,只是语法风格不同:

Vue

vue
复制代码
<script setup> import { IncremarkContent } from '@incremark/vue' // ... </script> <template> <IncremarkContent :content="content" :is-finished="isFinished" /> </template>

React

tsx
复制代码
import { IncremarkContent } from '@incremark/react' // ... <IncremarkContent content={content} isFinished={isFinished} />

Svelte

svelte
复制代码
<script> import { IncremarkContent } from '@incremark/svelte' // ... </script> <IncremarkContent content={content} isFinished={isFinished} />

Solid

tsx
复制代码
import { IncremarkContent } from '@incremark/solid' // ... <IncremarkContent content={content()} isFinished={isFinished()} />

可以看到,除了各框架本身的响应式语法差异(Vue 的 ref、React 的 useState、Svelte 的 $state、Solid 的 createSignal),组件的使用方式完全统一。

在线演示

链接

MIT 许可证。

0个评论
点击登录,快来和大家讨论吧~
表情
图片
暂无评论
下载 APP