@astryxdesign/cli 0.1.3 → 0.1.4-canary.01e5b29
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 +29 -1
- package/docs/browser-support.doc.mjs +200 -0
- package/docs/getting-started.doc.mjs +4 -0
- package/docs/layout.doc.mjs +2 -2
- package/docs/migration.doc.mjs +134 -0
- package/docs/styling.doc.mjs +53 -0
- package/docs/theme.doc.mjs +2 -2
- package/docs/working-with-ai.doc.mjs +1 -1
- package/package.json +15 -10
- package/src/api/component.mjs +2 -1
- package/src/api/doctor.mjs +13 -2
- package/src/api/template.mjs +14 -3
- package/src/codemods/__tests__/registry.test.mjs +1 -0
- package/src/codemods/__tests__/runner.test.mjs +38 -0
- package/src/codemods/registry.mjs +1 -0
- package/src/codemods/runner.mjs +2 -0
- package/src/codemods/transforms/v0.1.0/__tests__/drop-xds-prefix-imports.test.mjs +43 -0
- package/src/codemods/transforms/v0.1.0/__tests__/migrate-xds-css-surfaces.test.mjs +36 -0
- package/src/codemods/transforms/v0.1.0/__tests__/migrate-xds-module-specifiers.test.mjs +41 -0
- package/src/codemods/transforms/v0.1.0/drop-xds-prefix-imports.mjs +65 -13
- package/src/codemods/transforms/v0.1.0/migrate-xds-css-surfaces.mjs +43 -3
- package/src/codemods/transforms/v0.1.0/migrate-xds-module-specifiers.mjs +45 -0
- package/src/codemods/transforms/v0.1.5/__tests__/rename-switch-label-spacing-default-to-hug.test.mjs +93 -0
- package/src/codemods/transforms/v0.1.5/index.mjs +19 -0
- package/src/codemods/transforms/v0.1.5/rename-switch-label-spacing-default-to-hug.mjs +140 -0
- package/src/commands/agent-docs.mjs +9 -6
- package/src/commands/agent-docs.test.mjs +33 -0
- package/src/commands/build-theme.color-scheme.test.mjs +153 -0
- package/src/commands/build-theme.mjs +118 -14
- package/src/commands/build-theme.variants.test.mjs +193 -0
- package/src/commands/component-resolution.test.mjs +4 -4
- package/src/commands/doctor.test.mjs +38 -3
- package/src/commands/init.mjs +1 -1
- package/src/commands/swizzle.mjs +34 -0
- package/src/commands/swizzle.routing.test.mjs +67 -0
- package/src/lib/component-discovery.mjs +8 -4
- package/src/lib/component-format.mjs +13 -2
- package/src/lib/component-format.test.mjs +42 -0
- package/src/utils/paths.test.mjs +2 -2
- package/templates/blocks/components/BaseTypeahead/BaseTypeaheadCustomSearch.doc.mjs +14 -0
- package/templates/blocks/components/BaseTypeahead/BaseTypeaheadCustomSearch.tsx +58 -0
- package/templates/blocks/components/CodeBlock/CodeBlockTerminal.doc.mjs +14 -0
- package/templates/blocks/components/CodeBlock/CodeBlockTerminal.tsx +24 -0
- package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.doc.mjs +13 -0
- package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.tsx +33 -0
- package/templates/blocks/components/Collapsible/CollapsibleWithoutCard.tsx +25 -23
- package/templates/blocks/components/CommandPaletteGroup/CommandPaletteGroupShowcase.tsx +27 -48
- package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputBasic.doc.mjs +15 -0
- package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputBasic.tsx +39 -0
- package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputShowcase.doc.mjs +15 -0
- package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputShowcase.tsx +39 -0
- package/templates/blocks/components/CommandPaletteItem/CommandPaletteItemShowcase.tsx +31 -54
- package/templates/blocks/components/CommandPaletteList/CommandPaletteListBasic.doc.mjs +15 -0
- package/templates/blocks/components/CommandPaletteList/CommandPaletteListBasic.tsx +27 -0
- package/templates/blocks/components/CommandPaletteList/CommandPaletteListShowcase.doc.mjs +15 -0
- package/templates/blocks/components/CommandPaletteList/CommandPaletteListShowcase.tsx +38 -0
- package/templates/blocks/components/ContextMenuItem/ContextMenuItemBasic.doc.mjs +14 -0
- package/templates/blocks/components/ContextMenuItem/ContextMenuItemBasic.tsx +44 -0
- package/templates/blocks/components/ContextMenuItem/ContextMenuItemShowcase.doc.mjs +15 -0
- package/templates/blocks/components/ContextMenuItem/ContextMenuItemShowcase.tsx +107 -0
- package/templates/blocks/components/MetadataListItem/MetadataListItemBasic.doc.mjs +1 -1
- package/templates/blocks/components/NavHeadingMenu/NavHeadingMenuShowcase.doc.mjs +15 -0
- package/templates/blocks/components/NavHeadingMenu/NavHeadingMenuShowcase.tsx +47 -0
- package/templates/blocks/components/TabList/TabListTabsWithActions.doc.mjs +1 -1
- package/templates/blocks/components/Table/TableRowExpansionTable.doc.mjs +14 -0
- package/templates/blocks/components/Table/TableRowExpansionTable.tsx +99 -0
- package/templates/blocks/components/ToggleButtonGroup/ToggleButtonGroupVertical.doc.mjs +1 -1
- package/templates/pages/classic-gallery/page.tsx +1 -1
- package/templates/pages/dashboard/page.tsx +1 -1
- package/templates/pages/documentation/page.tsx +1 -1
- package/templates/pages/incident-console/page.tsx +580 -0
- package/templates/pages/incident-console/template.doc.mjs +12 -0
- package/templates/pages/messaging-shell/page.tsx +676 -0
- package/templates/pages/messaging-shell/template.doc.mjs +12 -0
- package/templates/pages/mixed-gallery/page.tsx +1 -1
- package/templates/pages/payment-form/page.tsx +2 -6
- package/templates/pages/product-detail/page.tsx +3 -11
- package/templates/pages/product-gallery/page.tsx +1 -1
- package/templates/pages/settings/page.tsx +1 -1
- package/templates/pages/side-gallery/page.tsx +1 -1
- package/templates/pages/table-page/page.tsx +1 -1
- package/templates/pages/table-page-chart/page.tsx +4 -14
- package/templates/pages/table-page-heatmap-status/page.tsx +1 -1
- package/templates/pages/table-page-shoe-store-heatmap/page.tsx +5 -19
- package/templates/themes/stone/stoneTheme.ts +6 -6
|
@@ -99,5 +99,43 @@ describe('runCodemods — unified config codemod path', () => {
|
|
|
99
99
|
expect(fs.readFileSync(path.join(srcDir, 'a.ts'), 'utf-8')).toContain(
|
|
100
100
|
'const bar = 1',
|
|
101
101
|
);
|
|
102
|
+
// writtenFiles must be returned (consumed by upgrade.mjs to run the
|
|
103
|
+
// post-codemod formatting/lint hooks). Regression guard: it was previously
|
|
104
|
+
// built internally but omitted from the return object, so hooks received an
|
|
105
|
+
// empty file list and silently skipped, leaving codemod output unformatted.
|
|
106
|
+
expect(result.writtenFiles).toEqual([path.join(srcDir, 'a.ts')]);
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
it('returns writtenFiles for every changed file (post-codemod hook input)', async () => {
|
|
110
|
+
const srcDir = path.join(tmpDir, 'src');
|
|
111
|
+
fs.mkdirSync(srcDir);
|
|
112
|
+
fs.writeFileSync(path.join(srcDir, 'a.ts'), 'const foo = 1;\n');
|
|
113
|
+
fs.writeFileSync(path.join(srcDir, 'b.ts'), 'const foo = 2;\n');
|
|
114
|
+
fs.writeFileSync(path.join(srcDir, 'c.ts'), 'const untouched = 3;\n');
|
|
115
|
+
|
|
116
|
+
const versionManifests = [
|
|
117
|
+
{
|
|
118
|
+
version: '0.1.3',
|
|
119
|
+
transforms: [
|
|
120
|
+
{
|
|
121
|
+
name: 'synthetic-code-codemod',
|
|
122
|
+
meta: {title: 'Synthetic code codemod'},
|
|
123
|
+
transform: file => file.source.replace(/foo/g, 'bar'),
|
|
124
|
+
},
|
|
125
|
+
],
|
|
126
|
+
},
|
|
127
|
+
];
|
|
128
|
+
|
|
129
|
+
const result = await runCodemods(versionManifests, {
|
|
130
|
+
apply: true,
|
|
131
|
+
path: './src',
|
|
132
|
+
silent: true,
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
expect(result.totalFilesChanged).toBe(2);
|
|
136
|
+
// Only the two files that actually changed are reported (not c.ts).
|
|
137
|
+
expect([...result.writtenFiles].sort()).toEqual(
|
|
138
|
+
[path.join(srcDir, 'a.ts'), path.join(srcDir, 'b.ts')].sort(),
|
|
139
|
+
);
|
|
102
140
|
});
|
|
103
141
|
});
|
|
@@ -20,6 +20,7 @@ const registry = new Map([
|
|
|
20
20
|
['0.1.0', () => import('./transforms/v0.1.0/index.mjs')],
|
|
21
21
|
['0.1.2', () => import('./transforms/v0.1.2/index.mjs')],
|
|
22
22
|
['0.1.3', () => import('./transforms/v0.1.3/index.mjs')],
|
|
23
|
+
['0.1.5', () => import('./transforms/v0.1.5/index.mjs')],
|
|
23
24
|
]);
|
|
24
25
|
|
|
25
26
|
// Re-export from the shared utility so registry callers and other consumers
|
package/src/codemods/runner.mjs
CHANGED
|
@@ -178,6 +178,7 @@ function toUnifiedEntry(transformEntry, version) {
|
|
|
178
178
|
* @param {string|undefined} options.codemod - Run only this specific transform
|
|
179
179
|
* @param {Set<string>} [options.skipCodemods] - Transform names to exclude
|
|
180
180
|
* @param {boolean} [options.silent] - Suppress all human-facing output (for --json)
|
|
181
|
+
* @returns {{totalFilesChanged: number, totalTransformsApplied: number, totalValidationBlocked: number, writtenFiles: string[], errors: Array, skippedOptional: Array}}
|
|
181
182
|
*/
|
|
182
183
|
export async function runCodemods(
|
|
183
184
|
versionManifests,
|
|
@@ -405,6 +406,7 @@ export async function runCodemods(
|
|
|
405
406
|
totalFilesChanged,
|
|
406
407
|
totalTransformsApplied,
|
|
407
408
|
totalValidationBlocked,
|
|
409
|
+
writtenFiles,
|
|
408
410
|
errors,
|
|
409
411
|
skippedOptional,
|
|
410
412
|
};
|
|
@@ -134,4 +134,47 @@ describe('drop-xds-prefix-imports', () => {
|
|
|
134
134
|
expect(output).toContain(`import {useState} from 'react';`);
|
|
135
135
|
expect(output).toContain('const x = 1;');
|
|
136
136
|
});
|
|
137
|
+
|
|
138
|
+
it('aliases to Astryx<Name> when the bare name collides with a local export function', async () => {
|
|
139
|
+
const input = [
|
|
140
|
+
`import {XDSCodeBlock} from '@xds/core/CodeBlock';`,
|
|
141
|
+
`export function CodeBlock({code}: {code: string}) {`,
|
|
142
|
+
` return <XDSCodeBlock code={code} />;`,
|
|
143
|
+
`}`,
|
|
144
|
+
].join('\n');
|
|
145
|
+
const output = await applyTransform(input);
|
|
146
|
+
// Import aliased to AstryxCodeBlock; local declaration untouched.
|
|
147
|
+
expect(output).toContain('CodeBlock as AstryxCodeBlock');
|
|
148
|
+
expect(output).toContain('@xds/core/CodeBlock');
|
|
149
|
+
expect(output).toContain('export function CodeBlock({code}');
|
|
150
|
+
expect(output).toContain('<AstryxCodeBlock code={code} />');
|
|
151
|
+
// No duplicate CodeBlock binding (not imported bare).
|
|
152
|
+
expect(output).not.toMatch(/import \{CodeBlock\}/);
|
|
153
|
+
});
|
|
154
|
+
|
|
155
|
+
it('aliases on collision with a local const/class binding', async () => {
|
|
156
|
+
const input = [
|
|
157
|
+
`import {XDSCard} from '@xds/core';`,
|
|
158
|
+
`const Card = 42;`,
|
|
159
|
+
`export const value = <XDSCard />;`,
|
|
160
|
+
`export const other = Card;`,
|
|
161
|
+
].join('\n');
|
|
162
|
+
const output = await applyTransform(input);
|
|
163
|
+
expect(output).toContain('import {Card as AstryxCard}');
|
|
164
|
+
expect(output).toContain('const Card = 42;');
|
|
165
|
+
expect(output).toContain('<AstryxCard />');
|
|
166
|
+
expect(output).toContain('export const other = Card;');
|
|
167
|
+
});
|
|
168
|
+
|
|
169
|
+
it('un-prefixes normally when there is NO local collision', async () => {
|
|
170
|
+
const input = [
|
|
171
|
+
`import {XDSCodeBlock} from '@xds/core/CodeBlock';`,
|
|
172
|
+
`export const App = () => <XDSCodeBlock code="x" />;`,
|
|
173
|
+
].join('\n');
|
|
174
|
+
const output = await applyTransform(input);
|
|
175
|
+
expect(output).toContain('{CodeBlock}');
|
|
176
|
+
expect(output).toContain('@xds/core/CodeBlock');
|
|
177
|
+
expect(output).toContain('<CodeBlock code="x" />');
|
|
178
|
+
expect(output).not.toContain('AstryxCodeBlock');
|
|
179
|
+
});
|
|
137
180
|
});
|
|
@@ -64,4 +64,40 @@ describe('migrate-xds-css-surfaces', () => {
|
|
|
64
64
|
const output = await applyTransform(input);
|
|
65
65
|
expect(output).toBe(input);
|
|
66
66
|
});
|
|
67
|
+
|
|
68
|
+
it('rewrites @import of @xds/* package stylesheets', async () => {
|
|
69
|
+
const input = [
|
|
70
|
+
`@import '@xds/core/reset.css';`,
|
|
71
|
+
`@import '@xds/core/xds.css';`,
|
|
72
|
+
`@import '@xds/theme-default/theme.css';`,
|
|
73
|
+
].join('\n');
|
|
74
|
+
const output = await applyTransform(input);
|
|
75
|
+
expect(output).toContain(`@import '@astryxdesign/core/reset.css';`);
|
|
76
|
+
// xds.css is renamed to astryx.css (file rename, not just scope swap).
|
|
77
|
+
expect(output).toContain(`@import '@astryxdesign/core/astryx.css';`);
|
|
78
|
+
// theme-default collapses to theme-neutral.
|
|
79
|
+
expect(output).toContain(
|
|
80
|
+
`@import '@astryxdesign/theme-neutral/theme.css';`,
|
|
81
|
+
);
|
|
82
|
+
expect(output).not.toContain('@xds/');
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
it('collapses theme-daily @import to theme-neutral and preserves quote style', async () => {
|
|
86
|
+
const input = `@import "@xds/theme-daily/theme.css";`;
|
|
87
|
+
const output = await applyTransform(input);
|
|
88
|
+
expect(output).toBe(`@import "@astryxdesign/theme-neutral/theme.css";`);
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
it('rewrites @import url() form', async () => {
|
|
92
|
+
const input = `@import url('@xds/core/reset.css');`;
|
|
93
|
+
const output = await applyTransform(input);
|
|
94
|
+
expect(output).toContain(`@astryxdesign/core/reset.css`);
|
|
95
|
+
expect(output).not.toContain('@xds/');
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
it('does not touch @import of non-xds packages', async () => {
|
|
99
|
+
const input = `@import '@acme/widgets/styles.css';`;
|
|
100
|
+
const output = await applyTransform(input);
|
|
101
|
+
expect(output).toBe(input);
|
|
102
|
+
});
|
|
67
103
|
});
|
|
@@ -48,4 +48,45 @@ describe('migrate-xds-module-specifiers', () => {
|
|
|
48
48
|
const output = await applyTransform(input, 'test.ts');
|
|
49
49
|
expect(output).toBe(input);
|
|
50
50
|
});
|
|
51
|
+
|
|
52
|
+
it('remaps defaultTheme -> neutralTheme when collapsing theme-default', async () => {
|
|
53
|
+
const output = await applyTransform(
|
|
54
|
+
`import {defaultTheme} from '@xds/theme-default';`,
|
|
55
|
+
'test.ts',
|
|
56
|
+
);
|
|
57
|
+
// Package collapses to theme-neutral; binding aliased so local usage works.
|
|
58
|
+
expect(output).toContain('neutralTheme as defaultTheme');
|
|
59
|
+
expect(output).toContain('@astryxdesign/theme-neutral');
|
|
60
|
+
expect(output).not.toContain('@xds/');
|
|
61
|
+
expect(output).not.toContain('theme-default');
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
it('remaps defaultTheme -> neutralTheme for theme-daily and /built subpath', async () => {
|
|
65
|
+
const output = await applyTransform(
|
|
66
|
+
`import {defaultTheme} from '@xds/theme-daily/built';`,
|
|
67
|
+
'test.ts',
|
|
68
|
+
);
|
|
69
|
+
expect(output).toContain('neutralTheme as defaultTheme');
|
|
70
|
+
expect(output).toContain('@astryxdesign/theme-neutral/built');
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
it('preserves an existing alias when remapping defaultTheme', async () => {
|
|
74
|
+
const output = await applyTransform(
|
|
75
|
+
`import {defaultTheme as dt} from '@xds/theme-default';`,
|
|
76
|
+
'test.ts',
|
|
77
|
+
);
|
|
78
|
+
expect(output).toContain('neutralTheme as dt');
|
|
79
|
+
expect(output).toContain('@astryxdesign/theme-neutral');
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
it('does NOT remap neutralTheme import from theme-neutral (no rename needed)', async () => {
|
|
83
|
+
const output = await applyTransform(
|
|
84
|
+
`import {neutralTheme} from '@xds/theme-neutral';`,
|
|
85
|
+
'test.ts',
|
|
86
|
+
);
|
|
87
|
+
expect(output).toContain('neutralTheme');
|
|
88
|
+
expect(output).toContain('@astryxdesign/theme-neutral');
|
|
89
|
+
expect(output).not.toContain('defaultTheme');
|
|
90
|
+
expect(output).not.toContain('neutralTheme as');
|
|
91
|
+
});
|
|
51
92
|
});
|
|
@@ -85,35 +85,87 @@ export default function transformer(file, api) {
|
|
|
85
85
|
// local alias and only the imported name is rewritten.
|
|
86
86
|
const localRenames = new Map();
|
|
87
87
|
|
|
88
|
+
// Collision detection: un-prefixing `XDSCodeBlock` -> `CodeBlock` breaks if
|
|
89
|
+
// the file already has a top-level binding named `CodeBlock` (e.g. its own
|
|
90
|
+
// `export function CodeBlock`). Collect every existing top-level binding name
|
|
91
|
+
// up front so we can alias to `Astryx<Name>` instead of producing a duplicate
|
|
92
|
+
// declaration. We gather: import locals, and top-level function/class/var
|
|
93
|
+
// declaration names (the realistic collision sources for component wrappers).
|
|
94
|
+
const existingBindings = new Set();
|
|
95
|
+
root.find(j.ImportDeclaration).forEach(path => {
|
|
96
|
+
for (const spec of path.node.specifiers || []) {
|
|
97
|
+
if (spec.local && spec.local.name) existingBindings.add(spec.local.name);
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
const collectDeclName = node => {
|
|
101
|
+
if (!node) return;
|
|
102
|
+
if (
|
|
103
|
+
(node.type === 'FunctionDeclaration' ||
|
|
104
|
+
node.type === 'ClassDeclaration') &&
|
|
105
|
+
node.id
|
|
106
|
+
) {
|
|
107
|
+
existingBindings.add(node.id.name);
|
|
108
|
+
} else if (node.type === 'VariableDeclaration') {
|
|
109
|
+
for (const d of node.declarations) {
|
|
110
|
+
if (d.id && d.id.type === 'Identifier') existingBindings.add(d.id.name);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
root.find(j.Program).forEach(path => {
|
|
115
|
+
for (const stmt of path.node.body) {
|
|
116
|
+
collectDeclName(stmt);
|
|
117
|
+
// Unwrap `export function X` / `export const X`.
|
|
118
|
+
if (stmt.type === 'ExportNamedDeclaration' && stmt.declaration) {
|
|
119
|
+
collectDeclName(stmt.declaration);
|
|
120
|
+
}
|
|
121
|
+
if (stmt.type === 'ExportDefaultDeclaration' && stmt.declaration) {
|
|
122
|
+
collectDeclName(stmt.declaration);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
|
|
88
127
|
// 1. Rewrite import specifiers from @xds/core
|
|
89
128
|
root.find(j.ImportDeclaration).forEach(path => {
|
|
90
129
|
const source = path.node.source.value;
|
|
91
130
|
if (typeof source !== 'string' || !XDS_CORE_SOURCE.test(source)) return;
|
|
92
131
|
|
|
93
|
-
|
|
94
|
-
if (spec.type !== 'ImportSpecifier')
|
|
132
|
+
path.node.specifiers = (path.node.specifiers || []).map(spec => {
|
|
133
|
+
if (spec.type !== 'ImportSpecifier') return spec; // default/namespace
|
|
95
134
|
const importedName = spec.imported.name;
|
|
96
135
|
const bare = bareName(importedName);
|
|
97
|
-
if (!bare)
|
|
136
|
+
if (!bare) return spec;
|
|
98
137
|
|
|
99
138
|
const localName = spec.local.name;
|
|
100
139
|
const wasAliased = localName !== importedName;
|
|
101
140
|
|
|
102
|
-
//
|
|
103
|
-
|
|
104
|
-
|
|
141
|
+
// We REPLACE the specifier node (rather than mutating .imported/.local)
|
|
142
|
+
// because recast preserves the original printed form of a mutated
|
|
143
|
+
// ImportSpecifier and will drop a newly-introduced `as local` alias.
|
|
144
|
+
// Building a fresh node makes recast print the full `imported as local`.
|
|
105
145
|
if (wasAliased) {
|
|
106
146
|
// `import {XDSButton as Btn}` -> `import {Button as Btn}`.
|
|
107
|
-
// Local binding unchanged, so no usage rewrites needed.
|
|
108
147
|
hasChanges = true;
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
148
|
+
return j.importSpecifier(j.identifier(bare), j.identifier(localName));
|
|
149
|
+
}
|
|
150
|
+
if (bare !== importedName && existingBindings.has(bare)) {
|
|
151
|
+
// COLLISION: the bare name is already a top-level binding in this file
|
|
152
|
+
// (e.g. a local `export function CodeBlock` alongside imported
|
|
153
|
+
// `XDSCodeBlock`). Un-prefixing directly would create a duplicate
|
|
154
|
+
// declaration, so alias the import to `Astryx<Name>` and rename the
|
|
155
|
+
// import's references to that alias, leaving the local binding intact.
|
|
156
|
+
const alias = `Astryx${bare}`;
|
|
157
|
+
localRenames.set(importedName, alias);
|
|
158
|
+
existingBindings.add(alias);
|
|
114
159
|
hasChanges = true;
|
|
160
|
+
return j.importSpecifier(j.identifier(bare), j.identifier(alias));
|
|
115
161
|
}
|
|
116
|
-
|
|
162
|
+
// `import {XDSButton}` -> `import {Button}`. The local binding is the
|
|
163
|
+
// prefixed name; rename it and all its references.
|
|
164
|
+
localRenames.set(importedName, bare);
|
|
165
|
+
existingBindings.add(bare);
|
|
166
|
+
hasChanges = true;
|
|
167
|
+
return j.importSpecifier(j.identifier(bare), j.identifier(bare));
|
|
168
|
+
});
|
|
117
169
|
});
|
|
118
170
|
|
|
119
171
|
// 2. Rewrite re-exports from @xds/core
|
|
@@ -18,6 +18,10 @@
|
|
|
18
18
|
* [data-xds-media (media attribute selector)
|
|
19
19
|
* @layer xds-theme (cascade layer name — incl. comma-separated
|
|
20
20
|
* @layer xds-base `@layer a, b;` statement lists and nested blocks)
|
|
21
|
+
* @import '@xds/...' (package stylesheet imports — scope rewrite, plus
|
|
22
|
+
* the @xds/core/xds.css -> @astryxdesign/core/
|
|
23
|
+
* astryx.css file rename and the theme-default /
|
|
24
|
+
* theme-daily -> theme-neutral collapse)
|
|
21
25
|
*
|
|
22
26
|
* It deliberately does NOT blindly replace every `xds` substring: a bare
|
|
23
27
|
* `xds` in a comment, a custom-property value, or an unrelated identifier is
|
|
@@ -30,9 +34,10 @@ export const meta = {
|
|
|
30
34
|
description:
|
|
31
35
|
'Rewrites the documented XDS CSS surfaces to their Astryx equivalents: ' +
|
|
32
36
|
'the `.xds-*` class-selector prefix, `[data-xds-theme]` / ' +
|
|
33
|
-
'`[data-xds-theme-prose]` / `[data-xds-media]` attribute selectors,
|
|
34
|
-
'`@layer xds-theme` / `@layer xds-base` cascade-layer names
|
|
35
|
-
'
|
|
37
|
+
'`[data-xds-theme-prose]` / `[data-xds-media]` attribute selectors, ' +
|
|
38
|
+
'`@layer xds-theme` / `@layer xds-base` cascade-layer names, and ' +
|
|
39
|
+
'`@import` of @xds/* package stylesheets (scope rewrite, xds.css->astryx.css, ' +
|
|
40
|
+
'theme-default/theme-daily->theme-neutral) all become their Astryx forms.',
|
|
36
41
|
pr: '#3092',
|
|
37
42
|
fileExtensions: ['.css', '.scss'],
|
|
38
43
|
};
|
|
@@ -52,6 +57,32 @@ function rewriteLayerPrelude(prelude) {
|
|
|
52
57
|
);
|
|
53
58
|
}
|
|
54
59
|
|
|
60
|
+
// Rewrite a single @import package-stylesheet specifier value (without quotes)
|
|
61
|
+
// from an @xds/* path to its @astryxdesign/* equivalent. Handles the two
|
|
62
|
+
// non-mechanical cases beyond the scope swap:
|
|
63
|
+
// @xds/core/xds.css -> @astryxdesign/core/astryx.css (file rename)
|
|
64
|
+
// @xds/theme-default/* -> @astryxdesign/theme-neutral/* (collapse)
|
|
65
|
+
// @xds/theme-daily/* -> @astryxdesign/theme-neutral/* (collapse)
|
|
66
|
+
// Returns the original value unchanged if it is not an @xds/* specifier.
|
|
67
|
+
function rewriteImportSpecifier(spec) {
|
|
68
|
+
if (!spec.startsWith('@xds/')) return spec;
|
|
69
|
+
// Theme package collapse (default/daily -> neutral).
|
|
70
|
+
let next = spec
|
|
71
|
+
.replace(/^@xds\/theme-default(\/|$)/, '@astryxdesign/theme-neutral$1')
|
|
72
|
+
.replace(/^@xds\/theme-daily(\/|$)/, '@astryxdesign/theme-neutral$1');
|
|
73
|
+
if (next === spec) {
|
|
74
|
+
// Not a collapsed theme — plain scope swap.
|
|
75
|
+
next = spec.replace(/^@xds\//, '@astryxdesign/');
|
|
76
|
+
}
|
|
77
|
+
// Core stylesheet file rename: xds.css -> astryx.css (only the core bundle;
|
|
78
|
+
// reset.css and others keep their names).
|
|
79
|
+
next = next.replace(
|
|
80
|
+
/^@astryxdesign\/core\/xds\.css$/,
|
|
81
|
+
'@astryxdesign/core/astryx.css',
|
|
82
|
+
);
|
|
83
|
+
return next;
|
|
84
|
+
}
|
|
85
|
+
|
|
55
86
|
// Ordered, non-overlapping replacements. Each pattern is intentionally narrow
|
|
56
87
|
// so we never touch a bare `xds` substring outside these surfaces.
|
|
57
88
|
const REPLACEMENTS = [
|
|
@@ -62,6 +93,15 @@ const REPLACEMENTS = [
|
|
|
62
93
|
// Cascade-layer preludes: `@layer <names>` up to the block `{` or `;`.
|
|
63
94
|
// Rewrite only the recognized xds-* layer tokens inside the prelude.
|
|
64
95
|
{re: /@layer\b[^{;]*/g, to: match => rewriteLayerPrelude(match)},
|
|
96
|
+
// Package stylesheet imports: `@import '@xds/...'` or `@import url('@xds/...')`.
|
|
97
|
+
// Rewrite only the quoted @xds/* specifier, preserving the quote style.
|
|
98
|
+
{
|
|
99
|
+
re: /@import\s+(?:url\(\s*)?(['"])(@xds\/[^'"]+)\1/g,
|
|
100
|
+
to: (match, quote, spec) => {
|
|
101
|
+
const next = rewriteImportSpecifier(spec);
|
|
102
|
+
return next === spec ? match : match.replace(spec, next);
|
|
103
|
+
},
|
|
104
|
+
},
|
|
65
105
|
];
|
|
66
106
|
|
|
67
107
|
export default function transformer(file /*, api */) {
|
|
@@ -51,12 +51,57 @@ function rewriteLiteral(node) {
|
|
|
51
51
|
return true;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
+
// @xds/theme-default and @xds/theme-daily both collapse to
|
|
55
|
+
// @astryxdesign/theme-neutral, whose exported theme binding is `neutralTheme`
|
|
56
|
+
// (not `defaultTheme`). When we rewrite an import from one of those packages,
|
|
57
|
+
// remap a `defaultTheme` named import to `neutralTheme`, aliasing back to the
|
|
58
|
+
// original local name so downstream usages keep working unchanged:
|
|
59
|
+
// import {defaultTheme} from '@xds/theme-default'
|
|
60
|
+
// -> import {neutralTheme as defaultTheme} from '@astryxdesign/theme-neutral'
|
|
61
|
+
// An already-aliased `{defaultTheme as x}` just has its imported name remapped.
|
|
62
|
+
const THEME_EXPORT_RENAMES = new Map([['defaultTheme', 'neutralTheme']]);
|
|
63
|
+
const COLLAPSED_THEME_SOURCES = new Set([
|
|
64
|
+
'@xds/theme-default',
|
|
65
|
+
'@xds/theme-daily',
|
|
66
|
+
]);
|
|
67
|
+
|
|
68
|
+
function isCollapsedThemeSource(value) {
|
|
69
|
+
if (typeof value !== 'string') return false;
|
|
70
|
+
for (const src of COLLAPSED_THEME_SOURCES) {
|
|
71
|
+
if (value === src || value.startsWith(src + '/')) return true;
|
|
72
|
+
}
|
|
73
|
+
return false;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
function remapThemeExportNames(importPath, j) {
|
|
77
|
+
let changed = false;
|
|
78
|
+
importPath.node.specifiers = (importPath.node.specifiers || []).map(spec => {
|
|
79
|
+
if (spec.type !== 'ImportSpecifier') return spec;
|
|
80
|
+
const importedName = spec.imported.name;
|
|
81
|
+
const renamed = THEME_EXPORT_RENAMES.get(importedName);
|
|
82
|
+
if (!renamed) return spec;
|
|
83
|
+
// Preserve the original local binding (so downstream usages keep working),
|
|
84
|
+
// remapping only the imported name. Build a FRESH specifier node: recast
|
|
85
|
+
// preserves the printed form of a mutated ImportSpecifier and would drop a
|
|
86
|
+
// newly-introduced `as local` alias, so mutating in place loses it.
|
|
87
|
+
const localName = spec.local.name;
|
|
88
|
+
changed = true;
|
|
89
|
+
return j.importSpecifier(j.identifier(renamed), j.identifier(localName));
|
|
90
|
+
});
|
|
91
|
+
return changed;
|
|
92
|
+
}
|
|
93
|
+
|
|
54
94
|
export default function transformer(file, api) {
|
|
55
95
|
const j = api.jscodeshift;
|
|
56
96
|
const root = j(file.source);
|
|
57
97
|
let hasChanges = false;
|
|
58
98
|
|
|
59
99
|
root.find(j.ImportDeclaration).forEach(path => {
|
|
100
|
+
// Remap collapsed-theme export names BEFORE rewriting the source specifier
|
|
101
|
+
// (the check keys off the original @xds/theme-default|daily path).
|
|
102
|
+
if (isCollapsedThemeSource(path.node.source.value)) {
|
|
103
|
+
hasChanges = remapThemeExportNames(path, j) || hasChanges;
|
|
104
|
+
}
|
|
60
105
|
hasChanges = rewriteLiteral(path.node.source) || hasChanges;
|
|
61
106
|
});
|
|
62
107
|
|
package/src/codemods/transforms/v0.1.5/__tests__/rename-switch-label-spacing-default-to-hug.test.mjs
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
import {describe, it, expect} from 'vitest';
|
|
4
|
+
|
|
5
|
+
async function applyTransform(source) {
|
|
6
|
+
const {default: transform} =
|
|
7
|
+
await import('../rename-switch-label-spacing-default-to-hug.mjs');
|
|
8
|
+
const jscodeshift = (await import('jscodeshift')).default;
|
|
9
|
+
const j = jscodeshift.withParser('tsx');
|
|
10
|
+
const api = {jscodeshift: j, stats: () => {}, report: () => {}};
|
|
11
|
+
const file = {source, path: 'test.tsx'};
|
|
12
|
+
const result = transform(file, api);
|
|
13
|
+
return result ?? source;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
describe('rename-switch-label-spacing-default-to-hug', () => {
|
|
17
|
+
it('renames Switch labelSpacing="default" to labelSpacing="hug"', async () => {
|
|
18
|
+
const input = `<Switch label="Notify" value={on} labelSpacing="default" />`;
|
|
19
|
+
const output = await applyTransform(input);
|
|
20
|
+
expect(output).toContain("'hug'");
|
|
21
|
+
expect(output).not.toContain('default');
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
it("renames expression-container labelSpacing={'default'}", async () => {
|
|
25
|
+
const input = `<Switch label="Notify" value={on} labelSpacing={'default'} />`;
|
|
26
|
+
const output = await applyTransform(input);
|
|
27
|
+
expect(output).toContain("'hug'");
|
|
28
|
+
expect(output).not.toContain("'default'");
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
it('renames default inside a ternary labelSpacing expression', async () => {
|
|
32
|
+
const input = `<Switch label="Notify" value={on} labelSpacing={isRow ? 'spread' : 'default'} />`;
|
|
33
|
+
const output = await applyTransform(input);
|
|
34
|
+
expect(output).toContain("'hug'");
|
|
35
|
+
expect(output).toContain("'spread'");
|
|
36
|
+
expect(output).not.toContain("'default'");
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
it('does not change labelSpacing="spread"', async () => {
|
|
40
|
+
const input = `<Switch label="Notify" value={on} labelSpacing="spread" />`;
|
|
41
|
+
const output = await applyTransform(input);
|
|
42
|
+
expect(output).toBe(input);
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
it('does not touch labelSpacing="default" on non-Switch components', async () => {
|
|
46
|
+
const input = `<LegacyToggle labelSpacing="default" />`;
|
|
47
|
+
const output = await applyTransform(input);
|
|
48
|
+
expect(output).toBe(input);
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
it('does not touch other props with a "default" value on Switch', async () => {
|
|
52
|
+
const input = `<Switch label="Notify" value={on} data-variant="default" />`;
|
|
53
|
+
const output = await applyTransform(input);
|
|
54
|
+
expect(output).toBe(input);
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
it('does not touch unrelated "default" string literals', async () => {
|
|
58
|
+
const input = `const theme = {mode: 'default', label: 'Default Mode'};`;
|
|
59
|
+
const output = await applyTransform(input);
|
|
60
|
+
expect(output).toBe(input);
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
it('renames object labelSpacing prop in files importing Switch', async () => {
|
|
64
|
+
const input = `import {Switch} from '@astryxdesign/core/Switch';
|
|
65
|
+
const cfg = {labelSpacing: 'default'};`;
|
|
66
|
+
const output = await applyTransform(input);
|
|
67
|
+
expect(output).toContain("labelSpacing: 'hug'");
|
|
68
|
+
expect(output).not.toContain("'default'");
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
it("renames labelSpacing: 'default' as const in files importing Switch", async () => {
|
|
72
|
+
const input = `import {Switch} from '@astryxdesign/core/Switch';
|
|
73
|
+
const ROWS = [{labelSpacing: 'default' as const, label: 'Adjacent'}];`;
|
|
74
|
+
const output = await applyTransform(input);
|
|
75
|
+
expect(output).toContain("'hug' as const");
|
|
76
|
+
expect(output).not.toContain("'default'");
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
it('does not rename object labelSpacing prop when Switch is not imported', async () => {
|
|
80
|
+
const input = `const cfg = {labelSpacing: 'default'};`;
|
|
81
|
+
const output = await applyTransform(input);
|
|
82
|
+
expect(output).toBe(input);
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
it('renames Storybook argTypes options in files importing Switch', async () => {
|
|
86
|
+
const input = `import {Switch} from '@astryxdesign/core/Switch';
|
|
87
|
+
const meta = {argTypes: {labelSpacing: {control: 'select', options: ['default', 'spread']}}};`;
|
|
88
|
+
const output = await applyTransform(input);
|
|
89
|
+
expect(output).toContain("'hug'");
|
|
90
|
+
expect(output).toContain("'spread'");
|
|
91
|
+
expect(output).not.toContain("'default'");
|
|
92
|
+
});
|
|
93
|
+
});
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file v0.1.5 transform manifest
|
|
5
|
+
*
|
|
6
|
+
* Lists all codemods for the v0.1.5 release in the order they should run.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
import renameSwitchLabelSpacingDefaultToHug, {
|
|
10
|
+
meta as renameSwitchLabelSpacingDefaultToHugMeta,
|
|
11
|
+
} from './rename-switch-label-spacing-default-to-hug.mjs';
|
|
12
|
+
|
|
13
|
+
export default [
|
|
14
|
+
{
|
|
15
|
+
name: 'rename-switch-label-spacing-default-to-hug',
|
|
16
|
+
transform: renameSwitchLabelSpacingDefaultToHug,
|
|
17
|
+
meta: renameSwitchLabelSpacingDefaultToHugMeta,
|
|
18
|
+
},
|
|
19
|
+
];
|