diff --git a/CHANGELOG.md b/CHANGELOG.md index 0d55db07..5c1f7288 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # CHANGELOG +## master + +Changes: + +- Swap `vue-identitycon` to use `defineComponent` (requires vue 2.7+) + + ## 3.0.2 Mar 11, 2023 Changes: diff --git a/packages/react-qr/src/util.spec.ts b/packages/react-qr/src/util.spec.ts index c5d0afe3..6aa6eba5 100644 --- a/packages/react-qr/src/util.spec.ts +++ b/packages/react-qr/src/util.spec.ts @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/react-qr authors & contributors // SPDX-License-Identifier: Apache-2.0 -/// +/// import { u8aConcat, u8aToHex, u8aToString } from '@polkadot/util'; import { randomAsU8a } from '@polkadot/util-crypto'; diff --git a/packages/reactnative-identicon/src/icons/Empty.tsx b/packages/reactnative-identicon/src/icons/Empty.tsx index ab42eef7..fbb3ef3b 100644 --- a/packages/reactnative-identicon/src/icons/Empty.tsx +++ b/packages/reactnative-identicon/src/icons/Empty.tsx @@ -5,7 +5,7 @@ import type { Props } from '../types.js'; import React from 'react'; import { View } from 'react-native'; -import Svg, { Circle } from 'react-native-svg'; +import { Circle, Svg } from 'react-native-svg'; export default function Empty ({ size }: Props): React.ReactElement { return ( diff --git a/packages/reactnative-identicon/src/icons/Polkadot.tsx b/packages/reactnative-identicon/src/icons/Polkadot.tsx index 72425311..afbe55da 100644 --- a/packages/reactnative-identicon/src/icons/Polkadot.tsx +++ b/packages/reactnative-identicon/src/icons/Polkadot.tsx @@ -6,7 +6,7 @@ import type { Props } from '../types.js'; import React, { useMemo } from 'react'; import { View } from 'react-native'; -import Svg, { Circle as SvgCircle } from 'react-native-svg'; +import { Circle as SvgCircle, Svg } from 'react-native-svg'; import { polkadotIcon } from '@polkadot/ui-shared'; diff --git a/packages/ui-keyring/src/options/index.spec.ts b/packages/ui-keyring/src/options/index.spec.ts index 38944767..a0c5e14d 100644 --- a/packages/ui-keyring/src/options/index.spec.ts +++ b/packages/ui-keyring/src/options/index.spec.ts @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/ui-keyring authors & contributors // SPDX-License-Identifier: Apache-2.0 -/// +/// import type { KeyringStruct } from '../types.js'; diff --git a/packages/ui-shared/src/icons/beachball/colors.spec.ts b/packages/ui-shared/src/icons/beachball/colors.spec.ts index 2355bfb7..454e548a 100644 --- a/packages/ui-shared/src/icons/beachball/colors.spec.ts +++ b/packages/ui-shared/src/icons/beachball/colors.spec.ts @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/ui-shared authors & contributors // SPDX-License-Identifier: Apache-2.0 -/// +/// import type { ColorGen } from './types.js'; diff --git a/packages/ui-shared/src/icons/beachball/container.spec.ts b/packages/ui-shared/src/icons/beachball/container.spec.ts index 0579a725..0ab5cc35 100644 --- a/packages/ui-shared/src/icons/beachball/container.spec.ts +++ b/packages/ui-shared/src/icons/beachball/container.spec.ts @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/ui-shared authors & contributors // SPDX-License-Identifier: Apache-2.0 -/// +/// import { container } from './container.js'; diff --git a/packages/ui-shared/src/icons/beachball/index.spec.ts b/packages/ui-shared/src/icons/beachball/index.spec.ts index 8530b9a1..f96d5ff7 100644 --- a/packages/ui-shared/src/icons/beachball/index.spec.ts +++ b/packages/ui-shared/src/icons/beachball/index.spec.ts @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/ui-shared authors & contributors // SPDX-License-Identifier: Apache-2.0 -/// +/// import xmlserializer from 'xmlserializer'; diff --git a/packages/ui-shared/src/icons/beachball/seeder.spec.ts b/packages/ui-shared/src/icons/beachball/seeder.spec.ts index 5d1332e1..95a6dee5 100644 --- a/packages/ui-shared/src/icons/beachball/seeder.spec.ts +++ b/packages/ui-shared/src/icons/beachball/seeder.spec.ts @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/ui-shared authors & contributors // SPDX-License-Identifier: Apache-2.0 -/// +/// import type { Seeder } from './types.js'; diff --git a/packages/ui-shared/src/icons/beachball/shape/circle.spec.ts b/packages/ui-shared/src/icons/beachball/shape/circle.spec.ts index 81c4994e..8b96a149 100644 --- a/packages/ui-shared/src/icons/beachball/shape/circle.spec.ts +++ b/packages/ui-shared/src/icons/beachball/shape/circle.spec.ts @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/ui-shared authors & contributors // SPDX-License-Identifier: Apache-2.0 -/// +/// import xmlserializer from 'xmlserializer'; diff --git a/packages/ui-shared/src/icons/beachball/svg/circle.spec.ts b/packages/ui-shared/src/icons/beachball/svg/circle.spec.ts index d8b29340..ef58fdd1 100644 --- a/packages/ui-shared/src/icons/beachball/svg/circle.spec.ts +++ b/packages/ui-shared/src/icons/beachball/svg/circle.spec.ts @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/ui-shared authors & contributors // SPDX-License-Identifier: Apache-2.0 -/// +/// import xs from 'xmlserializer'; diff --git a/packages/ui-shared/src/icons/beachball/svg/element.spec.ts b/packages/ui-shared/src/icons/beachball/svg/element.spec.ts index b7be5c9c..79dd31a7 100644 --- a/packages/ui-shared/src/icons/beachball/svg/element.spec.ts +++ b/packages/ui-shared/src/icons/beachball/svg/element.spec.ts @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/ui-shared authors & contributors // SPDX-License-Identifier: Apache-2.0 -/// +/// import xs from 'xmlserializer'; diff --git a/packages/ui-shared/src/icons/beachball/svg/rect.spec.ts b/packages/ui-shared/src/icons/beachball/svg/rect.spec.ts index 7ceb55e2..2d56491b 100644 --- a/packages/ui-shared/src/icons/beachball/svg/rect.spec.ts +++ b/packages/ui-shared/src/icons/beachball/svg/rect.spec.ts @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/ui-shared authors & contributors // SPDX-License-Identifier: Apache-2.0 -/// +/// import xs from 'xmlserializer'; diff --git a/packages/ui-shared/src/icons/beachball/svg/svg.spec.ts b/packages/ui-shared/src/icons/beachball/svg/svg.spec.ts index c5ddf60a..d81dfa39 100644 --- a/packages/ui-shared/src/icons/beachball/svg/svg.spec.ts +++ b/packages/ui-shared/src/icons/beachball/svg/svg.spec.ts @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/ui-shared authors & contributors // SPDX-License-Identifier: Apache-2.0 -/// +/// import xs from 'xmlserializer'; diff --git a/packages/ui-shared/src/icons/polkadot.spec.ts b/packages/ui-shared/src/icons/polkadot.spec.ts index 71c4799f..df4e4e31 100644 --- a/packages/ui-shared/src/icons/polkadot.spec.ts +++ b/packages/ui-shared/src/icons/polkadot.spec.ts @@ -1,7 +1,7 @@ // Copyright 2018-2023 @polkadot/ui-shared authors & contributors // SPDX-License-Identifier: Apache-2.0 -/// +/// import { polkadotIcon } from './polkadot.js'; diff --git a/packages/ui-shared/src/icons/polkadot.ts b/packages/ui-shared/src/icons/polkadot.ts index 323baa56..9c25532c 100644 --- a/packages/ui-shared/src/icons/polkadot.ts +++ b/packages/ui-shared/src/icons/polkadot.ts @@ -57,7 +57,7 @@ function getRotation (isSixPoint: boolean): { r: number; ro2: number; r3o4: numb return { r, r3o4, ro2, ro4, rroot3o2, rroot3o4 }; } -function getCircleXY (isSixPoint: boolean): [number, number][] { +function getCircleXY (isSixPoint = false): [number, number][] { const { r, r3o4, ro2, ro4, rroot3o2, rroot3o4 } = getRotation(isSixPoint); return [ diff --git a/packages/ui-shared/src/icons/types.ts b/packages/ui-shared/src/icons/types.ts index d66bacb6..ce05cc98 100644 --- a/packages/ui-shared/src/icons/types.ts +++ b/packages/ui-shared/src/icons/types.ts @@ -9,6 +9,6 @@ export interface Circle { } export interface Options { - isAlternative: boolean; + isAlternative?: boolean; size?: number; } diff --git a/packages/vue-identicon/package.json b/packages/vue-identicon/package.json index a1532fce..b30e8c59 100644 --- a/packages/vue-identicon/package.json +++ b/packages/vue-identicon/package.json @@ -32,6 +32,6 @@ "peerDependencies": { "@polkadot/util": "*", "@polkadot/util-crypto": "*", - "vue": "*" + "vue": "^2.7" } } diff --git a/packages/vue-identicon/src/Identicon.ts b/packages/vue-identicon/src/Identicon.ts index 3609f3bc..c780feae 100644 --- a/packages/vue-identicon/src/Identicon.ts +++ b/packages/vue-identicon/src/Identicon.ts @@ -3,7 +3,7 @@ import type { Prefix } from '@polkadot/util-crypto/address/types'; -import Vue, { VNode } from 'vue'; +import { defineComponent, VNode } from 'vue'; import { isHex, isU8a, u8aToHex } from '@polkadot/util'; import { decodeAddress, encodeAddress } from '@polkadot/util-crypto'; @@ -46,7 +46,7 @@ function encodeAccount (value: string | Uint8Array, prefix?: Prefix): Account { * * ``` */ -export const Identicon = Vue.extend({ +export const Identicon = defineComponent({ components: { Beachball, Empty, @@ -81,19 +81,37 @@ export const Identicon = Vue.extend({ }, props: ['prefix', 'isAlternative', 'size', 'theme', 'value'], render (h): VNode { - const { address, iconSize, isAlternativeIcon, publicKey, type } = this.$data as Data; + const { address, iconSize, isAlternativeIcon, publicKey, type } = this.$data; if (type === 'empty') { - return h('Empty', { attrs: { key: address, size: iconSize } }, []); + return h('Empty', { + attrs: { + key: address, + size: iconSize + } + }, []); } else if (type === 'jdenticon') { - return h('Jdenticon', { attrs: { key: address, publicKey, size: iconSize } }, []); - } else { - // handles: beachball and polkadot - // TODO: substrate - const cmp = type.charAt(0).toUpperCase() + type.slice(1); - - return h(cmp, { attrs: { address, isAlternative: isAlternativeIcon, key: address, size: iconSize } }, []); + return h('Jdenticon', { + attrs: { + key: address, + publicKey, + size: iconSize + } + }, []); + } else if (type === 'substrate') { + throw new Error('substrate type is not supported'); } + + const cmp = type.charAt(0).toUpperCase() + type.slice(1); + + return h(cmp, { + attrs: { + address, + isAlternative: isAlternativeIcon, + key: address, + size: iconSize + } + }, []); }, watch: { value: function (): void { diff --git a/packages/vue-identicon/src/icons/Beachball.ts b/packages/vue-identicon/src/icons/Beachball.ts index 5d612c29..dfbb530b 100644 --- a/packages/vue-identicon/src/icons/Beachball.ts +++ b/packages/vue-identicon/src/icons/Beachball.ts @@ -1,11 +1,11 @@ // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors // SPDX-License-Identifier: Apache-2.0 -import Vue, { VNode } from 'vue'; +import { defineComponent, VNode } from 'vue'; import { beachballIcon } from '@polkadot/ui-shared'; -type propsType = { +type PropsType = { address: string; size: number; isAlternative: boolean; @@ -15,13 +15,16 @@ type propsType = { * @name Beachball * @description The Beachball identicon */ -export const Beachball = Vue.extend({ +export const Beachball = defineComponent({ props: ['address', 'size', 'isAlternative'], - // eslint-disable-next-line quotes render (h): VNode { - const { address, isAlternative, size } = this.$props as propsType; - const bb = beachballIcon(address, { isAlternative, size }); + const { address, isAlternative, size } = this.$props as PropsType; - return h(Vue.component('VCBeachball', { template: bb.outerHTML })); + return h({ + template: beachballIcon(address, { + isAlternative, + size + }).outerHTML + }); } }); diff --git a/packages/vue-identicon/src/icons/Empty.ts b/packages/vue-identicon/src/icons/Empty.ts index 0f87e107..7a9d32a4 100644 --- a/packages/vue-identicon/src/icons/Empty.ts +++ b/packages/vue-identicon/src/icons/Empty.ts @@ -1,13 +1,13 @@ // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors // SPDX-License-Identifier: Apache-2.0 -import Vue from 'vue'; +import { defineComponent } from 'vue'; /** * @name Empty * @description An empty identicon */ -export const Empty = Vue.extend({ +export const Empty = defineComponent({ props: ['size'], template: ` diff --git a/packages/vue-identicon/src/icons/Jdenticon.ts b/packages/vue-identicon/src/icons/Jdenticon.ts index 7cdc8fa2..3390b8f8 100644 --- a/packages/vue-identicon/src/icons/Jdenticon.ts +++ b/packages/vue-identicon/src/icons/Jdenticon.ts @@ -2,9 +2,9 @@ // SPDX-License-Identifier: Apache-2.0 import * as jdenticon from 'jdenticon'; -import Vue, { VNode } from 'vue'; +import { defineComponent, VNode } from 'vue'; -type propsType = { +type PropsType = { publicKey: string, size: number } @@ -13,13 +13,13 @@ type propsType = { * @name Jdenticon * @description The substrate default via Jdenticon */ -export const Jdenticon = Vue.extend({ +export const Jdenticon = defineComponent({ props: ['publicKey', 'size'], - // eslint-disable-next-line quotes render (h): VNode { - const { publicKey, size } = this.$props as propsType; - const cmp = Vue.component('CJdenticon', { template: jdenticon.toSvg(publicKey.substring(2), size) }); + const { publicKey, size } = this.$props as PropsType; - return h(cmp); + return h({ + template: jdenticon.toSvg(publicKey.substring(2), size) + }); } }); diff --git a/packages/vue-identicon/src/icons/Polkadot.ts b/packages/vue-identicon/src/icons/Polkadot.ts index 129f88ad..0e327542 100644 --- a/packages/vue-identicon/src/icons/Polkadot.ts +++ b/packages/vue-identicon/src/icons/Polkadot.ts @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors // SPDX-License-Identifier: Apache-2.0 -import Vue, { VNode } from 'vue'; +import { defineComponent, VNode } from 'vue'; import { polkadotIcon } from '@polkadot/ui-shared'; @@ -15,21 +15,20 @@ type propsType = { * @name Polkadot * @description The Polkadot default identicon */ -export const Polkadot = Vue.extend({ +export const Polkadot = defineComponent({ props: ['address', 'isAlternative', 'size'], - // eslint-disable-next-line quotes render (h): VNode { const { address, isAlternative, size } = this.$props as propsType; - const circles = polkadotIcon(address, { - isAlternative: isAlternative || false - }).map(({ cx, - cy, - fill, - r }) => { - return h('circle', { attrs: { cx, cy, fill, r } }, []); - } + const circles = polkadotIcon(address, { isAlternative }).map(({ cx, cy, fill, r }) => + h('circle', { attrs: { cx, cy, fill, r } }, []) ); - return h('svg', { attrs: { height: size, viewBox: '0 0 64 64', width: size } }, circles); + return h('svg', { + attrs: { + height: size, + viewBox: '0 0 64 64', + width: size + } + }, circles); } }); diff --git a/tsconfig.base.json b/tsconfig.base.json index ad1784b0..a1c22737 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -2,8 +2,6 @@ "extends": "@polkadot/dev/config/tsconfig.json", "compilerOptions": { "composite": true, - /* FIXME The default nodenext resolution is problematic with vue2 */ - "moduleResolution": "node", "paths": { "@polkadot/react-identicon": ["react-identicon/src/index.ts"], "@polkadot/react-qr": ["react-qr/src/index.ts"], diff --git a/yarn.lock b/yarn.lock index 2cad6a8c..00e8fb1e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1684,7 +1684,7 @@ __metadata: peerDependencies: "@polkadot/util": "*" "@polkadot/util-crypto": "*" - vue: "*" + vue: ^2.7 languageName: unknown linkType: soft