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.

garden.config.ts

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

garden.config.js

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
}