How to generate a changelog from changes in React components (not git commits)

Viewed 10

We would like to have a changelog being generated based on the changes of individual React components. Most solutions use git commits, but we would like to "write" changelog entries on our own. Ideally, the entries would be used as a combined log and also on component level.

Scenario

  • We use Storybook.js for our components based on React.js.
  • Each component may introduce changes on each merge request.
  • We want the changes to be listed in a changelog.

Why not just edit CHANGELOG.md?

  • Each branch usually adds a new changelog entry. But parallel branches add the entry one the same line, which always leads to a conflict.
  • Keeping the changes at the component also allows the changes of a component to be displayed "locally" with the component.

The Idea

  • Create change.json for each component with a array of objects (one for each entry).
  • Find all changelog files (glob)
  • Parse JSON, extract entries
  • Concat all entries, sort list (datetime is first in line)
  • Save list as JSON array to be imported into storybook
  • Optionally: Generate CHANGELOG.md to be read "offline" (without storybook)

Example for changes.json:

[
  {
    "date": "2022-09-12",
    "JIRA": "PRJ-1234",
    "mergeRequest": 123,
    "title": "Describes this merge request in one line"
  },
  { /* ... */ }
]

The questions

  1. How to combine them in development mode (storybook)?
    • node script, run manually
    • Use "testing" to have a regular script run on every file change (use as "file watcher", but may also add some checks to the JSON structure, etc).
  2. Are there any NPM libs that already support this kind of task?
    • As a reminder: We are not trying to use the info of git commits.
  3. What is the best way to allow some multi-line body text in markdown format to be added?
  4. It would be nice to use TypeScript to type the entries, but that would add more complexity to parsing. Or who could i.e. tsc help us here?
  5. Any other thoughts? Are we overthinking this?
0 Answers
Related