feat: update wx js api options

.vscode/settings.json

@@ -3,5 +3,29 @@
     "jsapi",
     "yunlefun"
   ],
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml"
+  ]
 }

eslint.config.js

@@ -0,0 +1,3 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu()

package.json

@@ -2,7 +2,7 @@
   "name": "@yunlefun/toolkit-monorepo",
   "type": "module",
   "version": "0.0.0",
-  "packageManager": "pnpm@8.1.0",
+  "packageManager": "pnpm@8.14.3",
   "description": "Toolkit for YunLeFun developing.",
   "author": {
     "name": "YunLeFun",
@@ -22,16 +22,16 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.38.4",
-    "@types/node": "^18.15.11",
+    "@antfu/eslint-config": "^2.6.3",
+    "@types/node": "^20.11.7",
     "@yunlefun/vueuse": "workspace:*",
     "@yunyoujun/utils": "^0.3.5",
-    "bumpp": "^9.1.0",
-    "eslint": "^8.37.0",
-    "typescript": "^4.8.3",
-    "unbuild": "^1.2.0",
-    "vite": "^4.2.1",
-    "vitest": "^0.29.8",
-    "vue-tsc": "^1.2.0"
+    "bumpp": "^9.3.0",
+    "eslint": "^8.56.0",
+    "typescript": "^5.3.3",
+    "unbuild": "^2.0.0",
+    "vite": "^5.0.12",
+    "vitest": "^1.2.2",
+    "vue-tsc": "^1.8.27"
   }
 }

packages/constants/package.json

@@ -4,8 +4,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     }
   },
   "main": "./dist/index.mjs",

packages/toolkit/package.json

@@ -24,8 +24,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     }
   },
   "main": "./dist/index.mjs",

packages/utils/package.json

@@ -23,8 +23,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     }
   },
   "main": "./dist/index.mjs",

packages/utils/src/lock/index.ts

@@ -1,7 +1,6 @@
 /**
  * @description can not run async function concurrently
  * @param fn
- * @returns
  */
 export function createAsyncLock<T>(fn: () => Promise<T>) {
   const state = {
@@ -17,9 +16,8 @@ export function createAsyncLock<T>(fn: () => Promise<T>) {
 
     state.isLocked = true
 
-    return fn()
-      .finally(() => {
-        state.isLocked = false
-      })
+    return fn().finally(() => {
+      state.isLocked = false
+    })
   }
 }

packages/utils/src/wx/helpers.ts

@@ -1,6 +1,5 @@
 /**
  * 是否在微信浏览器环境
- * @returns
  */
 export function isInWxBrowser() {
   return /MicroMessenger/.test(navigator.userAgent)

packages/utils/src/wx/jsApi/share.ts

@@ -32,8 +32,6 @@ export interface RegisterWxShareOptions extends WxShareInfo {
 
 /**
  * Register Wx Share
- * @param options
- * @returns
  */
 export function registerWxShare(shareOptions: RegisterWxShareOptions) {
   const wx = window.wx

packages/utils/src/wx/register.ts

@@ -3,15 +3,14 @@ import { registerWxShare } from './jsApi'
 import type { WxConfig } from './types'
 
 export interface WxInitOptions {
-  config: WxConfig
-  onReady?: () => void
-  onError?: (res: any) => void
+  config?: Partial<WxConfig>;
+  onReady?: () => void;
+  onError?: (res: any) => void;
 }
 
 /**
  * Create wx helpers
  * @param options
- * @returns
  */
 export function createWx(options: WxInitOptions) {
   if (!isClient)

packages/utils/tsconfig.json

@@ -1,14 +1,14 @@
 {
   "compilerOptions": {
     "target": "es2018",
-    "module": "esnext",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "module": "esnext",
     "moduleResolution": "node",
-    "esModuleInterop": true,
+    "resolveJsonModule": true,
     "strict": true,
     "strictNullChecks": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "skipDefaultLibCheck": true
+    "esModuleInterop": true,
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true
   }
 }

packages/vueuse/package.json

@@ -23,8 +23,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     }
   },
   "main": "./dist/index.mjs",
@@ -58,7 +58,7 @@
     "@yunlefun/utils": "workspace:*"
   },
   "devDependencies": {
-    "@vueuse/core": "^9.13.0",
-    "vue": "^3.2.47"
+    "@vueuse/core": "^10.7.2",
+    "vue": "^3.4.15"
   }
 }

packages/vueuse/src/wx/demo.vue

@@ -1,39 +1,26 @@
 <script lang="ts" setup>
-import type { WxJsApiOptions } from '@yunlefun/vueuse'
+import { ref } from 'vue'
 import { useWxJsApi } from '@yunlefun/vueuse'
-import { registerWxShare } from '@yunlefun/utils'
+import { isInWxBrowser, registerWxShare } from '@yunlefun/utils'
 
 const wxDomain = 'https://wx.yunyoujun.cn'
 const url = window?.location?.href?.split?.('#')?.[0]
 
-const { isReady } = useWxJsApi(async () => {
-  const data = await fetch(`${wxDomain}/wx/config?url=${url}`)
-    .then(res => res.json())
-
-  const wxJsApiOptions: WxJsApiOptions = {
-    config: {
-      // debug: true,
-      appId: 'wx80bfa39c2ebe26e8', // replace with your appId
-      timestamp: data.timestamp,
-      nonceStr: data.nonceStr,
-      signature: data.signature,
-      jsApiList: [
-        'updateAppMessageShareData',
-        'updateTimelineShareData',
-      ],
-    },
+const isReady = ref(false)
+if (isInWxBrowser()) {
+  const { isReady: isWxReady } = useWxJsApi({
+    configUrl: `${wxDomain}/wx/config?url=${url}`,
     onReady: () => {
       registerWxShare({
         title: '@YunLeFun/vueuse',
         desc: 'Vue Composition API for Wx Share.',
         link: 'https://github.com/YunLeFun/toolkit/blob/main/packages/vueuse/?source=wx',
         imgUrl: 'https://cn.vuejs.org/logo.svg',
       })
-    },
-  }
-
-  return wxJsApiOptions
-})
+    }
+  })
+  isReady.value = isWxReady.value
+}
 </script>
 
 <template>

packages/vueuse/src/wx/jsApi/init.ts

@@ -1,43 +1,85 @@
 import { ref } from 'vue'
 import { isClient, useScriptTag } from '@vueuse/core'
 import type { WxInitOptions } from '@yunlefun/utils'
-import { createWx, isInWxBrowser, wxSdkCDN } from '@yunlefun/utils'
+import { createWx, wxSdkCDN } from '@yunlefun/utils'
 
-export interface WxJsApiOptions extends WxInitOptions {}
+export interface WxJsApiOptions extends WxInitOptions {
+  debug?: boolean
+  /**
+   * get config from server url
+   */
+  configUrl?: string
+}
 
 /**
  * @see https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
+ * 只在微信浏览器中使用，记得加 isInWxBrowser 判断
  */
-export function useWxJsApi(options: WxJsApiOptions | (() => Promise<WxJsApiOptions>)) {
+export function useWxJsApi(
+  options: WxJsApiOptions,
+) {
+
+
   const isReady = ref(false)
   const error = ref()
   const wx = ref<ReturnType<typeof createWx>>()
 
-  if (isInWxBrowser()) {
-    useScriptTag(wxSdkCDN, async () => {
-      if (!isClient)
-        return
-
-      if (!window.wx)
-        return
-
-      let wxOptions = options as WxJsApiOptions
-      if (typeof options === 'function')
-        wxOptions = (await options()) as WxJsApiOptions
-
-      wx.value = createWx({
-        ...wxOptions as WxJsApiOptions,
-        onReady: () => {
-          isReady.value = true
-          wxOptions.onReady?.()
-        },
-        onError: (res) => {
-          error.value = res
-          wxOptions.onError?.(res)
-        },
-      })
-    })
-  }
+  useScriptTag(wxSdkCDN, async () => {
+    if (!isClient)
+      return
+
+    if (options.configUrl) {}
+
+    if (!window.wx)
+      return
+
+    if (options.debug) {
+      console.log('wxOptions', options)
+    }
+
+    let data: {
+      timestamp?: string
+      nonceStr?: string
+      signature?: string
+    } = {}
+    if (options.configUrl) {
+      data = await fetch(options.configUrl).then(
+        (res) => res.json()
+      );
+      if (options.debug) {
+        console.log('wx config data (fetch from configUrl)', data)
+      }
+    }
+
+
+    wx.value = createWx({
+      ...options,
+
+      config: {
+        appId: "wx80bfa39c2ebe26e8", // replace with your appId
+        timestamp: data.timestamp,
+        nonceStr: data.nonceStr,
+        signature: data.signature,
+        jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
+        ...(options.config || {}),
+      },
+
+      onReady: () => {
+        if (options.debug) {
+          alert('wx ready')
+        }
+        isReady.value = true;
+        options.onReady?.();
+      },
+      onError: (res) => {
+        if (options.debug) {
+          alert('wx error')
+        }
+        error.value = res;
+        options.onError?.(res);
+      },
+    });
+  })
 
   return {
     isReady,

playground/test/package.json

@@ -9,13 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.47"
+    "vue": "^3.4.15"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^5.0.3",
     "@yunlefun/utils": "workspace:*",
-    "typescript": "^4.9.3",
-    "vite": "^4.2.0",
-    "vue-tsc": "^1.2.0"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vue-tsc": "^1.8.27"
   }
 }