begin converting WakatimeCore

.eslintignore

@@ -2,4 +2,5 @@ assets
 public
 tests
 coverage
-gulpfile.js
+gulpfile.js
+dist

babel.config.js

@@ -0,0 +1,15 @@
+// babel.config.js
+module.exports = {
+  presets: [
+    '@babel/preset-react',
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+};

jest.config.ts

@@ -6,22 +6,17 @@
 export default {
   // All imported modules in your tests should be mocked automatically
   // automock: false,
-
   // Stop running tests after `n` failures
   // bail: 0,
-
   // The directory where Jest should store its cached dependency information
   // cacheDirectory: "/private/var/folders/sz/2htrw56x4fg4kmlpq6ssdw5m0000gn/T/jest_dx",
-
   // Automatically clear mock calls and instances between every test
   clearMocks: true,
 
   // Indicates whether the coverage information should be collected while executing the test
   // collectCoverage: false,
-
   // An array of glob patterns indicating a set of files for which coverage information should be collected
   // collectCoverageFrom: undefined,
-
   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',
 
@@ -29,10 +24,11 @@ export default {
   // coveragePathIgnorePatterns: [
   //   "/node_modules/"
   // ],
-
   // Indicates which provider should be used to instrument code for coverage
   coverageProvider: 'v8',
+
   preset: 'ts-jest',
+  setupFilesAfterEnv: ['./setupTests.ts'],
   // A list of reporter names that Jest uses when writing coverage reports
   // coverageReporters: [
   //   "json",

package.json

@@ -34,10 +34,13 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-transition-group": "^1.0.0",
-    "webextension-polyfill": "^0.4.0",
     "webextension-polyfill-ts": "^0.22.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.8.7",
+    "@babel/preset-env": "^7.8.7",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
     "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
@@ -55,7 +58,9 @@
     "@typescript-eslint/eslint-plugin": "^4.13.0",
     "@typescript-eslint/parser": "^4.13.0",
     "@xarc/run": "^1.0.4",
+    "axios": "^0.21.1",
     "babel-jest": "^22.1.0",
+    "babel-loader": "^8.2.2",
     "browserify": "^17.0.0",
     "chai": "^4.1.2",
     "clean-webpack-plugin": "^3.0.0",
@@ -84,8 +89,6 @@
     "mocha": "^5.0.0",
     "mocha-sinon": "^2.0.0",
     "mocha-traceur": "^2.1.0",
-    "mockzilla": "^0.9.0",
-    "mockzilla-webextension": "^0.9.0",
     "phantomjs": "^2.1.7",
     "popper.js": "^1.14.6",
     "prettier": "^2.2.1",

setupTests.ts

@@ -13,7 +13,7 @@ class BrowserMock {
     },
   };
 }
-
-export const browser = new BrowserMock();
-
-export default { browser };
+//TODO: Improve mocking
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+window.browser = new BrowserMock();

src/components/MainList.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { browser } from 'webextension-polyfill-ts';
 
 export interface MainListProps {
   disableLogging: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;

src/config.ts

@@ -1,5 +1,3 @@
-import { browser } from 'webextension-polyfill-ts';
-
 /**
  * Logging
  */

src/core/WakaTimeCore.ts

@@ -0,0 +1,35 @@
+import axios, { AxiosResponse } from 'axios';
+import moment from 'moment';
+import { Tabs } from 'webextension-polyfill-ts';
+import { User } from '../types/user';
+import config from '../config';
+import { SummariesPayload, GrandTotal } from '../types/summaries';
+
+class WakaTimeCore {
+  tabsWithDevtoolsOpen: Tabs.Tab[];
+  constructor() {
+    this.tabsWithDevtoolsOpen = [];
+  }
+  setTabsWithDevtoolsOpen(tabs: Tabs.Tab[]): void {
+    this.tabsWithDevtoolsOpen = tabs;
+  }
+  async getTotalTimeLoggedToday(): Promise<GrandTotal> {
+    const today = moment().format('YYYY-MM-DD');
+    const summariesAxiosPayload: AxiosResponse<SummariesPayload> = await axios.get(
+      config.summariesApiUrl,
+      {
+        data: {
+          end: today,
+          start: today,
+        },
+      },
+    );
+    return summariesAxiosPayload.data.data[0].grand_total;
+  }
+  async checkAuth(): Promise<User> {
+    const userPayload: AxiosResponse<User> = await axios.get(config.currentUserApiUrl);
+    return userPayload.data;
+  }
+}
+
+export default new WakaTimeCore();

src/devtools.ts

@@ -0,0 +1,13 @@
+// // Create a connection to the background page
+// const backgroundPageConnection = browser.runtime.connect({
+//   name: 'devtools-page',
+// });
+
+// // Send a message to background page with the current active tabId
+// backgroundPageConnection.postMessage({
+//   name: 'init',
+//   tabId: browser.devtools.inspectedWindow.tabId,
+// });
+
+// eslint-disable-next-line @typescript-eslint/no-floating-promises
+browser.devtools.panels.create('Wakatime', 'test.png', 'WakatimeDevPanel.html');

src/html/WakatimeDevPanel.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>WakaTime options</title>
+
+    <link href="public/css/app.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="wakatime-devtools"></div>
+    <script src="public/js/browser-polyfill.min.js"></script>
+  </body>
+</html>

src/html/devtools.html

@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<script src="public/js/browser-polyfill.min.js"></script>
+<script src="devtools.js"></script>

src/html/options.html

@@ -10,7 +10,7 @@
   </head>
   <body>
     <div id="wakatime-options"></div>
-
+    <script src="public/js/browser-polyfill.min.js"></script>
     <script src="options.js"></script>
   </body>
 </html>

src/html/popup.html

@@ -10,7 +10,7 @@
   </head>
   <body>
     <div id="wakatime"></div>
-
+    <script src="public/js/browser-polyfill.min.js"></script>
     <script src="popup.js"></script>
   </body>
 </html>

src/jest.config.ts

@@ -1,6 +0,0 @@
-import jestConfig from '../jest.config';
-
-export default {
-  ...jestConfig,
-  testEnvironment: 'node',
-};

src/manifests/chrome.json

@@ -1,7 +1,7 @@
 {
   "background": {
     "persistent": false,
-    "scripts": ["background.js"]
+    "scripts": ["public/js/browser-polyfill.min.js", "background.js"]
   },
   "browser_action": {
     "default_icon": {
@@ -11,7 +11,6 @@
     "default_popup": "popup.html",
     "default_title": "WakaTime"
   },
-  "browser_specific_settings": {},
   "description": "Automatic time tracking for Chrome.",
   "devtools_page": "devtools.html",
   "homepage_url": "https://wakatime.com",

src/manifests/firefox.json

@@ -1,7 +1,7 @@
 {
   "background": {
     "persistent": false,
-    "scripts": ["background.js"]
+    "scripts": ["public/js/browser-polyfill.min.js", "background.js"]
   },
   "browser_action": {
     "default_icon": {

src/options.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const container = document.getElementById('wakatime-options');
+
+ReactDOM.render(<h1>OPTIONS GO HERE</h1>, container);

src/popup.tsx

@@ -1 +1,14 @@
-// Stub for port of previous extension
+import React from 'react';
+import ReactDOM from 'react-dom';
+const container = document.getElementById('wakatime');
+
+const openOptions = async (): Promise<void> => {
+  await browser.runtime.openOptionsPage();
+};
+ReactDOM.render(
+  <>
+    <h1>POPUP GO HERE</h1>
+    <div onClick={openOptions}>Open options</div>
+  </>,
+  container,
+);

src/utils/getDomainFromUrl.ts

@@ -1,7 +1,7 @@
 /**
  * Returns domain from given URL.
  */
-export function getDomainFromUrl(url: string): string {
+export default function getDomainFromUrl(url: string): string {
   const parts = url.split('/');
 
   return parts[0] + '//' + parts[2];

src/utils/inArray.ts

@@ -1,7 +1,7 @@
 /**
  * Returns boolean if needle is found in haystack or not.
  */
-export function in_array<T>(needle: T, haystack: T[]): boolean {
+export default function in_array<T>(needle: T, haystack: T[]): boolean {
   for (let i = 0; i < haystack.length; i++) {
     if (needle == haystack[i]) {
       return true;

webpack.config.ts

@@ -13,11 +13,16 @@ const graphicsFolder = join(__dirname, 'graphics');
 const srcFolder = join(__dirname, 'src');
 const htmlFolder = join(srcFolder, 'html');
 const manifestFolder = join(srcFolder, 'manifests');
-
+const browserPolyfill = join(
+  __dirname,
+  'node_modules/webextension-polyfill/dist/browser-polyfill.min.js',
+);
 const getConfigByBrowser = (isProd: boolean, browser: BrowserTypes): webpack.Configuration => {
   const cfg: webpack.Configuration = {
+    devtool: isProd ? 'none' : 'inline-source-map',
     entry: {
       background: [join(srcFolder, 'background.ts')],
+      devtools: [join(srcFolder, 'devtools.ts')],
       options: [join(srcFolder, 'options.tsx')],
       popup: [join(srcFolder, 'popup.tsx')],
     },
@@ -26,7 +31,7 @@ const getConfigByBrowser = (isProd: boolean, browser: BrowserTypes): webpack.Con
       rules: [
         {
           test: /\.(js|jsx|ts|tsx)$/,
-          use: 'ts-loader',
+          use: 'babel-loader',
         },
       ],
     },
@@ -44,8 +49,25 @@ const getConfigByBrowser = (isProd: boolean, browser: BrowserTypes): webpack.Con
           { from: htmlFolder },
           // TODO: Create a mechanism to have a firefox manifest vs chrome
           { from: join(manifestFolder, `${browser}.json`), to: 'manifest.json' },
+          {
+            from: browserPolyfill,
+            to: 'public/js/browser-polyfill.min.js',
+          },
         ],
       }),
+      new webpack.DefinePlugin({
+        ['process.env.CURRENT_USER_API_URL']: JSON.stringify(
+          'https://wakatime.com/api/v1/users/current',
+        ),
+        ['process.env.HEART_BEAT_API_URL']: JSON.stringify(
+          'https://wakatime.com/api/v1/users/current/heartbeats',
+        ),
+        ['process.env.LOGOUT_USER_URL']: JSON.stringify('https://wakatime.com/logout'),
+        ['process.env.NODE_ENV']: JSON.stringify(isProd ? 'production' : 'development'),
+        ['process.env.SUMMARIES_API_URL']: JSON.stringify(
+          'https://wakatime.com/api/v1/users/current/summaries',
+        ),
+      }),
     ],
     resolve: {
       extensions: ['.js', '.jsx', '.ts', '.tsx'],