[Feature Request]: Removing baseLocale from url

[jezikk]

What problem does the feature solve?

If "url" strategy is set and a user opens the url with baseLocale, the middleware should redirects the user to url without locale. For example:

1. baseLocale is set to "en"
2. A user opens url "http://localhost:5173/en"
3. middleware redirect to "http://localhost:5173" because "en" is a base locale

The same use case should be applied when locale in url doesn't exist.

What does the proposed API look like?

This feature should be enabled by default.

[samuelstroschein]

That should automatically happen if you use the default URL patterns or define your URL pattern to "hide" the base locale https://inlang.com/m/gerre34r/library-inlang-paraglideJs/strategy#locale-prefixing.

A reproduction would be great

[jezikk]

@samuelstroschein I don't know how to set it up. The following doesn't work:

    paraglideVitePlugin({
      project: "./project.inlang",
      outdir: "./app/paraglide",
      cookieName: "app_locale",
      strategy: ["url", "cookie", "preferredLanguage", "baseLocale"],
      urlPatterns: [
        {
          pattern: "/:path(.*)?",
          localized: [
            ["cs", "/:path(.*)?"],
            ["en", "/en/:path(.*)?"],
          ],
        },
      ],
    }),

This is my testing project:
https://github.com/jezikk/rr7-hono-paraglide

[samuelstroschein]

Try to move the cs pattern last https://inlang.com/m/gerre34r/library-inlang-paraglideJs/strategy#pattern-order-matters

[jezikk]

No it doesn't work too. Moreover when I am on the page http://localhost:5173/cs and then I call setLocale to 'en', it is redirected to http://localhost:5173/en/cs.

[jezikk]

@samuelstroschein I looked at the code and the problem is that match patterns doesn't have source and target patterns, so it is not possible to transform a url with the locale into the url without the locale. I think we need to extend the pattern config to be able to specify source and target patterns.

localized: [
      ["en", "/en/:path(.*)?"],
      ["cs", "/:locale(cs)?/:path(.*)?", "/:path(.*)?"],
],

[samuelstroschein]

I can't use your reproduction.

• pnpm fails to install
• after removing the workspace config, the app crashes with no locale found

Can you create a minimal reproduction that runs on stackblitz without pnpm workspaces, docker, hono, and react router? You could use the paraglide example vite

[jezikk]

Do you really need the repo for reproduction? Based on the logic in localizeUrl function it is obvious that it is not possible to achieve this only using patterns configuration, because there is no information which part of url should be removed.

There is no info which part of url is locale, so the locale cannot be removed:

urlPatterns: [
        {
          pattern: "/:path(.*)?",
          localized: [
            ["en", "/en/:path(.*)?"],
            ["cs", "/:path(.*)?"],
          ],
        },
      ],

One solution is to extend localized pattern with source and target patterns. In this solution there is defined mapping between source and target route and so it is possible to remove the locale.

urlPatterns: [
        {
          pattern: "/:path(.*)?",
          localized: [
            ["en", "/en/:path(.*)?"],
            ["cs", "/:locale(cs)?/:path(.*)?", "/:path(.*)?"],
          ],
        },
      ],

@samuelstroschein sry my repo was broken. There is a new link: https://github.com/jezikk/rr7-paraglide

[samuelstroschein]

@jezikk the reproduction is still not working https://stackblitz.com/github/jezikk/rr7-paraglide?file=package.json

Do you really need the repo for reproduction?

Yes. I maintain Paraglide in my free-time right now. A reproduction link takes me 1 minute to understand the problem and potential fix. Creating my own reproduction can take 10 - 60 minutes with lots of back and forth (as we have right now)

[jezikk]

@samuelstroschein There is a working repo https://stackblitz.com/edit/vitejs-vite-rumuwvam?file=vite.config.ts

[samuelstroschein]

Nice, thanks for the repro.

• Redirects in your setup generally don't seem to work. The onRedirect callback is never invoked. The console log does not fire https://stackblitz.com/edit/vitejs-vite-vscdwfkl?file=app%2Fmiddleware%2Flocale-middleware.ts
• You have a hydration mismatch. SSR does not seem to work.

The fix should be along the lines of this:

• Define a higher priority pattern that catches /cs/* routes and re-directs them to /*
• I can't test it because redirects dont seem to work in your reproduction

urlPatterns: [
        {
          pattern: '/cs/:path(.*)?',
          localized: [['cs', '/:path(.*)?']],
        },
        {
          pattern: '/:path(.*)?',
          localized: [
            ['en', '/en/:path(.*)?'],
            ['cs', '/:path(.*)?'],
          ],
        },
      ],

[jezikk]

@samuelstroschein no this is a generally issue in the paraglide code which I described above.

Problem is that in the following code is not used element.pattern. There is only used pattern for localized pattern localizedPattern.

 for (const element of urlPatterns) {
      for (const [locale, localizedPattern] of element.localized) {
        const match = new URLPattern(localizedPattern, urlObj.href).exec(
          urlObj.href,
        );
        if (!match) {
          continue;
        }
        // Check if the locale is valid
        if (assertIsLocale(locale)) {
          result = locale;
          break;
        }
      }
      if (result) break;
    }

The element.pattern is used only in the deLocalizeUrl function. This is the reason why I suggest you the following solution. Otherwise, a more extensive change in the code will be required.

urlPatterns: [
        {
          delocalizedPattern: "/:path(.*)?",      // this is only used for delocalization
          localized: [
            ["en", "/en/:path(.*)?"],
            ["cs", "/:locale(cs)?/:path(.*)?", "/:path(.*)?"],
          ],
        },
      ],

you can check these tests which both fails.

test("redirects to base locale only using url strategy", async () => {
	const runtime = await createParaglide({
		blob: await newProject({
			settings: {
				baseLocale: "en",
				locales: ["en", "de"],
			},
		}),
		strategy: ["url"],
		urlPatterns: [
			{
				pattern: "/en/:path(.*)?",
				localized: [["en", "/:path(.*)?"]],
			},
			{
				pattern: "/:path(.*)?",
				localized: [
					["de", "/de/:path(.*)?"],
					["en", "/:path(.*)?"],
				],
			},
		],
	});

	expect(runtime.localizeUrl("https://example.com/en/").href).toBe(
		"https://example.com/"
	);
});

test("redirects to base locale using url and baseLocale strategy", async () => {
	const runtime = await createParaglide({
		blob: await newProject({
			settings: {
				baseLocale: "en",
				locales: ["en", "de"],
			},
		}),
		strategy: ["url", "baseLocale"],
		urlPatterns: [
			{
				pattern: "/en/:path(.*)?",
				localized: [["en", "/:path(.*)?"]],
			},
			{
				pattern: "/:path(.*)?",
				localized: [
					["de", "/de/:path(.*)?"],
					["en", "/:path(.*)?"],
				],
			},
		],
	});

	expect(runtime.localizeUrl("https://example.com/en/").href).toBe(
		"https://example.com/"
	);
});

[samuelstroschein]

Ah, you are right. A change of the API does not seem worthwhile, though:

• Routing to the base locale which is a catch all is an edge case (setLocale always routes to the correct ones)
• Easy workaround by implement a re-direct oneself OR use identifable patterns for the base locale too
• API overloading and multi-matching make localeUrl extremely slow and potentially opts out of future optimizations like Add URLPatternList whatwg/urlpattern#166

Suggestion

Implement a redirect yourself. If Paraglide routes to an incorrect URL that would be a bug. Without manually typing it into the navbar, I wouldn't know routing to /en could occur.

Agree?

[jezikk]

@samuelstroschein Yeah why not, but honestly, I would expect this functionality from this kind of library. Moreover, if it has a middleware. From SEO perspective it is the mandatory feature.