add wxss support and prefix

.eslintrc.js

@@ -81,7 +81,10 @@ module.exports = {
     'semi': [
       'error',
       'never'
-    ]
+    ],
+
+    // 补充规则
+    'max-len': 'off',
   },
   'globals': {
     'window': true,

docs/api.md

@@ -1,4 +1,4 @@
-# api
+# 接口
 
 ## behavior(definition)
 
@@ -28,7 +28,7 @@ const id = simulate.load('/path/to/component')
 
 ### tagName
 
-可选字段，当自定义组件被实例化后对应的 dom 节点的标签名。如果不传此字段则默认用 componentId 作为标签名。
+可选字段，当自定义组件被实例化后对应的 dom 节点的标签名。如果不传此字段则默认为 main。
 
 ```js
 const id = simulate.load('/path/to/component', 'custom-comp')

docs/detail.md

@@ -0,0 +1,32 @@
+# 细节
+
+为了尽量模仿出和小程序相似的环境，会对一些细节表现作一些调整。
+
+## class 前缀化
+
+小程序中为了达到类似 web components 的效果，对于自定义组件中的 class 会进行前缀化处理，用于实现样式隔离。为了支持这个效果，在调用 [load](./api.md#loadcomponentpath-tagname--loaddefinition) 接口时传入 tagName 参数，这样在渲染自定义组件时会使用 tagName 作为 class 的前缀。默认 tagName 为 main，即前缀为 main。
+
+假设自定义组件 comp 的模板为：
+
+```html
+<view class="abc">123</view>
+```
+
+```js
+simulate.load('/comp') // 渲染出来的结果是 <comp><wx-view class="main--abc">123</wx-view></comp>
+
+simulate.load('/comp', 'custom-comp') // 渲染出来的结果是 <comp><wx-view class="custom-comp--abc">123</wx-view></comp>
+```
+
+需要注意的是，当自定义组件里在 usingComponents 里引用了其他自定义组件的时候，是会默认声明 tagName，所以这种情况下都会进行 class 前缀化：
+
+```json
+{
+    "component": true,
+    "usingComponents": {
+        "other-comp": "./other"
+    }
+}
+```
+
+这里的 other 组件在被渲染时就默认会以 other-comp 为 tagName，other 组件内的 class 就会被前缀化，加上前缀 other-comp。

package.json

@@ -35,6 +35,7 @@
     "eslint-plugin-promise": "^3.8.0"
   },
   "dependencies": {
-    "j-component": "latest"
+    "j-component": "latest",
+    "postcss": "^7.0.6"
   }
 }

src/api/animation.js

@@ -0,0 +1,197 @@
+/**
+ * 动画实现
+ */
+class Animation {
+  constructor(option = {}) {
+    this.actions = []
+    this.currentTransform = []
+    this.currentStepAnimates = []
+
+    this.option = {
+      transition: {
+        duration: option.duration !== undefined ? option.duration : 400,
+        timingFunction: option.timingFunction !== undefined ? option.timingFunction : 'linear',
+        delay: option.delay !== undefined ? option.delay : 0,
+      },
+      transformOrigin: option.transformOrigin || '50% 50% 0',
+    }
+  }
+
+  export() {
+    const actions = this.actions
+    this.actions = []
+    return {actions}
+  }
+
+  step(option = {}) {
+    this.currentStepAnimates.forEach((animate) => {
+      if (animate.type !== 'style') {
+        this.currentTransform[animate.type] = animate
+      } else {
+        this.currentTransform[`${animate.type}.${animate.args[0]}`] = animate
+      }
+    })
+
+    this.actions.push({
+      animates: Object.keys(this.currentTransform).reduce((prev, key) => [...prev, this.currentTransform[key]], []),
+      option: {
+        transformOrigin: option.transformOrigin !== undefined ? option.transformOrigin : this.option.transformOrigin,
+        transition: {
+          duration: option.duration !== undefined ? option.duration : this.option.transition.duration,
+          timingFunction: option.timingFunction !== undefined ? option.timingFunction : this.option.transition.timingFunction,
+          delay: option.delay !== undefined ? option.delay : this.option.transition.delay,
+        },
+      },
+    })
+
+    this.currentStepAnimates = []
+    return this
+  }
+
+  matrix(a = 1, b = 0, c = 0, d = 1, tx = 1, ty = 1) {
+    this.currentStepAnimates.push({type: 'matrix', args: [a, b, c, d, tx, ty]})
+    return this
+  }
+
+  matrix3d(a1 = 1, b1 = 0, c1 = 0, d1 = 0, a2 = 0, b2 = 1, c2 = 0, d2 = 0, a3 = 0, b3 = 0, c3 = 1, d3 = 0, a4 = 0, b4 = 0, c4 = 0, d4 = 1) {
+    this.currentStepAnimates.push({type: 'matrix3d', args: [a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4]})
+    this.stepping = false
+    return this
+  }
+
+  rotate(angle = 0) {
+    this.currentStepAnimates.push({type: 'rotate', args: [angle]})
+    return this
+  }
+
+  rotate3d(x = 0, y = 0, z = 0, a = 0) {
+    this.currentStepAnimates.push({type: 'rotate3d', args: [x, y, z, a]})
+    this.stepping = false
+    return this
+  }
+
+  rotateX(a = 0) {
+    this.currentStepAnimates.push({type: 'rotateX', args: [a]})
+    this.stepping = false
+    return this
+  }
+
+  rotateY(a = 0) {
+    this.currentStepAnimates.push({type: 'rotateY', args: [a]})
+    this.stepping = false
+    return this
+  }
+
+  rotateZ(a = 0) {
+    this.currentStepAnimates.push({type: 'rotateZ', args: [a]})
+    this.stepping = false
+    return this
+  }
+
+  scale(sx = 1, sy) {
+    this.currentStepAnimates.push({type: 'scale', args: [sx, sy !== undefined ? sy : sx]})
+    return this
+  }
+
+  scale3d(sx = 1, sy = 1, sz = 1) {
+    this.currentStepAnimates.push({type: 'scale3d', args: [sx, sy, sz]})
+    return this
+  }
+
+  scaleX(s = 1) {
+    this.currentStepAnimates.push({type: 'scaleX', args: [s]})
+    return this
+  }
+
+  scaleY(s = 1) {
+    this.currentStepAnimates.push({type: 'scaleY', args: [s]})
+    return this
+  }
+
+  scaleZ(s = 1) {
+    this.currentStepAnimates.push({type: 'scaleZ', args: [s]})
+    return this
+  }
+
+  skew(ax = 0, ay = 0) {
+    this.currentStepAnimates.push({type: 'skew', args: [ax, ay]})
+    return this
+  }
+
+  skewX(a = 0) {
+    this.currentStepAnimates.push({type: 'skewX', args: [a]})
+    return this
+  }
+
+  skewY(a = 0) {
+    this.currentStepAnimates.push({type: 'skewY', args: [a]})
+    return this
+  }
+
+  translate(tx = 0, ty = 0) {
+    this.currentStepAnimates.push({type: 'translate', args: [tx, ty]})
+    return this
+  }
+
+  translate3d(tx = 0, ty = 0, tz = 0) {
+    this.currentStepAnimates.push({type: 'translate3d', args: [tx, ty, tz]})
+    return this
+  }
+
+  translateX(t = 0) {
+    this.currentStepAnimates.push({type: 'translateX', args: [t]})
+    return this
+  }
+
+  translateY(t = 0) {
+    this.currentStepAnimates.push({type: 'translateY', args: [t]})
+    return this
+  }
+
+  translateZ(t = 0) {
+    this.currentStepAnimates.push({type: 'translateZ', args: [t]})
+    return this
+  }
+
+  opacity(value) {
+    this.currentStepAnimates.push({type: 'style', args: ['opacity', value]})
+    return this
+  }
+
+  backgroundColor(value) {
+    this.currentStepAnimates.push({type: 'style', args: ['background-color', value]})
+    return this
+  }
+
+  width(value) {
+    this.currentStepAnimates.push({type: 'style', args: ['width', typeof value === 'number' ? value + 'px' : value]})
+    return this
+  }
+
+  height(value) {
+    this.currentStepAnimates.push({type: 'style', args: ['height', typeof value === 'number' ? value + 'px' : value]})
+    return this
+  }
+
+  left(value) {
+    this.currentStepAnimates.push({type: 'style', args: ['left', typeof value === 'number' ? value + 'px' : value]})
+    return this
+  }
+
+  right(value) {
+    this.currentStepAnimates.push({type: 'style', args: ['right', typeof value === 'number' ? value + 'px' : value]})
+    return this
+  }
+
+  top(value) {
+    this.currentStepAnimates.push({type: 'style', args: ['top', typeof value === 'number' ? value + 'px' : value]})
+    return this
+  }
+
+  bottom(value) {
+    this.currentStepAnimates.push({type: 'style', args: ['bottom', typeof value === 'number' ? value + 'px' : value]})
+    return this
+  }
+}
+
+module.exports = Animation