demo project for svelte-intl-precompile

This project is used to analyze loading behavior of svelte-intl-precompile with top-level-await in a sveltekit client hook

uses multiple adapters

pnpm build # build all
pnpm preview # start previews

adapter-auto

kit.outDir: .svelte-kit-auto
adapter-output: build
preview url: http://localhost:4173 (vite preview)

adapter-node

kit.outDir: .svelte-kit-node
adapter-output: build-node
preview url: http://localhost:3000 (node build-node)

adapter-cloudflare-workers

kit.outDir: .svelte-kit-cf
adapter-output: .cloudflare
preview url: http://localhost:8787 (miniflare .cloudflare/worker.js)

svelte-intl-precompile

setup in src/hooks/lang.js
during SSR loaded in src/hooks/server.js handle sequence
on client loaded in src/hooks/client.js with top level await

Problem

dev works fine, you can change the name, locale or click cool alert, js is loaded.

But running preview, none of these work on the page. JS never loads everything, evident by the missing hooks.client.done console log from src/hooks/client.js and network tab

Following the imports in the client output, you can see that de-xxxxx.js and en-xxxxx.js contain an import that points back to start

import { _ as __interpolate } from "./start-6d6c2311.js";
const de = {
  "foo": (name) => `Hallo ${__interpolate(name)}!`
};
export {
  de as default
};

but the order instart-xxxxx.js is

//...
function registerAll() {
  registerLocaleLoader("de", () => __vitePreload(() => import("./de-5fcb79c1.js"), true ? [] : void 0, import.meta.url));
  registerLocaleLoader("en", () => __vitePreload(() => import("./en-ae3f9fd3.js"), true ? [] : void 0, import.meta.url));
}
const availableLocales = ["de", "en"];
const DEFAULT_LOCALE = "de";
registerAll();
//...
console.log("hooks.client");
await loadLocale();
console.log("hooks.client.done");
//...

Which would only work if de.xxxx.js would not import start again, which causes a dead-lock on await loadLocale()

Possible Solution

use manualChunks to resolve the dead-lock. See vite.config.js Enable/disable manualChunks, run pnpm build and compare ./.svelte-kit-auto/output/client/stats.html

dominikg / kit-with-svelte-intl-precompile