@verbaly/svelte 0.9.0 → 0.10.0

package/README.md

@@ -58,7 +58,20 @@ export const t = tStore(verbaly);
 export const locale = localeStore(verbaly);
 ```
 
-Rich text: the core's DOM interpreter works in any Svelte app — mark elements with `data-verbaly`/`data-verbaly-rich` and call `bindDom` (whitelist-based, XSS-safe).
+## `<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:
+
+```svelte
+<script>
+  import Trans from '@verbaly/svelte/Trans.svelte';
+</script>
+
+<Trans id="home.title" />
+<Trans id="greet" values={{ name: 'Aron' }} />
+```
+
+Uses the instance from `provideVerbaly` (or pass `instance={verbaly}` explicitly; `richTags` overrides the whitelist). 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**
 

package/dist/Trans.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { onDestroy } from 'svelte';
+  import { parseTags, RICH_TAGS } from 'verbaly';
+  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;
+
+  const v = instance ?? useVerbaly();
+  let version = v.version;
+  const unsubscribe = v.subscribe(() => (version = v.version));
+  onDestroy(unsubscribe);
+
+  $: allowed = new Set(richTags ?? RICH_TAGS);
+  // version keeps this reactive to locale/catalog changes
+  $: nodes = (version, parseTags(v.t(id, values)));
+</script>
+
+<TransNodes {nodes} {allowed} />

package/dist/Trans.svelte.d.ts

@@ -0,0 +1,11 @@
+import { SvelteComponent } from 'svelte';
+import type { Params, Verbaly } from 'verbaly';
+
+export interface TransProps {
+  id: string;
+  values?: Params;
+  instance?: Verbaly;
+  richTags?: string[];
+}
+
+export default class Trans extends SvelteComponent<TransProps> {}

package/dist/TransNodes.svelte

@@ -0,0 +1,8 @@
+<script>
+  import TransNodes from './TransNodes.svelte';
+
+  export let nodes = [];
+  export let allowed;
+</script>
+
+{#each nodes as node}{#if typeof node === 'string'}{node}{:else if allowed.has(node.name)}<svelte:element this={node.name}><TransNodes nodes={node.children} {allowed} /></svelte:element>{:else}<TransNodes nodes={node.children} {allowed} />{/if}{/each}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verbaly/svelte",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Svelte bindings for Verbaly — stores over the reactive core.",
   "keywords": [
     "i18n",
@@ -25,6 +25,11 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./Trans.svelte": {
+      "types": "./dist/Trans.svelte.d.ts",
+      "svelte": "./dist/Trans.svelte",
+      "default": "./dist/Trans.svelte"
     }
   },
   "files": [
@@ -40,14 +45,16 @@
   },
   "peerDependencies": {
     "svelte": "^4.0.0 || ^5.0.0",
-    "verbaly": "^0.9.0"
+    "verbaly": "^0.10.0"
   },
   "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.2.0",
+    "happy-dom": "^20.10.6",
     "svelte": "^5.56.4",
-    "verbaly": "0.9.0"
+    "verbaly": "0.10.0"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && node scripts/copy-svelte.mjs",
     "dev": "tsup --watch",
     "test": "vitest run --passWithNoTests",
     "typecheck": "tsc --noEmit"