Add a webpack config to run with local Trezor Connect

package.json

@@ -16,6 +16,7 @@
     "license": "LGPL-3.0+",
     "scripts": {
         "dev": "webpack-dev-server --config ./webpack/config.dev.babel.js --mode development",
+        "dev:local": "webpack-dev-server --config ./webpack/config.dev.local.babel.js --mode development",
         "build": "rm -rf build && webpack --config ./webpack/config.prod.babel.js --progress",
         "flow": "flow check src/js",
         "lint": "npx eslint ./src ./webpack",

src/js/actions/TrezorConnectActions.js

@@ -117,7 +117,12 @@ export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetS
                 debug: false,
                 popup: false,
                 webusb: true,
-                pendingTransportEvent: (getState().devices.length < 1)
+                pendingTransportEvent: (getState().devices.length < 1),
+
+                // Use this if running 'yarn dev:local'
+                connectSrc: window.location.origin + '/',
+                // iframeSrc: window.location.origin + '/iframe.html',
+                // webusbSrc: window.location.origin + '/webusb.html',
             });
         } catch (error) {
             // dispatch({

webpack/config.dev.local.babel.js

@@ -0,0 +1,164 @@
+import {
+    TREZOR_CONNECT_ROOT,
+    TREZOR_CONNECT_HTML,
+    TREZOR_CONNECT_FILES,
+    TREZOR_CONNECT, TREZOR_IFRAME, TREZOR_POPUP, TREZOR_WEBUSB,
+    SRC,
+    BUILD,
+    PORT
+} from './constants';
+
+
+import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+module.exports = {
+    watch: true,
+    mode: 'development',
+    devtool: 'inline-source-map',
+    entry: {
+        'index': ['react-hot-loader/patch', `${SRC}js/index.js`],
+        'trezor-connect-npm': `${TREZOR_CONNECT}.js`,
+        // 'extension-permissions': `${TREZOR_CONNECT_ROOT}src/js/extensionPermissions.js`,
+        'iframe': TREZOR_IFRAME,
+        'popup': TREZOR_POPUP,
+        'webusb': TREZOR_WEBUSB,
+    },
+    output: {
+        filename: '[name].[hash].js',
+        path: BUILD,
+        globalObject: 'this', // fix for HMR inside WebWorker from 'hd-wallet'
+    },
+    devServer: {
+        contentBase: SRC,
+        hot: true,
+        https: false,
+        port: PORT,
+        stats: 'minimal',
+        inline: true,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.jsx?$/,
+                exclude: /node_modules/,
+                use: ['babel-loader']
+            },
+            {
+                test: /\.less$/,
+                use: [
+                    {
+                        loader: MiniCssExtractPlugin.loader,
+                        options: { publicPath: '../' }
+                    },
+                    'css-loader',
+                    'less-loader',
+                ]
+            },
+            {
+                test: /\.(png|gif|jpg)$/,
+                loader: 'file-loader?name=./images/[name].[ext]',
+                query: {
+                    outputPath: './images',
+                    name: '[name].[ext]',
+                }
+            },
+            {
+                test: /\.(ttf|eot|svg|woff|woff2)$/,
+                loader: 'file-loader',
+                query: {
+                    outputPath: './fonts',
+                    name: '[name].[ext]',
+                },
+            },
+            {
+                type: 'javascript/auto',
+                test: /\.json/,
+                exclude: /(node_modules)/,
+                loader: 'file-loader',
+                query: {
+                    outputPath: './data',
+                    name: '[name].[ext]',
+                },
+            },
+            {
+                type: 'javascript/auto',
+                test: /\.wasm$/,
+                loader: 'file-loader',
+                query: {
+                    name: 'js/[name].[ext]',
+                },
+            },
+        ],
+    },
+    resolve: {
+        modules: [SRC, 'node_modules', `${TREZOR_CONNECT_ROOT}/node_modules`],
+        alias: {
+            'trezor-connect': `${TREZOR_CONNECT}`
+        }
+    },
+    performance: {
+        hints: false
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: '[name].css',
+            chunkFilename: '[id].css',
+        }),
+
+        new HtmlWebpackPlugin({
+            chunks: ['index'],
+            template: `${SRC}index.html`,
+            filename: 'index.html',
+            inject: true
+        }),
+
+        new HtmlWebpackPlugin({
+            chunks: ['iframe'],
+            filename: `iframe.html`,
+            template: `${TREZOR_CONNECT_HTML}iframe.html`,
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            chunks: ['popup'],
+            filename: 'popup.html',
+            template: `${TREZOR_CONNECT_HTML}popup.html`,
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            chunks: ['webusb'],
+            filename: `webusb.html`,
+            template: `${TREZOR_CONNECT_HTML}webusb.html`,
+            inject: true
+        }),
+        // new HtmlWebpackPlugin({
+        //     chunks: ['extension-permissions'],
+        //     filename: `extension-permissions.html`,
+        //     template: `${TREZOR_CONNECT_HTML}extension-permissions.html`,
+        //     inject: true
+        // }),
+
+        new CopyWebpackPlugin([
+            { from: TREZOR_CONNECT_FILES, to: 'data' },
+        ]),
+
+        new webpack.optimize.OccurrenceOrderPlugin(),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.NamedModulesPlugin(),
+
+        new webpack.DefinePlugin({
+            LOCAL: JSON.stringify(`http://localhost:${PORT}/`),
+        }),
+
+        // ignore node lib from trezor-link
+        new webpack.IgnorePlugin(/\/iconv-loader$/),
+    ],
+    // ignoring "fs" import in fastxpub
+    node: {
+        fs: "empty",
+        path: "empty",
+    },
+}

webpack/constants.js

@@ -9,9 +9,17 @@ const constants: Object = Object.freeze({
     SRC: path.join(ABSOLUTE_BASE, 'src/'),
     PORT: 8081,
     INDEX: path.join(ABSOLUTE_BASE, 'src/index.html'),
-    TREZOR_CONNECT_ROOT: path.join(ABSOLUTE_BASE, '../trezor.js2/'),
+    TREZOR_CONNECT_ROOT: path.join(ABSOLUTE_BASE, '../trezor-connect/')
 });
 
+export const TREZOR_CONNECT_ROOT: string = constants.TREZOR_CONNECT_ROOT;
+export const TREZOR_CONNECT: string = path.join(constants.TREZOR_CONNECT_ROOT, 'src/js/index');
+export const TREZOR_IFRAME: string = path.join(constants.TREZOR_CONNECT_ROOT, 'src/js/iframe/iframe.js');
+export const TREZOR_POPUP: string = path.join(constants.TREZOR_CONNECT_ROOT, 'src/js/popup/popup.js');
+export const TREZOR_WEBUSB: string = path.join(constants.TREZOR_CONNECT_ROOT, 'src/js/webusb/index.js');
+export const TREZOR_CONNECT_HTML: string = path.join(constants.TREZOR_CONNECT_ROOT, 'src/html/');
+export const TREZOR_CONNECT_FILES: string = path.join(constants.TREZOR_CONNECT_ROOT, 'src/data/');
+
 export const BUILD: string = constants.BUILD;
 export const SRC: string = constants.SRC;
 export const PORT: string = constants.PORT;