Improved webpack loading and actually made typescript work

.gitignore

@@ -4,4 +4,5 @@ node_modules/
 cmake-build-debug
 src-windows/
 package-lock.json
-RikaiRebuilt.zip
+RikaiRebuilt.zip
+build/

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "author": "Gareth Parker",
   "name": "RikaiRebuilt",
-  "version": "1.1.2",
+  "version": "1.1.3",
 
   "applications": {
     "gecko": {
@@ -32,7 +32,8 @@
   "background": {
     "persistent": true,
     "scripts": [
-      "background.js"
+      "lib/browser-polyfill.min.js",
+      "build/background.js"
     ]
   },
 
@@ -42,7 +43,8 @@
         "<all_urls>"
       ],
       "js": [
-        "content.js"
+        "lib/browser-polyfill.min.js",
+        "build/content.js"
       ],
       "css": [
         "styles/popup.css"
@@ -52,6 +54,6 @@
 
   "options_ui": {
     "open_in_tab": true,
-    "page": "src/options/options.html"
+    "page": "options/options.html"
   }
 }

src/options/options.html → options/options.html

@@ -461,12 +461,11 @@ <h4>Version 1.0.15</h4>
 
     <pre><code id="configArea" style="display: none;"></code></pre>
 </div>
-<script src="jquery.js"></script>
-<script src="bootstrap.min.js"></script>
-<script src="bootstrap.bundle.min.js"></script>
-<script src="../../dist/browser-polyfill.min.js"></script>
-<script src="../defaultConfig.js"></script>
-<script src="/options.js"></script>
+<script src="./jquery.js"></script>
+<script src="./bootstrap.min.js"></script>
+<script src="./bootstrap.bundle.min.js"></script>
+<script src="../lib/browser-polyfill.min.js"></script>
+<script src="../build/options.js"></script>
 </body>
 
 </html>

package.json

@@ -3,16 +3,16 @@
   "scripts": {
     "start": "webpack -w",
     "start:web-ext": "web-ext run --start-url https://en.wikipedia.org/wiki/Ky%C5%8Diku_kanji --browser-console",
-    "build": "web-ext build --ignore-files=epwing",
+    "build": "webpack && web-ext build --ignore-files=epwing package.json package-lock.json tsconfig.json webpack.config.js src/ test",
     "test": "mocha"
   },
   "devDependencies": {
     "isomorphic-fetch": "^2.2.1",
     "mocha": "^5.1.1",
+    "typescript": "^3.2.2",
     "web-ext-webpack-plugin": "github:hiikezoe/web-ext-webpack-plugin"
   },
   "dependencies": {
-    "copy-webpack-plugin": "^4.6.0",
     "source-map-loader": "^0.2.4",
     "ts-loader": "^5.3.1",
     "web-ext": "^2.9.2",

src/background.js

@@ -1,5 +1,5 @@
 import defaultConfig from './defaultConfig'
-import autobind from '../dist/autobind'
+import autobind from '../lib/autobind'
 import AnkiImport from './ankiImport';
 import FrequencyDb from './database/FrequencyDb'
 import PitchDb from './database/PitchDb';
@@ -409,7 +409,7 @@ browser.runtime.onInstalled.addListener(async ({id, previousVersion, reason}) =>
         if (!config) return;
 
         if (config.openChangelogOnUpdate) {
-            const optionsPageUrl = browser.extension.getURL('src/options/options.html');
+            const optionsPageUrl = browser.extension.getURL('options/options.html');
 
             if (reason === 'update') {
                 browser.tabs.create({url: `${optionsPageUrl}#changelog`});
@@ -434,6 +434,6 @@ browser.contextMenus.create({
     title: "Options",
     contexts: ["browser_action"],
     onclick: () => {
-        browser.tabs.create({url: browser.extension.getURL('src/options/options.html')});
+        browser.tabs.create({url: browser.extension.getURL('options/options.html')});
     }
 });

src/content/index.js

@@ -1,5 +1,5 @@
 import {docRangeFromPoint, docImposterDestroy} from './document';
-import autobind from '../../dist/autobind';
+import autobind from '../../lib/autobind';
 import defaultConfig from '../defaultConfig';
 import Utils from '../utils';
 

src/data.js

@@ -1,6 +1,6 @@
 import IndexedDictionary from './database/IndexedDictionary';
 import Deinflect from './deinflect';
-import autobind from '../dist/autobind';
+import autobind from '../lib/autobind';
 import FileReader from './FileReader';
 
 export default class Data {

src/database/RikaiDatabase.js

@@ -1,4 +1,4 @@
-import Dexie from '../../dist/dexie.min'
+import Dexie from '../../lib/dexie.min'
 import FileReader from '../FileReader'
 
 export default class RikaiDatabase {

src/deinflect.js

@@ -1,4 +1,4 @@
-import autobind from '../dist/autobind';
+import autobind from '../lib/autobind';
 import deinflectText from './deinflectText';
 
 export default class Deinflect {

tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "sourceMap": true
+  }
+}

webpack.config.js

@@ -1,8 +1,7 @@
 const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 const WebExtWebpackPlugin = require('web-ext-webpack-plugin');
 
-const commonConfig = {
+module.exports = {
     // No need for uglification etc.
     mode: 'development',
     devtool: 'source-map',
@@ -19,110 +18,20 @@ const commonConfig = {
     resolve: {
         extensions: ['.ts', '.js'],
     },
-};
-
-const commonExtConfig = {
-    ...commonConfig,
     entry: {
         'content': path.resolve(__dirname, './src/content/index.js'),
         'background': path.resolve(__dirname, './src/background.js'),
         'options': path.resolve(__dirname, './src/options/options.js'),
     },
-};
-
-const getPreprocessorConfig = (...features) => ({
-    // test: /\.src$/,
-    // use: [
-    //     {
-    //         loader: 'file-loader',
-    //         options: {
-    //             name: '[name]',
-    //         },
-    //     },
-    //     {
-    //         loader:
-    //             'webpack-preprocessor?' +
-    //             features.map(feature => `definitions[]=${feature}`).join(','),
-    //     },
-    // ],
-});
-
-const extendArray = (array, ...newElems) => {
-    const result = array.slice();
-    result.push(...newElems);
-    return result;
-};
-
-const firefoxConfig = {
-    ...commonExtConfig,
-    module: {
-        ...commonExtConfig.module,
-        rules: extendArray(
-            commonExtConfig.module.rules,
-            getPreprocessorConfig(
-                'supports_svg_icons',
-                'supports_browser_style',
-                'supports_applications_field'
-            )
-        ),
-    },
-    output: {
-        path: path.resolve(__dirname, 'dist-firefox'),
-        filename: '[name].js',
-    },
     plugins: [
-        new CopyWebpackPlugin(['styles/*', 'icons/*', 'resources/*', 'manifest.json', 'src/options/*']),
         new WebExtWebpackPlugin({
             browserConsole: true,
             startUrl: ['https://en.wikipedia.org/wiki/Ky%C5%8Diku_kanji'],
-            sourceDir: path.resolve(__dirname, 'dist-firefox'),
+            sourceDir: path.resolve(__dirname, './'),
         }),
     ],
-};
-
-const chromeConfig = {
-    ...commonExtConfig,
-    module: {
-        ...commonExtConfig.module,
-        rules: extendArray(
-            commonExtConfig.module.rules,
-            getPreprocessorConfig('use_polyfill')
-        ),
-    },
-    output: {
-        path: path.resolve(__dirname, 'dist-chrome'),
-        filename: '[name].js',
-    },
-    plugins: [
-        new CopyWebpackPlugin([
-            'css/*',
-            'images/*',
-            'data/*',
-            '_locales/**/*',
-            { from: 'lib/browser-polyfill.js*', to: '[name].[ext]' },
-        ]),
-    ],
-};
-
-const testConfig = {
-    ...commonConfig,
-    name: 'tests',
-    entry: {
-        'content-loader': './__tests__/content-loader.ts',
-    },
     output: {
-        path: path.resolve(__dirname, '__tests__'),
+        path: path.resolve(__dirname, 'build'),
         filename: '[name].js',
     },
 };
-
-module.exports = (env, argv) => {
-    let configs = [];
-    if (env && env.target === 'chrome') {
-        configs.push({ ...chromeConfig, name: 'extension' });
-    } else {
-        configs.push({ ...firefoxConfig, name: 'extension' });
-    }
-
-    return configs;
-};