@astryxdesign/cli 0.1.2-canary.eb7243a → 0.1.2-canary.f03e2cc
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -0
- package/README.md +55 -49
- package/package.json +7 -7
- package/src/api/doctor.mjs +3 -3
- package/src/codemods/transforms/v0.1.0/__tests__/v0.1.0-ordering.test.mjs +0 -23
- package/src/codemods/transforms/v0.1.0/index.mjs +0 -28
- package/src/commands/agent-docs.mjs +1 -1
- package/templates/blocks/components/DropdownMenu/DropdownMenuShowcase.tsx +1 -0
- package/templates/blocks/components/DropdownMenuItem/DropdownMenuItemShowcase.tsx +1 -0
- package/templates/blocks/components/MoreMenu/MoreMenuShowcase.tsx +1 -0
- package/templates/pages/shell-side-nav/page.tsx +1 -0
- package/src/codemods/transforms/v0.1.0/__tests__/migrate-xds-css-surfaces.test.mjs +0 -67
- package/src/codemods/transforms/v0.1.0/__tests__/migrate-xds-declare-module.test.mjs +0 -61
- package/src/codemods/transforms/v0.1.0/migrate-xds-css-surfaces.mjs +0 -77
- package/src/codemods/transforms/v0.1.0/migrate-xds-declare-module.mjs +0 -78
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -62,7 +62,8 @@ Options:
|
|
|
62
62
|
| `upgrade` | Run codemods to migrate between versions |
|
|
63
63
|
| `theme build` | Compile a defineTheme file to production CSS and JS |
|
|
64
64
|
| `discover` | Discover external packages and components |
|
|
65
|
-
| `
|
|
65
|
+
| `gap-report` | Report a gap when a component doesn't meet your needs |
|
|
66
|
+
| `doctor` | Diagnose your XDS setup and report problems with fixes (CI-friendly via exit code) |
|
|
66
67
|
|
|
67
68
|
### Global options
|
|
68
69
|
|
|
@@ -160,6 +161,7 @@ if (isError(result)) {
|
|
|
160
161
|
| `ERR_INVALID_VERSION` | A `--from`/`--to` value was not a valid semver string. |
|
|
161
162
|
| `ERR_DEP_MISSING` | A required external dependency (e.g. jscodeshift) is missing. |
|
|
162
163
|
| `ERR_GH_CLI` | GitHub CLI (`gh`) is not installed or not authenticated. |
|
|
164
|
+
| `ERR_GAP_REPORT_FAILED` | Filing a gap report failed (disabled, or the integration errored). |
|
|
163
165
|
|
|
164
166
|
## Capability manifest (agent discovery)
|
|
165
167
|
|
|
@@ -170,7 +172,7 @@ discriminators each command can emit. Think of it as an OpenAPI spec for the CLI
|
|
|
170
172
|
|
|
171
173
|
```bash
|
|
172
174
|
astryx manifest --json # dedicated surface — type: "manifest"
|
|
173
|
-
|
|
175
|
+
xds --json # bare invocation — embeds the same payload under data.manifest
|
|
174
176
|
```
|
|
175
177
|
|
|
176
178
|
Shape:
|
|
@@ -180,7 +182,7 @@ Shape:
|
|
|
180
182
|
"apiVersion": 1,
|
|
181
183
|
"type": "manifest",
|
|
182
184
|
"data": {
|
|
183
|
-
"name": "
|
|
185
|
+
"name": "xds",
|
|
184
186
|
"version": "0.0.14",
|
|
185
187
|
"description": "Design system CLI — components, themes, and tooling",
|
|
186
188
|
"globalOptions": [
|
|
@@ -247,14 +249,14 @@ the `JSON_SUPPORTED` allowlist and a small declarative `RESPONSE_TYPES` map in
|
|
|
247
249
|
`src/lib/manifest.mjs`, guarded by a drift test (`manifest.test.mjs`) so adding a
|
|
248
250
|
command without describing it fails CI.
|
|
249
251
|
|
|
250
|
-
**Backwards-compat:** the bare `
|
|
252
|
+
**Backwards-compat:** the bare `xds --json` envelope keeps `type: "help"` and its
|
|
251
253
|
original shallow fields (`name`, `version`, `commands` as a `string[]` of names,
|
|
252
254
|
`jsonSupported`); the full structured manifest is additive under `data.manifest`.
|
|
253
255
|
For the standalone manifest envelope (`type: "manifest"`), use `astryx manifest --json`.
|
|
254
256
|
|
|
255
257
|
## Programmatic API
|
|
256
258
|
|
|
257
|
-
The same logic that powers `
|
|
259
|
+
The same logic that powers `xds --json` is available as importable, type-safe functions:
|
|
258
260
|
|
|
259
261
|
```typescript
|
|
260
262
|
import {
|
|
@@ -267,20 +269,20 @@ import {
|
|
|
267
269
|
AstryxError,
|
|
268
270
|
} from '@astryxdesign/cli/api';
|
|
269
271
|
|
|
270
|
-
// Same result as:
|
|
272
|
+
// Same result as: xds --json component Button
|
|
271
273
|
const btn = await component('Button');
|
|
272
274
|
btn.type; // 'component.detail'
|
|
273
275
|
btn.data.name; // 'Button' (typed as ComponentDoc)
|
|
274
276
|
|
|
275
|
-
// Same result as:
|
|
277
|
+
// Same result as: xds --json component --list
|
|
276
278
|
const list = await component(undefined, {list: true});
|
|
277
279
|
list.data; // Record<string, string[]>
|
|
278
280
|
|
|
279
|
-
// Same result as:
|
|
281
|
+
// Same result as: xds --json docs principles
|
|
280
282
|
const principles = await docs('principles');
|
|
281
|
-
principles.data.title; // 'Principles'
|
|
283
|
+
principles.data.title; // 'XDS Principles'
|
|
282
284
|
|
|
283
|
-
// Same result as:
|
|
285
|
+
// Same result as: xds --json hook useMediaQuery
|
|
284
286
|
const useMediaQuery = await hook('useMediaQuery');
|
|
285
287
|
useMediaQuery.data.params; // typed as HookParamDoc[]
|
|
286
288
|
|
|
@@ -294,7 +296,7 @@ try {
|
|
|
294
296
|
}
|
|
295
297
|
```
|
|
296
298
|
|
|
297
|
-
The CLI command handlers are thin wrappers around these functions: they parse args, call the API, then format the output (JSON or text). This guarantees that `@astryxdesign/cli/api` and `
|
|
299
|
+
The CLI command handlers are thin wrappers around these functions: they parse args, call the API, then format the output (JSON or text). This guarantees that `@astryxdesign/cli/api` and `xds --json` always return identical data.
|
|
298
300
|
|
|
299
301
|
### Consumer utilities
|
|
300
302
|
|
|
@@ -324,41 +326,43 @@ detail.data.name; // already narrowed
|
|
|
324
326
|
|
|
325
327
|
Every response has a `type` string that uniquely identifies it:
|
|
326
328
|
|
|
327
|
-
| Command
|
|
328
|
-
|
|
|
329
|
-
| `
|
|
330
|
-
| `
|
|
331
|
-
| `
|
|
332
|
-
| `
|
|
333
|
-
| `
|
|
334
|
-
| `
|
|
335
|
-
| `
|
|
336
|
-
| `
|
|
337
|
-
| `
|
|
338
|
-
| `
|
|
339
|
-
| `
|
|
340
|
-
| `
|
|
341
|
-
| `
|
|
342
|
-
| `
|
|
343
|
-
| `
|
|
344
|
-
| `
|
|
345
|
-
| `
|
|
346
|
-
| `
|
|
347
|
-
| `
|
|
348
|
-
| `
|
|
349
|
-
| `
|
|
350
|
-
| `
|
|
351
|
-
| `
|
|
352
|
-
| `
|
|
353
|
-
| `
|
|
354
|
-
| `
|
|
355
|
-
| `
|
|
356
|
-
| `
|
|
357
|
-
| `
|
|
358
|
-
| `
|
|
359
|
-
| `
|
|
360
|
-
|
|
|
361
|
-
|
|
|
329
|
+
| Command | Type | Response |
|
|
330
|
+
| ---------------------------------------------- | --------------------------- | --------------------------------- |
|
|
331
|
+
| `xds --json component [--list]` | `component.list` | `ComponentListResponse` |
|
|
332
|
+
| `xds --json component --list --detail compact` | `component.brief` | `ComponentBriefResponse` |
|
|
333
|
+
| `xds --json component --list --detail full` | `component.full` | `ComponentFullResponse` |
|
|
334
|
+
| `xds --json component <name>` | `component.detail` | `ComponentDetailResponse` |
|
|
335
|
+
| `xds --json component <name> --props` | `component.detail.props` | `ComponentDetailPropsResponse` |
|
|
336
|
+
| `xds --json component <name> --source` | `component.detail.source` | `ComponentDetailSourceResponse` |
|
|
337
|
+
| `xds --json component <name> --showcase` | `component.detail.showcase` | `ComponentDetailShowcaseResponse` |
|
|
338
|
+
| `xds --json component <name> --blocks` | `component.detail.blocks` | `ComponentDetailBlocksResponse` |
|
|
339
|
+
| `xds --json discover` | `discover.list` | `DiscoverListResponse` |
|
|
340
|
+
| `xds --json discover @scope/name` | `discover.detail` | `DiscoverDetailResponse` |
|
|
341
|
+
| `xds --json discover @scope/name/Comp` | `discover.detail.doc` | `DiscoverDetailDocResponse` |
|
|
342
|
+
| `xds --json discover <search>` | `discover.search` | `DiscoverSearchResponse` |
|
|
343
|
+
| `xds --json docs` | `docs.list` | `DocsListResponse` |
|
|
344
|
+
| `xds --json docs <topic>` | `docs.detail` | `DocsDetailResponse` |
|
|
345
|
+
| `xds --json docs <topic> <section>` | `docs.detail.section` | `DocsDetailSectionResponse` |
|
|
346
|
+
| `xds --json template [--list]` | `template.list` | `TemplateListResponse` |
|
|
347
|
+
| `xds --json template <name>` | `template.show` | `TemplateShowResponse` |
|
|
348
|
+
| `xds --json template <name> --skeleton` | `template.skeleton` | `TemplateSkeletonResponse` |
|
|
349
|
+
| `xds --json template <name> [path]` | `template.copy` | `TemplateCopyResponse` |
|
|
350
|
+
| `xds --json hook [--list]` | `hook.list` | `HookListResponse` |
|
|
351
|
+
| `xds --json hook --list --detail compact` | `hook.brief` | `HookBriefResponse` |
|
|
352
|
+
| `xds --json hook --list --detail full` | `hook.full` | `HookFullResponse` |
|
|
353
|
+
| `xds --json hook <name>` | `hook.detail` | `HookDetailResponse` |
|
|
354
|
+
| `xds --json hook <name> --params` | `hook.detail.params` | `HookDetailParamsResponse` |
|
|
355
|
+
| `xds --json search <query>` | `search` | `SearchResponse` |
|
|
356
|
+
| `xds --json swizzle [--list]` | `swizzle.list` | `SwizzleListResponse` |
|
|
357
|
+
| `xds --json swizzle <component>` | `swizzle.copy` | `SwizzleCopyResponse` |
|
|
358
|
+
| `xds --json theme build <file>` | `theme.build` | `ThemeBuildResponse` |
|
|
359
|
+
| `xds --json upgrade --list` | `upgrade.list` | `UpgradeListResponse` |
|
|
360
|
+
| `xds --json upgrade [--apply]` | `upgrade.run` | `UpgradeRunResponse` |
|
|
361
|
+
| `xds --json gap-report --list-categories` | `gap-report.categories` | `GapReportCategoriesResponse` |
|
|
362
|
+
| `xds --json gap-report --component X ...` | `gap-report.file` | `GapReportFileResponse` |
|
|
363
|
+
| `xds --json doctor` | `doctor` | `DoctorResponse` |
|
|
364
|
+
| any error | — | `CLIError` |
|
|
365
|
+
| unsupported command | — | `CLIUnsupportedError` |
|
|
362
366
|
|
|
363
367
|
## Doctor
|
|
364
368
|
|
|
@@ -379,7 +383,7 @@ astryx doctor — diagnosing your setup
|
|
|
379
383
|
@astryxdesign/core v0.0.14 is in step with @astryxdesign/cli v0.0.14.
|
|
380
384
|
⚠ Theme packages
|
|
381
385
|
No @astryxdesign/theme-* packages are installed.
|
|
382
|
-
→ fix: Install a theme, e.g. `npm install @astryxdesign/theme-neutral`, then import its CSS or set
|
|
386
|
+
→ fix: Install a theme, e.g. `npm install @astryxdesign/theme-neutral`, then import its CSS or set xds.theme.
|
|
383
387
|
ℹ astryx.config.mjs
|
|
384
388
|
No astryx.config.mjs found — using defaults.
|
|
385
389
|
ℹ AI agent docs
|
|
@@ -404,7 +408,7 @@ No failures — but review the ⚠ warnings above when you can.
|
|
|
404
408
|
| Version alignment | pass / warn / info | Installed `@astryxdesign/core` is in step with `@astryxdesign/cli` |
|
|
405
409
|
| Theme packages | pass / warn | An `@astryxdesign/theme-*` package is installed and a theme is wired |
|
|
406
410
|
| astryx.config.mjs | pass / fail / info | Config (if present) loads cleanly with a valid shape |
|
|
407
|
-
| AI agent docs | pass / warn / info | Agent docs exist and contain the
|
|
411
|
+
| AI agent docs | pass / warn / info | Agent docs exist and contain the XDS section markers |
|
|
408
412
|
| Peer dependencies | pass / warn / info | `@astryxdesign/core`'s peer deps (react, …) are installed |
|
|
409
413
|
| Package manager | info | Reports the detected package manager |
|
|
410
414
|
|
|
@@ -430,6 +434,8 @@ export default {
|
|
|
430
434
|
templates: {
|
|
431
435
|
get: async id => fetchTemplateFromAPI(id),
|
|
432
436
|
},
|
|
433
|
-
|
|
437
|
+
gapReport: {
|
|
438
|
+
url: 'https://your-api.com/gaps',
|
|
439
|
+
},
|
|
434
440
|
};
|
|
435
441
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/cli",
|
|
3
|
-
"version": "0.1.2-canary.
|
|
3
|
+
"version": "0.1.2-canary.f03e2cc",
|
|
4
4
|
"displayName": "CLI",
|
|
5
5
|
"description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -75,9 +75,9 @@
|
|
|
75
75
|
"zod": "^4.4.3"
|
|
76
76
|
},
|
|
77
77
|
"peerDependencies": {
|
|
78
|
-
"@astryxdesign/core": "0.1.2-canary.
|
|
79
|
-
"@astryxdesign/lab": "0.1.2-canary.
|
|
80
|
-
"@astryxdesign/theme-neutral": "0.1.2-canary.
|
|
78
|
+
"@astryxdesign/core": "0.1.2-canary.f03e2cc",
|
|
79
|
+
"@astryxdesign/lab": "0.1.2-canary.f03e2cc",
|
|
80
|
+
"@astryxdesign/theme-neutral": "0.1.2-canary.f03e2cc",
|
|
81
81
|
"gpt-tokenizer": "^2.0.0"
|
|
82
82
|
},
|
|
83
83
|
"peerDependenciesMeta": {
|
|
@@ -92,9 +92,9 @@
|
|
|
92
92
|
}
|
|
93
93
|
},
|
|
94
94
|
"devDependencies": {
|
|
95
|
-
"@astryxdesign/core": "0.1.2-canary.
|
|
96
|
-
"@astryxdesign/lab": "0.1.2-canary.
|
|
97
|
-
"@astryxdesign/theme-neutral": "0.1.2-canary.
|
|
95
|
+
"@astryxdesign/core": "0.1.2-canary.f03e2cc",
|
|
96
|
+
"@astryxdesign/lab": "0.1.2-canary.f03e2cc",
|
|
97
|
+
"@astryxdesign/theme-neutral": "0.1.2-canary.f03e2cc",
|
|
98
98
|
"gpt-tokenizer": "^2.0.0"
|
|
99
99
|
},
|
|
100
100
|
"scripts": {
|
package/src/api/doctor.mjs
CHANGED
|
@@ -240,7 +240,7 @@ export function checkThemes(ctx) {
|
|
|
240
240
|
label: 'Theme packages',
|
|
241
241
|
status: 'warn',
|
|
242
242
|
message: 'No @astryxdesign/theme-* packages are installed.',
|
|
243
|
-
fix: 'Install a theme, e.g. `npm install @astryxdesign/theme-neutral`, then import its CSS or set
|
|
243
|
+
fix: 'Install a theme, e.g. `npm install @astryxdesign/theme-neutral`, then import its CSS or set xds.theme.',
|
|
244
244
|
};
|
|
245
245
|
}
|
|
246
246
|
|
|
@@ -354,7 +354,7 @@ export function checkAgentDocs(ctx) {
|
|
|
354
354
|
label: 'AI agent docs',
|
|
355
355
|
status: 'warn',
|
|
356
356
|
message: `Agent docs present (${present.join(', ')}) but no Astryx section markers found.`,
|
|
357
|
-
fix: 'Add the
|
|
357
|
+
fix: 'Add the XDS section to your agent docs with `astryx init --features agents`.',
|
|
358
358
|
};
|
|
359
359
|
}
|
|
360
360
|
|
|
@@ -362,7 +362,7 @@ export function checkAgentDocs(ctx) {
|
|
|
362
362
|
id: 'agent-docs',
|
|
363
363
|
label: 'AI agent docs',
|
|
364
364
|
status: 'pass',
|
|
365
|
-
message: `
|
|
365
|
+
message: `XDS agent docs section present in ${withMarkers.join(', ')}.`,
|
|
366
366
|
};
|
|
367
367
|
}
|
|
368
368
|
|
|
@@ -41,29 +41,6 @@ describe('v0.1.0 codemod manifest ordering', () => {
|
|
|
41
41
|
expect(entry.optional).toBeFalsy();
|
|
42
42
|
});
|
|
43
43
|
|
|
44
|
-
it('orders declare-module and CSS codemods after migrate-xds-module-specifiers', async () => {
|
|
45
|
-
const {default: manifest} = await import('../index.mjs');
|
|
46
|
-
const names = manifest.map(entry => entry.name);
|
|
47
|
-
expect(names).toEqual([
|
|
48
|
-
'drop-xds-prefix-imports',
|
|
49
|
-
'migrate-xds-module-specifiers',
|
|
50
|
-
'migrate-xds-declare-module',
|
|
51
|
-
'migrate-xds-css-surfaces',
|
|
52
|
-
]);
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
it('marks migrate-xds-declare-module and migrate-xds-css-surfaces mandatory', async () => {
|
|
56
|
-
const {default: manifest} = await import('../index.mjs');
|
|
57
|
-
for (const name of [
|
|
58
|
-
'migrate-xds-declare-module',
|
|
59
|
-
'migrate-xds-css-surfaces',
|
|
60
|
-
]) {
|
|
61
|
-
const entry = manifest.find(e => e.name === name);
|
|
62
|
-
expect(entry, name).toBeDefined();
|
|
63
|
-
expect(entry.optional).toBeFalsy();
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
|
|
67
44
|
it('un-prefixes useXDSTheme from @xds/core/theme AND renames the scope to @astryxdesign', async () => {
|
|
68
45
|
const input = [
|
|
69
46
|
"import {useXDSTheme} from '@xds/core/theme';",
|
|
@@ -14,14 +14,6 @@ import migrateXdsModuleSpecifiers, {
|
|
|
14
14
|
meta as migrateXdsModuleSpecifiersMeta,
|
|
15
15
|
} from './migrate-xds-module-specifiers.mjs';
|
|
16
16
|
|
|
17
|
-
import migrateXdsDeclareModule, {
|
|
18
|
-
meta as migrateXdsDeclareModuleMeta,
|
|
19
|
-
} from './migrate-xds-declare-module.mjs';
|
|
20
|
-
|
|
21
|
-
import migrateXdsCssSurfaces, {
|
|
22
|
-
meta as migrateXdsCssSurfacesMeta,
|
|
23
|
-
} from './migrate-xds-css-surfaces.mjs';
|
|
24
|
-
|
|
25
17
|
export default [
|
|
26
18
|
{
|
|
27
19
|
// XDS-prefix migration (P2380608025). Mandatory in v0.1.0: the release
|
|
@@ -42,24 +34,4 @@ export default [
|
|
|
42
34
|
transform: migrateXdsModuleSpecifiers,
|
|
43
35
|
meta: migrateXdsModuleSpecifiersMeta,
|
|
44
36
|
},
|
|
45
|
-
{
|
|
46
|
-
// Cleans up TypeScript `declare module "@xds/core/..."` augmentations,
|
|
47
|
-
// which reference the package by string specifier and so are dead after
|
|
48
|
-
// the scope rename. Mandatory in v0.1.0. Ordered AFTER the specifier
|
|
49
|
-
// codemod: it uses the same @xds -> @astryxdesign mapping and repairs an
|
|
50
|
-
// adjacent surface the specifier codemod does not visit (module-decl ids
|
|
51
|
-
// are not import/export/require sources).
|
|
52
|
-
name: 'migrate-xds-declare-module',
|
|
53
|
-
transform: migrateXdsDeclareModule,
|
|
54
|
-
meta: migrateXdsDeclareModuleMeta,
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
// Rewrites consumer CSS surfaces broken by the v0.1.0 DOM-namespace rename
|
|
58
|
-
// (core no longer dual-emits `xds-*`): the `.xds-*` class-selector prefix,
|
|
59
|
-
// `[data-xds-*]` attribute selectors, and `@layer xds-*` layer names all
|
|
60
|
-
// become their `astryx-*` forms. Mandatory in v0.1.0.
|
|
61
|
-
name: 'migrate-xds-css-surfaces',
|
|
62
|
-
transform: migrateXdsCssSurfaces,
|
|
63
|
-
meta: migrateXdsCssSurfacesMeta,
|
|
64
|
-
},
|
|
65
37
|
];
|
|
@@ -207,7 +207,7 @@ export function generateCompressedIndex(version, {coreDir, runPrefix = getRunPre
|
|
|
207
207
|
.sort();
|
|
208
208
|
if (topics.length > 0) lines.push(` docs <topic> ${topics.join(', ')}`);
|
|
209
209
|
}
|
|
210
|
-
lines.push(' swizzle <Name> eject component source
|
|
210
|
+
lines.push(' swizzle <Name> eject component source (--gap reports why)');
|
|
211
211
|
lines.push(' upgrade --apply run after any @astryxdesign/core bump');
|
|
212
212
|
lines.push(MARKER_END);
|
|
213
213
|
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
-
|
|
3
|
-
import {describe, it, expect} from 'vitest';
|
|
4
|
-
|
|
5
|
-
async function applyTransform(source, filePath = 'test.css') {
|
|
6
|
-
const {default: transform} = await import('../migrate-xds-css-surfaces.mjs');
|
|
7
|
-
// api.jscodeshift is unused by this CSS codemod, but the runner still
|
|
8
|
-
// passes it — mirror that shape.
|
|
9
|
-
const jscodeshift = (await import('jscodeshift')).default;
|
|
10
|
-
const api = {jscodeshift, stats: () => {}, report: () => {}};
|
|
11
|
-
const file = {source, path: filePath};
|
|
12
|
-
const result = transform(file, api);
|
|
13
|
-
return result ?? source;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
describe('migrate-xds-css-surfaces', () => {
|
|
17
|
-
it('rewrites the .xds- class-selector prefix', async () => {
|
|
18
|
-
const input = '.xds-heading { color: red; }';
|
|
19
|
-
const output = await applyTransform(input);
|
|
20
|
-
expect(output).toBe('.astryx-heading { color: red; }');
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
it('rewrites the [data-xds-theme] attribute selector', async () => {
|
|
24
|
-
const input = '[data-xds-theme="dark"] .xds-card { background: black; }';
|
|
25
|
-
const output = await applyTransform(input);
|
|
26
|
-
expect(output).toContain('[data-astryx-theme="dark"]');
|
|
27
|
-
expect(output).toContain('.astryx-card');
|
|
28
|
-
expect(output).not.toContain('xds-');
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
it('rewrites data-xds-theme-prose and data-xds-media attribute selectors', async () => {
|
|
32
|
-
const input =
|
|
33
|
-
'[data-xds-theme-prose] {} [data-xds-media="print"] {}';
|
|
34
|
-
const output = await applyTransform(input);
|
|
35
|
-
expect(output).toContain('[data-astryx-theme-prose]');
|
|
36
|
-
expect(output).toContain('[data-astryx-media="print"]');
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
it('rewrites @layer xds-theme and @layer xds-base', async () => {
|
|
40
|
-
const input = '@layer xds-theme, xds-base;\n@layer xds-theme { a { color: red; } }';
|
|
41
|
-
const output = await applyTransform(input);
|
|
42
|
-
expect(output).toContain('astryx-theme');
|
|
43
|
-
expect(output).toContain('astryx-base');
|
|
44
|
-
expect(output).not.toContain('xds-theme');
|
|
45
|
-
expect(output).not.toContain('xds-base');
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
it('does NOT rewrite a bare "xds" in a comment or value', async () => {
|
|
49
|
-
const input = '/* xds tokens live here */\n.card { content: "xds"; }';
|
|
50
|
-
const output = await applyTransform(input);
|
|
51
|
-
expect(output).toBe(input);
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
it('does NOT rewrite a class-like word missing the leading dot', async () => {
|
|
55
|
-
// e.g. inside a JS-ish string or a comment fragment — not a class selector.
|
|
56
|
-
const input = '/* use xds-heading in markup */';
|
|
57
|
-
const output = await applyTransform(input);
|
|
58
|
-
expect(output).toBe(input);
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
it('leaves already-migrated CSS unchanged', async () => {
|
|
62
|
-
const input =
|
|
63
|
-
'@layer astryx-theme { [data-astryx-theme="dark"] .astryx-card {} }';
|
|
64
|
-
const output = await applyTransform(input);
|
|
65
|
-
expect(output).toBe(input);
|
|
66
|
-
});
|
|
67
|
-
});
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
-
|
|
3
|
-
import {describe, it, expect} from 'vitest';
|
|
4
|
-
|
|
5
|
-
async function applyTransform(source, filePath = 'test.d.ts') {
|
|
6
|
-
const {default: transform} = await import('../migrate-xds-declare-module.mjs');
|
|
7
|
-
const jscodeshift = (await import('jscodeshift')).default;
|
|
8
|
-
const j = jscodeshift.withParser('tsx');
|
|
9
|
-
const api = {jscodeshift: j, stats: () => {}, report: () => {}};
|
|
10
|
-
const file = {source, path: filePath};
|
|
11
|
-
const result = transform(file, api);
|
|
12
|
-
return result ?? source;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
describe('migrate-xds-declare-module', () => {
|
|
16
|
-
it('renames a subpath declare module', async () => {
|
|
17
|
-
const input = [
|
|
18
|
-
"declare module '@xds/core/Heading' {",
|
|
19
|
-
' export const HeadingLevelMap: Record<string, number>;',
|
|
20
|
-
'}',
|
|
21
|
-
].join('\n');
|
|
22
|
-
|
|
23
|
-
const output = await applyTransform(input);
|
|
24
|
-
expect(output).toMatch(/declare module ['"]@astryxdesign\/core\/Heading['"]/);
|
|
25
|
-
expect(output).not.toContain('@xds/core');
|
|
26
|
-
// The augmentation body identifier is untouched.
|
|
27
|
-
expect(output).toContain('HeadingLevelMap');
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
it('renames a bare @xds/core declare module', async () => {
|
|
31
|
-
const input = "declare module '@xds/core' {\n const x: number;\n}";
|
|
32
|
-
const output = await applyTransform(input);
|
|
33
|
-
expect(output).toMatch(/declare module ['"]@astryxdesign\/core['"]/);
|
|
34
|
-
expect(output).not.toContain('@xds/core');
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
it('renames @xds/lab declare module using the shared map', async () => {
|
|
38
|
-
const input = "declare module '@xds/lab/Thing' {\n const y: number;\n}";
|
|
39
|
-
const output = await applyTransform(input);
|
|
40
|
-
expect(output).toMatch(/declare module ['"]@astryxdesign\/lab\/Thing['"]/);
|
|
41
|
-
expect(output).not.toContain('@xds/lab');
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
it('leaves non-xds declare modules alone', async () => {
|
|
45
|
-
const input = "declare module 'react' {\n const z: number;\n}";
|
|
46
|
-
const output = await applyTransform(input);
|
|
47
|
-
expect(output).toBe(input);
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
it('leaves an already-migrated declare module unchanged', async () => {
|
|
51
|
-
const input = "declare module '@astryxdesign/core/Heading' {\n const a: number;\n}";
|
|
52
|
-
const output = await applyTransform(input);
|
|
53
|
-
expect(output).toBe(input);
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
it('does not touch namespace declarations (Identifier id)', async () => {
|
|
57
|
-
const input = 'declare namespace XDSCore {\n const b: number;\n}';
|
|
58
|
-
const output = await applyTransform(input, 'test.ts');
|
|
59
|
-
expect(output).toBe(input);
|
|
60
|
-
});
|
|
61
|
-
});
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* @file Codemod: migrate XDS CSS surfaces to their Astryx equivalents
|
|
5
|
-
*
|
|
6
|
-
* The v0.1.0 release renamed the DOM namespace emitted by @astryxdesign/core
|
|
7
|
-
* from `xds-*` to `astryx-*` and dropped the dual-emit compatibility (core no
|
|
8
|
-
* longer emits the legacy `xds-*` classes or `data-xds-*` attributes). Any
|
|
9
|
-
* consumer CSS that targeted those surfaces is now broken.
|
|
10
|
-
*
|
|
11
|
-
* This transform performs precise, targeted string replacements on CSS/SCSS
|
|
12
|
-
* files for the documented surfaces only:
|
|
13
|
-
*
|
|
14
|
-
* .xds-* (class-name prefix in selectors — matched only
|
|
15
|
-
* after a `.` so it is a class selector)
|
|
16
|
-
* [data-xds-theme (theme attribute selector)
|
|
17
|
-
* [data-xds-theme-prose (prose-theme attribute selector)
|
|
18
|
-
* [data-xds-media (media attribute selector)
|
|
19
|
-
* @layer xds-theme (cascade layer name — incl. comma-separated
|
|
20
|
-
* @layer xds-base `@layer a, b;` statement lists and nested blocks)
|
|
21
|
-
*
|
|
22
|
-
* It deliberately does NOT blindly replace every `xds` substring: a bare
|
|
23
|
-
* `xds` in a comment, a custom-property value, or an unrelated identifier is
|
|
24
|
-
* left untouched. CSS has no meaningful AST for this class of edit, so this is
|
|
25
|
-
* a plain string transform — `api.jscodeshift` is available but unused.
|
|
26
|
-
*/
|
|
27
|
-
|
|
28
|
-
export const meta = {
|
|
29
|
-
title: 'Migrate .xds-* / [data-xds-*] / @layer xds-* CSS surfaces to astryx',
|
|
30
|
-
description:
|
|
31
|
-
'Rewrites the documented XDS CSS surfaces to their Astryx equivalents: ' +
|
|
32
|
-
'the `.xds-*` class-selector prefix, `[data-xds-theme]` / ' +
|
|
33
|
-
'`[data-xds-theme-prose]` / `[data-xds-media]` attribute selectors, and ' +
|
|
34
|
-
'`@layer xds-theme` / `@layer xds-base` cascade-layer names all become ' +
|
|
35
|
-
'their `astryx-*` / `data-astryx-*` forms.',
|
|
36
|
-
pr: '#3092',
|
|
37
|
-
fileExtensions: ['.css', '.scss'],
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
// The XDS cascade-layer names we own. A `@layer` prelude can name several
|
|
41
|
-
// layers in a comma-separated list (`@layer a, b;`), so we can't anchor every
|
|
42
|
-
// occurrence to the `@layer` keyword. We instead rewrite these exact layer
|
|
43
|
-
// tokens within a `@layer ...` prelude (up to the next `{` or `;`).
|
|
44
|
-
const XDS_LAYER_NAMES = new Map([
|
|
45
|
-
['xds-theme', 'astryx-theme'],
|
|
46
|
-
['xds-base', 'astryx-base'],
|
|
47
|
-
]);
|
|
48
|
-
|
|
49
|
-
function rewriteLayerPrelude(prelude) {
|
|
50
|
-
return prelude.replace(/\bxds-(?:theme|base)\b/g, name =>
|
|
51
|
-
XDS_LAYER_NAMES.get(name) ?? name,
|
|
52
|
-
);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
// Ordered, non-overlapping replacements. Each pattern is intentionally narrow
|
|
56
|
-
// so we never touch a bare `xds` substring outside these surfaces.
|
|
57
|
-
const REPLACEMENTS = [
|
|
58
|
-
// Class-name prefix: only when preceded by a `.` (a class selector).
|
|
59
|
-
{re: /\.xds-/g, to: '.astryx-'},
|
|
60
|
-
// Attribute selectors: any `[data-xds-` opener (theme, theme-prose, media).
|
|
61
|
-
{re: /\[data-xds-/g, to: '[data-astryx-'},
|
|
62
|
-
// Cascade-layer preludes: `@layer <names>` up to the block `{` or `;`.
|
|
63
|
-
// Rewrite only the recognized xds-* layer tokens inside the prelude.
|
|
64
|
-
{re: /@layer\b[^{;]*/g, to: match => rewriteLayerPrelude(match)},
|
|
65
|
-
];
|
|
66
|
-
|
|
67
|
-
export default function transformer(file /*, api */) {
|
|
68
|
-
const source = file.source;
|
|
69
|
-
if (typeof source !== 'string') return undefined;
|
|
70
|
-
|
|
71
|
-
let next = source;
|
|
72
|
-
for (const {re, to} of REPLACEMENTS) {
|
|
73
|
-
next = next.replace(re, to);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
return next === source ? undefined : next;
|
|
77
|
-
}
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* @file Codemod: migrate `declare module "@xds/..."` augmentations to
|
|
5
|
-
* `@astryxdesign/...`
|
|
6
|
-
*
|
|
7
|
-
* The v0.1.0 release moved the public package scope from @xds to
|
|
8
|
-
* @astryxdesign. TypeScript module augmentations (`declare module "@xds/core"
|
|
9
|
-
* { ... }`) reference the package by its string specifier, so they are dead
|
|
10
|
-
* after the scope rename: TypeScript resolves the augmentation against a
|
|
11
|
-
* module that no longer exists.
|
|
12
|
-
*
|
|
13
|
-
* This transform rewrites the augmented module string on `TSModuleDeclaration`
|
|
14
|
-
* nodes whose `id` is a StringLiteral matching a renamed @xds package (or one
|
|
15
|
-
* of its subpaths). It only touches the module path — identifiers *inside* the
|
|
16
|
-
* augmentation (e.g. an augmented interface name) are a separate concern
|
|
17
|
-
* handled by drop-xds-prefix-imports.
|
|
18
|
-
*
|
|
19
|
-
* Ordered AFTER migrate-xds-module-specifiers in the v0.1.0 manifest: it uses
|
|
20
|
-
* the same PACKAGE_RENAMES mapping and cleans up the module-augmentation
|
|
21
|
-
* surface alongside the import/export/require specifier rename.
|
|
22
|
-
*/
|
|
23
|
-
|
|
24
|
-
export const meta = {
|
|
25
|
-
title: 'Migrate declare-module augmentations from @xds/* to @astryxdesign/*',
|
|
26
|
-
description:
|
|
27
|
-
'Rewrites the module specifier on TypeScript `declare module "@xds/..."` ' +
|
|
28
|
-
'augmentations to the @astryxdesign/* packages used by Astryx v0.1.0. ' +
|
|
29
|
-
'Only the augmented module path is changed; identifiers inside the ' +
|
|
30
|
-
'augmentation are left untouched.',
|
|
31
|
-
pr: '#3092',
|
|
32
|
-
fileExtensions: ['.ts', '.d.ts', '.tsx'],
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const PACKAGE_RENAMES = new Map([
|
|
36
|
-
['@xds/build', '@astryxdesign/build'],
|
|
37
|
-
['@xds/cli', '@astryxdesign/cli'],
|
|
38
|
-
['@xds/core', '@astryxdesign/core'],
|
|
39
|
-
['@xds/lab', '@astryxdesign/lab'],
|
|
40
|
-
['@xds/theme-butter', '@astryxdesign/theme-butter'],
|
|
41
|
-
['@xds/theme-chocolate', '@astryxdesign/theme-chocolate'],
|
|
42
|
-
['@xds/theme-daily', '@astryxdesign/theme-neutral'],
|
|
43
|
-
['@xds/theme-default', '@astryxdesign/theme-neutral'],
|
|
44
|
-
['@xds/theme-gothic', '@astryxdesign/theme-gothic'],
|
|
45
|
-
['@xds/theme-matcha', '@astryxdesign/theme-matcha'],
|
|
46
|
-
['@xds/theme-neutral', '@astryxdesign/theme-neutral'],
|
|
47
|
-
['@xds/theme-stone', '@astryxdesign/theme-stone'],
|
|
48
|
-
['@xds/theme-y2k', '@astryxdesign/theme-y2k'],
|
|
49
|
-
]);
|
|
50
|
-
|
|
51
|
-
function renamePackageSpecifier(value) {
|
|
52
|
-
if (typeof value !== 'string') return value;
|
|
53
|
-
for (const [from, to] of PACKAGE_RENAMES) {
|
|
54
|
-
if (value === from) return to;
|
|
55
|
-
if (value.startsWith(from + '/')) return to + value.slice(from.length);
|
|
56
|
-
}
|
|
57
|
-
return value;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
export default function transformer(file, api) {
|
|
61
|
-
const j = api.jscodeshift;
|
|
62
|
-
const root = j(file.source);
|
|
63
|
-
let hasChanges = false;
|
|
64
|
-
|
|
65
|
-
root.find(j.TSModuleDeclaration).forEach(path => {
|
|
66
|
-
const id = path.node.id;
|
|
67
|
-
// Module augmentations name the module with a string literal id; a
|
|
68
|
-
// `namespace Foo {}` uses an Identifier id, which we ignore.
|
|
69
|
-
if (!id || (id.type !== 'StringLiteral' && id.type !== 'Literal')) return;
|
|
70
|
-
if (typeof id.value !== 'string') return;
|
|
71
|
-
const next = renamePackageSpecifier(id.value);
|
|
72
|
-
if (next === id.value) return;
|
|
73
|
-
id.value = next;
|
|
74
|
-
hasChanges = true;
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
return hasChanges ? root.toSource() : undefined;
|
|
78
|
-
}
|