Gitgraph.js v2

fabien0102 · 2018-01-21T21:57:17Z

Project board to track completion: https://github.com/nicoespeon/gitgraph.js/projects/2

No timeline for a release yet. But…
@fabien0102 & @nicoespeon work at least 1h of remote pair-programming every week on this 👨‍🎤🎸

✏️ Todo

When everything else will be done

List changes between v1 and v2 (may find missing stuff for v2)
Clean public API
Update README
Publish an alpha-release of gitgraph-react

To fix for release

Adjust canvas SVG dynamically
Fix deleted branch scenario (for imports)
Fix merged branch which doesn't appear scenario
Implement missing fast-forward

General

Refactor the repository with /packages/* pattern
Build stack (rollup, uglify, typescript…)
Fix travis build (setup yarn)
Fix Prettier config on different packages & run as pre-commit hook
Jest at the root level (lerna)
tslint at the root level (lerna) with tslint --fix as pre-commit hook

Gitgraph Core

Gitgraph React (rendering)

🎨 Nice-to-have

Gitgraph React (rendering)

Compute graph width/height dynamically

Gitgraph node (rendering)

Basic implementation with commits, branches and merges
README

🧐 Why? What do we want to achieve?

This lib started as a POC to solve our need to draw git graphs easily for presentation − e.g blog posts, slides, trainings…

But now we're facing some challenges to maintain and evolve the lib:

The heart of the design for commit and branches is wrong, making it difficult to handle some issues − e.g Git Branches Overlap #40, Mode: Branch pointers only #142, Branch labels are shown on first commit in branch, not head of branch #160, Unable to align commit detail DOM elements with vertical reverse orientation #167
We'd like to distinguish the core of the lib from the rendering part. This would make issues like Render graph from JSON #38 (rendering graph from a JSON export) easier to tackle.
We want to add some tests around to prevent regressions
We want to clean things up a bit, while keeping the same useful API

Doing so, we may end up with breaking changes. We'll try not to, but we're planning for a major version release if necessary − thus the v2.

🥞 Stack

lerna for managing multiple repositories
- gitgraph-core
- gitgraph-node
- gitgraph-react
- gitgraph-angular
rollup for the bundling with a TypeScript codebase
tslint to lint our codebase
prettier to format code on precommit hook
jest for a delightful test environment

🗂 Repositories

packages/gitgraph-core

The idea is to extract the main logic, without the rendering.

All the API will be defined there: commit, branch, merge, etc. We'll embrace git semantics.

Every actions will produce an internal "state" that will look like the JSON output from git2json.

Ideally, we should consolidate this "state" with graphical information for rendering: column, row, color, message, x, y, onClick…

packages/gitgraph-js

The idea here is to never use gitgraph-core directly. We'll bundle it into different rendering engines.

Gitgraph-js will work more or less with the same API than v1: it takes a selector or an $el and that's it. We may move from canvas to svg, or use a combination of both if relevant.

Code snippet

import Gitgraph from "gitgraph-js";

const git = new GitGraph(); // default to #gitgraph el
const master = git.branch("master");
master.commit().commit();
const develop = git.branch("develop");
develop.commit("hello");

master.merge(develop);

packages/gitgraph-react

We could have an alternate rendering library. Here in React for example.

Code snippet

const { Gitgraph } = require("@gitgraph/react");

function MyComponent() {
  return (
    <Gitgraph>
      {(gitgraph) => {
        // Simulate git commands with Gitgraph API.
        const master = gitgraph.branch("master");
        master.commit("Initial commit");

        const develop = gitgraph.branch("develop");
        develop.commit("Add TypeScript");

        const aFeature = gitgraph.branch("a-feature");
        aFeature
          .commit("Make it work")
          .commit("Make it right")
          .commit("Make it fast");

        develop.merge(aFeature);
        develop.commit("Prepare v1");

        master.merge(develop).tag("v1.0.0");
      }}
    </Gitgraph>
  );
}

packages/gitgraph-node

We can even provide a rendering lib to display git graphs in the terminal.

Code snippet

const { gitgraph, render } = require("gitgraph-node");

// Simulate git commands with Gitgraph API.
const master = gitgraph.branch("master");
master.commit("Set up the project");

const develop = gitgraph.branch("develop");
develop.commit("Add TypeScript");

const aFeature = gitgraph.branch("a-feature");
aFeature
  .commit("Make it work")
  .commit("Make it right")
  .commit("Make it fast");

develop.merge(aFeature);
develop.commit("Prepare v1");

master.merge(develop).tag("v1.0.0");

// Call `render` to log the graph in terminal.
render();

🙀 Breaking changes

	v1	v2
To merge `develop` in `master`	`develop.merge(master)`	`master.merge(develop)`
Default orientation	Vertical, top to bottom	Vertical, bottom to top
Text in commit dot #196	`commitDotText` in commit options	`innerText` in commit options
Custom tooltip formatter	`tooltipHTMLFormatter` in template options	`tooltipFormatter` in commit options (doesn't handle HTML)

The text was updated successfully, but these errors were encountered:

nicoespeon · 2018-01-22T07:54:42Z

Thanks @fabien0102 for posting it. I added a WHY at the beginning 😉

This issue is open to public discussions, in case anyone want to step in.

Letme · 2018-02-05T15:16:44Z

I really like the development of all this especially with the core separation. I am using Sphinx (reStructured text) for documentation a lot and I see possibility of a extension-plugin for this. Basically with above description v2 could enable this integration a bit more naturally.

Any timeline on this?

Turiok · 2018-02-12T20:04:57Z

Hi!

I'm just discovering your lib. I have the same needs that you. Draw a git history to explain workflow or use case easily. I think, It'll be cool to have 2 features.

A wrong commit. Maybe a cross on the commit to explain it's not a good thing to do.
A gui to create the html and javascript.
Maybe integrate the API in markdown to put on presentation slide like revealJS or ImpressJS for no developper.

Je n'avais pas vu que vous étiez français. En continuant mon worflow, j'avais besoin de montrer des cherry-pick. J'ai de nouveau cherché et j'ai trouvé ce plugin pour Latex : https://github.com/Jubobs/gitdags.
Latex me semble très compliqué à utiliser. Mais les schémas me font beaucoup penser à ceux du livre de référence. Ce serait sympa d'avoir les mêmes principes dans la V2 de GitGraphJs. Mais en étant plus simple à écrire.
Je ne donne que mon avis, je suis malheureusement une bille en langage web.

fabien0102 · 2018-02-14T13:52:45Z

First of all, sorry for the late, I was in vacations 😎 ^^

@Letme For the timeline, hard to said, @nicoespeon and me are little bit busy for now, so we trying to work on it but as a side project only 😉 BTW, if you want to work on an extension, we can maybe try to work in parallel (with a mock of gitgraph-core) it can be a good way to have the best design as possible of the gitgraph-core API

@Turiok Nice ideas!

For the wrong commit, it's "just" to add a style param to commit() options (so you are totally free to cross this one), and it's definitively in the current scope 👍
I really like the idea of the gui, but regarding the timeline, it's not for now ^ ^
I already plan in my head to add a RevealJS example, if the "Functional component with children" syntax works, it will be very nice (but I need to do some POC on it) and why not markdown syntax 😄 Do you have an example in mind of what you want to write in markdown to draw a graph?

# My beautiful graph!
 ```gitgraph
 git commit -m "initial commit"
 git co -b "develop" 
 git commit -m "second commit"
 git merge master
 ```

Something like this?

dolanmiu · 2018-02-20T10:32:05Z

Do you guys want to make this project into a TypeScript project? I can help with that

It will help split the file up into smaller likes like... branch.ts, graph.ts, commit.ts etc

I can see the project has TypeScript support already, but it isn't true TypeScript

Edit: nvm! I can see in the PR it has begun in gitgraph-core:

E.g. packages/gitgraph-core/src/branch.ts

I am still eager to contribute if needed

dolanmiu · 2018-02-20T10:54:12Z

I have noticed test files are under a __test__ folder: https://github.com/nicoespeon/gitgraph.js/blob/2.0.0/packages/gitgraph-core/src/__tests__/branch.test.ts

What do you think about putting them on the same level as the class, and instead of .test.ts, have .spec.ts? Thats how Angular does it

dolanmiu · 2018-02-20T10:57:24Z

Could we add prettier into the project:

https://github.com/prettier/prettier

Just simply add prettier in package.json, and add a .prettierrc.yml

fabien0102 · 2018-02-20T11:55:56Z

Hello @dolanmiu
For the tests, it’s just because I plan to have more integration tests with some json or something like this, I’m also a big fan of test fils at the same level ;) It will probably evolve a lot, I want to have different layers a tests, especially for the rendering part ;) Just testing and and refactoring during this research process ^^

For prettier, I have set ts-lint and it’s do the same job ^^ what is your pro about prettier instead of tslint? (prettier have a typescript checking?)

fabien0102 · 2018-02-20T11:57:06Z

Note: I want to have only one source a truth about lint rules ;)

dolanmiu · 2018-02-20T12:01:29Z

@fabien0102 prettier does a different job, but a similar job. In my projects, I use both tslint and prettier 😄

Read this:

https://alexjoverm.github.io/2017/06/12/Use-Prettier-with-TSLint-and-be-happy/

Up to you, I like codebases which are super strict

And if you use vscode, you can set up "editor.formatOnSave" with prettier, so you don't need to worry about formatting ever again in your life. This will help with future collaboration, since now the codebase will be consistent with future contributors

Yes, there is now two sources of truth, tslint.json and .prettierrc.yml, but however, the benefits are well worth it IMO 😄

fabien0102 · 2018-02-20T12:04:40Z

I like strict too ^^ I check this article ;) Thanks for yours suggestions :)

fabien0102 · 2018-02-20T12:07:40Z

Normally hunky and linted-stage done this (fix lint on pre-commit, you can check the package.json of gitgraph-core ;) ) and you have also a nice vscode-tslint extension that do the same ;)

(I say normally because I failed yesterday ^^)

dolanmiu · 2018-02-20T12:14:28Z

How will you structure the rendering part?

packages/gitgraph-renderer?

Will it be a port of the current .render() methods, or a complete rewrite? I hear you mention rxjs

If it is a port, I can aid with the porting?

dolanmiu · 2018-02-20T12:15:54Z

I use vscode-tslint as well 😄

From my knowledge, I don't believe it has a "fix all linting errors on save" functionallity (unless I am oblivious) 😂

fabien0102 · 2018-02-20T12:22:02Z

I think that for a project that have css/js and ts, prettier is a good choice (same tool to format everything) but for just a ts project, I can do this job with tslint only (including the auto fix, and have a nice vscode xp)
Btw I will add some recommanded vscode plugins in this project (so you just have a modal in vscode if you don’t have the « correct » plugin set) ;)

fabien0102 · 2018-02-20T12:23:41Z

https://marketplace.visualstudio.com/items?itemName=eg2.tslint

autofixonsave ;)

fabien0102 · 2018-02-20T12:32:20Z

For the rendering part, We plan to put all data into the core (x, y of each commit) and after to implement the render method into other packages (gitgraph-react for example)
For rxjs, will see, I’m trying to keep this with the less dependencies as possible for the moment ;)

As you can see, the render method into gitgraph-cite is abstract (so a part of child implementation ;) ) (one time more, it’s quite experimental for now, just trying to find the best pattern ^^ )

And it's almost a rewriting, because we need to change the base modelisation, in the v1, it's just draw on each method, on the v2 we want to fit a bit more with the real git concept for storing the commit data to be able to import a real git repo or other requested features like that ;)

dolanmiu · 2018-02-20T12:42:58Z

What do you think about creating a gitgraph-renderer, and have gitgraph-react and gitgraph-angular wrap around that? I use Angular myself. What about people who do not use a JS framework?

I am thinking of creating an ngx-gitgraph for Angular, which wraps the v1 API, but now I am thinking of holding off until things are finalised? 😄

dolanmiu · 2018-02-20T12:45:16Z

https://marketplace.visualstudio.com/items?itemName=eg2.tslint

Wow didn't know about this

fabien0102 · 2018-02-20T12:47:16Z

mmm need to think about that ^^ My original idea is to have a "all inclusive" gitgraph-core that provide you everything except the render implementation. Why not for another layer with gitgraph-renderer but not entirely sure, I try to keep this simple (even if it's not always easy) so depending of the code direction, I will split this or not ^^ But I keep this in mind ;)

fabien0102 · 2018-02-20T12:48:47Z

@dolanmiu BTW if you want to take care of the angular part, be my guest! (I'm more a react guy now ^^)

But yes, you should wait a little bit, the api is really in an alpha version, but I can poke you when it become more stable ;)

dolanmiu · 2018-02-20T12:53:21Z

Ok, I do think we should create a gitgraph-renderer package, and have react, angular, and vanilla JS use it

Otherwise there will be so much repeated code

Sure! I will do the angular side

fabien0102 · 2018-02-20T12:57:24Z

For now the plan is to merge the gitgraph-renderer and gitgraph-core (I'm totally agree about to avoid the code duplication) the question is gitgraph-core or gitgraph-core+gitgraph-renderer? (but don't worry, all the rendering data will be provided before the gitgraph-react|angular|vanilla part 😉)

fabien0102 · 2018-03-17T12:47:06Z

I've just added a Todo section on the first message, so everybody can have a better idea of the current progress 😉

mrts · 2018-07-10T19:07:08Z

First, thanks for Gitgraph, it is awesome!

Are commit messages planned for horizontal rendering in v2?

Currently this:

var gitgraph = new GitGraph({
  orientation: 'horizontal-reverse',
  template: new GitGraph.Template({
    branch: { showLabel: true },
    message: {
      displayAuthor: false,
      displayBranch: false,
      displayHash: false,
    }
  })
});
var master = gitgraph.branch('master');
master.commit({message: 'something old'});
master.commit({message: 'something new'});
var develop = master.branch('develop');
develop.commit({message: 'something borrowed'});
develop.commit({message: 'something blue'});
var feature = develop.branch('feature');
feature.commit({message: 'and now something completely different'});

Gives this:

No commit messages as you can see... also, first branch master top margin is cut off. A minor nitpick, horizontal-reverse is a bit odd name for this orientation, I would expect left to right to be "normal" horizontal.

fabien0102 · 2018-07-11T05:01:07Z

@mrts Hiding commits in horizontal mode was totally intentional due to the available space to display the commits.
But if you have an idea to display nicely commits in this mode, please share! 😀

I've probably inverse the commits order in the v2 (I need to check) the problem is that is not right to left of left to right here, it's more "last commit first" vs "first commit first" but we can also think about a better naming here ;)
Thanks for your feedbacks

nicoespeon · 2018-07-12T02:53:10Z

#sorryIMisclicked 😉

P.S. I handled commit strokes for the BlackArrow theme 🎉

mrts · 2018-07-12T07:16:04Z

@fabien0102, perhaps something like this for displaying commit messages in horizontal orientation (the 'right' one in the picture):
https://stackoverflow.com/a/23523697

nicoespeon · 2019-02-10T04:08:45Z

Hey everyone 👋

Great news: we released premajor versions of the new packages! You can start using @gitgraph/react v1.0.0-0. We'll create a @gitgraph/js to compensate for gitgraph.js package, which will no longer be actively maintained from us.

The PR was merged into master, so it's now part of the main branch.

I created a project board to track all remaining work until everything is stable and complete: https://github.com/nicoespeon/gitgraph.js/projects/2

I keep this issue open so we can discuss about it, if necessary.

Remaining work include:

few changes we want to implement to @gitgraph/react (e.g. render tags & branches out of commit message)
development of @gitgraph/js (vanilla JS rendering lib)
new website with online documentation for rendering libs (@gitgraph/react & @gitgraph/js)
test rendering libs, open issues for bugs found and fix them

FeynmanDNA · 2019-02-18T09:30:09Z

hi, thanks for the awesome work on this library!

I tried to use the packages/gitgraph-react in my react app by installing the npm package "gitgraph-react": "^2.0.0-alpha.73bd2e56",. However, I have encountered some issues when using the code snippet from above for gitgraph-react:

I got the following warnings in the console:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Another minor mistake with the code snippet in the "with-ref" section is:

    const develop = git.branch("develop");
    develop.commit("hello");

git is not defined.

nicoespeon · 2019-02-18T23:11:49Z

Hi @FeynmanDNA and thanks for trying out 👋

Indeed, that's a good catch! The snippets in the issue description are incorrect. There were mostly brainstorm stuff, so we didn't tried them out. I'll update them 👌

You can have a look at the gitgraph-react README instead, it has a better snippet (which should work!) + few code examples you can try out.

FeynmanDNA · 2019-02-19T07:26:00Z

@nicoespeon hi thanks for your kind words! 👍

The gitgraph-react section of the repo also does not work for me. I git cloned this repo and cd to gitgraph.js/packages/gitgraph-react. But when i try to install the packages inside that directory, i got the following console error from yarn install:

> tsc

src/Dot.tsx:2:24 - error TS2307: Cannot find module '@gitgraph/core'.

2 import { Commit } from "@gitgraph/core";
                         ~~~~~~~~~~~~~~~~


src/Gitgraph.tsx:20:8 - error TS2307: Cannot find module '@gitgraph/core'.

20 } from "@gitgraph/core";
          ~~~~~~~~~~~~~~~~

I am not familiar with type-script, and maybe this is something to do with type-script?

nicoespeon · 2019-02-20T02:39:35Z

@FeynmanDNA Oh, I think this might be a lerna thing.

Can you try this:

Pull last changes from master
At the root of the repo, run yarn lerna bootstrap (it will link cross-dependencies between local packages, see their doc)
Try yarn install again from the react package

I think it should solve your issue. Let me know, I'll enrich the contribution README so people know how to set up a local repo.

Now, I also noticed that the published packages didn't get the correct dependency. I fixed that, but I forgot to re-publish new versions. I just did that.

That means you should be able to use @gitgraph/react by installing it in a React project. You can try by creating a new CRA, then installing @gitgraph/react and using it as a dependency.

FeynmanDNA · 2019-02-27T03:37:43Z

@nicoespeon yes now it works. Thanks for your advice and fix!

briangordon · 2019-03-28T04:58:23Z

@nicoespeon I'm still getting that issue when trying to yarn install the react package. I'm not a frontend developer and I've never used yarn before. I know enough javascript to be able to follow the tutorial on gitgraphjs.com by creating a little HTML file-

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.15.1/gitgraph.css" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.15.1/gitgraph.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/domready/1.0.8/ready.js"></script>
		<script type="text/javascript">
			domready(function() {
				var gitgraph = new GitGraph({
					template: "blackarrow",
					mode: "compact"
				});
				var develop = gitgraph.branch("develop");
				develop.commit();
			});
		</script>
	</head>
	<body>
		<canvas id="gitGraph"></canvas>
	</body>
</html>

However, I would like branches to be labeled at their actual tip (#160) so I understand that the JS version isn't sufficient. So I tried figuring out how to set up the react version in a similar way. All I want is to see the storybook in my browser so that I can play with the examples, but I can't find any instructions anywhere for doing this. I've never used react before so I don't have an existing project that I can add this package to. I thought that installing npm and yarn, and following your instructions in the comment above, would let me follow the storybook README instructions, but I can't get gitgraph-react to build.

Here's the output I get, after npm installing the lerna, babel-core, typescript, and webpack packages to resolve obvious errors telling me they were missing:

~/gitgraph.js $ yarn lerna bootstrap
yarn run v1.15.2
$ lerna bootstrap
lerna info version 2.11.0
lerna info versioning independent
lerna info Bootstrapping 3 packages
lerna info hoist Finished installing in root
lerna success Bootstrapped 3 packages
✨  Done in 14.69s.
~/gitgraph.js $ cd packages/gitgraph-react/
~/gitgraph.js/packages/gitgraph-react $ yarn
yarn install v1.15.2
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍  Resolving packages...
success Already up-to-date.
$ npm run build

> @gitgraph/[email protected] build /Users/brian/gitgraph.js/packages/gitgraph-react
> run-s build:*


> @gitgraph/[email protected] build:clear /Users/brian/gitgraph.js/packages/gitgraph-react
> rimraf ./lib


> @gitgraph/[email protected] build:tsc /Users/brian/gitgraph.js/packages/gitgraph-react
> tsc

src/BranchLabel.tsx:2:32 - error TS2307: Cannot find module '@gitgraph/core'.

2 import { Branch, Commit } from "@gitgraph/core";
                                 ~~~~~~~~~~~~~~~~

src/Dot.tsx:2:24 - error TS2307: Cannot find module '@gitgraph/core'.

2 import { Commit } from "@gitgraph/core";
                         ~~~~~~~~~~~~~~~~

src/Gitgraph.tsx:20:8 - error TS2307: Cannot find module '@gitgraph/core'.

20 } from "@gitgraph/core";
          ~~~~~~~~~~~~~~~~

src/Gitgraph.tsx:95:30 - error TS7006: Parameter 'data' implicitly has an 'any' type.

95     this.gitgraph.subscribe((data) => {
                                ~~~~

src/Gitgraph.tsx:157:53 - error TS2345: Argument of type '([branch, coordinates]: [any, any]) => Element' is not assignable to parameter of type '(value: {}, index: number, array: {}[]) => Element'.
  Types of parameters '__0' and 'value' are incompatible.
    Type '{}' is missing the following properties from type '[any, any]': 0, 1, length, pop, and 30 more.

157     return Array.from(this.state.branchesPaths).map(([branch, coordinates]) => (
                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
158       <path
    ~~~~~~~~~~~
...
169       />
    ~~~~~~~~
170     ));
    ~~~~~

src/Gitgraph.tsx:161:28 - error TS7006: Parameter 'a' implicitly has an 'any' type.

161           coordinates.map((a) => a.map((b) => this.getMessageOffset(b))),
                               ~

src/Gitgraph.tsx:161:41 - error TS7006: Parameter 'b' implicitly has an 'any' type.

161           coordinates.map((a) => a.map((b) => this.getMessageOffset(b))),
                                            ~

src/Gitgraph.tsx:249:32 - error TS7006: Parameter 'parentHash' implicitly has an 'any' type.

249     return commit.parents.map((parentHash) => {
                                   ~~~~~~~~~~

src/Gitgraph.tsx:311:19 - error TS2339: Property 'style' does not exist on type '{}'.

311       if (!branch.style.label.display) return null;
                      ~~~~~

src/Gitgraph.tsx:313:62 - error TS2339: Property 'name' does not exist on type '{}'.

313       const commitHash = this.gitgraph.refs.getCommit(branch.name);
                                                                 ~~~~

src/Gitgraph.tsx:318:45 - error TS2339: Property 'name' does not exist on type '{}'.

318       if (commit.branchToDisplay !== branch.name) return null;
                                                ~~~~

src/Gitgraph.tsx:325:26 - error TS2339: Property 'name' does not exist on type '{}'.

325           <g key={branch.name} ref={ref}>
                             ~~~~

src/Gitgraph.tsx:336:25 - error TS2339: Property 'name' does not exist on type '{}'.

336             key={branch.name}
                            ~~~~

src/Gitgraph.tsx:350:29 - error TS7006: Parameter 'tag' implicitly has an 'any' type.

350     return commit.tags.map((tag) => {
                                ~~~

src/Tag.tsx:3:32 - error TS2307: Cannot find module '@gitgraph/core'.

3 import { Tag as CoreTag } from "@gitgraph/core";
                                 ~~~~~~~~~~~~~~~~

src/Tooltip.tsx:2:24 - error TS2307: Cannot find module '@gitgraph/core'.

2 import { Commit } from "@gitgraph/core";
                         ~~~~~~~~~~~~~~~~


Found 16 errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @gitgraph/[email protected] build:tsc: `tsc`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @gitgraph/[email protected] build:tsc script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/brian/.npm/_logs/2019-03-28T04_48_32_997Z-debug.log
ERROR: "build:tsc" exited with 2.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @gitgraph/[email protected] build: `run-s build:*`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @gitgraph/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/brian/.npm/_logs/2019-03-28T04_48_33_046Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

I assume I'm doing something horribly wrong because of my react naivete. Any ideas on how I can proceed to play with the React examples? Your library seems really cool but I'm struggling a lot getting it working. Have you considered having a one-command build script that will install everything needed and build the project? (It's not clear to me why yarn doesn't do this already). Or a new section in this readme explaining what to do with the given code? I just want to create some screenshots of diagrams.

briangordon · 2019-03-28T05:28:47Z

Hey, I actually figured it out on my own! You have to yarn install in gitgraph-core first. This is what I did in total.

Setup:

brew install node # and added ~/.node/bin to my PATH
npm install -g lerna

Then:

git clone [email protected]:nicoespeon/gitgraph.js.git
echo "scripts-prepend-node-path=true" >> gitgraph.js/.npmrc
cd gitgraph.js
npm install babel-core
npm install typescript
npm install webpack
yarn lerna bootstrap
cd packages/gitgraph-core
yarn
cd ../gitgraph-react
yarn
yarn run storybook

Whew! Please consider documenting this so that other people don't have to struggle with it too 😄

nicoespeon · 2019-03-29T01:37:01Z

Hi @briangordon 👋

Sorry to learn you had to run into so many troubles! I've a couple information that you might find useful indeed:

I'm currently working on a @gitgraph/js package. It will allow you to just add the JS script in your webpage and use it, like you did with gitgraph.js. It will contain all features of the react package does, but in vanilla JS.
Usually, you only need to install the rendering package (e.g. @gitgraph/react for the moment). You shouldn't have to endure the hassle of cloning the repo with the source code and run it locally. Installation instructions are detailed in the README. But of course, with @gitgraph/react it expects you to already have React set up.
I planned to simplify how to run the source code demos locally. As you almost figured out, you actually need to:
- install dependencies (which you could in fact do by running yarn at the root level of the project),
- then build the core dependency (which is done post-install, but I recommend to go to packages/gitgraph-core/ and run yarn watch),
- finally launch storybook (go to packages/gitgraph-react/ and run yarn storybook)

But I really want to make it simpler. I'll also add more details into the CONTRIBUTING.md file for people who want to clone the project locally (and eventually contribute).

briangordon · 2019-03-29T05:16:57Z

Ah, that is a lot easier. I guess I was stumbling through a lot of stuff from not being familiar with the tool stack. Thanks for your response. Hopefully any other bumbling backend engineers will see this 😅

nicoespeon · 2019-03-29T11:43:37Z

It will be simpler and documented. I will do once I'm done creating the @gitgraph/js package so people can use just like they used to run gitgraph.js package.

nicoespeon · 2019-04-16T03:00:53Z

I just released the stable versions of each public package. That officially closes this issue.

From now on, these will be regular releases to implement new features and fix bugs on the library 🎉

fabien0102 added 📦 Refactor Change that doesn't change the existing behavior ✨ Feature New behavior to be added 💬 Discussion This issue needs to be discussed labels Jan 21, 2018

nicoespeon changed the title ~~Version 2.0.0 - The big refactor!~~ GitGraph.js v2 - The big refactor! Jan 22, 2018

nicoespeon changed the title ~~GitGraph.js v2 - The big refactor!~~ GitGraph.js v2 - The big refactor!… and more Jan 22, 2018

nicoespeon mentioned this issue Jan 22, 2018

GitGraph.js v2-alpha #188

Merged

nicoespeon closed this as completed Jul 12, 2018

nicoespeon reopened this Jul 12, 2018

fabien0102 mentioned this issue Jul 15, 2018

Render graph from JSON #38

Closed

This was referenced Aug 30, 2018

The blackarrow template displays incorrect arrow #186

Closed

Parse an existing git repository with CLI #117

Closed

Graph rendering differs on branching #174

Closed

nicoespeon removed the 📦 Refactor Change that doesn't change the existing behavior label Aug 31, 2018

nicoespeon changed the title ~~Gitgraph.js v2 - The big refactor!… and more~~ Gitgraph.js v2 - The big remodelling!… and more Aug 31, 2018

nicoespeon mentioned this issue Aug 31, 2018

TypeScript definitions do not match implementation #179

Closed

nicoespeon removed the ✨ Feature New behavior to be added label Feb 10, 2019

nicoespeon pinned this issue Feb 13, 2019

nicoespeon mentioned this issue Mar 5, 2019

gitgraph-react sample code does not work #229

Closed

nicoespeon closed this as completed Apr 16, 2019

nicoespeon unpinned this issue Apr 16, 2019

Gitgraph.js v2 - The big remodelling!… and more #187

Gitgraph.js v2 - The big remodelling!… and more #187

Comments

fabien0102 commented Jan 21, 2018 • edited by nicoespeon Loading

Gitgraph.js v2

✏️ Todo

When everything else will be done

To fix for release

General

Gitgraph Core

Gitgraph React (rendering)

🎨 Nice-to-have

Gitgraph React (rendering)

Gitgraph node (rendering)

🧐 Why? What do we want to achieve?

🥞 Stack

🗂 Repositories

packages/gitgraph-core

packages/gitgraph-js

packages/gitgraph-react

packages/gitgraph-node

🙀 Breaking changes

nicoespeon commented Jan 22, 2018

Letme commented Feb 5, 2018

Turiok commented Feb 12, 2018 • edited Loading

fabien0102 commented Feb 14, 2018

dolanmiu commented Feb 20, 2018 • edited Loading

dolanmiu commented Feb 20, 2018

dolanmiu commented Feb 20, 2018

fabien0102 commented Feb 20, 2018

fabien0102 commented Feb 20, 2018

dolanmiu commented Feb 20, 2018 • edited Loading

fabien0102 commented Feb 20, 2018

fabien0102 commented Feb 20, 2018

dolanmiu commented Feb 20, 2018 • edited Loading

dolanmiu commented Feb 20, 2018

fabien0102 commented Feb 20, 2018

fabien0102 commented Feb 20, 2018

fabien0102 commented Feb 20, 2018 • edited Loading

dolanmiu commented Feb 20, 2018 • edited Loading

dolanmiu commented Feb 20, 2018

fabien0102 commented Feb 20, 2018 • edited Loading

fabien0102 commented Feb 20, 2018 • edited Loading

dolanmiu commented Feb 20, 2018 • edited Loading

fabien0102 commented Feb 20, 2018

fabien0102 commented Mar 17, 2018

mrts commented Jul 10, 2018 • edited Loading

fabien0102 commented Jul 11, 2018

nicoespeon commented Jul 12, 2018 • edited Loading

mrts commented Jul 12, 2018 • edited Loading

nicoespeon commented Feb 10, 2019

FeynmanDNA commented Feb 18, 2019

nicoespeon commented Feb 18, 2019

FeynmanDNA commented Feb 19, 2019

nicoespeon commented Feb 20, 2019 • edited Loading

FeynmanDNA commented Feb 27, 2019

briangordon commented Mar 28, 2019 • edited Loading

briangordon commented Mar 28, 2019 • edited Loading

nicoespeon commented Mar 29, 2019

briangordon commented Mar 29, 2019

nicoespeon commented Mar 29, 2019

nicoespeon commented Apr 16, 2019

fabien0102 commented Jan 21, 2018 •

edited by nicoespeon

Loading

Turiok commented Feb 12, 2018 •

edited

Loading

dolanmiu commented Feb 20, 2018 •

edited

Loading

dolanmiu commented Feb 20, 2018 •

edited

Loading

dolanmiu commented Feb 20, 2018 •

edited

Loading

fabien0102 commented Feb 20, 2018 •

edited

Loading

dolanmiu commented Feb 20, 2018 •

edited

Loading

fabien0102 commented Feb 20, 2018 •

edited

Loading

fabien0102 commented Feb 20, 2018 •

edited

Loading

dolanmiu commented Feb 20, 2018 •

edited

Loading

mrts commented Jul 10, 2018 •

edited

Loading

nicoespeon commented Jul 12, 2018 •

edited

Loading

mrts commented Jul 12, 2018 •

edited

Loading

nicoespeon commented Feb 20, 2019 •

edited

Loading

briangordon commented Mar 28, 2019 •

edited

Loading

briangordon commented Mar 28, 2019 •

edited

Loading