npmpackage.info

Gathering detailed insights and metrics for babel-plugin-jsx-event-modifiers

babel-plugin-jsx-event-modifiers - 2.0.5 | npmpackage.info

babel-plugin-jsx-event-modifiers

Event modifiers syntactic sugar for JSX

2.0.5

MIT

JavaScript

1.46 kB

38,153,272 1.7

Installations

npm install babel-plugin-jsx-event-modifiers

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

8.2.1

NPM Version

5.3.0 Score

98.8

Supply Chain

99.6

Quality

75.3

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

2

Total

4

Closed

1

Merged

1

Issues

Open

1

Total

6

Closed

5

Releases

Unable to fetch releases

Languages

JavaScript

JavaScript (100%)

Developer

nickmessing

Download Statistics

Total Downloads

38,153,272

Last Day

10,268

Last Week

66,070

Last Month

268,380

Last Year

3,363,458

GitHub Statistics

MIT License

44 Stars

23 Commits

7 Forks

2 Watchers

2 Branches

2 Contributors

Updated on Aug 15, 2023

Bundle Size

3.81 kB

Minified

1.46 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

2.0.5

Package Id

babel-plugin-jsx-event-modifiers@2.0.5

Size

8.63 kB

NPM Version

5.3.0

Node Version

8.2.1

Published on

Aug 27, 2017

Total Downloads

Cumulative downloads

Total Downloads

38,153,272

Last Day

4.9%

10,268

Compared to previous day

Last Week

2.8%

66,070

Compared to previous week

Last Month

-1.3%

268,380

Compared to previous month

Last Year

-22.6%

3,363,458

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

ava babel-core babel-plugin-istanbul babel-plugin-syntax-jsx babel-preset-env eslint eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard nyc prettier rollup rollup-plugin-babel

Event Modifiers for JSX

This babel plugin adds some syntactic sugar to JSX.

Usage:

1npm i babel-plugin-jsx-event-modifiers -D

1yarn add babel-plugin-jsx-event-modifiers -D

Then add jsx-event-modifiers to your .babelrc file under plugins

example .babelrc:

1{
2  "presets": ["es2015"],
3  "plugins": ["jsx-event-modifiers", "transform-vue-jsx"]
4}

Event Modifiers

Example:

1export default {
2  render () {
3    return (
4      <input
5        onKeyup:up={this.methodForPressingUp}
6        onKeyup:down={this.methodForPressingDown}
7        onKeyup:bare-shift-enter={this.methodOnlyOnShiftEnter}
8        onKeyup:bare-alt-enter={this.methodOnlyOnAltEnter}
9      />
10    )
11  }
12}

will be transpiled into:

1export default {
2  render() {
3    return (
4      <input
5        {...{
6          on: {
7            keyup: [
8              $event => {
9                if (!('button' in $event) && this._k($event.keyCode, 'up', 38)) return null
10
11                this.methodForPressingUp($event)
12              },
13              $event => {
14                if (!('button' in $event) && this._k($event.keyCode, 'down', 40)) return null
15
16                this.methodForPressingDown($event)
17              },
18              $event => {
19                if (
20                  ($event.ctrlKey && $event.altKey && $event.metaKey) ||
21                  !$event.shiftKey ||
22                  (!('button' in $event) && this._k($event.keyCode, 'enter', 13))
23                )
24                  return null
25
26                this.methodOnlyOnShiftEnter($event)
27              },
28              $event => {
29                if (
30                  ($event.ctrlKey && $event.shiftKey && $event.metaKey) ||
31                  !$event.altKey ||
32                  (!('button' in $event) && this._k($event.keyCode, 'enter', 13))
33                )
34                  return null
35
36                this.methodOnlyOnAltEnter($event)
37              },
38            ],
39          },
40        }}
41      />
42    )
43  },
44}
45
46

We try to keep API and behaviour as close to Vue Event Modifiers as we can. The only difference today is support for bare modifier and syntax.

Example:

Vue template:

1<input
2  @keyup.up="methodForPressingUp"
3  @keyup.down="methodForPressingDown"
4  @keyup.bare.shift.enter="methodOnlyOnShiftEnter"
5  @keyup.bare.alt.enter="methodOnlyOnAltEnter"
6  @keyup.120="onPressKey120('some', 'arguments')"
7>

JSX:

1<input
2  onKeyup:up={this.methodForPressingUp}
3  onKeyup:down={this.methodForPressingDown}
4  onKeyup:bare-shift-enter={this.methodOnlyOnShiftEnter}
5  onKeyup:bare-alt-enter={this.methodOnlyOnAltEnter}
6  onKeyup:k120={() => this.onPressKey120('some', 'arguments')}
7/>

Notable differences:

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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

50 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-p9w8-2mpq-49h9
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-2m96-9w4j-wgv7
Warn: Project is vulnerable to: GHSA-h726-x36v-rx45
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

1.7

/10

Last Scanned on 2025-05-19

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More