Build embedded Parity JS properly and separatly (#4426)

* Add a specific embed webpack build // output assets in JSON * WIP Embed * Updated Webpack * Update exports // Webpack config * Fix app build fail * Fix NPm scripts * Reduce Embed dependencies * Fix NPM exports * remvoe stats * Lazy-Load worker (not to load in embed) * PR Grumbles + Fix tests
2017-02-09 15:30:57 +01:00 · 2017-02-09 15:30:57 +01:00 · e8175f4cca
commit e8175f4cca
parent 656c08976f
26 changed files with 272 additions and 280 deletions
--- a/js/.babelrc
+++ b/js/.babelrc
@ -4,11 +4,11 @@
    "stage-0", "react"
  ],
  "plugins": [
-    "transform-runtime",
    "transform-decorators-legacy",
    "transform-class-properties",
    "transform-object-rest-spread",
-    "lodash"
+    "lodash",
+    "recharts"
  ],
  "retainLines": true,
  "env": {
@ -25,7 +25,8 @@
    },
    "test": {
      "plugins": [
-        ["babel-plugin-webpack-alias", { "config": "webpack/test.js" }]
+        "transform-runtime",
+        [ "babel-plugin-webpack-alias", { "config": "webpack/test.js" } ]
      ]
    }
  }
--- a/js/package.json
+++ b/js/package.json
@ -25,18 +25,20 @@
    "Promise"
  ],
  "scripts": {
-    "build": "npm run build:lib && npm run build:dll && npm run build:app",
+    "build": "npm run build:lib && npm run build:dll && npm run build:app && npm run build:embed",
    "build:app": "webpack --config webpack/app",
    "build:lib": "webpack --config webpack/libraries",
    "build:dll": "webpack --config webpack/vendor",
    "build:markdown": "babel-node ./scripts/build-rpc-markdown.js",
    "build:json": "babel-node ./scripts/build-rpc-json.js",
-    "ci:build": "npm run ci:build:lib && npm run ci:build:dll && npm run ci:build:app",
+    "build:embed": "EMBED=1 node webpack/embed",
+    "ci:build": "npm run ci:build:lib && npm run ci:build:dll && npm run ci:build:app && npm run ci:build:embed",
    "ci:build:app": "NODE_ENV=production webpack --config webpack/app",
    "ci:build:lib": "NODE_ENV=production webpack --config webpack/libraries",
    "ci:build:dll": "NODE_ENV=production webpack --config webpack/vendor",
    "ci:build:npm": "NODE_ENV=production webpack --config webpack/npm",
    "ci:build:jsonrpc": "babel-node ./scripts/build-rpc-json.js --output .npmjs/jsonrpc",
+    "ci:build:embed": "NODE_ENV=production EMBED=1 node webpack/embed",
    "start": "npm install && npm run build:lib && npm run build:dll && npm run start:app",
    "start:app": "node webpack/dev.server",
    "clean": "rm -rf ./.build ./.coverage ./.happypack ./.npmjs ./build",
@ -53,27 +55,28 @@
    "prepush": "npm run lint:cached"
  },
  "devDependencies": {
-    "babel-cli": "6.18.0",
-    "babel-core": "6.21.0",
+    "babel-cli": "6.22.2",
+    "babel-core": "6.22.1",
    "babel-eslint": "7.1.1",
    "babel-loader": "6.2.10",
    "babel-plugin-lodash": "3.2.11",
-    "babel-plugin-react-intl": "2.2.0",
-    "babel-plugin-transform-class-properties": "6.19.0",
+    "babel-plugin-react-intl": "2.3.1",
+    "babel-plugin-recharts": "1.1.0",
+    "babel-plugin-transform-class-properties": "6.22.0",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
-    "babel-plugin-transform-object-rest-spread": "6.20.2",
-    "babel-plugin-transform-react-remove-prop-types": "0.2.11",
-    "babel-plugin-transform-runtime": "6.15.0",
+    "babel-plugin-transform-object-rest-spread": "6.22.0",
+    "babel-plugin-transform-react-remove-prop-types": "0.3.0",
+    "babel-plugin-transform-runtime": "6.22.0",
    "babel-plugin-webpack-alias": "2.1.2",
-    "babel-polyfill": "6.20.0",
-    "babel-preset-env": "1.1.4",
-    "babel-preset-es2015": "6.18.0",
-    "babel-preset-es2016": "6.16.0",
-    "babel-preset-es2017": "6.16.0",
-    "babel-preset-react": "6.16.0",
-    "babel-preset-stage-0": "6.16.0",
-    "babel-register": "6.18.0",
-    "babel-runtime": "6.20.0",
+    "babel-polyfill": "6.22.0",
+    "babel-preset-env": "1.1.8",
+    "babel-preset-es2015": "6.22.0",
+    "babel-preset-es2016": "6.22.0",
+    "babel-preset-es2017": "6.22.0",
+    "babel-preset-react": "6.22.0",
+    "babel-preset-stage-0": "6.22.0",
+    "babel-register": "6.22.0",
+    "babel-runtime": "6.22.0",
    "chai": "3.5.0",
    "chai-as-promised": "6.0.0",
    "chai-enzyme": "0.6.1",
@ -132,7 +135,7 @@
    "stylelint": "7.7.0",
    "stylelint-config-standard": "15.0.1",
    "url-loader": "0.5.7",
-    "webpack": "2.2.0-rc.2",
+    "webpack": "2.2.1",
    "webpack-dev-middleware": "1.9.0",
    "webpack-error-notification": "0.1.6",
    "webpack-hot-middleware": "2.14.0",
--- a/js/src/library.etherscan.js
+++ b/js/src/library.etherscan.js
@ -31,4 +31,4 @@ if (isNode) {

 import Etherscan from './3rdparty/etherscan';

-module.exports = Etherscan;
+export default Etherscan;
--- a/js/src/library.jsonrpc.js
+++ b/js/src/library.jsonrpc.js
@ -16,4 +16,4 @@

 import JsonRpc from './jsonrpc';

-module.exports = JsonRpc;
+export default JsonRpc;
--- a/js/src/library.parity.js
+++ b/js/src/library.parity.js
@ -32,4 +32,4 @@ if (isNode) {
 import Abi from './abi';
 import Api from './api';

-module.exports = { Api, Abi };
+export { Api, Abi };
--- a/js/src/library.shapeshift.js
+++ b/js/src/library.shapeshift.js
@ -31,4 +31,4 @@ if (isNode) {

 import ShapeShift from './3rdparty/shapeshift';

-module.exports = ShapeShift;
+export default ShapeShift;
--- a/js/src/modals/CreateAccount/NewAccount/newAccount.js
+++ b/js/src/modals/CreateAccount/NewAccount/newAccount.js
@ -20,7 +20,8 @@ import { FormattedMessage } from 'react-intl';
 import { IconButton } from 'material-ui';
 import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';

-import { Form, Input, IdentityIcon, PasswordStrength } from '~/ui';
+import { Form, Input, IdentityIcon } from '~/ui';
+import PasswordStrength from '~/ui/Form/PasswordStrength';
 import { RefreshIcon } from '~/ui/Icons';

 import styles from '../createAccount.css';
--- a/js/src/modals/CreateAccount/RawKey/rawKey.js
+++ b/js/src/modals/CreateAccount/RawKey/rawKey.js
@ -18,7 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';

-import { Form, Input, PasswordStrength } from '~/ui';
+import { Form, Input } from '~/ui';
+import PasswordStrength from '~/ui/Form/PasswordStrength';

 import styles from '../createAccount.css';

--- a/js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js
+++ b/js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js
@ -19,7 +19,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Checkbox } from 'material-ui';

-import { Form, Input, PasswordStrength } from '~/ui';
+import { Form, Input } from '~/ui';
+import PasswordStrength from '~/ui/Form/PasswordStrength';

 import styles from '../createAccount.css';

--- a/js/src/modals/LoadContract/loadContract.js
+++ b/js/src/modals/LoadContract/loadContract.js
@ -20,7 +20,8 @@ import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';

-import { Button, Modal, Editor } from '~/ui';
+import { Button, Modal } from '~/ui';
+import Editor from '~/ui/Editor';
 import { CancelIcon, CheckIcon, DeleteIcon } from '~/ui/Icons';

 import styles from './loadContract.css';
--- a/js/src/modals/PasswordManager/passwordManager.js
+++ b/js/src/modals/PasswordManager/passwordManager.js
@ -23,7 +23,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';

 import { newError, openSnackbar } from '~/redux/actions';
-import { Button, Modal, IdentityName, IdentityIcon, PasswordStrength } from '~/ui';
+import { Button, Modal, IdentityName, IdentityIcon } from '~/ui';
+import PasswordStrength from '~/ui/Form/PasswordStrength';
 import Form, { Input } from '~/ui/Form';
 import { CancelIcon, CheckIcon, SendIcon } from '~/ui/Icons';

--- a/js/src/modals/SaveContract/saveContract.js
+++ b/js/src/modals/SaveContract/saveContract.js
@ -19,7 +19,8 @@ import React, { Component, PropTypes } from 'react';
 import SaveIcon from 'material-ui/svg-icons/content/save';
 import ContentClear from 'material-ui/svg-icons/content/clear';

-import { Button, Modal, Editor, Form, Input } from '~/ui';
+import { Button, Modal, Form, Input } from '~/ui';
+import Editor from '~/ui/Editor';
 import { ERRORS, validateName } from '~/util/validation';

 import styles from './saveContract.css';
--- a/js/src/redux/providers/workerWrapper.js
+++ b/js/src/redux/providers/workerWrapper.js
@ -0,0 +1,23 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+if (!process.env.EMBED) {
+  const setupWorker = require('./worker').setupWorker;
+
+  module.exports = { setupWorker };
+} else {
+  module.exports = { setupWorker: () => {} };
+}
--- a/js/src/redux/store.js
+++ b/js/src/redux/store.js
@ -20,7 +20,7 @@ import initMiddleware from './middleware';
 import initReducers from './reducers';

 import { load as loadWallet } from './providers/walletActions';
-import { setupWorker } from './providers/worker';
+import { setupWorker } from './providers/workerWrapper';

 import {
  Balances as BalancesProvider,
--- a/js/src/ui/Actionbar/index.js
+++ b/js/src/ui/Actionbar/index.js
@ -14,4 +14,9 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

+export Export from './Export';
+export Import from './Import';
+export Search from './Search';
+export Sort from './Sort';
+
 export default from './actionbar';
--- a/js/src/ui/Form/index.js
+++ b/js/src/ui/Form/index.js
@ -14,35 +14,19 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

-import AddressSelect from './AddressSelect';
-import DappUrlInput from './DappUrlInput';
-import FormWrap from './FormWrap';
-import Input from './Input';
-import InputAddress from './InputAddress';
-import InputAddressSelect from './InputAddressSelect';
-import InputChip from './InputChip';
-import InputDate from './InputDate';
-import InputInline from './InputInline';
-import InputTime from './InputTime';
-import Label from './Label';
-import RadioButtons from './RadioButtons';
-import Select from './Select';
-import TypedInput from './TypedInput';
+export AddressSelect from './AddressSelect';
+export DappUrlInput from './DappUrlInput';
+export FormWrap from './FormWrap';
+export Input from './Input';
+export InputAddress from './InputAddress';
+export InputAddressSelect from './InputAddressSelect';
+export InputChip from './InputChip';
+export InputDate from './InputDate';
+export InputInline from './InputInline';
+export InputTime from './InputTime';
+export Label from './Label';
+export RadioButtons from './RadioButtons';
+export Select from './Select';
+export TypedInput from './TypedInput';

 export default from './form';
-export {
-  AddressSelect,
-  DappUrlInput,
-  FormWrap,
-  Input,
-  InputAddress,
-  InputAddressSelect,
-  InputChip,
-  InputDate,
-  InputInline,
-  InputTime,
-  Label,
-  RadioButtons,
-  Select,
-  TypedInput
-};
--- a/js/src/ui/index.js
+++ b/js/src/ui/index.js
@ -14,118 +14,43 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

-import AccountCard from './AccountCard';
-import Actionbar from './Actionbar';
-import ActionbarExport from './Actionbar/Export';
-import ActionbarImport from './Actionbar/Import';
-import ActionbarSearch from './Actionbar/Search';
-import ActionbarSort from './Actionbar/Sort';
-import Badge from './Badge';
-import Balance from './Balance';
-import BlockStatus from './BlockStatus';
-import Button from './Button';
-import Certifications from './Certifications';
-import ConfirmDialog from './ConfirmDialog';
-import Container, { Title as ContainerTitle } from './Container';
-import ContextProvider from './ContextProvider';
-import CopyToClipboard from './CopyToClipboard';
-import CurrencySymbol from './CurrencySymbol';
-import DappCard from './DappCard';
-import DappIcon from './DappIcon';
-import Editor from './Editor';
-import Errors from './Errors';
-import Features, { FEATURES, FeaturesStore } from './Features';
-import Form, { AddressSelect, DappUrlInput, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput } from './Form';
-import GasPriceEditor from './GasPriceEditor';
-import GasPriceSelector from './GasPriceSelector';
-import Icons from './Icons';
-import IdentityIcon from './IdentityIcon';
-import IdentityName from './IdentityName';
-import LanguageSelector from './LanguageSelector';
-import Loading from './Loading';
-import MethodDecoding from './MethodDecoding';
-import Modal, { Busy as BusyStep, Completed as CompletedStep } from './Modal';
-import muiTheme from './Theme';
-import Page from './Page';
-import ParityBackground from './ParityBackground';
-import PasswordStrength from './Form/PasswordStrength';
-import Portal from './Portal';
-import QrCode from './QrCode';
-import SectionList from './SectionList';
-import ShortenedHash from './ShortenedHash';
-import SignerIcon from './SignerIcon';
-import Tags from './Tags';
-import Title from './Title';
-import Tooltips, { Tooltip } from './Tooltips';
-import TxHash from './TxHash';
-import TxList from './TxList';
-import Warning from './Warning';
-
-export {
-  AccountCard,
-  Actionbar,
-  ActionbarExport,
-  ActionbarImport,
-  ActionbarSearch,
-  ActionbarSort,
-  AddressSelect,
-  Badge,
-  Balance,
-  BlockStatus,
-  Button,
-  Certifications,
-  ConfirmDialog,
-  Container,
-  ContainerTitle,
-  ContextProvider,
-  CopyToClipboard,
-  CurrencySymbol,
-  DappCard,
-  DappIcon,
-  DappUrlInput,
-  Editor,
-  Errors,
-  FEATURES,
-  Features,
-  FeaturesStore,
-  Form,
-  FormWrap,
-  GasPriceEditor,
-  GasPriceSelector,
-  Icons,
-  Input,
-  InputAddress,
-  InputAddressSelect,
-  InputChip,
-  InputDate,
-  InputInline,
-  InputTime,
-  IdentityIcon,
-  IdentityName,
-  Label,
-  LanguageSelector,
-  Loading,
-  MethodDecoding,
-  Modal,
-  BusyStep,
-  CompletedStep,
-  muiTheme,
-  Page,
-  ParityBackground,
-  PasswordStrength,
-  Portal,
-  QrCode,
-  RadioButtons,
-  Select,
-  ShortenedHash,
-  SectionList,
-  SignerIcon,
-  Tags,
-  Title,
-  Tooltip,
-  Tooltips,
-  TxHash,
-  TxList,
-  TypedInput,
-  Warning
-};
+export AccountCard from './AccountCard';
+export Actionbar, { Export as ActionbarExport, Import as ActionbarImport, Search as ActionbarSearch, Sort as ActionbarSort } from './Actionbar';
+export Badge from './Badge';
+export Balance from './Balance';
+export BlockStatus from './BlockStatus';
+export Button from './Button';
+export Certifications from './Certifications';
+export ConfirmDialog from './ConfirmDialog';
+export Container, { Title as ContainerTitle } from './Container';
+export ContextProvider from './ContextProvider';
+export CopyToClipboard from './CopyToClipboard';
+export CurrencySymbol from './CurrencySymbol';
+export DappCard from './DappCard';
+export DappIcon from './DappIcon';
+export Errors from './Errors';
+export Features, { FEATURES, FeaturesStore } from './Features';
+export Form, { AddressSelect, DappUrlInput, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput } from './Form';
+export GasPriceEditor from './GasPriceEditor';
+export GasPriceSelector from './GasPriceSelector';
+export Icons from './Icons';
+export IdentityIcon from './IdentityIcon';
+export IdentityName from './IdentityName';
+export LanguageSelector from './LanguageSelector';
+export Loading from './Loading';
+export MethodDecoding from './MethodDecoding';
+export Modal, { Busy as BusyStep, Completed as CompletedStep } from './Modal';
+export muiTheme from './Theme';
+export Page from './Page';
+export ParityBackground from './ParityBackground';
+export Portal from './Portal';
+export QrCode from './QrCode';
+export SectionList from './SectionList';
+export ShortenedHash from './ShortenedHash';
+export SignerIcon from './SignerIcon';
+export Tags from './Tags';
+export Title from './Title';
+export Tooltips, { Tooltip } from './Tooltips';
+export TxHash from './TxHash';
+export TxList from './TxList';
+export Warning from './Warning';
--- a/js/src/util/signer.js
+++ b/js/src/util/signer.js
@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

 import scrypt from 'scryptsy';
-import * as Transaction from 'ethereumjs-tx';
+import Transaction from 'ethereumjs-tx';
 import { pbkdf2Sync } from 'crypto';
 import { createDecipheriv } from 'browserify-aes';

--- a/js/src/views/Contract/contract.js
+++ b/js/src/views/Contract/contract.js
@ -30,7 +30,8 @@ import { newError } from '~/redux/actions';
 import { setVisibleAccounts } from '~/redux/providers/personalActions';

 import { EditMeta, ExecuteContract } from '~/modals';
-import { Actionbar, Button, Page, Modal, Editor } from '~/ui';
+import { Actionbar, Button, Page, Modal } from '~/ui';
+import Editor from '~/ui/Editor';

 import Header from '../Account/Header';
 import Delete from '../Address/Delete';
--- a/js/src/views/WriteContract/writeContract.js
+++ b/js/src/views/WriteContract/writeContract.js
@ -28,7 +28,8 @@ import ListIcon from 'material-ui/svg-icons/action/view-list';
 import SettingsIcon from 'material-ui/svg-icons/action/settings';
 import SendIcon from 'material-ui/svg-icons/content/send';

-import { Actionbar, ActionbarExport, ActionbarImport, Button, Editor, Page, Select, Input } from '~/ui';
+import { Actionbar, ActionbarExport, ActionbarImport, Button, Page, Select, Input } from '~/ui';
+import Editor from '~/ui/Editor';
 import { DeployContract, SaveContract, LoadContract } from '~/modals';

 import WriteContractStore from './writeContractStore';
--- a/js/src/views/index.js
+++ b/js/src/views/index.js
@ -14,44 +14,20 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

-import Account from './Account';
-import Accounts from './Accounts';
-import Address from './Address';
-import Addresses from './Addresses';
-import Application from './Application';
-import Contract from './Contract';
-import Contracts from './Contracts';
-import Dapp from './Dapp';
-import Dapps from './Dapps';
-import HistoryStore from './historyStore';
-import ParityBar from './ParityBar';
-import Settings, { SettingsBackground, SettingsParity, SettingsProxy, SettingsViews } from './Settings';
-import Signer from './Signer';
-import Status from './Status';
-import Wallet from './Wallet';
-import Web from './Web';
-import WriteContract from './WriteContract';
-
-export {
-  Account,
-  Accounts,
-  Address,
-  Addresses,
-  Application,
-  Contract,
-  Contracts,
-  Dapp,
-  Dapps,
-  HistoryStore,
-  ParityBar,
-  Settings,
-  SettingsBackground,
-  SettingsParity,
-  SettingsProxy,
-  SettingsViews,
-  Signer,
-  Status,
-  Wallet,
-  Web,
-  WriteContract
-};
+export Account from './Account';
+export Accounts from './Accounts';
+export Address from './Address';
+export Addresses from './Addresses';
+export Application from './Application';
+export Contract from './Contract';
+export Contracts from './Contracts';
+export Dapp from './Dapp';
+export Dapps from './Dapps';
+export HistoryStore from './historyStore';
+export ParityBar from './ParityBar';
+export Settings, { SettingsBackground, SettingsParity, SettingsProxy, SettingsViews } from './Settings';
+export Signer from './Signer';
+export Status from './Status';
+export Wallet from './Wallet';
+export Web from './Web';
+export WriteContract from './WriteContract';
--- a/js/test/npmJsonRpc.js
+++ b/js/test/npmJsonRpc.js
@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

 try {
-  var JsonRpc = require('../.npmjs/jsonRpc/library.js');
+  var JsonRpc = require('../.npmjs/jsonrpc/library.js').default;

  if (typeof JsonRpc !== 'object') {
    throw new Error('JsonRpc');
--- a/js/webpack/app.js
+++ b/js/webpack/app.js
@ -32,17 +32,25 @@ const FAVICON = path.resolve(__dirname, '../assets/images/parity-logo-black-no-t

 const DEST = process.env.BUILD_DEST || '.build';
 const ENV = process.env.NODE_ENV || 'development';
+const EMBED = process.env.EMBED;
+
 const isProd = ENV === 'production';
+const isEmbed = EMBED === '1' || EMBED === 'true';
+
+const entry = isEmbed
+  ? {
+    embed: './embed.js'
+  }
+  : Object.assign({}, Shared.dappsEntry, {
+    index: './index.js'
+  });

 module.exports = {
  cache: !isProd,
  devtool: isProd ? '#hidden-source-map' : '#source-map',

  context: path.join(__dirname, '../src'),
-  entry: Object.assign({}, Shared.dappsEntry, {
-    index: './index.js',
-    embed: './embed.js'
-  }),
+  entry: entry,
  output: {
    // publicPath: '/',
    path: path.join(__dirname, '../', DEST),
@ -55,15 +63,12 @@ module.exports = {
        test: /\.js$/,
        exclude: /(node_modules)/,
        // use: [ 'happypack/loader?id=js' ]
-        use: isProd ? ['babel-loader'] : [
-          'babel-loader?cacheDirectory=true'
-        ],
-        options: Shared.getBabelrc()
+        use: isProd ? 'babel-loader' : 'babel-loader?cacheDirectory=true'
      },
      {
        test: /\.js$/,
-        include: /node_modules\/material-ui-chip-input/,
-        use: [ 'babel-loader' ]
+        include: /node_modules\/(material-chip-input|ethereumjs-tx)/,
+        use: 'babel-loader'
      },
      {
        test: /\.json$/,
@ -91,13 +96,13 @@ module.exports = {
        test: /\.css$/,
        include: [ /src/ ],
        // exclude: [ /src\/dapps/ ],
-        loader: isProd ? ExtractTextPlugin.extract([
+        loader: (isProd && !isEmbed) ? ExtractTextPlugin.extract([
          // 'style-loader',
          'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss-loader'
        ]) : undefined,
        // use: [ 'happypack/loader?id=css' ]
-        use: isProd ? undefined : [
+        use: (isProd && !isEmbed) ? undefined : [
          'style-loader',
          'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss-loader'
@ -155,18 +160,13 @@ module.exports = {
      });
    });

-    const plugins = Shared.getPlugins().concat(
-      new CopyWebpackPlugin([
-        { from: './error_pages.css', to: 'styles.css' },
-        { from: 'dapps/static' }
-      ], {}),
+    let plugins = Shared.getPlugins().concat(
+      new WebpackErrorNotificationPlugin()
+    );

-      new WebpackErrorNotificationPlugin(),
-
-      new webpack.DllReferencePlugin({
-        context: '.',
-        manifest: require(`../${DEST}/vendor-manifest.json`)
-      }),
+    if (!isEmbed) {
+      plugins = [].concat(
+        plugins,

        new HtmlWebpackPlugin({
          title: 'Parity',
@ -179,6 +179,31 @@ module.exports = {
          ]
        }),

+        new ServiceWorkerWebpackPlugin({
+          entry: path.join(__dirname, '../src/serviceWorker.js')
+        }),
+
+        DappsHTMLInjection,
+
+        new webpack.DllReferencePlugin({
+          context: '.',
+          manifest: require(`../${DEST}/vendor-manifest.json`)
+        }),
+
+        new ScriptExtHtmlWebpackPlugin({
+          sync: [ 'commons', 'vendor.js' ],
+          defaultAttribute: 'defer'
+        }),
+
+        new CopyWebpackPlugin([
+          { from: './error_pages.css', to: 'styles.css' },
+          { from: 'dapps/static' }
+        ], {})
+      );
+    }
+
+    if (isEmbed) {
+      plugins.push(
        new HtmlWebpackPlugin({
          title: 'Parity Bar',
          filename: 'embed.html',
@ -188,19 +213,9 @@ module.exports = {
            isProd ? null : 'commons',
            'embed'
          ]
-      }),
-
-      new ScriptExtHtmlWebpackPlugin({
-        sync: [ 'commons', 'vendor.js' ],
-        defaultAttribute: 'defer'
-      }),
-
-      new ServiceWorkerWebpackPlugin({
-        entry: path.join(__dirname, '../src/serviceWorker.js')
-      }),
-
-      DappsHTMLInjection
+        })
      );
+    }

    if (!isProd) {
      const DEST_I18N = path.join(__dirname, '..', DEST, 'i18n');
--- a/js/webpack/build.server.js
+++ b/js/webpack/build.server.js
@ -36,4 +36,5 @@ app.use(wsProxy);
 var server = app.listen(process.env.PORT || 3000, function () {
  console.log('Listening on port', server.address().port);
 });
+
 server.on('upgrade', wsProxy.upgrade);
--- a/js/webpack/embed.js
+++ b/js/webpack/embed.js
@ -0,0 +1,49 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const webpack = require('webpack');
+const WebpackStats = require('webpack/lib/Stats');
+const path = require('path');
+const fs = require('fs');
+
+const WebpackConfig = require('./app');
+
+const compiler = webpack(WebpackConfig);
+
+compiler.run(function handler (err, stats) {
+  if (err) {
+    return console.error(err);
+  }
+
+  // @see https://github.com/webpack/webpack/blob/324d309107f00cfc38ec727521563d309339b2ec/lib/Stats.js#L790
+  // Accepted values: none, errors-only, minimal, normal, verbose
+  const options = WebpackStats.presetToOptions('normal');
+
+  options.timings = true;
+
+  const output = stats.toString(options);
+  const assets = Object.keys(stats.compilation.assets);
+
+  const embedPath = path.resolve(WebpackConfig.output.path, './embed.json');
+  const embedData = { assets: assets };
+
+  fs.writeFileSync(embedPath, JSON.stringify(embedData, null, 2));
+
+  process.stdout.write('\n');
+  process.stdout.write(output);
+  process.stdout.write('\n\n');
+});
+
--- a/js/webpack/shared.js
+++ b/js/webpack/shared.js
@ -26,6 +26,7 @@ const rucksack = require('rucksack-css');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');

+const EMBED = process.env.EMBED;
 const ENV = process.env.NODE_ENV || 'development';
 const isProd = ENV === 'production';

@ -113,6 +114,7 @@ function getPlugins (_isProd = isProd) {

    new webpack.DefinePlugin({
      'process.env': {
+        EMBED: JSON.stringify(EMBED),
        NODE_ENV: JSON.stringify(ENV),
        RPC_ADDRESS: JSON.stringify(process.env.RPC_ADDRESS),
        PARITY_URL: JSON.stringify(process.env.PARITY_URL),