Project: Paraglide JS 2.0 (variants, pluralization, gendering)

[samuelstroschein]

Context

This issue serves as "subscribe here to stay up to date with paraglide js 2.0".

Changelog

• supports for variants
• builds on the inlang SDK v2 which uses sqlite
• expose compiler as library #206

Tasks/issues

See issues with the "v2.0" label

[juliomuhlbauer]

This could be fixed: #146 (it is really annoying)

[samuelstroschein]

@juliomuhlbauer added to the project that comes after paraglide js 2.0 (metaframework overhaul) #217

[samuelstroschein]

Progress is halted until the message format plugin, which most paraglide users use, is updated to v3 #221. While updating the message format to v3, the data model showed inconsistencies, see opral/inlang-sdk#195.

Number 1 prio is to resolve the data model problems. Work on paralglide 2.0 will continue afterward

[samuelstroschein]

From discord https://discord.com/channels/897438559458430986/1094614450004303993/1286100529210064960

End to end import, CRUD, export achieved

Milestone achieved. We are now entering the phase of taking the observations from an end to end workflow to fix bugs and do adjustemnts where useful/required

Uploading CleanShot 2024-09-18 at 19.00.29.mp4…

[samuelstroschein]

Work on paraglide 2.0 continues. Might have a pre-release by the end of the day!

• the inlang sdk v2 is stable
• the message format plugin supports variants (!)

[samuelstroschein]

Logical tests are passing. TypeSafety is still a todo. Hence, no pre-release today and no prerelease until October 7. We are having an onsite next week in Rome which a) I have to attend and b) I have to prep for tmr :)

[samuelstroschein]

Update:

The tests are passing now, but a release of Paraglide JS 2.0 is postponed until we have lix 1.0, which powers Paraglide JS. That's likely in January or February.

• PRs for fixed or improvements will be reviewed and accepted
• Read more here https://opral.substack.com/p/focus-shift-from-inlang-to-lix

Shifting.the.primary.focus.from.Inlang.to.Lix.mp4

[nosovk]

it would be nice to also implement something like that in v2

[samuelstroschein]

What's this? 👀 Hint: Work continues. Paraglide JS 2.0 beta this January

[samuelstroschein]

Paraglide JS 2.0 Beta has been released

• variant (plural, gendering, a/b test) support 🥳
• test the beta and report issues
• targeting general availability by the end of January

Here are examples to get started https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide-js/examples

Paraglide.js.2.0.Beta.Overview.-converted.mp4

[nykula]

I'm very glad that you added a generic form of pluralization using Intl.PluralRules. Reading the examples and documentation, I have some feedback. Sorry if this turns out already covered by your overview video, I can't watch it because of network error. I notice the plurals need a lot of boilerplate:

{
"some_happy_cat": {
    "declarations": ["input count", "local countPlural = count: plural"],
    "selectors": ["countPlural"],
    "match": {
      "countPlural=one": "There is one cat.",
      "countPlural=other": "There are many cats.",
    },
  }
}

With a note:

Read the `local countPlural = count: plural` syntax as "create a local variable `countPlural` that equals `plural(count)`". 

Is there a plan to make Paraglide infer the most typical case of declarations and selectors (the one documented) from a shorthand:

{
"some_happy_cat": {
    "match": {
      "plural(count)=one": "{count} кіт", // -1 кіт, 21 кіт, 31 кіт...
      "plural(count)=few": "{count} коти", // 2 коти, 22 коти...
      "plural(count)=many": "{count} котів", // 0 котів, 5 котів, 11 котів, 25 котів...
      "plural(count)=other": "{count} кота", // 3,5 кота...
    },
  }
}

Otherwise I seem to need a lot of copy-pasting and the translation file will grow vertically way too fast.

[samuelstroschein]

@nykula Yes, most inputs are inferred.

The inlang message format plugin is responsible for the syntax. Any other syntax can be used as well (icu1, i18next, etc.). That said, expressing messages with variants is complex. So complex that we are optimizing for tooling rather than handwriting and managing JSON files.

[gooonzick]

@samuelstroschein hi! thank you for your work!
could you please provide guide/example of usage paraglide-js with i18next dict? doc is not clear for me how to set up it

[samuelstroschein]

@gooonzick Yes. I will put updating these docs https://inlang.com/m/gerre34r/library-inlang-paraglideJs/storage-format on my todo list today

[samuelstroschein]

updated the docs!

[samuelstroschein]

Question about the API. Should Paraglide JS 2.0

👀 prefix locale suff with "Available"

import { availableLocales, type AvailableLocale, assertAvailableLocale } from "./paraglide/runtime.js"

const locale: AvailableLocale = "en"

if (availableLocales.includes("de")){
  //
}

const x = assertAvailableLocale("fr")

🚀 or drop the available prefix

import { locales, type Locale, assertLocale } from "./paraglide/runtime.js"

const locale: Locale = "en"

if (locales.includes("de")){
  //
}

const x = assertLocale("fr")

Vote with 👀 for available prefix or 🚀 for no prefix

[samuelstroschein]

Progress update end of the week (Jan 17)

Jan 12 - Jan 17

✅ paraglide js 2.0 beta

✅ astro adapter beta

❌ sveltekit adapter beta

✅ metaframework adapter overhaul approach

Focus in Jan 20 - Jan 24

• sveltekit adapter beta
• metaframework adapter overhaul implementation

Targets for end of january

• [on track] GA paraglide js 2.0
• [on track] GA adapters
• [on track] GA metaframework overhaul

Paraglider.JS.2.0.Beta.Update.mp4

[samuelstroschein]

The adapters have been released as beta. Try them out and give feedback.

• SvelteKit https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-sveltekit
• NextJS https://github.com/opral/monorepo/blob/main/inlang/packages/paraglide/paraglide-next/example (look into the next.config.js && src/app/layout.tsx)
• Astro https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-astro

Target for next week

• configurable strategy (i18n routing, cookies, domain based, something else)
• per locale splitting Collecting Requirements for Per-Language Splitting #88
• paraglide-js experimental extract #334

If everything goes well, have the release candidate for paraglide js 2.0 by next Friday 🔥

[revosw]

This is an error I am encountering when running npx next dev in my Next.js project

node:internal/modules/esm/resolve:303
  return new ERR_PACKAGE_PATH_NOT_EXPORTED(
         ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './plugin' is not defined by "exports" in C:\dev\project\node_modules\@inlang\paraglide-next\package.json imported from C:\dev\project\next.config.js
    at exportsNotFound (node:internal/modules/esm/resolve:303:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:650:9)
    at packageResolve (node:internal/modules/esm/resolve:828:14)
    at moduleResolve (node:internal/modules/esm/resolve:918:18)
    at defaultResolve (node:internal/modules/esm/resolve:1148:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:528:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:497:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:231:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:97:39)
    at link (node:internal/modules/esm/module_job:96:36) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Using "@inlang/paraglide-js": "2.0.0-beta.13" and "@inlang/paraglide-next": "1.0.0-beta.2". 1.0.0-beta.1 has the same problem, but 0.7.9 works fine

[samuelstroschein]

Can you try renaming your next config to .mjs? I encountered several esm related issues with nextjs that went away after renaming the config to mjs

[juliomuhlbauer]

Does Paraglide support the next config in .ts?

[samuelstroschein]

Does Paraglide support the next config in .ts?

It should but on my machine a next.config.ts led to module resolution errors.

If you get a .ts config to work, make a PR as long as Paraglide JS does not need to be compiled to CJS. Introducing CJS is too much overhead. With the new node feature to import ESM from CJS, the problem might resolve itself.

[revosw]

Oh right, I have probably forgotten to read release notes or similar. In my next config I had this:

import { paraglide } from "@inlang/paraglide-next/plugin";
// ^ note the ./plugin import, hence the error mentioning "./plugin"

export default paraglide({
	paraglide: {
		project: "./project.inlang",
		outdir: "./paraglide",
	},
	// ...other settings
})

But now I need to change it to

import { withParaglideNext } from "@inlang/paraglide-next";
// ^ removed /plugin, imported the new function

export default withParaglideNext({
	paraglide: {
		project: "./project.inlang",
		outdir: "./paraglide",
	},
	// ...other settings
})

I was also amused to see that there were no other exports from the next adapter package, and seemingly no replacement of <LanguageProvider />, useRouter, middleware and other stuff inside paraglide-js.

Despite that, it works flawlessly now!!

[samuelstroschein]

On track for #346:

Progress.Update.on.Paraglide.js.mp4

[rorybush]

I am trying to upgrade to Paraglide V2 with the nextjs adapter but I am currently getting this issue in my middleware.ts file:

[{
	"resource": "/Users/User/code/next-project/middleware.ts",
	"owner": "typescript",
	"code": "2307",
	"severity": 8,
	"message": "Cannot find module './paraglide/adapter' or its corresponding type declarations.",
	"source": "ts",
	"startLineNumber": 2,
	"startColumn": 28,
	"endLineNumber": 2,
	"endColumn": 49,
	"modelVersionId": 106
}]

I am using the same next config and middleware from this example https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-next/example

 "scripts": {
    "dev": "next dev --turbopack",
    "build": "paraglide-js compile --project ./project.inlang --outdir ./paraglide && next build",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "paraglide-js compile --project ./project.inlang --outdir ./paraglide",
    "drizzle": "npx drizzle-kit studio --config drizzle.config.ts"
  },

  "devDependencies": {
    "@inlang/paraglide-js": "^2.0.0-beta.13",
    "@inlang/paraglide-next": "^1.0.0-beta.2",

Any help would be greatly appreciated. Thanks!

[samuelstroschein]

Are you using the withParaglideNext webpack config? https://github.com/opral/monorepo/blob/main/inlang/packages/paraglide/paraglide-next/example/next.config.mjs

[ambigos1]

Hi.
I just wanted to mention that I am getting an Error while running npm install when using the:
"@inlang/paraglide-js": "2.0.0-beta.14",
"@inlang/paraglide-sveltekit": "1.0.0-beta.4",

The Error:
npm error Could not resolve dependency:
npm error peer @inlang/paraglide-js@"^2" from @inlang/[email protected]

[samuelstroschein]

Arghhhhh why are beta releases so broken on NPM? Will fix this today

[samuelstroschein]

New batch of beta's released:

• paraglide js 2.0.0-beta.16
• paraglide next 1.0.0-beta.6
• paraglide astro 1.0.0-beta.4
• paraglide sveltekit 1.0.0-beta.5

The new beta's have the #346 API:

strategy: ["pathname", "cookie", "baseLocale"]

Please try it out and give feedback. If you encounter issues, please open separate issues to keep this thread clean with updates on the beta.

Next steps

• try top level await approach in Collecting Requirements for Per-Language Splitting #88
• prepare release candidate (docs)

[mquandalle]

In the paraglide sveltekit beta, it seems that the logic to replace %paraglide.lang% with the current language in the app.html template is gone.

This logic : https://github.com/opral/monorepo/blob/inlang-v1/inlang/source-code/paraglide/paraglide-sveltekit/src/runtime/hooks/handle.server.ts#L162
SvelteKit documentation: https://svelte.dev/docs/kit/accessibility#The-lang-attribute

[mquandalle]

Also I can't find the way to translate pathnames in the paraglide sveltekit beta?

[samuelstroschein]

@mquandalle see #359