Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[weex] Support to compile v-on into the weex native directive #6892

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions flow/compiler.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ declare type ASTIfConditions = Array<ASTIfCondition>;

declare type ASTElementHandler = {
value: string;
params?: Array<any>;
modifiers: ?ASTModifiers;
};

Expand Down
26 changes: 23 additions & 3 deletions src/compiler/codegen/events.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,17 @@ export function genHandlers (
return res.slice(0, -1) + '}'
}

// Generate handler code with binding params on Weex
function genWeexHandler (params: Array<any>, handlerCode: string) {
const wrapperArgs = params.filter(exp => simplePathRE.test(exp) && exp !== '$event')
const handlerParams = wrapperArgs.map(exp => ({ '@binding': exp }))
wrapperArgs.push('$event')
return '{' +
`handler:function(${wrapperArgs.join(',')}){${handlerCode}},\n` +
`params:${JSON.stringify(handlerParams)}` +
'}'
}

function genHandler (
name: string,
handler: ASTElementHandler | Array<ASTElementHandler>
Expand All @@ -73,9 +84,14 @@ function genHandler (
const isFunctionExpression = fnExpRE.test(handler.value)

if (!handler.modifiers) {
return isMethodPath || isFunctionExpression
? handler.value
: `function($event){${handler.value}}` // inline statement
if (isMethodPath || isFunctionExpression) {
return handler.value
}
// $flow-disable-line
if (__WEEX__ && handler.params) {
return genWeexHandler(handler.params, handler.value)
}
return `function($event){${handler.value}}` // inline statement
} else {
let code = ''
let genModifierCode = ''
Expand Down Expand Up @@ -111,6 +127,10 @@ function genHandler (
: isFunctionExpression
? `(${handler.value})($event)`
: handler.value
// $flow-disable-line
if (__WEEX__ && handler.params) {
return genWeexHandler(handler.params, code + handlerCode)
}
return `function($event){${code}${handlerCode}}`
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/core/vdom/create-component.js
Original file line number Diff line number Diff line change
Expand Up @@ -145,11 +145,11 @@ export function createComponent (
data = data || {}

// recycle-list optimized render function for extracting cell-slot
// template. This is essentailly inline expanding instead of creating
// template. This is essentially inline expanding instead of creating
// an actual instance.
// https://github.com/Hanks10100/weex-native-directive/tree/master/component
// $flow-disable-line
if (__WEEX__ && data.attrs['@isInRecycleList']) {
if (__WEEX__ && data.attrs && data.attrs['@isInRecycleList']) {
const altRender = Ctor.options['@render']
if (altRender) {
return altRender.call(
Expand Down
2 changes: 2 additions & 0 deletions src/platforms/weex/compiler/modules/recycle-list/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { transformText } from './text'
import { transformVBind } from './v-bind'
import { transformVIf } from './v-if'
import { transformVFor } from './v-for'
import { postTransformVOn } from './v-on'

let currentRecycleList = null

Expand Down Expand Up @@ -31,6 +32,7 @@ function postTransformNode (el: ASTElement) {
if (el.tag === 'text') {
transformText(el)
}
postTransformVOn(el)
}
if (el === currentRecycleList) {
currentRecycleList = null
Expand Down
25 changes: 25 additions & 0 deletions src/platforms/weex/compiler/modules/recycle-list/v-on.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/* @flow */

const inlineStatementRE = /^\s*([A-Za-z_$0-9\.]+)*\s*\(\s*(([A-Za-z_$0-9\'\"]+)?(\s*,\s*([A-Za-z_$0-9\'\"]+))*)\s*\)$/

function parseHandlerParams (handler: ASTElementHandler) {
const res = inlineStatementRE.exec(handler.value)
if (res && res[2]) {
handler.params = res[2].split(/\s*,\s*/)
}
}

export function postTransformVOn (el: ASTElement) {
const events: ASTElementHandlers | void = el.events
if (!events) {
return
}
for (const name in events) {
const handler: ASTElementHandler | Array<ASTElementHandler> = events[name]
if (Array.isArray(handler)) {
handler.map(fn => parseHandlerParams(fn))
} else {
parseHandlerParams(handler)
}
}
}