Configuration

The CLI infers common builds from package.json exports. Create svebcomponents.config.ts when you use export patterns, keep source outside src, or need custom output directories. The CLI uses that file in place of export inference for the package.

import { defineConfig } from "@svebcomponents/build";

export default defineConfig({
  entry: "components/ExampleComponent.svelte",
  outDir: "dist/client",
  ssr: true,
  ssrOutDir: "dist/server",
});

defineConfig returns an array of tsdown configurations. Flatten one call per component when a package publishes several components:

export default [
  ...defineConfig({ entry: "src/FavoriteNumber.svelte" }),
  ...defineConfig({
    entry: "src/ColorPicker.svelte",
    ssrEntryFileName: "ColorPicker.ssr",
  }),
];

Options

Option	Default	Effect
entry	"src/ExampleComponent.svelte"	Selects the Svelte component source.
outDir	"dist/client"	Writes the standalone browser build.
ssr	true	Generates server output.
ssrOutDir	"dist/server"	Writes the standalone server build.
ssrEntryFileName	"ssr"	Names the generated renderer. Use a unique name for each shared server output directory.
hydratable	true	Adds hydration support to browser and server builds. Requires ssr.
neverBundle	[]	Leaves matching browser dependencies for the host resolver.
svelteConfig	undefined	Supplies preprocess, extensions, and Svelte compiler options.

The @svebcomponents/build reference documents accepted neverBundle patterns and the generated tsdown configurations.

Svelte configuration

The CLI loads vite.config.* or svelte.config.* for builds inferred from package exports. A manual svebcomponents.config.ts must pass preprocess, extensions, and compilerOptions through svelteConfig when it needs them.

svebcomponents sets compilerOptions.customElement: true for browser builds. For server builds, it sets customElement: false and generate: "server". Those target settings take precedence over values from the project configuration.

Enabling compilerOptions.experimental.async puts both outputs in Svelte’s async compiler mode. Choose a host that supports async renderers. Read Async components and server data.

defineConfig() configures the component pipeline. Let package-export inference build ordinary .ts and .js module entries.

Disable hydration

Set hydratable: false to omit hydration support from the package build:

export default defineConfig({ hydratable: false });

For one component, provide your own extend value in its custom-element options. @svebcomponents/auto-options keeps that extension. Read Hydration for browser behavior and limits.

CLI fallback

The CLI runs defineConfig({ svelteConfig }) if it finds neither a config file nor a component export. It then builds src/ExampleComponent.svelte into dist/client and dist/server.