URLs with __ prefix

[georgecrawford]

__ (two underscores) is a reserved prefix in SvelteKit - it's used for things like __layout.svelte and __error.svelte.

If I really, really need a set of pages to be served at, for example, https://domain.com/__page (note the double-underscore prefix), what options do I have? At the moment, I have a list of such pages in my hooks.js file, and I rewrite event.url.pathname if it's a page in the list. Then I can have the /page.svelte route appear at /__page. But this breaks client-side navigation, and forces the page to always be SSR.

The use-case is to serve my existing infrastructure - I'm transitioning to SvelteKit, but my servers are set up to call /__health and expect a 200 response, or /__metrics and expect Prometheus metrics, etc. I don't want to have to change that as I roll-out SvelteKit.

It was suggested that I use a wildcard route ([...page].svelte), which would work except that I have quite a considerable list of these pages, and want to make use of the equivalent .js shadow endpoints as well. Unless I'm mistaken, a wildcard route can't serve the response from another route, can it?

Is there another option available to me? Thanks!

[georgecrawford]

This works, but it's rather clunky (see Stackblitz):

[__health].svelte

<script context="module">
  export async function load({ url, fetch }) {
    if (url.pathname !== '/__health') {
      return { fallthrough: true };
    }

    const res = await fetch('/__health/__data.json');
    return {status: 200, props: await res.json()}
  }
</script>

<script>
export let data;
</script>

__health {data}

[__health].js

export async function get({ url }) {
	if (url.pathname !== '/__health') {
		return { fallthrough: true };
	}

	return {
		body: { data: 'data for health' }
	};
}

The advantage is that I can define as many of these 'special' routes as I want, and make the filenames appear very similar to the eventual URL, which is nice. The biggest drawback is that by adding a load() method to the route file (in order to implement the fallthrough: true), I've lost the automatic fetch from the shadow endpoint, so have to write it manually, which is a pain.

[georgecrawford]

Following some clarification from @geoffrich here, I can now simplify health.svelte to this:

<script context="module">
  export async function load({ url, props }) {
    if (url.pathname !== '/__health') {
      return { fallthrough: true };
    }

    return {props}
  }
</script>

<script>
export let data;
</script>

__health {data}

I imagine this is as terse as I can get it. So in effect, the only concession I need to make to work around the reserved-double-underscore-prefix issue is that __health.svelte becomes [__health].svelte with a fallthrough if the path isn't exactly /__health.

I'd still welcome comments on this approach vs. other alternatives. Thanks!