mip-component-validator 校验规则升级

clark-t commented 5 years ago

要解决什么问题 目前 mip2 validate -c 跑组件规则校验的时候并没有对 .js 组件进行校验，导致提交的 Custom Element 类型的第三方站长组件质量很差，需要尽快增加这块的校验规则。

描述一下你理想中的解决方案 清晰准确的描述你想怎么解决

描述你的备选方案 清晰准确的描述你考虑的备选方案

补充信息 补充其他信息，如截图等

clark-t commented 5 years ago

目前打算新增的校验包括：

目录结构
1. 第三方缩写默认采用 sites 下面的目录名作为第三方缩写（mipengine.org -> mipengine-org），也可以在各自站点文件夹下的 package.json 里面配置 short-name 来配置其他的第三方缩写（"short-name": "mipengine"）
  - 第三方缩写不允许存在重复
  - 对于新增的第三方强制要求参与校验
  - 对于目前已经上线的第三方可通过报 warning 限制后续修改等形式引导站长进行修改
2. 要求必须存在入口文件 components/mip-[第三方缩写]-[组件名]/mip-[第三方缩写]-[组件名].{js|vue}
3. 要求必须存在至少一个 example HTML：components/mip-[第三方缩写]-[组件名]/example/[页面名].html
4. 要求必须存在 README.md：components/mip-[第三方缩写]-[组件名]/README.md
js 文件校验
1. 要求过 standard 编码规范
2. 不允许使用 SANDBOX 白名单之外的 API
3. 组件注册优先采用 export default
4. 组件 Custom Element 的 ClassName 必须与文件名保持一致（mip-example -> MIPExample）
5. 不允许使用 document.createElement('script') 引入第三方 JS
6. 不建议使用 var me = this
css/less/stylus 文件校验
1. 必须遵循 stylelint-config-standard 规范
2. 必须存在以组件标签名作为根选择器避免样式污染（如：mip-example span {} mip-example .test {}）
3. 不允许使用 ID 选择器，页面可能存在多个组件的场景，因此 ID 不唯一
markdown 文件校验，这块与 MIP1 规则保持一致

clark-t commented 5 years ago

其他的一些规范补充：

原则上组件应该只影响自己 dom 节点及其 slot，包括功能、样式。

// good
this.element.querySelector('div')
// bad
document.querySelector('body')

// good
mip-example div {
}
.mip-example-sth {
}
[mip-example].div {
}
// bad
div {
}

组件应该在文档里标明是否支持内容嵌套，对于 slot 的影响也应该限定好影响面：

// 对于嵌套
// good
let children = this.element.children
// bad
let children = this.element.querySelector('.children')

组件临时插入的样式，应及时删除。比如为了过渡动画临时插入的 height，overflow hidden 等等
组件内部 url 禁止出现相对路径解释：页面被 cache 之后，页面地址会发生变化

mipengine / mip2

mip-component-validator 校验规则升级 #449