Bump dev (incl. eslint fixes) (#302)

* Bump dev (incl. eslint fixes)

* Ordering fixes

packages/example-react/webpack.config.js

@@ -11,26 +11,11 @@ module.exports = {
   devtool: 'cheap-eval-source-map',
   entry: './src/index.tsx',
   mode: 'development',
-  output: {
-    chunkFilename: '[name].[chunkhash:8].js',
-    globalObject: '(typeof self !== \'undefined\' ? self : this)',
-    filename: '[name].js',
-    path: path.join(__dirname, 'build')
-  },
-  resolve: {
-    alias: {
-      '@polkadot/react-identicon': path.resolve(__dirname, '../react-identicon/build'),
-      '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/build'),
-      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
-      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build')
-    },
-    extensions: ['.js', '.ts', '.tsx']
-  },
   module: {
     rules: [
       {
-        test: /\.(ts|tsx)$/,
         exclude: /(node_modules)/,
+        test: /\.(ts|tsx)$/,
         use: [
           {
             loader: 'babel-loader',
@@ -40,14 +25,29 @@ module.exports = {
       }
     ]
   },
+  output: {
+    chunkFilename: '[name].[chunkhash:8].js',
+    filename: '[name].js',
+    globalObject: '(typeof self !== \'undefined\' ? self : this)',
+    path: path.join(__dirname, 'build')
+  },
   plugins: [
     new WebpackPluginServe({
       hmr: false, // switch off, Chrome WASM memory leak
       liveReload: false, // explict off, overrides hmr
-      progress: false, // since we have hmr off, disable
       port: 8080,
+      progress: false, // since we have hmr off, disable
       static: __dirname
     })
   ],
+  resolve: {
+    alias: {
+      '@polkadot/react-identicon': path.resolve(__dirname, '../react-identicon/build'),
+      '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/build'),
+      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
+      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build')
+    },
+    extensions: ['.js', '.ts', '.tsx']
+  },
   watch: true
 };

packages/example-vue/src/index.ts

@@ -33,6 +33,25 @@ function generateAccount (ss58Format: Prefix = 42): Account {
 }
 
 const Example = Vue.extend({
+  components: {
+    Identicon
+  },
+  data: function (): Data {
+    return {
+      ...generateAccount(),
+      ss58Format: 42,
+      ss58Options
+    };
+  },
+  methods: {
+    onClickNew: function (): void {
+      const { address, phrase } = generateAccount(this.ss58Format);
+
+      this.address = address;
+      this.phrase = phrase;
+    }
+  },
+  name: 'Example',
   template: `
     <div id="example">
       <section>
@@ -62,25 +81,6 @@ const Example = Vue.extend({
       </section>
     </div>
   `,
-  name: 'Example',
-  components: {
-    Identicon
-  },
-  data: function (): Data {
-    return {
-      ...generateAccount(),
-      ss58Format: 42,
-      ss58Options
-    };
-  },
-  methods: {
-    onClickNew: function (): void {
-      const { address, phrase } = generateAccount(this.ss58Format);
-
-      this.address = address;
-      this.phrase = phrase;
-    }
-  },
   watch: {
     ss58Format: function (): void {
       this.address = keyring.encodeAddress(this.address, this.ss58Format);

packages/example-vue/webpack.config.js

@@ -13,12 +13,40 @@ module.exports = {
   devtool: 'cheap-eval-source-map',
   entry: './src/index.ts',
   mode: 'development',
+  module: {
+    rules: [
+      {
+        exclude: /(node_modules)/,
+        test: /\.(ts|tsx)$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: require('../../babel.config.js')
+          }
+        ]
+      },
+      {
+        loader: 'vue-loader',
+        test: /\.vue$/
+      }
+    ]
+  },
   output: {
     chunkFilename: '[name].[chunkhash:8].js',
-    globalObject: '(typeof self !== \'undefined\' ? self : this)',
     filename: '[name].js',
+    globalObject: '(typeof self !== \'undefined\' ? self : this)',
     path: path.join(__dirname, 'build')
   },
+  plugins: [
+    new WebpackPluginServe({
+      hmr: false, // switch off, Chrome WASM memory leak
+      liveReload: false, // explict off, overrides hmr
+      port: 8080,
+      progress: false, // since we have hmr off, disable
+      static: __dirname
+    }),
+    new VueLoaderPlugin()
+  ],
   resolve: {
     alias: {
       '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/build'),
@@ -28,33 +56,5 @@ module.exports = {
     },
     extensions: ['.js', '.ts', '.tsx']
   },
-  module: {
-    rules: [
-      {
-        test: /\.(ts|tsx)$/,
-        exclude: /(node_modules)/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: require('../../babel.config.js')
-          }
-        ]
-      },
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
-      }
-    ]
-  },
-  plugins: [
-    new WebpackPluginServe({
-      hmr: false, // switch off, Chrome WASM memory leak
-      liveReload: false, // explict off, overrides hmr
-      progress: false, // since we have hmr off, disable
-      port: 8080,
-      static: __dirname
-    }),
-    new VueLoaderPlugin()
-  ],
   watch: true
 };

packages/exampleReactNative/App.tsx

@@ -11,36 +11,36 @@ import settings from '@polkadot/ui-settings';
 import { mnemonicGenerate, cryptoWaitReady } from '@polkadot/util-crypto';
 
 const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter
-  },
   body: {
     backgroundColor: Colors.white
   },
+  buttonContainer: {
+    alignItems: 'flex-start',
+    flex: 1,
+    flexDirection: 'column'
+  },
+  mainTitle: {
+    color: Colors.black,
+    fontSize: 28,
+    fontWeight: '600'
+  },
+  scrollView: {
+    backgroundColor: Colors.lighter
+  },
   sectionContainer: {
     marginTop: 32,
     paddingHorizontal: 24
   },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black
-  },
-  mainTitle: {
-    fontSize: 28,
-    fontWeight: '600',
-    color: Colors.black
-  },
   sectionDescription: {
-    marginTop: 8,
+    color: Colors.dark,
     fontSize: 18,
     fontWeight: '400',
-    color: Colors.dark
+    marginTop: 8
   },
-  buttonContainer: {
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'flex-start'
+  sectionTitle: {
+    color: Colors.black,
+    fontSize: 24,
+    fontWeight: '600'
   }
 });
 

packages/exampleReactNative/metro.config.js

@@ -8,24 +8,16 @@ let workspacesBuildDirs = workspaces.map((workspace) => path.join(workspace, 'bu
 workspacesBuildDirs = workspacesBuildDirs.filter((item) => item !== path.join(__dirname, '../reactnative-identicon/build/'));
 
 module.exports = {
-
-  // watch other packages as well as root node_modules
-  watchFolders: [
-    path.resolve(__dirname, '../../node_modules'),
-    ...workspacesBuildDirs
-  ],
-
   // remap node packages to react-native packages
   resolver: {
     extraNodeModules: {
       crypto: require.resolve('react-native-crypto'),
-      stream: require.resolve('stream-http'),
-      vm: require.resolve('vm-browserify'),
+      os: require.resolve('os-browserify'),
       process: require.resolve('process'),
-      os: require.resolve('os-browserify')
+      stream: require.resolve('stream-http'),
+      vm: require.resolve('vm-browserify')
     }
   },
-
   transformer: {
     getTransformOptions: () => ({
       transform: {
@@ -33,5 +25,10 @@ module.exports = {
         inlineRequires: false
       }
     })
-  }
+  },
+  // watch other packages as well as root node_modules
+  watchFolders: [
+    path.resolve(__dirname, '../../node_modules'),
+    ...workspacesBuildDirs
+  ]
 };

packages/react-identicon/webpack.config.js

@@ -13,27 +13,27 @@ module.exports = {
   devtool: isProd ? 'source-map' : 'cheap-eval-source-map',
   entry: './src/Demo.tsx',
   mode: ENV,
-  output: {
-    path: __dirname,
-    filename: './demo.js'
-  },
-  resolve: {
-    alias: {
-      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
-      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build')
-    },
-    extensions: ['.js', '.jsx', '.ts', '.tsx']
-  },
   module: {
     rules: [
       {
-        test: /\.(js|ts|tsx)$/,
         exclude: /(node_modules)/,
+        test: /\.(js|ts|tsx)$/,
         use: [
           'babel-loader'
         ]
       }
     ]
   },
-  plugins: []
+  output: {
+    filename: './demo.js',
+    path: __dirname
+  },
+  plugins: [],
+  resolve: {
+    alias: {
+      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
+      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build')
+    },
+    extensions: ['.js', '.jsx', '.ts', '.tsx']
+  }
 };

packages/react-qr/src/Display.tsx

@@ -42,15 +42,15 @@ function getDataUrl (value: Uint8Array): string {
 
 class Display extends React.PureComponent<Props, State> {
   public state: State = {
-    frames: [],
     frameIdx: 0,
+    frames: [],
     image: null,
     timerDelay: FRAME_DELAY,
     timerId: null,
     valueHash: null
   };
 
-  public static getDerivedStateFromProps ({ value, skipEncoding = false }: Props, prevState: State): Pick<State, never> | null {
+  public static getDerivedStateFromProps ({ skipEncoding = false, value }: Props, prevState: State): Pick<State, never> | null {
     const valueHash = xxhashAsHex(value);
 
     if (valueHash === prevState.valueHash) {
@@ -63,8 +63,8 @@ class Display extends React.PureComponent<Props, State> {
 
     // encode on demand
     return {
-      frames,
       frameIdx: 0,
+      frames,
       image: getDataUrl(frames[0]),
       valueHash
     };
@@ -108,7 +108,7 @@ class Display extends React.PureComponent<Props, State> {
   }
 
   private nextFrame = (): void => {
-    const { frames, frameIdx, timerDelay } = this.state;
+    const { frameIdx, frames, timerDelay } = this.state;
 
     if (!frames || frames.length <= 1) {
       return;
@@ -126,8 +126,8 @@ class Display extends React.PureComponent<Props, State> {
     this.setState({
       frameIdx: nextIdx,
       image: getDataUrl(frames[nextIdx]),
-      timerId,
-      timerDelay: nextDelay
+      timerDelay: nextDelay,
+      timerId
     });
   }
 }

packages/ui-keyring/src/Keyring.ts

@@ -23,9 +23,9 @@ const RECENT_EXPIRY = 24 * 60 * 60;
 // from the API after the chain is received
 export class Keyring extends Base implements KeyringStruct {
   #stores = {
+    account: (): AddressSubject => this.accounts,
     address: (): AddressSubject => this.addresses,
-    contract: (): AddressSubject => this.contracts,
-    account: (): AddressSubject => this.accounts
+    contract: (): AddressSubject => this.contracts
   };
 
   public addExternal (address: string | Uint8Array, meta: KeyringPair$Meta = {}): CreateResult {
@@ -122,8 +122,8 @@ export class Keyring extends Base implements KeyringStruct {
 
     return info && {
       address,
-      publicKey,
-      meta: info.json.meta
+      meta: info.json.meta,
+      publicKey
     };
   }
 

packages/ui-keyring/src/options/index.ts

@@ -40,8 +40,8 @@ class KeyringOption implements KeyringOptionInstance {
 
   public createOptionHeader (name: string): KeyringSectionOption {
     return {
-      name,
       key: `header-${name.toLowerCase()}`,
+      name,
       value: null
     };
   }
@@ -131,9 +131,9 @@ class KeyringOption implements KeyringOptionInstance {
     return {
       account: [],
       address: [],
-      contract: [],
       all: [],
       allPlus: [],
+      contract: [],
       recent: [],
       testing: []
     };

packages/ui-shared/src/polkadotIcon.spec.ts

@@ -1,3 +1,7 @@
+// Copyright 2018 @polkadot/ui-shared authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
 import generate from './polkadotIcon';
 
 describe('polkadotIcon', (): void => {

packages/ui-shared/src/polkadotIcon.ts

@@ -29,21 +29,23 @@ const C = S / 2;
 const Z = S / 64 * 5;
 const ZERO = blake2(new Uint8Array(32));
 
+/* eslint-disable sort-keys */
 const SCHEMA: { [index: string]: Scheme } = {
-  target: { freq: 1, colors: [0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 1] },
-  cube: { freq: 20, colors: [0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 5] },
-  quazar: { freq: 16, colors: [1, 2, 3, 1, 2, 4, 5, 5, 4, 1, 2, 3, 1, 2, 4, 5, 5, 4, 0] },
-  flower: { freq: 32, colors: [0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 3] },
-  cyclic: { freq: 32, colors: [0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 6] },
-  vmirror: { freq: 128, colors: [0, 1, 2, 3, 4, 5, 3, 4, 2, 0, 1, 6, 7, 8, 9, 7, 8, 6, 10] },
-  hmirror: { freq: 128, colors: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 8, 6, 7, 5, 3, 4, 2, 11] }
+  target: { colors: [0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 1], freq: 1 },
+  cube: { colors: [0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 5], freq: 20 },
+  quazar: { colors: [1, 2, 3, 1, 2, 4, 5, 5, 4, 1, 2, 3, 1, 2, 4, 5, 5, 4, 0], freq: 16 },
+  flower: { colors: [0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 3], freq: 32 },
+  cyclic: { colors: [0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 6], freq: 32 },
+  vmirror: { colors: [0, 1, 2, 3, 4, 5, 3, 4, 2, 0, 1, 6, 7, 8, 9, 7, 8, 6, 10], freq: 128 },
+  hmirror: { colors: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 8, 6, 7, 5, 3, 4, 2, 11], freq: 128 }
 };
+/* eslint-enable sort-keys */
 
 const OUTER_CIRCLE: Circle = {
   cx: C,
   cy: C,
-  r: C,
-  fill: '#eee'
+  fill: '#eee',
+  r: C
 };
 
 function getRotation (isSixPoint: boolean): { r: number; ro2: number; r3o4: number; ro4: number; rroot3o2: number; rroot3o4: number } {
@@ -56,11 +58,11 @@ function getRotation (isSixPoint: boolean): { r: number; ro2: number; r3o4: numb
   const ro4 = r / 4;
   const r3o4 = r * 3 / 4;
 
-  return { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 };
+  return { r, r3o4, ro2, ro4, rroot3o2, rroot3o4 };
 }
 
 function getCircleXY (isSixPoint: boolean): [number, number][] {
-  const { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 } = getRotation(isSixPoint);
+  const { r, r3o4, ro2, ro4, rroot3o2, rroot3o4 } = getRotation(isSixPoint);
 
   return [
     [C, C - r],
@@ -139,7 +141,7 @@ export default function generate (address: string, isSixPoint = false): Circle[]
 
   return [OUTER_CIRCLE].concat(
     getCircleXY(isSixPoint).map(([cx, cy], index): Circle => ({
-      cx, cy, r: Z, fill: colors[index]
+      cx, cy, fill: colors[index], r: Z
     }))
   );
 }

packages/vue-identicon/src/Demo.ts

@@ -16,6 +16,16 @@ interface Data {
  * @description Demo component
  */
 const Demo = Vue.extend({
+  components: {
+    Identicon
+  },
+  data: function (): Data {
+    return {
+      address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
+      size: 128
+    };
+  },
+  name: 'Demo',
   template: `
     <div id="demo">
       <Identicon :size="size" :theme="'polkadot'" :value="address" />
@@ -23,17 +33,7 @@ const Demo = Vue.extend({
       <Identicon :size="size" :theme="'beachball'" :value="address" />
       <Identicon :size="size" :theme="'empty'" />
     </div>
-  `,
-  name: 'Demo',
-  data: function (): Data {
-    return {
-      address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
-      size: 128
-    };
-  },
-  components: {
-    Identicon
-  }
+  `
 });
 
 new Vue({

packages/vue-identicon/src/Identicon.ts

@@ -46,6 +46,38 @@ function encodeAccount (value: string | Uint8Array, prefix?: Prefix): Account {
  * ```
  */
 export const Identicon = Vue.extend({
+  components: {
+    Beachball,
+    Empty,
+    Jdenticon,
+    Polkadot
+  },
+  created: function (): void {
+    this.createData();
+  },
+  data: function (): Data {
+    return {
+      address: '',
+      iconSize: DEFAULT_SIZE,
+      publicKey: '0x',
+      type: 'empty'
+    };
+  },
+  methods: {
+    createData: function (): void {
+      this.iconSize = this.size || DEFAULT_SIZE;
+      this.type = this.theme;
+
+      this.recodeAddress();
+    },
+    recodeAddress: function (): void {
+      const { address, publicKey } = encodeAccount(this.value);
+
+      this.address = address;
+      this.publicKey = publicKey;
+    }
+  },
+  props: ['prefix', 'size', 'theme', 'value'],
   // FIXME These nested divs are not correct, would like a different way
   // here so we don't create a div wrapped for the div wrapper of the icon
   template: `
@@ -62,38 +94,6 @@ export const Identicon = Vue.extend({
       <Jdenticon :key="address" :publicKey="publicKey" :size="iconSize" />
     </div>
   `,
-  props: ['prefix', 'size', 'theme', 'value'],
-  components: {
-    Beachball,
-    Empty,
-    Jdenticon,
-    Polkadot
-  },
-  data: function (): Data {
-    return {
-      address: '',
-      iconSize: DEFAULT_SIZE,
-      publicKey: '0x',
-      type: 'empty'
-    };
-  },
-  created: function (): void {
-    this.createData();
-  },
-  methods: {
-    createData: function (): void {
-      this.iconSize = this.size || DEFAULT_SIZE;
-      this.type = this.theme;
-
-      this.recodeAddress();
-    },
-    recodeAddress: function (): void {
-      const { address, publicKey } = encodeAccount(this.value);
-
-      this.address = address;
-      this.publicKey = publicKey;
-    }
-  },
   watch: {
     value: function (): void {
       this.recodeAddress();

packages/vue-identicon/src/icons/Beachball.ts

@@ -14,21 +14,21 @@ interface Data {
  * @description The Beachball identicon
  */
 export const Beachball = Vue.extend({
-  // eslint-disable-next-line quotes
-  template: `<div v-html="html" />`,
-  props: ['address', 'size'],
+  created: function (): void {
+    this.createHtml();
+  },
   data: function (): Data {
     return {
       // eslint-disable-next-line quotes
       html: `<div />`
     };
   },
-  created: function (): void {
-    this.createHtml();
-  },
   methods: {
     createHtml: function (): void {
       this.html = generate(this.address, this.size).outerHTML;
     }
-  }
+  },
+  props: ['address', 'size'],
+  // eslint-disable-next-line quotes
+  template: `<div v-html="html" />`
 });

packages/vue-identicon/src/icons/Empty.ts

@@ -9,10 +9,10 @@ import Vue from 'vue';
  * @description An empty identicon
  */
 export const Empty = Vue.extend({
+  props: ['size'],
   template: `
     <svg :height="size" :width="size" viewBox="0 0 64 64">
       <circle cx="50%" cy="50%" fill="#eee" r="50%" />
     </svg>
-  `,
-  props: ['size']
+  `
 });

packages/vue-identicon/src/icons/Jdenticon.ts

@@ -14,21 +14,21 @@ interface Data {
  * @description The substrate default via Jdenticon
  */
 export const Jdenticon = Vue.extend({
-  // eslint-disable-next-line quotes
-  template: `<div v-html="svgHtml" />`,
-  props: ['publicKey', 'size'],
+  created: function (): void {
+    this.createSvgHtml();
+  },
   data: function (): Data {
     return {
       // eslint-disable-next-line quotes
       svgHtml: `<svg viewBox="0 0 64 64" />`
     };
   },
-  created: function (): void {
-    this.createSvgHtml();
-  },
   methods: {
     createSvgHtml: function (): void {
       this.svgHtml = jdenticon.toSvg(this.publicKey.substr(2), this.size);
     }
-  }
+  },
+  props: ['publicKey', 'size'],
+  // eslint-disable-next-line quotes
+  template: `<div v-html="svgHtml" />`
 });

packages/vue-identicon/src/icons/Polkadot.ts

@@ -14,18 +14,15 @@ interface Data {
  * @description The Polkadot default identicon
  */
 export const Polkadot = Vue.extend({
-  // eslint-disable-next-line quotes
-  template: `<div v-html="svgHtml" />`,
-  props: ['address', 'size'],
+  created: function (): void {
+    this.createSvgHtml();
+  },
   data: function (): Data {
     return {
       // eslint-disable-next-line quotes
       svgHtml: `<svg viewBox="0 0 64 64" />`
     };
   },
-  created: function (): void {
-    this.createSvgHtml();
-  },
   methods: {
     createSvgHtml: function (): void {
       const circles = generateIcon(this.address).map(({ cx, cy, fill, r }): string =>
@@ -34,5 +31,8 @@ export const Polkadot = Vue.extend({
 
       this.svgHtml = `<svg height=${this.size} viewBox='0 0 64 64' width=${this.size}>${circles}</svg>`;
     }
-  }
+  },
+  props: ['address', 'size'],
+  // eslint-disable-next-line quotes
+  template: `<div v-html="svgHtml" />`
 });

packages/vue-identicon/webpack.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 // Copyright 2017-2020 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
@@ -14,32 +13,32 @@ module.exports = {
   devtool: isProd ? 'source-map' : 'cheap-eval-source-map',
   entry: './src/Demo.ts',
   mode: ENV,
-  output: {
-    path: path.join(__dirname, 'build'),
-    filename: './demo.js'
-  },
-  resolve: {
-    alias: {
-      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build')
-    },
-    extensions: ['.js', '.ts']
-  },
   module: {
     rules: [
       {
-        test: /\.(js|ts)$/,
         exclude: /(node_modules)/,
+        test: /\.(js|ts)$/,
         use: [
           'babel-loader'
         ]
       },
       {
-        test: /\.vue$/,
-        loader: 'vue-loader'
+        loader: 'vue-loader',
+        test: /\.vue$/
       }
     ]
   },
+  output: {
+    filename: './demo.js',
+    path: path.join(__dirname, 'build')
+  },
   plugins: [
     new VueLoaderPlugin()
-  ]
+  ],
+  resolve: {
+    alias: {
+      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build')
+    },
+    extensions: ['.js', '.ts']
+  }
 };