nubolab-ffwd / svelte-fluent Goto Github PK

We may need a message with only attributes, then our Svelte code will be something like:

<Localized id="foo" let:attrs>
 <p>{attrs.paragraph1}</p>
</Localized>

But it crashes when loading a message like this one:

foo =
  .bar = example

while it works in this case:

foo = fix
  .bar = example

Error log:

TypeError: Invalid value used in weak set
    at WeakSet.add (<anonymous>)
    at resolveComplexPattern (resolver.js:232:17)
    at FluentBundle.formatPattern (bundle.js:150:25)
    at FluentProvider.svelte:27:25
    at $$self.$$.update (Localized.svelte:7:19)
    at init (index.mjs:2027:8)
    at new Localized (Localized.svelte:7:43)
    at Array.create_default_slot (RowWhatIsGambiConf.svelte:37:28)
    at create_slot (index.mjs:71:28)
    at create_fragment (Window.svelte:46:23)

(Or at least, the stack trace blames this)

With the dev tools closed. everything seems fine. but after opening it and clicking to enable. this stack trace gets printed every reload. and overlays are broken (regular translations seem to work fine) until you close the tab and open another one.

console-export-2023-6-14_15-48-52.txt

Dependencies list pruned only to ones I believe are relevant:

	"devDependencies": {
		"@nubolab-ffwd/svelte-fluent": "^0.6.1",
		"@sveltejs/adapter-node": "^1.2.4",
		"@sveltejs/adapter-static": "^2.0.2",
		"@sveltejs/kit": "^1.5.0",
		"svelte": "^3.54.0",
		"svelte-check": "^3.0.1",
		"vite": "^4.3.0"
	},
	"dependencies": {
		"@fluent/bundle": "^0.18.0",
		"@fluent/langneg": "^0.7.0",
		"accept-language-parser": "^1.5.0",
		"jsdom": "^22.1.0",
	}

plus Svelte DevTools 1.3.0

Currently, <Overlay> outputs a <span> wrapping the result:

<Overlay id="foo">

outputs something like:

<span>foo text</span>

But we may need to render a specific element, such as <p>.

Perhaps we can use <svelte:element> and let the user decides which element is better for the use case, defaulting to <p> if no one is defined.

The same can be useful for <Localized>.
Currently, it doesn't have a wrapper element. Then, if we need to wrap it, we need to write more:

<Localized id="foo" let:text>
  <p>{text}</p>
</Localized>

If would be good if we could have an API like this:

<Localized id="foo" element="p" />

I don't know if it's expected, but I noticed that when using a placement, this library includes the UNICODE characters U+2068 and U+2069.

You can reproduce it by doing the following:

message = -{ $foo }-

<script>
  import { Localized } from "@nubolab-ffwd/svelte-fluent"
</script>

<Localized id="message" args={{ foo: 'value' }} let:text>
  {console.log(text)}
</Localized>

Then, copy the console output on VS Code:

It usually isn't a big deal, but if you are using the output on the img src attribute or making a string comparison, it can be bad.

Hello - thanks for this library!

I took version 0.4.3 (a year old) for a spin, but it doesn't work with the latest sveltekit.

Would you be able to publish a new release to npm? It looks like a lot of changes were made in the past year.

Many thanks,
Aslak Hellesøy

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update commitlint monorepo to v19.2.2 (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependency svelte to v4.2.14
• chore(deps): update dependency eslint to v9
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Hello, thanks for the package!
I'm trying to use this package on my personal project built with SvelteKit, but I have the following error:

index.mjs:307 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$$')
    at init (index.mjs:307:50)

It refers to the following line:

I tried to fix it by adding a parent to FluentProvider, but it didn't fix that.

Commit with the changes: gambiconf/gambiconf.github.io@a4f61cb
You can easily follow the project readme to reproduce it.