build(*): update webpack config for string replace, use absolute path…

… import for typescript

.gitignore

@@ -8,6 +8,5 @@
 node_modules/
 dist/
 
-### My ###
+### Temp ###
 demo.json
-.token

README.md

@@ -1,7 +1,7 @@
 # GithubEventsExt_Userscript
 
-+ A Userscript (Tampermonkey) extension that let browser show GitHub activity events.
-+ For chrome version, please visit [Aoi-hosizora/GithubEventsExt](https://github.com/Aoi-hosizora/GithubEventsExt).
++ A Userscript extension that let browser show GitHub activity events.
++ For Chrome version, please visit [Aoi-hosizora/GithubEventsExt](https://github.com/Aoi-hosizora/GithubEventsExt).
 
 ### Functions
 
@@ -10,17 +10,20 @@
 
 ### Install
 
-+ Install `Tampermonkey` / `Greasemonkey` extension for your browser (Chrome, Edge, Firefox, etc).
-+ Visit https://github.com/Aoi-hosizora/GithubEventsExt_Userscript/raw/dist/github-events.user.js (build by GitHub Actions).
-+ Click the "Install" button to install the extension.
+1. Install `Tampermonkey` / `Greasemonkey` extension for your browser (Chrome, Edge, Firefox, etc).
+2. Visit https://github.com/Aoi-hosizora/GithubEventsExt_Userscript/raw/dist/github-events.user.js, this code is built by GitHub Actions.
+3. Click the "Install" button to install the extension. Now you will see the effect after refresh the GitHub page.
 
-![how-to-install.jpg](./assets/how-to-install.jpg)
+<p align="center">
+    <img src="./assets/how-to-install.jpg" alt="how-to-install" />
+</p>
 
 ### Screenshot
 
-![screenshot-sidebar](./assets/screenshot-sidebar.jpg)
-
-![screenshot-setting](./assets/screenshot-setting.jpg)
+<p align="center">
+    <img src="./assets/screenshot-sidebar.jpg" alt="screenshot-sidebar" />
+    <img src="./assets/screenshot-setting.jpg" alt="screenshot-setting" />
+</p>
 
 ### References
 

package.json

@@ -1,5 +1,6 @@
 {
     "name": "githubeventsext_userscript",
+    "title": "GitHub events extension",
     "version": "1.0.8",
     "description": "A Userscript extension that let browser show GitHub activity events.",
     "main": "index.js",
@@ -30,8 +31,7 @@
         "ts-loader": "^6.2.1",
         "typescript": "^3.7.5",
         "webpack": "^4.41.5",
-        "webpack-cli": "^4.8.0",
-        "webpack-fix-style-only-entries": "^0.4.0"
+        "webpack-cli": "^4.8.0"
     },
     "dependencies": {
         "axios": "^0.19.2",

src/content_script.ts

@@ -1,12 +1,13 @@
-import './ts/extension';
+import '@src/ts/extension';
 import $ from 'jquery';
-import { Global, readStorageToGlobal } from './ts/global';
-import { adjustGithubUI, injectSidebar } from './ts/main';
-import { checkURL } from './ts/util';
+import { Global, readStorageToGlobal } from '@src/ts/global';
+import { adjustGithubUI, injectSidebar } from '@src/ts/main';
+import { checkURL } from '@src/ts/util';
 
 // python -m http.server 5000
 // http://localhost:5000/dist/github-events.user.js
 
+
 $(() => {
     onLoaded();
 });

src/etc/banner.js

@@ -1,20 +1,22 @@
 // ==UserScript==
-// @name         Github events
-// @version      1.0.8
-// @author       Aoi-hosizora
-// @description  A userscript extension that let browser show GitHub activity events.
+//
+// @name         @@title
+// @version      @@version
+// @author       @@author
+// @description  @@description
 // @namespace    https://github.com/
 // @match        http*://github.com/*
-// @copyright    2020+, Aoi-hosizora
-
+// @copyright    2020+, @@author
+//
 // @downloadURL  https://github.com/Aoi-hosizora/GithubEventsExt_Userscript/raw/master/dist/github-events.user.js
 // @updateURL    https://github.com/Aoi-hosizora/GithubEventsExt_Userscript/raw/master/src/etc/banner.js
 // @icon         https://github.com/Aoi-hosizora/GithubEventsExt_Userscript/raw/master/public/image/icon16.png
 // @icon64       https://github.com/Aoi-hosizora/GithubEventsExt_Userscript/raw/master/public/image/icon32.png
-
+//
 // @run-at       document-start
 // @grant        GM_setValue
 // @grant        GM_getValue
 // @grant        GM_deleteValue
 // @grant        GM_addStyle
+//
 // ==/UserScript==

src/ts/background.ts

@@ -1,4 +1,4 @@
-import { getStorage, removeStorage, setStorage, StorageFlag } from './global';
+import { getStorage, removeStorage, setStorage, StorageFlag } from '@src/ts/global';
 
 export async function onActionClicked() {
     const token = await getStorage(StorageFlag.TOKEN);

src/ts/global.ts

@@ -1,5 +1,5 @@
 import { GMApi } from 'greasemonkey';
-import { URLInfo } from './model';
+import { URLInfo } from '@src/ts/model';
 
 export class Global {
     // Settings from storage

src/ts/main.ts

@@ -1,12 +1,12 @@
 import GMApi from 'greasemonkey';
 import $ from 'jquery';
 import moment from 'moment';
-import template from '../html/template.html';
-import style from '../scss/core.scss';
-import { Global } from './global';
-import { URLType } from './model';
-import { loadGithubEvents, registerUIEvents } from './ui_events';
-import { requestUserInfo } from './util';
+import template from '@src/html/template.html';
+import style from '@src/scss/core.scss';
+import { Global } from '@src/ts/global';
+import { URLType } from '@src/ts/model';
+import { loadGithubEvents, registerUIEvents } from '@src/ts/ui_events';
+import { requestUserInfo } from '@src/ts/util';
 
 /**
  * Adjust github UI.

src/ts/sidebar_ui.ts

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { EventInfo, HoverCardType } from './model';
+import { EventInfo, HoverCardType } from '@src/ts/model';
 
 // ===================
 // format info related

src/ts/ui_events.ts

@@ -1,10 +1,10 @@
 import $ from 'jquery';
 import 'jquery-ui-dist/jquery-ui';
-import { onActionClicked } from './background';
-import { Global, setStorage, StorageFlag } from './global';
-import { EventInfo } from './model';
-import { formatInfoToLi } from './sidebar_ui';
-import { requestGithubEvents } from './util';
+import { onActionClicked } from '@src/ts/background';
+import { Global, setStorage, StorageFlag } from '@src/ts/global';
+import { EventInfo } from '@src/ts/model';
+import { formatInfoToLi } from '@src/ts/sidebar_ui';
+import { requestGithubEvents } from '@src/ts/util';
 
 // ===============
 // request related

src/ts/util.ts

@@ -1,7 +1,7 @@
 import axios, { AxiosInstance } from 'axios';
 import $ from 'jquery';
 import { camelCase, isArray, isObject, mapKeys, mapValues } from 'lodash';
-import { EventInfo, URLInfo, URLType, UserInfo } from './model';
+import { EventInfo, URLInfo, URLType, UserInfo } from '@src/ts/model';
 
 /**
  * Check the document.URL, return null if current page is not a github page.

tsconfig.json

@@ -4,12 +4,17 @@
         "target": "es6",
         "strict": true,
         "sourceMap": true,
+        "baseUrl": ".",
+        "paths": {
+            "@src/*": ["src/*"],
+        },
         "rootDir": "src",
         "outDir": "dist/js",
         "esModuleInterop": true,
         "removeComments": true,
         "moduleResolution": "node"
     },
+    "include": ["src"],
     "exclude": [
         "node_modules",
         "dist"

webpack.config.js

@@ -1,21 +1,24 @@
+const fs = require('fs');
 const path = require('path');
+const PACKAGE = require('./package.json');
 const webpack = require('webpack');
-const fs = require('fs');
 
 function p(f) {
     return path.join(__dirname, f);
 }
 
-function f(f) {
-    return fs.readFileSync(p(f), 'utf8').toString();
-}
-
 module.exports = {
     mode: process.env.NODE_ENV || 'development',
     devtool: 'cheap-module-source-map',
     entry: {
         main: p('./src/content_script.ts')
     },
+    resolve: {
+        alias: {
+          '@src': path.resolve(__dirname, 'src')
+        },
+        extensions: ['.ts', '.tsx', '.js', '.css', '.sass', '.scss']
+    },
     output: {
         path: p('./dist'),
         filename: './github-events.user.js'
@@ -24,7 +27,7 @@ module.exports = {
         rules: [
             {
                 test: /\.tsx?$/,
-                use: ['ts-loader'],
+                use: 'ts-loader',
                 exclude: /node_modules/
             },
             {
@@ -41,13 +44,18 @@ module.exports = {
             }
         ]
     },
-    resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.css', '.sass', '.scss']
-    },
     plugins: [
         new webpack.BannerPlugin({
             raw: true,
-            banner: f('./src/etc/banner.js')
+            banner: (() => {
+                var filename = p('./src/etc/banner.js');
+                content = fs.readFileSync(filename, 'utf8').toString();
+                content = content.replace(/@@title/g, PACKAGE.title);
+                content = content.replace(/@@version/g, PACKAGE.version)
+                content = content.replace(/@@description/g, PACKAGE.description);
+                content = content.replace(/@@author/g, PACKAGE.author);
+                return content;
+            })()
         })
     ]
 }