Update examples

.github/workflows/publish.yml

@@ -23,24 +23,29 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 10
+
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 22
           registry-url: https://registry.npmjs.org/
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm install
+        run: pnpm install
 
       - name: Update version
         run: |
           git config --local user.email "github-actions[bot]@users.noreply.github.com"
           git config --local user.name "github-actions[bot]"
-          npm version ${{ inputs.version }}
+          pnpm version ${{ inputs.version }}
 
       - name: Publish package
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-        run: npm publish
+        run: pnpm publish
 
       - name: Push changes
         run: git push

.github/workflows/tests.yml

@@ -14,19 +14,24 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [22]
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:
       - uses: actions/checkout@v3
 
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 10
+
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
 
       - name: Install Dependencies
-        run: npm install
+        run: pnpm install
 
-      - run: npm run test
+      - run: pnpm run test
         env:
           tests: true

.nvmrc

@@ -0,0 +1,2 @@
+22
+

README.md

@@ -118,3 +118,15 @@ export const load = async ({ url }) => {
 [Docs](https://github.com/sveltekit-i18n/lib/tree/master/docs/README.md)\
 [Examples](https://github.com/sveltekit-i18n/lib/tree/master/examples)\
 [Changelog](https://github.com/sveltekit-i18n/lib/releases)
+
+## Roadmap
+
+### Q4 2025
+
+[ ] - Update the examples
+[ ] - Stabalise build & tests
+[ ] - Consolidate issues
+
+### Q1 2026
+
+[ ] - Storage + State management overhall

examples/README.md

@@ -60,10 +60,17 @@ These examples demonstrate how to integrate `sveltekit-i18n` into your app. Curr
 [`fallback-locale`](./fallback-locale) – [Demo](https://fallback-locale.netlify.app)
 - this app demonstrates `config.fallbackLocale`
 
-## How to
-
-- clone or download example you want to use
-- navigate to downloaded folder using Terminal (`cd ./your/example/destination/`)
-- run `npm i sveltekit-i18n@latest` to fetch this dependecy from NPM and install all other dependencies\
-_(or `npm i @sveltekit-i18n/PACKAGE_NAME@latest` for parser examples - see related dependencies)_
-- run `npm run dev -- --open` to preview
+## How to use an example
+
+- Clone or download the example you want to use
+- Navigate to the downloaded folder using Terminal (e.g. `cd ./your/example/destination/`)
+- Install dependencies using your preferred package manager:
+  - `npm i sveltekit-i18n@latest` (or `npm i @sveltekit-i18n/PACKAGE_NAME@latest` for parser examples - see related dependencies)
+  - `pnpm i sveltekit-i18n@latest`
+  - `yarn add sveltekit-i18n@latest`
+  - Or any other package manager you prefer
+- Run the dev server to preview:
+  - `npm run dev -- --open`
+  - `pnpm run dev -- --open`
+  - `yarn dev --open`
+  - Or the equivalent command for your package manager

examples/component-scoped-csr/README.md

@@ -9,4 +9,10 @@ This app includes multiple instances of `sveltekit-i18n`.
 This approach is good for more complex apps.
 
 ## Preview
-You can view this demo live on [Netlify](https://compoent-scoped-csr.netlify.app).
+You can view this demo live on [Netlify](https://compoent-scoped-csr.netlify.app).
+
+## How to use this example
+
+- Download this example
+- Run `npm i` to install all dependencies (or `pnpm i`, `yarn`, etc.)
+- Run `npm run dev -- --open` to preview (or `pnpm run dev -- --open`, `yarn dev --open`, etc.)

examples/component-scoped-csr/netlify.toml

@@ -1,5 +1,9 @@
 [build]
-    command = "cd ../../ && npm run build && npm run build --workspace component-scoped-csr"
+    command = "cd ../../ && pnpm install && pnpm run build && pnpm --filter component-scoped-csr run build"
     publish = "build"
+
+[build.environment]
+  NODE_VERSION = "22"
+
 [functions]
   node_bundler = "esbuild"

examples/component-scoped-csr/package.json

@@ -1,23 +1,21 @@
 {
   "name": "component-scoped-csr",
-  "version": "0.0.1",
+  "private": true,
+  "version": "0.0.2",
+  "type": "module",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "package": "svelte-kit package",
-    "preview": "vite preview",
-    "prepare": "svelte-kit sync"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-netlify": "^3.0.0",
-    "@sveltejs/kit": "^2.0.1",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "svelte": "^4.0.5",
-    "vite": "^5.0.10"
+    "preview": "vite preview"
   },
-  "type": "module",
   "dependencies": {
-    "@sveltejs/adapter-static": "^3.0.0",
-    "sveltekit-i18n": "file:../../"
+    "sveltekit-i18n": "workspace:*"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-netlify": "^5.2.4",
+    "@sveltejs/kit": "^2.47.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "svelte": "^5.41.0",
+    "vite": "^7.1.10"
   }
 }

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

@@ -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/routes/+layout.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/+page.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/vite.config.js

@@ -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-ssr/README.md

@@ -10,4 +10,10 @@ This app includes multiple instances of `sveltekit-i18n`.
 This approach is good for more complex apps.
 
 ## Preview
-You can view this demo live on [Netlify](https://component-scoped-ssr.netlify.app).
+You can view this demo live on [Netlify](https://component-scoped-ssr.netlify.app).
+
+## How to use this example
+
+- Download this example
+- Run `npm i` to install all dependencies (or `pnpm i`, `yarn`, etc.)
+- Run `npm run dev -- --open` to preview (or `pnpm run dev -- --open`, `yarn dev --open`, etc.)

examples/component-scoped-ssr/netlify.toml

@@ -1,5 +1,9 @@
 [build]
-    command = "cd ../../ && npm run build && npm run build --workspace component-scoped-ssr"
+    command = "cd ../../ && pnpm install && pnpm run build && pnpm --filter component-scoped-ssr run build"
     publish = "build"
+
+[build.environment]
+  NODE_VERSION = "22"
+
 [functions]
   node_bundler = "esbuild"

examples/component-scoped-ssr/package.json

@@ -1,23 +1,21 @@
 {
   "name": "component-scoped-ssr",
-  "version": "0.0.1",
+  "private": true,
+  "version": "0.0.2",
+  "type": "module",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "package": "svelte-kit package",
-    "preview": "vite preview",
-    "prepare": "svelte-kit sync"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-netlify": "^3.0.0",
-    "@sveltejs/kit": "^2.0.1",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "svelte": "^4.0.5",
-    "vite": "^5.0.10"
+    "preview": "vite preview"
   },
-  "type": "module",
   "dependencies": {
-    "@sveltejs/adapter-static": "^3.0.0",
-    "sveltekit-i18n": "file:../../"
+    "sveltekit-i18n": "workspace:*"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-netlify": "^5.2.4",
+    "@sveltejs/kit": "^2.47.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "svelte": "^5.41.0",
+    "vite": "^7.1.10"
   }
 }

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

@@ -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>