Configure package outputs

svebcomponents reads package.json exports to find source entries and select build targets. Start with one browser entry:

{
  "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 path to src/FavoriteNumber.svelte. Consumers import the same 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. npm uses files to include the build output and manifest in the published package.

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

The ./svelte subpath is a type export. Svelte consumers import it to add template types. Browser consumers load the component’s default entry; SSR integrations load /ssr. Read Consumer types for the import and the React and Vue project declarations.

Add component entries

Give each public component a browser export. Match the output basename to one .svelte, .ts, or .js source 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 second export to src/ColorPicker.svelte. Read Build pipeline for source mapping and module entries.

Add server output

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. Give each renderer a distinct filename when several components share dist/server. The optional peer keeps browser-only consumers from installing the SSR runtime; apps that import /ssr install it with their host adapter. Continue with Server rendering.

Check the package

Before publishing:

1. Run pnpm build from a clean checkout.
2. Run pnpm pack --dry-run and confirm the archive contains the exported files and custom-elements.json.
3. Import each browser entry in an example app and render its custom-element tag.
4. Test each framework integration and server entry that you publish.