Update to latest svelte, which changed how loading works

Author: cibernox

package-lock.json

@@ -14,29 +14,29 @@
     "@sveltejs/adapter-netlify": "next",
     "@sveltejs/kit": "next",
     "@testing-library/svelte": "^3.1.3",
-    "@types/cookie": "^0.4.1",
-    "autoprefixer": "^10.4.0",
+    "@types/cookie": "^0.5.1",
+    "autoprefixer": "^10.4.8",
     "chai-dom": "^1.11.0",
     "cssnano": "^5.0.14",
     "jsdom": "^20.0.0",
     "postcss": "^8.4.5",
-    "postcss-load-config": "^3.1.0",
-    "svelte": "^3.45.0",
-    "svelte-check": "^2.2.11",
-    "svelte-preprocess": "^4.10.1",
-    "tailwindcss": "^3.0.11",
-    "tslib": "^2.3.1",
-    "typescript": "^4.5.4",
-    "vite": "^3.0.5",
-    "vitest": "^0.21.1"
+    "postcss-load-config": "^4.0.0",
+    "svelte": "^3.49.0",
+    "svelte-check": "^2.8.0",
+    "svelte-preprocess": "^4.10.7",
+    "tailwindcss": "^3.1.8",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.0",
+    "vite": "^3.0.2",
+    "vitest": "^0.22.0"
   },
   "type": "module",
   "dependencies": {
     "@fontsource/fira-mono": "^4.5.0",
     "@lukeed/uuid": "^2.0.0",
-    "cookie": "^0.4.1",
-    "svelte-intl-precompile": "^0.11.1",
-    "terser": "^5.10.0"
+    "cookie": "^0.5.0",
+    "svelte-intl-precompile": "^0.12.0",
+    "terser": "^5.14.0"
   },
   "volta": {
     "node": "16.14.0",

package.json

@@ -3,8 +3,9 @@
 		"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}}"
-	});
+		"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;
@@ -32,6 +33,7 @@
 	}
 
 	$: transformedTranslations === "" ? transform(translations) : debouncedTransform(translations)
+	$: sizeChange = Math.round(output.length / translations.length * 100, 0) - 100;
 </script>
 <div>
 	<label for="email" class="text-sm block mb-2">Translations</label>
@@ -57,5 +59,5 @@
 	<pre class="p-4 mt-2 rounded bg-code overflow-x-auto text-sm">
 		<code><div>{output}</div></code>
 	</pre>
-	{output.length} bytes
+	{output.length} bytes ({Math.abs(sizeChange)}% {sizeChange > 0 ? 'bigger' : 'smaller' } than the source translations)
 </div>

src/lib/Playground.svelte

@@ -1,29 +1,10 @@
-<script context="module" lang="ts">
-  import { registerAll, availableLocales } from '$locales';
-  import { waitLocale, init, locale } from 'svelte-intl-precompile';
-  import { goto } from '$app/navigation';
-  import { page } from '$app/stores';
-  registerAll();
-  let defaultLang = 'en';
-  let localeRegex = new RegExp(`^/(${availableLocales.join('|')})(/|$)`);
-  let initialized = false;
-  function extractLanguageFromPath(path) {
-    return (localeRegex.exec(path) || [null, defaultLang])[1];
-  }
-  export async function load({ url: { pathname } }) {
-    if (!initialized) {      
-      const lang = extractLanguageFromPath(pathname);
-      init({
-        initialLocale: lang,
-        fallbackLocale: defaultLang
-      });
-      initialized = true;
-      await waitLocale()
-    }
-    return {};
-  }
-</script>
 <script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';  
+  import { locale } from 'svelte-intl-precompile';
+  import { availableLocales } from '$locales';
+  import { extractLanguageFromPath, localeRegex } from './+layout';
+
   $: lang = extractLanguageFromPath($page.url.pathname);
   $: {
     if ($locale !== lang) {

src/routes/__layout.svelte renamed to src/routes/+layout.svelte

@@ -0,0 +1,23 @@
+import { registerAll, availableLocales } from '$locales';
+import { waitLocale, init } from 'svelte-intl-precompile';
+import type { LayoutLoad } from './$types';
+
+registerAll();
+let defaultLang = 'en';
+let initialized = false;
+
+export const localeRegex = new RegExp(`^/(${availableLocales.join('|')})(/|$)`);
+export function extractLanguageFromPath(path) {
+  return (localeRegex.exec(path) || [null, defaultLang])[1];
+}
+export const load: LayoutLoad =  async function({ url: { pathname } }) {
+  if (!initialized) {      
+    const lang = extractLanguageFromPath(pathname);
+    init({
+      initialLocale: lang,
+      fallbackLocale: defaultLang
+    });
+    initialized = true;
+    await waitLocale()
+  }
+}

src/routes/[...lang]/__layout.svelte renamed to src/routes/[...lang]/+layout.svelte

@@ -1,8 +1,5 @@
-<script context="module" lang="ts">
-	import { t, locale } from 'svelte-intl-precompile';
-	export const prerender = true;
-</script>
 <script lang="ts">
+	import { t, locale } from 'svelte-intl-precompile';
 </script>
 
 <svelte:head>

src/routes/[...lang]/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/[...lang]/index.svelte renamed to src/routes/[...lang]/+page.svelte

@@ -1,6 +1,3 @@
-<script context="module" lang="ts">
-	export const prerender = true;
-</script>
 <script lang="ts">
 	import { t, locale } from 'svelte-intl-precompile';
 	import scrollToHash from '$lib/scroll-to-hash';;
@@ -21,18 +18,16 @@
 <p>{$t('configuration.paragraph.example-1')} <CodeInline>src/__layout.svelte</CodeInline> {$t('configuration.paragraph.example-2')}</p>
 
 <Codeblock lang="html">
-{`<script context="module">
-	import { addMessages, init } from 'svelte-intl-precompile';
+{`
+  import { addMessages, init } from 'svelte-intl-precompile';
 	import en from '$locales/en';
 	import es from '$locales/es';
 	addMessages('en', en);
 	addMessages('es', es);
 	init({
 		initialLocale: 'en',
 		fallbackLocale: 'en'
-	});	
-</script>
-<slot/>`}
+	});`}
 </Codeblock>
 
 <p>{$t('configuration.paragraph.example-3')}</p>
@@ -66,17 +61,14 @@ addMessages('es', es);
 </p>
 
 <Codeblock lang="js">{`
-<script context="module">
   import { init, register, waitLocale } from 'svelte-intl-precompile';
   register('en', () => import('$locales/en'));
   register('es', () => import('$locales/es'));
 
   export async function load() {
     init({ initialLocale: en });
     await waitLocale(); // awaits the default locale, "en" in this case.
-    return {};
   }
-</script>
 `}</Codeblock>
 
 <h2 class="text-2xl font-semibold" id="dynamic-locales">{$t('configuration.subsection.dynamic-locales-shorthand')}</h2>
@@ -92,7 +84,6 @@ addMessages('es', es);
 </p>
 
 <Codeblock lang="js">{`
-<script context="module">
   import { init, waitLocale } from 'svelte-intl-precompile';
   import { registerAll, availableLocales } from '$locales';
   
@@ -101,10 +92,8 @@ addMessages('es', es);
   export async function load() {
     init({ initialLocale: selectBestMatchingLocale(availableLocales) });
     await waitLocale();
-    return {};
   }
-</script>  
-  `}</Codeblock>
+`}</Codeblock>
 
 <h2 class="text-2xl font-semibold" id="init">{$t('configuration.subsection.init')}</h2>
 

src/routes/[...lang]/+page.ts

@@ -1,7 +1,3 @@
-<script context="module" lang="ts">
-	export const prerender = true;
-</script>
-
 <script lang="ts">
 	import { t } from 'svelte-intl-precompile';
 	import Codeblock from '$lib/Codeblock.svelte';

src/routes/[...lang]/docs/__layout.svelte renamed to src/routes/[...lang]/docs/+layout.svelte

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/[...lang]/docs/configuration.svelte renamed to src/routes/[...lang]/docs/configuration/+page.svelte

@@ -1,7 +1,3 @@
-<script context="module" lang="ts">
-	export const prerender = true;
-</script>
-
 <script lang="ts">
 	import { t } from 'svelte-intl-precompile';
 	let interpolation = 'orange';

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

@@ -0,0 +1 @@
+export const prerender = true;

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

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

src/routes/[...lang]/docs/icu-crash-course.svelte renamed to src/routes/[...lang]/docs/icu-crash-course/+page.svelte

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/[...lang]/docs/icu-crash-course/+page.ts

@@ -1,7 +1,3 @@
-<script context="module" lang="ts">
-	export const prerender = true;
-</script>
-
 <script lang="ts">
 	import { t } from "precompile-intl-runtime";
 	import Playground from "$lib/Playground.svelte";

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

@@ -0,0 +1 @@
+export const prerender = true;

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

@@ -1,6 +1,3 @@
-<script context="module" lang="ts">
-	export const prerender = true;
-</script>
 <script>
 	import { t } from 'svelte-intl-precompile';
 	import Codeblock from '$lib/Codeblock.svelte';

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

@@ -0,0 +1 @@
+export const prerender = true;

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

@@ -0,0 +1,18 @@
+import { json } from '@sveltejs/kit';
+import * as babel from '@babel/core';
+import { minify } from "terser";
+import buildPlugin from 'babel-plugin-precompile-intl';
+
+const intlPrecompiler = buildPlugin('svelte-intl-precompile');
+
+// POST /playground.json
+export async function POST({ request, locals }) {
+  try {
+    const body = await request.text();
+    let transformed = babel.transform('export default ' + body, { plugins: [intlPrecompiler] }).code;
+    let { code: minified } = await minify(transformed, { mangle: { toplevel: true } });
+    return json({ transformed, minified });    
+  } catch {
+    return json({ error: "Syntax error" }, { status: 422 });
+  }
+};