在模版里感知或者校验数据对象的属性 或者 将 tsx 编译成wxml

[zaaack]

这个项目非常不错，话说有没有可能支持在模版里感知或者校验数据对象的属性? 或者能像 weact 一样把 tsx 给编译成模版? 之前有过想法用 ts-simple-ast 实现一个 tsx 版的 weact, 不过时间上有点来不及了。。如果 minapp 能支持 tsx -> wxml, css-in-js -> wxss 的话感觉会很棒, 我有时间也可以贡献一点代码。

[qiu8310]

这一块难度还是蛮大的，暂时我还没计划做。先想把基本开发需要的东西做好，后期如果 minapp 反响不错的话再做深入。

比如现在组件的提示还不支持自定义的组件，只能提示官方文档上的组件，目前需要让 wxml 可以自动提示自定义的组件

[qiu8310]

先记着吧

[zaaack]

感觉像 weact 一样把 tsx 编译成模版的难度要小一点，这样就可以复用 tsc 的智能感知，重命名等功能了

[qiu8310]

微信的 wxml 和我们用 react 那种方式差别还是蛮大的，如果做成了类似于 jsx 或 tsx 那样，写模板会有好多限制，或者说我们得考虑各种可能的情况，来达到编译成 wxml：

用户可能会在 render 函数之前先对数据进行运算处理，也可能在模板中使用 js 的循环，而不是 wxml 中的循环，这些感觉如果要做好的话，都需要考虑吧。

还有一些这样的问题：我昨天写组件的时候，在模板中监听 onClose 事件，微信开发者工具好像还会自动帮我把它变成全小写的 onclose。。。

不过看到 weact 好像做的也不错，有时间我也看看

[zaaack]

之前有过一些设想，可供参考一下:

用户可能会在 render 函数之前先对数据进行运算处理，

这个我觉得可以给 setData 包一层，比如 setState, setState 里调用 render, 然后把 render 里计算的局部变量抽取出来传递到setData 里，这样 wxml 里拿到的就是 render 后的状态了，

也可能在模板中使用 js 的循环，而不是 wxml 中的循环，这些感觉如果要做好的话，都需要考虑吧。

循环的问题可能没有啥好的解决办法，不过我觉得可以简化一点，jsx 里只能使用 wxml 里的循环标签来循环，只需要解决类型的问题就好了，而这个问题其实也比较好解决，可以在 render 函数里手动 declare 一个 item var，然后在编译的时候可以检查 for 标签里声明的 item 变量是不是和手动声明的对应，虽然写法会有些限制，但是最主要的是能利用到 ts 的检查，而且灵活性也没有降低。

如果能做好的话我觉得可以加个编译时的错误提示，vscode 貌似支持把编译输出的错误映射到源文件里，这样一些不合法的写法比如 js 里的循环和标签可以预先提示出来。就算 alpha 版不能提示，微信开发者工具里应也跑不起来。。

还有一些这样的问题：我昨天写组件的时候，在模板中监听 onClose 事件，微信开发者工具好像还会自动帮我把它变成全小写的 onclose。。。

ts 的 jsx 类型定义 是可以自定义的，应该可以自己参考 types/react 实现一套符合 wxml 的。。

[zaaack]

可以用这个来解析 jsx 文件，速度比较快。。 https://github.com/cherow/cherow

[zaaack]

昨天写了个比较简单的基于 ts-simple-ast 的原型，以及一个类型生成脚本, 代码很粗放，也没做严格的测试，可供参考, 时间有限就懒得提 pr 了。。 🤦‍♂️

目前功能很简单，只支持把 src/**/*.tsx 文件编译成对应的 src/**/*.wxml, 由于minapp 不支持扩展，不能移除 tsx 代码， 所以 tsx 文件只能作为单独的文件存在，不打包进去就不会影响了.

支持的功能有:

• jsx 属性和插值语法替换成 wxml 的属性和插值语法
• 自定义组件编译成模版以及将 自定义组件的 import 编译成模版的 include
• 监听文件改动自动编译
• 函数组件支持用第一个参数的标识符来引用，也支持解构之后的直接引用(解构别名不支持)

不支持:

• 函数中包含其他计算出的变量。
• component 组件

使用方法:
将 jsx2wxml.ts 和 typesgen.ts 放到 src/tools目录下，然后执行 ts-node src/tools/typesgen.ts 会生成类型定义到 src/utils 目录下, 执行ts-node src/tools/jsx2wxml.ts 会监听所有的 tsx 文件并编译成 wxml

Edit: 代码见下面 👇 #5 (comment)

[qiu8310]

谢谢！

不过这样看的确实有点累，建议最好放在一个项目中，可以跑的项目

[zaaack]

@qiu8310 https://github.com/zaaack/tsx2wxml

[zaaack]

新上传的这个修了些 bug, 直接看新的 repo 就好了。