Skip to content

Commit

Permalink
fix(plugin-html): 修复编译小程序插件时不能使用 plugin-html 的问题，fix #10527
Browse files Browse the repository at this point in the history
  • Loading branch information
@Chen-jj
Chen-jj committed Feb 16, 2022
1 parent 9663988 commit d3e7f74
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 113 deletions.
217 changes: 105 additions & 112 deletions packages/taro-plugin-html/src/runtime.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { mergeReconciler, Shortcuts, warn } from '@tarojs/shared'
import { Shortcuts, warn } from '@tarojs/shared'
import { container, SERVICE_IDENTIFIER, TaroElement } from '@tarojs/runtime'
import {
isHtmlTags,
getMappedType,
Expand All @@ -9,133 +10,125 @@ import {
defineMappedProp
} from './utils'

import type { ModifyHydrateData, ModifyRmAttrPayload, ModifySetAttrPayload, ModifyTaroEvent, OnAddEvent, TaroElement } from '@tarojs/runtime'
import type { IHooks } from '@tarojs/runtime'

interface IHostConfig {
modifyHydrateData: ModifyHydrateData
modifySetAttrPayload: ModifySetAttrPayload
modifyRmAttrPayload: ModifyRmAttrPayload
onAddEvent: OnAddEvent<TaroElement>
modifyTaroEvent: ModifyTaroEvent
}
const hooks = container.get<IHooks>(SERVICE_IDENTIFIER.Hooks)

hooks.modifyHydrateData = data => {
const nodeName = data[Shortcuts.NodeName]
if (!isHtmlTags(nodeName)) return

process.env.NODE_ENV !== 'production' && warn(data[Shortcuts.NodeName] === 'select', '请使用 Picker 组件代替 <select>')

// map nodeName
data[Shortcuts.NodeName] = getMappedType(nodeName, data)

const hostConfig: IHostConfig = {
modifyHydrateData (data) {
const nodeName = data[Shortcuts.NodeName]
if (!isHtmlTags(nodeName)) return

process.env.NODE_ENV !== 'production' && warn(data[Shortcuts.NodeName] === 'select', '请使用 Picker 组件代替 <select>')

// map nodeName
data[Shortcuts.NodeName] = getMappedType(nodeName, data)

// map attr Key/Value
const attrMapFn = getAttrMapFn(nodeName)
if (attrMapFn) {
for (const key in data) {
const value = data[key]
const [mapKey, mapValue] = attrMapFn(key, value, data)
if (key !== mapKey) {
delete data[key]
data[mapKey] = mapValue
} else if (value !== mapValue) {
data[key] = mapValue
}
// map attr Key/Value
const attrMapFn = getAttrMapFn(nodeName)
if (attrMapFn) {
for (const key in data) {
const value = data[key]
const [mapKey, mapValue] = attrMapFn(key, value, data)
if (key !== mapKey) {
delete data[key]
data[mapKey] = mapValue
} else if (value !== mapValue) {
data[key] = mapValue
}
}
}

if (nodeName === 'br') {
data[Shortcuts.Childnodes] = [{
[Shortcuts.NodeName]: '#text',
v: '\n'
}]
}
if (nodeName === 'br') {
data[Shortcuts.Childnodes] = [{
[Shortcuts.NodeName]: '#text',
v: '\n'
}]
}

data[Shortcuts.Class] = ensureHtmlClass(nodeName, data[Shortcuts.Class])
data[Shortcuts.Style] = ensureRect(data, data[Shortcuts.Style])
},
data[Shortcuts.Class] = ensureHtmlClass(nodeName, data[Shortcuts.Class])
data[Shortcuts.Style] = ensureRect(data, data[Shortcuts.Style])
}

modifySetAttrPayload (element, key, payload) {
const { nodeName, _path, props } = element
if (!isHtmlTags(nodeName)) return
hooks.modifySetAttrPayload = (element, key, payload) => {
const { nodeName, _path, props } = element
if (!isHtmlTags(nodeName)) return

// map nodeName
mapNameByContion(nodeName, key, element)
// map nodeName
mapNameByContion(nodeName, key, element)

// map attr Key/Value
const attrMapFn = getAttrMapFn(nodeName)
if (attrMapFn) {
const value = payload.value
const [mapKey, mapValue] = attrMapFn(key, value, props)
payload.path = `${_path}.${mapKey}`
payload.value = mapValue
}
// map attr Key/Value
const attrMapFn = getAttrMapFn(nodeName)
if (attrMapFn) {
const value = payload.value
const [mapKey, mapValue] = attrMapFn(key, value, props)
payload.path = `${_path}.${mapKey}`
payload.value = mapValue
}

if (key === Shortcuts.Class) {
payload.value = ensureHtmlClass(nodeName, payload.value as string)
} else if (key === Shortcuts.Style || key === 'width' || key === 'height') {
payload.path = `${_path}.${Shortcuts.Style}`
payload.value = ensureRect(props, element.style.cssText)
}
},
if (key === Shortcuts.Class) {
payload.value = ensureHtmlClass(nodeName, payload.value as string)
} else if (key === Shortcuts.Style || key === 'width' || key === 'height') {
payload.path = `${_path}.${Shortcuts.Style}`
payload.value = ensureRect(props, element.style.cssText)
}
}

modifyRmAttrPayload (element, key, payload) {
const { nodeName, _path, props } = element
if (!isHtmlTags(nodeName)) return
hooks.modifyRmAttrPayload = (element, key, payload) => {
const { nodeName, _path, props } = element
if (!isHtmlTags(nodeName)) return

// map nodeName
mapNameByContion(nodeName, key, element)
// map nodeName
mapNameByContion(nodeName, key, element)

// map attr Key/Value
const attrMapFn = getAttrMapFn(nodeName)
if (attrMapFn) {
const value = payload[key]
const [mapKey] = attrMapFn(key, value, props)
payload.path = `${_path}.${mapKey}`
}
// map attr Key/Value
const attrMapFn = getAttrMapFn(nodeName)
if (attrMapFn) {
const value = payload[key]
const [mapKey] = attrMapFn(key, value, props)
payload.path = `${_path}.${mapKey}`
}

if (key === Shortcuts.Class) {
payload.value = ensureHtmlClass(nodeName, payload.value as string)
} else if (key === Shortcuts.Style || key === 'width' || key === 'height') {
payload.path = `${_path}.${Shortcuts.Style}`
payload.value = ensureRect(props, element.style.cssText)
}
},

onAddEvent (type, _handler, _options, node) {
if (!isHtmlTags(node.nodeName)) return
if (type === 'click') {
defineMappedProp(node.__handlers, type, 'tap')
} else if (node.nodeName === 'input') {
if (type === 'change') {
if (node.props.type === 'checkbox' || node.props.type === 'radio') {
defineMappedProp(node.__handlers, type, 'tap')
} else {
defineMappedProp(node.__handlers, type, 'input')
}
} else if (type === 'keypress') {
defineMappedProp(node.__handlers, type, 'confirm')
}
}
},

modifyTaroEvent (event, element) {
const { nodeName, props } = element
if (nodeName === 'input' && event.type === 'tap') {
if (props.type === 'checkbox') {
props.checked = !props.checked
} else if (props.type === 'radio' && !props.checked) {
props.checked = true
}
if (event.mpEvent) {
const { currentTarget, target } = event.mpEvent
currentTarget.checked = props.checked
if (target.id === currentTarget.id) {
target.checked = props.checked
}
if (key === Shortcuts.Class) {
payload.value = ensureHtmlClass(nodeName, payload.value as string)
} else if (key === Shortcuts.Style || key === 'width' || key === 'height') {
payload.path = `${_path}.${Shortcuts.Style}`
payload.value = ensureRect(props, element.style.cssText)
}
}

hooks.onAddEvent = (type, _handler, _options, node) => {
node = node as TaroElement
if (!isHtmlTags(node.nodeName)) return
if (type === 'click') {
defineMappedProp(node.__handlers, type, 'tap')
} else if (node.nodeName === 'input') {
if (type === 'change') {
if (node.props.type === 'checkbox' || node.props.type === 'radio') {
defineMappedProp(node.__handlers, type, 'tap')
} else {
defineMappedProp(node.__handlers, type, 'input')
}
} else if (type === 'keypress') {
defineMappedProp(node.__handlers, type, 'confirm')
}
}
}

mergeReconciler(hostConfig)
hooks.modifyTaroEventImpls ||= []
hooks.modifyTaroEventImpls.push((event, element) => {
const { nodeName, props } = element
if (nodeName === 'input' && event.type === 'tap') {
if (props.type === 'checkbox') {
props.checked = !props.checked
} else if (props.type === 'radio' && !props.checked) {
props.checked = true
}
if (event.mpEvent) {
const { currentTarget, target } = event.mpEvent
currentTarget.checked = props.checked
if (target.id === currentTarget.id) {
target.checked = props.checked
}
}
}
})
2 changes: 1 addition & 1 deletion packages/taro-runtime/src/interface/hooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export interface ModifyRmAttrPayload {
(element: TaroElement, key: string, payload: UpdatePayload): void
}

export interface OnAddEvent<T extends TaroEventTarget = TaroEventTarget> {
export interface OnAddEvent<T extends TaroEventTarget = any> {
(type: string, handler: EventHandler, options: any, node: T): void
}

Expand Down

0 comments on commit d3e7f74

Please sign in to comment.