j-component 1.4.1 → 1.4.5

package/README.md

@@ -159,6 +159,28 @@ comp.dispatchEvent('customevent', {
 })
 ```
 
+##### addEventListener(eventName, handler, useCapture)
+
+用于外部监听组件触发的事件。
+
+```js
+comp.addEventListener('customevent', evt => {
+    console.log(evt)
+})
+```
+
+##### removeEventListener(eventName, handler, useCapture)
+
+用于外部取消监听组件触发的事件。
+
+```js
+const handler = evt => {
+    console.log(evt)
+    comp.removeEventListener('customevent', handler)
+}
+comp.addEventListener('customevent', handler)
+```
+
 ##### triggerLifeTime(lifeTime, args)
 
 触发组件实例的生命周期钩子。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "j-component",
-  "version": "1.4.1",
+  "version": "1.4.5",
   "description": "miniprogram custom component framework",
   "main": "index.js",
   "types": "index.d.ts",

package/src/componentmanager.js

@@ -42,11 +42,11 @@ class ComponentManager {
       // 支持内置 behavior
       if (item === 'wx://component-export') {
         return global.wxComponentExport
-      }
-      if (item === 'wx://form-field') {
+      } else if (item === 'wx://form-field') {
         return global.wxFormField
-      }
-      if (item === 'wx://form-field-button') {
+      } else if (item === 'wx://form-field-group') {
+        return global.wxFormFieldGroup
+      } else if (item === 'wx://form-field-button') {
         return global.wxFormFieldButton
       }
 

package/src/index.js

@@ -54,6 +54,10 @@ global.wxFormField = module.exports.behavior({
   }
 })
 
+global.wxFormFieldGroup = module.exports.behavior({
+  is: 'wx://form-field-group',
+})
+
 global.wxFormFieldButton = module.exports.behavior({
   is: 'wx://form-field-button',
   listeners: {

package/src/render/component.js

@@ -176,6 +176,22 @@ class Component {
     }
   }
 
+  /**
+   * 监听组件事件
+   */
+  addEventListener(eventName, handler, capture = false) {
+    if (typeof capture === 'object') capture = !!capture.capture
+    this._exparserNode.addListener(eventName, handler, {capture})
+  }
+
+  /**
+   * 取消监听组件事件
+   */
+  removeEventListener(eventName, handler, capture = false) {
+    if (typeof capture === 'object') capture = !!capture.capture
+    this._exparserNode.removeListener(eventName, handler, {capture})
+  }
+
   /**
    * 选取第一个符合的子组件节点
    */
@@ -264,7 +280,7 @@ class RootComponent extends Component {
   }
 
   get dom() {
-    return this._exparserNode.$$
+    return _.getDom(this._exparserNode)
   }
 
   /**

package/src/template/virtualnode.js

@@ -204,7 +204,7 @@ class VirtualNode {
     if (this.children && this.children.length) {
       if (this.type === CONSTANT.TYPE_FOR) {
         // 检查 for 语句
-        const list = expr.calcExpression(statement.for, data)
+        const list = expr.calcExpression(statement.for, data) || []
         options.extra = options.extra || {}
 
         for (let i = 0, len = list.length; i < len; i++) {

package/src/tool/utils.js

@@ -261,6 +261,25 @@ function relativeToAbsolute(basePath, relativePath) {
   return pathList.join('/')
 }
 
+/**
+ * 获取 exparser 节点对应的 dom 节点
+ */
+function getDom(exparserNode) {
+  let dom = exparserNode.$$
+  if (!dom) {
+    dom = document.createElement('virtual')
+    const fragment = document.createDocumentFragment()
+    const shadowRoot = exparserNode.shadowRoot
+    const childNodes = shadowRoot && shadowRoot.childNodes
+    if (childNodes && childNodes.length) {
+      childNodes.forEach(child => fragment.appendChild(getDom(child)))
+    }
+    dom.appendChild(fragment)
+  }
+
+  return dom
+}
+
 module.exports = {
   getId,
   copy,
@@ -277,4 +296,5 @@ module.exports = {
   parseEvent,
   normalizeAbsolute,
   relativeToAbsolute,
+  getDom,
 }

package/CHANGELOG.md

@@ -1,72 +0,0 @@
-# 更新日志
-
-## 1.4.1
-
-* triggerLifeTime 接口支持参数
-* 支持 triggerPageLifeTime 接口
-
-## 1.4.0
-
-* 更新基础库 exparser 到 2.15.0
-* 修复 observers 在组件 init 之前就会被调一次的问题
-
-## 1.3.3
-
-* 修复 behavior 创建没有调用 callDefinitionFilter 的问题
-
-## 1.3.2
-
-* 修复 properties 的 type 值转换问题
-
-## 1.3.1
-
-* 随机 id 生成使用 Math.random
-
-## 1.3.0
-
-* 更新基础库 exparser 到 2.11.2
-* 支持 virtual host 特性
-
-## 1.2.3
-
-* toJSON 方法将会在 root 组件上返回 `<main/>`
-* 修复 wxml 属性简写导致 diff 后属性重复的问题
-* 修复部分场景 diff 失败问题
-
-## 1.2.2
-
-* 支持 relations
-* 支持了 mutated 事件监听
-* 修复无法传递驼峰参数
-* 异步事件处理改为微任务
-
-## 1.2.1
-
-* 支持 Component.prototype.toJSON
-* 添加 typescript 类型声明
-
-## 1.2.0
-
-* 支持内置 behavior wx://component-export
-* 更新 exparser 版本为 2.10.4
-
-## 1.1.11
-
-* 支持内置 behavior wx://form-field-button
-
-## 1.1.10
-
-* 修复节点属性值为 falsely 值被强制转为空字符串的问题
-
-## 1.1.9
-
-* dispatchEvent 接口支持触发自定义事件
-
-## 1.1.8
-
-* 修复 diff 时没有处理父节点为根节点的情况
-
-## 1.1.7
-
-* 废弃注册组件时对初始 data 进行深拷贝的逻辑。
-* 修复组件 dispatchEvent 方法中自定义事件传入 detail，组件函数接收不到 detail 的问题（#7）。