🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
babel-plugin-jsx-event-modifiers
Advanced tools
babel-plugin-jsx-event-modifiers - npm Package Compare versions
Comparing version 1.0.3 to 2.0.0
| { | ||
| "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} />') |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Improved metrics
- Number of package files
19
111.11%- Lines of code
2641
829.93%Worsened metrics
- Total package byte prevSize
74591
-39.37%- Dev dependency count
16
128.57%- Number of lines in readme file
132
-45.68%- Number of low supply chain risk alerts
2
100%- Number of medium supply chain risk alerts
7
Infinity%No dependency changes