Get path to file serving current route

[janosh]

Describe the problem

I'm trying to add StackBlitz links to a bunch of example pages that can have different file formats (.svelte, .svx or .md). Is there a to make this line work for all file types?

<script>
  // causes broken links for .svelte and .md files
  $: stackblitz_url = `https://stackblitz.com/github/user/repo?file=${encodeURIComponent(
    `src/routes/examples${$page.url.pathname}/+page.svx`
  )}`
</script>

<a href={stackblitz_url} class="btn" target="_blank" rel="noreferrer">
  StackBlitz
</a>

Describe the proposed solution

Ideally, I could get the path to the page file relative to repo root from the $page store:

$: stackblitz_url = `https://stackblitz.com/github/user/repo?file=${encodeURIComponent($page.file)}`

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response

[david-plugge]

$page.route.id may solve your problem. You can take a look at the docs

[janosh]

@david-plugge I looked at $page.route.id before but in all my testing, it's been identical to $page.url.pathname. Logging both on page navigation, this is what I get

$page.url.pathname /
$page.route.id /

$page.url.pathname /parsing
$page.route.id /parsing

$page.url.pathname /sorting
$page.route.id /sorting

So not a solution to getting the file path for the current route.

[david-plugge]

Ah got it. I first thought you could use import.meta.url but that does not work in production as it doesnt statically replace the filepath.

You can however create a custom vite plugin

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [
		sveltekit(),
		{
			name: 'filepath',
			transform(code, id) {
				return code.replace('FILEPATH', `'${id}'`);
			}
		}
	]
};

export default config;

And create the global type

// src/app.d.ts

declare const FILEPATH: string;

With that in place you can use the global FILEPATH variable to get the current file from the project root

console.log(FILEPATH);

[janosh]

That's cool! But also not quite what I need. This will get me the path to the file containing the FILEPATH placeholder. But if I import a component into the +page.(svelte|svx|md) file, it will be the component's file path (in my case src/components/CodeLinks.svelte), not the path to the file powering the current route (src/routes${$page.url.pathname}/+page.svx).

<script lang="ts">
  import { page } from '$app/stores'

  export let stackblitz: string | boolean | null = null

  const stackblitz_url = `https://stackblitz.com/github/user/repo`
  $: serving_file = `src/routes${$page.url.pathname}/+page.svx` // or .md or .svelte
  $: console.log(import.meta.filepath) // src/components/CodeLinks.svelte
</script>

{#if stackblitz}
  <!-- file param defaults to path of file serving the current page if stackblitz=true -->
  {@const file = encodeURIComponent(stackblitz == true ? serving_file : stackblitz)}
  <a href="{stackblitz_url}?file={file}"> StackBlitz </a>
{/if}

That's why I think this has to be a SvelteKit-specific solution (if SvelteKit wants to handle this).

[dummdidumm]

This is not something we want to add to SvelteKit itself. It sounds more like a dev time / showcase thing and not something that people generally would use.
In your case you could pass the path to your CodeLinks component so @david-plugge's solution would work.

/// file: some/+page.svelte
...
<CodeLinks path={FILEPATH} />

[david-plugge]

You could also use import.meta.glob to get all +page files with a valid extension for pages and find the correct one using route.id. This should work as you are not allowed to have more than one page file in one folder