Programmatically get all routes

[Tommertom]

Describe the problem

It is not a frustration, it is a feature request -

but in a project I would like to progammatically generate menu items using the routes available. This way, whenever I have new routes introduced, I immediately have them in the menu (with a bit of chances to show in a nice way).

Describe the proposed solution

I would like to see, as a suggestion that $app-navigation's api get extended with a routes object that has a list or tree structure the represents the routes as currently present within the app. Then I can use that object to generate my menu or whatever feature I want to build

Alternatives considered

Just create a json file or static js object in the project that has all the menu items.

Importance

nice to have

Additional Information

No response

[Conduitry]

Not exactly a duplicate, but it feels like this could be folded into #1142.

[Tommertom]

Seems indeed - except that I don't hope I need to parse xml programmatically then :)

[benmccann]

Can you use https://vitejs.dev/guide/features.html#glob-import ? That's how I've seen this done in the past

[larrybotha]

@Tommertom as a temporary solution, you can use the following as a basis for what you're trying:

src/routes/data/navigation.json.ts

import {Buffer} from 'buffer';
import {fileURLToPath} from 'url';
import {dirname} from 'path';

import rehypeParse from 'rehype-parse';
import {select} from 'unist-util-select';
import {unified} from 'unified';
import {visit} from 'unist-util-visit';
import dree from 'dree';

import type {Literal} from 'unist';
import type {Node} from 'unist-util-visit';
import type {ScanOptions, Dree} from 'dree';
import type {RequestHandler} from '@sveltejs/kit';

import type {Page} from '@sveltejs/kit';

const _filename = fileURLToPath(import.meta.url);
const _dirname = dirname(_filename);
const paths = _dirname.split('/');
const docsRootIndex = paths.indexOf('docs');
const docsPath = paths.slice(0, docsRootIndex + 1).join('/');

interface ElementNode extends Node {
  tagName: string;
}

interface Entry {
  name: string;
  title: string;
  order?: Page['stuff']['frontmatter']['navOrder'];
}



export interface NavTree {
  children?: NavTree[];
  depth: number;
  name: string;
  order?: number;
  pathname: string;
  title: string;
}

/**
 * Stuff's interface, as referenced by Page['stuff']
   interface Stuff {
    frontmatter: {
      //... other properties
      navOrder?: number;
    };
    navigation: Locals.navTree;
  }
*/

interface RawTree extends Omit<NavTree, 'children'> {
  type: dree.Type;
  children?: RawTree[];
  order?: Page['stuff']['frontmatter']['navOrder'];
}

interface ViteModule {
  default: {render: () => {html: string}};
  metadata?: Page['stuff']['frontmatter'];
}

const treeCache: Record<string, RawTree> = {};

function createNavTree(tree: Dree, depth = 0): RawTree {
  const {children, type, path} = tree;
  const name = path.replace(docsPath, '').replace('/src/routes', '');
  const indexRegex = /index\..+$/;
  const pathname =
    type === dree.Type.DIRECTORY
      ? name
      : [name]
          .map((x) => {
            const delimiter = indexRegex.test(x) ? '/' : '.';

            return x.split(delimiter).slice(0, -1).join(delimiter);
          })
          .join('');
  const newTree: RawTree = {name, type, pathname, depth, title: name};

  if (children) {
    newTree.children = children.map((child) => createNavTree(child, depth + 1));
  }

  return newTree;
}

function sortTree(tree: RawTree | NavTree) {
  const indexRegex = /index\..+$/;
  const {children} = tree;
  const safeChildren = children || [];
  const isDir = (tree as RawTree).type === dree.Type.DIRECTORY;
  const hasChildAsIndex = safeChildren.some((child) => indexRegex.test(child.name));

  // if:
  //  is a directory, and,
  //  has a child as index
  // set the child's order on the tree
  [{useChildOrder: isDir && hasChildAsIndex, tree}]
    .filter(({useChildOrder}) => useChildOrder)
    .map(({tree}) => tree)
    .map((treeItem) => {
      (treeItem.children || [])
        .filter((child) => indexRegex.test(child.name))
        .slice(0, 1)
        .map((child) => {
          treeItem.order = child.order;
          treeItem.title = child.title;
        });

      return treeItem;
    });

  // sort the children
  [tree]
    .filter((treeItem) => Array.isArray(treeItem.children))
    .map((treeItem) => {
      treeItem.children = (tree.children || [])
        .sort((a, b) => {
          const [orderA, orderB] = [a.order, b.order].map((order) => {
            return typeof order === 'number' ? order : Number.MAX_VALUE;
          });
          const sortByOrder = orderA - orderB;
          const sortByTitle = a.title > b.title ? 1 : -1;

          return sortByOrder || sortByTitle;
        })
        .map((child) => sortTree(child));

      return treeItem;
    });

  return tree;
}

function addEntryToTree(tree: RawTree | NavTree, entry: Entry): NavTree {
  const isFile = (tree as RawTree).type === dree.Type.FILE;
  const hasSameFilename = tree.name === entry.name;
  const isMatch = [isFile, hasSameFilename].every(Boolean);
  const config = {isMatch, tree};

  // if not a match, pass entry to children of current tree
  [config]
    .filter(({isMatch}) => !isMatch)
    .map(({tree}) => tree.children)
    .filter((children): children is [] => Array.isArray(children))
    .flatMap((children) => children.map((child) => addEntryToTree(child, entry)));

  // if a match, set the tree's title and order using the entry
  [config]
    .filter(({isMatch}) => isMatch)
    .map(({tree}) => tree)
    .map((treeItem) => {
      treeItem.title = entry.title;
      treeItem.order = entry.order;
    });

  return tree;
}

function createEntry({name, module}: {name: string; module: ViteModule}): Entry {
  const rendered = module.default.render();
  const markupTree = unified().use(rehypeParse, {fragment: true}).parse(rendered.html);
  const frontmatter: Page['stuff']['frontmatter'] = module.metadata || {};
  let elements: ElementNode[] = [];

  visit(markupTree, 'element', (node: ElementNode) => {
    elements = [...elements, node];
  });

  const headings = elements
    .filter((element) => ['h1', 'h2'].indexOf(element.tagName) > -1)
    .sort((a, b) => (a.tagName > b.tagName ? 1 : -1));
  const heading = headings.find(Boolean);
  const headingText: Literal<string> | null | undefined = [heading]
    .map((element) => select('text', element))
    .find(Boolean) as Literal<string>;
  const title = headingText ? (headingText.value as string) : name;

  return {
    name: name.replace('/src/routes', ''),
    order: frontmatter.navOrder,
    title,
  };
}

const GET: RequestHandler = async function GET() {
  const options: ScanOptions = {
    excludeEmptyDirectories: true,
    extensions: ['md', 'svx'],
    followLinks: false,
    hash: false,
    showHidden: false,
    size: false,
    skipErrors: false,
    stat: false,
  };
  const tree = dree.scan('./src/routes', options);
  const encodedTree = Buffer.from(JSON.stringify(tree), 'base64').toString();
  let navTree = treeCache[encodedTree];

  if (!navTree) {
    navTree = createNavTree(tree);
    treeCache[encodedTree] = navTree;
  }

  const modules = import.meta.glob<ViteModule>('/src/routes/**/*.{md,svx}');
  const files = await Promise.all(
    Object.entries(modules).map(async ([name, fn]) => {
      const module = await fn();

      return {name, module};
    }),
  );

  const entries: Entry[] = files.map(createEntry);
  const navigation = entries.reduce<NavTree>((acc, entry) => {
    return addEntryToTree(acc, entry);
  }, navTree);
  const sortedNavigation = sortTree(navigation);

  return {body: JSON.stringify(sortedNavigation)};
};

export {GET};

I've recently implemented this for a SvelteKit site using MDSvex to allow for writing in markdown.

What it does is:

• traverse the folder structure under src/routes using dree, filtering for .md and .svx files - you could filter for .svelte files here
• get the files via import.meta.glob
• build a tree using dree and the data from the files
• sort the tree
• return the tree in the response

You can then get the tree via the load function in your layout to build it out.

There's additional stuff like using frontmatter to allow for ordering of pages, and using unifiedjs to traverse the markdown / HTML to pull out headings etc. - useful for creating menu titles etc. in the navigation.

It's quite a chunk of code, and my use-case with markdown is likely not going to match yours, but ye... it was non-trivial to implement, so thought I'd give a heads up on what could be a good starting point for others until something official is released.

[Tommertom]

Hi @larrybotha and @benmccann

Thanks for both pointers.

I will use this which is sufficint for my use case -giving an array of menu items for the app

const modules = import.meta.glob('./components/*.*');
const menuItems = Object.keys(modules).map((item) =>
		item.replace('./components/', '').replace('.svelte', '')
	);
console.log('MODULES & Menu', modules, menuItems);

[cdcarson]

It'd be super nice to get all route details from, say, import { routes } from '$app/paths'.

Example of data I'd find useful

[
  { id: '/', pattern: /^\/$/, params: [] },
  { id: '/about', pattern: /^\/about\/?$/, params: [] },
  { id: '/dashboard', pattern: /^\/dashboard\/?$/, params: [] },
  {
    id: '/dashboard/widgets',
    pattern: /^\/dashboard\/widgets\/?$/,
    params: []
  },
  {
    id: '/dashboard/widgets/[widgetId]',
    pattern: /^\/dashboard\/widgets\/([^/]+?)\/?$/,
    params: [
      {
        name: 'widgetId',
        matcher: undefined,
        optional: false,
        rest: false,
        chained: false
      }
    ]
  },
  {
    id: '/dashboard/widgets/[widgetId]/edit/[[what]]',
    pattern: /^\/dashboard\/widgets\/([^/]+?)\/edit(?:\/([^/]+))?\/?$/,
    params: [
      {
        name: 'widgetId',
        matcher: undefined,
        optional: false,
        rest: false,
        chained: false
      },
      {
        name: 'what',
        matcher: undefined,
        optional: true,
        rest: false,
        chained: true
      }
    ]
  },
  { id: '/help', pattern: /^\/help\/?$/, params: [] },
  {
    id: '/help/[...slug]',
    pattern: /^\/help(?:\/(.*))?\/?$/,
    params: [
      {
        name: 'slug',
        matcher: undefined,
        optional: false,
        rest: true,
        chained: true
      }
    ]
  }
]

Some people are already doing this, either with Vite plugins or with import.meta.glob. Examples:

• https://www.kitql.dev/docs/tools/06_vite-plugin-kit-routes,
• Ben's comment above

It's seems better/safer for SvelteKit to provide it, given that it is in charge of the logic (what's considered a "route", optionality and spreadability of params, etc.)

[jasongitmail]

It's seems better/safer for SvelteKit to provide it, given that it is in charge of the logic (what's considered a "route"

+100 especially with the addition of reroute, import.meta.glob can no longer be depended upon.

This is something super sitemap will have to deal with eventually, to move away from import.meta.glob to something else, due to i18n packages like Paraglide jasongitmail/super-sitemap#24

[anandhuremanan]

Any Update on this? or where could I find the updates about feature request?

[ISOR3X]

I also have a need for this to make something of a route tree for all routes in my project.
Additionally a way to access the page data (each page for me has a related icon in the route tree) would be super useful as well.
Until then, if anyone has a, hopefully temporary, solution for these it would be much appreciated.

[Pierstoval]

Apparently, there's a small piece of code that returns an array of RouteData objects, and it seems it could be used somehow as a route list:

(click to expand) Script code:

import { load_config } from './node_modules/@sveltejs/kit/src/core/config/index.js';
import { all } from './node_modules/@sveltejs/kit/src/core/sync/sync.js';

(async () => {
	const conf = await load_config();

	const manifest_data = all(conf, 'development');

	const routes = manifest_data.manifest_data.routes;

	console.info(routes);
})();

(click to expand) Sample output from customized `playground/basic/` directory:

[
	{
		id: '/',
		segment: '',
		pattern: /^\/$/,
		params: [],
		layout: {
			depth: 0,
			child_pages: [circular array],
			component: '../../packages/kit/src/runtime/components/svelte-4/layout.svelte'
		},
		error: { depth: 0, component: 'src/routes/+error.svelte' },
		leaf: {
			depth: 0,
			component: 'src/routes/+page.svelte',
			universal: 'src/routes/+page.ts',
			parent: {
				depth: 0,
				child_pages: [circular array],
				component: '../../packages/kit/src/runtime/components/svelte-4/layout.svelte'
			}
		},
		page: { layouts: [ 0 ], errors: [ 1 ], leaf: 3 },
		endpoint: { file: 'src/routes/+server.ts' }
	},
	{
		id: '/[slug]',
		segment: '[slug]',
		pattern: /^\/([^/]+?)\/?$/,
		params: [
			{
				name: 'slug',
				matcher: undefined,
				optional: false,
				rest: false,
				chained: false
			}
		],
		layout: null,
		error: { depth: 1, component: 'src/routes/[slug]/+error.svelte' },
		leaf: {
			depth: 1,
			component: 'src/routes/[slug]/+page.svelte',
			universal: 'src/routes/[slug]/+page.ts',
			parent: {
				depth: 0,
				child_pages: [circular array],
				component: '../../packages/kit/src/runtime/components/svelte-4/layout.svelte'
			}
		},
		page: { layouts: [ 0, undefined ], errors: [ 1, 2 ], leaf: 4 },
		endpoint: { file: 'src/routes/[slug]/+server.ts' }
	}
]

Theoretically, if we could hook into SvelteKit's routing system, it could be interesting to allow people to create a routes.js file exporting a RouteData[] iterable/array that would be imported by Svelte, so that devs could have total flexibility in both project structure and routes definitions.

One would be able to define their own +page.svelte file, and even name it differently, or use a 3rd-party file for that particular route, could it be a Svelte file or a JS/TS file for server handling.

[MrVauxs]

Besides sitemaps, this would also be helpful when used for static websites with i18n and the url strategy of determining locale.
Currently the only way to suggest to SvelteKit that translations exist as separate urls is to put them as anchors.

[miridius]

We found a solution for our needs which might be helpful to others:

1. Write your own adapter that wraps adapter-static (or whatever you use), which gives you access to all the route info at build time so that you can use it how you want (in our case, building a JSON file):

// adapter-static-with-routes.js
import adapter from '@sveltejs/adapter-static';
import { writeFile } from 'fs/promises';
import { join } from 'path';

/**
 * @param {import("@sveltejs/adapter-static").AdapterOptions} options
 */
export default function (options = {}) {
  const baseAdapter = adapter(options);

  return {
    name: 'adapter-static-with-routes',

    /**
     * @param {import("@sveltejs/kit").Builder} builder
     */
    async adapt(builder) {
      // let the base adapter do its work
      await baseAdapter.adapt(builder);

      // gather the route info that we care about
      const manifest = {
        prerendered: builder.prerendered.paths,
        dynamic: builder.routes
          .filter((r) => r.segments.some((s) => s.dynamic))
          .map(({ id, pattern, prerender }) => ({ id, pattern: pattern.toString(), prerender })),
        generated: new Date().toISOString(),
      };

      // write it to the output dir as a json file
      const outputPath = join(options.pages || 'build', 'route-manifest.json');
      await writeFile(outputPath, JSON.stringify(manifest, null, 2));

      builder.log.success(`Route manifest written to ${outputPath}`);
    },
  };
}

2. use that as a drop-in replacement for your adapter in svelte.config.js:

import adapter from './src/adapter-static-with-routes.js';

...

    adapter: adapter({ fallback: '404.html', ...etc }),

[arohner]

Note that the above gives you a list of routes, but there does not appear to be a way to get the .html file(s) that correspond to a given route.