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

registerThemeHookSlots

functionAdvancedserverbrowserlive demo

Declares hook slot names your theme renders itself, so the Salla SDK lets marketplace apps mount content into them.

import { registerThemeHookSlots } from '@salla.sa/twilight-theme-engine/utils';

In plain words

Salla marketplace apps can add content into named places on a page, called hook slots. The SDK keeps a list of the slot names it allows and refuses any other. The engine's own slots are on that list; a slot your theme invents is not.

registerThemeHookSlots('index:start') adds your names to the list. Call it once, at the top level of a file your root route imports, never inside a component.

Signature

function registerThemeHookSlots(...names: string[]): void

Try it live

Read-only: the SDK's list of slot names apps may mount into on this page (Salla.hooks._themeSlots).Try this: type a slot name your theme renders itself, such as index:start. If it is not in the list, an app cannot mount there until you register it.
Storefront canvas · ar · RTL
Runs in the browser…
Controls
What a theme writes
// app/routes/__root.tsx: at module scope, not inside a component.
import { registerThemeHookSlots } from '@salla.sa/twilight-theme-engine/utils';

registerThemeHookSlots('index:start');

Example

app/routes/__root.tsx (excerpt)
import { createTwilightRootRoute } from '@salla.sa/twilight-theme-engine/tanstack';
import { registerThemeHookSlots } from '@salla.sa/twilight-theme-engine/utils';
import { RootComponent } from '../components/layout/RootComponent';

// Our ScopeSelector renders the index:start slot, which the SDK does not know about.
registerThemeHookSlots('index:start');

export const Route = createTwilightRootRoute()({
  shellComponent: RootComponent,
});

How it behaves

  • The names go into a module-level Set, so repeats are ignored. The engine then pushes them into the SDK's Salla.hooks._themeSlots twice: from an inline script in the root route's head, while the page is parsed and before any app snippet's onReady runs; and from AppsSnippets once the SDK is ready, retrying once on twilight::initiated if the list does not exist yet.

  • Registering is not rendering. The theme must still render the slot, for example with <HookSlot name="index:start" />, which outputs Salla's hook element for apps.

  • theme-tania registers index:start this way for its delivery-selector app.

Gotchas

  • Called inside a component, the name arrives after the head script of the page being rendered was built. Only the late browser-side push remains, and an app that mounts from its own onReady may already have been refused with [Hooks] Hook … is not allowed. Call it at module scope.

  • There is no way to unregister. On the server the Set lives as long as the process, so a name added while handling one request is in the head of every later request.

Related

HookSlot

A named empty place in the page that renders every handler registered under its name, plus a spot where Salla apps inject content.

HookName

The predefined slot names as a TypeScript enum, so a typo fails to compile instead of silently filling a slot nobody renders.

Source and docs