Gathering detailed insights and metrics for @emotion/babel-plugin-jsx-pragmatic
Gathering detailed insights and metrics for @emotion/babel-plugin-jsx-pragmatic
Gathering detailed insights and metrics for @emotion/babel-plugin-jsx-pragmatic
Gathering detailed insights and metrics for @emotion/babel-plugin-jsx-pragmatic
👩🎤 CSS-in-JS library designed for high performance style composition
npm install @emotion/babel-plugin-jsx-pragmatic
Typescript
Module System
Node Version
NPM Version
90.5
Supply Chain
97.5
Quality
81.2
Maintenance
100
Vulnerability
100
License
@emotion/styled@11.14.0
Published on 09 Dec 2024
@emotion/cache@11.14.0
Published on 09 Dec 2024
@emotion/react@11.14.0
Published on 09 Dec 2024
@emotion/use-insertion-effect-with-fallbacks@1.2.0
Published on 09 Dec 2024
@emotion/css-prettifier@1.2.0
Published on 09 Dec 2024
@emotion/styled@11.13.5
Published on 20 Nov 2024
JavaScript (68.13%)
TypeScript (31.63%)
HTML (0.24%)
Total Downloads
57,472,046
Last Day
35,540
Last Week
163,563
Last Month
743,998
Last Year
11,840,028
17,624 Stars
1,858 Commits
1,117 Forks
96 Watching
26 Branches
317 Contributors
Minified
Minified + Gzipped
Latest Version
0.3.0
Package Id
@emotion/babel-plugin-jsx-pragmatic@0.3.0
Unpacked Size
13.60 kB
Size
3.73 kB
File Count
16
NPM Version
8.19.4
Node Version
16.20.2
Publised On
19 Jul 2024
Cumulative downloads
Total Downloads
Last day
-12.1%
35,540
Compared to previous day
Last week
-15.4%
163,563
Compared to previous week
Last month
4%
743,998
Compared to previous month
Last year
4.4%
11,840,028
Compared to previous year
1
1
2
This package is a fork of babel-plugin-jsx-pragmatic to support React Fragments.
The original README of babel-plugin-jsx-pragmatic with some modifications is shown below.
@babel/plugin-transform-react-jsx has a pragma
option that's used when transforming JSX to function calls instead of the default function React.createElement
.
This Babel plugin is a companion to that feature that allows you to dynamically load a module associated with the pragma
value.
Example:
Given this file:
1<Some jsx="element" />
babel would normally transform the JSX to:
1React.createElement(Some, { jsx: 'element' })
By setting the pragma
option like this:
1babel.transformSync(code, {
2 plugins: [
3 [
4 '@babel/plugin-transform-react-jsx',
5 {
6 pragma: 'whatever'
7 }
8 ]
9 ]
10})
It would instead transform it to:
1whatever(Some, { jsx: 'element' })
However, you might need to load a module corresponding to whatever
in each module containing JSX:
1import whatever from 'whatever' 2// or 3var whatever = require('whatever')
This plugin allows you to make that part dynamic as well:
1babel.transformSync(code, {
2 plugins: [
3 [
4 '@babel/plugin-transform-react-jsx',
5 {
6 pragma: 'whatever'
7 }
8 ],
9
10 [
11 '@emotion/babel-plugin-jsx-pragmatic',
12 {
13 module: '/something/whatever',
14 import: 'whatever'
15 }
16 ]
17 ]
18})
Results in:
1import { default as whatever } from '/something/whatever'
module
String. Module ID or pathname. The value of the ModuleSpecifier
of an import. Required.
import
String. The identifier that you want to import the module
with. This should correspond to the root identifier of the pragma
value. Required. Examples:
1{ 2 plugins: [ 3 [ 4 '@babel/plugin-transform-react-jsx', 5 { 6 pragma: 'x' 7 } 8 ], 9 10 [ 11 '@emotion/babel-plugin-jsx-pragmatic', 12 { 13 module: '/something/whatever', 14 import: 'x' 15 } 16 ] 17 ] 18} 19 20{ 21 plugins: [ 22 [ 23 '@babel/plugin-transform-react-jsx', 24 { 25 pragma: 'x.y' 26 } 27 ], 28 29 [ 30 '@emotion/babel-plugin-jsx-pragmatic', 31 { 32 module: '/something/whatever', 33 import: 'x' 34 } 35 ] 36 ] 37}
export
String. The export that you want to import as import
from module
. Default value is default
(the default export). Examples:
1// Will import the default export (`default`) 2{ 3 module: "whatever", 4 import: "x" 5} 6// import {default as x} from "whatever" 7 8 9// Will import the default export (`default`) 10{ 11 module: "whatever", 12 import: "x", 13 export: "default", 14} 15// import {default as x} from "whatever" 16 17 18// Will import the export named `something` 19{ 20 module: "whatever", 21 import: "x", 22 export: "something", 23} 24// import {something as x} from "whatever"
Doesn't do anything special in the case that the file being transformed
already imports or declares an identifier with the same name as import
.
Doesn't take into account when a file actually contains a JSX pragma comment.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
11 commit(s) and 11 issue activity found in the last 90 days -- score normalized to 10
Reason
GitHub workflow tokens follow principle of least privilege
Details
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 18/21 approved changesets -- score normalized to 8
Reason
security policy file detected
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
149 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-01-27
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