Add initial build setup (#24)

* fix 'Failed to minify the code from this file' issue

* fix build 'error TS2300: Duplicate identifier 'Element'' issue

* fix missing gear icon from parent pr selector

* add initial extension build setup

.gitignore

@@ -19,3 +19,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*.pem

jsx-dom-svg.d.ts

@@ -0,0 +1,3 @@
+declare module "jsx-dom/svg" {
+  export * from "jsx-dom";
+}

package.json

@@ -5,24 +5,22 @@
   "dependencies": {
     "@types/qs": "^6.5.1",
     "axios": "^0.17.1",
-    "dom-chef": "^3.0.0",
     "emotion": "^8.0.12",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "jsx-dom": "^5.2.0",
     "react-scripts-ts": "2.8.0",
     "select-dom": "^4.1.1"
   },
   "scripts": {
     "start": "HTTPS=true react-scripts-ts start",
-    "build": "react-scripts-ts build",
+    "build": "react-scripts-ts build && ./post-build",
     "test": "react-scripts-ts test --env=jsdom",
-    "eject": "react-scripts-ts eject"
+    "eject": "react-scripts-ts eject",
+    "pack-extension": "node scripts/pack.js"
   },
   "devDependencies": {
     "@types/jest": "^21.1.9",
     "@types/node": "^8.5.2",
-    "@types/react": "^16.0.31",
-    "@types/react-dom": "^16.0.3",
+    "crx": "^3.2.1",
     "prettier": "^1.9.2",
     "tslint-config-prettier": "^1.6.0"
   }

post-build

@@ -0,0 +1,7 @@
+rm build/asset-manifest.json
+rm build/favicon.ico
+rm build/index.html
+rm build/service-worker.js
+mv build/static/js/*.js.map build/bundle.js.map
+mv build/static/js/*.js build/bundle.js
+rm -r build/static

public/manifest.json

@@ -1,15 +1,13 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": "./index.html",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "version": "0.0.1",
+  "name": "Stacker",
+  "manifest_version": 2,
+  "description": "Stacked pull requests for Github",
+  "update_url": "http://www.example.com/update.xml",
+  "content_scripts": [{
+    "js": ["bundle.js"],
+    "matches": ["*://*/*"]
+  }],
+  "permissions": ["*://*/*" ],
+  "content_security_policy": "default-src 'self'; script-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;"
 }

scripts/pack.js

@@ -0,0 +1,20 @@
+const fs = require("fs");
+const ChromeExtension = require("crx");
+const path = require("path");
+
+const argv = require("minimist")(process.argv.slice(2));
+
+const keyPath = argv.key || "key.pem";
+const existsKey = fs.existsSync(keyPath);
+
+const crx = new ChromeExtension({
+  privateKey: existsKey ? fs.readFileSync(keyPath) : null
+});
+
+crx
+  .load(path.join(__dirname, "../build"))
+  .then(() => crx.pack())
+  .then(crxBuffer => {
+    fs.writeFileSync("./build/stacker.crx", crxBuffer);
+  })
+  .catch(err => console.error(err));

src/features/diff-select.tsx

@@ -1,4 +1,4 @@
-import { h } from "dom-chef";
+import { h } from "jsx-dom";
 import {
   getPullRequest,
   getPullRequestCommits,

src/features/merge-warning.tsx

@@ -1,4 +1,4 @@
-import { h } from "dom-chef";
+import { h } from "jsx-dom";
 import { getPullRequests } from "../api";
 import {
   createIdForPullRequest,

src/features/parent-pr-select/components/PRSelector.tsx

@@ -1,4 +1,6 @@
-import { h } from "dom-chef";
+// tslint:disable-next-line no-submodule-imports
+import { h } from "jsx-dom/svg";
+
 import { IGithubPullRequest } from "../../../api";
 import PullRequest from "./PullRequest";
 
@@ -49,7 +51,6 @@ export default function PRSelector(
                 aria-label="Close"
                 className="octicon octicon-x js-menu-close"
                 height="16"
-                role="img"
                 version="1.1"
                 viewBox="0 0 12 16"
                 width="12"
@@ -68,7 +69,6 @@ export default function PRSelector(
                   aria-label="Close"
                   className="octicon octicon-x js-menu-close"
                   height="16"
-                  role="img"
                   version="1.1"
                   viewBox="0 0 12 16"
                   width="12"
@@ -99,7 +99,6 @@ export default function PRSelector(
                 <div
                   data-filterable-for="prs-filter-field"
                   data-filterable-type="substring"
-                  role="menu"
                 >
                   {pullRequests.map(pr => PullRequest(pr, selectPR))}
                 </div>

src/features/parent-pr-select/components/PullRequest.tsx

@@ -1,4 +1,4 @@
-import { h } from "dom-chef";
+import { h } from "jsx-dom";
 import { IGithubPullRequest } from "../../../api";
 import { createIdForPullRequest } from "../../../lib/base";
 

src/features/show-stacking-in-list.tsx

@@ -1,5 +1,5 @@
-import { h } from "dom-chef";
 import { css } from "emotion";
+import { h } from "jsx-dom";
 import { getPullRequests, IGithubPullRequest } from "../api";
 import {
   BaseId,
@@ -102,7 +102,7 @@ function getBadge(pullRequest: IGithubPullRequest, pullRequestGraph: INode) {
           stackNode.node.children.length === 0 &&
           stackNode.node.parent === null
         ) {
-          return null;
+          return <div />;
         }
 
         const childCount = stackNode.node.children.length;
@@ -125,17 +125,18 @@ function getBadge(pullRequest: IGithubPullRequest, pullRequestGraph: INode) {
             }}
           >
             <span className={numberStyle}>part {stackNode.number + 1}</span>
-            {branches &&
-              childCount > 0 && (
-                <div
-                  className={ball}
-                  style={{
-                    "background-color": childColor
-                  }}
-                >
-                  <span>+{childCount}</span>
-                </div>
-              )}
+            {branches && childCount > 0 ? (
+              <div
+                className={ball}
+                style={{
+                  "background-color": childColor
+                }}
+              >
+                <span>+{childCount}</span>
+              </div>
+            ) : (
+              <div />
+            )}
           </div>
         );
       })}