From fb057d3e1632af2ebde635d239e9ca7129c28cc2 Mon Sep 17 00:00:00 2001 From: chenjiajian <798095202@qq.com> Date: Thu, 14 Jan 2021 16:27:59 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix(react):=20=E4=BF=AE=E5=A4=8D=20react=20?= =?UTF-8?q?=E4=B8=8D=E8=83=BD=E5=8F=96=E6=B6=88=E4=BA=8B=E4=BB=B6=E7=9B=91?= =?UTF-8?q?=E5=90=AC=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/taro-react/src/props.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/taro-react/src/props.ts b/packages/taro-react/src/props.ts index c9393dd38fde..e317f9a95e7f 100644 --- a/packages/taro-react/src/props.ts +++ b/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 @@ -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) } } From bc94aedb98928c841b068a1e9ff56fac5fcb5103 Mon Sep 17 00:00:00 2001 From: chenjiajian <798095202@qq.com> Date: Thu, 14 Jan 2021 20:22:54 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix(runtime):=20=E4=BF=AE=E5=A4=8D=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=88=87=E6=8D=A2=E5=B1=9E=E6=80=A7=E5=92=8C=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E6=97=B6=E5=87=BA=E7=8E=B0=E7=9A=84=E9=97=AE=E9=A2=98?= =?UTF-8?q?,=20fix=20#8520?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/taro-runtime/src/constants.ts | 1 + packages/taro-runtime/src/dom/element.ts | 47 +++++++++++++++++++++--- packages/taro-runtime/src/hydrate.ts | 33 ++++++----------- packages/taro-runtime/src/utils/index.ts | 7 ++++ 4 files changed, 62 insertions(+), 26 deletions(-) diff --git a/packages/taro-runtime/src/constants.ts b/packages/taro-runtime/src/constants.ts index a7690b228eaf..b2354565a425 100644 --- a/packages/taro-runtime/src/constants.ts +++ b/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'] diff --git a/packages/taro-runtime/src/dom/element.ts b/packages/taro-runtime/src/dom/element.ts index 71f050a706ea..174f16607a08 100644 --- a/packages/taro-runtime/src/dom/element.ts +++ b/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' @@ -93,16 +93,21 @@ export class TaroElement extends TaroNode { eventSource.set(value as string, 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 +131,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 +230,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}` + }) + } + } } diff --git a/packages/taro-runtime/src/hydrate.ts b/packages/taro-runtime/src/hydrate.ts index 8d0986c01ac5..d04d9b6b2433 100644 --- a/packages/taro-runtime/src/hydrate.ts +++ b/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 } diff --git a/packages/taro-runtime/src/utils/index.ts b/packages/taro-runtime/src/utils/index.ts index 91daabb17e59..243720274b33 100644 --- a/packages/taro-runtime/src/utils/index.ts +++ b/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) +} From c73274c7d6b3b3197dafbb7e28f24ec7956e562b Mon Sep 17 00:00:00 2001 From: chenjiajian <798095202@qq.com> Date: Thu, 14 Jan 2021 21:58:04 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix(runtime):=20=E7=BB=84=E4=BB=B6=20id=20?= =?UTF-8?q?=E5=BF=85=E9=A1=BB=E6=98=AF=20string=EF=BC=8Cfix=20#8515?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/taro-runtime/src/dom/element.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/taro-runtime/src/dom/element.ts b/packages/taro-runtime/src/dom/element.ts index 174f16607a08..fad70dd7c296 100644 --- a/packages/taro-runtime/src/dom/element.ts +++ b/packages/taro-runtime/src/dom/element.ts @@ -89,8 +89,9 @@ 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 { if (qualifiedName === 'class') { From a350f3d80191d96e1ed85135edc5f5308ffeb84a Mon Sep 17 00:00:00 2001 From: chenjiajian <798095202@qq.com> Date: Fri, 15 Jan 2021 21:19:07 +0800 Subject: [PATCH 4/4] fix: ci --- packages/taro-runtime/src/dom/element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/taro-runtime/src/dom/element.ts b/packages/taro-runtime/src/dom/element.ts index fad70dd7c296..66194c93b8e5 100644 --- a/packages/taro-runtime/src/dom/element.ts +++ b/packages/taro-runtime/src/dom/element.ts @@ -94,6 +94,7 @@ export class TaroElement extends TaroNode { eventSource.set(value, this) qualifiedName = 'uid' } else { + this.props[qualifiedName] = value as string if (qualifiedName === 'class') { qualifiedName = Shortcuts.Class } else if (qualifiedName.startsWith('data-')) { @@ -108,7 +109,6 @@ export class TaroElement extends TaroNode { value: 'static-view' }) } - this.props[qualifiedName] = value as string } CurrentReconciler.setAttribute?.(this, qualifiedName, value)