@astryxdesign/cli 0.1.6-canary.1a0fef5 → 0.1.6-canary.1b61ba6

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.
Files changed (53) hide show
  1. package/docs/integration-authoring.md +105 -0
  2. package/docs/internationalization.doc.mjs +243 -0
  3. package/package.json +13 -9
  4. package/src/api/integration-block-exports.test.mjs +240 -0
  5. package/src/api/template-suffix.test.mjs +246 -0
  6. package/src/api/template.mjs +104 -28
  7. package/src/api/validate-integration.mjs +0 -8
  8. package/src/codemods/__tests__/registry.test.mjs +1 -0
  9. package/src/codemods/registry.mjs +1 -0
  10. package/src/codemods/transforms/v0.1.7/__tests__/migrate-table-tableprops-to-direct-props.test.mjs +120 -0
  11. package/src/codemods/transforms/v0.1.7/index.mjs +19 -0
  12. package/src/codemods/transforms/v0.1.7/migrate-table-tableprops-to-direct-props.mjs +188 -0
  13. package/src/config.mjs +5 -14
  14. package/src/doc.mjs +27 -0
  15. package/src/doc.test.mjs +383 -0
  16. package/src/integration.mjs +4 -15
  17. package/src/lib/component-discovery.importpath.test.mjs +59 -0
  18. package/src/lib/component-discovery.mjs +15 -5
  19. package/src/lib/component-format.mjs +45 -13
  20. package/src/lib/component-format.test.mjs +95 -1
  21. package/src/lib/component-loader.mjs +104 -2
  22. package/src/lib/componentDocOverlay.test.mjs +111 -0
  23. package/src/lib/config-schema.mjs +0 -30
  24. package/src/lib/hook-format.mjs +8 -3
  25. package/src/lib/xle/registry.mjs +0 -5
  26. package/src/schemas/doc-schema.mjs +226 -0
  27. package/src/schemas/template-schema.mjs +47 -0
  28. package/src/template.mjs +9 -67
  29. package/src/types/config.d.ts +11 -66
  30. package/src/types/doc.d.ts +23 -0
  31. package/src/types/integration.d.ts +7 -18
  32. package/src/types/template-api.d.ts +14 -50
  33. package/templates/blocks/components/Avatar/AvatarGroup.tsx +5 -7
  34. package/templates/blocks/components/Avatar/AvatarShowcase.tsx +4 -6
  35. package/templates/blocks/components/Avatar/AvatarUserCard.tsx +3 -5
  36. package/templates/blocks/components/Avatar/AvatarWithImage.tsx +8 -6
  37. package/templates/blocks/components/Avatar/AvatarWithStatus.tsx +3 -5
  38. package/templates/blocks/components/ChatComposerInput/ChatComposerInputControlledInput.tsx +1 -1
  39. package/templates/blocks/components/ChatComposerInput/ChatComposerInputDisabled.tsx +1 -1
  40. package/templates/blocks/components/ChatComposerInput/ChatComposerInputMentionTrigger.tsx +1 -1
  41. package/templates/blocks/components/ChatComposerInput/ChatComposerInputMultipleTriggers.tsx +1 -1
  42. package/templates/blocks/components/ChatComposerInput/ChatComposerInputShowcase.tsx +1 -1
  43. package/templates/blocks/components/ChatComposerInput/ChatComposerInputSlashCommands.tsx +1 -1
  44. package/templates/blocks/components/VisuallyHidden/VisuallyHiddenLiveRegion.doc.mjs +14 -0
  45. package/templates/blocks/components/VisuallyHidden/VisuallyHiddenLiveRegion.tsx +41 -0
  46. package/templates/blocks/components/VisuallyHidden/VisuallyHiddenShowcase.doc.mjs +13 -0
  47. package/templates/blocks/components/VisuallyHidden/VisuallyHiddenShowcase.tsx +78 -0
  48. package/templates/blocks/components/VisuallyHidden/VisuallyHiddenStructuralHeading.doc.mjs +14 -0
  49. package/templates/blocks/components/VisuallyHidden/VisuallyHiddenStructuralHeading.tsx +38 -0
  50. package/templates/blocks/components/VisuallyHidden/VisuallyHiddenSupplementaryContext.doc.mjs +14 -0
  51. package/templates/blocks/components/VisuallyHidden/VisuallyHiddenSupplementaryContext.tsx +47 -0
  52. package/templates/pages/theme-showcase/page.tsx +7 -7
  53. package/templates/themes/neutral/neutralTheme.ts +63 -32
@@ -0,0 +1,59 @@
1
+ // Copyright (c) Meta Platforms, Inc. and affiliates.
2
+
3
+ /**
4
+ * @file Verifies that `.ts`-authored sources (hooks and other functions) are
5
+ * found by `findComponentSource`, so `resolveImportPath` derives a
6
+ * tree-shakeable subpath instead of falling back to the bare package root.
7
+ *
8
+ * Runs against the real packages/core source, not mocks.
9
+ */
10
+
11
+ import {describe, it, expect} from 'vitest';
12
+ import {
13
+ findComponentSource,
14
+ resolveImportPath,
15
+ } from './component-discovery.mjs';
16
+ import {findCoreDir} from '../utils/paths.mjs';
17
+
18
+ describe('findComponentSource resolves .ts-authored sources', () => {
19
+ const coreDir = findCoreDir();
20
+
21
+ it('finds a hook authored as a .ts file (not just .tsx)', () => {
22
+ const src = findComponentSource(coreDir, 'useMediaQuery');
23
+ expect(src).toBeTruthy();
24
+ expect(src.endsWith('useMediaQuery.ts')).toBe(true);
25
+ });
26
+
27
+ it('still finds a component authored as .tsx', () => {
28
+ const src = findComponentSource(coreDir, 'Button');
29
+ expect(src).toBeTruthy();
30
+ expect(src.endsWith('.tsx')).toBe(true);
31
+ });
32
+ });
33
+
34
+ describe('resolveImportPath reproduces authored hook importPaths', () => {
35
+ const coreDir = findCoreDir();
36
+
37
+ // Representative sample of core hooks whose sources are `.ts` files. Before
38
+ // the `.ts` fix these fell back to bare `@astryxdesign/core`; the derived
39
+ // subpath must now match the value each hook's doc currently authors.
40
+ const cases = [
41
+ ['useMediaQuery', '@astryxdesign/core/hooks'],
42
+ ['useResizable', '@astryxdesign/core/Resizable'],
43
+ ['useTheme', '@astryxdesign/core/theme'],
44
+ ['useFocusTrap', '@astryxdesign/core/hooks'],
45
+ ['useOverflow', '@astryxdesign/core/hooks'],
46
+ ];
47
+
48
+ for (const [name, expected] of cases) {
49
+ it(`${name} derives ${expected}`, () => {
50
+ expect(resolveImportPath(coreDir, name)).toBe(expected);
51
+ });
52
+ }
53
+
54
+ it('never falls back to the bare package root for a .ts hook', () => {
55
+ for (const [name] of cases) {
56
+ expect(resolveImportPath(coreDir, name)).not.toBe('@astryxdesign/core');
57
+ }
58
+ });
59
+ });
@@ -273,14 +273,24 @@ export function findComponentReadme(coreDir, name) {
273
273
  * For "Button" finds src/Button/XDSButton.tsx
274
274
  * For "Layout" finds src/Layout/XDSLayout/XDSLayout.tsx
275
275
  * For "Card" finds src/Layout/Container/XDSCard.tsx (deep search fallback)
276
+ *
277
+ * Hooks and other functions are authored as `.ts` (e.g. `useMediaQuery.ts`,
278
+ * `useResizable.ts`), so `.ts` candidates are searched alongside `.tsx`. Without
279
+ * this, deriving the import path for a `.ts`-authored function falls back to the
280
+ * bare `@astryxdesign/core` root instead of its tree-shakeable subpath.
276
281
  */
277
282
  export function findComponentSource(coreDir, name) {
278
283
  const srcDir = path.join(coreDir, 'src');
279
- // Try the prefixed form (`XDSButton.tsx`) first since that is the current
280
- // on-disk convention, then the bare form (`Button.tsx`) that the Astryx-prefix
281
- // migration (P4) renames to. Listing the prefixed name first keeps behavior
282
- // identical until files are actually renamed.
283
- const candidateFiles = [`XDS${name}.tsx`, `${name}.tsx`];
284
+ // Try the prefixed forms (`XDSButton.tsx`) first since that is the current
285
+ // on-disk convention, then the bare forms (`Button.tsx`) that the Astryx-prefix
286
+ // migration (P4) renames to. `.tsx` before `.ts` within each so a component's
287
+ // `.tsx` wins over a same-named `.ts` helper; `.ts` covers hooks/functions.
288
+ const candidateFiles = [
289
+ `XDS${name}.tsx`,
290
+ `${name}.tsx`,
291
+ `XDS${name}.ts`,
292
+ `${name}.ts`,
293
+ ];
284
294
 
285
295
  function searchDir(dirPath) {
286
296
  if (!fs.existsSync(dirPath)) return null;
@@ -34,15 +34,30 @@ 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
+
37
50
  function formatPropsTable(props) {
38
51
  if (!props || props.length === 0) return '';
39
52
  const lines = [];
40
53
  lines.push('| Prop | Type | Default | Description |');
41
54
  lines.push('|------|------|---------|-------------|');
42
55
  for (const p of props) {
43
- const def = p.default ? `\`${p.default}\`` : '—';
56
+ const def = p.default ? `\`${mdCell(p.default)}\`` : '—';
44
57
  const req = p.required ? ' **(required)**' : '';
45
- lines.push(`| \`${p.name}\` | \`${p.type}\` | ${def} | ${p.description}${req} |`);
58
+ lines.push(
59
+ `| \`${mdCell(p.name)}\` | \`${mdCell(p.type)}\` | ${def} | ${mdCell(p.description)}${req} |`,
60
+ );
46
61
  }
47
62
  return lines.join('\n');
48
63
  }
@@ -177,7 +192,7 @@ export function formatFull(docs, options = {}) {
177
192
  sections.push('|---------|----------|-------------|');
178
193
  for (const el of docs.usage.anatomy) {
179
194
  const req = el.required ? 'Yes' : 'No';
180
- sections.push(`| ${el.name} | ${req} | ${el.description} |`);
195
+ sections.push(`| ${mdCell(el.name)} | ${req} | ${mdCell(el.description)} |`);
181
196
  }
182
197
  sections.push('');
183
198
  }
@@ -282,7 +297,9 @@ export function formatFull(docs, options = {}) {
282
297
  varLines.push('| CSS Variable | Default | Description |');
283
298
  varLines.push('|-------------|---------|-------------|');
284
299
  for (const v of publicVars) {
285
- varLines.push(`| \`${v.name}\` | \`${v.default}\` | ${v.description} |`);
300
+ varLines.push(
301
+ `| \`${mdCell(v.name)}\` | \`${mdCell(v.default)}\` | ${mdCell(v.description)} |`,
302
+ );
286
303
  }
287
304
  sections.push(varLines.join('\n') + '\n');
288
305
  }
@@ -378,8 +395,8 @@ export function formatCompact(docs, componentName, importHint) {
378
395
  propLines.push('| CSS Property | Sets |');
379
396
  propLines.push('|-------------|------|');
380
397
  for (const d of docs.theming.derived) {
381
- const target = d.expand === 'container' ? 'container layout tokens' : (d.vars || []).map(v => `\`${v}\``).join(', ');
382
- propLines.push(`| \`${d.property}\` | ${target} |`);
398
+ const target = d.expand === 'container' ? 'container layout tokens' : (d.vars || []).map(v => `\`${mdCell(v)}\``).join(', ');
399
+ propLines.push(`| \`${mdCell(d.property)}\` | ${target} |`);
383
400
  }
384
401
  sections.push(propLines.join('\n') + '\n');
385
402
  }
@@ -395,6 +412,19 @@ export function formatCompact(docs, componentName, importHint) {
395
412
  *
396
413
  * For multi-component docs, extracts the entry matching componentName.
397
414
  */
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
+
398
428
  export function formatBrief(docs, componentName, importHint, options = {}) {
399
429
  const displayName = componentName.startsWith('XDS')
400
430
  ? componentName.slice(3)
@@ -421,13 +451,15 @@ export function formatBrief(docs, componentName, importHint, options = {}) {
421
451
  const otherProps = [];
422
452
 
423
453
  for (const prop of props) {
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}`);
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('|')}`);
431
463
  } else if (prop.required) {
432
464
  otherProps.unshift(`${prop.name}: ${prop.type.split('|')[0].trim()}`);
433
465
  } 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 {formatFull} from './component-format.mjs';
4
+ import {formatBrief, 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,3 +93,97 @@ 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
+ });
@@ -5,6 +5,59 @@
5
5
  */
6
6
 
7
7
  import {pathToFileURL} from 'node:url';
8
+ import {importUserModule} from './module-loader.mjs';
9
+ import {formatZodError} from './config-schema.mjs';
10
+ import {ComponentDocSchema} from '../schemas/doc-schema.mjs';
11
+
12
+ /**
13
+ * Load a component doc through the shared load/validation boundary.
14
+ *
15
+ * This is the typed counterpart to {@link loadDocs}: it loads `.doc.ts` via
16
+ * jiti (and `.doc.mjs`/`.doc.js` via native import) and validates against
17
+ * {@link ComponentDocSchema}. That schema accepts BOTH formats, so this loader
18
+ * reads whichever the file uses:
19
+ * - NEW: the factory default export
20
+ * (`export default createComponentDoc({...})` / `createFunctionDoc` /
21
+ * `createDoc`) — the same single-export convention
22
+ * {@link loadModuleWithSchema} uses for config/integration/template. These
23
+ * carry a stamped `type` and validate against the matching per-kind schema.
24
+ * - OLD: the legacy loose `export const docs = {...}` (no `type`), validated
25
+ * against the permissive legacy union.
26
+ * The default export wins when both are present. Throws a readable
27
+ * `formatZodError`-style message on failure. Translations (`docsZh`/
28
+ * `docsDense`) are merged exactly as {@link loadDocs} does so callers see
29
+ * identical output.
30
+ *
31
+ * @param {string} docPath absolute path to a `.doc.{ts,mjs,js}` file
32
+ * @param {{zh?: boolean, dense?: boolean, lang?: string}} [opts]
33
+ * @returns {Promise<object>} the validated (and optionally translated) doc
34
+ */
35
+ export async function loadComponentDoc(
36
+ docPath,
37
+ {zh = false, dense = false, lang} = {},
38
+ ) {
39
+ const mod = await importUserModule(docPath);
40
+ const authored = mod?.default ?? mod?.docs;
41
+
42
+ const result = ComponentDocSchema.safeParse(authored);
43
+ if (!result.success) {
44
+ throw new Error(formatZodError(docPath, result.error));
45
+ }
46
+ const docs = authored;
47
+
48
+ const locale = lang || (dense ? 'dense' : zh ? 'zh' : null);
49
+ if (!locale) return docs;
50
+
51
+ const translationKey =
52
+ locale === 'zh' ? 'docsZh' : locale === 'dense' ? 'docsDense' : null;
53
+ if (!translationKey || !mod[translationKey]) return docs;
54
+
55
+ const translation = mod[translationKey];
56
+ if (translation.props || translation.components?.some(c => c.props)) {
57
+ return translation;
58
+ }
59
+ return mergeTranslation(docs, translation);
60
+ }
8
61
 
9
62
  export function mergeTranslation(docs, translation) {
10
63
  if (!translation) return docs;
@@ -91,15 +144,64 @@ export async function loadDocs(readmePath, {zh = false, dense = false, lang} = {
91
144
 
92
145
  const translation = mod[translationKey];
93
146
 
94
- // If the translation is a full ComponentDoc (legacy docsZh shape), return it directly
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.)
95
154
  if (translation.props || translation.components?.some(c => c.props)) {
96
- return translation;
155
+ return overlayComponentDoc(docs, translation);
97
156
  }
98
157
 
99
158
  // Otherwise it's a TranslationDoc — merge it onto docs
100
159
  return mergeTranslation(docs, translation);
101
160
  }
102
161
 
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
+
103
205
  /**
104
206
  * Find the doc file for a component, checking both top-level
105
207
  * and nested directories. Prefers {Name}.doc.mjs, then README.md
@@ -0,0 +1,111 @@
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
+ });
@@ -73,33 +73,3 @@ export function formatZodError(label, error) {
73
73
  .join('; ');
74
74
  return `${label} is invalid: ${issues}`;
75
75
  }
76
-
77
- /**
78
- * @param {unknown} config
79
- * @returns {import('../types/config').AstryxConfig}
80
- */
81
- export function validateConfig(config) {
82
- const result = AstryxConfigSchema.safeParse(config);
83
- if (!result.success) {
84
- throw new Error(
85
- formatZodError('astryx.config default export', result.error),
86
- );
87
- }
88
- return result.data;
89
- }
90
-
91
- /**
92
- * @param {unknown} integration
93
- * @param {string} [label]
94
- * @returns {import('../types/integration').AstryxIntegration}
95
- */
96
- export function validateIntegration(
97
- integration,
98
- label = 'integration manifest',
99
- ) {
100
- const result = AstryxIntegrationSchema.safeParse(integration);
101
- if (!result.success) {
102
- throw new Error(formatZodError(label, result.error));
103
- }
104
- return result.data;
105
- }
@@ -11,6 +11,7 @@
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';
14
15
 
15
16
  /**
16
17
  * Build a signature string from hook docs.
@@ -51,9 +52,11 @@ function formatParamsTable(params) {
51
52
  lines.push('| Param | Type | Default | Description |');
52
53
  lines.push('|-------|------|---------|-------------|');
53
54
  for (const p of params) {
54
- const def = p.default ? `\`${p.default}\`` : '\u2014';
55
+ const def = p.default ? `\`${mdCell(p.default)}\`` : '\u2014';
55
56
  const req = p.required ? ' **(required)**' : '';
56
- lines.push(`| \`${p.name}\` | \`${p.type}\` | ${def} | ${p.description}${req} |`);
57
+ lines.push(
58
+ `| \`${mdCell(p.name)}\` | \`${mdCell(p.type)}\` | ${def} | ${mdCell(p.description)}${req} |`,
59
+ );
57
60
  }
58
61
  return lines.join('\n');
59
62
  }
@@ -67,7 +70,9 @@ function formatReturnsTable(returns) {
67
70
  lines.push('| Field | Type | Description |');
68
71
  lines.push('|-------|------|-------------|');
69
72
  for (const r of returns) {
70
- lines.push(`| \`${r.name}\` | \`${r.type}\` | ${r.description} |`);
73
+ lines.push(
74
+ `| \`${mdCell(r.name)}\` | \`${mdCell(r.type)}\` | ${mdCell(r.description)} |`,
75
+ );
71
76
  }
72
77
  return lines.join('\n');
73
78
  }
@@ -230,8 +230,3 @@ export async function buildRegistry({cwd = process.cwd()} = {}) {
230
230
  };
231
231
  return cachedRegistry;
232
232
  }
233
-
234
- /** Test seam — drop the module-level cache. */
235
- export function resetRegistryCache() {
236
- cachedRegistry = null;
237
- }