Client-side router

Quickly add a description, title, open graph, etc. in your page’s document head.
This add-on will take care of the nitty-gritty.

Installation

npm i @gracile-labs/client-router

Activate page premises:

📄 ./vite.config.ts

import { defineConfig, type PluginOption } from 'vite';
import { gracile } from '@gracile/gracile/plugin';

export default defineConfig({
  // ...
  plugins: [
    gracile({
      pages: { premises: { expose: true } },
    }),
    // ...
  ],
});

Usage

After installing the @gracile-labs/client-router, you can create a client router instance and add it to your document client scripts:

📄 ./src/client-router.ts

import { createRouter } from '@gracile-labs/client-router/create';

 As an event target, you can listen to events or navigate programmatically from anywhere.
export const router = createRouter();

📄 ./src/document.client.ts

import './client-router.js';

📄 ./src/routes/(home).ts

import { router } from '../client-router.js';

// ...
if (!isServer) {
  // ...

   Trigger as soon as a new URL is requested.
  router.addEventListener('route-changed', () => {
    this.isSearchBoxVisible = false;
  });

   Trigger when the route template is fully rendered and displayed.
  router.addEventListener('route-rendered', () =>
    requestIdleCallback(() => initCardsHover()),
  );

   Programmatic navigation.
  setTimeout(() => {
    router.navigate('/docs/');
  }, 2000);
}