Skip to content
Twilight React Playground
ثيم رائدaren

routeDocumentSyncs, registerDocumentSync

objectAdvanced

The per-framework table of components that add route-based body classes, and the function that adds a framework to it.

import { routeDocumentSyncs, registerDocumentSync } from '@salla.sa/twilight-theme-engine/providers';

In plain words

With routeClass on, TwilightProvider adds a class such as cart or product-single to <body> for the current page. Which component works that out depends on the router, so they sit in a table keyed by framework name. Today the table has one entry, tanstack.

Signature

const routeDocumentSyncs: Record<string, React.LazyExoticComponent<React.FC>>
// { tanstack: lazy(() => import('…/tanstack/document-class')) }

function registerDocumentSync(framework: string, component: React.LazyExoticComponent<React.FC>): void
// routeDocumentSyncs[framework] = component

Example

app/router.tsx (excerpt)
import { lazy } from 'react';
import { registerDocumentSync } from '@salla.sa/twilight-theme-engine/providers';

// Only for a router the engine does not support. Run it before TwilightProvider renders.
registerDocumentSync('my-router', lazy(() => import('./MyRouteDocumentSync')));

How it behaves

  • TwilightProvider renders routeDocumentSyncs[client.framework] when routeClass is true. The TanStack entry maps router ids to classes (ROUTE_CLASS_MAP in src/tanstack/document-class.ts) and, in the server render, also writes the current route id.

  • Entries are React.lazy components, so their code loads only when a provider mounts them.

Gotchas

  • client.framework is typed 'tanstack' | 'nextjs' and picks the navigation setup from a table that is not exported, so a framework name registered only here gets a document sync but no NavigationProvider or LinkProvider, and the engine Link throws LinkProviderError.

  • nextjs has a navigation setup but no document sync entry, so routeClass adds no page class there.

Related

TwilightProvider

The component a theme mounts once around its pages; it shares the store, theme, language and navigation with everything inside it.

DocumentClassProvider

Collects every useDocumentClass() request in its tree and applies the merged classes and attributes to the real body and html elements.

Source and docs