Build pipeline

@svebcomponents/build configures Svelte and tsdown for each package entry. Svelte compiles component source; svebcomponents supplies attribute metadata, guards custom-element registration, emits public types, and writes a custom elements manifest.

Entry discovery

The CLI reads browser paths from package.json exports:

{
  "exports": {
    ".": {
      "types": "./dist/client/FavoriteNumber.d.ts",
      "default": "./dist/client/FavoriteNumber.js"
    },
    "./helpers": {
      "types": "./dist/client/helpers.d.ts",
      "default": "./dist/client/helpers.js"
    }
  }
}

The CLI replaces dist/client with src and finds one source with the same basename:

Browser export	Source candidate	Pipeline
./dist/client/FavoriteNumber.js	src/FavoriteNumber.svelte	Custom element
./dist/client/helpers.js	src/helpers.ts or src/helpers.js	Standard module

The CLI stops when more than one candidate matches. Export patterns such as "./*" do not provide concrete entries, so those layouts need Configuration.

Build targets

The CLI uses runtime exports to select build targets:

Package export	Output	Result
Browser default	dist/client	Standalone browser bundle
Matching /ssr default	dist/server	Generated ElementRenderer entry

A matching /ssr export makes svebcomponents compile the component for the server and generate its renderer. Svelte apps import the type-only ./svelte subpath for template declarations. Browser consumers load the component’s default entry; SSR integrations load the matching /ssr entry.

Read Configure package outputs for the export shapes.

Component compilation

The browser pipeline performs these steps for each .svelte entry:

1. @svebcomponents/auto-options derives customElement.props from $props().
2. Svelte compiles the component with compilerOptions.customElement: true.
3. svebcomponents guards Svelte’s customElements.define() call so repeated imports do not throw.
4. tsdown bundles JavaScript and writes declarations.

The browser build bundles bare package imports. Server builds keep normal Node dependency resolution. Read the @svebcomponents/build reference for dependency controls.

Element types & manifest

svebcomponents analyzes each direct .svelte entry with a literal tag. It writes:

• custom-elements.json for editors and custom-element tools
• a component declaration with the DOM element, props, attributes, and events
• a separate svelte/elements augmentation

The component declaration registers its tag in HTMLElementTagNameMap:

import "my-components";

const element = document.querySelector("favorite-number");
element?.increments; // number | undefined

The analyzer cannot name a computed tag. It does not analyze a component that a .ts entry re-exports, so export the .svelte file as the public component entry. Read Authoring components for the source patterns it supports.

Server preparation

For an SSR entry, svebcomponents checks for an adjacent .ssr.ts or .ssr.js module. The server renderer calls that preparation hook before rendering and serializes properties the hook sets for hydration.

Read Async components and server data for the hook signature and host support.

Configuration

Create svebcomponents.config.ts when export inference cannot represent your source paths or output directories. Configuration lists the options.