Swap to using defineComponent for Vue (req. 2.7+)

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:

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
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev/node/test/node.d.ts" />
 
 import { u8aConcat, u8aToHex, u8aToString } from '@polkadot/util';
 import { randomAsU8a } from '@polkadot/util-crypto';

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<Props> {
   return (

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';
 

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
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev/node/test/node.d.ts" />
 
 import type { KeyringStruct } from '../types.js';
 

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
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev/node/test/node.d.ts" />
 
 import type { ColorGen } from './types.js';
 

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
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev/node/test/node.d.ts" />
 
 import { container } from './container.js';
 

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
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev/node/test/node.d.ts" />
 
 import xmlserializer from 'xmlserializer';
 

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
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev/node/test/node.d.ts" />
 
 import type { Seeder } from './types.js';
 

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
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev/node/test/node.d.ts" />
 
 import xmlserializer from 'xmlserializer';
 

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
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev/node/test/node.d.ts" />
 
 import xs from 'xmlserializer';
 

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
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev/node/test/node.d.ts" />
 
 import xs from 'xmlserializer';
 

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
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev/node/test/node.d.ts" />
 
 import xs from 'xmlserializer';
 

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
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev/node/test/node.d.ts" />
 
 import xs from 'xmlserializer';
 

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
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev/node/test/node.d.ts" />
 
 import { polkadotIcon } from './polkadot.js';
 

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 [

packages/ui-shared/src/icons/types.ts

@@ -9,6 +9,6 @@ export interface Circle {
 }
 
 export interface Options {
-  isAlternative: boolean;
+  isAlternative?: boolean;
   size?: number;
 }

packages/vue-identicon/package.json

@@ -32,6 +32,6 @@
   "peerDependencies": {
     "@polkadot/util": "*",
     "@polkadot/util-crypto": "*",
-    "vue": "*"
+    "vue": "^2.7"
   }
 }

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 {
  * <Identicon :size="128" :theme="polkadot" :value="..." />
  * ```
  */
-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 {

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
+    });
   }
 });

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: `
     <svg :height="size" :width="size" viewBox="0 0 64 64">

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)
+    });
   }
 });

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);
   }
 });

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"],

yarn.lock

@@ -1684,7 +1684,7 @@ __metadata:
   peerDependencies:
     "@polkadot/util": "*"
     "@polkadot/util-crypto": "*"
-    vue: "*"
+    vue: ^2.7
   languageName: unknown
   linkType: soft