It works except I can't bind a class properly to the editor

Author: cibernox

package-lock.json

@@ -11,33 +11,32 @@
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
-    "@sveltejs/adapter-netlify": "next",
-    "@sveltejs/kit": "next",
-    "@testing-library/svelte": "^3.2.2",
-    "@types/cookie": "^0.5.1",
-    "autoprefixer": "^10.4.13",
-    "chai-dom": "^1.11.0",
-    "cssnano": "^5.1.0",
-    "jsdom": "^20.0.2",
-    "postcss": "^8.4.19",
-    "postcss-load-config": "^4.0.0",
-    "svelte": "^3.55.0",
-    "svelte-check": "^2.9.2",
-    "svelte-preprocess": "^5.0.0",
-    "tailwindcss": "^3.2.4",
-    "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.1",
-    "vitest": "^0.28.0"
+    "@sveltejs/adapter-netlify": "^4.0.0",
+    "@sveltejs/kit": "^2.6.0",
+    "@testing-library/svelte": "^5.2.4",
+    "autoprefixer": "^10.4.20",
+    "chai-dom": "^1.12.0",
+    "cssnano": "^7.0.0",
+    "jsdom": "^25.0.0",
+    "postcss": "^8.4.47",
+    "postcss-load-config": "^6.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-preprocess": "^6.0.0",
+    "tailwindcss": "^3.4.0",
+    "tslib": "^2.8.0",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.0",
+    "vitest": "^2.1.0"
   },
   "type": "module",
   "dependencies": {
-    "cookie": "^0.5.0",
-    "svelte-intl-precompile": "^0.12.1",
-    "terser": "^5.16.0"
+    "cookie": "^1.0.1",
+    "svelte-intl-precompile": "^0.12.3",
+    "terser": "^5.36.0"
   },
   "volta": {
-    "node": "16.14.0",
-    "npm": "8.1.2"
+    "node": "22.11.0",
+    "npm": "10.9.0"
   }
 }

package.json

@@ -1,19 +1,28 @@
 <script>
-  export let lang;
-  export let editable = false;
+  /**
+   * @typedef {Object} Props
+   * @property {string} lang
+   * @property {boolean} [editable]
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { lang = "", editable = false, children } = $props();
+
   function highlight(node) {
     // @ts-ignore
     window.Prism.highlightElement(node);
   }
   function autofocus(node) {
     if (editable) node.focus();
   }
-  
 </script>
 <pre 
   contenteditable={editable} 
   use:autofocus 
-  on:change
+  {onchange}
   class="p-4 m-12 rounded bg-code overflow-x-auto">
-  <code use:highlight class="language-{lang}"><div><slot/></div></code>
+  <code use:highlight>
+    <div>{@render children?.()}</div>
+  </code>
 </pre>

src/lib/Codeblock.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
-	let translations = JSON.stringify({
+	let translations = $state(JSON.stringify({
 		"header": "Svelte Intl Precompile is {adjective}",
 		"posted-on": "Posted on {postDate, date, long}",
 		"invite-friend": "{name} has joined Svelte! Give {gender, select, male {him} female {her} other {your friend}} a warm welcome!",
 		"friends-msg": "You have {count, plural, zero {no friend} one {just # friend} other {# friends}}",
 		"show-friend-profile": "Click to show {gender, select, male {his profile} female {her profile} other {the profile}}"
-	}, null, 2);
-	let transformedTranslations = "";
-	let minifiedTranslations = "";
-	let showMinified = false;
-	$: output = showMinified ? minifiedTranslations : transformedTranslations;
+	}, null, 2));
+	let transformedTranslations = $state("");
+	let minifiedTranslations = $state("");
+	let showMinified = $state(false);
+	let output = $derived(showMinified ? minifiedTranslations : transformedTranslations);
 	let timer;
+
 	function transform(code) {
 		fetch('/playground', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: code })
 			.then(r => {
@@ -32,16 +33,17 @@
 		timer = setTimeout(() => transform(code), 750);
 	}
 
-	$: transformedTranslations === "" ? transform(translations) : debouncedTransform(translations)
-	$: sizeChange = Math.round(output.length / translations.length * 100, 0) - 100;
+	$effect(() => {
+		transformedTranslations === "" ? transform(translations) : debouncedTransform(translations)
+	})
+	let sizeChange = $derived(Math.round(output.length / translations.length * 100) - 100);
 </script>
 <div>
 	<label for="email" class="text-sm block mb-2">Translations</label>
 	<pre
 		contenteditable
-		bind:textContent={translations}
+		bind:innerText={translations}
 		class="p-4 m-2 rounded bg-code overflow-x-auto text-sm border ">
-		<code><div>{translations}</div></code>
 	</pre>
 	{translations.length} bytes	
 </div>
@@ -59,5 +61,6 @@
 	<pre class="p-4 mt-2 rounded bg-code overflow-x-auto text-sm">
 		<code><div>{output}</div></code>
 	</pre>
-	{output.length} bytes ({Math.abs(sizeChange)}% {sizeChange > 0 ? 'bigger' : 'smaller' } than the source translations)
+	{output.length} bytes ({Math.abs(sizeChange)}% {sizeChange > 0 ? 'bigger' : 'smaller' } than the source translations) 
 </div>
+

src/lib/Playground.svelte

@@ -1,4 +1,9 @@
 <script lang="ts">
   import "../app.css";
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
 </script>
-<slot />
+{@render children?.()}

src/routes/+layout.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { t } from 'svelte-intl-precompile';
 	import Codeblock from '$lib/Codeblock.svelte';
-	import CodeInline from '$lib/CodeInline.svelte';
 	import scrollToHash from '$lib/scroll-to-hash';;
 	scrollToHash();
 </script>
@@ -16,7 +15,7 @@
 
 <p>{$t('getting-started.paragraph.installation-1')}</p>
 
-<Codeblock>npm install svelte-intl-precompile</Codeblock>
+<Codeblock lang="sh">npm install svelte-intl-precompile</Codeblock>
 
 <h2 class="text-2xl font-semibold">{$t('getting-started.subsection.create-translations')}</h2>
 <p>

src/routes/[...lang]/docs/getting-started/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Playground from "$lib/Playground.svelte";
-	import { t } from "precompile-intl-runtime";
+	import { t } from "svelte-intl-precompile";
 </script>
 
 <svelte:head>

src/routes/[...lang]/docs/introduction/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { t } from "precompile-intl-runtime";
+	import { t } from "svelte-intl-precompile";
 	import Playground from "$lib/Playground.svelte";
 </script>
 

src/routes/[...lang]/docs/playground/+page.svelte

@@ -9,9 +9,9 @@
 			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
 			to enforce using \`import type\` instead of \`import\` for Types.
 			*/
-		"importsNotUsedAsValues": "error",
 		"isolatedModules": true,
 		"resolveJsonModule": true,
+		"verbatimModuleSyntax": true,
 		/**
 			To have warnings/errors of the Svelte compiler at the correct position,
 			enable source maps by default.