Merge pull request #287 from nicoespeon/browser-bundle

Generate browser bundle for @gitgraph/js
nicoespeon · May 7, 2019 · ba4f413 · ba4f413
2 parents b73ce45 + ea5e29f
commit ba4f413
Show file tree

Hide file tree

Showing 15 changed files with 171 additions and 53 deletions.
diff --git a/packages/gitgraph-core/rollup.config.js b/packages/gitgraph-core/rollup.config.js
@@ -1,3 +1,7 @@
-import build from "../../rollup.config";
-
-export default build("gitgraph.core");
+export default {
+  input: "lib/index.js",
+  output: {
+    file: "lib/bundle.umd.js",
+    format: "umd",
+  },
+};
diff --git a/packages/gitgraph-core/src/__tests__/gitgraph.getRenderedData.position.test.ts b/packages/gitgraph-core/src/__tests__/gitgraph.getRenderedData.position.test.ts
@@ -1,4 +1,5 @@
-import { GitgraphCore, Mode } from "../gitgraph";
+import { GitgraphCore } from "../gitgraph";
+import { Mode } from "../mode";
 import { Orientation } from "../orientation";
 
 describe("Gitgraph.getRenderedData.position", () => {

diff --git a/packages/gitgraph-core/src/__tests__/gitgraph.getRenderedData.style.test.ts b/packages/gitgraph-core/src/__tests__/gitgraph.getRenderedData.style.test.ts
@@ -1,4 +1,5 @@
-import { GitgraphCore, Mode } from "../gitgraph";
+import { GitgraphCore } from "../gitgraph";
+import { Mode } from "../mode";
 import { BranchOptions } from "../branch";
 import { metroTemplate, TemplateName, blackArrowTemplate } from "../template";
 import { Orientation } from "../orientation";

diff --git a/packages/gitgraph-core/src/__tests__/gitgraph.getRenderedData.tags.test.ts b/packages/gitgraph-core/src/__tests__/gitgraph.getRenderedData.tags.test.ts
@@ -1,5 +1,4 @@
 import { GitgraphCore } from "../gitgraph";
-import { Tag } from "../tag";
 
 describe("Gitgraph.getRenderedData.tags", () => {
   it("should tag a commit", () => {

diff --git a/packages/gitgraph-core/src/gitgraph.ts b/packages/gitgraph-core/src/gitgraph.ts
@@ -1,6 +1,7 @@
 import { Branch, DELETED_BRANCH_NAME, createDeletedBranch } from "./branch";
 import { Commit } from "./commit";
 import { createGraphRows, GraphRows } from "./graph-rows";
+import { Mode } from "./mode";
 import { BranchesOrder, CompareBranchesOrder } from "./branches-order";
 import {
   Template,
@@ -18,11 +19,7 @@ import {
   GitgraphTagOptions,
 } from "./user-api/gitgraph-user-api";
 
-export { Mode, GitgraphOptions, RenderedData, GitgraphCore };
-
-enum Mode {
-  Compact = "compact",
-}
+export { GitgraphOptions, RenderedData, GitgraphCore };
 
 interface GitgraphOptions {
   template?: TemplateName | Template;

diff --git a/packages/gitgraph-core/src/graph-rows/index.ts b/packages/gitgraph-core/src/graph-rows/index.ts
@@ -1,4 +1,4 @@
-import { Mode } from "../gitgraph";
+import { Mode } from "../mode";
 import { Commit } from "../commit";
 
 import { CompactGraphRows } from "./compact";

diff --git a/packages/gitgraph-core/src/index.ts b/packages/gitgraph-core/src/index.ts
@@ -1,4 +1,5 @@
-export { GitgraphCore, GitgraphOptions, RenderedData, Mode } from "./gitgraph";
+export { GitgraphCore, GitgraphOptions, RenderedData } from "./gitgraph";
+export { Mode } from "./mode";
 export {
   GitgraphUserApi,
   GitgraphCommitOptions,

diff --git a/packages/gitgraph-core/src/mode.ts b/packages/gitgraph-core/src/mode.ts
@@ -0,0 +1,5 @@
+export { Mode };
+
+enum Mode {
+  Compact = "compact",
+}
diff --git a/packages/gitgraph-core/src/user-api/branch-user-api.ts b/packages/gitgraph-core/src/user-api/branch-user-api.ts
@@ -1,4 +1,5 @@
-import { GitgraphCore, Mode } from "../gitgraph";
+import { GitgraphCore } from "../gitgraph";
+import { Mode } from "../mode";
 import {
   GitgraphCommitOptions,
   GitgraphBranchOptions,

diff --git a/packages/gitgraph-js/README.md b/packages/gitgraph-js/README.md
@@ -13,12 +13,22 @@ Draw pretty git graphs with vanilla JS.
 
 ## Get started
 
+### 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
 <!DOCTYPE html>
 <html>
@@ -27,13 +37,18 @@ Now you can use `createGitgraph` to render your graph in a DOM element:
 </head>
 <body>
   <!-- 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>
 </html>
 ```
 
+Create an `index.js` file:
+
 ```js
-const { createGitgraph } = require("@gitgraph/js");
+import { createGitgraph } from "@gitgraph/js";
 
 // Get the graph container HTML element.
 const graphContainer = document.getElementById("graph-container");
@@ -60,10 +75,25 @@ develop.commit("Prepare v1");
 master.merge(develop).tag("v1.0.0");
 ```
 
-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
 
 [A bunch of scenarios][stories] has been simulated in our Storybook. You can give them a look 👀
@@ -72,3 +102,7 @@ This code will render the following graph:
 [gitgraph-repo]: https://github.com/nicoespeon/gitgraph.js/
 [stories]: https://github.com/nicoespeon/gitgraph.js/tree/master/packages/stories/src/gitgraph-js/
 [migration-guide]: https://github.com/nicoespeon/gitgraph.js/blob/master/packages/gitgraph-js/MIGRATE_FROM_GITGRAPH.JS.md
+
+```
+
+```
diff --git a/packages/gitgraph-js/package.json b/packages/gitgraph-js/package.json
@@ -26,7 +26,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "./lib/bundle.umd.js",
+  "main": "./lib/index.js",
+  "browser": "./lib/gitgraph.umd.js",
   "module": "./lib/index.js",
   "jsnext:main": "./lib/index.js",
   "typings": "./lib/index.d.ts",
@@ -42,8 +43,7 @@
     "build:clear": "rimraf ./lib",
     "build:tsc": "tsc",
     "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 -p -l 0 --tag-prefix @gitgraph/js@ && git add CHANGELOG.md"
   },
@@ -53,10 +53,11 @@
   "devDependencies": {
     "@types/node": "^9.4.6",
     "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"
   }

diff --git a/packages/gitgraph-js/rollup.config.js b/packages/gitgraph-js/rollup.config.js
@@ -1,3 +1,12 @@
-import build from "../../rollup.config";
+import resolve from "rollup-plugin-node-resolve";
+import commonJS from "rollup-plugin-commonjs";
 
-export default build("gitgraph.core");
+export default {
+  input: "lib/index.js",
+  output: {
+    file: "lib/gitgraph.umd.js",
+    format: "umd",
+    name: "GitgraphJS",
+  },
+  plugins: [resolve(), commonJS()],
+};
diff --git a/packages/gitgraph-react/rollup.config.js b/packages/gitgraph-react/rollup.config.js
@@ -1,3 +1,25 @@
-import build from "../../rollup.config";
+const globals = {
+  "@gitgraph/core": "gitgraph.core",
+};
 
-export default build("gitgraph.core");
+export default {
+  input: "lib/index.js",
+  output: {
+    file: "lib/bundle.umd.js",
+    format: "umd",
+  },
+  name: "GitgraphReact",
+  exports: "named",
+  sourcemap: true,
+  external: Object.keys(globals),
+  onwarn,
+  globals,
+};
+
+function onwarn(message) {
+  const suppressed = ["UNRESOLVED_IMPORT", "THIS_IS_UNDEFINED"];
+
+  if (!suppressed.find((code) => message.code === code)) {
+    return console.warn(message.message);
+  }
+}
diff --git a/rollup.config.js b/rollup.config.js