Complete List of Astryx Upgrade Codemods for Version Migration
The astryx upgrade command provides 42+ codemods organized by release version, from v0.0.2 through v0.3.0, that automatically migrate React component APIs, design tokens, and import paths using jscodeshift transforms.
The Astryx design system by Meta (formerly XDS) ships with a built-in CLI migration tool that eliminates manual refactoring across breaking changes. Each codemod targets a specific API shift—from prop renames to component replacements—and executes in deterministic order based on your current @astryxdesign/core version.
How the Astryx Upgrade Command Works
The upgrade system lives in packages/cli/assets/codemods/ and operates through three coordinated layers:
- Registry (
registry.mjs): Maps version ranges to codemod sets - Transforms (
transforms/<version>/*.mjs): Individual jscodeshift files - Runner (
runner.mjs): Executes transforms, handles dry-runs, and runs post-processing hooks
When you invoke npx astryx upgrade, the CLI:
- Detects installed version via
package.json - Queries the registry for applicable transforms
- Runs codemods sequentially with optional Prettier/ESLint cleanup
# Apply all codemods for your version range
npx astryx upgrade --apply
# Preview changes without writing files
npx astryx upgrade --dry-run
# Run a single specific codemod
npx astryx upgrade --codemod migrate-table-tableprops-to-direct-props --apply
# List all planned migrations
npx astryx upgrade --list
Astryx Codemods by Release Version
v0.0.2 Codemods (12 transforms)
The initial batch establishes Astryx's unified prop naming conventions:
unify-visibility-to-onOpenChange— Consolidates visibility callbacks toonOpenChangepatternunify-uncontrolled-to-defaultX— RenamesinitialXprops todefaultX(e.g.,initialOpen→defaultOpen)rename-topnav-title-to-heading—XDSTopNavTitle→XDSTopNavHeading;titleprop →headingrename-sidenav-header-to-heading—XDSSideNavHeader→XDSSideNavHeadingrename-selector-items-to-options—items→optionsonXDSSelectorrename-isShown-to-isOpen—isShown→isOpenforDialogandPopoverrename-form-tooltip-startIcon—tooltip→labelTooltip;startIcon→labelIconrename-banner-endButton-to-endContent—endButton→endContentonXDSBannermigrate-useXDSIcon-to-getIcon— Replaces hook with directgetIconcall, removesIconRegistryContextmigrate-isFullBleed-to-padding—isFullBleed→padding={0}migrate-gap-to-numeric— Convertsgap/rowGap/columnGaptoken strings to numeric valuesmigrate-badge-dot-to-statusdot— Badgedotmode → standaloneStatusDotcomponent
Source: packages/cli/assets/codemods/transforms/v0.0.2/
v0.0.6 Codemods (6 transforms)
Design token system overhaul:
migrate-token-names— Updates renamed design-token identifiersmigrate-skeleton-radius— MovesSkeletonradius to numeric scalemigrate-shadow-tokens— Elevation tokens → semantic shadow namingmigrate-radius-tokens— Semantic radius → numeric scalemigrate-collapse-to-collapsible—collapseprops →collapsiblemigrate-badge-children-to-label—<Badge>text</Badge>→<Badge label="text" />
v0.0.7 Codemods
rename-banner-variant-to-container—XDSBannervariant→container
v0.0.8 Codemods (2 transforms)
rename-endslot-to-endcontent—XDSButtonendSlot→endContentmigrate-token-renames— Final v0.0.8 token name conventions
v0.0.10 Codemods
remove-size-props— StripssizefromXDSStatusDotandXDSProgressBar
v0.0.12 Codemods
add-is-icon-only— MigratesiconOnlybuttons toXDSIconButtoncomponent
v0.0.13 Codemods (3 transforms)
toolbar-density-to-size—Toolbardensity→sizerename-attachments-to-drawer—XDSChatComposerAttachments→XDSChatComposerDrawericon-name-deprecations— Updates deprecated icon identifiers
v0.0.14 Codemods (3 transforms)
React 19 preparation and semantic naming:
rename-action-props—on*Action→*Actionconventionrename-status-variants—positive/negative→success/errorrename-section-wash-to-muted—washvariant →muted
v0.0.15 Codemods (7 transforms)
Major API simplification release:
rename-stack-element-to-as—elementprop →asrename-isStreaming-to-isStopShown— Chat component prop renamerename-imperative-ref-to-handleRef— Ref prop standardizationrename-date-picker-to-input—DatePicker→DateInput;DateRangePicker→DateRangeInputmigrate-theme-selectors-to-data-attrs— CSS selectors →data-*attributesmigrate-selector-children-to-render-option— Children API →renderOptionpropmigrate-item-children-to-endcontent— Generic item children →endContentslot
v0.1.0 Codemods (4 transforms)
XDS-to-Astryx rebrand — mandatory for package migration:
migrate-xds-module-specifiers—@xds/*→@astryxdesign/*importsmigrate-xds-declare-module— Updates TypeScript module augmentationsmigrate-xds-css-surfaces— CSS surface definitions to Astryx equivalentsdrop-xds-prefix-imports(mandatory) — RemovesXDSprefix from all components
v0.1.2 Codemods
rename-text-color-active-to-accent—color="active"→color="accent"
v0.1.3 Codemods
migrate-layout-components-to-experimental—layout.components→experimental.xle.components
v0.1.5 Codemods
rename-switch-label-spacing-default-to-hug—labelSpacing="default"→"hug"
v0.1.7 Codemods (2 transforms)
rename-table-renderprops-styles-to-xstyle—styles→xstylein render propsmigrate-table-tableprops-to-direct-props— LiftstablePropsobject into direct props
v0.1.8 Codemods
rename-avatar-size-scale— Avatar sizes to abbreviated scale (xsm,sm,md,lg,xlg,xxlg)
v0.2.0 Codemods
remove-tablist-orientation— Removes no-oporientationprop fromTabList
v0.2.1 Codemods
migrate-dialog-position-to-logical—position="left/right"→start/end
v0.3.0 Codemods (4 transforms)
Authoring system cleanup:
unwrap-authoring-factories— Removescreate*authoring factoriesrename-radiogroup-arialabel-to-label—aria-label→labelonRadioGrouprename-authoring-doctypes— Doc field types to domain-prefixed namesmigrate-authoring-imports— Re-points to@astryxdesign/cli/authoring
Running Astryx Upgrade in CI
For automated version migration in continuous integration, use the JSON output mode:
- name: Upgrade Astryx
run: |
npx astryx upgrade \
--from ${{ steps.detect.outputs.current }} \
--to ${{ steps.detect.outputs.latest }} \
--apply \
--json > upgrade-report.json
The --json flag produces a structured receipt with upgrade.run, upgrade.status, and upgrade.list fields for downstream parsing.
Key Implementation Files
| File Path | Purpose |
|---|---|
packages/cli/assets/codemods/registry.mjs |
Version-to-codemod mapping manifest |
packages/cli/assets/codemods/transforms/*/*.mjs |
Individual jscodeshift implementations |
packages/cli/clients/cli/commands/upgrade.mjs |
CLI command definition and option parsing |
packages/cli/assets/codemods/runner.mjs |
Core execution engine |
packages/cli/api/upgrade/*/*.mjs |
Programmatic API (upgrade.run, upgrade.list, upgrade.status) |
packages/cli/CHANGELOG.md |
Per-release codemod documentation |
Summary
- 42+ codemods ship with Astryx, spanning v0.0.2 through v0.3.0
- jscodeshift-powered transforms handle React component, prop, and import migrations
--apply,--dry-run,--codemod <name>flags control execution scope- Registry-driven system automatically selects transforms based on detected version
- CI-ready with
--jsonstructured output for automation pipelines
Frequently Asked Questions
How do I run only specific Astryx codemods instead of the full upgrade?
Use the --codemod flag with the transform name: npx astryx upgrade --codemod migrate-table-tableprops-to-direct-props --apply. This bypasses version detection and executes only that transform.
Can I preview what changes a codemod will make before applying?
Yes. Run npx astryx upgrade --dry-run to see a diff preview of all pending migrations, or combine with --codemod to preview a single transform. No files are modified in dry-run mode.
What happens if a codemod fails partway through an upgrade?
The runner in packages/cli/assets/codemods/runner.mjs processes codemods sequentially with isolated error boundaries. Failed transforms are reported in the output, but subsequent codemods continue executing unless --bail is specified.
Where are the codemod source files located in the repository?
All transforms live under packages/cli/assets/codemods/transforms/<version>/ as individual .mjs files. The registry at packages/cli/assets/codemods/registry.mjs maps version ranges to these files for automatic selection.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" Maintain an open-source project? Get it listed too →