# @colining-gitgraph/core

> Core of gitgraph, a JavaScript library to draw pretty git graphs

Latest version **1.5.1** (published 2023-07-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @colining-gitgraph/core
pnpm add @colining-gitgraph/core
yarn add @colining-gitgraph/core
bun add @colining-gitgraph/core
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.1 |
| Published | 2023-07-21 |
| First published | 2023-07-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 355 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3070 |
| Author | Nicolas Carlo |
| Maintainers | colinin |
| Keywords | git, graph, javascript |

## Links

- npm: https://www.npmjs.com/package/@colining-gitgraph/core
- Repository: https://github.com/nicoespeon/gitgraph.js
- Homepage: https://github.com/nicoespeon/gitgraph.js#readme
- Issues: https://github.com/nicoespeon/gitgraph.js/issues
- npm.io page: https://npm.io/package/@colining-gitgraph/core

## Alternatives

- [apollo-link-http-common](https://npm.io/package/apollo-link-http-common.md) — 879.0K weekly downloads
- [react-relay](https://npm.io/package/react-relay.md) — 336.8K weekly downloads
- [relay-test-utils](https://npm.io/package/relay-test-utils.md) — 181.6K weekly downloads
- [@vendure/core](https://npm.io/package/@vendure/core.md) — 14.8K weekly downloads
- [@pnpm/deps.graph-sequencer](https://npm.io/package/@pnpm/deps.graph-sequencer.md) — 13.4K weekly downloads

## Recent versions

- 1.5.1 (latest) — 2023-07-21

## README

# `@gitgraph/core`

[![version](https://img.shields.io/npm/v/@gitgraph/core.svg?logo=npm)](https://www.npmjs.com/package/@gitgraph/core)
[![Changelog](https://img.shields.io/badge/%F0%9F%93%94-changelog-CD9523.svg)](https://github.com/nicoespeon/gitgraph.js/blob/master/packages/gitgraph-core/CHANGELOG.md)

This is the core package of [GitGraph.js][gitgraph-repo]. It contains the main logic for manipulating git-like API and compute the graph that should be rendered.

If you want to use GitGraph.js, you're probably looking for one of the rendering library. They are all listed [at the root level of the monorepo][gitgraph-repo].

If you are a contributor to a rendering library, you'll depend on this package. Read on 🤠

## Why this package?

We wanted to deliver GitGraph.js through different libraries, to fit different usages (e.g. React, Angular, Vanilla JS, Node.js…).

The idea was to extract the common logic, without the rendering part.

All the GitGraph.js API is defined there: commit, branch, merge, etc. It embraces git semantics.

## Developing a rendering library

A rendering library is a wrapper around `@gitgraph/core`.

It should:

- expose the GitGraph.js API to the user
- subscribe to graph updates to re-render it

How it renders the graph is up to you (e.g. canvas, svg, HTML elements…).

### Examples of usage

A vanilla JS implementation:

```js
import { GitgraphCore } from "@gitgraph/core";

export function createGitgraph(options) {
  const $target = options.$target || document.getElementId("#gitgraph");

  const graphOptions = {
    // Build relevant GitgraphCore options.
  };

  // Instantiate the graph.
  const gitgraph = new GitgraphCore(graphOptions);

  // Subscribe to graph updates.
  const gitgraph.subscribe((data) => {
    render($target, data);
  });

  // Return the GitGraph.js API to the user.
  return gitgraph.getUserApi();
}

function render($target, data) {
  // Do the rendering…
  $target.appendChild(renderGraph(data));
}
```

A React implementation:

```jsx
import React from "react";
import { GitgraphCore } from "@gitgraph/core";

export class Gitgraph extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      // Init state.
    };

    // Instantiate the graph.
    this.gitgraph = new GitgraphCore(props.options);

    // Subscribe to graph updates.
    this.gitgraph.subscribe((data) => {
      this.setState(data);
    });
  }

  render() {
    // Do the rendering…
    return <svg>{this.renderGraph()}</svg>;
  }

  componentDidMount() {
    // Pass the GitGraph.js API to the user.
    this.props.children(this.gitgraph.getUserApi());
  }
}
```

## How does it work?

The end-user will be using the rendering library. As we return `gitgraph.getUserApi()`, the user will be able to perform git-like actions (create a branch, commit, merge…).

Every action updates the internal graph. The core library computes the new graph that should be rendered to represent the new state. When it does, it will call its listeners through the `subscribe()` method.

[gitgraph-repo]: https://github.com/nicoespeon/gitgraph.js/

---
_Source: https://npm.io/package/@colining-gitgraph/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._