Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@babel/plugin-transform-react-inline-elements
Advanced tools
Turn JSX elements into exploded React objects
@babel/plugin-transform-react-inline-elements is a Babel plugin that optimizes React elements by transforming them into inline elements. This can improve performance by reducing the overhead of creating React elements.
Transform React Elements to Inline Elements
This feature transforms JSX elements into a more optimized inline representation. This reduces the overhead associated with creating React elements, potentially improving performance.
const element = <div className="example">Hello World</div>;
// Transformed to
const element = { $$typeof: Symbol.for('react.element'), type: 'div', key: null, ref: null, props: { className: 'example', children: 'Hello World' }, _owner: null };
@babel/plugin-transform-react-constant-elements is another Babel plugin that optimizes React elements by hoisting them to the highest possible scope. This can reduce the number of React elements created and improve performance, especially in cases where the same element is used multiple times.
babel-plugin-transform-react-remove-prop-types is a Babel plugin that removes PropTypes from React components in production builds. This can reduce the size of the bundle and improve performance by eliminating unnecessary type checking in production.
babel-plugin-react-remove-properties is a Babel plugin that removes specified properties from React elements. This can be useful for removing development-only properties or other properties that are not needed in production, thereby reducing the size of the bundle.
Replaces the
React.createElement
function with one that is more optimized for production:babelHelpers.jsx
.
When used alongside transform-runtime
, polyfills (by default including Symbol
) are specifically scoped to not pollute the global scope. This breaks usage with React, as it won't have access to that polyfill and will cause your application to fail in legacy browsers.
Even if ['transform-runtime', { helpers: true, polyfill: false }]
is specified, it might still break, since helpers
come precompiled.
In this case, we recommend importing/requiring @babel/polyfill
in the entry point of your application and using @babel/preset-env
with the useBuiltIns
option to only include the polyfills your targets need. Alternatively, you can also import/require core-js/modules/es6.symbol
by itself.
This transform should be enabled only in production (e.g., just before minifying your code) because, although it improves runtime performance, it makes warning messages more cryptic and skips important checks that happen in development mode, including propTypes.
In
<Baz foo="bar" key="1"></Baz>;
Out
babelHelpers.jsx(Baz, {
foo: "bar"
}, "1");
/**
* Instead of
*
* React.createElement(Baz, {
* foo: "bar",
* key: "1",
* });
*/
Deopt
// The plugin will still use React.createElement when `ref` or `object rest spread` is used
<Foo ref="bar" />
<Foo {...bar} />
npm install --save-dev @babel/plugin-transform-react-inline-elements
.babelrc
(Recommended).babelrc
{
"plugins": ["@babel/transform-react-inline-elements"]
}
babel --plugins @babel/transform-react-inline-elements script.js
require("@babel/core").transform("code", {
plugins: ["@babel/transform-react-inline-elements"]
});
FAQs
Turn JSX elements into exploded React objects
The npm package @babel/plugin-transform-react-inline-elements receives a total of 208,262 weekly downloads. As such, @babel/plugin-transform-react-inline-elements popularity was classified as popular.
We found that @babel/plugin-transform-react-inline-elements demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.