Active le rendu côté serveur

Non activé car cela pose un problème bizarre avec la première animation.
Sans doute lié à sveltejs/kit#2301

Author: Maxime Quandalle

src/lib/components/Details.svelte

@@ -4,13 +4,13 @@
 	import { slide } from 'svelte/transition';
 	import DetailsLine from './DetailsLine.svelte';
 	import Emoji from './Emoji.svelte';
-	import { emoji, engine, title } from './Results.svelte';
+	import { emoji, title } from './Results.svelte';
 	import { localisationPublicodesSituation } from '$lib/stores/localisation';
 	import RevenuSelector from './RevenuSelector.svelte';
-	const formatValue = typeof window !== 'undefined' && window.publicodes.formatValue;
+	import { engine, formatValue } from '$lib/engine';
 
 	const veloCat = $page.query.get('velo');
-	const categoryDescription = engine?.getRule(`vélo . ${veloCat}`).rawNode?.description ?? '';
+	const categoryDescription = engine.getRule(`vélo . ${veloCat}`).rawNode?.description ?? '';
 
 	let bikePrice;
 	let revenu = 0;

src/lib/components/Results.svelte

@@ -1,11 +1,4 @@
 <script context="module">
-	import aides from '$lib/../aides.yaml';
-
-	// HACK : Le paquet publicodes ne peut pas être importé normallement avec un
-	// `import Engine from "publicodes"`, vraisembablement car le paquet n'est pas sous
-	// le bon format ES Module
-	export const engine = typeof window !== 'undefined' ? new window.publicodes.default(aides) : null;
-
 	export function title(category) {
 		if (category === 'motorisation') {
 			return 'Motorisation d’un vélo classique';
@@ -25,8 +18,9 @@
 	import Emoji from '$lib/components/Emoji.svelte';
 	import { localisation, localisationPublicodesSituation } from '$lib/stores/localisation';
 	import { goto } from '$app/navigation';
+	import { engine, formatValue } from '$lib/engine';
 
-	const bikeKinds = engine?.getRule('vélo . type').rawNode['possibilités'];
+	const bikeKinds = engine.getRule('vélo . type').rawNode['possibilités'];
 
 	$: aidesPerBikeKind = bikeKinds
 		.map((type) => {
@@ -43,7 +37,7 @@
 			{
 				label: title(cat),
 				emoji: emoji(cat),
-				montant: window.publicodes.formatValue(node, { precision: 0 })
+				montant: formatValue(node, { precision: 0 })
 			}
 		]);
 </script>

src/lib/components/RevenuSelector.svelte

@@ -1,7 +1,6 @@
 <script context="module">
-	import { engine } from '$lib/components/Results.svelte';
+	import { engine, formatValue, reduceAST } from '$lib/engine';
 	import Emoji from './Emoji.svelte';
-	const formatValue = typeof window !== 'undefined' && window.publicodes.formatValue;
 
 	// We do a static analysis of the rules AST to search for a particular rule name.
 	// When in find it in a comparaison expression we retreive the value of the other
@@ -43,7 +42,7 @@
 			}
 		};
 
-		return window.publicodes.reduceAST(accumulateThresholds, [], engine.getRule(dottedName));
+		return reduceAST(accumulateThresholds, [], engine.getRule(dottedName));
 	}
 </script>
 

src/lib/engine.js

@@ -0,0 +1,19 @@
+import publicodes, {
+	formatValue as formatValueImport,
+	reduceAST as reduceASTImport
+} from 'publicodes';
+import aides from '$lib/../aides.yaml';
+
+// HACK : Côté client Le paquet publicodes ne peut pas être importé normalement
+// avec un `import publicodes from "publicodes"`, vraisemblablement car le
+// paquet n'est pas sous le bon format ES Module. Pour contourner le problème
+// temporairement on passe par `unpkg.com` qui ajoute une variable globale côté
+// client.
+const Publicodes = typeof window !== 'undefined' ? window.publicodes.default : publicodes;
+
+export const engine = new Publicodes(aides);
+
+export const formatValue =
+	typeof window !== 'undefined' ? window.publicodes.formatValue : formatValueImport;
+export const reduceAST =
+	typeof window !== 'undefined' ? window.publicodes.reduceAST : reduceASTImport;

src/routes/__layout.svelte

@@ -1,9 +1,14 @@
 <script>
+	import { prefetchRoutes } from '$app/navigation';
+
 	import { page } from '$app/stores';
 	import Emoji from '$lib/components/Emoji.svelte';
 	import Footer from '$lib/components/Footer.svelte';
 	import Search from '$lib/components/Search.svelte';
+	import { onMount } from 'svelte';
 	import 'virtual:windi.css';
+
+	onMount(() => prefetchRoutes(['/', '/ville/*']));
 </script>
 
 <div class="px-4 sm:px-8 h-screen flex flex-col">

src/routes/ville/[slug].svelte

@@ -2,15 +2,13 @@
 	import { browser } from '$app/env';
 	import { localisation } from '$lib/stores/localisation';
 
-	export const ssr = false;
-
 	// This pattern is explained here:
 	// https://github.com/sveltejs/kit/issues/2851
 	export async function load({ page, fetch }) {
-		if (browser && get(localisation)?.slug === page.params.slug) {
+		if (browser && get(localisation)?.slug === page.params?.slug) {
 			return { props: { ville: get(localisation) } };
 		} else {
-			const res = await fetch(`/api/collectivites?slug=${page.params.slug}`);
+			const res = await fetch(`/api/collectivites?slug=${page.params?.slug}`);
 			return { props: { ville: await res.json() } };
 		}
 	}
@@ -21,12 +19,11 @@
 	import Details from '$lib/components/Details.svelte';
 	import Results from '$lib/components/Results.svelte';
 	import { fly } from 'svelte/transition';
-	import { onMount } from 'svelte';
 	import { get } from 'svelte/store';
 
 	export let ville;
 
-	onMount(() => localisation.set(ville));
+	localisation.set(ville);
 </script>
 
 <svelte:head>
@@ -42,14 +39,14 @@
 		{#if $page.query.get('velo')}
 			<div
 				class="col-start-1 col-end-1 row-start-1 row-end-1"
-				transition:fly|local={{ x: 600, duration: 400 }}
+				transition:fly|local={{ x: 800, duration: 400 }}
 			>
 				<Details {ville} />
 			</div>
 		{:else}
 			<div
 				class="col-start-1 col-end-1 row-start-1 row-end-1"
-				transition:fly|local={{ x: -600, duration: 400 }}
+				transition:fly|local={{ x: -800, duration: 400 }}
 			>
 				<Results {ville} />
 			</div>