twilightReact
The Vite plugin that sets up routes, rendering, translations and the local server for a Twilight theme.
Framework: TanStack Start
This page is written for TanStack Start, the default and currently supported framework. See what depends on the framework.
Read this when you need to change how your theme is built or served. A new theme already has it set up in vite.config.ts, and salla theme dev runs through it.
Import
import { twilightReact } from '@salla.sa/twilight-theme-engine/vite';Use it
import { defineConfig } from 'vite';
import { twilightReact } from '@salla.sa/twilight-theme-engine/vite';
export default defineConfig(async () => ({
plugins: [
...(await twilightReact({
localesDir: './locales',
})),
],
}));API
function twilightReact(options?: TwilightReactOptions): Promise<PluginOption[]>;It is async and returns an array of plugins, so await it and spread the result into plugins.
| Prop | Type | Description |
|---|---|---|
framework? | "tanstack" | Routing framework. TanStack Start is the only one supported today. Default: "tanstack". |
srcDirectory? | string | Folder with your theme code. Default: "app". |
baseRoutesImport? | string | Where the engine routes are imported from. Default: "@salla.sa/twilight-theme-engine/routes". |
react? | ReactPluginOptions | PluginOption | Options for the React plugin, or your own plugin instance. |
router? | RouterOptions | PluginOption | Options for the router plugin, or your own plugin instance. |
localesDir? | string | Folder of per-language JSON files (such as locales/en.json), relative to vite.config.ts. They are bundled into the theme's translations. |
twilightJson? | string | Path to the theme manifest. In dev, its settings and components feed the dev settings widget; builds ship an empty schema. Default: "twilight.json". |
worker? | boolean | WorkerOptions | Local server runtime. true or omitted: the engine sets it up. An object: the same, with overrides. false: the engine adds nothing. Default: true. |
Notes
- It runs at build and dev time only and adds nothing to the page itself.
- Without
localesDir, your translation files are not bundled. - The engine sets up the server runtime, so your config needs no server plugin of its own.
If your vite.config.ts already registers the server runtime plugin itself, set worker: false. Registering it twice is a hard error.
Next
- Add translation keys (uses
localesDir) - Routes and pages
- Troubleshooting