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

Build tooling

./vite./eslint./dev./sentry/client./sentry/server

The Vite plugin, the ESLint config, the dev settings widget and Sentry helpers.

Configuration a theme touches in its build files, not in its pages: twilightReact() in vite.config.ts, the shared ESLint rules, the development-only settings widget, and error reporting.

Entries

twilightReact

The one Vite plugin call in a theme's vite.config.ts: server rendering, a route for every storefront page, translations and build checks.

pluginBeginnerlive demo
twilightEslintConfig

A shared ESLint config that warns on engine barrel imports, deep imports into component folders, window.location and document queries.

objectBeginnerlive demo
bestPracticesPlugin

The build-time code check twilightReact() already runs: six rules print colored findings in the terminal during vite build, never failing it.

pluginBeginner
DevSettingsWidget

A development-only floating panel that lists your twilight.json settings and home-component fields with defaults, and previews edited values in vite dev.

componentBeginnerlive demo
initThemeSentry

Starts Sentry error reporting in the shopper's browser, tagged with your theme name; does nothing unless a DSN was set when the theme was built.

functionAdvanced
withThemeSentry

Wraps the server's request handler so errors during server rendering are reported to Sentry, tagged with the theme name and the store host.

functionAdvanced
REACT_THEME_TYPE & manifest helpers

Node helpers that check twilight.json declares "type": "react", the line that tells the Salla CLI this is a React theme.

functionAdvanced
DevSchema types

The simplified shape of twilight.json settings and components that virtual:twilight/schema exports and DevSettingsWidget draws.

typeAdvanced
getFrameworkAdapter, tanstack & nextjs

The adapter objects behind twilightReact(): tanstack generates route files and returns the Vite plugins; nextjs is a placeholder whose methods throw.

functionAdvanced
TwilightRoute & option types

Supporting types of /vite: one row of the generated route table, the framework names, and option shapes twilightReact() accepts but ignores.

typeAdvanced