Merge pull request #23 from xiangnuans/xianguans/eslint

add eslint/prettier

.eslintrc.js → .eslintrc.cjs

@@ -1,13 +1,19 @@
 module.exports = {
-  extends: ["plugin:vue/vue3-recommended"],
+  parser: "vue-eslint-parser",
+  extends: [
+    "plugin:vue/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
   parserOptions: {
+    parser: "@typescript-eslint/parser",
     sourceType: "module",
     ecmaVersion: "latest",
     ecmaFeatures: {
       jsx: true,
     },
   },
-  plugins: ["vue"],
+  plugins: ["vue", "@typescript-eslint", "unused-imports"],
   rules: {
     "import/extensions": ["off"],
     "@typescript-eslint/explicit-function-return-type": [
@@ -28,5 +34,7 @@ module.exports = {
         argsIgnorePattern: "^_",
       },
     ],
+    "@typescript-eslint/no-explicit-any": "error",
+    "quotes": ["error", "single"],
   },
 };

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+## 2.1.0 (2024-11-04)
+
+
+### Features
+
+* add TonConnectUIPlugin ([af7c4d2](https://github.com/TownSquareXYZ/tonconnect-ui-vue/commit/af7c4d24f825d36c453ccb694ba0dbddacb755f1))
+* add TypeScript type definitions ([4cd5796](https://github.com/TownSquareXYZ/tonconnect-ui-vue/commit/4cd5796829a1e44d5266f0161c4853d792de1ecb))
+* use Symble key in provide / inject ([e3f5115](https://github.com/TownSquareXYZ/tonconnect-ui-vue/commit/e3f51155999d2699170a416909ed01db6c7b0dc2))
+
+
+### Bug Fixes
+
+* add vue-demi to external dependencies ([e83b1bd](https://github.com/TownSquareXYZ/tonconnect-ui-vue/commit/e83b1bd91e1f9aa404098de90d394548f6821bdf))
+* resolve issues with Vue 2.7 integration ([263dd91](https://github.com/TownSquareXYZ/tonconnect-ui-vue/commit/263dd917c77c3007c878eaef4882ea159b501619))
+* update injections components & watch options change ([e1f8be8](https://github.com/TownSquareXYZ/tonconnect-ui-vue/commit/e1f8be88dffabaa7c0a81ffe961b3c56ce66cc96))
+* useTonConnectUI().tonConnectUI is not typed ([2449bd8](https://github.com/TownSquareXYZ/tonconnect-ui-vue/commit/2449bd8027c235818f085bdce608edc9ba5ee3d6))
+

package.json

@@ -13,7 +13,8 @@
     "lint-fix": "eslint --fix --ext .ts,.vue src",
     "lint": "eslint",
     "prepare": "husky",
-    "security-audit": "npm audit && npm outdated"
+    "security-audit": "npm audit && npm outdated",
+    "release": "standard-version"
   },
   "publishConfig": {
     "access": "public"
@@ -76,11 +77,14 @@
     "@vue/composition-api": "^1.7.2",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.56.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-vue": "^9.20.1",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
+    "prettier": "^3.3.3",
+    "standard-version": "^9.5.0",
     "typescript": "^4.9.5",
     "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-define-options": "^1.5.1",
@@ -94,7 +98,8 @@
   },
   "lint-staged": {
     "*.{vue,ts,tsx}": [
-      "eslint --ext .ts,.vue src"
+      "eslint --ext .ts,.vue src",
+      "prettier --write"
     ]
   }
 }

src/components/TonConnectButton.vue

@@ -1,20 +1,25 @@
 <script lang="ts">
-import { defineComponent, h, onBeforeUnmount, onMounted } from "vue-demi";
-import { useTonConnectUI } from "../hooks/useTonConnectUI";
+import {
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  isVue2,
+  PropType,
+} from 'vue-demi';
+import { useTonConnectUI } from '../hooks/useTonConnectUI';
 
 export default defineComponent({
-  name: "TonConnectButton",
+  name: 'TonConnectButton',
   props: {
     buttonRootId: {
-      type: String,
-      default: "ton-connect-button",
+      type: String as PropType<string>,
+      default: 'ton-connect-button',
     },
   },
-  setup(
-    props: { buttonRootId?: string },
-    { slots }
-  ) {
-    const {setOptions} = useTonConnectUI();
+  setup(props, { slots }) {
+    const { setOptions } = useTonConnectUI();
+
     onMounted(() => {
       setOptions({ buttonRootId: props.buttonRootId });
     });
@@ -24,17 +29,14 @@ export default defineComponent({
     });
 
     return () => {
-      return h(
-        "div",
-        {
-          id: props.buttonRootId || "",
-          attrs: {
-            id: props.buttonRootId || "",
-          },
-          style: { width: "fit-content"},
-        } as any,
-        (slots as any)?.default?.()
-      );
+      const vnodeData = {
+        style: { width: 'fit-content' },
+        ...(isVue2
+          ? { attrs: { id: props.buttonRootId || '' } }
+          : { id: props.buttonRootId || '' }),
+      };
+
+      return h('div', vnodeData, slots.default ? slots.default() : null);
     };
   },
 });

src/components/index.ts

@@ -1 +1 @@
-export { default as TonConnectButton } from "./TonConnectButton.vue";
+export { default as TonConnectButton } from './TonConnectButton.vue';

src/errors/ton-connect-provider-not-set.error.ts

@@ -5,9 +5,9 @@ import { TonConnectUIVueError } from './ton-connect-ui-vue.error';
  * either there is an attempt using TonConnect UI hook or <TonConnectButton> inside <TonConnectProvider>
  */
 export class TonConnectProviderNotSetError extends TonConnectUIVueError {
-    constructor(...args: ConstructorParameters<typeof Error>) {
-        super(...args);
+  constructor(...args: ConstructorParameters<typeof Error>) {
+    super(...args);
 
-        Object.setPrototypeOf(this, TonConnectProviderNotSetError.prototype);
-    }
+    Object.setPrototypeOf(this, TonConnectProviderNotSetError.prototype);
+  }
 }

src/errors/ton-connect-ui-vue.error.ts

@@ -4,9 +4,9 @@ import { TonConnectUIError } from '@tonconnect/ui';
  * Base class for TonConnectUIReact errors. You can check if the error was triggered by the @tonconnect/ui-react using `err instanceof TonConnectUIReactError`.
  */
 export class TonConnectUIVueError extends TonConnectUIError {
-    constructor(...args: ConstructorParameters<typeof Error>) {
-        super(...args);
+  constructor(...args: ConstructorParameters<typeof Error>) {
+    super(...args);
 
-        Object.setPrototypeOf(this, TonConnectUIVueError.prototype);
-    }
+    Object.setPrototypeOf(this, TonConnectUIVueError.prototype);
+  }
 }

src/hooks/index.ts

@@ -2,4 +2,4 @@ export { useTonAddress } from './useTonAddress';
 export { useTonConnectModal } from './useTonConnectModal';
 export { useTonConnectUI } from './useTonConnectUI';
 export { useTonWallet } from './useTonWallet';
-export { useIsConnectionRestored } from './useIsConnectionRestored';
+export { useIsConnectionRestored } from './useIsConnectionRestored';

src/hooks/useIsConnectionRestored.ts

@@ -1,17 +1,17 @@
-import { ref, onMounted } from 'vue-demi';
+import { ref, onMounted, Ref } from 'vue-demi';
 import { useTonConnectUI } from './useTonConnectUI';
 
-export function useIsConnectionRestored() {
-    const restored = ref(false);
-    const { tonConnectUI } = useTonConnectUI();
+export function useIsConnectionRestored(): Ref<boolean> {
+  const restored = ref(false);
+  const { tonConnectUI } = useTonConnectUI();
 
-    onMounted(() => {
-        if (tonConnectUI) {
-            tonConnectUI.connectionRestored.then(() => {
-                restored.value = true;
-            });
-        }
-    });
+  onMounted(() => {
+    if (tonConnectUI?.closeModal) {
+      tonConnectUI.connectionRestored.then(() => {
+        restored.value = true;
+      });
+    }
+  });
 
-    return restored;
+  return restored;
 }

src/hooks/useTonAddress.ts

@@ -1,22 +1,22 @@
-import { computed } from 'vue-demi';
+import { computed, ComputedRef } from 'vue-demi';
 import { CHAIN, toUserFriendlyAddress } from '@tonconnect/ui';
 import { useTonWallet } from './useTonWallet';
 
-export function useTonAddress(userFriendly = true) {
-    const wallet = useTonWallet();
+export function useTonAddress(userFriendly = true): ComputedRef<string> {
+  const wallet = useTonWallet();
 
-    const tonAddress = computed(() => {
-        if (wallet.value) {
-            return userFriendly
-                ? toUserFriendlyAddress(
-                      wallet.value.account.address,
-                      wallet.value.account.chain === CHAIN.TESTNET
-                  )
-                : wallet.value.account.address;
-        } else {
-            return '';
-        }
-    });
+  const tonAddress = computed(() => {
+    if (wallet.value) {
+      return userFriendly
+        ? toUserFriendlyAddress(
+            wallet.value.account.address,
+            wallet.value.account.chain === CHAIN.TESTNET,
+          )
+        : wallet.value.account.address;
+    } else {
+      return '';
+    }
+  });
 
-    return tonAddress;
-}
+  return tonAddress;
+}

src/hooks/useTonConnectModal.ts

@@ -1,23 +1,30 @@
-import { ref, onMounted } from 'vue-demi';
+import { ref, onMounted, Ref } from 'vue-demi';
 import { useTonConnectUI } from './useTonConnectUI';
 import { WalletsModalState } from '@tonconnect/ui';
 
-export function useTonConnectModal() {
-    const { tonConnectUI } = useTonConnectUI();
-    const state = ref<WalletsModalState | null>(tonConnectUI?.modal.state || null);
+export function useTonConnectModal(): {
+  state: Ref<WalletsModalState | null>;
+  open: () => void;
+  close: () => void;
+} {
+  const { tonConnectUI } = useTonConnectUI();
+  const state = ref<WalletsModalState | null>(
+    tonConnectUI?.modal.state || null,
+  );
 
-    onMounted(() => {
-        if (tonConnectUI) {
-            state.value = tonConnectUI.modal.state;
-            tonConnectUI.onModalStateChange((value: WalletsModalState) => {
-                state.value = value;
-            });
-        }
-    });
+  onMounted(() => {
+    if (tonConnectUI) {
+      state.value = tonConnectUI.modal.state;
 
-    return {
-        state: state,
-        open: () => tonConnectUI?.modal.open(),
-        close: () => tonConnectUI?.modal.close()
-    };
+      tonConnectUI.onModalStateChange((value: WalletsModalState) => {
+        state.value = value;
+      });
+    }
+  });
+
+  return {
+    state: state,
+    open: () => tonConnectUI?.modal.open(),
+    close: () => tonConnectUI?.modal.close(),
+  };
 }