set up webpack etc

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-flow"]
+}

.eslintrc.js

@@ -0,0 +1,33 @@
+module.exports = {
+    'extends': [
+        // "google",
+        "eslint:recommended",
+    ],
+    'env': {
+        'browser': true,
+        'webextensions': true,
+        'node': true,
+        'es6': true,
+    },
+
+    "parserOptions": {
+        'sourceType': 'module',
+        "ecmaFeatures": {
+            "forOf": true,
+            "modules": true,
+        }
+    },
+
+    "rules": {
+        "indent": "off",
+        "comma-dangle": "off",
+        "no-console": "off",
+    }
+    // TODO use flow?
+};
+//module.exports = {
+//    // "extends": "google",
+//    'extends': [
+//        "plugin:react/recommended",
+//    ],
+//};

.flowconfig

@@ -0,0 +1,11 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+
+[strict]

package.json

@@ -3,20 +3,35 @@
   "version": "0.0.1",
   "description": "A reliable way of capturing web pages and content",
   "scripts": {
-    "build": "node utils/build.js",
+    "build": "webpack --progress --profile --colors",
-    "start": "node utils/webserver.js"
+    "watch": "webpack --watch --progress --colors",
+    "dev": "npm run watch",
+    "eslint": "eslint src",
+    "flow": "flow"
   },
   "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-flow": "^7.0.0",
     "clean-webpack-plugin": "^0.1.17",
     "copy-webpack-plugin": "^4.2.0",
     "css-loader": "^0.25.0",
+    "eslint": "^5.11.1",
+    "eslint-config-google": "^0.11.0",
     "file-loader": "^0.11.2",
     "fs-extra": "^0.30.0",
     "html-loader": "^0.4.5",
     "html-webpack-plugin": "2.24.1",
     "style-loader": "^0.13.0",
-    "webpack": "2.2.1",
+    "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "write-file-webpack-plugin": "3.4.2"
+  },
+  "dependencies": {
+    "babel-loader": "^8.0.5",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "flow": "^0.2.3"
   }
 }

server.py

@@ -0,0 +1,20 @@
+"""First API, local access only"""
+import hug # type: ignore
+import hug.types as T # type: ignore
+
+
+
+@hug.local()
+@hug.post('/capture')
+def capture(
+        url: T.text,
+        selection: T.Nullable(T.text),
+        comment: T.Nullable(T.text),
+):
+    # TODO can even configure the path in browser? but fine for now..
+    print("HELOOO")
+    """Says happy birthday to a user"""
+    print(url, selection, comment)
+    return {}
+    # return {'message': 'Happy {0} Birthday {1}!'.format(age, name),
+    #         'took': float(hug_timer)}

src/js/background.js

@@ -1,23 +1,40 @@
-import '../img/icon-128.png'
+/* @flow */
-import '../img/icon-34.png'
+// TODO do I really need to annotate all files with @flow??
 
 // TODO wtf?? what does that import mean??
+// import '../img/icon-128.png'
+// import '../img/icon-34.png'
 
-function makeCaptureRequest() {
+const capture_endpoint = 'capture';
-    var request = new XMLHttpRequest();
-    console.log('adadad');
-
 // TODO configure port
-    request.open('POST', 'http://localhost:8000/capture', true);
+const port = 8000;
 
 
-    // TODO request header??
+function capture_url (): string {
+    return `http://localhost:${port}/${capture_endpoint}`;
+}
 
+function makeCaptureRequest(
+    url: string,
+    selection: ?string=null,
+    comment: ?string=null, // TODO anything alse??
+) {
+    const data = JSON.stringify({
+        'url': url,
+        'selection': selection,
+        'comment': comment,
+    });
+
+
+    var request = new XMLHttpRequest();
+    console.log(`capturing ${data}`);
+
+    request.open('POST', capture_url(), true);
     request.onload = function() {
         if (this.status >= 200 && this.status < 400) {
             // Success!
-            var data = JSON.parse(this.response);
+            var response = JSON.parse(this.response);
-            console.log(`SUCCESS ${data}`);
+            console.log(`SUCCESS ${response}`);
         } else {
             // We reached our target server, but it returned an error
         }
@@ -29,8 +46,6 @@ function makeCaptureRequest() {
     };
 
     request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
-    // xmlhttp.send(JSON.stringify({ "email": "hello@user.com", "response": { "name": "Tester" } }));
+    request.send(data);
-    request.send(JSON.stringify({'name': 'alala', 'age': 10}));
 }
-makeCaptureRequest();
+makeCaptureRequest('hello');
-

src/js/popup.js

@@ -2,3 +2,5 @@ import "../css/popup.css";
 import hello from "./popup/example";
 
 hello();
+
+// TODO on popup, should 

src/js/popup/example.js

@@ -1,4 +1,4 @@
 export default function () {
   // alert("hello! (find me on src/js/popup/example.js)");
 
-};
+}

src/manifest.json

@@ -5,15 +5,11 @@
     "page": "background.html"
   },
   "browser_action": {
-    "default_popup": "popup.html",
+    "default_popup": "popup.html"
-    "default_icon": "icon-34.png"
   },
   "permissions": [
       "http://*/"
   ],
-  "icons": {
-    "128": "icon-128.png"
-  },
   "manifest_version": 2,
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
 }

webpack.config.js

@@ -30,6 +30,13 @@ var options = {
   },
   module: {
     rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+            loader: 'babel-loader',
+        }
+      },
       {
         test: /\.css$/,
         loader: "style-loader!css-loader",