More stuff

.changeset/strong-onions-hunt.md

@@ -0,0 +1,5 @@
+---
+"@workleap/rslib-configs": patch
+---
+
+React and SVGR code transformation are not activated by default anymore for the dev and build configs.

docs/rslib/configure-build.md

@@ -262,16 +262,16 @@ export default defineBuildConfig({
 
 ### `react`
 
-- **Type**: `false` or `(defaultOptions: PluginReactOptions) => PluginReactOptions`
+- **Type**: `true` or `(defaultOptions: PluginReactOptions) => PluginReactOptions`
 - **Default**: `defaultOptions => defaultOptions`
 
-Whether or not to transform React code. To disable React code transformation, set the option to `false`.
+Whether or not to transform React code. To enable React code transformation, set the option to `true`.
 
 ```ts !#4 rslib.build.ts
 import { defineBuildConfig } from "@workleap/rslib-configs";
 
 export default defineBuildConfig({
-    react: false
+    react: true
 });
 ```
 
@@ -295,10 +295,10 @@ export default defineBuildConfig({
 
 ### `svgr`
 
-- **Type**: `false` or `(defaultOptions: PluginSvgrOptions) => PluginSvgrOptions`
+- **Type**: `true` or `(defaultOptions: PluginSvgrOptions) => PluginSvgrOptions`
 - **Default**: `defaultOptions => defaultOptions`
 
-Whether or not to handle `.svg` files with [plugin-svgr](https://rsbuild.dev/plugins/list/plugin-svgr). When the option is set to `false`, the `.svg` files will be handled by the `asset/resource` rule.
+Whether or not to handle `.svg` files with [plugin-svgr](https://rsbuild.dev/plugins/list/plugin-svgr). To enable SVGR transformation, set the option to `true`. When this option is not activated, the `.svg` files will be handled by the `asset/resource` rule.
 
 ```ts !#4 rslib.build.ts
 import { defineBuildConfig } from "@workleap/rslib-configs";

docs/rslib/configure-dev.md

@@ -244,16 +244,16 @@ export default defineDevConfig({
 
 ### `react`
 
-- **Type**: `false` or `(defaultOptions: PluginReactOptions) => PluginReactOptions`
+- **Type**: `true` or `(defaultOptions: PluginReactOptions) => PluginReactOptions`
 - **Default**: `defaultOptions => defaultOptions`
 
-Whether or not to transform React code. To disable React code transformation, set the option to `false`.
+Whether or not to transform React code. To enable React code transformation, set the option to `true`.
 
 ```ts !#4 rslib.dev.ts
 import { defineDevConfig } from "@workleap/rslib-configs";
 
 export default defineDevConfig({
-    react: false
+    react: true
 });
 ```
 
@@ -277,10 +277,10 @@ export default defineDevConfig({
 
 ### `svgr`
 
-- **Type**: `false` or `(defaultOptions: PluginSvgrOptions) => PluginSvgrOptions`
+- **Type**: `true` or `(defaultOptions: PluginSvgrOptions) => PluginSvgrOptions`
 - **Default**: `defaultOptions => defaultOptions`
 
-Whether or not to handle `.svg` files with [plugin-svgr](https://rsbuild.dev/plugins/list/plugin-svgr). When the option is set to `false`, the `.svg` files will be handled by the `asset/resource` rule.
+Whether or not to handle `.svg` files with [plugin-svgr](https://rsbuild.dev/plugins/list/plugin-svgr). To enable SVGR transformation, set the option to `true`. When this option is not activated, the `.svg` files will be handled by the `asset/resource` rule.
 
 ```ts !#4 rslib.dev.ts
 import { defineDevConfig } from "@workleap/rslib-configs";

knip.ts

@@ -105,14 +105,12 @@ const rootConfig = defineWorkspace({
     ignoreDependencies: [
         // Required for Stylelint (seems like a Knip bug)
         "prettier",
-        // Installed once for all the workspace's projects
         "ts-node"
     ]
 });
 
 const packagesConfig: KnipWorkspaceConfig = defineWorkspace({}, [
-    configurePackage,
-    configureTsup
+    configurePackage
 ]);
 
 const swcConfig: KnipWorkspaceConfig = defineWorkspace({
@@ -123,8 +121,7 @@ const swcConfig: KnipWorkspaceConfig = defineWorkspace({
         "browserslist"
     ]
 }, [
-    configurePackage,
-    configureTsup
+    configurePackage
 ]);
 
 const webpackConfig: KnipWorkspaceConfig = defineWorkspace({
@@ -135,8 +132,7 @@ const webpackConfig: KnipWorkspaceConfig = defineWorkspace({
         "webpack-dev-server"
     ]
 }, [
-    configurePackage,
-    configureTsup
+    configurePackage
 ]);
 
 const configureWebpackSample: KnipTransformer = ({ entry, ...config }) => {
@@ -161,8 +157,7 @@ const webpackSampleAppConfig = defineWorkspace({}, [
 ]);
 
 const webpackSampleComponentsConfig = defineWorkspace({}, [
-    configureWebpackSample,
-    configureTsup
+    configureWebpackSample
 ]);
 
 const webpackSampleTsupLibConfig = defineWorkspace({}, [
@@ -191,11 +186,18 @@ const rsbuildSampleAppConfig = defineWorkspace({}, [
 ]);
 
 const rsbuildSampleComponentsConfig = defineWorkspace({}, [
-    configureRsbuildSample,
-    configureTsup
+    configureRsbuildSample
+]);
+
+const rsbuildSampleRslibLibConfig = defineWorkspace({}, [
+    configureRsbuildSample
+]);
+
+const storybookRsbuildSample = defineWorkspace({}, [
+    ignoreBrowserslist
 ]);
 
-const storybookSample = defineWorkspace({}, [
+const storybookRslibSample = defineWorkspace({}, [
     ignoreBrowserslist
 ]);
 
@@ -210,7 +212,9 @@ const config: KnipConfig = {
         "samples/webpack/tsup-lib": webpackSampleTsupLibConfig,
         "samples/rsbuild/app": rsbuildSampleAppConfig,
         "samples/rsbuild/components": rsbuildSampleComponentsConfig,
-        "samples/storybook": storybookSample
+        "samples/rsbuild/rslib-lib": rsbuildSampleRslibLibConfig,
+        "samples/storybook/rsbuild": storybookRsbuildSample,
+        "samples/storybook/rslib": storybookRslibSample
     },
     ignoreWorkspaces: [
         // Until it's migrated to ESLint 9.

packages/rsbuild-configs/src/assertions.ts

@@ -0,0 +1,3 @@
+export function isBoolean(value: unknown): value is boolean {
+    return typeof value === "boolean";
+}

packages/rsbuild-configs/src/dev.ts

@@ -4,6 +4,7 @@ import { pluginReact, type PluginReactOptions } from "@rsbuild/plugin-react";
 import { pluginSvgr, type PluginSvgrOptions } from "@rsbuild/plugin-svgr";
 import path from "node:path";
 import { applyTransformers, type RsbuildConfigTransformer } from "./applyTransformers.ts";
+import { isBoolean } from "./assertions.ts";
 
 export type DefineDevHtmlPluginConfigFunction = (defaultOptions: HtmlConfig) => HtmlConfig;
 export type DefineDevDefineReactPluginConfigFunction = (defaultOptions: PluginReactOptions) => PluginReactOptions;
@@ -81,7 +82,7 @@ export function defineDevConfig(options: DefineDevConfigOptions = {}) {
             } : undefined
         },
         server: {
-            https: typeof https === "boolean" ? undefined : https,
+            https: isBoolean(https) ? undefined : https,
             host,
             port,
             historyApiFallback: true
@@ -108,7 +109,7 @@ export function defineDevConfig(options: DefineDevConfigOptions = {}) {
             ? html({ template: path.resolve("./public/index.html") })
             : undefined,
         plugins: [
-            typeof https === "boolean" && https && pluginBasicSsl(),
+            isBoolean(https) && https && pluginBasicSsl(),
             react && pluginReact(react({
                 fastRefresh,
                 reactRefreshOptions: {

packages/rslib-configs/src/assertions.ts

@@ -0,0 +1,6 @@
+// Using "unknown" loses the typings.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isFunction(value: unknown): value is (...args: any[]) => any {
+    return typeof value === "function";
+}
+

packages/rslib-configs/src/build.ts

@@ -3,6 +3,7 @@ import { pluginReact, type PluginReactOptions } from "@rsbuild/plugin-react";
 import { pluginSvgr, type PluginSvgrOptions } from "@rsbuild/plugin-svgr";
 import { defineConfig, type Dts, type RsbuildConfigEntry, type RsbuildConfigOutputTarget, type Syntax } from "@rslib/core";
 import { applyTransformers, type RslibConfigTransformer } from "./applyTransformers.ts";
+import { isFunction } from "./assertions.ts";
 
 export type DefineBuildDefineReactPluginConfigFunction = (defaultOptions: PluginReactOptions) => PluginReactOptions;
 export type DefineBuildSvgrPluginConfigFunction = (defaultOptions: PluginSvgrOptions) => PluginSvgrOptions;
@@ -17,19 +18,11 @@ export interface DefineBuildConfigOptions {
     distPath?: DistPathConfig;
     plugins?: RsbuildPlugins;
     sourceMap?: boolean | SourceMap;
-    react?: false | DefineBuildDefineReactPluginConfigFunction;
-    svgr? : false | DefineBuildSvgrPluginConfigFunction;
+    react?: true | DefineBuildDefineReactPluginConfigFunction;
+    svgr? : true | DefineBuildSvgrPluginConfigFunction;
     transformers?: RslibConfigTransformer[];
 }
 
-function defaultDefineReactPluginConfig(options: PluginReactOptions) {
-    return options;
-}
-
-function defineSvgrPluginConfig(options: PluginSvgrOptions) {
-    return options;
-}
-
 export function defineBuildConfig(options: DefineBuildConfigOptions = {}) {
     const {
         entry: entryValue,
@@ -46,8 +39,8 @@ export function defineBuildConfig(options: DefineBuildConfigOptions = {}) {
             js: "source-map",
             css: true
         },
-        react = defaultDefineReactPluginConfig,
-        svgr = defineSvgrPluginConfig,
+        react = false,
+        svgr = false,
         transformers = []
     } = options;
 
@@ -63,6 +56,12 @@ export function defineBuildConfig(options: DefineBuildConfigOptions = {}) {
         };
     }
 
+    const svgrDefaultOptions: PluginSvgrOptions = {
+        svgrOptions: {
+            exportType: "named"
+        }
+    };
+
     const config = defineConfig({
         mode: "production",
         lib: [{
@@ -82,15 +81,11 @@ export function defineBuildConfig(options: DefineBuildConfigOptions = {}) {
             minify: false,
             sourceMap
         },
-        plugins: [
-            react && pluginReact(react({})),
-            svgr && pluginSvgr(svgr({
-                svgrOptions: {
-                    exportType: "named"
-                }
-            })),
+        plugins: ([
+            react && pluginReact(isFunction(react) ? react({}) : {}),
+            svgr && pluginSvgr(isFunction(svgr) ? svgr(svgrDefaultOptions) : svgrDefaultOptions),
             ...plugins
-        ].filter(Boolean)
+        ] as RsbuildPlugins).filter(Boolean)
     });
 
     const transformedConfig = applyTransformers(config, transformers, {

packages/rslib-configs/src/dev.ts

@@ -3,6 +3,7 @@ import { pluginReact, type PluginReactOptions } from "@rsbuild/plugin-react";
 import { pluginSvgr, type PluginSvgrOptions } from "@rsbuild/plugin-svgr";
 import { defineConfig, type Dts, type RsbuildConfigEntry, type RsbuildConfigOutputTarget, type Syntax } from "@rslib/core";
 import { applyTransformers, type RslibConfigTransformer } from "./applyTransformers.ts";
+import { isFunction } from "./assertions.ts";
 
 export type DefineDevDefineReactPluginConfigFunction = (defaultOptions: PluginReactOptions) => PluginReactOptions;
 export type DefineDevSvgrPluginConfigFunction = (defaultOptions: PluginSvgrOptions) => PluginSvgrOptions;
@@ -17,19 +18,11 @@ export interface DefineDevConfigOptions {
     distPath?: DistPathConfig;
     plugins?: RsbuildPlugins;
     sourceMap?: boolean | SourceMap;
-    react?: false | DefineDevDefineReactPluginConfigFunction;
-    svgr? : false | DefineDevSvgrPluginConfigFunction;
+    react?: true | DefineDevDefineReactPluginConfigFunction;
+    svgr? : true | DefineDevSvgrPluginConfigFunction;
     transformers?: RslibConfigTransformer[];
 }
 
-function defaultDefineReactPluginConfig(options: PluginReactOptions) {
-    return options;
-}
-
-function defineSvgrPluginConfig(options: PluginSvgrOptions) {
-    return options;
-}
-
 export function defineDevConfig(options: DefineDevConfigOptions = {}) {
     const {
         entry: entryValue,
@@ -46,8 +39,8 @@ export function defineDevConfig(options: DefineDevConfigOptions = {}) {
             js: "cheap-module-source-map",
             css: true
         },
-        react = defaultDefineReactPluginConfig,
-        svgr = defineSvgrPluginConfig,
+        react = false,
+        svgr = false,
         transformers = []
     } = options;
 
@@ -63,6 +56,12 @@ export function defineDevConfig(options: DefineDevConfigOptions = {}) {
         };
     }
 
+    const svgrDefaultOptions: PluginSvgrOptions = {
+        svgrOptions: {
+            exportType: "named"
+        }
+    };
+
     const config = defineConfig({
         mode: "development",
         lib: [{
@@ -82,15 +81,11 @@ export function defineDevConfig(options: DefineDevConfigOptions = {}) {
             minify: false,
             sourceMap
         },
-        plugins: [
-            react && pluginReact(react({})),
-            svgr && pluginSvgr(svgr({
-                svgrOptions: {
-                    exportType: "named"
-                }
-            })),
+        plugins: ([
+            react && pluginReact(isFunction(react) ? react({}) : {}),
+            svgr && pluginSvgr(isFunction(svgr) ? svgr(svgrDefaultOptions) : svgrDefaultOptions),
             ...plugins
-        ]
+        ] as RsbuildPlugins).filter(Boolean)
     });
 
     const transformedConfig = applyTransformers(config, transformers, {

packages/rslib-configs/tests/build.test.ts

@@ -135,7 +135,6 @@ test("when sourceMap is an object, the output.sourceMap option is the object", (
 
 test("when react is false, the react plugin is not included", () => {
     const result = defineBuildConfig({
-        react: false,
         tsconfigPath: "./build.json"
     });
 
@@ -144,6 +143,17 @@ test("when react is false, the react plugin is not included", () => {
     expect(plugin).toBeUndefined();
 });
 
+test("when react is true, the react plugin is included", () => {
+    const result = defineBuildConfig({
+        react: true,
+        tsconfigPath: "./build.json"
+    });
+
+    const plugin = result.plugins?.find(x => (x as RsbuildPlugin).name === "rsbuild:react");
+
+    expect(plugin).toBeDefined();
+});
+
 test("when react is a function, the function is executed", () => {
     const fct = jest.fn();
 
@@ -157,7 +167,6 @@ test("when react is a function, the function is executed", () => {
 
 test("when svgr is false, the svgr plugin is not included", () => {
     const result = defineBuildConfig({
-        svgr: false,
         tsconfigPath: "./build.json"
     });
 
@@ -166,6 +175,17 @@ test("when svgr is false, the svgr plugin is not included", () => {
     expect(plugin).toBeUndefined();
 });
 
+test("when svgr is true, the svgr plugin is included", () => {
+    const result = defineBuildConfig({
+        svgr: true,
+        tsconfigPath: "./build.json"
+    });
+
+    const plugin = result.plugins?.find(x => (x as RsbuildPlugin).name === "rsbuild:svgr");
+
+    expect(plugin).toBeDefined();
+});
+
 test("when svgr is a function, the function is executed", () => {
     const fct = jest.fn();