Adds a second example

[tsteckenborn]

This adds a second sample.

From my perspective the following gaps:

• When starting in dev, on client side, there's Uncaught SyntaxError: Identifier 'RefreshRuntime' has already been declared (at root.tsx:29:1). I assume some issue with the HMR due to the React Router and React Vite plugins.
• Currently the languages are hardcoded. We'd need a sample on e.g. language based on the browsers locale. Yet then the behaviour w.r.t. to the client and server entry would need to be checked (as they should return the same I assume otherwise there are hydration errors)
• I noticed that the same description and text might still result in two different translation keys. To me it's currently unclear how to best reuse translations.
• I'm currently unsure on how to best translates texts that might be included dynamically (e.g. from configuration or services)
• I'm currently unsure on how to best translate larger contents. Assuming e.g. a website would have a blog on how best return different languages or translated mdxs?

Not actually deployed yet, so we'd need to check if it works when deployed.

[kayhadrin]

Just noticing this draft PR.
For the "questions" I see in the PR description, I'd first suggest creating new discussion topics in the Q&A section. 🙂

[cpojer]

Regarding the error about RefreshRuntime, that's an issue with the React Router Vite plugin, see remix-run/react-router#12352. tl;dr: The React Router Vite plugin should be changed to take a babel option so it can be used instead of the React Vite plugin.

[tsteckenborn]

Shouldn't pnpm fbtee:translate && react-router build suffice here, as it anyways works on a different set of files then the ones created by manifest and collect?

[cpojer]

The translate command needs .source_strings.json.

[cpojer]

With today's release of <LocaleContext /> in fbtee* 0.3.0, there are now two app templates to get started with fbtee with zero config:

• Web App Template
• Expo App Template

Developers can also check out Athena Crisis, which uses fbtee extensively.

The README was updated with these details, including how to set up fbtee using LocaleContext, setupLocaleContext or the previous setupFbtee way of initializing the project.

[tsteckenborn]

I think what's missing right now is a setup description for users using frameworks such as React Router (formerly Remix) or Tanstack Start, where the currently described approach doesn't work without issues.

[tsteckenborn]

@cpojer so e.g. with regards to e.g. TanStack Start the approach with

		react({
			babel: {
				presets: [fbteePreset],
			},
		}),

leads to Uncaught SyntaxError: Identifier 'injectIntoGlobalHook' has already been declared. Same for Remix back then (so now likely the respective React Router variant).

while the previously working workaround of instead using vite-plugin-babel with

		babel({
			filter: (name) => name.endsWith("tsx"),
			include: ["./src/**/*"],
		}),

with

{
	"presets": ["@nkzw/babel-preset-fbtee", "@babel/preset-typescript"],
	"plugins": ["babel-plugin-react-compiler"]
}

now atleast in development leads to:

You appear to be using a native ECMAScript module preset, which is only supported when running Babel asynchronously or when using the Node.js `--experimental-require-module` flag. 

when simply being run via "dev": "vite dev --port 3000".

Explaining these could broaden the audience.

[cpojer]

I just added React Router to the web app template here: nkzw-tech/web-app-template@9168b12. It's using Vite just normally.

Those errors are not originating from fbtee, so if they don't allow adding additional babel plugins or aren't using ESM, then those projects need to be fixed. I'm happy to help with that, if they are open to supporting these features.

[tsteckenborn]

Here we are at the problem with React-Router. You aren't using Framework Mode, right? If you try it with one app using Framework Mode you should encounter the issue.

While I understand that the issues are not rooted in fbtee, I can just offer the point of view of a user that plays around with web development, yet doesn't focus on it. Here for me it's basically darn, doesn't work where as a user I now either need to dive into finding out how all of these work and where the issue might be or search for a working alternative. Most users will likely choose the route that gets them to their goal easiest.

[cpojer]

I added a paragraph to the README on how to set it up with React Router's Vite plugin: https://github.com/nkzw-tech/fbtee#using-babel-directly-instead-of-vites-react-plugin

The recommendation here hasn't changed as the React Router issue at remix-run/react-router#12352 has not been resolved. Using vite-plugin-babel was always possible in that time.

[cpojer]

For anyone looking to use fbtee with TanStack Start, check this out: amosbastian/fbtee-tanstack-start#1