Configure package outputs

For most use cases, svebcomponents needs no explicit config. Instead, it reads your package.json exports to find source entries and select build targets. Let’s walk through this with the simplest case: a standalone web component users can drop into their sites.

{
  "name": "my-components",
  "version": "0.1.0",
  "type": "module",
  "files": ["dist", "custom-elements.json"],
  "customElements": "custom-elements.json",
  "scripts": {
    "build": "svebcomponents"
  },
  "exports": {
    ".": {
      "types": "./dist/client/FavoriteNumber.d.ts",
      "default": "./dist/client/FavoriteNumber.js"
    },
    "./svelte": {
      "types": "./dist/client/FavoriteNumber.svelte-types.d.ts"
    }
  },
  "devDependencies": {
    "@svebcomponents/build": "^0.6.0",
    "svelte": "^5.0.0"
  }
}

svebcomponents maps the default output path ./dist/client/FavoriteNumber.js to src/FavoriteNumber.svelte under the hood. Consumers import this entry to register the element. The standalone browser output includes the Svelte runtime, so hosts do not need Svelte as a dependency.

Editors use customElements to find the generated manifest. files is for npm to include the build output and manifest in the published package.

When you run the build:

pnpm build

svebcomponents produces this core output:

custom-elements.json
dist/
└── client/
    ├── FavoriteNumber.js
    ├── FavoriteNumber.d.ts
    └── FavoriteNumber.svelte-types.d.ts

Consumers load the component’s default entry, which resolves to dist/client/FavoriteNumber.js. This module contains the web component constructor and a side effect for registering it under the tag name. The ./svelte subpath resolves to dist/client/FavoriteNumber.svelte-types.d.ts, a type export that gives Svelte consumers template typing for their custom elements out of the box. Read framework types to set up React and Vue project declarations.

Add component entries

Give each public component a browser export. That matches the output basename of one .svelte component in src:

{
  "exports": {
    ".": {
      "types": "./dist/client/FavoriteNumber.d.ts",
      "default": "./dist/client/FavoriteNumber.js"
    },
    "./color-picker": {
      "types": "./dist/client/ColorPicker.d.ts",
      "default": "./dist/client/ColorPicker.js"
    }
  }
}

svebcomponents maps the new export to src/ColorPicker.svelte. Read Build pipeline for source mapping and module entries.

Add server-side rendering

Pair a component export with a /ssr subpath:

{
  "exports": {
    ".": {
      "types": "./dist/client/FavoriteNumber.d.ts",
      "default": "./dist/client/FavoriteNumber.js"
    },
    "./ssr": {
      "types": "./dist/server/ssr.d.ts",
      "default": "./dist/server/ssr.js"
    }
  },
  "peerDependencies": {
    "@svebcomponents/ssr": "^0.6.0"
  },
  "peerDependenciesMeta": {
    "@svebcomponents/ssr": {
      "optional": true
    }
  }
}

svebcomponents generates an ElementRenderer at the server path. Continue with Server-side rendering to use it in a host app.

Check the package

Before publishing:

Run pnpm build from a clean checkout.
Run pnpm pack --dry-run and confirm the archive contains the exported files and custom-elements.json.
Import each browser entry in an example app and render its custom-element tag.
Test server-side rendering.