nx/packages/react/plugins/with-react.ts
Nicholas Cunningham 9cd0b420d1
feat(react): Add SvgOptions for NxReactWebpackPlugin and WithNx (#23283)
This PR adds the ability to now override our svg options by providing
them either using `NxReactWebpackPlugin` for react apps or `withNx` for
Next.js apps

```
new NxReactWebpackPlugin({
  svgr: {
    svgo: true,
    titleProp: true,
    ref: true,
  }
}),
  ```

This now gives you control on customizing how the svg is handled. Should you need to enable svgo you can provide the config using `svgr.config.js`

https://react-svgr.com/docs/options/#svgo

closes: #9487
2024-05-13 08:15:44 -06:00

38 lines
1002 B
TypeScript

import type { Configuration } from 'webpack';
import type { NxWebpackExecutionContext, WithWebOptions } from '@nx/webpack';
import { applyReactConfig } from './nx-react-webpack-plugin/lib/apply-react-config';
const processed = new Set();
export interface SvgrOptions {
svgo?: boolean;
titleProp?: boolean;
ref?: boolean;
}
export interface WithReactOptions extends WithWebOptions {
svgr?: boolean | SvgrOptions;
}
/**
* @param {WithReactOptions} pluginOptions
* @returns {NxWebpackPlugin}
*/
export function withReact(pluginOptions: WithReactOptions = {}) {
return function configure(
config: Configuration,
context: NxWebpackExecutionContext
): Configuration {
const { withWeb } = require('@nx/webpack');
if (processed.has(config)) return config;
// Apply web config for CSS, JSX, index.html handling, etc.
config = withWeb(pluginOptions)(config, context);
applyReactConfig(pluginOptions, config);
processed.add(config);
return config;
};
}