Packaging - コンポーネントライブラリの公開

# sv create でライブラリテンプレートを選択
npx sv create my-component-library
# "Which template would you like?" で "Library" を選択

my-component-library/
├── src/
│   ├── lib/               # 公開するコンポーネント
│   │   ├── index.ts       # エントリーポイント
│   │   ├── Button.svelte
│   │   ├── Card.svelte
│   │   └── Modal.svelte
│   └── routes/            # ドキュメント/デモサイト
│       └── +page.svelte
├── package.json
├── svelte.config.js
└── tsconfig.json

# ビルド
npx svelte-package

# ウォッチモード（開発中）
npx svelte-package --watch

{
	"name": "my-component-library",
	"version": "1.0.0",
	"license": "MIT",
	"type": "module",
	"files": ["dist"],
	"svelte": "./dist/index.js",
	"types": "./dist/index.d.ts",
	"exports": {
		".": {
			"types": "./dist/index.d.ts",
			"svelte": "./dist/index.js"
		}
	},
	"sideEffects": ["**/*.css"]
}

{
	"name": "@yourorg/svelte-components"
}

{
	"license": "MIT"
}

{
	"files": ["dist", "!dist/**/*.test.*", "!dist/**/*.spec.*"]
}

{
	"exports": {
		".": {
			"types": "./dist/index.d.ts",
			"svelte": "./dist/index.js"
		}
	}
}

{
	"sideEffects": ["**/*.css"]
}

src/lib/
├── index.ts           # メインエントリー
├── Button.svelte
├── Card.svelte
└── Modal.svelte

{
	"exports": {
		".": {
			"types": "./dist/index.d.ts",
			"svelte": "./dist/index.js"
		},
		"./Button.svelte": {
			"types": "./dist/Button.svelte.d.ts",
			"svelte": "./dist/Button.svelte"
		},
		"./Card.svelte": {
			"types": "./dist/Card.svelte.d.ts",
			"svelte": "./dist/Card.svelte"
		},
		"./Modal.svelte": {
			"types": "./dist/Modal.svelte.d.ts",
			"svelte": "./dist/Modal.svelte"
		}
	}
}

<script lang="ts">
  // メインエントリーからインポート
  import { Button, Card, Modal } from 'my-component-library';

  // 個別にインポート
  import Button from 'my-component-library/Button.svelte';
</script>

{
	"exports": {
		".": {
			"types": "./dist/index.d.ts",
			"svelte": "./dist/index.js"
		},
		"./Button": {
			"types": "./dist/Button.svelte.d.ts",
			"svelte": "./dist/Button.svelte"
		}
	},
	"typesVersions": {
		">4.0": {
			"index.d.ts": ["./dist/index.d.ts"],
			"Button": ["./dist/Button.svelte.d.ts"]
		}
	}
}

// tsconfig.json
{
	"compilerOptions": {
		"declarationMap": true
	}
}

// package.json
{
	"files": ["dist", "src/lib", "!src/lib/**/*.test.*"]
}

<!-- src/lib/Button.svelte -->
<script lang="ts">
  import type { Snippet } from 'svelte';
  import type { HTMLButtonAttributes } from 'svelte/elements';

  interface Props extends HTMLButtonAttributes {
    variant?: 'primary' | 'secondary' | 'danger';
    size?: 'sm' | 'md' | 'lg';
    children: Snippet;
  }

  let {
    variant = 'primary',
    size = 'md',
    children,
    ...restProps
  }: Props = $props();
</script>

<button
  class="button {variant} {size}"
  {...restProps}
>
  {@render children()}
</button>

<style>
  .button {
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
  }

  .primary {
    background-color: #ff3e00;
    color: white;
  }

  .secondary {
    background-color: #e0e0e0;
    color: #333;
  }

  .danger {
    background-color: #dc3545;
    color: white;
  }

  .sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }

  .md {
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }

  .lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
  }
</style>

// src/lib/index.ts
export { default as Button } from './Button.svelte';
export { default as Card } from './Card.svelte';
export { default as Modal } from './Modal.svelte';

// 型も再エクスポート
export type { ButtonProps } from './Button.svelte';

// ❌ 避ける
import { browser } from '$app/environment';

// ✅ 代わりに
import { BROWSER } from 'esm-env';

<script lang="ts">
  // ❌ 避ける
  import { page } from '$app/state';

  // ✅ 代わりに props で受け取る
  let { currentUrl }: { currentUrl: URL } = $props();
</script>

// svelte.config.js
const config = {
	kit: {
		alias: {
			$components: 'src/lib/components',
		},
	},
};

export default config;

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      // "svelte" を "default" に変更 → 破壊的変更
      "svelte": "./dist/index.js"
    },
    // パスの削除 → 破壊的変更
    "./foo": { ... }
  }
}

# ビルド
npm run package

# 公開前の確認（dry-run）
npm publish --dry-run

# 公開
npm publish

# スコープ付きパッケージを公開
npm publish --access public

{
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"package": "svelte-kit sync && svelte-package",
		"prepublishOnly": "npm run package"
	}
}

src/routes
tests
*.test.ts
*.spec.ts
.svelte-kit

// ❌ 不完全
import { something } from './something';

// ✅ 完全な指定
import { something } from './something/index.js';

// ❌ .ts 拡張子
import { util } from './utils.ts';

// ✅ .js 拡張子
import { util } from './utils.js';