원문: https://github.com/facebook/astryx/wiki/Distribution · 번역 기준: 2026-09-03

Astryx 패키지가 어떻게 구조화되고, 빌드되고, 버전 관리되고, 배포되는지를 다룹니다. 모노레포 레이아웃, consumer가 설치하는 것, 각 번들에 들어 있는 것, 그리고 dist 경계를 넘어 theming이 동작하는 방식을 다룹니다.

Packages

Astryx는 pnpm workspaces 모노레포입니다. 게시(publish)되는 패키지들(모두 Changesets fixed 그룹으로 함께 버전 관리됨)은 @astryxdesign/core, @astryxdesign/cli, @astryxdesign/build, 그리고 공개 테마들(@astryxdesign/theme-neutral, @astryxdesign/theme-butter, @astryxdesign/theme-chocolate, @astryxdesign/theme-gothic, @astryxdesign/theme-matcha, @astryxdesign/theme-stone, @astryxdesign/theme-y2k)입니다:

Package 용도 현재 버전
@astryxdesign/core 컴포넌트, hook, 유틸리티, token, CSS 0.1.1
@astryxdesign/cli CLI 툴링 (npx astryx component, npx astryx theme build 등) 0.1.1
@astryxdesign/build 공유 StyleX 빌드 플러그인 (Babel, PostCSS, Vite, Next) 0.1.1
@astryxdesign/theme-neutral 기본 테마 (core와 함께 배포) 0.1.1
@astryxdesign/theme-* 추가로 게시된 테마들 (butter, chocolate, gothic, matcha, stone, y2k) 0.1.1

게시되는 모든 패키지는 함께 버전 관리됩니다 — 한 번의 버전 bump가 전체에 적용됩니다. fixed 그룹의 동작 방식은 Release Process를 참고하세요. (@astryxdesign/lab과 @astryxdesign/vega는 private이며 게시되지 않습니다.)

Package Scopes

packages/
├── core/           → @astryxdesign/core
├── cli/            → @astryxdesign/cli
└── themes/
    ├── neutral/    → @astryxdesign/theme-neutral
    └── butter/     → @astryxdesign/theme-butter

@astryxdesign/core에 담겨 배포되는 것

@astryxdesign/core는 source와 dist를 모두 배포합니다. files 필드에는 dist/, src/, astryx.md가 포함됩니다:

dist/ — 사전 컴파일된 출력물

주된 소비 경로입니다. pnpm build(Babel + tsc + StyleX 컴파일)로 빌드됩니다. 패키지는 "type": "module"이며 — 출력물은 ESM 전용이므로 .mjs/.d.mts 쌍이 없습니다:

dist/
├── index.js          # ESM entry
├── index.d.ts        # Type declarations
├── astryx.css        # Pre-compiled StyleX → atomic CSS (@layer astryx-base)
├── astryx.umd.js     # Single-file UMD bundle for the CDN path (window.Astryx)
├── Button/
│   ├── index.js      # Per-component ESM entry
│   └── index.d.ts
├── ...               # One directory per component
└── theme/
    └── ...           # Token definitions, theme utilities

각 컴포넌트는 tree-shaking을 위한 별도의 entry point입니다:

// Barrel import (entire library)
import { Button, Card } from '@astryxdesign/core';

// Direct import (tree-shakeable)
import { Button } from '@astryxdesign/core/Button';

src/ — 소스 코드

투명성과 고급 사용 사례를 위해 배포됩니다: