Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@vitejs/plugin-react-swc
Advanced tools
Changelog
3.6.0
This will unlock to use the plugin in some use cases where the original source code is not in TS. Using this option to keep using JSX inside .js
files is highly discouraged and can be removed in any future version.
Readme
Speed up your Vite dev server with SWC
npm i -D @vitejs/plugin-react-swc
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
export default defineConfig({
plugins: [react()],
});
This plugin has limited options to enable good performances and be transpiler agnostic. Here is the list of non-configurable options that impact runtime behaviour:
jsx runtime
is always automatic
target
is es2020
Control where the JSX factory is imported from.
@default
"react"
react({ jsxImportSource: "@emotion/react" });
Enable TypeScript decorators. Requires experimentalDecorators
in tsconfig.
@default
false
react({ tsDecorators: true });
Use SWC plugins. Enable SWC at build time.
react({ plugins: [["@swc/plugin-styled-components", {}]] });
Set the target for SWC in dev. This can avoid to down-transpile private class method for example.
For production target, see https://vitejs.dev/config/build-options.html#build-target.
@default
"es2020"
react({ devTarget: "es2022" });
Override the default include list (.ts, .tsx, .mts, .jsx, .mdx).
This requires to redefine the config for any file you want to be included (ts, mdx, ...).
If you want to trigger fast refresh on compiled JS, use jsx: true
. Exclusion of node_modules should be handled by the function if needed. Using this option to use JSX inside .js
files is highly discouraged and can be removed in any future version.
react({
parserConfig(id) {
if (id.endsWith(".res")) return { syntax: "ecmascript", jsx: true };
if (id.endsWith(".ts")) return { syntax: "typescript", tsx: false };
},
});
For React refresh to work correctly, your file should only export React components. The best explanation I've read is the one from the Gatsby docs.
If an incompatible change in exports is found, the module will be invalidated and HMR will propagate. To make it easier to export simple constants alongside your component, the module is only invalidated when their value changes.
You can catch mistakes and get more detailed warning with this eslint rule.
vite-plugin-swc-react-refresh
The documentation for the previous version of the plugin is available in the v2 branch
To migrate, see this changelog
FAQs
Speed up your Vite dev server with SWC
The npm package @vitejs/plugin-react-swc receives a total of 870,914 weekly downloads. As such, @vitejs/plugin-react-swc popularity was classified as popular.
We found that @vitejs/plugin-react-swc demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.