Remix examples?

[cgalpin]

Hi. Are there any examples of using Lingui with Remix? I am not finding anything when i search.

tia,
charles

[timofei-iatsenko]

I've never used a Remix myself, so don't have any experience with it. If there is a way to load data from the server (and there is) and it uses react under the hood it should not be very different from nextjs integration.

If you make a working example we would be very welcome to add it to the repo.

[cgalpin]

Ok, I'll give it a shot. But first I have a possibly stupid question - since neextjs uses swc, and remix uses esbuild, surely they need different aproaches? In other words, will the swc-plugin work in remix? I don't think it uses babel

[timofei-iatsenko]

That might be the trickiest part. For sure we don't have a dedicated plugin for esbuild. But actually, esbuild don't allow any plugins which operates on AST. So if you want to apply plugins which are doing custom transformations, you need to use one of existing and supported transpilers together with esbuild. I would recommend to use swc because it's faster. I also don't know do remix allow somehow amending the esbuild configuration. If they not, you probably will not be able to incorporate a macro to remix.

But you still can use Lingui without Macro (and thus without any additional build plugins), macro is just a syntax sugar.

[timofei-iatsenko]

it seems it is not currently possible remix-run/remix#2278

[timofei-iatsenko]

Found this one, https://mortenbarklund.com/blog/styled-components-remix/ they mentioned remix-esbuild-override which helps with the overriding esbuild config

[timofei-iatsenko]

Than you can use https://github.com/sanyuan0704/esbuild-plugin-swc and enable any SWC plugins (styled-components, lingui, etc)

[cgalpin]

I appreciate the help, but I don't think I am going to be able to get this to work. I tried a number of things and even resorted to trying to get bard and bing to assist, but they are as clueless as I am :). From looking at that article, i think I'd need to to write a custom plugin like their styledComponentsPlugin but i don't know where to even begin. I don't have the time to spend - was just trying to evaluate remix andcover the major items like i18n (looking to switch an existing CRA based app).

It's a pity - i'd like to try remix, but not if I can't use lingui, even if just without macros!

thanks again

[andrii-bodnar]

Now it should be easier to integrate Remix with Lingui because it has stable Vite support since version 2.7.0.

[depsimon]

Using the babel plugin for macros.

Here's the gist of my vite.config

import { lingui } from "@lingui/vite-plugin";
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig, loadEnv } from "vite";
import macrosPlugin from "vite-plugin-babel-macros";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(async ({ mode }) => {
  return {
    plugins: [
      remix(),
      macrosPlugin(),
      lingui(),
      tsconfigPaths(),
    ],
  };
});

[ericchernuka]

Thanks @depsimon! One last question, do you do the load of the translations in entry.server or did you come up with a better place for the first render?

[depsimon]

I load the catalog in entry.server

[ericchernuka]

Interesting problem I'm running into is when I do the dynamic activate in the entry.server the root loader seems to have already been called so my translation in the loader returns the id on the first load. Then from then on, it's available. I oddly thought that the routes wouldn't have been executed yet and this would just work.

[depsimon]

I created a PR for the Remix Vite + Babel example I've been working on.

#1946

[miilord]

In Remix, server-side code (e.g., loader()) and client-side code are often written in the same file. Could this cause server-side translation messages to be unintentionally bundled into the client-side code?

[depsimon]

I suppose it can, especially if you load/change the catalog on the client-side.