@verbaly/svelte 0.21.0 → 0.23.0

package/README.md

@@ -2,7 +2,7 @@
   <img src="https://raw.githubusercontent.com/AronSoto/verbaly/develop/assets/logo.png" alt="Verbaly" width="300" />
 </p>
 
-<p align="center"><em>Svelte bindings for Verbaly — stores over the reactive core.</em></p>
+<p align="center"><em>Svelte bindings for Verbaly: stores over the reactive core.</em></p>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@verbaly/svelte"><img src="https://img.shields.io/npm/v/@verbaly/svelte?logo=npm&color=cb3837" alt="npm version" /></a>
@@ -11,7 +11,7 @@
 
 ---
 
-Idiomatic Svelte stores (4 and 5) over the [Verbaly](https://github.com/AronSoto/verbaly) core — the `$` auto-subscription just works, re-rendering on every locale switch.
+Idiomatic Svelte 5 stores over the [Verbaly](https://github.com/AronSoto/verbaly) core: the `$` auto-subscription just works, re-rendering on every locale switch.
 
 ## 🚀 Install
 
@@ -38,7 +38,7 @@ pnpm add @verbaly/svelte
   import { useT, useLocale } from '@verbaly/svelte';
 
   const t = useT();
-  const locale = useLocale(); // writable — bind it to a select
+  const locale = useLocale(); // writable, bind it to a select
 </script>
 
 <p>{$t('inbox', { count: 3 })}</p>
@@ -48,7 +48,7 @@ pnpm add @verbaly/svelte
 </select>
 ```
 
-Or skip the keys entirely — write the source text in place and the compiler extracts it, right in your `.svelte` files (script and markup):
+Or skip the keys entirely: write the source text in place and the compiler extracts it, right in your `.svelte` files (script and markup):
 
 ```html
 <h1>{$t`Hello ${name}, you have ${count} messages`}</h1>
@@ -65,9 +65,9 @@ export const t = tStore(verbaly);
 export const locale = localeStore(verbaly);
 ```
 
-## ✨ `<Trans>` — rich text
+## ✨ `<Trans>`: rich text
 
-Messages with tags (`'The <em>build</em> gate'`) render as real elements — same phrasing-tag whitelist as `data-verbaly-rich`, unknown tags unwrap to inert text, XSS-safe:
+Messages with tags (`'The <em>build</em> gate'`) render as real elements, same phrasing-tag whitelist as `data-verbaly-rich`, unknown tags unwrap to inert text, XSS-safe:
 
 ```html
 <script>
@@ -79,13 +79,16 @@ Messages with tags (`'The <em>build</em> gate'`) render as real elements — sam
 
 <!-- message: 'Read the <docs>guide</docs>' → a real <a>; hrefs from you, never from messages -->
 <Trans id="cta" links={{ docs: { href: '/docs', target: '_blank', rel: 'noopener' } }} />
+
+<!-- or map a tag to your own component; it receives the tag content as children -->
+<Trans id="cta" components={{ docs: DocsLink }} />
 ```
 
-Uses the instance from `provideVerbaly` (or pass `instance={verbaly}` explicitly; `richTags` overrides the whitelist, `links` maps tag names to hrefs — `javascript:` blocked). Alternatively the core's DOM interpreter works in any Svelte app — mark elements with `data-verbaly`/`data-verbaly-rich` and call `bindDom`.
+Uses the instance from `provideVerbaly` (or pass `instance={verbaly}` explicitly; `richTags` overrides the whitelist, `links` maps tag names to hrefs with `javascript:` blocked, `components` wins over both). Alternatively the core's DOM interpreter works in any Svelte app: mark elements with `data-verbaly`/`data-verbaly-rich` and call `bindDom`.
 
 📖 Docs: **https://verbaly-web.vercel.app/docs/frameworks**
 
-> ⚠️ Early development (`0.x`) — API not stable yet.
+> ⚠️ Early development (`0.x`): API not stable yet.
 
 ## License
 

package/dist/Trans.svelte

@@ -4,26 +4,28 @@
   import { useVerbaly } from '@verbaly/svelte';
   import TransNodes from './TransNodes.svelte';
 
-  export let id;
-  export let values = undefined;
-  export let instance = undefined;
-  export let richTags = undefined;
-  export let links = undefined;
+  let { id, values, instance, components, richTags, links } = $props();
 
+  // the instance is fixed at mount on purpose
+  // svelte-ignore state_referenced_locally
   const v = instance ?? useVerbaly();
-  let version = v.version;
-  const unsubscribe = v.subscribe(() => (version = v.version));
-  onDestroy(unsubscribe);
+  let version = $state(v.version);
+  onDestroy(v.subscribe(() => (version = v.version)));
 
-  $: allowed = new Set(richTags ?? RICH_TAGS);
+  const allowed = $derived(new Set(richTags ?? RICH_TAGS));
   // normalize + sanitize hrefs once (never from messages)
-  $: linkDefs = links
-    ? Object.fromEntries(
-        Object.entries(links).map(([name, link]) => [name, normalizeLink(link)]),
-      )
-    : undefined;
+  const linkDefs = $derived(
+    links
+      ? Object.fromEntries(
+          Object.entries(links).map(([name, link]) => [name, normalizeLink(link)]),
+        )
+      : undefined,
+  );
   // version keeps this reactive to locale/catalog changes
-  $: nodes = (version, parseTags(v.t(id, values)));
+  const nodes = $derived.by(() => {
+    void version;
+    return parseTags(v.t(id, values));
+  });
 </script>
 
-<TransNodes {nodes} {allowed} links={linkDefs} />
+<TransNodes {nodes} {allowed} {components} links={linkDefs} />

package/dist/Trans.svelte.d.ts

@@ -1,12 +1,14 @@
-import { SvelteComponent } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import type { Params, RichLink, Verbaly } from 'verbaly';
 
 export interface TransProps {
   id: string;
   values?: Params;
   instance?: Verbaly;
+  components?: Record<string, Component<{ children?: Snippet }>>;
   richTags?: string[];
   links?: Record<string, RichLink>;
 }
 
-export default class Trans extends SvelteComponent<TransProps> {}
+declare const Trans: Component<TransProps>;
+export default Trans;

package/dist/TransNodes.svelte

@@ -1,9 +1,7 @@
 <script>
   import TransNodes from './TransNodes.svelte';
 
-  export let nodes = [];
-  export let allowed;
-  export let links = undefined;
+  let { nodes = [], allowed, components, links } = $props();
 </script>
 
-{#each nodes as node}{#if typeof node === 'string'}{node}{:else if links && links[node.name]}<a href={links[node.name].href} target={links[node.name].target} rel={links[node.name].rel}><TransNodes nodes={node.children} {allowed} {links} /></a>{:else if allowed.has(node.name)}<svelte:element this={node.name}><TransNodes nodes={node.children} {allowed} {links} /></svelte:element>{:else}<TransNodes nodes={node.children} {allowed} {links} />{/if}{/each}
+{#each nodes as node}{#if typeof node === 'string'}{node}{:else if components && components[node.name]}{@const Component = components[node.name]}<Component><TransNodes nodes={node.children} {allowed} {components} {links} /></Component>{:else if links && links[node.name]}<a href={links[node.name].href} target={links[node.name].target} rel={links[node.name].rel}><TransNodes nodes={node.children} {allowed} {components} {links} /></a>{:else if allowed.has(node.name)}<svelte:element this={node.name}><TransNodes nodes={node.children} {allowed} {components} {links} /></svelte:element>{:else}<TransNodes nodes={node.children} {allowed} {components} {links} />{/if}{/each}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@verbaly/svelte",
-  "version": "0.21.0",
-  "description": "Svelte bindings for Verbaly — stores over the reactive core.",
+  "version": "0.23.0",
+  "description": "Svelte bindings for Verbaly: stores over the reactive core.",
   "keywords": [
     "i18n",
     "svelte",
@@ -44,14 +44,14 @@
     "access": "public"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0",
-    "verbaly": "^0.21.0"
+    "svelte": "^5.0.0",
+    "verbaly": "^0.23.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.2.0",
     "happy-dom": "^20.10.6",
     "svelte": "^5.56.4",
-    "verbaly": "0.21.0"
+    "verbaly": "0.23.0"
   },
   "scripts": {
     "build": "tsdown && node scripts/copy-svelte.mjs",