npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wcc.js

v1.0.19

Published

Compiler for wxml and wxss files.

Downloads

2

Readme

实现微信开发者工具的wcc编译器

wcc.jswxml文件和wxs文件编译器的nodejs实现

目标:

  • 二级制文件wcc实现为nodejs模块wcc.js
  • 完善的测试用例支持
  • 完善的性能测试
  • 客观的编译性能

项目如何使用wcc.js

npm安装wcc.js依赖:

npm install wcc.js --save

代码示例:

let WCC = require('wcc.js');
let wccCompileConfig = {
  cmd: ['-d', '-cc', '-gn', '$gwx'], //指定运行的参数
  FILESBASE: [
    '/Users/xxx/proj/miniprogram/proj1/' //项目文件的目录
  ],
  FILES: [
    "./pages/index/index.wxml", // 在FILESBASE目录下的项目文件列表
  ]
};
WCC(wccCompileConfig).then(function (wccRes) {
  /*wccRes: {code: 'output code', templatesObjs: {}}*/
  let code = wccRes.code; // 编译后的代码
}).catch(function (err) {
  /*err: {code: -1, message: 'error message'}*/
  console.error(err);
});

本地开发wcc.js

下载代码

git https://github.com/caijw/wcc.js.git
cd wcc.js
npm install

代码提交前的自动化测试:已经累计上千个测试用例

支持macOswindows,不支持linux

1 正向用例(wcc.js和wcc的正常运行且运行结果必须完全一致)

npm run test

2 反向用例(wcc.js和wcc都必须运行报错,提示开发者报错信息,报错信息不要求完全一致)

npm run test:fail

代码提交前的性能测试

支持macOswindows,不支持linux

npm run benchmark

wcc

微信开发者工具中的二进制编译器,用来将wxmlwxs文件,编译成js文件,

js文件在jsCore中执行后,可以得到$gwx函数,$gwx函数用来生成渲染页面

需要的虚拟dom节点的原始数据。

mac版本wcc文件地址: https://github.com/caijw/wcc.js/blob/master/test/wcc

windows版本wcc文件地址: https://github.com/caijw/wcc.js/blob/master/test/wcc.exe

如何获得wcc下载mac版本微信开发者工具,安装后,打开Applications目录,找到微信开发者工具,右键Show Package Contents,在Contents/Resources/package.nw/js/vender/wcc(该目录可能会被调整)。

已经完成的功能

一. 数据绑定

参考文档:

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

二. 列表渲染

参考文档:

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

三. 条件渲染

参考文档:

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/conditional.html

四. 模板

参考文档:

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html

五. 引用

参考文档:

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/import.html

六. 编译参数支持

wcc编译用法

wcc [-d] [-o OUTPUT] [-xc XComponentDefine] [-om XComponentDefine] [-cb [callback.js...]] <FILES... | -s <SINGLE_FILE>

[-d] 参数 output code for debug

debug info,wxml模板的调试信息输出,主要是在目标代码执行报错后

输出文件解析的位置信息。

已经完美支持。

[-cc] 参数 output compelete code for custom component

输出完整的自定义组件代码

已经完美支持。

[-ds] 参数 insert debug wxs info

debug info,wxs代码的调试信息输出

主要是在z数组中添加数据的文件名、行号和列号等信息

已经支持

[-xc] 参数 output simplified code for custom component

输出简化的自定义组件代码

支持了部分特性,因为wcc的简化策略比较无规则,还没完美支持。

[-cb] 参数 add life cycle callback

不支持

[-om] 参数

不支持

[--config-path] 参数

windows下,命令行参数太多会有问题,

当参数太长,将所有的命令行参数写入文件中,传递一个文件名给wcc

不支持,wcc.js的实现暂时不需要跨进程。

七. 自动化测试

运行:

npm run test
npm run test:fail

测试样例地址:

https://github.com/caijw/wcc.js/tree/master/test/succSuit

https://github.com/caijw/wcc.js/tree/master/test/failSuit

完善的测试样例,换提交测试用例来继续完善该项目,以覆盖到大部分的场景。

正向用例-测试流程要点:

  1. wcc.js将完整的小程序源码,编译成js代码code.wccjs.js
  2. wcc将完整的小程序源码,编译成js代码code.wcc.js
  3. 运行code.wccjs.js获取$gwx函数wccjs$gwx
  4. 运行code.wcc.js获取$gwx函数wcc$gwx
  5. 对于每个小程序页面path,运行wccjs$gwx获取渲染函数并运行该渲染函数,获取类似虚拟dom的数据结构path.wccjs.vd
  6. 对于每个小程序页面path,运行wcc$gwx获取渲染函数并运行该渲染函数,获取类似虚拟dom的数据结构path.wcc.vd
  7. 对比path.wccjs.vdpath.wccjs.vd是否完全一致

反向用例-测试流程要点:

测试样例均是不合法的样例

  1. wcc.js编译样例项目,报错
  2. wcc编译样例项目,报错
  3. wcc.jswcc是否都报错了

八. wxs

wxs标签和wxs文件编译进行编译

参考文档:

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/02variate.html

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/03annotation.html

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/04operator.html

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/05statement.html

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/06datatype.html

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/07basiclibrary.html

九. 性能测试

运行:

npm run benchmark

复用了自动化测试的测试样例,对比测试了wcc.jswcc编译相同的小程序项目的耗时对比

实现细节 TODO

wxml解析

改造了htmlparser2的token解析部分的实现,基于有穷状态的自动机,解析token十分高效!

wxml解析生成的AST格式参考

关于提交mr

欢迎提交测试样例,测试样例是完整的小程序源码,测试样例用来保证实现的正确性。

功能的实现可能不是很好,欢迎对代码进行改进。

提交前,前确保:

  1. 测试样例全部通过
  2. 确保改动后的性能不会变的太差