diff --git a/docs/docs/interactive-mip/event-and-action.md b/docs/docs/interactive-mip/event-and-action.md index fd9bbbf6..f7aa68a3 100644 --- a/docs/docs/interactive-mip/event-and-action.md +++ b/docs/docs/interactive-mip/event-and-action.md @@ -10,7 +10,7 @@ MIP 提供了 `on` 属性来定义对组件的事件绑定与事件触发时的 class="example-button" on="tap: top-example.hide, - MIP.scrollTo(id='mip-scrollto-button', duration=500, position='center')" + MIP.scrollTo({id: 'mip-scrollto-button', duration: 500, position: 'center'})" >点击返回原示例 @@ -46,7 +46,7 @@ MIP 提供了 `on` 属性来定义对组件的事件绑定与事件触发时的
文字2
``` @@ -223,7 +225,7 @@ MIP 为所有元素(包括普通 HTML 和 MIP 元素)都提供了一些默 - +文字2
您已滚动至页面底部
- - - diff --git a/packages/mip/src/util/event-action/grammar/basic.js b/packages/mip/src/util/event-action/grammar/basic.js index 2cb527d2..fd16fce1 100644 --- a/packages/mip/src/util/event-action/grammar/basic.js +++ b/packages/mip/src/util/event-action/grammar/basic.js @@ -223,10 +223,29 @@ export const $variable = lex.set({ } }) +export const $computedProperty = lex.set({ + type: 'ComputedProperty', + rule: () => [ + $leftBracket, + _, + $conditional, + _, + $rightBracket + ], + match (args) { + return { + type: 'Member', + computed: true, + property: args[2] + } + } +}) + export const $property = lex.set({ type: 'Property', rule: () => [ [or, [ + $computedProperty, $identifier, $string, $number @@ -237,10 +256,23 @@ export const $property = lex.set({ $conditional ], match (args) { - return { - key: args[0], + let key = args[0] + let result = { value: args[4] } + + if (key.computed) { + result.computed = true + result.key = key.property + } else { + result.key = key + } + + return result + // return { + // key: args[0], + // value: args[4] + // } } }) @@ -310,24 +342,6 @@ export const $primary = lex.set({ ]] }) -export const $computedProperty = lex.set({ - type: 'ComputedProperty', - rule: () => [ - $leftBracket, - _, - $conditional, - _, - $rightBracket - ], - match (args) { - return { - type: 'Member', - computed: true, - property: args[2] - } - } -}) - export const $identifierProperty = lex.set({ type: 'IdentifierProperty', rule: [ diff --git a/packages/mip/src/util/event-action/grammar/event-argument.js b/packages/mip/src/util/event-action/grammar/event-argument.js index ad2e9c91..79f36c89 100644 --- a/packages/mip/src/util/event-action/grammar/event-argument.js +++ b/packages/mip/src/util/event-action/grammar/event-argument.js @@ -8,8 +8,6 @@ import { or, any, opt - // , - // def } from '../../parser/lexer' import { @@ -20,6 +18,7 @@ import { import { $conditional, + $object, $number, $literal, $variable, @@ -162,12 +161,23 @@ export const $mipActionOldArguments = lex.set({ } }) +export const $mipActionObjectArguments = lex.set({ + type: 'MIPActionObjectArguments', + rule: $object, + match (args) { + return { + arguments: [args] + } + } +}) + export const $mipActionArguments = lex.set({ type: 'MIPActionArguments', rule: [ _, [opt, [or, [ + $mipActionObjectArguments, $mipActionOldArguments, $mipActionNewArguments ]] diff --git a/packages/mip/src/util/event-action/whitelist/basic.js b/packages/mip/src/util/event-action/whitelist/basic.js index ed394452..e0594826 100644 --- a/packages/mip/src/util/event-action/whitelist/basic.js +++ b/packages/mip/src/util/event-action/whitelist/basic.js @@ -77,7 +77,8 @@ export const PROTOTYPE = { substr: String.prototype.substr, substring: String.prototype.substring, toLowerCase: String.prototype.toLowerCase, - toUpperCase: String.prototype.toUpperCase + toUpperCase: String.prototype.toUpperCase, + trim: String.prototype.trim } } diff --git a/packages/mip/test/specs/util/parser/basic.spec.js b/packages/mip/test/specs/util/parser/basic.spec.js index dfc62f23..9536e18f 100644 --- a/packages/mip/test/specs/util/parser/basic.spec.js +++ b/packages/mip/test/specs/util/parser/basic.spec.js @@ -207,7 +207,7 @@ describe('Test Grammar', function () { describe('Test Object', function () { let fn = (walker) => run(walker, lexer.$object) - it('should be equal', function () { + it('Computed Value', function () { let str = `{ a: 1, '$asdf' : 1 + (2 - 3) * 4 @@ -219,12 +219,25 @@ describe('Test Grammar', function () { expect(result.properties[1].key.value).to.be.equal('$asdf') }) - it('should be equal', function () { + it('Empty Value', function () { let str = `{}` let walker = new Walker(str) let result = fn(walker) expect(result.properties).to.be.deep.equal([]) }) + + it('Computed Key', function () { + let str = `{ + abc: 123, + ['a' + 'cd']: true ? 2 : 3, + [3 -2]: 12345 + }` + let walker = new Walker(str) + let result = fn(walker) + expect(result.properties.length).to.be.equal(3) + expect(result.properties[1].key.type).to.be.equal('Binary') + expect(result.properties[2].key.type).to.be.equal('Binary') + }) }) describe('Test MemberExpression', function () { diff --git a/packages/mip/test/specs/util/parser/event-argument.spec.js b/packages/mip/test/specs/util/parser/event-argument.spec.js index 2d259ff6..672ad1e4 100644 --- a/packages/mip/test/specs/util/parser/event-argument.spec.js +++ b/packages/mip/test/specs/util/parser/event-argument.spec.js @@ -29,6 +29,20 @@ describe('MIP Argument', () => { expect(ast.arguments[0].properties[2].value.value).to.be.equal('this is a string with \" and \'\' ') }) + it('Object Argument Expression', () => { + let str = `{ + abc: 1, + def: null, + someStr: \"this is a string with \\\" and '' \", + useEvent: event.a + }` + let ast = fn(str) + expect(ast.arguments[0].properties.length).to.be.equal(4) + expect(ast.arguments[0].properties[3].value.type).to.be.equal('Member') + expect(ast.arguments[0].properties[2].value.value).to.be.equal('this is a string with \" and \'\' ') + }) + + it('Old Argument Expression', () => { let str = `123, null, diff --git a/packages/mip/test/specs/util/parser/parse.spec.js b/packages/mip/test/specs/util/parser/parse.spec.js index 80b4eaee..ddcb3562 100644 --- a/packages/mip/test/specs/util/parser/parse.spec.js +++ b/packages/mip/test/specs/util/parser/parse.spec.js @@ -33,6 +33,12 @@ describe('parser', () => { expect(result).to.be.equal(false) }) + it('Computed Object Name', function () { + const str = `{[1 + 2]: 3 + 4, [1 + '2']: 5 + 6, '7': 8}` + let fn = parser.transform(str, 'ObjectLiteral') + let result = fn() + expect(result).to.be.deep.equal({'3': 7, '12': 11, '7': 8}) + }) it('Sort Array', function () { const str = `[3,1,4,1,5].sort()` let fn = parser.transform(str, 'Conditional') @@ -221,6 +227,43 @@ describe('parser', () => { }) describe('MIPAction', () => { + it('Object style', () => { + const str = `{a : -12345.6,b : event.data,c : DOM.dataset.value}` + let fn = parser.transform(str, 'MIPActionArguments') + let result = fn({ + event: { + data: '\'"' + }, + target: { + dataset: { + value: -3456.7 + } + } + }) + // console.log(result) + expect(result[0].a).to.be.equal(-12345.6) + expect(result[0].b).to.be.equal('\'"') + expect(result[0].c).to.be.equal(-3456.7) + }) + + it('Object Style With Expression', () => { + const str = `{a: 1 + 2 + 3, b:( 2 *event.data), c:((DOM.dataset.value/event.data))}` + let fn = parser.transform(str, 'MIPActionArguments') + let result = fn({ + event: { + data: 100 + }, + target: { + dataset: { + value: -10 + } + } + }) + expect(result[0].a).to.be.equal(6) + expect(result[0].b).to.be.equal(200) + expect(result[0].c).to.be.equal(-0.1) + }) + it('new style', () => { const str = `a = -12345.6,b = event.data,c = DOM.dataset.value` let fn = parser.transform(str, 'MIPActionArguments') @@ -258,6 +301,7 @@ describe('parser', () => { expect(result[0].c).to.be.equal(-0.1) }) + it('old style', () => { const str = `-123.4, event.a.b, DOM.value`