update examples

Author: cam-eo

examples/component-scoped-csr/src/lib/assets/favicon.svg

@@ -2,14 +2,18 @@
   import init from './translations';
   const { t, locale, locales, translations, addTranslations, loadTranslations } = init();
 
-  export let initLocale;
-  export let initTranslations;
+  let { initLocale = $bindable(), initTranslations = $bindable() } = $props();
 
   addTranslations(initTranslations);
   const promise = loadTranslations(initLocale);
 
-  $: (initTranslations = $translations);
-  $: ($locale = initLocale);
+  $effect(() => {
+    initTranslations = $translations;
+  });
+
+  $effect(() => {
+    $locale = initLocale;
+  });
 </script>
 
 <div>
@@ -19,7 +23,7 @@
   {:then}
     <p>{$t('common.info')}</p>
 
-    <select bind:value={initLocale} on:input={() => locale.set(initLocale)}>
+    <select bind:value={initLocale} oninput={() => locale.set(initLocale)}>
       {#each $locales as l}
       <option value="{l}">{$t(`lang.${l}`)}</option>
       {/each}
@@ -33,4 +37,4 @@
     display: inline-block;
     padding: 20px;
   }
-</style>
+</style>

examples/component-scoped-csr/src/lib/component/index.svelte

@@ -1,30 +1,36 @@
 <script>
+  import favicon from '$lib/assets/favicon.svg';
   import { t, locale, locales } from '$lib/translations';
 
+  let { children } = $props();
+
   const handleChange = ({ currentTarget }) => {
     const { value } = currentTarget;
-
     document.cookie = `lang=${value} ;`;
   };
 
-  $: count = 2;
+  let count = $state(2);
 </script>
 
+<svelte:head>
+  <link rel="icon" href={favicon} />
+</svelte:head>
+
 <a href="/">{$t('menu.home')}</a>
 <a href="/about">{$t('menu.about')}</a>
 <br/>
 <br/>
 {$t('menu.notification', { count })}<br />
-<button on:click="{() => {if (count) count -= 1;}}">–</button>
-<button on:click="{() => {count += 1;}}">+</button>
+<button onclick={() => {if (count) count -= 1;}}>–</button>
+<button onclick={() => {count += 1;}}>+</button>
 <hr />
-<slot />
+{@render children()}
 <br />
 <br />
 <br />
 <br />
-<select bind:value="{$locale}" on:change={handleChange}>
+<select bind:value="{$locale}" onchange={handleChange}>
   {#each $locales as value}
     <option value="{value}">{$t(`lang.${value}`)}</option>
   {/each}
-</select>
+</select>

examples/component-scoped-csr/src/routes/+layout.svelte

@@ -4,7 +4,7 @@
 
   const link = 'https://kit.svelte.dev';
 
-  let props = [
+  let props = $state([
     {
       initLocale: 'cs',
       initTranslations: {},
@@ -13,11 +13,11 @@
       initLocale: 'de',
       initTranslations: {},
     },
-  ];
+  ]);
 
   /** @type {import('./$types').Snapshot} */
   export const snapshot = {
-    capture: () => props,
+    capture: () => $state.snapshot(props),
     restore: (value) => { props = value; },
   };
 </script>
@@ -26,4 +26,4 @@
 <p>{@html $t('home.text', { link })}</p>
 
 <Component bind:initLocale={props[0].initLocale} bind:initTranslations={props[0].initTranslations} />
-<Component bind:initLocale={props[1].initLocale} bind:initTranslations={props[1].initTranslations} />
+<Component bind:initLocale={props[1].initLocale} bind:initTranslations={props[1].initTranslations} />

examples/component-scoped-csr/src/routes/+page.svelte

@@ -1,6 +1,12 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
+import path from "path";
 
 export default defineConfig({
   plugins: [sveltekit()],
+  resolve: {
+    alias: {
+      "sveltekit-i18n": path.resolve(__dirname, "../../src/index.ts"),
+    },
+  },
 });

examples/component-scoped-csr/vite.config.js

@@ -1,9 +1,9 @@
-<script context="module">
+<script module>
   export { default as init } from './translations';
 </script>
 
 <script>
-  export let props;
+  let { props = $bindable() } = $props();
 
   const { translations, locale, locales, t } = props;
 </script>
@@ -13,8 +13,8 @@
   <p>{$t('common.info')}</p>
 
   <select bind:value="{$locale}">
-    {#each $locales as locale}
-    <option value="{locale}">{$t(`lang.${locale}`)}</option>
+    {#each $locales as loc}
+    <option value="{loc}">{$t(`lang.${loc}`)}</option>
     {/each}
   </select>
 </div>
@@ -25,4 +25,4 @@
     display: inline-block;
     padding: 20px;
   }
-</style>
+</style>

examples/component-scoped-ssr/src/lib/assets/favicon.svg

@@ -1,30 +1,36 @@
 <script>
+  import favicon from '$lib/assets/favicon.svg';
   import { t, locale, locales } from '$lib/translations';
 
+  let { children } = $props();
+
   const handleChange = ({ currentTarget }) => {
     const { value } = currentTarget;
-
     document.cookie = `lang=${value} ;`;
   };
 
-  $: count = 2;
+  let count = $state(2);
 </script>
 
+<svelte:head>
+  <link rel="icon" href={favicon} />
+</svelte:head>
+
 <a href="/">{$t('menu.home')}</a>
 <a href="/about">{$t('menu.about')}</a>
 <br/>
 <br/>
 {$t('menu.notification', { count })}<br />
-<button on:click="{() => {if (count) count -= 1;}}">–</button>
-<button on:click="{() => {count += 1;}}">+</button>
+<button onclick={() => {if (count) count -= 1;}}>–</button>
+<button onclick={() => {count += 1;}}>+</button>
 <hr />
-<slot />
+{@render children()}
 <br />
 <br />
 <br />
 <br />
-<select bind:value="{$locale}" on:change={handleChange}>
+<select bind:value="{$locale}" onchange={handleChange}>
   {#each $locales as value}
     <option value="{value}">{$t(`lang.${value}`)}</option>
   {/each}
-</select>
+</select>

examples/component-scoped-ssr/src/lib/component/index.svelte

@@ -2,14 +2,13 @@
   import Component from '$lib/component/index.svelte';
   import { t } from '$lib/translations';
 
-  export let data;
+  let { data } = $props();
 
   const link = 'https://kit.svelte.dev';
-
 </script>
 
 <h1>{$t('home.title')}</h1>
 <p>{@html $t('home.text', { link })}</p>
 
 <Component bind:props={data.cs}/>
-<Component bind:props={data.de} />
+<Component bind:props={data.de} />

examples/component-scoped-ssr/src/routes/+layout.svelte

@@ -1,8 +1,12 @@
-import { sveltekit } from '@sveltejs/kit/vite';
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
+import path from "path";
 
-/** @type {import('vite').UserConfig} */
-const config = {
+export default defineConfig({
   plugins: [sveltekit()],
-};
-
-export default config;
+  resolve: {
+    alias: {
+      "sveltekit-i18n": path.resolve(__dirname, "../../src/index.ts"),
+    },
+  },
+});