feat: RSpack + Lingui Example

examples/rspack/.gitignore

@@ -0,0 +1,155 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/rspack/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Collin Brown
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

examples/rspack/README.md

@@ -0,0 +1,29 @@
+# Lingui + RSpack Example
+
+This project shows how to use the [Rspack JavaScript bundler](https://www.rspack.dev/guide/introduction.html) with [Lingui JS](https://lingui.dev/) to provide i18n for a React application (TypeScript).
+
+![lingui-rspack-i18n-demo](demo.gif)
+
+## Setup Instructions
+
+1. `cd rspack-project && npm install`
+2. `npm run dev` to run the development server.
+3. `npm run build` to build the application.
+
+## Update I18n
+
+1. Wrap any messages requiring translation in `<Trans>` or a related macro.
+2. `npm run extract` to generate message catalogs in `src/locales/{locale}/messages`.
+3. Translate any new messages in the catalogs.
+4. `npm run compile` to create runtime catalogs.
+
+## 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/loader.html#builtinswc-loader), `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.
+
+## Helpful Resources
+
+- This [blog post](https://betterprogramming.pub/react-app-internationalization-with-linguijs-9486ccd80e07) shows a step-by-step guide to set up LinguiJS with React.
+- [Official documentation for React setup with LinguiJS](https://lingui.dev/tutorials/react). This repo closely follows the example from the official docs.

examples/rspack/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Rspack + React + TS</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

examples/rspack/lingui.config.ts

@@ -0,0 +1,13 @@
+import { LinguiConfig } from '@lingui/conf'
+
+const config: Partial<LinguiConfig> = {
+    locales: ["en", "fr"],
+    sourceLocale: "en",
+    catalogs: [{
+        path: "src/locales/{locale}/messages",
+        include: ["src"]
+    }],
+    format: "po"
+};
+
+export default config;

examples/rspack/package.json

@@ -0,0 +1,34 @@
+{
+  "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",
+    "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",
+    "@types/react-dom": "18.2.1",
+    "babel-plugin-macros": "^3.1.0",
+    "typescript": "^5.0.4"
+  }
+}

examples/rspack/rspack.config.js

@@ -0,0 +1,40 @@
+/**
+ * @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"
+            },
+            {
+                test: /\.tsx$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: [
+                            "@babel/preset-typescript",
+                            "@babel/preset-react"
+                        ],
+                        plugins: [
+                            "macros"
+                        ]
+                    }
+                }
+            }
+        ]
+    }
+};

examples/rspack/src/Inbox.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import { useLingui } from "@lingui/react";
+
+import { Trans, Plural } from "@lingui/macro";
+
+import LocaleSwitcher from './LocaleSwitcher';
+
+export default function Inbox() {
+    const messages = [{}, {}];
+    const messagesCount = messages.length;
+    const lastLogin = new Date();
+    const markAsRead = () => {
+        alert("Marked as read.");
+    };
+    const { i18n } = useLingui();
+
+    return (
+        <div>
+            <LocaleSwitcher />
+            <h1><Trans>Message Inbox</Trans></h1>
+            <p>
+                <Trans>
+                    See all <a href="/unread">unread messages </a>
+                    {" or "}
+                    <a onClick={markAsRead}>mark them</a> as read.
+                </Trans>
+            </p>
+            <p>
+                <Plural value={messagesCount} one="There's # message in your inbox." other="There are # messages in your inbox." />
+            </p>
+            < footer > <Trans>Last login on {i18n.date(lastLogin)}.</Trans></footer>
+        </div>
+    );
+}

examples/rspack/src/LocaleSwitcher.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useLingui } from '@lingui/react';
+import Locale from './locales';
+
+function LocaleSwitcher() {
+    const { i18n } = useLingui();
+
+    const handleLocaleChange = (newLocale: Locale) => {
+        i18n.activate(newLocale);
+    };
+
+    return (
+        <div>
+            <button onClick={() => handleLocaleChange(Locale.ENGLISH)}>English</button>
+            <button onClick={() => handleLocaleChange(Locale.FRENCH)}>Français</button>
+            {/* Add more buttons for other supported locales */}
+        </div>
+    );
+}
+
+export default LocaleSwitcher;