HenryLie / svelte-i18n-lingui

Use lingui for i18n in Svelte/Sveltekit projects
https://www.npmjs.com/package/svelte-i18n-lingui
MIT License
23 stars 2 forks source link

Svelte 5.x support #14

Closed bfontaine closed 3 weeks ago

bfontaine commented 1 month ago

Hello, The package.json currently declares a peer dependency on Svelte 4, thus blocking any upgrade to Svelte 5:

    "peerDependencies": {
        "@lingui/core": "^4.5.0",
        "svelte": "4.x"
    },

https://svelte-omnisite.vercel.app/docs/svelte/v5-migration-guide See also https://github.com/sveltejs/svelte/issues/13434

Also, not sure if relevant for <T/>:

In Svelte 5, if you put a {@render children()} in your component but don't provide child content, an error will occur. If you're building a component that may or may not have children, you'll need a conditional check for the children since it's now a snippet function. {#if children}{@render children()}{/if}. Slightly less ergonomic than Svelte 4, but a small price to pay for the large improvement snippets provide over slots. (Note: this is true of any snippet, but children is the most common) (source)

HenryLie commented 4 weeks ago

Thanks for posting the issue and for the helpful links! It seems like for <T>, it could be beneficial to keep using the Svelte 4 syntax to be consumed in components that haven't been migrated to runes yet, but provide another component to be used in rune components. I'm thinking maybe <LegacyT> for the old syntax and <T> for the new syntax, to make migration to future versions easier (that will deprecate the <LegacyT> component with the old syntax). Any thoughts on this?

I'm working on the migration to Svelte 5 now but encountered some issues with the dependency updates. Will keep everyone updated on the progress.

bfontaine commented 3 weeks ago

Good idea! Thank you for your work on this.

HenryLie commented 3 weeks ago

I've just made a small version update in 0.1.9 that only relaxed Svelte's peer dependency version so that this package can be installed on Svelte 5 projects.

The internals are unchanged for now, so the <T> component still expects slots to be used instead of snippets. This should still work in Svelte 5 since the slots aren't deprecated yet, but that does mean that you won't be able to use snippets with this component yet. I'll make a separate release once the internal Svelte 5 migration is finished with a new <T> component that supports snippets.

burningtree commented 3 weeks ago

The main problem is with the extractor (svelte-i18n-lingui/extractor), because the svelte compiler no longer returns walk utilities.

That means the extraction (eq. lingui extract) doesn't work and ends with this error:

Error: 'svelte/compiler' no longer exports a `walk` utility — please import it directly from 'estree-walker' instead

I made a working version using estree-walker-ts, but I don't know if this is the ideal solution

https://github.com/HenryLie/svelte-i18n-lingui/compare/main...burningtree:svelte-i18n-lingui:main

HenryLie commented 3 weeks ago

@burningtree Thanks for the heads up! Indeed, lingui extract fails after updating to Svelte 5 due to the missing export. I was trying to hack the import to keep using estree-walker, but wasn't able to find a reliable way that works both on dev and build. I think your version with estree-walker-ts works perfectly 👍

I've made a new release and bumped the minor version, the latest release is now on v0.2.0 and uses Svelte 5 internally. It exposes both <T> and <LegacyT> components as mentioned above. The <LegacyT> component will be removed from v0.3.

I'll close this issue now since the migration is complete, thanks everyone for the discussion! Feel free to open another issue if you find any problem with the latest version.