feat: localised app (en/fr)

package.json

@@ -65,6 +65,7 @@
     "@smui/paper": "^6.0.0-beta.13",
     "maplibre-gl": "^2.1.1",
     "randomcolor": "^0.6.2",
+    "svelte-i18n": "^3.3.13",
     "svelte-material-ui": "^6.0.0-beta.13",
     "svelte-tauri-filedrop": "^1.0.0"
   },

src/App.svelte

@@ -16,6 +16,7 @@
   import 'svelte-material-ui/bare.css';
   import FileDrop from 'svelte-tauri-filedrop';
   import Menu from './Menu.svelte';
+  import { _, isLoading } from 'svelte-i18n';
 
   let map: Map;
   let mapContainer;
@@ -390,7 +391,6 @@
   }
 
   listen<string>('tauri://menu', ({ payload }) => {
-    // console.log('on menu', payload);
     switch (payload) {
       case 'learn_more':
         openURl(REPO_URL);
@@ -400,7 +400,7 @@
 </script>
 
 <div class="drawer-container">
-  <Menu {layers} {sources} {map} bind:wantPopup bind:wantTileBounds bind:drawerOpened />
+  <Menu {layers} {sources} {map} bind:wantPopup bind:wantTileBounds />
 
   <!-- <Scrim fixed={false} /> -->
   <AppContent id="app-content">
@@ -424,12 +424,16 @@
     <div
       style="position:absolute; width:100%;height:100%;display:flex;z-index:100;pointer-events:none;"
     >
-      <Fab color="primary" on:click={selectMBtiles} style="align-self:flex-end;margin: 20px;pointer-events:auto;">
+      <Fab
+        color="primary"
+        on:click={selectMBtiles}
+        style="align-self:flex-end;margin: 20px;pointer-events:auto;"
+      >
         <Icon class="material-icons">download</Icon>
       </Fab>
     </div>
     {#if !currentMbTiles}
-      <label id="no_mbtiles">drop or open a MBtiles</label>
+      <Title id="no_mbtiles">{$_('drop_open_mbtiles')}</Title>
     {/if}
     <div class="map" id="map" bind:this={mapContainer} />
   </AppContent>

src/Menu.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import Drawer, { AppContent, Content, Header, Title, Subtitle, Scrim } from '@smui/drawer';
-  import List, { Item, Text, Graphic, Meta, Separator, Subheader } from '@smui/list';
+  import { H6 } from '@smui/common/elements';
+  import Drawer, { Content, Header, Subtitle, Title } from '@smui/drawer';
   import FormField from '@smui/form-field';
-  import Switch from '@smui/switch';
+  import List, { Item, Meta, Separator, Subheader } from '@smui/list';
   import Radio from '@smui/radio';
-  import { H6 } from '@smui/common/elements';
+  import Switch from '@smui/switch';
+  import { isLoading, _ } from 'svelte-i18n';
   export let layers;
   export let sources;
   export let map;
@@ -140,29 +141,35 @@
   // $: {
   //   console.log('sources', sources);
   // }
-</script>
 
+  const options = [
+    { value: 'all', name: $_('all') },
+    { value: 'polygons', name: $_('polygons') },
+    { value: 'lines', name: $_('lines') },
+    { value: 'points', name: $_('points') },
+  ];
+</script>
 <Drawer class="drawer" variant="dismissible" fixed={true} open={true}>
   <Content class="drawer-content" bind:this={menu}>
     {#if sources.length > 0}
-      <Subheader component={H6}>Filter</Subheader>
-      {#each ['all', 'polygons', 'lines', 'points'] as option}
+      <Subheader component={H6}>{$_('filters')}</Subheader>
+      {#each options as option}
         <FormField>
-          <Radio bind:group={filter} value={option} />
+          <Radio bind:group={filter} value={option.value} />
           <span slot="label">
-            {option}
+            {option.name}
           </span>
         </FormField>
       {/each}
       <Separator />
       <FormField>
         <Switch bind:checked={wantPopup} />
-        <span slot="label">Show Attributes popup</span>
+        <span slot="label">{$_('show_attribute_popup')}</span>
       </FormField>
     {/if}
     <FormField>
       <Switch bind:checked={wantTileBounds} />
-      <span slot="label">Show tile boundaries</span>
+      <span slot="label">{$_('show_tile_boundaries')}</span>
     </FormField>
     <Separator />
     {#each sources as source}

src/i18n/en.json

@@ -0,0 +1,11 @@
+{
+  "all": "all",
+  "download": "download",
+  "drop_open_mbtiles": "drop or open a MBtiles",
+  "filters": "filters",
+  "lines": "lines",
+  "points": "points",
+  "polygons": "polygons",
+  "show_attribute_popup": "Show Attributes popup",
+  "show_tile_boundaries": "Show tile boundaries"
+}

src/i18n/fr.json

@@ -0,0 +1,11 @@
+{
+  "all": "Tous",
+  "download": "Téléchargement",
+  "drop_open_mbtiles": "déposer ou ouvrir un Motiles",
+  "filters": "filtres",
+  "lines": "lignes",
+  "points": "points",
+  "polygons": "polygones",
+  "show_attribute_popup": "Afficher Attributs popup",
+  "show_tile_boundaries": "Afficher les limites des carreaux"
+}

src/main.ts

@@ -1,5 +1,26 @@
 import App from './App.svelte'
 
+import { register, init, getLocaleFromNavigator, addMessages } from 'svelte-i18n';
+
+
+import en from './i18n/en.json';
+import fr from './i18n/fr.json';
+
+addMessages('en', en);
+addMessages('fr', fr);
+
+// SUPPORTED_LOCALES.forEach(l=>{
+  // addMessages(l, require(`./i18n/${l}json`));
+  /* @vite-ignore */
+  // register(l, () => import(`./i18n/${l}json`));
+// })
+// console.log('SUPPORTED_LOCALES', SUPPORTED_LOCALES)
+
+init({
+  fallbackLocale: 'en',
+  initialLocale: getLocaleFromNavigator(),
+});
+
 const app = new App({
   target: document.body,
 })

src/references.d.ts

@@ -1 +1,2 @@
 declare const REPO_URL: string;
+declare const SUPPORTED_LOCALES: string[];

tsconfig.json

@@ -12,6 +12,8 @@
     // To have svelte warnings/errors correct position
     "sourceMap": true,
 
+    "resolveJsonModule": true,
+
     "noImplicitAny": false,
     "strictNullChecks": false,
 

vite.config.js

@@ -1,4 +1,6 @@
 import { defineConfig } from 'vite'
+import { readdirSync } from 'fs'
+import { join } from 'path'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import sveltePreprocess from 'svelte-preprocess'
 
@@ -7,6 +9,10 @@ const ignoreWarnings = new Set(['a11y-no-onchange', 'a11y-label-has-associated-c
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const config = require('./package.json');
 
+const locales = readdirSync(join('src', 'i18n'))
+        .filter((s) => s.endsWith('.json'))
+        .map((s) => s.replace('.json', ''));
+
 export default defineConfig({
   root: './src',
   base: './', // use relative paths
@@ -36,6 +42,7 @@ export default defineConfig({
     }),
   ],
   define: {
+    SUPPORTED_LOCALES: JSON.stringify(locales),
     REPO_URL: `"${config.homepage}"`,
     FORCE_MOBILE:false,
     EXTERNAL_APP:false