@astryxdesign/core 0.2.0 → 0.3.0-canary.0b5a38e

package/src/__tests__/babelPluginAddExtensions.test.ts

@@ -0,0 +1,190 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * Guards the build-time babel plugin that rewrites extensionless relative
+ * specifiers to fully-specified ESM paths in dist (issue #4569: dynamic
+ * `import()` specifiers were passed through untouched, so the published
+ * "type": "module" dist broke strict-ESM consumers like Rspack and Node).
+ *
+ * The plugin resolves specifiers against the importing file's real directory
+ * (fs.existsSync on .ts/.tsx/index siblings), so the file/directory cases run
+ * against a temp fixture tree, and one case pins the exact in-repo bug site
+ * (Text.tsx lazily importing ../Tooltip/Tooltip).
+ */
+import fs from 'node:fs';
+import os from 'node:os';
+import {createRequire} from 'node:module';
+import path from 'node:path';
+import {describe, it, expect, beforeAll, afterAll} from 'vitest';
+
+const require = createRequire(__filename);
+const babel = require('@babel/core');
+const addExtensions = require('../../babel-plugin-add-extensions.cjs');
+
+/** Transform a snippet exactly as build:esm does for `filename`. */
+function transform(
+  code: string,
+  filename: string,
+  parserOpts?: Record<string, unknown>,
+): string {
+  const result = babel.transformSync(code, {
+    filename,
+    configFile: false,
+    babelrc: false,
+    plugins: [addExtensions],
+    ...(parserOpts ? {parserOpts} : {}),
+  });
+  return result?.code ?? '';
+}
+
+const textTsx = path.resolve(__dirname, '../Text/Text.tsx');
+
+let fixtureDir: string;
+let entry: string;
+
+beforeAll(() => {
+  fixtureDir = fs.mkdtempSync(path.join(os.tmpdir(), 'add-extensions-'));
+  fs.writeFileSync(path.join(fixtureDir, 'mod.ts'), 'export const x = 1;\n');
+  fs.mkdirSync(path.join(fixtureDir, 'dir'));
+  fs.writeFileSync(
+    path.join(fixtureDir, 'dir', 'index.ts'),
+    'export const y = 2;\n',
+  );
+  // `both` exists as a file AND a directory-with-index — the file must win.
+  fs.writeFileSync(path.join(fixtureDir, 'both.ts'), 'export const b = 3;\n');
+  fs.mkdirSync(path.join(fixtureDir, 'both'));
+  fs.writeFileSync(
+    path.join(fixtureDir, 'both', 'index.ts'),
+    'export const bi = 4;\n',
+  );
+  // The importing file itself never needs to exist — the plugin only uses
+  // its dirname as the resolution base.
+  entry = path.join(fixtureDir, 'entry.ts');
+});
+
+afterAll(() => {
+  fs.rmSync(fixtureDir, {recursive: true, force: true});
+});
+
+describe('babel-plugin-add-extensions', () => {
+  describe('dynamic import()', () => {
+    it('appends .js to a dynamic import() of a relative file', () => {
+      // The exact shape of the LazyXDSTooltip sites in Text/Heading/Timestamp.
+      const code = transform(
+        "const LazyXDSTooltip = lazy(async () => import('../Tooltip/Tooltip').then(mod => ({default: mod.Tooltip})));",
+        textTsx,
+      );
+      expect(code).toMatch(/import\(['"]\.\.\/Tooltip\/Tooltip\.js['"]\)/);
+    });
+
+    it('rewrites a dynamic import() of a directory to its index.js', () => {
+      const code = transform("const p = import('./dir');", entry);
+      expect(code).toMatch(/import\(['"]\.\/dir\/index\.js['"]\)/);
+    });
+
+    it('leaves a dynamic import() that already has an extension alone', () => {
+      const code = transform("const p = import('./mod.js');", entry);
+      expect(code).toMatch(/import\(['"]\.\/mod\.js['"]\)/);
+    });
+
+    it('leaves a dynamic import() of a bare specifier alone', () => {
+      const code = transform("const p = import('react');", entry);
+      expect(code).toMatch(/import\(['"]react['"]\)/);
+    });
+
+    it('leaves a dynamic import() of a non-literal specifier alone', () => {
+      const code = transform('const p = (s) => import(s);', entry);
+      expect(code).toContain('import(s)');
+    });
+
+    it('leaves a dynamic import() of a template literal alone', () => {
+      const code = transform(
+        'const p = (n) => import(`./locales/${n}`);',
+        entry,
+      );
+      expect(code).toContain('import(`./locales/${n}`)');
+    });
+
+    it('rewrites ImportExpression nodes (Babel 8 / createImportExpressions parse)', () => {
+      const code = transform("const p = import('./mod');", entry, {
+        createImportExpressions: true,
+      });
+      expect(code).toMatch(/import\(['"]\.\/mod\.js['"]\)/);
+    });
+
+    it('prefers the file over a same-named directory index', () => {
+      const code = transform("const p = import('./both');", entry);
+      expect(code).toMatch(/import\(['"]\.\/both\.js['"]\)/);
+    });
+
+    it("rewrites a dynamic import of '.' to './index.js'", () => {
+      const code = transform("const p = import('.');", entry);
+      expect(code).toMatch(/import\(['"]\.\/index\.js['"]\)/);
+    });
+
+    it('rewrites every dynamic import in a file', () => {
+      const code = transform(
+        "const a = import('./mod');\nconst b = import('./dir');",
+        entry,
+      );
+      expect(code).toMatch(/import\(['"]\.\/mod\.js['"]\)/);
+      expect(code).toMatch(/import\(['"]\.\/dir\/index\.js['"]\)/);
+    });
+
+    it('leaves a dynamic import() of a skipped extension alone', () => {
+      const code = transform("const p = import('./data.json');", entry);
+      expect(code).toMatch(/import\(['"]\.\/data\.json['"]\)/);
+    });
+
+    it('does not touch call expressions that are not import()', () => {
+      const code = transform(
+        "myImport('./mod');\nregistry.import('./mod');",
+        entry,
+      );
+      expect(code).toContain("myImport('./mod')");
+      expect(code).toContain("registry.import('./mod')");
+    });
+  });
+
+  describe('static declarations (pre-existing behavior)', () => {
+    it('appends .js to a static import of a relative file', () => {
+      const code = transform("import {x} from './mod';", entry);
+      expect(code).toMatch(/from ['"]\.\/mod\.js['"]/);
+    });
+
+    it('rewrites a static import of a directory to its index.js', () => {
+      const code = transform("import {y} from './dir';", entry);
+      expect(code).toMatch(/from ['"]\.\/dir\/index\.js['"]/);
+    });
+
+    it('appends .js to a re-export specifier', () => {
+      const code = transform("export {x} from './mod';", entry);
+      expect(code).toMatch(/from ['"]\.\/mod\.js['"]/);
+    });
+
+    it('appends .js to an export * specifier', () => {
+      const code = transform("export * from './mod';", entry);
+      expect(code).toMatch(/from ['"]\.\/mod\.js['"]/);
+    });
+
+    it("rewrites the '.' self-reference to './index.js'", () => {
+      const code = transform("export * from '.';", entry);
+      expect(code).toMatch(/from ['"]\.\/index\.js['"]/);
+    });
+
+    it('leaves bare specifiers alone', () => {
+      const code = transform("import {lazy} from 'react';", entry);
+      expect(code).toMatch(/from ['"]react['"]/);
+    });
+
+    it('appends .js even when no source sibling exists (fallback branch)', () => {
+      const code = transform("import {z} from './does-not-exist';", entry);
+      expect(code).toMatch(/from ['"]\.\/does-not-exist\.js['"]/);
+    });
+
+    it('leaves declarations without a source untouched', () => {
+      const code = transform('export const a = 1;', entry);
+      expect(code).toContain('export const a = 1;');
+    });
+  });
+});

package/src/__tests__/forcedColors.ts

@@ -0,0 +1,60 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file forcedColors.ts
+ * @input Uses the jsdom document (StyleX dev runtime injects rules into it)
+ * @output Exports getForcedColorsRules, getAllInjectedCss test helpers
+ * @position Shared test utility for asserting forced-colors style output
+ *
+ * jsdom cannot emulate `@media (forced-colors: active)` rendering, so
+ * component tests assert the next-best thing: that the StyleX dev runtime
+ * (runtimeInjection in vitest.config.ts) actually injected the forced-colors
+ * rules a component relies on for Windows High Contrast support (WCAG 1.4.11).
+ * Visual behavior needs manual verification in a forced-colors environment.
+ */
+
+/**
+ * Collects the cssText of every injected CSS rule scoped to
+ * `@media (forced-colors: active)`, including rules nested in other
+ * conditions. Returns one string for substring assertions.
+ */
+export function getForcedColorsRules(): string {
+  const chunks: string[] = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules: CSSRule[];
+    try {
+      rules = Array.from(sheet.cssRules);
+    } catch {
+      continue;
+    }
+    for (const rule of rules) {
+      if (rule.cssText.includes('forced-colors: active')) {
+        chunks.push(rule.cssText);
+      }
+    }
+  }
+  return chunks.join('\n');
+}
+
+/**
+ * Collects the cssText of every injected CSS rule, regardless of condition.
+ * Use to assert declarations that live OUTSIDE `@media (forced-colors: active)`
+ * yet still exist for forced-colors support — e.g. `forced-color-adjust: none`
+ * (an unconditional declaration) or a hover tint gated behind
+ * `(forced-colors: none)` so it cannot override the forced-colors state.
+ */
+export function getAllInjectedCss(): string {
+  const chunks: string[] = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules: CSSRule[];
+    try {
+      rules = Array.from(sheet.cssRules);
+    } catch {
+      continue;
+    }
+    for (const rule of rules) {
+      chunks.push(rule.cssText);
+    }
+  }
+  return chunks.join('\n');
+}

package/src/__tests__/inputWidthContract.test.tsx

@@ -43,7 +43,14 @@ const inputDocsSuite = [
 describe('Input Family width Prop Contract (#4163)', () => {
   inputDocsSuite.forEach(({name, docs}) => {
     it(`documents the width prop for ${name}`, () => {
-      const propsList = (docs.props || docs.components?.[0]?.props) as {
+      // `docs` is the ComponentDoc union (single vs multi component); narrow it
+      // for structural access to either the top-level props or the first
+      // sub-component's props.
+      const doc = docs as {
+        props?: {name: string; type: string}[];
+        components?: {props?: {name: string; type: string}[]}[];
+      };
+      const propsList = (doc.props || doc.components?.[0]?.props) as {
         name: string;
         type: string;
       }[];

package/src/doc-mjs.d.ts

@@ -11,9 +11,12 @@
  */
 
 declare module '*.doc.mjs' {
-  import type {ComponentDoc, TranslationDoc} from './docs-types';
+  import type {
+    ComponentDoc,
+    ComponentTranslationDoc,
+  } from '@astryxdesign/cli/authoring';
 
   export const docs: ComponentDoc;
   export const docsZh: ComponentDoc;
-  export const docsDense: TranslationDoc;
+  export const docsDense: ComponentTranslationDoc;
 }

package/src/docPropLiterals.test.ts

@@ -11,7 +11,7 @@
  * without revealing what may be written into it. Readers without an IDE —
  * agents especially — then guess: `gap={16}` (pixels, not a scale step),
  * `direction: 'desc'` (the type says `'descending'`). Both fail to compile.
- * `PropDoc.type` in docs-types.ts already asks for inlined unions
+ * `ComponentPropDoc.type` in docs-types.ts already asks for inlined unions
  * (`"'primary' | 'secondary' | 'ghost'"`); this test holds docs to it.
  *
  * Two ways a doc prop can hide values, checked at different strictness:

package/src/docPropReferences.test.ts

@@ -30,7 +30,7 @@ type DocModule = {
 };
 
 /**
- * Props intentionally omitted from doc props[]: PropDoc in docs-types.ts
+ * Props intentionally omitted from doc props[]: ComponentPropDoc in docs-types.ts
  * says to skip internal/styling props, so prose may reference them even
  * though no doc lists them.
  */