@astryxdesign/cli 0.1.6-canary.2d8ba8b → 0.1.6-canary.2e2e960

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astryxdesign/cli",
3
- "version": "0.1.6-canary.2d8ba8b",
3
+ "version": "0.1.6-canary.2e2e960",
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",
@@ -79,10 +79,10 @@
79
79
  "zod": "^4.4.3"
80
80
  },
81
81
  "peerDependencies": {
82
- "@astryxdesign/charts": "0.1.6-canary.2d8ba8b",
83
- "@astryxdesign/core": "0.1.6-canary.2d8ba8b",
84
- "@astryxdesign/lab": "0.1.6-canary.2d8ba8b",
85
- "@astryxdesign/theme-neutral": "0.1.6-canary.2d8ba8b",
82
+ "@astryxdesign/charts": "0.1.6-canary.2e2e960",
83
+ "@astryxdesign/core": "0.1.6-canary.2e2e960",
84
+ "@astryxdesign/lab": "0.1.6-canary.2e2e960",
85
+ "@astryxdesign/theme-neutral": "0.1.6-canary.2e2e960",
86
86
  "gpt-tokenizer": "^3.4.0"
87
87
  },
88
88
  "peerDependenciesMeta": {
@@ -100,10 +100,10 @@
100
100
  }
101
101
  },
102
102
  "devDependencies": {
103
- "@astryxdesign/charts": "0.1.6-canary.2d8ba8b",
104
- "@astryxdesign/core": "0.1.6-canary.2d8ba8b",
105
- "@astryxdesign/lab": "0.1.6-canary.2d8ba8b",
106
- "@astryxdesign/theme-neutral": "0.1.6-canary.2d8ba8b",
103
+ "@astryxdesign/charts": "0.1.6-canary.2e2e960",
104
+ "@astryxdesign/core": "0.1.6-canary.2e2e960",
105
+ "@astryxdesign/lab": "0.1.6-canary.2e2e960",
106
+ "@astryxdesign/theme-neutral": "0.1.6-canary.2e2e960",
107
107
  "gpt-tokenizer": "^3.4.0"
108
108
  },
109
109
  "scripts": {
@@ -20,7 +20,6 @@ describe('registry', () => {
20
20
  '0.1.2',
21
21
  '0.1.3',
22
22
  '0.1.5',
23
- '0.1.7',
24
23
  ]);
25
24
  });
26
25
  });
@@ -21,7 +21,6 @@ const registry = new Map([
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
23
  ['0.1.5', () => import('./transforms/v0.1.5/index.mjs')],
24
- ['0.1.7', () => import('./transforms/v0.1.7/index.mjs')],
25
24
  ]);
26
25
 
27
26
  // Re-export from the shared utility so registry callers and other consumers
@@ -34,30 +34,15 @@ function getTargetDataAttributes(target) {
34
34
  ];
35
35
  }
36
36
 
37
- /**
38
- * Escape a value for a markdown table cell.
39
- *
40
- * A prop type is a union, and a union is spelled with the same `|` that GFM
41
- * uses to separate cells — backticks do not protect it. A row with more cells
42
- * than the header has columns gets the excess *discarded*, so an unescaped
43
- * `gap: 0 | 0.5 | ...` silently eats its own Default and Description columns.
44
- * <!-- SYNC: packages/core/src/Markdown/parser.ts (splits on unescaped pipes) -->
45
- */
46
- export function mdCell(value) {
47
- return String(value ?? '').replace(/\|/g, '\\|');
48
- }
49
-
50
37
  function formatPropsTable(props) {
51
38
  if (!props || props.length === 0) return '';
52
39
  const lines = [];
53
40
  lines.push('| Prop | Type | Default | Description |');
54
41
  lines.push('|------|------|---------|-------------|');
55
42
  for (const p of props) {
56
- const def = p.default ? `\`${mdCell(p.default)}\`` : '—';
43
+ const def = p.default ? `\`${p.default}\`` : '—';
57
44
  const req = p.required ? ' **(required)**' : '';
58
- lines.push(
59
- `| \`${mdCell(p.name)}\` | \`${mdCell(p.type)}\` | ${def} | ${mdCell(p.description)}${req} |`,
60
- );
45
+ lines.push(`| \`${p.name}\` | \`${p.type}\` | ${def} | ${p.description}${req} |`);
61
46
  }
62
47
  return lines.join('\n');
63
48
  }
@@ -192,7 +177,7 @@ export function formatFull(docs, options = {}) {
192
177
  sections.push('|---------|----------|-------------|');
193
178
  for (const el of docs.usage.anatomy) {
194
179
  const req = el.required ? 'Yes' : 'No';
195
- sections.push(`| ${mdCell(el.name)} | ${req} | ${mdCell(el.description)} |`);
180
+ sections.push(`| ${el.name} | ${req} | ${el.description} |`);
196
181
  }
197
182
  sections.push('');
198
183
  }
@@ -297,9 +282,7 @@ export function formatFull(docs, options = {}) {
297
282
  varLines.push('| CSS Variable | Default | Description |');
298
283
  varLines.push('|-------------|---------|-------------|');
299
284
  for (const v of publicVars) {
300
- varLines.push(
301
- `| \`${mdCell(v.name)}\` | \`${mdCell(v.default)}\` | ${mdCell(v.description)} |`,
302
- );
285
+ varLines.push(`| \`${v.name}\` | \`${v.default}\` | ${v.description} |`);
303
286
  }
304
287
  sections.push(varLines.join('\n') + '\n');
305
288
  }
@@ -395,8 +378,8 @@ export function formatCompact(docs, componentName, importHint) {
395
378
  propLines.push('| CSS Property | Sets |');
396
379
  propLines.push('|-------------|------|');
397
380
  for (const d of docs.theming.derived) {
398
- const target = d.expand === 'container' ? 'container layout tokens' : (d.vars || []).map(v => `\`${mdCell(v)}\``).join(', ');
399
- propLines.push(`| \`${mdCell(d.property)}\` | ${target} |`);
381
+ const target = d.expand === 'container' ? 'container layout tokens' : (d.vars || []).map(v => `\`${v}\``).join(', ');
382
+ propLines.push(`| \`${d.property}\` | ${target} |`);
400
383
  }
401
384
  sections.push(propLines.join('\n') + '\n');
402
385
  }
@@ -412,19 +395,6 @@ export function formatCompact(docs, componentName, importHint) {
412
395
  *
413
396
  * For multi-component docs, extracts the entry matching componentName.
414
397
  */
415
- /**
416
- * Longest union `--detail brief` will spell out inside the one-line signature.
417
- *
418
- * The signature is a glance, not a reference: a six-member enum like
419
- * `start|center|end|between|around|evenly` reads at a glance, an eleven-member
420
- * spacing scale does not — and Stack carries four of them (gap, padding,
421
- * paddingInline, paddingBlock), so it printed the same scale four times. Longer
422
- * unions fall through to the terse prop list, exactly as they did when the type
423
- * was still the bare name `SpacingStep`. The full values are always one
424
- * `astryx component <Name>` away.
425
- */
426
- const SIGNATURE_UNION_MAX_MEMBERS = 8;
427
-
428
398
  export function formatBrief(docs, componentName, importHint, options = {}) {
429
399
  const displayName = componentName.startsWith('XDS')
430
400
  ? componentName.slice(3)
@@ -451,15 +421,13 @@ export function formatBrief(docs, componentName, importHint, options = {}) {
451
421
  const otherProps = [];
452
422
 
453
423
  for (const prop of props) {
454
- const values =
455
- prop.type.includes('|') && !prop.type.includes('ReactNode')
456
- ? prop.type
457
- .replace(/['"]/g, '')
458
- .split('|')
459
- .map(v => v.trim())
460
- : null;
461
- if (values && values.length <= SIGNATURE_UNION_MAX_MEMBERS) {
462
- signatureProps.push(`${prop.name}: ${values.join('|')}`);
424
+ if (prop.type.includes('|') && !prop.type.includes('ReactNode')) {
425
+ const values = prop.type
426
+ .replace(/['"]/g, '')
427
+ .split('|')
428
+ .map(v => v.trim())
429
+ .join('|');
430
+ signatureProps.push(`${prop.name}: ${values}`);
463
431
  } else if (prop.required) {
464
432
  otherProps.unshift(`${prop.name}: ${prop.type.split('|')[0].trim()}`);
465
433
  } else {
@@ -1,7 +1,7 @@
1
1
  // Copyright (c) Meta Platforms, Inc. and affiliates.
2
2
 
3
3
  import {describe, it, expect} from 'vitest';
4
- import {formatBrief, formatFull} from './component-format.mjs';
4
+ import {formatFull} from './component-format.mjs';
5
5
 
6
6
  describe('formatFull sub-component rendering', () => {
7
7
  // Regression guard: sub-components are sometimes declared as a bare
@@ -93,97 +93,3 @@ describe('formatFull theming override keys', () => {
93
93
  expect(out).not.toContain("'astryx-table-cell': {");
94
94
  });
95
95
  });
96
-
97
- /** Pipes that actually separate cells — a `\|` is content, not a separator. */
98
- function cellPipes(row) {
99
- return (row.match(/(?<!\\)\|/g) || []).length;
100
- }
101
-
102
- describe('markdown table cells escape their pipes', () => {
103
- // A prop type is a union, and a union is spelled with `|` — the very
104
- // character GFM uses to separate cells. Backticks do not protect it: a row
105
- // with more cells than the header has columns gets its excess *discarded*,
106
- // so an unescaped `gap: 0 | 0.5 | ...` silently eats its own Default and
107
- // Description columns. See packages/core/src/Markdown/parser.ts, which
108
- // splits on unescaped pipes and preserves `\|` as literal.
109
- it('keeps a union-typed prop row at four cells', () => {
110
- const docs = {
111
- name: 'Grid',
112
- description: 'A grid.',
113
- props: [
114
- {
115
- name: 'gap',
116
- type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
117
- default: '2',
118
- description: 'Spacing between all items.',
119
- },
120
- ],
121
- };
122
- const row = formatFull(docs)
123
- .split('\n')
124
- .find(l => l.startsWith('| `gap`'));
125
-
126
- // A 4-column row has exactly 5 separators. Unescaped, this row had 15.
127
- expect(cellPipes(row)).toBe(5);
128
- expect(row).toContain('\\|');
129
- // The columns the unescaped pipes were swallowing.
130
- expect(row).toContain('`2`');
131
- expect(row).toContain('Spacing between all items.');
132
- });
133
-
134
- it('escapes pipes in a description too', () => {
135
- const docs = {
136
- name: 'AppShell',
137
- description: 'A shell.',
138
- props: [
139
- {
140
- name: 'mobileNav',
141
- type: 'ReactNode',
142
- description: "Config. breakpoint is 'sm' | 'md' | 'lg' | 'none'.",
143
- },
144
- ],
145
- };
146
- const row = formatFull(docs)
147
- .split('\n')
148
- .find(l => l.startsWith('| `mobileNav`'));
149
-
150
- expect(cellPipes(row)).toBe(5);
151
- });
152
- });
153
-
154
- describe('formatBrief signature stays terse', () => {
155
- // `--detail brief` exists to be token-cheap. It hoists union-typed props into
156
- // the signature because a short enum reads at a glance — but an 11-member
157
- // spacing scale does not, and Stack carries four of them (gap, padding,
158
- // paddingInline, paddingBlock), so the same scale got printed four times.
159
- // Long unions stay in the terse prop list, exactly as they did when the type
160
- // was still the bare name `SpacingStep`.
161
- it('hoists a short enum but not a long scale', () => {
162
- const docs = {
163
- name: 'HStack',
164
- description: 'A stack.',
165
- props: [
166
- {
167
- name: 'gap',
168
- type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
169
- description: 'Gap.',
170
- },
171
- {name: 'wrap', type: "'nowrap' | 'wrap' | 'wrap-reverse'", description: 'Wrap.'},
172
- {
173
- name: 'hAlign',
174
- type: "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'",
175
- description: 'Align.',
176
- },
177
- ],
178
- };
179
- const signature = formatBrief(docs, 'HStack', '').split('\n')[0];
180
-
181
- // Short enums still earn their place in the signature.
182
- expect(signature).toContain('wrap: nowrap|wrap|wrap-reverse');
183
- expect(signature).toContain('hAlign: start|center|end|between|around|evenly');
184
- // The long scale does not.
185
- expect(signature).not.toContain('0|0.5|1|1.5|2|3|4|5|6|8|10');
186
- // But the prop is still named, so it is not lost.
187
- expect(formatBrief(docs, 'HStack', '')).toContain('gap');
188
- });
189
- });
@@ -144,64 +144,15 @@ export async function loadDocs(readmePath, {zh = false, dense = false, lang} = {
144
144
 
145
145
  const translation = mod[translationKey];
146
146
 
147
- // A full ComponentDoc-shaped translation (legacy docsZh shape) used to be
148
- // returned wholesale. That made it a REPLACEMENT, not an overlay: any prop
149
- // the translation had not caught up with simply ceased to exist —
150
- // `component Button --zh` silently omitted `isInterruptible` and
151
- // `isIconOnly`. A reader of the translated docs cannot discover a prop that
152
- // is not there. Overlay it instead, so an untranslated prop falls back to
153
- // its English entry. (Same principle as the reference-doc overlays, #2182.)
147
+ // If the translation is a full ComponentDoc (legacy docsZh shape), return it directly
154
148
  if (translation.props || translation.components?.some(c => c.props)) {
155
- return overlayComponentDoc(docs, translation);
149
+ return translation;
156
150
  }
157
151
 
158
152
  // Otherwise it's a TranslationDoc — merge it onto docs
159
153
  return mergeTranslation(docs, translation);
160
154
  }
161
155
 
162
- /**
163
- * Overlay a full-ComponentDoc-shaped translation onto the English doc.
164
- *
165
- * Base order and completeness win; the translation supplies text for the
166
- * entries it covers. Props are matched by name, never by position, so a
167
- * translation that is missing entries (or lists them in another order) can no
168
- * longer drop or misattribute one.
169
- *
170
- * @param {any} docs Base (English) component doc.
171
- * @param {any} translation Translated doc, possibly covering only some props.
172
- * @returns {any} Merged doc with every base prop present.
173
- */
174
- function overlayComponentDoc(docs, translation) {
175
- /** Merge one prop list: keep base entries and order, translate what's covered. */
176
- const overlayProps = (baseProps, tProps) => {
177
- if (!baseProps) return baseProps;
178
- const byName = new Map((tProps ?? []).map(p => [p.name, p]));
179
- return baseProps.map(prop => {
180
- const t = byName.get(prop.name);
181
- // Take the translated text, but never let it drop the prop's contract
182
- // (type/default/required stay authoritative from the English doc).
183
- return t ? {...prop, ...t, name: prop.name, type: prop.type} : prop;
184
- });
185
- };
186
-
187
- const merged = {...docs, ...translation};
188
-
189
- merged.props = overlayProps(docs.props, translation.props);
190
-
191
- if (docs.components) {
192
- const tByName = new Map(
193
- (translation.components ?? []).map(c => [c.name, c]),
194
- );
195
- merged.components = docs.components.map(base => {
196
- const t = tByName.get(base.name);
197
- if (!t) return base;
198
- return {...base, ...t, props: overlayProps(base.props, t.props)};
199
- });
200
- }
201
-
202
- return merged;
203
- }
204
-
205
156
  /**
206
157
  * Find the doc file for a component, checking both top-level
207
158
  * and nested directories. Prefers {Name}.doc.mjs, then README.md
@@ -11,7 +11,6 @@
11
11
 
12
12
  import {discoverHooks, findHookDoc} from './hook-discovery.mjs';
13
13
  import {loadDocs} from './component-loader.mjs';
14
- import {mdCell} from './component-format.mjs';
15
14
 
16
15
  /**
17
16
  * Build a signature string from hook docs.
@@ -52,11 +51,9 @@ function formatParamsTable(params) {
52
51
  lines.push('| Param | Type | Default | Description |');
53
52
  lines.push('|-------|------|---------|-------------|');
54
53
  for (const p of params) {
55
- const def = p.default ? `\`${mdCell(p.default)}\`` : '\u2014';
54
+ const def = p.default ? `\`${p.default}\`` : '\u2014';
56
55
  const req = p.required ? ' **(required)**' : '';
57
- lines.push(
58
- `| \`${mdCell(p.name)}\` | \`${mdCell(p.type)}\` | ${def} | ${mdCell(p.description)}${req} |`,
59
- );
56
+ lines.push(`| \`${p.name}\` | \`${p.type}\` | ${def} | ${p.description}${req} |`);
60
57
  }
61
58
  return lines.join('\n');
62
59
  }
@@ -70,9 +67,7 @@ function formatReturnsTable(returns) {
70
67
  lines.push('| Field | Type | Description |');
71
68
  lines.push('|-------|------|-------------|');
72
69
  for (const r of returns) {
73
- lines.push(
74
- `| \`${mdCell(r.name)}\` | \`${mdCell(r.type)}\` | ${mdCell(r.description)} |`,
75
- );
70
+ lines.push(`| \`${r.name}\` | \`${r.type}\` | ${r.description} |`);
76
71
  }
77
72
  return lines.join('\n');
78
73
  }
@@ -69,8 +69,8 @@ const styles: Record<string, CSSProperties> = {
69
69
  propertyActions: {
70
70
  marginTop: 'auto',
71
71
  },
72
- terminalPanel: {
73
- flexShrink: 0,
72
+ terminalArea: {
73
+ height: '100%',
74
74
  overflow: 'hidden',
75
75
  },
76
76
  };
@@ -301,40 +301,46 @@ export default function ResizableWorkspacePage() {
301
301
  label="Resize terminal"
302
302
  />
303
303
  {!bottomPanel.isCollapsed && (
304
- <Stack
305
- direction="vertical"
306
- height={bottomPanel.size}
307
- style={styles.terminalPanel}>
308
- <TabList
309
- value={activeTermTab}
310
- onChange={val => setActiveTermTab(val)}
311
- size="sm"
312
- hasDivider={false}
313
- style={styles.tabListPadding}>
314
- <Tab label="Terminal" value="terminal" />
315
- <Tab label="Problems" value="problems" />
316
- <Tab label="Output" value="output" />
317
- <Tab label="Debug" value="debug" />
318
- </TabList>
319
- <StackItem
320
- size="fill"
321
- style={styles.terminalWrapper}>
322
- <CodeBlock
323
- code={TERMINAL_OUTPUT}
324
- language="bash"
325
- container="section"
326
- hasLanguageLabel={false}
327
- hasCopyButton={false}
304
+ <div
305
+ style={{
306
+ height: bottomPanel.size,
307
+ flexShrink: 0,
308
+ overflow: 'hidden',
309
+ }}>
310
+ <Stack
311
+ direction="vertical"
312
+ style={styles.contentFill}>
313
+ <TabList
314
+ value={activeTermTab}
315
+ onChange={val => setActiveTermTab(val)}
328
316
  size="sm"
329
- style={{
330
- width: '100%',
331
- height: '100%',
332
- borderWidth: 0,
333
- borderRadius: 0,
334
- }}
335
- />
336
- </StackItem>
337
- </Stack>
317
+ hasDivider={false}
318
+ style={styles.tabListPadding}>
319
+ <Tab label="Terminal" value="terminal" />
320
+ <Tab label="Problems" value="problems" />
321
+ <Tab label="Output" value="output" />
322
+ <Tab label="Debug" value="debug" />
323
+ </TabList>
324
+ <StackItem
325
+ size="fill"
326
+ style={styles.terminalWrapper}>
327
+ <CodeBlock
328
+ code={TERMINAL_OUTPUT}
329
+ language="bash"
330
+ container="section"
331
+ hasLanguageLabel={false}
332
+ hasCopyButton={false}
333
+ size="sm"
334
+ style={{
335
+ width: '100%',
336
+ height: '100%',
337
+ borderWidth: 0,
338
+ borderRadius: 0,
339
+ }}
340
+ />
341
+ </StackItem>
342
+ </Stack>
343
+ </div>
338
344
  )}
339
345
  </Stack>
340
346
  </LayoutContent>
@@ -1,120 +0,0 @@
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} = await import(
7
- '../migrate-table-tableprops-to-direct-props.mjs'
8
- );
9
- const jscodeshift = (await import('jscodeshift')).default;
10
- const j = jscodeshift.withParser('tsx');
11
- const api = {jscodeshift: j, stats: () => {}, report: () => {}};
12
- const file = {source, path: 'test.tsx'};
13
- const result = transform(file, api);
14
- return result ?? source;
15
- }
16
-
17
- const TODO = 'TODO(astryx): tableProps is deprecated';
18
-
19
- describe('migrate-table-tableprops-to-direct-props', () => {
20
- it('lifts className and style to sibling props', async () => {
21
- const input = `import {Table} from '@astryxdesign/core';
22
- const x = <Table tableProps={{className: 'striped', style: {width: 400}}} columns={cols} />;`;
23
- const output = await applyTransform(input);
24
- expect(output).toContain(`className='striped'`);
25
- expect(output).toContain('style={{width: 400}}');
26
- expect(output).not.toContain('tableProps');
27
- });
28
-
29
- it(`lifts 'aria-label' and 'data-testid' string keys to hyphenated props`, async () => {
30
- const input = `import {Table} from '@astryxdesign/core/Table';
31
- const x = <Table tableProps={{'aria-label': 'Users', 'data-testid': 'users-table'}} />;`;
32
- const output = await applyTransform(input);
33
- expect(output).toContain(`aria-label='Users'`);
34
- expect(output).toContain(`data-testid='users-table'`);
35
- expect(output).not.toContain('tableProps');
36
- });
37
-
38
- it('lifts id and an onClick handler', async () => {
39
- const input = `import {Table} from '@xds/core';
40
- const x = <Table tableProps={{id: 'users', onClick: (e) => handle(e)}} />;`;
41
- const output = await applyTransform(input);
42
- expect(output).toContain(`id='users'`);
43
- expect(output).toContain('onClick={(e) => handle(e)}');
44
- expect(output).not.toContain('tableProps');
45
- });
46
-
47
- it('keeps colliding keys in a shrunken tableProps with a TODO comment', async () => {
48
- const input = `import {Table} from '@astryxdesign/core';
49
- const x = <Table className='mine' tableProps={{className: 'theirs', id: 'users'}} />;`;
50
- const output = await applyTransform(input);
51
- // Non-colliding key lifted
52
- expect(output).toContain(`id='users'`);
53
- // Existing sibling wins; colliding key stays inside tableProps
54
- expect(output).toContain(`className='mine'`);
55
- expect(output).toContain('tableProps={{');
56
- expect(output).toContain(`className: 'theirs'`);
57
- expect(output).not.toContain('id: ');
58
- expect(output).toContain(TODO);
59
- });
60
-
61
- it('leaves a dynamic tableProps={identifier} untouched with a TODO comment', async () => {
62
- const input = `import {Table} from '@astryxdesign/core';
63
- const x = <Table tableProps={props} />;`;
64
- const output = await applyTransform(input);
65
- expect(output).toContain('tableProps={props}');
66
- expect(output).toContain(TODO);
67
- });
68
-
69
- it('leaves an object containing a spread untouched with a TODO comment (no partial lift)', async () => {
70
- const input = `import {Table} from '@astryxdesign/core';
71
- const x = <Table tableProps={{className: 'x', ...rest}} />;`;
72
- const output = await applyTransform(input);
73
- expect(output).toContain(`tableProps={{className: 'x', ...rest}}`);
74
- expect(output).not.toContain(`<Table className=`);
75
- expect(output).toContain(TODO);
76
- });
77
-
78
- it('transforms aliased Table imports', async () => {
79
- const input = `import {Table as DataTable} from '@astryxdesign/core';
80
- const x = <DataTable tableProps={{className: 'x'}} />;`;
81
- const output = await applyTransform(input);
82
- expect(output).toContain(`<DataTable className='x' />`);
83
- expect(output).not.toContain('tableProps');
84
- });
85
-
86
- it('does not touch other components with a tableProps attribute', async () => {
87
- const input = `import {Table} from '@astryxdesign/core';
88
- const a = <Table tableProps={{id: 'users'}} />;
89
- const b = <OtherComponent tableProps={{className: 'x'}} />;`;
90
- const output = await applyTransform(input);
91
- expect(output).toContain(`<Table id='users' />`);
92
- expect(output).toContain(`<OtherComponent tableProps={{className: 'x'}} />`);
93
- });
94
-
95
- it('returns undefined for files without a Table import', async () => {
96
- const {default: transform} = await import(
97
- '../migrate-table-tableprops-to-direct-props.mjs'
98
- );
99
- const jscodeshift = (await import('jscodeshift')).default;
100
- const j = jscodeshift.withParser('tsx');
101
- const api = {jscodeshift: j, stats: () => {}, report: () => {}};
102
- const source = `import {Grid} from '@astryxdesign/core';
103
- const x = <Table tableProps={{className: 'x'}} />;`;
104
- const result = transform({source, path: 'test.tsx'}, api);
105
- expect(result).toBeUndefined();
106
- });
107
-
108
- it('returns undefined for already-migrated files (no tableProps)', async () => {
109
- const {default: transform} = await import(
110
- '../migrate-table-tableprops-to-direct-props.mjs'
111
- );
112
- const jscodeshift = (await import('jscodeshift')).default;
113
- const j = jscodeshift.withParser('tsx');
114
- const api = {jscodeshift: j, stats: () => {}, report: () => {}};
115
- const source = `import {Table} from '@astryxdesign/core';
116
- const x = <Table className='x' />;`;
117
- const result = transform({source, path: 'test.tsx'}, api);
118
- expect(result).toBeUndefined();
119
- });
120
- });
@@ -1,19 +0,0 @@
1
- // Copyright (c) Meta Platforms, Inc. and affiliates.
2
-
3
- /**
4
- * @file v0.1.7 transform manifest
5
- *
6
- * Lists all codemods for the v0.1.7 release in the order they should run.
7
- */
8
-
9
- import migrateTableTablePropsToDirectProps, {
10
- meta as migrateTableTablePropsToDirectPropsMeta,
11
- } from './migrate-table-tableprops-to-direct-props.mjs';
12
-
13
- export default [
14
- {
15
- name: 'migrate-table-tableprops-to-direct-props',
16
- transform: migrateTableTablePropsToDirectProps,
17
- meta: migrateTableTablePropsToDirectPropsMeta,
18
- },
19
- ];
@@ -1,188 +0,0 @@
1
- // Copyright (c) Meta Platforms, Inc. and affiliates.
2
-
3
- /**
4
- * @file Codemod: Migrate Table tableProps to direct root props
5
- * @see https://github.com/facebook/astryx/issues/3679
6
- *
7
- * `tableProps` (typed HTMLAttributes<HTMLTableElement>, nesting HTML
8
- * attributes one level deep) is deprecated. As of v0.1.7, <Table> honors
9
- * className/style/xstyle directly and spreads all other BaseProps
10
- * (id, aria-*, data-*, event handlers, ...) onto the root <table>, with
11
- * direct props taking precedence over tableProps.
12
- *
13
- * This codemod lifts object-literal `tableProps` keys into sibling JSX
14
- * props:
15
- *
16
- * - tableProps={{className: 'x', style: s}} → className="x" style={s}
17
- * - String-literal keys ('aria-label', 'data-testid') become hyphenated
18
- * JSX attributes.
19
- * - Keys that collide with an existing sibling attribute (or fail the
20
- * attribute-name guard) are kept inside a shrunken tableProps with a
21
- * trailing TODO comment for manual migration.
22
- * - Dynamic values (tableProps={props}, tableProps={fn()}, objects with
23
- * spreads/computed keys/methods) are left untouched with a TODO comment.
24
- *
25
- * Only elements whose name resolves to a `Table` import (alias-aware)
26
- * from an Astryx core source are rewritten. No import changes are needed.
27
- */
28
-
29
- export const meta = {
30
- title: 'Migrate Table tableProps to direct root props',
31
- description:
32
- 'Lifts object-literal `tableProps` keys on <Table> into sibling JSX props ' +
33
- '(className, style, id, aria-*, data-*, event handlers). Dynamic or ' +
34
- 'colliding entries are kept and annotated with a TODO comment.',
35
- pr: '#3679',
36
- };
37
-
38
- /** Import sources that provide the Astryx Table component. */
39
- const TABLE_IMPORT_SOURCES = new Set([
40
- '@astryxdesign/core',
41
- '@astryxdesign/core/Table',
42
- '@xds/core',
43
- '@xds/core/Table',
44
- ]);
45
-
46
- /** Keys must be valid JSX attribute names to be lifted. */
47
- const LIFTABLE_KEY_RE = /^[a-zA-Z_][a-zA-Z0-9_-]*$/;
48
-
49
- const TODO_COMMENT =
50
- ' TODO(astryx): tableProps is deprecated — merge these into direct props manually ';
51
-
52
- /**
53
- * Extract the static key name from an object property, or null when the
54
- * property is not a simple liftable entry (spread, computed key, method,
55
- * getter/setter, non-string literal key).
56
- */
57
- function getPropertyKeyName(prop) {
58
- if (prop.type !== 'ObjectProperty' && prop.type !== 'Property') return null;
59
- // espree-style Property nodes: skip methods and accessors
60
- if (prop.method || (prop.kind != null && prop.kind !== 'init')) return null;
61
- if (prop.computed) return null;
62
- const key = prop.key;
63
- if (key.type === 'Identifier') return key.name;
64
- if (
65
- (key.type === 'StringLiteral' || key.type === 'Literal') &&
66
- typeof key.value === 'string'
67
- ) {
68
- return key.value;
69
- }
70
- return null;
71
- }
72
-
73
- export default function transformer(file, api) {
74
- const j = api.jscodeshift;
75
- const root = j(file.source);
76
- let hasChanges = false;
77
-
78
- // --- 1. Track local names for the Table import (alias-aware) ---
79
- const tableLocals = new Set();
80
- root.find(j.ImportDeclaration).forEach((path) => {
81
- if (!TABLE_IMPORT_SOURCES.has(path.node.source.value)) return;
82
- for (const spec of path.node.specifiers ?? []) {
83
- if (spec.type === 'ImportSpecifier' && spec.imported.name === 'Table') {
84
- tableLocals.add(spec.local.name);
85
- }
86
- }
87
- });
88
-
89
- if (tableLocals.size === 0) return undefined;
90
-
91
- function attachTodo(attr) {
92
- if (!attr.comments) attr.comments = [];
93
- if (attr.comments.some((c) => c.value === TODO_COMMENT)) return;
94
- attr.comments.push(j.commentBlock(TODO_COMMENT, false, true));
95
- hasChanges = true;
96
- }
97
-
98
- function buildAttributeValue(valueNode) {
99
- if (
100
- valueNode.type === 'StringLiteral' ||
101
- (valueNode.type === 'Literal' && typeof valueNode.value === 'string')
102
- ) {
103
- return j.stringLiteral(valueNode.value);
104
- }
105
- return j.jsxExpressionContainer(valueNode);
106
- }
107
-
108
- // --- 2. Rewrite tableProps on tracked <Table> elements ---
109
- root.find(j.JSXOpeningElement).forEach((path) => {
110
- const name = path.node.name;
111
- const componentName = name.type === 'JSXIdentifier' ? name.name : null;
112
- if (!componentName || !tableLocals.has(componentName)) return;
113
-
114
- const attrs = path.node.attributes;
115
- const tablePropsAttr = attrs.find(
116
- (a) => a.type === 'JSXAttribute' && a.name?.name === 'tableProps',
117
- );
118
- if (!tablePropsAttr) return;
119
-
120
- const value = tablePropsAttr.value;
121
- const isObjectLiteral =
122
- value?.type === 'JSXExpressionContainer' &&
123
- value.expression.type === 'ObjectExpression';
124
-
125
- // Dynamic case: tableProps={identifier}, tableProps={fn()}, ... —
126
- // leave the attribute untouched and warn via a trailing comment
127
- // (api.report is a stub; comments are the only warning channel).
128
- if (!isObjectLiteral) {
129
- attachTodo(tablePropsAttr);
130
- return;
131
- }
132
-
133
- const obj = value.expression;
134
-
135
- // Objects containing spreads, computed keys, or methods are treated
136
- // as dynamic: no partial lift, just the TODO comment.
137
- const allSimple = obj.properties.every(
138
- (prop) => getPropertyKeyName(prop) !== null,
139
- );
140
- if (!allSimple) {
141
- attachTodo(tablePropsAttr);
142
- return;
143
- }
144
-
145
- const lifted = [];
146
- const kept = [];
147
- for (const prop of obj.properties) {
148
- const keyName = getPropertyKeyName(prop);
149
- const collidesWithSibling = attrs.some(
150
- (a) => a.type === 'JSXAttribute' && a.name?.name === keyName,
151
- );
152
- const collidesWithLifted = lifted.some(
153
- (a) => a.name.name === keyName,
154
- );
155
- if (
156
- !LIFTABLE_KEY_RE.test(keyName) ||
157
- collidesWithSibling ||
158
- collidesWithLifted
159
- ) {
160
- kept.push(prop);
161
- continue;
162
- }
163
- lifted.push(
164
- j.jsxAttribute(
165
- j.jsxIdentifier(keyName),
166
- buildAttributeValue(prop.value),
167
- ),
168
- );
169
- }
170
-
171
- const tablePropsIdx = attrs.indexOf(tablePropsAttr);
172
- if (kept.length === 0) {
173
- // All keys lifted — replace tableProps with the sibling attributes.
174
- attrs.splice(tablePropsIdx, 1, ...lifted);
175
- hasChanges = true;
176
- } else {
177
- // Some keys collide or fail the name guard — keep only those in a
178
- // shrunken tableProps and flag it for manual migration.
179
- attrs.splice(tablePropsIdx, 0, ...lifted);
180
- obj.properties = kept;
181
- attachTodo(tablePropsAttr);
182
- if (lifted.length > 0) hasChanges = true;
183
- }
184
- });
185
-
186
- if (!hasChanges) return undefined;
187
- return root.toSource({quote: 'single'});
188
- }
@@ -1,111 +0,0 @@
1
- // Copyright (c) Meta Platforms, Inc. and affiliates.
2
-
3
- /**
4
- * @file Guards translated/compressed component docs against dropping props.
5
- * @input packages/core/src/{Name}/{Name}.doc.mjs — its `docs`, `docsZh`, `docsDense`.
6
- * @output Vitest failures naming every prop that exists in `docs` but vanishes
7
- * from a translated view.
8
- * @position Regression gate for component-loader.mjs.
9
- *
10
- * A `docsZh` that carries its own `props` array used to REPLACE the base doc
11
- * wholesale, so any prop the translation had not caught up with simply ceased
12
- * to exist: `astryx component Button --zh` silently omitted `isInterruptible`
13
- * and `isIconOnly`. A reader of the translated docs cannot discover a prop that
14
- * is not there, and CLAUDE.md tells every AI agent to read these docs.
15
- *
16
- * Translations are now an overlay: a prop the translation does not cover falls
17
- * back to its English entry rather than disappearing. Same principle as the
18
- * reference-doc overlays in #2182 — an overlay covering a subset must not
19
- * destroy what it does not cover.
20
- */
21
-
22
- import {describe, it, expect} from 'vitest';
23
- import * as fs from 'node:fs';
24
- import * as path from 'node:path';
25
- import {pathToFileURL} from 'node:url';
26
- import {loadDocs} from './component-loader.mjs';
27
-
28
- const CORE_SRC = path.join(
29
- import.meta.dirname,
30
- '..',
31
- '..',
32
- '..',
33
- 'core',
34
- 'src',
35
- );
36
-
37
- /** Component dirs that ship a doc file. */
38
- function componentDocs() {
39
- const out = [];
40
- for (const dir of fs.readdirSync(CORE_SRC)) {
41
- const docPath = path.join(CORE_SRC, dir, `${dir}.doc.mjs`);
42
- if (!fs.existsSync(docPath)) continue;
43
- if (!fs.readdirSync(path.join(CORE_SRC, dir)).includes(`${dir}.doc.mjs`)) {
44
- continue; // case-exact match only
45
- }
46
- out.push({name: dir, docPath});
47
- }
48
- return out;
49
- }
50
-
51
- /** Prop names on a doc, across single- and multi-component shapes. */
52
- function propNames(doc) {
53
- const names = new Set();
54
- for (const p of doc?.props ?? []) names.add(p.name);
55
- for (const c of doc?.components ?? []) {
56
- for (const p of c.props ?? []) names.add(`${c.name ?? '?'}.${p.name}`);
57
- }
58
- return names;
59
- }
60
-
61
- describe('translated component docs never drop a prop', () => {
62
- const comps = componentDocs();
63
-
64
- it('finds component docs to check', () => {
65
- expect(comps.length).toBeGreaterThan(0);
66
- });
67
-
68
- for (const {name, docPath} of comps) {
69
- for (const locale of ['zh', 'dense']) {
70
- it(`${name} --${locale}: documents every prop the English doc documents`, async () => {
71
- const mod = await import(pathToFileURL(docPath).href);
72
- const key = locale === 'zh' ? 'docsZh' : 'docsDense';
73
- if (!mod[key]) return; // no overlay, nothing to drift
74
-
75
- const english = propNames(mod.docs);
76
- const translated = propNames(
77
- await loadDocs(docPath, {[locale]: true}),
78
- );
79
-
80
- const dropped = [...english].filter(p => !translated.has(p));
81
- expect(
82
- dropped,
83
- `${name}.doc.mjs ${key} drops ${dropped.length} prop(s) from the ` +
84
- `--${locale} view: ${dropped.join(', ')}. A reader of the ` +
85
- `translated docs cannot discover a prop that is not there. An ` +
86
- `untranslated prop must fall back to its English entry, not vanish.`,
87
- ).toEqual([]);
88
- });
89
- }
90
- }
91
- });
92
-
93
- describe('the reported symptom', () => {
94
- it('astryx component Button --zh still lists isInterruptible and isIconOnly', async () => {
95
- const docPath = path.join(CORE_SRC, 'Button', 'Button.doc.mjs');
96
- const zh = await loadDocs(docPath, {zh: true});
97
- const names = propNames(zh);
98
- expect(names.has('isInterruptible')).toBe(true);
99
- expect(names.has('isIconOnly')).toBe(true);
100
- });
101
-
102
- it('keeps the translated descriptions it does have', async () => {
103
- const docPath = path.join(CORE_SRC, 'Button', 'Button.doc.mjs');
104
- const mod = await import(pathToFileURL(docPath).href);
105
- const zh = await loadDocs(docPath, {zh: true});
106
-
107
- const translated = mod.docsZh.props.find(p => p.name === 'variant');
108
- const merged = zh.props.find(p => p.name === 'variant');
109
- expect(merged.description).toBe(translated.description);
110
- });
111
- });