Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

babel-plugin-jsx-event-modifiers

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-plugin-jsx-event-modifiers - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0

.vscode/settings.json
build.js
dist/bundle-test.js
dist/bundle.js
src/constants.js
src/generate-binding-body.js
src/generate-bindings-list.js
src/generate-spread-event.js
src/group-event-attributes.js
src/index.js
test/snapshots/test.js.md
test/snapshots/test.js.snap

33

package.json
{
"name": "babel-plugin-jsx-event-modifiers",
"version": "1.0.3",
"version": "2.0.0",
"description": "JSX Syntactic Sugar Plugin for Event Modifiers",
"main": "index.js",
"main": "dist/bundle.js",
"repository": "https://github.com/nickmessing/babel-plugin-jsx-event-modifiers.git",

@@ -10,14 +10,31 @@ "author": "Nicolai Moraru <dot.nick.dot.messing@gmail.com>",

"devDependencies": {
"ava": "^0.18.2",
"babel-core": "^6.24.0",
"ava": "^0.22.0",
"babel-core": "^6.26.0",
"babel-plugin-istanbul": "^4.1.4",
"babel-plugin-syntax-jsx": "^6.18.0",
"eslint": "^3.18.0",
"eslint-config-standard": "^7.1.0",
"babel-preset-env": "^1.6.0",
"eslint": "^4.5.0",
"eslint-config-prettier": "^2.3.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^2.1.1"
"eslint-plugin-standard": "^3.0.1",
"nyc": "^11.1.0",
"prettier": "^1.5.3",
"rollup": "^0.47.6",
"rollup-plugin-babel": "^3.0.2"
},
"scripts": {
"lint": "eslint .",
"test": "ava"
"pretest": "NODE_ENV=test npm run build",
"test": "nyc --reporter=html --reporter=text ava",
"build": "rollup --config build.js",
"prepublish": "npm run build"
},
"nyc": {
"include": [
"src"
]
}
}

235

README.md

@@ -43,4 +43,6 @@ ## Event Modifiers for JSX

<input
onKeyUp:up={this.methodForPressingUp}
onKeyUp:down={this.methodForPressingDown}
onKeyup:up={this.methodForPressingUp}
onKeyup:down={this.methodForPressingDown}
onKeyup:bare-shift-enter={this.methodOnlyOnShiftEnter}
onKeyup:bare-alt-enter={this.methodOnlyOnAltEnter}
/>

@@ -54,191 +56,78 @@ )

export default {
render () {
render() {
return (
<input
onKeyUp={event => {
if (event.charCode === 38)
this.methodForPressingUp(event);
{...{
on: {
keyup: [
$event => {
if (!('button' in $event) && this._k($event.keyCode, 'up', 38)) return null
if (event.charCode === 40)
this.methodForPressingDown(event);
}} />
);
}
}
```
this.methodForPressingUp($event)
},
$event => {
if (!('button' in $event) && this._k($event.keyCode, 'down', 40)) return null
#### API:
this.methodForPressingDown($event)
},
$event => {
if (
($event.ctrlKey && $event.altKey && $event.metaKey) ||
!$event.shiftKey ||
(!('button' in $event) && this._k($event.keyCode, 'enter', 13))
)
return null
| Modifier | Description |
|---|---|
| [`:stop`](#stop) | executes `event.stopPropagation()` |
| [`:prevent`](#prevent) | executes `event.preventDefault()` |
| [`:k{keyCode}`](#keycode) | checks for the `keyCode` |
| [`:{keyAlias}`](#keyalias) | checks for the `keyCode` that is assigned to this `keyAlias`
this.methodOnlyOnShiftEnter($event)
},
$event => {
if (
($event.ctrlKey && $event.shiftKey && $event.metaKey) ||
!$event.altKey ||
(!('button' in $event) && this._k($event.keyCode, 'enter', 13))
)
return null
##### Stop
`event.stopPropagation()` is called before the expression
Example:
```js
export default {
render () {
return (
<div>
<a href="/" onClick:stop />
<a href="/" onClick:stop={this.method} />
</div>
this.methodOnlyOnAltEnter($event)
},
],
},
}}
/>
)
}
},
}
```
is transpiled to:
```js
export default {
render () {
return (
<div>
<a href="/" onClick={event => {
event.stopPropagation();
}} />
<a href="/" onClick={event => {
event.stopPropagation();
this.method(event);
}} />
</div>
);
}
}
```
##### Prevent
`event.preventDefault()` is called before the expression
Example:
```js
export default {
render () {
return (
<div>
<a href="/" onClick:prevent />
<a href="/" onClick:prevent={this.method} />
</div>
)
}
}
```
is transpiled to:
```js
export default {
render () {
return (
<div>
<a href="/" onClick={event => {
event.preventDefault();
}} />
<a href="/" onClick={event => {
event.preventDefault();
this.method(event);
}} />
</div>
);
}
}
```
##### KeyCode
#### We try to keep API and behaviour as close to [Vue Event Modifiers](https://vuejs.org/v2/guide/events.html#Event-Modifiers) as we can. The only difference today is support for [bare](https://github.com/vuejs/vue/pull/5977) modifier and syntax.
`event.charCode` is compared to the keyCode
##### Example:
Example:
```js
export default {
render () {
return <input onKeyUp:k13={this.method} />
}
}
Vue template:
```html
<input
@keyup.up="methodForPressingUp"
@keyup.down="methodForPressingDown"
@keyup.bare.shift.enter="methodOnlyOnShiftEnter"
@keyup.bare.alt.enter="methodOnlyOnAltEnter"
@keyup.120="onPressKey120('some', 'arguments')"
>
```
is transpiled to:
JSX:
```js
export default {
render () {
return (
<input onKeyUp={event => {
if (event.charCode === 13)
this.method(event);
}} />
);
}
}
<input
onKeyup:up={this.methodForPressingUp}
onKeyup:down={this.methodForPressingDown}
onKeyup:bare-shift-enter={this.methodOnlyOnShiftEnter}
onKeyup:bare-alt-enter={this.methodOnlyOnAltEnter}
onKeyup:k120={() => this.onPressKey120('some', 'arguments')}
/>
```
##### KeyAlias
##### Notable differences:
There is a predefined list of aliases for keycodes:
```js
const aliases = {
esc: 27,
tab: 9,
enter: 13,
space: 32,
up: 38,
left: 37,
right: 39,
down: 40,
'delete': [8, 46]
}
```
Example:
```js
export default {
render () {
return <input onKeyUp:enter={this.method} />
}
}
```
is transpiled to:
```js
export default {
render () {
return (
<input onKeyUp={event => {
if (event.charCode === 13)
this.method(event);
}} />
);
}
}
```
#### You can combine them:
Example:
```js
export default {
render () {
return <input
onKeyUp:enter={this.method}
onKeyUp:k60={this.otherMethod} />
}
}
```
is transpiled to:
```js
export default {
render () {
return (
<input
onKeyUp={event => {
if (event.charCode === 13)
this.method(event);
if (event.charCode === 60)
this.otherMethod(event);
}} />
);
}
}
```
* Modifiers are prefixed by `:` and separated by `-` (in vue: prefixed by `.` and separated by `.`)
* Key codes are prefixed by `k`
* Call expression should be wrapped in arrow functions

207

test/test.js

@@ -6,185 +6,32 @@ import test from 'ava'

return transform(src, {
plugins: './index'
plugins: './dist/bundle-test',
}).code.trim()
}
test('ignore spread', t => {
t.is(
transpile(`<input {...a} onKeyUp:prevent={this.method} />`),
`var _this = this;
const snapshotTest = (name, code) =>
test(name, t => {
t.snapshot(transpile(code), name)
})
<input {...a} onKeyUp={event => {
event.preventDefault();
_this.method(event);
}} />;`
)
})
test(':{ keyCode } modifier', t => {
t.is(
transpile(`<input onKeyUp:k13={this.method} />`),
`var _this = this;
<input onKeyUp={event => {
if (event.keyCode === 13) _this.method(event);
}} />;`
)
})
test(':prevent modifier', t => {
t.is(
transpile(`<input onKeyUp:prevent={this.method} />`),
`var _this = this;
<input onKeyUp={event => {
event.preventDefault();
_this.method(event);
}} />;`
)
})
test(':prevent modifier with no body', t => {
t.is(
transpile(`<input onKeyUp:prevent />`),
`<input onKeyUp={event => {
event.preventDefault();
}} />;`
)
})
test(':stop modifier', t => {
t.is(
transpile(`<input onKeyUp:stop={this.method} />`),
`var _this = this;
<input onKeyUp={event => {
event.stopPropagation();
_this.method(event);
}} />;`
)
})
test(':unknown modifier', t => {
t.is(
transpile(`<input onKeyUp:randomid={this.method} />`),
`var _this = this;
<input onKeyUp={event => {
_this.method(event);
}} />;`
)
})
test(':esc modifier', t => {
t.is(
transpile(`<input onKeyUp:esc={this.method} />`),
`var _this = this;
<input onKeyUp={event => {
if (event.keyCode === 27) _this.method(event);
}} />;`
)
})
test(':tab modifier', t => {
t.is(
transpile(`<input onKeyUp:tab={this.method} />`),
`var _this = this;
<input onKeyUp={event => {
if (event.keyCode === 9) _this.method(event);
}} />;`
)
})
test(':enter modifier', t => {
t.is(
transpile(`<input onKeyUp:enter={this.method} />`),
`var _this = this;
<input onKeyUp={event => {
if (event.keyCode === 13) _this.method(event);
}} />;`
)
})
test(':space modifier', t => {
t.is(
transpile(`<input onKeyUp:space={this.method} />`),
`var _this = this;
<input onKeyUp={event => {
if (event.keyCode === 32) _this.method(event);
}} />;`
)
})
test(':up modifier', t => {
t.is(
transpile(`<input onKeyUp:up={this.method} />`),
`var _this = this;
<input onKeyUp={event => {
if (event.keyCode === 38) _this.method(event);
}} />;`
)
})
test(':left modifier', t => {
t.is(
transpile(`<input onKeyUp:left={this.method} />`),
`var _this = this;
<input onKeyUp={event => {
if (event.keyCode === 37) _this.method(event);
}} />;`
)
})
test(':right modifier', t => {
t.is(
transpile(`<input onKeyUp:right={this.method} />`),
`var _this = this;
<input onKeyUp={event => {
if (event.keyCode === 39) _this.method(event);
}} />;`
)
})
test(':down modifier', t => {
t.is(
transpile(`<input onKeyUp:down={this.method} />`),
`var _this = this;
<input onKeyUp={event => {
if (event.keyCode === 40) _this.method(event);
}} />;`
)
})
test(':delete modifier', t => {
t.is(
transpile(`<input onKeyUp:delete={this.method} />`),
`var _this = this;
<input onKeyUp={event => {
if (event.keyCode === 8 || event.keyCode === 46) _this.method(event);
}} />;`
)
})
test('combine :up and :down modifiers', t => {
t.is(
transpile(`<input onKeyUp:up={this.methodUp} onKeyUp:down={this.methodDown} />`),
`var _this = this;
<input onKeyUp={event => {
if (event.keyCode === 38) _this.methodUp(event);
if (event.keyCode === 40) _this.methodDown(event);
}} />;`
)
})
snapshotTest('No Events', '<a />')
snapshotTest('Ignores spread', '<a {...b} />')
snapshotTest('Ignores attributes', '<a href="#" />')
snapshotTest('Ignores not jsx expressions', '<a onEvent="str" />')
snapshotTest('Plain Event', '<a onEvent={this.action} />')
snapshotTest('Supports Dash', '<a on-event={this.action} />')
snapshotTest('Combine Events', '<a onEvent={this.action1} onEvent={this.action2} />')
snapshotTest('Simple :capture', '<a onEvent:capture={this.action1} />')
snapshotTest('Simple :once', '<a onEvent:once={this.action1} />')
snapshotTest(':capture-once', '<a onEvent:capture-once={this.action1} />')
snapshotTest('Simple stopPropagation :stop', '<a onEvent:stop={this.action1} />')
snapshotTest('Simple preventDefault :prevent', '<a onEvent:prevent={this.action1} />')
snapshotTest('Simple :self', '<a onEvent:self={this.action1} />')
snapshotTest('Simple no-key-modifier :bare', '<a onEvent:bare={this.action1} />')
snapshotTest('Simple key-modifier :shift', '<a onEvent:shift={this.action1} />')
snapshotTest(
'No key modifier but alt and shift and must be both alt and shift :bare-alt-shift',
'<a onEvent:bare-alt-shift={this.action1} />',
)
snapshotTest('Simple alias :enter', '<a onEvent:enter={this.action1} />')
snapshotTest('Simple double alias :delete', '<a onEvent:delete={this.action1} />')
snapshotTest('Simple key code :k120', '<a onEvent:k120={this.action1} />')
index.js
yarn.lock
.babelrc

Sorry, the diff of this file is not supported yet

.eslintrc

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc