Site Theme275 Documents

One Import Per File

In sites and themes, import each platform-owned source file through its own generated alias and give that file one default export. A core file uses its camelCase filename as the alias, such as getThemeNumber. A part file prefixes its camelCase filename with the part name, such as contentsGetValues or globalizationGetGlobalization. Site-owned files receive generated file aliases. Inside a theme, use a theme-relative file alias without the theme number or structural parts segment, such as homeHome for theme05/parts/home/home.jsx. The importing theme takes priority over the site fallback. Keep explicit theme-prefixed aliases for imports outside the owning theme. Do not group several files behind a barrel, use named exports for ordinary platform code, create static leaf export files, or import platform modules through relative paths. Generate file aliases in core infrastructure. This rule governs JavaScript and TypeScript module imports; stylesheet imports follow the focused style import policies.

Philosophy

Large barrels can lower Lighthouse scores because importing one module through a barrel may pull unrelated modules into the bundle.

Correct

import getThemeNumber from 'getThemeNumber'
import contentsGetValues from 'contentsGetValues'
import globalizationGetGlobalization from 'globalizationGetGlobalization'
import HomeHome from 'homeHome'
import WideBackgroundHero from 'wideBackgroundHero'
export default props => <SiteRoot {...props} />

Incorrect

import { getThemeNumber } from 'core'
import { getValues } from 'contents'
import { Footer, Header } from 'layout'
import Header from '../parts/layout/header.jsx'
export const Header = props => <header>{props.title}</header>

Exceptions

  • Keep named exports when a framework requires them at a route boundary, such as Qwik City routeLoader$ hooks and head exports. Re-export a shared loader from the owning route layout or index when Qwik City requires registration.
  • Use the export form required by external libraries and framework APIs at their interoperability boundary.
  • Use direct relative imports in Node-loaded configuration and server modules when generated site aliases are unavailable before Vite starts.
  • Keep Qwik bootstrap imports relative when they connect root, router head, generated route head, or entry files before site aliases are available.

Fix

Give each ordinary platform module a default export, import it through its generated per-file alias, and remove grouped or handwritten barrels. Preserve named route exports required by Qwik City.