feat(styled-react): Add an automatic generation of a components.json file to be used in the `primer-react/use-styled-react-import` eslint plugin #6848

jonrohan · 2025-09-12T20:38:06Z

This PR adds automatic generation of a components.json file during the build process for the @primer/styled-react package. This provides consumers with a machine-readable list of all exported components, utilities, and types.

Problem

Previously, there was no programmatic way for consumers to discover what components and utilities are available in the @primer/styled-react package without manually inspecting the source code or documentation.

Solution

Added a build-time script that automatically parses the main index.tsx file and generates a structured JSON file containing:

All React components (44 items)
Utility functions (6 items)
TypeScript types (3 items)

Usage

import componentsData from '@primer/styled-react/components.json' with {type: 'json'}

console.log(componentsData.components) // Array of component names
console.log(componentsData.utilities)  // Array of utility names
console.log(componentsData.types)      // Array of type names

Changelog

New

Added script/generate-components-json build script to automatically extract and categorize exports
Added components.json export path to package.json exports map
Added automatic generation of /dist/components.json during build process
Added documentation section in README.md explaining the components.json feature

Changed

Modified script/build to include components.json generation step
Updated README.md with usage instructions for the new components.json file

Removed

N/A

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Rationale: This is a new feature that adds functionality without breaking existing APIs. The components.json file is additive and provides new capabilities for package consumers.

Testing & Reviewing

To test this PR:

Build the package: Run npm run build in packages/styled-react/
Verify generation: Check that dist/components.json is created with correct structure
Test imports: Verify the file can be imported using @primer/styled-react/components.json
Validate content: Confirm the generated JSON contains all expected components (44), utilities (6), and types (3)

Key files to review:

packages/styled-react/script/generate-components-json - The extraction and generation logic
packages/styled-react/script/build - Integration into build process
packages/styled-react/package.json - Export path configuration
packages/styled-react/README.md - Updated documentation

Example generated structure:

{
  "components": ["ActionList", "Avatar", "Box", ...],
  "utilities": ["merge", "sx", "theme", ...],
  "types": ["BetterSystemStyleObject", "BoxProps", "SxProp"],
}

Merge checklist

Added/updated tests - Build process validates the generation works correctly
Added/updated documentation - README.md updated with usage instructions
Added/updated previews (Storybook) - N/A for build tooling
Changes are SSR compatible - Static JSON generation, no runtime impact
Tested in Chrome - N/A for build tooling
Tested in Firefox - N/A for build tooling
Tested in Safari - N/A for build tooling
Tested in Edge - N/A for build tooling
(GitHub staff only) Integration tests pass at github/github - N/A

…s list

changeset-bot · 2025-09-12T20:38:11Z

🦋 Changeset detected

Latest commit: 2a84655

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/styled-react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copilot

Pull Request Overview

This PR adds automatic generation of a components.json file for the @primer/styled-react package, providing consumers with a machine-readable list of all exported components, utilities, and types. The feature extracts exports from the main index file during build time and categorizes them into components, utilities, and types with package metadata.

Key changes:

Added build-time script to parse exports and generate structured JSON
Integrated JSON generation into the build process
Added export path configuration for the components.json file

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

File	Description
packages/styled-react/script/generate-components-json	New Node.js script that parses the main index.tsx file and categorizes exports into components, utilities, and types
packages/styled-react/script/build	Updated build script to include components.json generation step after rollup compilation
packages/styled-react/package.json	Added export path for "./components.json" to make the generated file importable by consumers
packages/styled-react/README.md	Added documentation section explaining the components.json feature with usage examples

Copilot · 2025-09-12T20:39:51Z

packages/styled-react/script/generate-components-json

+  const types = [...typeExports] // All type exports go into types
+
+  // Known utility patterns
+  const utilityPatterns = ['merge', 'sx', 'theme', 'themeGet', 'useColorSchemeVar', 'useTheme']


The utility patterns are hardcoded in the script. Consider moving this list to a configuration file or making it discoverable through naming conventions to reduce maintenance overhead when utilities are added or removed.

Copilot · 2025-09-12T20:39:51Z

packages/styled-react/script/generate-components-json

+  const typeExports = []
+
+  // Extract regular exports (handle multi-line exports)
+  const exportRegex = /export\s*\{\s*([\s\S]*?)\s*\}/g


The regex patterns for parsing exports may not handle all edge cases of TypeScript/JavaScript syntax. Consider using a proper AST parser like @babel/parser or typescript compiler API for more robust parsing.

Copilot · 2025-09-12T20:39:52Z

packages/styled-react/script/generate-components-json

+  }
+
+  // Extract type exports (handle multi-line exports)
+  const typeExportRegex = /export\s+type\s*\{\s*([\s\S]*?)\s*\}/g


The regex patterns for parsing exports may not handle all edge cases of TypeScript/JavaScript syntax. Consider using a proper AST parser like @babel/parser or typescript compiler API for more robust parsing.

Copilot · 2025-09-12T20:39:52Z

packages/styled-react/script/generate-components-json

+  }
+
+  // Extract direct exports
+  const directExportRegex = /export\s+(?:const|let|var|function|class)\s+(\w+)/g


The regex patterns for parsing exports may not handle all edge cases of TypeScript/JavaScript syntax. Consider using a proper AST parser like @babel/parser or typescript compiler API for more robust parsing.

Copilot · 2025-09-12T20:39:52Z

packages/styled-react/script/generate-components-json

+
+async function generateComponentsJson() {
+  try {
+    const srcPath = path.join(__dirname, '..', 'src', 'index.tsx')


The source file path is hardcoded. Consider making this configurable or deriving it from package.json to improve flexibility if the entry point changes.

Suggested change

const srcPath = path.join(__dirname, '..', 'src', 'index.tsx')

// Read package.json to get the entry point

const pkgJsonPath = path.join(__dirname, '..', 'package.json')

const pkgJsonContent = await fs.readFile(pkgJsonPath, 'utf-8')

const pkgJson = JSON.parse(pkgJsonContent)

// Use 'main' field, fallback to 'src/index.tsx' if not present

const entryRelative = pkgJson.main || 'src/index.tsx'

const srcPath = path.join(__dirname, '..', entryRelative)

github-actions · 2025-09-12T20:40:56Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	89.42 KB (0%)
packages/react/dist/browser.umd.js	89.63 KB (0%)

joshblack · 2025-09-15T19:56:24Z

packages/styled-react/script/generate-components-json

+      metadata: {
+        package: '@primer/styled-react',
+        description: 'Exported components and utilities from the Primer styled-react package',
+        totalComponents: categorized.components.length,
+        totalUtilities: categorized.utilities.length,
+        totalTypes: categorized.types.length,
+        generatedAt: new Date().toISOString().split('T')[0],
+      },


Do we need any of this for the rule? Wasn't sure if we needed this kind of metadata or not

joshblack · 2025-09-15T19:57:04Z

packages/styled-react/script/generate-components-json

+  }
+
+  // Extract type exports (handle multi-line exports)
+  const typeExportRegex = /export\s+type\s*\{\s*([\s\S]*?)\s*\}/g


Would it be possible to match what the copilot comment left and use AST for parsing instead of regex? Would help make things more reliable, I think, if we want to depend on this file

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

feat: add components.json generation and update README with component…

ae88e53

…s list

jonrohan requested a review from joshblack September 12, 2025 20:38

jonrohan requested a review from a team as a code owner September 12, 2025 20:38

Copilot AI review requested due to automatic review settings September 12, 2025 20:38

github-actions bot added the staff Author is a staff member label Sep 12, 2025

Update version and add components.json generation feature

f39e020

Copilot AI reviewed Sep 12, 2025

View reviewed changes

github-actions bot requested a deployment to storybook-preview-6848 September 12, 2025 20:43 Abandoned

jonrohan deployed to github-pages September 12, 2025 20:50 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6848 September 12, 2025 20:51 Inactive

jonrohan enabled auto-merge September 15, 2025 14:50

jonrohan disabled auto-merge September 15, 2025 14:50

Fix import syntax for componentsData in README

36a8bb3

jonrohan deployed to github-pages September 15, 2025 16:45 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6848 September 15, 2025 16:46 Inactive

joshblack reviewed Sep 15, 2025

View reviewed changes

Rewrite output with ast

d5d0127

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

jonrohan deployed to github-pages September 16, 2025 19:45 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6848 September 16, 2025 19:45 Inactive

Add import

8e4cba7

jonrohan requested a review from joshblack September 16, 2025 20:14

joshblack approved these changes Sep 16, 2025

View reviewed changes

jonrohan deployed to github-pages September 16, 2025 20:17 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6848 September 16, 2025 20:17 Inactive

jonrohan enabled auto-merge September 16, 2025 20:23

Merge branch 'main' into generate_components_json

2a84655

jonrohan added this pull request to the merge queue Sep 22, 2025

jonrohan deployed to github-pages September 22, 2025 17:32 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6848 September 22, 2025 17:32 View deployment

Merged via the queue into main with commit 156903c Sep 22, 2025
40 of 41 checks passed

jonrohan deleted the generate_components_json branch September 22, 2025 17:40

primer bot mentioned this pull request Sep 22, 2025

Release tracking (rc) #6892

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(styled-react): Add an automatic generation of a components.json file to be used in the `primer-react/use-styled-react-import` eslint plugin #6848

feat(styled-react): Add an automatic generation of a components.json file to be used in the `primer-react/use-styled-react-import` eslint plugin #6848

Uh oh!

jonrohan commented Sep 12, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Sep 12, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 12, 2025

Uh oh!

Copilot AI Sep 12, 2025

Uh oh!

Copilot AI Sep 12, 2025

Uh oh!

Copilot AI Sep 12, 2025

Uh oh!

Copilot AI Sep 12, 2025

Uh oh!

github-actions bot commented Sep 12, 2025 •

edited

Loading

Uh oh!

joshblack Sep 15, 2025

Uh oh!

joshblack Sep 15, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-    const srcPath = path.join(__dirname, '..', 'src', 'index.tsx')
+    // Read package.json to get the entry point
+    const pkgJsonPath = path.join(__dirname, '..', 'package.json')
+    const pkgJsonContent = await fs.readFile(pkgJsonPath, 'utf-8')
+    const pkgJson = JSON.parse(pkgJsonContent)
+    // Use 'main' field, fallback to 'src/index.tsx' if not present
+    const entryRelative = pkgJson.main || 'src/index.tsx'
+    const srcPath = path.join(__dirname, '..', entryRelative)

feat(styled-react): Add an automatic generation of a components.json file to be used in the primer-react/use-styled-react-import eslint plugin #6848

feat(styled-react): Add an automatic generation of a components.json file to be used in the primer-react/use-styled-react-import eslint plugin #6848

Uh oh!

Conversation

jonrohan commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Usage

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

joshblack Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

joshblack Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(styled-react): Add an automatic generation of a components.json file to be used in the `primer-react/use-styled-react-import` eslint plugin #6848

feat(styled-react): Add an automatic generation of a components.json file to be used in the `primer-react/use-styled-react-import` eslint plugin #6848

jonrohan commented Sep 12, 2025 •

edited

Loading

changeset-bot bot commented Sep 12, 2025 •

edited

Loading

github-actions bot commented Sep 12, 2025 •

edited

Loading