diff --git a/jest.config.js b/jest.config.js index 241dde5f..ebc97c79 100644 --- a/jest.config.js +++ b/jest.config.js @@ -6,8 +6,8 @@ module.exports = Object.assign({}, config, { '@polkadot/react-(identicon|qr)(.*)$': '/packages/react-$1/src/$2', '@polkadot/reactnative-(identicon)(.*)$': '/packages/reactnative-$1/src/$2', '@polkadot/ui-(assets|keyring|settings|shared)(.*)$': '/packages/ui-$1/src/$2', - '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object', - '\\.(css|less)$': 'empty/object' + '\\.(css|less)$': 'empty/object', + '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object' }, resolver: './jest.resolver.js' }); diff --git a/package.json b/package.json index 843748b1..005bab5c 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "devDependencies": { "@babel/core": "^7.9.0", "@babel/runtime": "^7.9.2", - "@polkadot/dev": "^0.52.1", + "@polkadot/dev": "^0.52.3", "@polkadot/ts": "^0.3.14", "@types/jest": "^25.1.4", "babel-plugin-transform-vue-template": "^0.4.2", diff --git a/packages/example-react/webpack.config.js b/packages/example-react/webpack.config.js index 080064e3..dbfc5abf 100644 --- a/packages/example-react/webpack.config.js +++ b/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 }; diff --git a/packages/example-vue/src/index.ts b/packages/example-vue/src/index.ts index dd5ed775..8386c055 100644 --- a/packages/example-vue/src/index.ts +++ b/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: `
@@ -62,25 +81,6 @@ const Example = Vue.extend({
`, - 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); diff --git a/packages/example-vue/webpack.config.js b/packages/example-vue/webpack.config.js index 9c51a42f..4ace266e 100644 --- a/packages/example-vue/webpack.config.js +++ b/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 }; diff --git a/packages/exampleReactNative/App.tsx b/packages/exampleReactNative/App.tsx index 4089c382..3b67395b 100644 --- a/packages/exampleReactNative/App.tsx +++ b/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' } }); diff --git a/packages/exampleReactNative/metro.config.js b/packages/exampleReactNative/metro.config.js index 9632debe..9ddf9b39 100644 --- a/packages/exampleReactNative/metro.config.js +++ b/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 + ] }; diff --git a/packages/react-identicon/webpack.config.js b/packages/react-identicon/webpack.config.js index d0e78b25..a6286b8c 100644 --- a/packages/react-identicon/webpack.config.js +++ b/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'] + } }; diff --git a/packages/react-qr/src/Display.tsx b/packages/react-qr/src/Display.tsx index 50cee3bc..7866bc27 100644 --- a/packages/react-qr/src/Display.tsx +++ b/packages/react-qr/src/Display.tsx @@ -42,15 +42,15 @@ function getDataUrl (value: Uint8Array): string { class Display extends React.PureComponent { 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 | null { + public static getDerivedStateFromProps ({ skipEncoding = false, value }: Props, prevState: State): Pick | null { const valueHash = xxhashAsHex(value); if (valueHash === prevState.valueHash) { @@ -63,8 +63,8 @@ class Display extends React.PureComponent { // encode on demand return { - frames, frameIdx: 0, + frames, image: getDataUrl(frames[0]), valueHash }; @@ -108,7 +108,7 @@ class Display extends React.PureComponent { } 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 { this.setState({ frameIdx: nextIdx, image: getDataUrl(frames[nextIdx]), - timerId, - timerDelay: nextDelay + timerDelay: nextDelay, + timerId }); } } diff --git a/packages/ui-keyring/src/Keyring.ts b/packages/ui-keyring/src/Keyring.ts index 2b7f617d..bf6dde2e 100644 --- a/packages/ui-keyring/src/Keyring.ts +++ b/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 }; } diff --git a/packages/ui-keyring/src/options/index.ts b/packages/ui-keyring/src/options/index.ts index ad403f05..e7ede6a9 100644 --- a/packages/ui-keyring/src/options/index.ts +++ b/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: [] }; diff --git a/packages/ui-shared/src/polkadotIcon.spec.ts b/packages/ui-shared/src/polkadotIcon.spec.ts index cfef118d..d4f97c97 100644 --- a/packages/ui-shared/src/polkadotIcon.spec.ts +++ b/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 => { diff --git a/packages/ui-shared/src/polkadotIcon.ts b/packages/ui-shared/src/polkadotIcon.ts index d930e18f..13a6a1f0 100644 --- a/packages/ui-shared/src/polkadotIcon.ts +++ b/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 })) ); } diff --git a/packages/vue-identicon/src/Demo.ts b/packages/vue-identicon/src/Demo.ts index be9eba3a..a0a1dae8 100644 --- a/packages/vue-identicon/src/Demo.ts +++ b/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: `
@@ -23,17 +33,7 @@ const Demo = Vue.extend({
- `, - name: 'Demo', - data: function (): Data { - return { - address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY', - size: 128 - }; - }, - components: { - Identicon - } + ` }); new Vue({ diff --git a/packages/vue-identicon/src/Identicon.ts b/packages/vue-identicon/src/Identicon.ts index f4c7a88a..2187c9ed 100644 --- a/packages/vue-identicon/src/Identicon.ts +++ b/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({ `, - 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(); diff --git a/packages/vue-identicon/src/icons/Beachball.ts b/packages/vue-identicon/src/icons/Beachball.ts index 2e9ecd14..9b48e82c 100644 --- a/packages/vue-identicon/src/icons/Beachball.ts +++ b/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: `
`, - props: ['address', 'size'], + created: function (): void { + this.createHtml(); + }, data: function (): Data { return { // eslint-disable-next-line quotes html: `
` }; }, - 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: `
` }); diff --git a/packages/vue-identicon/src/icons/Empty.ts b/packages/vue-identicon/src/icons/Empty.ts index cb604285..c2eb7977 100644 --- a/packages/vue-identicon/src/icons/Empty.ts +++ b/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: ` - `, - props: ['size'] + ` }); diff --git a/packages/vue-identicon/src/icons/Jdenticon.ts b/packages/vue-identicon/src/icons/Jdenticon.ts index ac36ce3d..a040b786 100644 --- a/packages/vue-identicon/src/icons/Jdenticon.ts +++ b/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: `
`, - props: ['publicKey', 'size'], + created: function (): void { + this.createSvgHtml(); + }, data: function (): Data { return { // eslint-disable-next-line quotes svgHtml: `` }; }, - 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: `
` }); diff --git a/packages/vue-identicon/src/icons/Polkadot.ts b/packages/vue-identicon/src/icons/Polkadot.ts index 32df5a10..ae40cf34 100644 --- a/packages/vue-identicon/src/icons/Polkadot.ts +++ b/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: `
`, - props: ['address', 'size'], + created: function (): void { + this.createSvgHtml(); + }, data: function (): Data { return { // eslint-disable-next-line quotes svgHtml: `` }; }, - 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 = `${circles}`; } - } + }, + props: ['address', 'size'], + // eslint-disable-next-line quotes + template: `
` }); diff --git a/packages/vue-identicon/webpack.config.js b/packages/vue-identicon/webpack.config.js index 04c76cd3..e702efc4 100644 --- a/packages/vue-identicon/webpack.config.js +++ b/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'] + } }; diff --git a/typedoc.js b/typedoc.js index 3b8ac1d3..750650bd 100644 --- a/typedoc.js +++ b/typedoc.js @@ -1,15 +1,15 @@ module.exports = { - name: 'Polkadot JS UI libraries', exclude: '**/*+(index|e2e|spec).ts', excludeExternals: true, excludeNotExported: true, - excludeProtected: true, excludePrivate: true, + excludeProtected: true, hideGenerator: true, includeDeclarations: false, - out: 'docs', module: 'commonjs', moduleResolution: 'node', + name: 'Polkadot JS UI libraries', + out: 'docs', stripInternal: 'true', theme: 'markdown' }; diff --git a/yarn.lock b/yarn.lock index 2e4ff829..04bb784b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2971,9 +2971,9 @@ __metadata: languageName: node linkType: hard -"@polkadot/dev@npm:^0.52.1": - version: 0.52.1 - resolution: "@polkadot/dev@npm:0.52.1" +"@polkadot/dev@npm:^0.52.3": + version: 0.52.3 + resolution: "@polkadot/dev@npm:0.52.3" dependencies: "@babel/cli": ^7.8.4 "@babel/core": ^7.9.0 @@ -3014,6 +3014,7 @@ __metadata: eslint-plugin-promise: ^4.2.1 eslint-plugin-react: ^7.19.0 eslint-plugin-react-hooks: ^3.0.0 + eslint-plugin-sort-destructure-keys: ^1.3.3 eslint-plugin-standard: ^4.0.1 fs-extra: ^9.0.0 gh-pages: ^2.2.0 @@ -3053,7 +3054,7 @@ __metadata: polkadot-exec-typedoc: scripts/polkadot-exec-typedoc.js polkadot-exec-vuepress: scripts/polkadot-exec-vuepress.js polkadot-exec-webpack: scripts/polkadot-exec-webpack.js - checksum: 2/40526b91020c188986c6828e3a2ad373d32e581a5852c36193ae11adb3100482943bfeea3fd5d7d149279176ea69575da2e6255f395305c50e1cd70272b97bd5 + checksum: 2/aeb6078c70026ea90323925491fe3f6d09ec69d7336655779e56480950013bff880ee64f2a917d0f9850aeb2fc837c7dfa7e717c67b5c237ddfce4ae76aee5a0 languageName: node linkType: hard @@ -8966,6 +8967,17 @@ __metadata: languageName: node linkType: hard +"eslint-plugin-sort-destructure-keys@npm:^1.3.3": + version: 1.3.3 + resolution: "eslint-plugin-sort-destructure-keys@npm:1.3.3" + dependencies: + natural-compare-lite: ^1.4.0 + peerDependencies: + eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 + checksum: 2/bcf1e4c8d9ebd692269cfbec29fbd321eec86f13273b313c46d5cff6c9434873941db4dfa117f7b71a60e247c3be5df2cdc324d4216b824ac19e3fad259370fd + languageName: node + linkType: hard + "eslint-plugin-standard@npm:^4.0.1": version: 4.0.1 resolution: "eslint-plugin-standard@npm:4.0.1" @@ -14859,6 +14871,13 @@ __metadata: languageName: node linkType: hard +"natural-compare-lite@npm:^1.4.0": + version: 1.4.0 + resolution: "natural-compare-lite@npm:1.4.0" + checksum: 2/18c1c37b8523b08e9ea51043f3f6a7a50c9354fcc0b3ff4ec3437f017f766325e935cf427fd3b39657491f6174a8701c498235acb642c752537ddca5d378ff1f + languageName: node + linkType: hard + "natural-compare@npm:^1.4.0": version: 1.4.0 resolution: "natural-compare@npm:1.4.0" @@ -18199,7 +18218,7 @@ __metadata: dependencies: "@babel/core": ^7.9.0 "@babel/runtime": ^7.9.2 - "@polkadot/dev": ^0.52.1 + "@polkadot/dev": ^0.52.3 "@polkadot/ts": ^0.3.14 "@types/jest": ^25.1.4 babel-plugin-transform-vue-template: ^0.4.2