Fix/template

packages/taro-react/src/props.ts

@@ -1,6 +1,5 @@
-import { TaroElement, Style, document, FormElement } from '@tarojs/runtime'
+import { TaroElement, Style, FormElement } from '@tarojs/runtime'
 import { isFunction, isString, isObject, isNumber, internalComponents, capitalize, toCamelCase } from '@tarojs/shared'
-import { CommonEvent } from '@tarojs/components'
 
 export type Props = Record<string, unknown>
 
@@ -26,11 +25,11 @@ export function updateProps (dom: TaroElement, oldProps: Props, newProps: Props)
   }
 }
 
-function eventProxy (e: CommonEvent) {
-  const el = document.getElementById(e.currentTarget.id)
-  const handlers = el!.__handlers[e.type]
-  handlers[0](e)
-}
+// function eventProxy (e: CommonEvent) {
+//   const el = document.getElementById(e.currentTarget.id)
+//   const handlers = el!.__handlers[e.type]
+//   handlers[0](e)
+// }
 
 function setEvent (dom: TaroElement, name: string, value: unknown, oldValue?: unknown) {
   const isCapture = name.endsWith('Capture')
@@ -47,7 +46,7 @@ function setEvent (dom: TaroElement, name: string, value: unknown, oldValue?: un
 
   if (isFunction(value)) {
     if (!oldValue) {
-      dom.addEventListener(eventName, eventProxy, isCapture)
+      dom.addEventListener(eventName, value, isCapture)
     }
     if (eventName === 'regionchange') {
       dom.__handlers.begin[0] = value
@@ -56,7 +55,7 @@ function setEvent (dom: TaroElement, name: string, value: unknown, oldValue?: un
       dom.__handlers[eventName][0] = value
     }
   } else {
-    dom.removeEventListener(eventName, eventProxy)
+    dom.removeEventListener(eventName, oldValue as any)
   }
 }
 

packages/taro-runtime/src/constants.ts

@@ -2,3 +2,4 @@ export const PROPERTY_THRESHOLD = 2046
 export const TARO_RUNTIME = 'Taro runtime'
 export const SET_DATA = '小程序 setData'
 export const PAGE_INIT = '页面初始化'
+export const SPECIAL_NODES = ['view', 'text', 'image']

packages/taro-runtime/src/dom/element.ts

@@ -3,9 +3,9 @@ import { isArray, isUndefined, Shortcuts, EMPTY_OBJ, warn, isString, toCamelCase
 import { TaroNode } from './node'
 import { NodeType } from './node_types'
 import { TaroEvent, eventSource } from './event'
-import { isElement } from '../utils'
+import { isElement, isHasExtractProp } from '../utils'
 import { Style } from './style'
-import { PROPERTY_THRESHOLD } from '../constants'
+import { PROPERTY_THRESHOLD, SPECIAL_NODES } from '../constants'
 import { CurrentReconciler } from '../reconciler'
 import { treeToArray } from './tree'
 import { ClassList } from './class-list'
@@ -89,20 +89,26 @@ export class TaroElement extends TaroNode {
       qualifiedName = Shortcuts.Style
     } else if (qualifiedName === 'id') {
       eventSource.delete(this.uid)
-      this.props[qualifiedName] = this.uid = value as string
-      eventSource.set(value as string, this)
+      value = String(value)
+      this.props[qualifiedName] = this.uid = value
+      eventSource.set(value, this)
       qualifiedName = 'uid'
     } else {
-      this.props[qualifiedName] = value as string
       if (qualifiedName === 'class') {
         qualifiedName = Shortcuts.Class
-      }
-      if (qualifiedName.startsWith('data-')) {
+      } else if (qualifiedName.startsWith('data-')) {
         if (this.dataset === EMPTY_OBJ) {
           this.dataset = Object.create(null)
         }
         this.dataset[toCamelCase(qualifiedName.replace(/^data-/, ''))] = value
+      } else if (this.nodeName === 'view' && !isHasExtractProp(this) && !this.isAnyEventBinded()) {
+        // pure-view => static-view
+        this.enqueueUpdate({
+          path: `${this._path}.${Shortcuts.NodeName}`,
+          value: 'static-view'
+        })
       }
+      this.props[qualifiedName] = value as string
     }
 
     CurrentReconciler.setAttribute?.(this, qualifiedName, value)
@@ -126,6 +132,14 @@ export class TaroElement extends TaroNode {
       path: `${this._path}.${toCamelCase(qualifiedName)}`,
       value: ''
     })
+
+    if (this.nodeName === 'view' && !isHasExtractProp(this) && !this.isAnyEventBinded()) {
+      // static-view => pure-view
+      this.enqueueUpdate({
+        path: `${this._path}.${Shortcuts.NodeName}`,
+        value: 'pure-view'
+      })
+    }
   }
 
   public getAttribute (qualifiedName: string): string {
@@ -217,4 +231,28 @@ export class TaroElement extends TaroNode {
       }
     }
   }
+
+  public addEventListener (type, handler, options) {
+    const name = this.nodeName
+    if (!this.isAnyEventBinded() && SPECIAL_NODES.indexOf(name) > -1) {
+      this.enqueueUpdate({
+        path: `${this._path}.${Shortcuts.NodeName}`,
+        value: name
+      })
+    }
+
+    super.addEventListener(type, handler, options)
+  }
+
+  public removeEventListener (type, handler) {
+    super.removeEventListener(type, handler)
+
+    const name = this.nodeName
+    if (!this.isAnyEventBinded() && SPECIAL_NODES.indexOf(name) > -1) {
+      this.enqueueUpdate({
+        path: `${this._path}.${Shortcuts.NodeName}`,
+        value: isHasExtractProp(this) ? `static-${name}` : `pure-${name}`
+      })
+    }
+  }
 }

packages/taro-runtime/src/hydrate.ts

@@ -1,6 +1,7 @@
-import { isText } from './utils'
+import { isText, isHasExtractProp } from './utils'
 import { TaroElement } from './dom/element'
 import { TaroText } from './dom/text'
+import { SPECIAL_NODES } from './constants'
 import { Shortcuts, toCamelCase } from '@tarojs/shared'
 import type { PageConfig } from '@tarojs/taro'
 
@@ -40,35 +41,25 @@ export type HydratedData = () => MiniData | MiniData[]
  * it's a vnode traverser and modifier: that's exactly what Taro's doing in here.
  */
 export function hydrate (node: TaroElement | TaroText): MiniData {
+  const nodeName = node.nodeName
+
   if (isText(node)) {
     return {
       [Shortcuts.Text]: node.nodeValue,
-      [Shortcuts.NodeName]: node.nodeName
+      [Shortcuts.NodeName]: nodeName
     }
   }
 
   const data: MiniElementData = {
-    [Shortcuts.NodeName]: node.nodeName,
+    [Shortcuts.NodeName]: nodeName,
     uid: node.uid
   }
   const { props, childNodes } = node
 
-  if (!node.isAnyEventBinded()) {
-    if (node.nodeName === 'view') {
-      const isExtractProp = Object.keys(props).find(prop => {
-        return !(/class|style|id/.test(prop) || prop.startsWith('data-'))
-      })
-      if (isExtractProp) {
-        data[Shortcuts.NodeName] = 'static-view'
-      } else {
-        data[Shortcuts.NodeName] = 'pure-view'
-      }
-    }
-    if (node.nodeName === 'text') {
-      data[Shortcuts.NodeName] = 'static-text'
-    }
-    if (node.nodeName === 'image') {
-      data[Shortcuts.NodeName] = 'static-image'
+  if (!node.isAnyEventBinded() && SPECIAL_NODES.indexOf(nodeName) > -1) {
+    data[Shortcuts.NodeName] = `static-${nodeName}`
+    if (nodeName === 'view' && !isHasExtractProp(node)) {
+      data[Shortcuts.NodeName] = 'pure-view'
     }
   }
 
@@ -83,7 +74,7 @@ export function hydrate (node: TaroElement | TaroText): MiniData {
     ) {
       data[propInCamelCase] = props[prop]
     }
-    if (node.nodeName === 'view' && propInCamelCase === 'catchMove' && props[prop] !== 'false') {
+    if (nodeName === 'view' && propInCamelCase === 'catchMove' && props[prop] !== 'false') {
       data[Shortcuts.NodeName] = 'catch-view'
     }
   }
@@ -96,7 +87,7 @@ export function hydrate (node: TaroElement | TaroText): MiniData {
     data[Shortcuts.Class] = node.className
   }
 
-  if (node.cssText !== '' && node.nodeName !== 'swiper-item') {
+  if (node.cssText !== '' && nodeName !== 'swiper-item') {
     data[Shortcuts.Style] = node.cssText
   }
 

packages/taro-runtime/src/utils/index.ts

@@ -15,3 +15,10 @@ export function isElement (node: TaroNode): node is TaroElement {
 export function isText (node: TaroNode): node is TaroText {
   return node.nodeType === NodeType.TEXT_NODE
 }
+
+export function isHasExtractProp (el: TaroElement): boolean {
+  const res = Object.keys(el.props).find(prop => {
+    return !(/class|style|id/.test(prop) || prop.startsWith('data-'))
+  })
+  return Boolean(res)
+}