@astryxdesign/cli 0.6.3-canary.98a2e4e → 0.6.3-canary.9c4d44d

package/assets/codemods/transform-prop.mjs

@@ -0,0 +1,109 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * Find imported components, resolve their local JSX names (including aliases),
+ * and yield matching JSX prop paths to a visitor.
+ *
+ * This helper intentionally stops at the JSX boundary. It does not follow
+ * variables, helper calls, object spreads, wrapper components, or types.
+ *
+ * @param {any} root jscodeshift collection for one source file
+ * @param {any} j configured jscodeshift instance
+ * @param {{
+ *   matchesImport: (source: string) => boolean,
+ *   components: ReadonlyMap<string, ReadonlySet<string>>,
+ *   normalizeComponentName?: (name: string) => string,
+ * }} options
+ * @param {(propPath: any, context: {component: string, localName: string}) => void} visit
+ */
+export function transformProp(root, j, options, visit) {
+  const normalize = options.normalizeComponentName ?? (name => name);
+  /** @type {Map<string, {component: string, props: ReadonlySet<string>}>} */
+  const directBindings = new Map();
+  /** @type {Set<string>} */
+  const namespaceBindings = new Set();
+
+  root.find(j.ImportDeclaration).forEach((/** @type {any} */ importPath) => {
+    const source = importPath.node.source.value;
+    if (
+      importPath.node.importKind === 'type' ||
+      typeof source !== 'string' ||
+      !options.matchesImport(source)
+    ) {
+      return;
+    }
+
+    const subpathName = normalize(source.split('/').at(-1) ?? '');
+    const subpathProps = options.components.get(subpathName);
+
+    for (const specifier of importPath.node.specifiers ?? []) {
+      if (specifier.importKind === 'type') continue;
+
+      if (specifier.type === 'ImportSpecifier') {
+        const importedName =
+          specifier.imported?.name ?? specifier.imported?.value;
+        if (typeof importedName !== 'string') continue;
+        const component = normalize(importedName);
+        const props = options.components.get(component);
+        if (!props) continue;
+        directBindings.set(specifier.local?.name ?? importedName, {
+          component,
+          props,
+        });
+      } else if (specifier.type === 'ImportDefaultSpecifier' && subpathProps) {
+        directBindings.set(specifier.local.name, {
+          component: subpathName,
+          props: subpathProps,
+        });
+      } else if (specifier.type === 'ImportNamespaceSpecifier') {
+        namespaceBindings.add(specifier.local.name);
+      }
+    }
+  });
+
+  if (directBindings.size === 0 && namespaceBindings.size === 0) return;
+
+  root.find(j.JSXOpeningElement).forEach((/** @type {any} */ jsxPath) => {
+    const name = jsxPath.node.name;
+    let localName;
+    let component;
+    let props;
+
+    if (name.type === 'JSXIdentifier') {
+      localName = name.name;
+      const binding = directBindings.get(localName);
+      if (!binding) return;
+      ({component, props} = binding);
+    } else if (
+      name.type === 'JSXMemberExpression' &&
+      name.object?.type === 'JSXIdentifier' &&
+      name.property?.type === 'JSXIdentifier' &&
+      namespaceBindings.has(name.object.name)
+    ) {
+      localName = name.object.name;
+      component = normalize(name.property.name);
+      props = options.components.get(component);
+      if (!props) return;
+    } else {
+      return;
+    }
+
+    // A parameter or local declaration with the imported name shadows the
+    // module binding. Only JSX tags whose root binding resolves to Program are
+    // considered usages of the import discovered above.
+    const bindingScope = jsxPath.scope.lookup(localName);
+    if (!bindingScope || bindingScope.path.node.type !== 'Program') return;
+
+    for (let index = 0; index < jsxPath.node.attributes.length; index++) {
+      const attribute = jsxPath.node.attributes[index];
+      if (
+        attribute.type !== 'JSXAttribute' ||
+        attribute.name?.type !== 'JSXIdentifier' ||
+        !props.has(attribute.name.name)
+      ) {
+        continue;
+      }
+      visit(jsxPath.get('attributes', index), {component, localName});
+    }
+  });
+}

package/assets/codemods/transform-prop.test.mjs

@@ -0,0 +1,95 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import jscodeshift from 'jscodeshift';
+import {transformProp} from './transform-prop.mjs';
+
+const j = jscodeshift.withParser('tsx');
+const components = new Map([
+  ['Widget', new Set(['tone'])],
+  ['Group', new Set(['size'])],
+]);
+
+function apply(source) {
+  const root = j(source);
+  transformProp(
+    root,
+    j,
+    {
+      matchesImport: value => /^@example\/core(?:\/|$)/.test(value),
+      components,
+      normalizeComponentName: name =>
+        name.startsWith('XDS') ? name.slice(3) : name,
+    },
+    propPath => {
+      propPath.node.name.name = `migrated${propPath.node.name.name}`;
+    },
+  );
+  return root.toSource({quote: 'single'});
+}
+
+describe('transformProp', () => {
+  it('maps named import aliases to their JSX usages', () => {
+    const output = apply(`import {Widget as Card} from '@example/core';
+const view = <Card tone="old" other="old" />;`);
+
+    expect(output).toContain('<Card migratedtone="old" other="old"');
+  });
+
+  it('maps default subpath imports', () => {
+    const output = apply(`import Card from '@example/core/Widget';
+const view = <Card tone="old" />;`);
+
+    expect(output).toContain('<Card migratedtone="old"');
+  });
+
+  it('ignores declaration-level type imports', () => {
+    const output = apply(`import type {Widget} from '@example/core';
+const Widget = props => <div {...props} />;
+const view = <Widget tone="old" />;`);
+
+    expect(output).toContain('<Widget tone="old"');
+    expect(output).not.toContain('migratedtone');
+  });
+
+  it('ignores type specifiers in mixed imports', () => {
+    const output = apply(`import {type Widget, Group} from '@example/core';
+const Widget = props => <div {...props} />;
+const view = <><Widget tone="old" /><Group size="old" /></>;`);
+
+    expect(output).toContain('<Widget tone="old"');
+    expect(output).toContain('<Group migratedsize="old"');
+    expect(output).not.toContain('<Widget migratedtone');
+  });
+
+  it('maps namespace imports', () => {
+    const output = apply(`import * as Core from '@example/core';
+const view = <Core.Group size="old" />;`);
+
+    expect(output).toContain('<Core.Group migratedsize="old"');
+  });
+
+  it('ignores same-named imports from other packages', () => {
+    const source = `import {Widget} from '@other/core';
+const view = <Widget tone="old" />;`;
+    expect(apply(source)).toBe(source);
+  });
+
+  it('ignores a local binding that shadows an imported alias', () => {
+    const output = apply(`import {Widget as Card} from '@example/core';
+const migrated = <Card tone="old" />;
+function Local(Card) { return <Card tone="local" />; }`);
+
+    expect(output).toContain('<Card migratedtone="old"');
+    expect(output).toContain('<Card tone="local"');
+  });
+
+  it('yields only configured props on configured components', () => {
+    const output = apply(`import {Widget, Group} from '@example/core';
+const a = <Widget size="old" tone="old" />;
+const b = <Group tone="old" size="old" />;`);
+
+    expect(output).toContain('<Widget size="old" migratedtone="old"');
+    expect(output).toContain('<Group tone="old" migratedsize="old"');
+  });
+});

package/assets/codemods/transforms/next/__tests__/migrate-native-picker-to-presentation.test.mjs

@@ -0,0 +1,63 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import transform from '../migrate-native-picker-to-presentation.mjs';
+
+async function applyTransform(source) {
+  const jscodeshift = (await import('jscodeshift')).default;
+  const j = jscodeshift.withParser('tsx');
+  const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+  return transform({source, path: 'test.tsx'}, api) ?? source;
+}
+
+describe('migrate-native-picker-to-presentation', () => {
+  it('maps DateInput and DateTimeInput values (FR3)', async () => {
+    const output =
+      await applyTransform(`import {DateInput, DateTimeInput} from '@astryxdesign/core';
+const a = <DateInput label="d" nativePicker="touch" />;
+const b = <DateInput label="d" nativePicker="always" />;
+const c = <DateTimeInput label="dt" nativePicker="never" />;`);
+
+    expect(output).toContain("presentation='adaptive-native'");
+    expect(output).toContain("presentation='native'");
+    expect(output).toContain("presentation='adaptive-bottom-sheet'");
+    expect(output).not.toContain('nativePicker');
+  });
+
+  it('maps TimeInput never to text-input (FR3)', async () => {
+    const output =
+      await applyTransform(`import {TimeInput} from '@astryxdesign/core';
+const a = <TimeInput label="t" nativePicker="never" />;
+const b = <TimeInput label="t" nativePicker={'touch'} />;`);
+
+    expect(output).toContain("presentation='text-input'");
+    expect(output).toContain("presentation={'adaptive-native'}");
+  });
+
+  it('drops nativePicker when presentation is already set (FR4)', async () => {
+    const output =
+      await applyTransform(`import {DateInput} from '@astryxdesign/core';
+const a = <DateInput label="d" presentation="popover" nativePicker="always" />;`);
+
+    expect(output).toContain('presentation="popover"');
+    expect(output).not.toContain('nativePicker');
+  });
+
+  it('leaves dynamic values and unrelated components unchanged', async () => {
+    const source = `import {DateInput, Selector} from '@astryxdesign/core';
+const a = <DateInput label="d" nativePicker={mode} />;
+const b = <Selector nativePicker="never" />;`;
+    expect(await applyTransform(source)).toBe(source);
+  });
+
+  it('leaves a mixed static/dynamic conditional byte-identical when a sibling migrates', async () => {
+    const output =
+      await applyTransform(`import {TimeInput} from '@astryxdesign/core';
+const a = <TimeInput label="t" nativePicker="touch" />;
+const b = <TimeInput label="t" nativePicker={flag ? 'always' : mode} />;`);
+
+    expect(output).toContain("presentation='adaptive-native'");
+    expect(output).toContain("nativePicker={flag ? 'always' : mode}");
+    expect(output).not.toContain("'native'");
+  });
+});

package/assets/codemods/transforms/next/__tests__/migrate-theme-catalog-to-descriptors.test.mjs

@@ -0,0 +1,220 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import * as fs from 'node:fs';
+import * as os from 'node:os';
+import * as path from 'node:path';
+import manifest from '../index.mjs';
+import migrate from '../migrate-theme-catalog-to-descriptors.mjs';
+import {runCodemods} from '../../../runner.mjs';
+import {discoverThemeDirectory} from '../../../../../foundation/discovery/theme-discovery.mjs';
+
+let root;
+
+beforeEach(() => {
+  root = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-theme-catalog-'));
+});
+
+afterEach(() => {
+  fs.rmSync(root, {recursive: true, force: true});
+});
+
+/** A catalog entry exactly as `astryx integration add theme <slug>` wrote it in 0.6. */
+function entry(slug, overrides = {}) {
+  const identifier = slug.replace(/-([a-z0-9])/gu, (_, c) => c.toUpperCase());
+  const displayName = slug
+    .split('-')
+    .map(part => part[0].toUpperCase() + part.slice(1))
+    .join(' ');
+  return {
+    slug,
+    displayName,
+    description: `${displayName} theme.`,
+    maintained: true,
+    entry: `${identifier}Theme.ts`,
+    exportName: `${identifier}Theme`,
+    files: [`${identifier}Theme.ts`],
+    ...overrides,
+  };
+}
+
+/** @param {ReturnType<typeof entry>[]} themes */
+function writeKit(themes, {sources = true} = {}) {
+  fs.writeFileSync(
+    path.join(root, 'package.json'),
+    '{"name":"@acme/kit","version":"1.0.0"}\n',
+  );
+  fs.writeFileSync(
+    path.join(root, 'astryx.integration.mjs'),
+    "export default {themes: './themes'};\n",
+  );
+  for (const theme of themes) {
+    const source = path.join(root, 'themes', theme.slug, theme.entry);
+    fs.mkdirSync(path.dirname(source), {recursive: true});
+    if (sources) {
+      fs.writeFileSync(
+        source,
+        `import {defineTheme} from '@astryxdesign/core/theme';\n\nexport const ${theme.exportName} = defineTheme({\n  name: '${theme.slug}',\n});\n`,
+      );
+    }
+  }
+  fs.mkdirSync(path.join(root, 'themes'), {recursive: true});
+  fs.writeFileSync(
+    path.join(root, 'themes', 'manifest.json'),
+    `${JSON.stringify({version: 1, themes}, null, 2)}\n`,
+  );
+}
+
+const catalog = () => path.join(root, 'themes', 'manifest.json');
+
+/** @param {boolean} apply @param {string} [srcPath] */
+const run = (apply, srcPath = root) =>
+  runCodemods([{version: 'next', transforms: manifest}], {
+    apply,
+    path: srcPath,
+    codemod: undefined,
+    silent: true,
+    root,
+  });
+
+describe('migrate-theme-catalog-to-descriptors', () => {
+  it('is staged for the next release as a project codemod', () => {
+    expect(manifest.map(t => [t.name, t.meta.codemodType])).toEqual([
+      ['migrate-theme-catalog-to-descriptors', 'project'],
+      ['migrate-native-picker-to-presentation', undefined],
+    ]);
+  });
+
+  it('writes one typed descriptor per catalog theme and removes the catalog', async () => {
+    writeKit([
+      entry('ocean'),
+      entry('deep-sea', {
+        displayName: "Deep 'Sea'",
+        description: 'Line one\nline two \\ done.',
+        maintained: false,
+      }),
+    ]);
+
+    const result = await run(true);
+
+    expect(result).toMatchObject({errors: [], totalFilesChanged: 3});
+    expect(fs.existsSync(catalog())).toBe(false);
+    expect(
+      fs.readFileSync(
+        path.join(root, 'themes/ocean/oceanTheme.doc.mjs'),
+        'utf-8',
+      ),
+    ).toBe(
+      "/** @type {import('@astryxdesign/cli/authoring').ThemeDoc} */\nexport default {\n  type: 'theme',\n  name: 'ocean',\n  displayName: 'Ocean',\n  description: 'Ocean theme.',\n  maintained: true,\n};\n",
+    );
+    const themes = discoverThemeDirectory(
+      path.join(root, 'themes'),
+      '@acme/kit',
+    );
+    expect(
+      themes.map(({slug, displayName, description, maintained}) => ({
+        slug,
+        displayName,
+        description,
+        maintained,
+      })),
+    ).toEqual([
+      {
+        slug: 'deep-sea',
+        displayName: "Deep 'Sea'",
+        description: 'Line one\nline two \\ done.',
+        maintained: false,
+      },
+      {
+        slug: 'ocean',
+        displayName: 'Ocean',
+        description: 'Ocean theme.',
+        maintained: true,
+      },
+    ]);
+  });
+
+  it('previews without writing, even with no source folder', async () => {
+    writeKit([entry('ocean')]);
+    // A staged code codemod (migrate-native-picker-to-presentation) requires
+    // the source folder to exist; an empty one exercises the same preview.
+    fs.mkdirSync(path.join(root, 'src'), {recursive: true});
+
+    const result = await run(false, path.join(root, 'src'));
+
+    expect(result).toMatchObject({
+      errors: [],
+      totalFilesChanged: 2,
+      writtenFiles: [],
+    });
+    expect(fs.existsSync(catalog())).toBe(true);
+    expect(
+      fs.existsSync(path.join(root, 'themes/ocean/oceanTheme.doc.mjs')),
+    ).toBe(false);
+  });
+
+  it('keeps a descriptor that already exists and still removes the catalog', async () => {
+    writeKit([entry('ocean'), entry('reef')]);
+    const kept = path.join(root, 'themes/ocean/oceanTheme.doc.mjs');
+    fs.writeFileSync(
+      kept,
+      "export default {type: 'theme', name: 'ocean', displayName: 'Mine', description: '', maintained: true};\n",
+    );
+
+    const result = await run(true);
+
+    expect(result.errors).toEqual([]);
+    expect(fs.readFileSync(kept, 'utf-8')).toContain("displayName: 'Mine'");
+    expect(
+      fs.existsSync(path.join(root, 'themes/reef/reefTheme.doc.mjs')),
+    ).toBe(true);
+    expect(fs.existsSync(catalog())).toBe(false);
+  });
+
+  it('changes nothing and names each entry that cannot convert', async () => {
+    writeKit([
+      entry('ocean'),
+      entry('sea', {exportName: 'oceanBlue'}),
+      entry('nested', {
+        entry: 'src/nestedTheme.ts',
+        files: ['src/nestedTheme.ts'],
+      }),
+    ]);
+    fs.rmSync(path.join(root, 'themes/ocean/oceanTheme.ts'));
+    const before = fs.readFileSync(catalog(), 'utf-8');
+
+    const result = await run(true);
+
+    expect(result.errors.map(e => [e.file, e.error])).toEqual([
+      ['themes/ocean', 'holds no oceanTheme.ts for theme "ocean".'],
+      [
+        'themes/manifest.json',
+        'theme "sea" exports "oceanBlue" from seaTheme.ts; a descriptor takes the export name from the file name, so rename the export or the file to match.',
+      ],
+      [
+        'themes/manifest.json',
+        'theme "nested" has entry "src/nestedTheme.ts"; a descriptor sits beside a .ts, .tsx, .mjs, or .js source directly in themes/nested/.',
+      ],
+    ]);
+    expect(fs.readFileSync(catalog(), 'utf-8')).toBe(before);
+    expect(fs.existsSync(path.join(root, 'themes/sea/seaTheme.doc.mjs'))).toBe(
+      false,
+    );
+  });
+
+  it('leaves a package with no catalog to convert alone', async () => {
+    const empty = {writes: [], deletes: [], problems: []};
+    await expect(migrate(root)).resolves.toEqual(empty);
+    fs.writeFileSync(
+      path.join(root, 'astryx.integration.mjs'),
+      'export default {};\n',
+    );
+    await expect(migrate(root)).resolves.toEqual(empty);
+    fs.writeFileSync(
+      path.join(root, 'astryx.integration.mjs'),
+      "export default {themes: './themes'};\n",
+    );
+    fs.mkdirSync(path.join(root, 'themes'));
+    await expect(migrate(root)).resolves.toEqual(empty);
+  });
+});

package/assets/codemods/transforms/next/index.mjs

@@ -7,4 +7,22 @@
  * this file into the resolved version folder.
  */
 
-export default [];
+import migrateThemeCatalogToDescriptors, {
+  meta as migrateThemeCatalogToDescriptorsMeta,
+} from './migrate-theme-catalog-to-descriptors.mjs';
+import migrateNativePickerToPresentation, {
+  meta as migrateNativePickerToPresentationMeta,
+} from './migrate-native-picker-to-presentation.mjs';
+
+export default [
+  {
+    name: 'migrate-theme-catalog-to-descriptors',
+    transform: migrateThemeCatalogToDescriptors,
+    meta: migrateThemeCatalogToDescriptorsMeta,
+  },
+  {
+    name: 'migrate-native-picker-to-presentation',
+    transform: migrateNativePickerToPresentation,
+    meta: migrateNativePickerToPresentationMeta,
+  },
+];

package/assets/codemods/transforms/next/migrate-native-picker-to-presentation.mjs

@@ -0,0 +1,148 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: migrate nativePicker to presentation on date/time inputs
+ *
+ * `spec:AST-043` FR3 mapping, applied only to static literals written
+ * directly on imported `DateInput`, `DateTimeInput`, and `TimeInput`
+ * elements: the prop is renamed to `presentation` and its value mapped.
+ * When the element already sets `presentation`, the deprecated prop is
+ * removed (presentation wins, FR4). Dynamic values are left unchanged —
+ * the deprecated prop keeps working, so an unmigrated callsite is still
+ * correct, and guessing at an expression's values would not be.
+ */
+
+import {transformProp} from '../../transform-prop.mjs';
+
+export const meta = {
+  title: 'Migrate nativePicker to presentation',
+  description:
+    'Renames `nativePicker` to `presentation` on DateInput, DateTimeInput, ' +
+    'and TimeInput, mapping touch→adaptive-native, always→native, and ' +
+    'never→adaptive-bottom-sheet (text-input for TimeInput). Dynamic ' +
+    'values are left for manual migration; the deprecated prop still works.',
+};
+
+const CORE_IMPORT_RE = /^@(astryxdesign|xds)\/core(?:\/|$)/;
+
+const COMPONENT_PROPS = new Map([
+  ['DateInput', new Set(['nativePicker'])],
+  ['DateTimeInput', new Set(['nativePicker'])],
+  ['TimeInput', new Set(['nativePicker'])],
+]);
+
+/** @param {string} component @param {string} value */
+function mapValue(component, value) {
+  switch (value) {
+    case 'touch':
+      return 'adaptive-native';
+    case 'always':
+      return 'native';
+    case 'never':
+      return component === 'TimeInput' ? 'text-input' : 'adaptive-bottom-sheet';
+    default:
+      return undefined;
+  }
+}
+
+/**
+ * Collect the string-literal leaves of a value expression without mutating
+ * anything. Returns false for any dynamic or non-string node.
+ * @param {any} node
+ * @param {any[]} leaves
+ * @returns {boolean}
+ */
+function collectStaticLeaves(node, leaves) {
+  if (!node) return false;
+  if (
+    node.type === 'TSAsExpression' ||
+    node.type === 'TSSatisfiesExpression' ||
+    node.type === 'TypeCastExpression' ||
+    node.type === 'ParenthesizedExpression'
+  ) {
+    return collectStaticLeaves(node.expression, leaves);
+  }
+  if (node.type === 'ConditionalExpression') {
+    return (
+      collectStaticLeaves(node.consequent, leaves) &&
+      collectStaticLeaves(node.alternate, leaves)
+    );
+  }
+  if (
+    (node.type !== 'StringLiteral' && node.type !== 'Literal') ||
+    typeof node.value !== 'string'
+  ) {
+    return false;
+  }
+  leaves.push(node);
+  return true;
+}
+
+/**
+ * Map every leaf, or none of them: a mixed static/dynamic conditional must
+ * stay byte-identical, never half-migrated.
+ * @param {any} node
+ * @param {string} component
+ */
+function mapStaticValue(node, component) {
+  /** @type {any[]} */
+  const leaves = [];
+  if (!collectStaticLeaves(node, leaves)) return false;
+  if (leaves.some(leaf => mapValue(component, leaf.value) === undefined)) {
+    return false;
+  }
+  for (const leaf of leaves) {
+    leaf.value = mapValue(component, leaf.value);
+    if (leaf.raw) leaf.raw = undefined;
+  }
+  return true;
+}
+
+/**
+ * @param {import('../../../../authoring/codemod/type').AstryxCodemodFile} file
+ * @param {import('../../../../authoring/codemod/type').CodemodTransformApi} api
+ * @returns {string | null | undefined}
+ */
+export default function transformer(file, api) {
+  if (!file.source.includes('nativePicker')) return undefined;
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  transformProp(
+    root,
+    j,
+    {
+      matchesImport: source => CORE_IMPORT_RE.test(source),
+      components: COMPONENT_PROPS,
+    },
+    (propPath, {component}) => {
+      const opening = propPath.parent?.node;
+      const attributes = opening?.attributes ?? [];
+      const hasPresentation = attributes.some(
+        (/** @type {any} */ attribute) =>
+          attribute.type === 'JSXAttribute' &&
+          attribute.name?.name === 'presentation',
+      );
+      const prop = propPath.node;
+      if (hasPresentation) {
+        // FR4: presentation wins; drop the deprecated prop.
+        opening.attributes = attributes.filter(
+          (/** @type {any} */ attribute) => attribute !== prop,
+        );
+        hasChanges = true;
+        return;
+      }
+      const value =
+        prop.value?.type === 'JSXExpressionContainer'
+          ? prop.value.expression
+          : prop.value;
+      if (!mapStaticValue(value, component)) return;
+      prop.name.name = 'presentation';
+      hasChanges = true;
+    },
+  );
+
+  if (!hasChanges) return undefined;
+  return root.toSource({quote: 'single'});
+}