Replace axios with raw fetch API to talk to smuggler from web (#69)

Replace [`axios`](ttps://github.com/axios/axios) with raw [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) API to talk to smuggler from web (web app, browser extension, etc).

Basically `axios` doesn't work in chrome extension, `axios` GitHub issue axios/axios#2968

- [x] Replace `axios` with `fetch`
- [x] Replaced `axios`'s `CancelToken` with `fetch`'s `AbortControler` all over the truthsayer code
- [x] Separated `archaeologist` build in development and production modes - to use different endpoints of smuggler
- [x] Added simple `ping` from archaeologist background code to test that smuggler API actually works for it
- [x] Added special environment variables for archaeologist to distinguish different bowsers in TS/JS code (not used yet)
- [x] Fixed a problem with cross origin permissions in `archaeologist` by adding `host_permissions` to `manifest.json`

.github/workflows/yarn.test.yml

@@ -48,7 +48,7 @@ jobs:
         run: yarn smuggler-api build
 
       - name: Build archaeologist
-        run: yarn archaeologist build
+        run: yarn archaeologist build:chrome:public
 
       - name: Build truthsayer
         # This is a little absurd, but CI=ture force react build scripb treat

README.md

@@ -24,6 +24,14 @@ For to build a single workspace:
 ```
 yarn <workspace> build
 ```
+For instance to build truthsayer only:
+```
+yarn truthsayer build
+```
+To build all workspaces:
+```
+yarn build
+```
 
 ### Test
 

archaeologist/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "webpack --watch --mode development --config webpack.config.js",
-    "build": "webpack --config webpack.config.js --mode production",
+    "build:chrome:public": "webpack --config webpack.config.js --mode production --env chrome",
+    "build:chrome:local": "webpack --config webpack.config.js --mode development --env chrome --progress --color",
     "test": "jest",
     "eject": "react-scripts eject",
     "fmt": "prettier --write $(find src -name '*.css' -o -name '*.js' -o -name '*.jsx')",
@@ -40,10 +40,11 @@
     "@hot-loader/react-dom": "^16.8.6",
     "@popperjs/core": "^2.9.3",
     "@types/chrome": "^0.0.154",
+    "process": "^0.11.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hot-loader": "^4.13.0",
     "react-scripts": "4.0.3",
+    "smuggler-api": "0.0.1",
     "ts-node": "^9.1.1",
     "universal-cookie": "^4.0"
   },

archaeologist/public/manifest.json

@@ -32,6 +32,10 @@
     "contextMenus",
     "storage"
   ],
+  "host_permissions": [
+    "https://*.mazed.dev/*",
+    "http://localhost:3000/*"
+  ],
   "content_scripts": [
     {
       "matches": [

archaeologist/src/App.tsx

@@ -2,8 +2,11 @@ import React from 'react'
 import { SaveButton } from './components/Button/Button'
 import * as log from './util/log'
 
+import { authCookie } from 'smuggler-api'
+
 export const App = () => {
-  log.debug('Render app')
+  const [authenticated, setAuthenticated] = React.useState(false)
+  log.debug('Render app', authenticated)
   return (
     <>
       <SaveButton />

archaeologist/src/background.ts

@@ -3,8 +3,11 @@ import * as log from './util/log'
 
 import { WebPageContent } from './webPageContent'
 
+import { smuggler, authCookie } from 'smuggler-api'
+
 const sendSavePageRequest = () => {
   log.debug('sendSavePageRequest')
+  log.debug('Save page content authenticated:', authCookie.checkAuth())
   const message = { type: 'REQ_SAVE_PAGE' }
 
   // send message to popup
@@ -39,6 +42,24 @@ chrome.storage.local.get('snowing', (res) => {
 
 chrome.runtime.onMessage.addListener((message: MessageTypes) => {
   log.debug('chrome.runtime.onMessage.addListener - callback', message)
+  log.debug('Save page content authenticated:', authCookie.checkAuth())
+  // process is not defined in browsers extensions - use it to set up axios
+  log.debug('background.process.env', process.env.NODE_ENV)
+  log.debug(
+    'background.process.env.CHROME',
+    process.env.CHROME,
+    process.env.FIREFOX
+  )
+  log.debug(
+    'background.process.env.REACT_APP_*',
+    process.env.REACT_APP_SMUGGLER_API_URL
+  )
+  fetch('http://0.0.0.0:8080/').then(function (response) {
+    log.debug('Fetch /', response)
+  })
+  smuggler.ping().then((d) => {
+    log.debug('Ping', d)
+  })
   switch (message.type) {
     case 'REQ_SAVE_PAGE':
       sendSavePageRequest()

archaeologist/tsconfig.json

@@ -20,6 +20,7 @@
     "strict": true,
     "target": "es6"
   },
+  "references": [{ "path": "../smuggler-api" }],
   "include": [
     "./src/**/*",
     "src/custom.d.ts"

archaeologist/webpack.config.js

@@ -2,78 +2,93 @@ const webpack = require("webpack");
 const path = require("path");
 const CopyPlugin = require("copy-webpack-plugin");
 
-const config = {
-  entry: {
-    popup: path.join(__dirname, "src/popup.tsx"),
-    content: path.join(__dirname, "src/content.ts"),
-    background: path.join(__dirname, "src/background.ts"),
-  },
-  output: {path: path.join(__dirname, "build"), filename: "[name].js"},
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        use: "babel-loader",
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.css$/,
-        use: ["style-loader", "css-loader"],
-        exclude: /\.module\.css$/,
-      },
-      {
-        test: /\.ts(x)?$/,
-        loader: "ts-loader",
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.css$/,
-        use: [
-          "style-loader",
-          {
-            loader: "css-loader",
-            options: {
-              importLoaders: 1,
-              modules: true,
+const config = (env, argv) => {
+  return {
+    entry: {
+      popup: path.join(__dirname, "src/popup.tsx"),
+      content: path.join(__dirname, "src/content.ts"),
+      background: path.join(__dirname, "src/background.ts"),
+    },
+    output: {path: path.join(__dirname, "build"), filename: "[name].js"},
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: ["style-loader", "css-loader"],
+          exclude: /\.module\.css$/,
+        },
+        {
+          test: /\.ts(x)?$/,
+          loader: "ts-loader",
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.css$/,
+          use: [
+            "style-loader",
+            {
+              loader: "css-loader",
+              options: {
+                importLoaders: 1,
+                modules: true,
+              },
             },
-          },
-        ],
-        include: /\.module\.css$/,
-      },
-      {
-        test: /\.svg$/,
-        use: "file-loader",
-      },
-      {
-        test: /\.png$/,
-        use: [
-          {
-            loader: "url-loader",
-            options: {
-              mimetype: "image/png",
+          ],
+          include: /\.module\.css$/,
+        },
+        {
+          test: /\.svg$/,
+          use: "file-loader",
+        },
+        {
+          test: /\.png$/,
+          use: [
+            {
+              loader: "url-loader",
+              options: {
+                mimetype: "image/png",
+              },
             },
-          },
-        ],
+          ],
+        },
+      ],
+    },
+    resolve: {
+      extensions: [".js", ".jsx", ".tsx", ".ts"],
+      alias: {
+        "react-dom": "@hot-loader/react-dom",
       },
-    ],
-  },
-  resolve: {
-    extensions: [".js", ".jsx", ".tsx", ".ts"],
-    alias: {
-      "react-dom": "@hot-loader/react-dom",
     },
-  },
-  stats: {
-    errorDetails: true,
-  },
-  devServer: {
-    contentBase: "./dist",
-  },
-  plugins: [
-    new CopyPlugin({
-      patterns: [{from: "public", to: "."}],
-    }),
-  ],
+    performance: {
+      hints: false,
+      maxEntrypointSize: 512000,
+      maxAssetSize: 512000
+    },
+    stats: {
+      errorDetails: true,
+    },
+    devtool: 'source-map',
+    plugins: [
+      new CopyPlugin({
+        patterns: [{from: "public", to: "."}],
+      }),
+      new webpack.ProvidePlugin({
+        process: 'process/browser',
+      }),
+      new webpack.DefinePlugin({
+        'process.env.CHROME': JSON.stringify(env.chrome || false),
+        'process.env.FIREFOX': JSON.stringify(env.firefox || false),
+        'process.env.SAFARI': JSON.stringify(env.safari || false),
+        'process.env.BROWSER': JSON.stringify(
+          (env.chrome) ? "chrome"
+          : (env.firefox) ? "firefox"
+          : (env.safari) ? "safari" : ""
+        ),
+        'process.env.REACT_APP_SMUGGLER_API_URL': JSON.stringify(
+          argv.mode === 'development' ? "http://0.0.0.0:8080" : "https://mazed.dev"),
+      }),
+    ],
+  }
 };
 
 module.exports = config;

package.json

@@ -17,7 +17,7 @@
     "fix:prettier": "yarn workspaces run fix:prettier"
   },
   "dependencies": {
-    "axios": "^0.21"
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@babel/core": ">=7.11.0",
@@ -38,8 +38,8 @@
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.16.0",
     "jest": "26.6.0",
-    "ts-jest": "^26.4.2",
     "prettier": "^2.2",
+    "ts-jest": "^26.4.2",
     "typescript": "4.1.3",
     "unified": "^6.1.5"
   }

smuggler-api/package.json

@@ -4,7 +4,9 @@
   "description": "Smuggler API artefacts in typescript",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": [ "/dist" ],
+  "files": [
+    "/dist"
+  ],
   "author": "Thread knowledge",
   "license": "no",
   "private": true,
@@ -21,8 +23,9 @@
   },
   "devDependencies": {},
   "dependencies": {
-    "axios": "^0.21.4",
+    "lodash": "^4.17.21",
     "moment": "^2.29.1",
-    "query-string": "^7.0.0"
+    "query-string": "^7.0.0",
+    "universal-cookie": "^4.0"
   }
 }

smuggler-api/src/api.test.ts

@@ -0,0 +1,37 @@
+import { makeUrl } from './api'
+
+describe('test suite for makeUrl', () => {
+  const SAVED_ENV = process.env
+
+  beforeEach(() => {
+    process.env = { ...SAVED_ENV } // Make a copy
+  })
+
+  afterAll(() => {
+    process.env = SAVED_ENV // Restore old environment
+  })
+
+  test('API_URL is undefined', () => {
+    expect(makeUrl()).toStrictEqual('/')
+  })
+
+  test('API_URL is absolute url', () => {
+    const apiUrl = 'https://abc.mazed.dev'
+    process.env.REACT_APP_SMUGGLER_API_URL = apiUrl
+    expect(makeUrl()).toStrictEqual(`${apiUrl}/`)
+    expect(makeUrl('node')).toStrictEqual(`${apiUrl}/node`)
+    expect(makeUrl('node/')).toStrictEqual(`${apiUrl}/node`)
+    expect(makeUrl('/node/')).toStrictEqual(`${apiUrl}/node`)
+    expect(makeUrl('node/abc')).toStrictEqual(`${apiUrl}/node/abc`)
+    expect(makeUrl('node/abc', { abc: 12 })).toStrictEqual(
+      `${apiUrl}/node/abc?abc=12`
+    )
+  })
+
+  test('API_URL is local path', () => {
+    const apiUrl = '/abc/dev'
+    process.env.REACT_APP_SMUGGLER_API_URL = apiUrl
+    expect(makeUrl()).toStrictEqual(`${apiUrl}/`)
+    expect(makeUrl('node')).toStrictEqual(`${apiUrl}/node`)
+  })
+})