Routify

https://routify.dev/docs
Admin
Routify is a Svelte-based router that helps developers build robust and scalable applications with...
Tokens:93,187
Snippets:3,450
Trust Score:7.8
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install Routify via CLI

Source: https://routify.dev/docs/api/helpers/isActive

Installs Routify 3 using the command-line interface for a quick and customizable setup.

```bash
npm init routify@latest
```

--------------------------------

### Install Routify via CLI

Source: https://routify.dev/docs/api/components

Installs Routify 3 using the official npm command. This is the recommended method for a quick and customizable setup.

```bash
npm init routify@latest

```

--------------------------------

### Install Routify Manually

Source: https://routify.dev/docs/api/helpers/isActive

Installs Routify as a dependency in an existing project using npm.

```bash
npm install @roxi/routify@next
```

--------------------------------

### Custom 404 Page Setup in Routify

Source: https://routify.dev/docs/guide/concepts/preloading

This snippet demonstrates how to set up a custom 404 'catch-all' page in Routify by creating a Svelte component named '[...anyname].svelte'. This component will handle any undefined routes within its directory, allowing for tailored error messages or redirects.

```svelte
<!-- Example for routes/404/[...catchall].svelte -->
<script>
  import { page } from "@roxi/routify"
</script>

<h1>404 - Page Not Found</h1>
<p>The requested path "{$page.path}" does not exist.</p>

```

--------------------------------

### Generate URL with Parameters using $url Helper (Example)

Source: https://routify.dev/docs/api/classes/route

Shows an example of using the $url helper to generate a URL with both path parameters and query parameters. This demonstrates how Routify handles dynamic segments and query string construction.

```javascript
$url('/posts/', {page: 1, theme: 'dark'})
// outputs /posts/1?theme=dark
```

--------------------------------

### Configure Plugins in package.json

Source: https://routify.dev/docs/guide/concepts/preloading

Demonstrates how to configure Routify plugins directly within the `package.json` file, either by plugin name or with specific options.

```json
{
    "routify": {
        "plugins": [
            "indexByName"
        ]
    }
}
```

```json
{
    "routify": {
        "plugins": [
            {
                "path": "indexByName",
                "options": { /* ... */ }
            }
        ]
    }
}
```

--------------------------------

### Basic Navigation Link in Svelte

Source: https://routify.dev/docs/api/metadata

Demonstrates how to create a basic navigation link using an anchor tag in Svelte. Routify intercepts these links for client-side navigation.

```html
<a href="/blog">Blog</a>

```

--------------------------------

### Configure Plugins in routify.config.js

Source: https://routify.dev/docs/api/helpers/isActive

Plugins can also be configured in the `routify.config.js` file, allowing for more complex setups where plugins are imported directly and instantiated with options.

```javascript
import indexByName from './path/to/plugin'

export default {
  plugins: [
      indexByName({/** options*/})
  ]
}
```

--------------------------------

### Generate URL with Query Parameters

Source: https://routify.dev/docs/api/helpers/url

Demonstrates using the $url helper to generate a URL with query parameters, including an example with both a page number and a theme.

```javascript
$url('/posts', {page: 1})
// produces the string /posts?page=1

$url('/posts/', {page: 1, theme: 'dark'})
// outputs /posts/1?theme=dark
```

--------------------------------

### Example: Sort Routes by Index Prefix Plugin

Source: https://routify.dev/docs/api/metadata

An example plugin that sorts routes based on an index prefix in their name (e.g., '1.guide.svelte'). It modifies node names and meta data during the build process.

```javascript
export default options => ({
    name: 'indexByName',
    before: 'exporter',
    build: ({ instance }) => {
        instance.nodeIndex.forEach(node => {
            const matches = node.name?.match(/^(\d+)\.(.+)/)
            if (matches) {
                const [, index, name] = matches
                node.name = name
                node.meta.index = index
            }
        })
    }
})

```

--------------------------------

### Plugin Structure and Example

Source: https://routify.dev/docs/guide/installation/manual-installation

Shows the expected structure for creating a Routify plugin, including its name, build function, and optional before/after hooks. An example plugin 'indexByName' is provided.

```javascript
export default options => ({
    name: 'string',
    before: 'string', // optional plugin name this plugin should run before
    after: 'string', // optional plugin name this plugin should run after
    build: ({ instance }) => void
})
```

```javascript
// this plugin sorts routes by the index prefixed to their names
// eg. 1.guide.svelte, 2.api.svelte
export default options => ({
    name: 'indexByName',
    
    // we want to run our plugin before we write our routes to disk
    before: 'exporter', 
    
    
    build: ({ instance }) => {

        // iterate over all nodes
        instance.nodeIndex.forEach(node => {

            // if our node name matches 123.foo
            // set the name to foo and the meta index to 123
            const matches = node.name?.match(/^(d+).(.+)/)
            if (matches) {
                const [, index, name] = matches
                node.name = name
                node.meta.index = index
            }
        })
    }
})
```

--------------------------------

### Router Options

Source: https://routify.dev/docs/guide/introduction/navigation

Configuration options for initializing a Routify router instance.

```APIDOC
## Router Options

This section outlines the available options for configuring a Routify router.

### Options

- **instance** (`RoutifyRuntime`) - The router instance to use. Defaults to the global instance.
- **rootNode** (`RNodeRuntime`) - The root node of the router. Defaults to `undefined`.
- **routes** (`any`) - The routes tree configuration. Defaults to `undefined`.
- **name** (`string`) - A name for the router, useful when multiple routers are present. Defaults to `undefined`.
- **urlRewrite** (`UrlRewrite|UrlRewrite[]`) - Hooks for transforming URLs between the router and the browser. Defaults to `undefined`.
- **urlReflector** (`import('../lib/runtime/Router/urlReflectors/ReflectorBase.js')['BaseReflector']`) - Specifies where to store the URL state. Defaults to `Browser`.
- **url** (`string`) - The initial URL for the router. Defaults to `'/'`.
- **passthrough** (`Boolean|Router`) - If `true`, clicks will be ignored by the router. Defaults to `false`.
- **beforeRouterInit** (`MaybeArray<RouterInitCallback>`) - Hook that runs before each router initiation. Defaults to `undefined`.
- **afterRouterInit** (`MaybeArray<RouterInitCallback>`) - Hook that runs after each router initiation. Defaults to `undefined`.
- **beforeUrlChange** (`MaybeArray<BeforeUrlChangeCallback>`) - A guard hook that runs before the URL changes. Defaults to `undefined`.
- **afterUrlChange** (`MaybeArray<AfterUrlChangeCallback>`) - Hook that runs after the URL has changed. Defaults to `undefined`.
- **afterRouteRendered** (`MaybeArray<AfterRouteRenderedCallback>`) - Hook that runs after a new route has been rendered. Defaults to `undefined`.
- **transformFragments** (`MaybeArray<TransformFragmentsCallback>`) - Hook to transform route fragments after navigation. Defaults to `undefined`.
- **onMount** (`MaybeArray<OnMountRouterCallback>`) - Hook that runs when the router is mounted. Defaults to `undefined`.
- **onDestroy** (`MaybeArray<OnDestroyRouterCallback>`) - Hook that runs before the router is destroyed. Defaults to `undefined`.
- **queryHandler** (`QueryHandler`) - Handles the serialization and parsing of query parameters. Defaults to `undefined`.
- **plugins** (`Partial<RoutifyRuntimeOptions>[]`) - An array of plugins to extend or modify router functionality. Defaults to `[]`.
- **clickHandler** (`ClickHandler`) - Handles click events for routing. Defaults to `undefined`.
- **anchor** (`AnchorLocation`) - Specifies where to place anchor elements. Defaults to `undefined`.
```

--------------------------------

### Programmatic Navigation with $goto

Source: https://routify.dev/docs/api/metadata

Function for programmatic navigation, allowing control over the navigation mode (push/replace) and history management. Accepts path, parameters, and options for advanced navigation.

```javascript
import { $goto } from '@roxi/routify'

// Navigate to a specific path
$goto('/about')

// Navigate and replace history
$goto('/contact', null, { mode: 'replace' })

```

--------------------------------

### Example Plugin: Sort Routes by Index

Source: https://routify.dev/docs/api/helpers/isActive

This example plugin sorts routes based on an index prefixed to their names (e.g., `1.guide.svelte`). It runs before the 'exporter' plugin and modifies node names and meta indices.

```javascript
// this plugin sorts routes by the index prefixed to their names
// eg. 1.guide.svelte, 2.api.svelte
export default options => ({
    name: 'indexByName',
    
    // we want to run our plugin before we write our routes to disk
    before: 'exporter', 
    
    
    build: ({ instance }) => {

        // iterate over all nodes
        instance.nodeIndex.forEach(node => {

            // if our node name matches 123.foo
            // set the name to foo and the meta index to 123
            const matches = node.name?.match(/^(d+).(.+)/)
            if (matches) {
                const [, index, name] = matches
                node.name = name
                node.meta.index = index
            }
        })
    }
})
```

--------------------------------

### Configure Routify Plugins in package.json

Source: https://routify.dev/docs/api/metadata

Illustrates how to configure Routify plugins directly within the package.json file. This includes specifying plugin paths and optional configurations.

```json
{
    "routify": {
        "plugins": [
            "indexByName"
        ]
    }
}

```

```json
{
    "routify": {
        "plugins": [
            {
                "path": "indexByName",
                "options": { 
                    // plugin options
                 }
            }
        ]
    }
}

```

--------------------------------

### Routify Spread Parameters Example

Source: https://routify.dev/docs/guide/advanced/nodes

Shows how to handle variadic parameters in Routify using spread syntax in filenames (e.g., `[...names].svelte`). This allows a single route to match multiple segments in the URL.

```javascript
people/[...names].svelte // matches /people/john/peter/paul and returns ['john', 'peter', 'paul'] from $params.
```

--------------------------------

### Routify Theme Presets Configuration

Source: https://routify.dev/docs/api/metadata

Define theme presets in Routify's configuration to organize routes by contexts such as language, season, or UI mode. This setup allows for dynamic routing based on these contexts, with fallback mechanisms for broader compatibility.

```javascript
{
    themes: {
        presets: {
            en: ['en'],
            en_gb: ['en-gb', 'en'], // fallback to US English
            de: ['de', 'en'],            
            en_xmas: [['en', 'xmas'], 'en'], // compound theme
            // Prefer US English Xmas over localized English without Xmas
            en_gb_xmas: [['en-gb', 'xmas'], ['en', 'xmas'], 'en-gb', 'en'],
            // Always prefer German
            de_xmas: [['de', 'xmas'], 'de', 'en']
        }
    }
}
```

--------------------------------

### Router Options

Source: https://routify.dev/docs/guide/concepts/url-rewrites

Configuration options for initializing a Routify router instance.

```APIDOC
## Router Options

### Description
Configuration options for initializing a Routify router instance.

### Parameters
#### Request Body
- **instance** (RoutifyRuntime) - Optional - Instance to use. Uses global instance by default.
- **rootNode** (RNodeRuntime) - Optional - The root node of the router.
- **routes** (any) - Optional - The routes tree.
- **name** (string) - Optional - Name of the router - leave blank if only one router is used.
- **urlRewrite** (UrlRewrite|UrlRewrite[]) - Optional - Hook: transforms paths to and from the router and browser.
- **urlReflector** (import('../lib/runtime/Router/urlReflectors/ReflectorBase.js')['BaseReflector']) - Optional - Where to store the URL state - browser by default.
- **url** (string) - Optional - Initial URL - "/" by default.
- **passthrough** (Boolean|Router) - Optional - Ignore clicks.
- **beforeRouterInit** (MaybeArray<RouterInitCallback>) - Optional - Hook: runs before each router initiation.
- **afterRouterInit** (MaybeArray<RouterInitCallback>) - Optional - Hook: runs after each router initiation.
- **beforeUrlChange** (MaybeArray<BeforeUrlChangeCallback>) - Optional - Hook: guard that runs before URL changes.
- **afterUrlChange** (MaybeArray<AfterUrlChangeCallback>) - Optional - Hook: runs after URL has changed.
- **afterRouteRendered** (MaybeArray<AfterRouteRenderedCallback>) - Optional - Hook: runs after a new route has been rendered.
- **transformFragments** (MaybeArray<TransformFragmentsCallback>) - Optional - Hook: transform route fragments after navigation.
- **onMount** (MaybeArray<OnMountRouterCallback>) - Optional - Hook: runs when the router is mounted.
- **onDestroy** (MaybeArray<OnDestroyRouterCallback>) - Optional - Hook: runs before the router is destroyed.
- **queryHandler** (QueryHandler) - Optional - Handles query parameter serialization and parsing.
- **plugins** (Partial<RoutifyRuntimeOptions>[]) - Optional - Plugins to extend or modify functionality.
- **clickHandler** (ClickHandler) - Optional - Handles click events for routing.
- **anchor** (AnchorLocation) - Optional - Where to place the anchor element.

### Request Example
```json
{
  "instance": "GlobalInstance",
  "urlRewrite": null,
  "urlReflector": "Browser",
  "url": "/",
  "passthrough": false,
  "beforeRouterInit": [],
  "afterRouterInit": [],
  "beforeUrlChange": [],
  "afterUrlChange": [],
  "afterRouteRendered": [],
  "transformFragments": [],
  "onMount": [],
  "onDestroy": [],
  "queryHandler": null,
  "plugins": [],
  "clickHandler": null,
  "anchor": null
}
```

### Response
(No specific success response defined for router initialization. Behavior is reflected in application state.)
```

--------------------------------

### Generate URL with Parameters

Source: https://routify.dev/docs/guide/advanced/how-it-works

This example demonstrates using the $url helper to generate a URL with query parameters. It shows how to create a URL for a posts page with a page number and a theme.

```javascript
$url('/posts', {page: 1})
// outputs /posts?page=1

$url('/posts/', {page: 1, theme: 'dark'})
// outputs /posts/?page=1&theme=dark (or potentially /posts/1?theme=dark if using pretty URLs)
```

--------------------------------

### Configure Routify Plugins in routify.config.js

Source: https://routify.dev/docs/api/metadata

Shows how to configure Routify plugins using a routify.config.js file. This method allows for importing and instantiating plugins with their configurations programmatically.

```javascript
import indexByName from './path/to/plugin'

export default {
  plugins: [
      indexByName({/** options*/})
  ]
}

```

--------------------------------

### Router Options

Source: https://routify.dev/docs/guide/advanced/how-it-works

Configuration options for initializing a Routify router instance.

```APIDOC
## Router Options

### Description
Configuration options for initializing a Routify router instance.

### Parameters
#### Request Body
- **instance** (RoutifyRuntime) - Optional - Instance to use. Uses global instance by default.
- **rootNode** (RNodeRuntime) - Optional - The root node of the router.
- **routes** (any) - Optional - The routes tree.
- **name** (string) - Optional - Name of the router - leave blank if only one router is used.
- **urlRewrite** (UrlRewrite|UrlRewrite[]) - Optional - Hook: transforms paths to and from the router and browser.
- **urlReflector** (import('../lib/runtime/Router/urlReflectors/ReflectorBase.js')['BaseReflector']) - Optional - Where to store the URL state - browser by default.
- **url** (string) - Optional - Initial URL - "/" by default.
- **passthrough** (Boolean|Router) - Optional - Ignore clicks.
- **beforeRouterInit** (MaybeArray<RouterInitCallback>) - Optional - Hook: runs before each router initiation.
- **afterRouterInit** (MaybeArray<RouterInitCallback>) - Optional - Hook: runs after each router initiation.
- **beforeUrlChange** (MaybeArray<BeforeUrlChangeCallback>) - Optional - Hook: guard that runs before URL changes.
- **afterUrlChange** (MaybeArray<AfterUrlChangeCallback>) - Optional - Hook: runs after URL has changed.
- **afterRouteRendered** (MaybeArray<AfterRouteRenderedCallback>) - Optional - Hook: runs after a new route has been rendered.
- **transformFragments** (MaybeArray<TransformFragmentsCallback>) - Optional - Hook: transform route fragments after navigation.
- **onMount** (MaybeArray<OnMountRouterCallback>) - Optional - Hook: runs when the router is mounted.
- **onDestroy** (MaybeArray<OnDestroyRouterCallback>) - Optional - Hook: runs before the router is destroyed.
- **queryHandler** (QueryHandler) - Optional - Handles query parameter serialization and parsing.
- **plugins** (Partial<RoutifyRuntimeOptions>[]) - Optional - Plugins to extend or modify functionality.
- **clickHandler** (ClickHandler) - Optional - Handles click events for routing.
- **anchor** (AnchorLocation) - Optional - Where to place the anchor element.
```

--------------------------------

### Prefetching Data with 'props' in Routify

Source: https://routify.dev/docs/guide/concepts/preloading

This example shows how to prefetch data using the 'props' field within a module script in Routify. This is useful for fetching data required by a component before it's loaded, optimizing perceived performance.

```svelte
<script context="module">
  export async function load({ page, fetch }) {
    const res = await fetch(`/api/data/${page.params.id}`);
    const data = await res.json();
    return {
      props: {
        initialData: data
      }
    };
  }
</script>

<script>
  export let initialData;
</script>

<p>Component loaded with initial data: {JSON.stringify(initialData)}</p>

```

--------------------------------

### Router Options

Source: https://routify.dev/docs/api/helpers/url

Configuration options for initializing and customizing the Routify router instance.

```APIDOC
## Router Options

### Description
These options configure the behavior and functionality of a Routify router instance.

### Parameters
#### Request Body
- **instance** (RoutifyRuntime) - Optional - The Routify instance to use. Defaults to the global instance.
- **rootNode** (RNodeRuntime) - Optional - The root node of the router. Defaults to undefined.
- **routes** (any) - Optional - The routes tree definition. Defaults to undefined.
- **name** (string) - Optional - A name for the router, useful when multiple routers are used. Defaults to undefined.
- **urlRewrite** (UrlRewrite|UrlRewrite[]) - Optional - A hook for transforming URLs between the router and the browser. Defaults to undefined.
- **urlReflector** (import('../lib/runtime/Router/urlReflectors/ReflectorBase.js')['BaseReflector']) - Optional - Specifies where the URL state is stored. Defaults to the browser implementation.
- **url** (string) - Optional - The initial URL to load. Defaults to '/'.
- **passthrough** (Boolean|Router) - Optional - If true, clicks are ignored by the router. Defaults to false.
- **beforeRouterInit** (MaybeArray<RouterInitCallback>) - Optional - A hook that runs before each router initiation.
- **afterRouterInit** (MaybeArray<RouterInitCallback>) - Optional - A hook that runs after each router initiation.
- **beforeUrlChange** (MaybeArray<BeforeUrlChangeCallback>) - Optional - A guard hook that runs before the URL changes.
- **afterUrlChange** (MaybeArray<AfterUrlChangeCallback>) - Optional - A hook that runs after the URL has changed.
- **afterRouteRendered** (MaybeArray<AfterRouteRenderedCallback>) - Optional - A hook that runs after a new route has been rendered.
- **transformFragments** (MaybeArray<TransformFragmentsCallback>) - Optional - A hook to transform route fragments after navigation.
- **onMount** (MaybeArray<OnMountRouterCallback>) - Optional - A hook that runs when the router is mounted.
- **onDestroy** (MaybeArray<OnDestroyRouterCallback>) - Optional - A hook that runs before the router is destroyed.
- **queryHandler** (QueryHandler) - Optional - Handles the serialization and parsing of query parameters. Defaults to undefined.
- **plugins** (Partial<RoutifyRuntimeOptions>[]) - Optional - An array of plugins to extend or modify router functionality. Defaults to an empty array.
- **clickHandler** (ClickHandler) - Optional - Handles click events for routing. Defaults to undefined.
- **anchor** (AnchorLocation) - Optional - Specifies where to place the anchor element. Defaults to undefined.
```

--------------------------------

### Routify Module Structure Example

Source: https://routify.dev/docs/guide/advanced/how-it-works

Demonstrates the structure of a Routify module file, which controls logic and layout for descendant nodes. It includes a slot for rendering child pages and a footer.

```html
<!-- _module.svelte -->

<slot>
  <\!-- pages in this folder and subfolders
   will be rendered here -->
<\ suara>
<p>Copyright my website </p>
```

--------------------------------

### Router Options

Source: https://routify.dev/docs/guide/advanced/nodes

Configuration options for initializing and customizing the Routify router instance.

```APIDOC
## Router Options

### Description
Configuration options for initializing and customizing the Routify router instance.

### Parameters
#### Request Body
- **instance** (RoutifyRuntime) - Optional - Instance to use. Uses global instance by default.
- **rootNode** (RNodeRuntime) - Optional - The root node of the router.
- **routes** (any) - Optional - The routes tree.
- **name** (string) - Optional - Name of the router - leave blank if only one router is used.
- **urlRewrite** (UrlRewrite|UrlRewrite[]) - Optional - Hook: transforms paths to and from the router and browser.
- **urlReflector** (import('../lib/runtime/Router/urlReflectors/ReflectorBase.js')['BaseReflector']) - Optional - Where to store the URL state - browser by default.
- **url** (string) - Optional - Initial URL - "/" by default.
- **passthrough** (Boolean|Router) - Optional - Ignore clicks.
- **beforeRouterInit** (MaybeArray<RouterInitCallback>) - Optional - Hook: runs before each router initiation.
- **afterRouterInit** (MaybeArray<RouterInitCallback>) - Optional - Hook: runs after each router initiation.
- **beforeUrlChange** (MaybeArray<BeforeUrlChangeCallback>) - Optional - Hook: guard that runs before URL changes.
- **afterUrlChange** (MaybeArray<AfterUrlChangeCallback>) - Optional - Hook: runs after URL has changed.
- **afterRouteRendered** (MaybeArray<AfterRouteRenderedCallback>) - Optional - Hook: runs after a new route has been rendered.
- **transformFragments** (MaybeArray<TransformFragmentsCallback>) - Optional - Hook: transform route fragments after navigation.
- **onMount** (MaybeArray<OnMountRouterCallback>) - Optional - Hook: runs when the router is mounted.
- **onDestroy** (MaybeArray<OnDestroyRouterCallback>) - Optional - Hook: runs before the router is destroyed.
- **queryHandler** (QueryHandler) - Optional - Handles query parameter serialization and parsing.
- **plugins** (Partial<RoutifyRuntimeOptions>[]) - Optional - Plugins to extend or modify functionality.
- **clickHandler** (ClickHandler) - Optional - Handles click events for routing.
- **anchor** (AnchorLocation) - Optional - Where to place the anchor element.
```

--------------------------------

### Router Options

Source: https://routify.dev/docs/guide/advanced/render-modes

Configuration options for initializing and customizing the Routify router instance.

```APIDOC
## Router Options

### Description
Configuration options for initializing and customizing the Routify router instance.

### Parameters
#### Request Body
- **instance** (`RoutifyRuntime`) - Optional - Instance to use. Uses global instance by default.
- **rootNode** (`RNodeRuntime`) - Optional - The root node of the router.
- **routes** (`any`) - Optional - The routes tree.
- **name** (`string`) - Optional - Name of the router - leave blank if only one router is used.
- **urlRewrite** (`UrlRewrite|UrlRewrite[]`) - Optional - Hook: transforms paths to and from the router and browser.
- **urlReflector** (`import('../lib/runtime/Router/urlReflectors/ReflectorBase.js')['BaseReflector']`) - Optional - Where to store the URL state - browser by default.
- **url** (`string`) - Optional - Initial URL - "/" by default.
- **passthrough** (`Boolean|Router`) - Optional - Ignore clicks.
- **beforeRouterInit** (`MaybeArray<RouterInitCallback>`) - Optional - Hook: runs before each router initiation.
- **afterRouterInit** (`MaybeArray<RouterInitCallback>`) - Optional - Hook: runs after each router initiation.
- **beforeUrlChange** (`MaybeArray<BeforeUrlChangeCallback>`) - Optional - Hook: guard that runs before URL changes.
- **afterUrlChange** (`MaybeArray<AfterUrlChangeCallback>`) - Optional - Hook: runs after URL has changed.
- **afterRouteRendered** (`MaybeArray<AfterRouteRenderedCallback>`) - Optional - Hook: runs after a new route has been rendered.
- **transformFragments** (`MaybeArray<TransformFragmentsCallback>`) - Optional - Hook: transform route fragments after navigation.
- **onMount** (`MaybeArray<OnMountRouterCallback>`) - Optional - Hook: runs when the router is mounted.
- **onDestroy** (`MaybeArray<OnDestroyRouterCallback>`) - Optional - Hook: runs before the router is destroyed.
- **queryHandler** (`QueryHandler`) - Optional - Handles query parameter serialization and parsing.
- **plugins** (`Partial<RoutifyRuntimeOptions>[]`) - Optional - Plugins to extend or modify functionality.
- **clickHandler** (`ClickHandler`) - Optional - Handles click events for routing.
- **anchor** (`AnchorLocation`) - Optional - Where to place the anchor element.
```

--------------------------------

### Router Options

Source: https://routify.dev/docs/api/classes

Configuration options for initializing the Routify router.

```APIDOC
## Router Options

### Description
These are the configurable options when initializing a Routify router instance.

### Parameters
#### Options
- **instance** (`RoutifyRuntime`) - Optional - The Routify runtime instance to use. Defaults to the global instance.
- **rootNode** (`RNodeRuntime`) - Optional - The root node of the router. Defaults to `undefined`.
- **routes** (`any`) - Optional - The routes tree structure. Defaults to `undefined`.
- **name** (`string`) - Optional - A name for the router, useful when multiple routers are used. Defaults to `undefined`.
- **urlRewrite** (`UrlRewrite|UrlRewrite[]`) - Optional - Hooks to transform paths between the router and the browser. Defaults to `undefined`.
- **urlReflector** (`import('../lib/runtime/Router/urlReflectors/ReflectorBase.js')['BaseReflector']`) - Optional - Specifies where the URL state is stored. Defaults to `Browser`.
- **url** (`string`) - Optional - The initial URL for the router. Defaults to `'/'`.
- **passthrough** (`Boolean|Router`) - Optional - If true, clicks will be ignored by the router. Defaults to `false`.
- **beforeRouterInit** (`MaybeArray<RouterInitCallback>`) - Optional - Hook that runs before each router initiation. Defaults to `undefined`.
- **afterRouterInit** (`MaybeArray<RouterInitCallback>`) - Optional - Hook that runs after each router initiation. Defaults to `undefined`.
- **beforeUrlChange** (`MaybeArray<BeforeUrlChangeCallback>`) - Optional - A guard hook that runs before the URL changes. Defaults to `undefined`.
- **afterUrlChange** (`MaybeArray<AfterUrlChangeCallback>`) - Optional - Hook that runs after the URL has changed. Defaults to `undefined`.
- **afterRouteRendered** (`MaybeArray<AfterRouteRenderedCallback>`) - Optional - Hook that runs after a new route has been rendered. Defaults to `undefined`.
- **transformFragments** (`MaybeArray<TransformFragmentsCallback>`) - Optional - Hook to transform route fragments after navigation. Defaults to `undefined`.
- **onMount** (`MaybeArray<OnMountRouterCallback>`) - Optional - Hook that runs when the router is mounted. Defaults to `undefined`.
- **onDestroy** (`MaybeArray<OnDestroyRouterCallback>`) - Optional - Hook that runs before the router is destroyed. Defaults to `undefined`.
- **queryHandler** (`QueryHandler`) - Optional - Handles the serialization and parsing of query parameters. Defaults to `undefined`.
- **plugins** (`Partial<RoutifyRuntimeOptions>[]`) - Optional - An array of plugins to extend or modify router functionality. Defaults to `[]`.
- **clickHandler** (`ClickHandler`) - Optional - Handles click events for routing. Defaults to `undefined`.
- **anchor** (`AnchorLocation`) - Optional - Specifies where to place the anchor element. Defaults to `undefined`.
```

--------------------------------

### Programmatic Navigation

Source: https://routify.dev/docs/guide/concepts/preloading

Handles programmatic navigation to a specified path. Supports various options including `mode` (push/replace), `silent` error suppression, and `strict` path matching.

```javascript
import { $goto } from '@roxi/routify';

$goto('/dashboard', { replace: true });
// Navigates to /dashboard, replacing the current history entry
```

--------------------------------

### Create URL with Parameters

Source: https://routify.dev/docs/guide/concepts/preloading

Generates URLs from internal paths and provided parameters. Unused parameters are appended as query strings. Supports '$leaf' for the current node's URL.

```javascript
import { $url } from '@roxi/routify';

const url = $url('/blog/[slug]/comments', { slug: 'my-post', commentId: 123 });
// url will be '/blog/my-post/comments?commentId=123'
```

--------------------------------

### Example Routify Plugin: Sort routes by index

Source: https://routify.dev/docs/guide/introduction/navigation

An example plugin that sorts Routify nodes based on a numerical index prefixed to their names (e.g., '1.guide.svelte'). It modifies the node names and metadata during the build process. It specifies to run 'before' the 'exporter' plugin.

```javascript
export default options => ({
    name: 'indexByName',
    before: 'exporter',
    build: ({ instance }) => {
        instance.nodeIndex.forEach(node => {
            const matches = node.name?.match(/^(d+).(.+)/);
            if (matches) {
                const [, index, name] = matches;
                node.name = name;
                node.meta.index = parseInt(index, 10);
            }
        });
    }
})
```

--------------------------------

### Example: Sort Routes by Index Prefix Plugin

Source: https://routify.dev/docs/guide/advanced/how-it-works

This example plugin sorts routes based on an index prefix in their names (e.g., '1.guide.svelte'). It modifies node names and adds an 'index' meta property during the build process.

```javascript
export default options => ({
    name: 'indexByName',
    before: 'exporter',
    build: ({ instance }) => {
        instance.nodeIndex.forEach(node => {
            const matches = node.name?.match(/^(d+).(.+)/);
            if (matches) {
                const [, index, name] = matches;
                node.name = name;
                node.meta.index = index;
            }
        });
    }
})
```

--------------------------------

### Routify Migration Guide

Source: https://routify.dev/docs/guide/advanced/multiple-routers

Key changes and considerations when migrating from older versions of Routify to Routify 3, which is a complete rewrite.

```APIDOC
## Migration Guide

Routify 3 shares the name with Routify 1 and 2, but it’s a completely new routing framework built from scratch. As a result, there’s no direct upgrade path, but here are the most significant changes:

*   **Default routes path:** `src/pages` to `src/routes`
*   **Deprecated helpers** :
    *   `$metatags`
    *   `$focus`
    *   `$ready` (Routify 3 currently only supports Svelte’s native SSR)
    *   `$prefetch` → `data-routify-prefetch-data`
    *   `$route` → `$activeRoute`
    *   `$isChangingPage` → `$pendingRoute`
    *   `$leftover` → `spread parameters`
    *   `$afterPageLoad` → `$afterRouteRendered`
    *   `$page` → `$route.leaf`
    *   `$layout` → `$node`
    *   `$getConcestor` → `$getMRCA`
*   The first `.` in relative paths (`$url` and `$goto`) now refers to the component itself, not the parent module.
*   `<slot scoped={data} />` → `<slot props={data}>`. Props can be accessed at `export let context.props`.
*   `<!-- routify:option -->` → `<!-- routify:meta -->`
*   `_fallback.svelte` deprecated → use `[...404].svelte` or similar (spread param path).
*   For configuring `main.js`, `App.svelte` and `index.html`, refer to the starter templates: (`npm init routify@latest`).
```

--------------------------------

### Routify Plugin Example: Index by Name

Source: https://routify.dev/docs/guide/concepts/inlined-pages

An example plugin that sorts routes based on an index prefix in their names (e.g., '1.guide.svelte'). It modifies node names and meta indices during the build process.

```javascript
// this plugin sorts routes by the index prefixed to their names
// eg. 1.guide.svelte, 2.api.svelte
export default options => ({
    name: 'indexByName',
    
    // we want to run our plugin before we write our routes to disk
    before: 'exporter',
    
    
    build: ({ instance }) => {

        // iterate over all nodes
        instance.nodeIndex.forEach(node => {

            // if our node name matches 123.foo
            // set the name to foo and the meta index to 123
            const matches = node.name?.match(/^(\d+).(.+)/)
            if (matches) {
                const [, index, name] = matches
                node.name = name
                node.meta.index = parseInt(index, 10) // Ensure index is a number
            }
        })
    }
})
```

--------------------------------

### Preload Data with 'props' Field

Source: https://routify.dev/docs/api/metadata

Demonstrates preloading data for a component using the 'props' field within a module script. This runs before the component is loaded, enabling data fetching in advance.

```svelte
<script context="module">
  export async function preLoad() {
    return {
      // props: { data: await fetchData() }
    }
  }
</script>

<script>
  export let data;
</script>

<p>Data: {data}</p>
```

--------------------------------

### Router Options

Source: https://routify.dev/docs/api/classes/route

Configuration options for initializing a Routify router instance.

```APIDOC
## Router Options

### Description
Configuration options for initializing a Routify router instance.

### Parameters
#### Request Body
- **instance** (`RoutifyRuntime`) - Optional - Instance to use. Uses global instance by default.
- **rootNode** (`RNodeRuntime`) - Optional - The root node of the router.
- **routes** (`any`) - Optional - The routes tree.
- **name** (`string`) - Optional - Name of the router - leave blank if only one router is used.
- **urlRewrite** (`UrlRewrite|UrlRewrite[]`) - Optional - Hook: transforms paths to and from the router and browser.
- **urlReflector** (`import('../lib/runtime/Router/urlReflectors/ReflectorBase.js')['BaseReflector']`) - Optional - Where to store the URL state - browser by default.
- **url** (`string`) - Optional - Initial URL - "/" by default.
- **passthrough** (`Boolean|Router`) - Optional - Ignore clicks.
- **beforeRouterInit** (`MaybeArray<RouterInitCallback>`) - Optional - Hook: runs before each router initiation.
- **afterRouterInit** (`MaybeArray<RouterInitCallback>`) - Optional - Hook: runs after each router initiation.
- **beforeUrlChange** (`MaybeArray<BeforeUrlChangeCallback>`) - Optional - Hook: guard that runs before URL changes.
- **afterUrlChange** (`MaybeArray<AfterUrlChangeCallback>`) - Optional - Hook: runs after URL has changed.
- **afterRouteRendered** (`MaybeArray<AfterRouteRenderedCallback>`) - Optional - Hook: runs after a new route has been rendered.
- **transformFragments** (`MaybeArray<TransformFragmentsCallback>`) - Optional - Hook: transform route fragments after navigation.
- **onMount** (`MaybeArray<OnMountRouterCallback>`) - Optional - Hook: runs when the router is mounted.
- **onDestroy** (`MaybeArray<OnDestroyRouterCallback>`) - Optional - Hook: runs before the router is destroyed.
- **queryHandler** (`QueryHandler`) - Optional - Handles query parameter serialization and parsing.
- **plugins** (`Partial<RoutifyRuntimeOptions>[]`) - Optional - Plugins to extend or modify functionality.
- **clickHandler** (`ClickHandler`) - Optional - Handles click events for routing.
- **anchor** (`AnchorLocation`) - Optional - Where to place the anchor element.
```

--------------------------------

### Dynamic Module Loading Strategies in Routify

Source: https://routify.dev/docs/api/helpers/url

Illustrates Routify's capabilities for dynamic module loading, including removing, replacing, and prepending modules using file naming conventions (e.g., `@.svelte`, `@fun.svelte`, `@fun+.svelte`) and meta comments.

```plaintext
routes/
├─ admin/
| ├─ dashboard/
| | ├─ _module.svelte
| | ├─ foo.svelte         #default behavior
| | ├─ bar@.svelte        #remove parent modules
| | ├─ baz@fun.svelte     #replace parent modules with _module-fun.svelte
| | ├─ qux@fun+.svelte    #prepend parent modules with _module-fun.svelte
| ├─ _module.svelte
| ├─ index.svelte
| _module.svelte
| _module-fun.svelte
| index.svelte
```

```html
<!-- routify:meta reset -->
```

```html
<!-- routify:meta reset="<name of module>" -->
```

```html
<!-- routify:meta reset="<name of module>+" -->
```

```html
<!--routify:meta reset="global+" -->
```

--------------------------------

### Router Options

Source: https://routify.dev/docs/guide/introduction/structure

Configuration options for initializing and customizing the Routify router instance.

```APIDOC
## Router Options

### Description
Configuration options for initializing and customizing the Routify router instance.

### Parameters
#### Request Body
- **instance** (RoutifyRuntime) - Optional - Instance to use. Uses global instance by default.
- **rootNode** (RNodeRuntime) - Optional - The root node of the router.
- **routes** (any) - Optional - The routes tree.
- **name** (string) - Optional - Name of the router - leave blank if only one router is used.
- **urlRewrite** (UrlRewrite|UrlRewrite[]) - Optional - Hook: transforms paths to and from the router and browser.
- **urlReflector** (BaseReflector) - Optional - Where to store the URL state - browser by default.
- **url** (string) - Optional - Initial URL - "/" by default.
- **passthrough** (Boolean|Router) - Optional - Ignore clicks.
- **beforeRouterInit** (MaybeArray<RouterInitCallback>) - Optional - Hook: runs before each router initiation.
- **afterRouterInit** (MaybeArray<RouterInitCallback>) - Optional - Hook: runs after each router initiation.
- **beforeUrlChange** (MaybeArray<BeforeUrlChangeCallback>) - Optional - Hook: guard that runs before URL changes.
- **afterUrlChange** (MaybeArray<AfterUrlChangeCallback>) - Optional - Hook: runs after URL has changed.
- **afterRouteRendered** (MaybeArray<AfterRouteRenderedCallback>) - Optional - Hook: runs after a new route has been rendered.
- **transformFragments** (MaybeArray<TransformFragmentsCallback>) - Optional - Hook: transform route fragments after navigation.
- **onMount** (MaybeArray<OnMountRouterCallback>) - Optional - Hook: runs when the router is mounted.
- **onDestroy** (MaybeArray<OnDestroyRouterCallback>) - Optional - Hook: runs before the router is destroyed.
- **queryHandler** (QueryHandler) - Optional - Handles query parameter serialization and parsing.
- **plugins** (Partial<RoutifyRuntimeOptions>[]) - Optional - Plugins to extend or modify functionality.
- **clickHandler** (ClickHandler) - Optional - Handles click events for routing.
- **anchor** (AnchorLocation) - Optional - Where to place the anchor element.
```

--------------------------------

### Routify: Custom 404 Page Setup

Source: https://routify.dev/docs/guide/introduction/navigation

Demonstrates how to create a custom 404 'Not Found' page in Routify by using a catch-all route pattern. This allows for tailored error handling when a URL does not match any defined routes.

```svelte
<!-- routes/[...fallback].svelte -->
<script>
  import { page } from "@roxi/routify"
</script>

<h1>404 Not Found</h1>
<p>The page "{$page.url}" does not exist.</p>
```

--------------------------------

### Integrate Routify Router Component

Source: https://routify.dev/docs/api/helpers/url

Sets up the Routify Router in a Svelte application by importing necessary components and creating a router instance with defined routes.

```svelte
<script context="module">
    import { Router, createRouter } from '@roxi/routify'
    import routes from '../.routify/routes.default.js'

    export const router = createRouter({ routes })
</script>

<Router {router} />
```

--------------------------------

### Access URL Parameters with $params

Source: https://routify.dev/docs/api/helpers/url

Illustrates how to access URL parameters using the $params helper. It shows an example of accessing a 'page' parameter from a query string.

```javascript
$param.page
```

--------------------------------

### Node Traversal Example - JavaScript

Source: https://routify.dev/docs/guide/advanced/dynamic-modules

Demonstrates accessing node information, such as meta-data, through parent and child relationships within the node tree. Relies on context and resolveNode.

```javascript
import { context } from '@roxi/routify'
import { resolveNode } from '@roxi/routify'

// Accessing through context
const aSiblingNode = context.node.parent.children.example

// Accessing through resolveNode
const aParentNode = resolveNode('..')
const aSiblingNodeFromResolve = resolveNode('../sibling')
const aChildNodeFromResolve = resolveNode('./child')
```

--------------------------------

### Dynamic Module Loading with Routify

Source: https://routify.dev/docs/guide/advanced/nodes

Illustrates Routify's dynamic module loading features using file naming conventions. It covers default behavior, named modules, removing, replacing, and prepending parent modules with '@' or meta comments.

```text
routes/
├─ admin/
| ├─ dashboard/
| | ├─ _module.svelte
| | ├─ foo.svelte         #default behavior
| | ├─ bar@.svelte        #remove parent modules
| | ├─ baz@fun.svelte     #replace parent modules with _module-fun.svelte
| | ├─ qux@fun+.svelte    #prepend parent modules with _module-fun.svelte
| ├─ _module.svelte
| ├─ index.svelte
| _module.svelte
| _module-fun.svelte
| index.svelte
```

```text
<!-- routify:meta reset -->
```

```text
<!-- routify:meta reset="fun" -->
```

```text
<!-- routify:meta reset="fun+" -->
```

```text
<!--routify:meta reset="global+" -->
```

--------------------------------

### Router Options

Source: https://routify.dev/docs/guide/advanced/multiple-routers

Configuration options for initializing and customizing the Routify router.

```APIDOC
## Router Options

### Description
Configuration options for initializing and customizing the Routify router.

### Parameters
#### Request Body
- **instance** (RoutifyRuntime) - Optional - Instance to use. Uses global instance by default.
- **rootNode** (RNodeRuntime) - Optional - The root node of the router.
- **routes** (any) - Optional - The routes tree.
- **name** (string) - Optional - Name of the router - leave blank if only one router is used.
- **urlRewrite** (UrlRewrite|UrlRewrite[]) - Optional - Hook: transforms paths to and from the router and browser.
- **urlReflector** (import('../lib/runtime/Router/urlReflectors/ReflectorBase.js')['BaseReflector']) - Optional - Where to store the URL state - browser by default.
- **url** (string) - Optional - Initial URL - "/" by default.
- **passthrough** (Boolean|Router) - Optional - Ignore clicks.
- **beforeRouterInit** (MaybeArray<RouterInitCallback>) - Optional - Hook: runs before each router initiation.
- **afterRouterInit** (MaybeArray<RouterInitCallback>) - Optional - Hook: runs after each router initiation.
- **beforeUrlChange** (MaybeArray<BeforeUrlChangeCallback>) - Optional - Hook: guard that runs before URL changes.
- **afterUrlChange** (MaybeArray<AfterUrlChangeCallback>) - Optional - Hook: runs after URL has changed.
- **afterRouteRendered** (MaybeArray<AfterRouteRenderedCallback>) - Optional - Hook: runs after a new route has been rendered.
- **transformFragments** (MaybeArray<TransformFragmentsCallback>) - Optional - Hook: transform route fragments after navigation.
- **onMount** (MaybeArray<OnMountRouterCallback>) - Optional - Hook: runs when the router is mounted.
- **onDestroy** (MaybeArray<OnDestroyRouterCallback>) - Optional - Hook: runs before the router is destroyed.
- **queryHandler** (QueryHandler) - Optional - Handles query parameter serialization and parsing.
- **plugins** (Partial<RoutifyRuntimeOptions>[]) - Optional - Plugins to extend or modify functionality.
- **clickHandler** (ClickHandler) - Optional - Handles click events for routing.
- **anchor** (AnchorLocation) - Optional - Where to place the anchor element.
```

--------------------------------

### Custom 404 Page Example

Source: https://routify.dev/docs/api/helpers/isActive

Demonstrates how to create a custom 404 'Not Found' page in Routify by using a catch-all route. This approach allows for tailored error handling when a user navigates to an undefined URL.

```svelte
<script>
  import { page } from "@roxi/routify";
</script>

<h1>404 - Page Not Found</h1>
<p>The route "{$page.path}" does not exist.</p>

```
Tokens:
Raw