让你的react代码跑在svelte引擎上

背景

Svelte UI框架是一款类似react、vue一样的UI框架，有兴趣的同学可以自行查阅。Svelte有着很多不一样的特质，其中我们最为关注的是它的运行前编译。像更简洁灵活的响应式写法、更小的运行包体积这些都得益于运行前编译；但同样也存在它的局限性，Svelte无法像React一样做到高度灵活的模板嵌套、封装以及独立上下文。早期在小项目中我们也体验过，在包体积上收益颇大；但目前整个淘系前端还是有着自己统一的一套基于React的Rax framework，如果说需要将Svelte的收益快速落地最好的方式肯定不是重构所有的业务与生态。

主体思路

要实现dsl层无感换引擎也就只有在ast层做转换，所以我们从开始的思路就是React ast -> Svelte ast，为了保证这一思路的清晰我们暂且把框架的特性（hook、函数jsx）丢掉，保留最干净的三部分jsx、js、css进行转换。主体思路如下

JSX转换

jsx可以说是这两个UI框架最大差异的体现；React的jsx是运行时，原汁原味保留着原生js运行时的灵活性，而Svelte的html是运行前编译，意味着运行前就会敲定html中的逻辑与依赖变量。我暂且将jsx本身拆分为三部分：element节点、attribute属性、mustache模板系统、函数JSX

element与attribute

这部分主要是常规的节点属性映射能力

mustache模板系统

在React的模板系统中可以有以下几种可能：

1、变量输出 { xxx } 

2、与运算jsx输出 { xx && <view> } 

3、三元运算jsx输出 { xx ? <n> : <m> } 

4、函数调用jsx输出 { jsxFn() }