chore(examples): rspack with lingui swc plugin (#1923)

examples/rspack/README.md

@@ -6,7 +6,7 @@ This project shows how to use the [Rspack JavaScript bundler](https://www.rspack
 
 ## Setup Instructions
 
-1. `cd rspack-project && npm install`
+1. `npm install` to install dependencies
 2. `npm run dev` to run the development server.
 3. `npm run build` to build the application.
 
@@ -19,9 +19,9 @@ This project shows how to use the [Rspack JavaScript bundler](https://www.rspack
 
 ## Configuration File Notes
 
-- [rspack.config.js](./rspack-project/rspack.config.js) specifies that that babel should transcompile all `.tsx` files using the `@babel/preset-typscript` and `@babel/preset-react` [presets](https://babeljs.io/docs/presets), as well as the `macros` [plugin](https://babeljs.io/docs/plugins). This step is necessary so that [Lingui Macros](https://lingui.dev/ref/macro) such as `<Trans>` are correctly transcompiled into their respective React components.
-- [lingui.config.ts](./rspack-project/lingui.config.ts) specifies the available locales, defaults, and paths where the message catalogs are stored.
-- As per the [Rspack documentation](https://www.rspack.dev/guide/builtin-swc-loader.html), `builtin:swc-loader` does not currently support plugins, which is why the trans-compilation work is still done in babel. Once SWC plugins are supported, transcompilation should be done with Rspack's `builtin:swc-loader` for improved performance.
+- [`rspack.config.js`](./rspack.config.js) specifies the [`builtin:swc-loader`](https://www.rspack.dev/guide/builtin-swc-loader.html#builtinswc-loader) should transcompile all `.tsx` files using the Lingui SWC plugin, ensuring transcompilation of [Lingui Macros](https://lingui.dev/ref/macro) like `<Trans>` into their respective React components. When using Lingui SWC plugin, ensure version compatibility with `@rspack/core`. Refer to the [compatibility guide](https://github.com/lingui/swc-plugin#compatibility) for selecting the appropriate plugin version.
+
+- [`lingui.config.ts`](./lingui.config.ts) specifies the available locales, defaults, and paths where the message catalogs are stored.
 
 ## Helpful Resources
 

examples/rspack/package.json

@@ -2,33 +2,25 @@
   "name": "rspack-react-ts-starter",
   "private": true,
   "version": "1.0.0",
-  "babel": {
-    "plugins": [
-      "macros"
-    ]
-  },
   "scripts": {
     "dev": "rspack serve",
     "build": "rspack build",
     "extract": "lingui extract",
     "compile": "lingui compile --typescript"
   },
   "dependencies": {
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@lingui/react": "^4.4.0",
-    "babel-loader": "^9.1.3",
+    "@lingui/react": "^4.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@lingui/cli": "^4.4.0",
-    "@lingui/macro": "^4.4.0",
-    "@rspack/cli": "latest",
-    "@types/react": "18.2.0",
+    "@lingui/cli": "^4.7.2",
+    "@lingui/macro": "^4.7.2",
+    "@lingui/swc-plugin": "^4.0.7",
+    "@rspack/cli": "^0.6.2",
+    "@rspack/core": "^0.6.2",
+    "@types/react": "^18.2.79",
     "@types/react-dom": "18.2.1",
-    "babel-plugin-macros": "^3.1.0",
     "typescript": "^5.0.4"
   }
 }

examples/rspack/rspack.config.js

@@ -1,40 +1,53 @@
+const rspack = require("@rspack/core")
+
 /**
  * @type {import('@rspack/cli').Configuration}
  */
 module.exports = {
-    context: __dirname,
-    entry: {
-        main: "./src/main.tsx"
-    },
-    builtins: {
-        html: [
-            {
-                template: "./index.html"
-            }
-        ]
-    },
-    module: {
-        rules: [
-            {
-                test: /\.svg$/,
-                type: "asset"
+  context: __dirname,
+  entry: {
+    main: "./src/main.tsx",
+  },
+  resolve: {
+    extensions: [".js", ".ts", ".tsx", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        type: "asset",
+      },
+      {
+        test: /\.(jsx?|tsx?)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "builtin:swc-loader",
+            options: {
+              sourceMap: true,
+              jsc: {
+                parser: {
+                  syntax: "typescript",
+                  tsx: true,
+                },
+                experimental: {
+                  plugins: [["@lingui/swc-plugin", {}]],
+                },
+                transform: {
+                  react: {
+                    runtime: "automatic",
+                  },
+                },
+              },
             },
-            {
-                test: /\.tsx$/,
-                exclude: /node_modules/,
-                use: {
-                    loader: 'babel-loader',
-                    options: {
-                        presets: [
-                            "@babel/preset-typescript",
-                            "@babel/preset-react"
-                        ],
-                        plugins: [
-                            "macros"
-                        ]
-                    }
-                }
-            }
-        ]
-    }
-};
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: "./index.html",
+    }),
+  ],
+}

examples/rspack/src/Inbox.tsx

@@ -1,8 +1,6 @@
-import React from "react";
-
 import { useLingui } from "@lingui/react";
 
-import { Trans, Plural } from "@lingui/macro";
+import { Plural, Trans } from "@lingui/macro";
 
 import LocaleSwitcher from './LocaleSwitcher';