@gitgraph/js - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

@@ -7,2 +7,20 @@ ### Changelog
 
+#### [1.1.0](https://github.com/nicoespeon/gitgraph.js/compare/@gitgraph/js@1.0.0...@gitgraph/js@1.1.0)
+
+> 7 May 2019
+
+- Generate browser bundle for @gitgraph/js [`#287`](https://github.com/nicoespeon/gitgraph.js/pull/287)
+- Implement custom render for tags [`#289`](https://github.com/nicoespeon/gitgraph.js/pull/289)
+- Customize how we render branches labels [`#286`](https://github.com/nicoespeon/gitgraph.js/pull/286)
+- Stream lerna outputs [`#281`](https://github.com/nicoespeon/gitgraph.js/issues/281)
+
+#### [1.0.0](https://github.com/nicoespeon/gitgraph.js/compare/@gitgraph/js@1.0.0-4...@gitgraph/js@1.0.0)
+
+> 16 April 2019
+
+- Introduce changelogs to packages. [`#280`](https://github.com/nicoespeon/gitgraph.js/pull/280)
+- Allow branching from another branch [`#279`](https://github.com/nicoespeon/gitgraph.js/pull/279)
+- Website revamp [`#272`](https://github.com/nicoespeon/gitgraph.js/pull/272)
+- Add stories for large graph [`#269`](https://github.com/nicoespeon/gitgraph.js/pull/269)
+
 #### [1.0.0-4](https://github.com/nicoespeon/gitgraph.js/compare/@gitgraph/js@1.0.0-3...@gitgraph/js@1.0.0-4)
@@ -9,0 +27,0 @@

lib/gitgraph.d.ts

@@ -1,7 +0,8 @@
-import { GitgraphOptions, GitgraphCommitOptions, MergeStyle, Mode, BranchUserApi, GitgraphBranchOptions, GitgraphMergeOptions, Orientation, TemplateName, templateExtend } from "@gitgraph/core";
+import { GitgraphOptions, GitgraphCommitOptions, MergeStyle, Mode, BranchUserApi, GitgraphBranchOptions, GitgraphTagOptions, GitgraphMergeOptions, Orientation, TemplateName, templateExtend } from "@gitgraph/core";
 declare type CommitOptions = GitgraphCommitOptions<SVGElement>;
 declare type BranchOptions = GitgraphBranchOptions<SVGElement>;
+declare type TagOptions = GitgraphTagOptions<SVGElement>;
 declare type MergeOptions = GitgraphMergeOptions<SVGElement>;
 declare type Branch = BranchUserApi<SVGElement>;
-export { createGitgraph, CommitOptions, Branch, BranchOptions, MergeOptions, Mode, Orientation, TemplateName, templateExtend, MergeStyle, };
+export { createGitgraph, CommitOptions, Branch, BranchOptions, TagOptions, MergeOptions, Mode, Orientation, TemplateName, templateExtend, MergeStyle, };
 declare function createGitgraph(graphContainer: HTMLElement, options?: GitgraphOptions): import("@gitgraph/core/lib/user-api/gitgraph-user-api").GitgraphUserApi<SVGElement>;

lib/gitgraph.js

@@ -111,4 +111,4 @@ import { GitgraphCore, MergeStyle, arrowSvgPath, toSvgPath, Mode, Orientation, TemplateName, templateExtend, } from "@gitgraph/core";
                     // BBox width misses box padding and offset
-                    // => they are set later, on branch label update.
-                    // We would need to make branch label update happen before to solve it.
+                    // => they are set later, on tag update.
+                    // We would need to make tag update happen before to solve it.
                     var offset = parseFloat(tag.getAttribute("data-offset") || "0");
@@ -290,6 +290,9 @@ var tagWidth = tag.getBBox().width + 2 * TAG_PADDING_X + offset;
                 return null;
-            var branchLabel;
+            var branchLabel = branch.renderLabel
+                ? branch.renderLabel(branch)
+                : createBranchLabel(branch, commit);
+            var branchLabelContainer;
             if (gitgraph.isVertical) {
-                branchLabel = createG({
-                    children: [createBranchLabel(branch, commit)],
+                branchLabelContainer = createG({
+                    children: [branchLabel],
                 });
@@ -300,9 +303,9 @@ }
                 var horizontalMarginTop = 10;
-                branchLabel = createG({
+                branchLabelContainer = createG({
                     translate: { x: commit.x, y: commitDotSize + horizontalMarginTop },
-                    children: [createBranchLabel(branch, commit)],
+                    children: [branchLabel],
                 });
             }
-            setBranchLabelRef(commit, branchLabel);
-            return branchLabel;
+            setBranchLabelRef(commit, branchLabelContainer);
+            return branchLabelContainer;
         });
@@ -316,8 +319,14 @@ }
         return commit.tags.map(function (tag) {
-            var tagElement = createTag(tag);
-            setTagRef(commit, tagElement);
-            return createG({
+            var tagElement = tag.render
+                ? tag.render(tag.name, tag.style)
+                : createTag(tag);
+            var tagContainer = createG({
                 translate: { x: 0, y: commit.style.dot.size },
                 children: [tagElement],
             });
+            // `data-offset` is used to position tag element in `positionCommitsElements`.
+            // => because when it's executed, tag offsets are not resolved yet
+            tagContainer.setAttribute("data-offset", tag.style.pointerWidth.toString());
+            setTagRef(commit, tagContainer);
+            return tagContainer;
         });
@@ -324,0 +333,0 @@ }

lib/tag.d.ts

 import { Tag } from "@gitgraph/core";
 export { createTag, PADDING_X };
 declare const PADDING_X = 10;
-declare function createTag(tag: Tag): SVGGElement;
+declare function createTag(tag: Tag<SVGElement>): SVGGElement;

lib/tag.js

@@ -18,5 +18,3 @@ import { createG, createText, createPath } from "./svg-elements";
     var result = createG({ children: [path] });
-    // Pass computed box width to gitgraph so it can adapt.
     var offset = tag.style.pointerWidth;
-    result.setAttribute("data-offset", offset.toString());
     var observer = new MutationObserver(function () {
@@ -23,0 +21,0 @@ var _a = text.getBBox(), height = _a.height, width = _a.width;

package.json

 {
   "name": "@gitgraph/js",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Draw pretty git graphs in the browser",
@@ -29,3 +29,4 @@ "author": "Nicolas Carlo <[e-mail]>",
   },
-  "main": "./lib/bundle.umd.js",
+  "main": "./lib/index.js",
+  "browser": "./lib/gitgraph.umd.js",
   "module": "./lib/index.js",
@@ -46,9 +47,8 @@ "jsnext:main": "./lib/index.js",
     "build:bundle": "rollup -c rollup.config.js",
-    "build:browserify": "browserify ./lib/bundle.umd.js -o ./lib/bundle.js",
-    "build:minify": "uglifyjs -c -m -o ./lib/bundle.min.js -- ./lib/bundle.js",
+    "build:minify": "uglifyjs -c -m -o ./lib/gitgraph.umd.min.js -- ./lib/gitgraph.umd.js",
     "prepare": "npm run build",
-    "version": "auto-changelog -l 0 --tag-prefix @gitgraph/js@ && git add CHANGELOG.md"
+    "version": "auto-changelog -p -l 0 --tag-prefix @gitgraph/js@ && git add CHANGELOG.md"
   },
   "dependencies": {
-    "@gitgraph/core": "1.1.0"
+    "@gitgraph/core": "1.2.0"
   },
@@ -58,10 +58,11 @@ "devDependencies": {
     "auto-changelog": "1.12.1",
-    "browserify": "^14.5.0",
     "npm-run-all": "^4.1.2",
     "rimraf": "^2.6.2",
-    "rollup": "^0.51.8",
+    "rollup": "1.10.1",
+    "rollup-plugin-commonjs": "9.3.4",
+    "rollup-plugin-node-resolve": "4.2.3",
     "typescript": "3.3.4000",
     "uglify-es": "^3.3.9"
   },
-  "gitHead": "ea68c9502487554347d128c97238ffce9096e140"
+  "gitHead": "50156ed2991f03c7c488a10ecf2064ddbf0460e9"
 }

README.md

@@ -16,8 +16,18 @@ # `@gitgraph/js`
 
+### Example with ParcelJS
+
 > You need to have [npm][get-npm] installed.
 
+Create a new folder for your project and go there: `mkdir your-project && cd your-project`
+
+Initialize your npm project: `npm init -y`
+
 Install the package with npm: `npm i --save @gitgraph/js`
 
+Install Parcel bundler: `npm i --save-dev parcel-bundler`
+
 Now you can use `createGitgraph` to render your graph in a DOM element:
 
+Create an `index.html` file:
+
 ```html
@@ -31,3 +41,6 @@ <!DOCTYPE html>
   <!-- DOM element in which we'll mount our graph -->
-  <div id="#graph-container"></div>
+  <div id="graph-container"></div>
+
+  <!-- This is for ParcelJS bundler -->
+  <script src="./index.js"></script>
 </body>
@@ -37,4 +50,6 @@ </html>
 
+Create an `index.js` file:
+
 ```js
-const { createGitgraph } = require("@gitgraph/js");
+import { createGitgraph } from "@gitgraph/js";
 
@@ -66,6 +81,21 @@ // Get the graph container HTML element.
 
-This code will render the following graph:
+Add start command in your `package.json`:
 
+```diff
+{
+  "name": "your-project",
+  "version": "1.0.0",
+  "scripts": {
++   "start": "parcel index.html"
+  }
+```
+
+Run `npm start`. You should see the following graph:
+
 ![Example of usage](./assets/example-usage.png)
 
+### Example with browser bundle
+
+TODO: fill
+
 ## More examples
@@ -79,1 +109,5 @@
 [migration-guide]: https://github.com/nicoespeon/gitgraph.js/blob/master/packages/gitgraph-js/MIGRATE_FROM_GITGRAPH.JS.md
+
+```
+
+```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

109

increased by45.33%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

202142

decreased by-28.52%

Dev dependency count

9

increased by12.5%

Number of package files

24

decreased by-7.69%

Lines of code

3148

decreased by-17.63%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@gitgraph/core@1.2.0(transitive)

• - Removed@gitgraph/core@1.1.0(transitive)

• Updated@gitgraph/core@1.2.0