Configuration
The following is a reference of all available values for the garden.config.js
file.
If you are looking for component level configuration, checkout Component Configuration.
import { GardenConfig } from '@lwc-garden/core/types'import lwrConfig from './lwr.config.json' with { type: 'json' }
export default { // lwc.config.json modules type modules: [...lwrConfig.lwc.modules],} satisfies GardenConfig
import lwrConfig from './lwr.config.json' with { type: 'json' }
/** * @type {import('@lwc-garden/core/types').GardenConfig} */const CONFIG = { // lwr.config.json modules type modules: [...lwrConfig.lwc.modules],}
export default CONFIG
modules
type: ModuleRecord[]
Module records, usually pulled from your lwc.config.json
file.
rootDir
type: string
Define the root directory to run your project. Optional, will default to process.cwd()
(current directory).
ignore
type: string[]
Array of minimatch strings to exclude from the LWC Garden local dev server.
theme
type: GardenTheme
Configuration to adjust the theme. You may choose to bring your own theme or use one of the default themes.
Themes can be imported from:
import THEME_ROSE from '@lwc-garden/core/themes/THEME_NAME.js'
Available default themes:
green
(default)blue
orange
rose
yellow
zinc
GardenTheme
export interface GardenTheme { light?: GardenThemeProperties dark?: GardenThemeProperties}
export interface GardenThemeProperties { 'font-family'?: string 'container-background'?: string background?: string foreground?: string card?: string 'card-foreground'?: string popover?: string 'popover-foreground'?: string primary?: string 'primary-foreground'?: string secondary?: string 'secondary-foreground'?: string muted?: string 'muted-foreground'?: string accent?: string 'accent-foreground'?: string destructive?: string 'destructive-foreground'?: string border?: string input?: string ring?: string radius?: string 'dialog-background'?: string 'dialog-background-alpha'?: string}
args
type: GardenArgsConfig
Args currently only contains one property, cache
.
When enabled, arg values that are set on components will be cached to localStorage
. This is true
by default, but can be disabled by passing args.cache = false
.
GardenArgsConfig
interface GardenArgsConfig { cache?: boolean}
slots
type: GardenSlotsConfig
placeholder
When true
, will set children on <slot/>
s when found in the HTML markup of your LWCs. Mark as false
to disable.
components
Configuration object of components to use for their respective slot names. e.g.
const components = { default: () => import('example/button'), slot1: () => import('example/clock'), slot2: () => import('example/button'),}
NOTE:
default
is used to fill non-named slots.
GardenSlotsConfig
export interface GardenSlotsConfig { /** * @type {Boolean}[true] - Should slots have their children set */ placeholder?: boolean /** * Key/value object of slot names and dynamic imports to fill the slots. * @example { * default: () => import('test/button'), * slot1: () => import('test/clock'), * slot2: () => import('test/button'), * } */ components?: { [key: string]: () => Promise<any> }}
port
type: number
Port to run the local dev server on. Defaults to 3333
lwc
type: GardenLwcConfig
GardenLwcConfig
export interface GardenLwcConfig { /** * When enabled, will load SLDS * @type {Boolean}[false] - Should '@salesforce-ux/design-system' assets be loaded */ enableSlds?: boolean}