feat: RSpack + Lingui Example

[Collinbrown95]

Description

Including example of integration between Rspack and Lingui-JS. Closes #1749.

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

Fixes # (issue)

Checklist

• I have read the CONTRIBUTING and CODE_OF_CONDUCT docs
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
js-lingui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 29, 2023 1:18pm

[github-actions]

size-limit report 📦

Path	Size
./packages/core/dist/index.mjs	2.76 KB (0%)
./packages/detect-locale/dist/index.mjs	721 B (0%)
./packages/react/dist/index.mjs	2.21 KB (0%)
./packages/remote-loader/dist/index.mjs	7.24 KB (0%)

[andrii-bodnar]

@Collinbrown95 thanks a lot for the contribution!

Could you please also add a link to the project on the Examples page in the docs?

[codecov]

Codecov Report

Patch and project coverage have no change.

Comparison is base (47d4fdb) 75.98% compared to head (2958b03) 75.98%.
Report is 1 commits behind head on main.

❗ Current head 2958b03 differs from pull request most recent head a7c936a. Consider uploading reports for the commit a7c936a to get more accurate results

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1752   +/-   ##
=======================================
  Coverage   75.98%   75.98%           
=======================================
  Files          81       81           
  Lines        2065     2065           
  Branches      530      530           
=======================================
  Hits         1569     1569           
  Misses        383      383           
  Partials      113      113           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Collinbrown95]

@andrii-bodnar thanks for the feedback!

I've added the rspack example in this commit Collinbrown95@2958b03.

Please let me know if you'd like any additional changes 😄

[andrii-bodnar]

@Collinbrown95 looks good to me, thank you! 🚀

[timofei-iatsenko]

@Collinbrown95 hey, I just tried to run this example in the repo and it doesn't work. There are bunch of issues:

1. No lockfile in the example folder, so Yarn will not execute yarn install there

2. @rspack/cli": fixed with version "latest"

3. Then It doesn't start because of Error: Cannot find module '@rspack/core'

4. After installing it it shows

   Resolve error: Can't resolve './Inbox' in '/Users/tim/projects/js-lingui/examples/rspack/src'
   ╭─[5:1]
   5 │ import { messages as enMessages } from "./locales/en/messages";
   6 │ import { messages as frMessages } from "./locales/fr/messages";
   7 │ import Inbox from "./Inbox";
   · ─────────
   8 │ i18n.load({
   9 │ "en": enMessages,
   ╰────
   help: Found module './Inbox.tsx'. However, it's not possible to request this module without the extension
   if its extension was not listed in the resolve.extensions. Here're some possible solutions:

    1. add the extension `".tsx"` to `resolve.extensions` in your rspack configuration
    2. use './Inbox.tsx' instead of './Inbox'
   

   For every tsx / ts file
   I tried to fix it with this rspack config:

/**
 * @type {import('@rspack/cli').Configuration}
 */
module.exports = {
  context: __dirname,
  entry: {
    main: "./src/main.tsx",
  },
  resolve: {
    extensions: [".tsx", ".js", ".ts"],
  },
  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"],
          },
        },
      },
    ],
  },
}

But it still doesn't work. it starts without errors, but dev server returned an empty page.