refactor(valaxy-addon-meting): extract useAplayer

demo/yun/package.json

@@ -19,6 +19,7 @@
     "valaxy-addon-algolia": "workspace:*",
     "valaxy-addon-components": "workspace:*",
     "valaxy-addon-lightgallery": "workspace:*",
+    "valaxy-addon-meting": "workspace:*",
     "valaxy-addon-twikoo": "workspace:*",
     "valaxy-addon-waline": "workspace:*",
     "valaxy-theme-yun": "workspace:*"

demo/yun/valaxy.config.ts

@@ -9,6 +9,7 @@ import { addonWaline } from 'valaxy-addon-waline'
 import { addonComponents } from 'valaxy-addon-components'
 import { addonLightGallery } from 'valaxy-addon-lightgallery'
 import { addonTest } from 'valaxy-addon-test'
+import { addonMeting } from 'valaxy-addon-meting'
 
 const safelist = [
   'i-ri-home-line',
@@ -111,6 +112,9 @@ export default defineValaxyConfig<ThemeConfig>({
       comment: true,
     }),
     addonLightGallery(),
+    addonMeting({
+      global: true,
+    }),
     // addonTwikoo({
     //   envId: 'https://twikoo.vercel.app',
     // }),

docs/pages/guide/third-party/index.md

@@ -5,6 +5,7 @@ categories:
   - third
 end: false
 top: 99
+aplayer: true
 ---
 
 ## 搜索 {lang="zh-CN"}

packages/valaxy-addon-meting/App.vue

@@ -1,22 +1,34 @@
 <script lang="ts" setup>
-import { useAplayer } from 'valaxy'
-import { computed } from 'vue'
-const props = defineProps<{
+import { useAplayer } from './client'
+
+const props = withDefaults(defineProps<{
   [key: string]: any
-}>()
+} & Partial<MetingJsProps>>(), {
+  id: '308168565',
+  server: 'netease',
+  type: 'playlist',
+})
 
-const loadAplayer = computed(() => props.auto || props.url || (props.id && props.server && props.type))
+export interface MetingJsProps {
+  /**
+   * song id / playlist id / album id / search keyword
+   * @example 308168565
+   */
+  id: string
+  /**
+   * music platform
+   */
+  server: 'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'
+  type: 'song' | 'playlist' | 'album' | 'search' | 'artist'
+}
 
-if (loadAplayer.value)
-  useAplayer()
+useAplayer()
 </script>
 
 <template>
+  <!-- eslint-disable-next-line vue/component-name-in-template-casing -->
   <meting-js
-    v-if="loadAplayer"
     v-bind="props"
     :fixed="true"
   />
 </template>
-
-<style lang="scss" scoped></style>

packages/valaxy-addon-meting/README.md

@@ -1,20 +1,31 @@
 # valaxy-addon-meting
 
-Global meting music player
+Global music player based on [APlayer](https://github.com/DIYgod/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).
+
+- [ ] Release
+- [ ] Components `MetingJS`
+- [ ] `addonMeting`
 
 ```ts
 import { defineConfig } from 'valaxy'
+import { addonMeting } from 'valaxy-addon-meting'
+
 export default defineConfig({
   addons: [
-    ['valaxy-addon-meting', {
+    addonMeting({
+      global: true,
       props: {
         /** @see https://github.com/metowolf/MetingJS */
       }
-    }]
+    })
   ]
 })
 ```
 
 ## props
 
-you can [meting#options](https://github.com/metowolf/MetingJS#option)
+You can [meting#options](https://github.com/metowolf/MetingJS#option)
+
+## FAQ
+
+- `import 'meting/dist/Meting.min.js'` is not working, only cdn work

packages/valaxy-addon-meting/client/index.ts

@@ -0,0 +1,28 @@
+import { useScriptTag } from '@vueuse/core'
+import { useHead } from '@unhead/vue'
+import { computed } from 'vue'
+import { useSiteConfig } from 'valaxy'
+
+/**
+ * use MetingJS and Aplayer
+ * @see https://github.com/MoePlayer/APlayer
+ * @see https://github.com/metowolf/MetingJS
+ */
+export function useAplayer() {
+  const siteConfig = useSiteConfig()
+  const cdnPrefix = computed(() => siteConfig.value.cdn.prefix)
+
+  useHead({
+    link: [
+      {
+        rel: 'stylesheet',
+        href: `${cdnPrefix.value}aplayer/dist/APlayer.min.css`,
+      },
+    ],
+  })
+
+  // load meting after aplayer
+  useScriptTag(`${cdnPrefix.value}aplayer/dist/APlayer.min.js`, () => {
+    useScriptTag(`${cdnPrefix.value}meting@2/dist/Meting.min.js`)
+  })
+}

packages/valaxy-addon-meting/components/MetingJs.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { useAplayer } from '../client'
+
+const props = withDefaults(defineProps<{
+  [key: string]: any
+} & Partial<MetingJsProps>>(), {
+  id: '308168565',
+  server: 'netease',
+  type: 'playlist',
+})
+
+export interface MetingJsProps {
+  /**
+   * song id / playlist id / album id / search keyword
+   * @example 308168565
+   */
+  id: string
+  /**
+   * music platform
+   */
+  server: 'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'
+  type: 'song' | 'playlist' | 'album' | 'search' | 'artist'
+}
+
+useAplayer()
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/component-name-in-template-casing -->
+  <meting-js v-bind="props" />
+</template>

packages/valaxy-addon-meting/index.ts

@@ -0,0 +1 @@
+export * from './node'

packages/valaxy-addon-meting/node/index.ts

@@ -0,0 +1,13 @@
+import { defineValaxyAddon } from 'valaxy'
+import pkg from '../package.json'
+
+export interface MetingOptions {
+  global: boolean
+}
+
+export const addonMeting = defineValaxyAddon<MetingOptions>(options => ({
+  name: pkg.name,
+  enable: true,
+  global: options?.global ?? false,
+  options,
+}))

packages/valaxy-addon-meting/package.json

@@ -6,6 +6,5 @@
   "keywords": [
     "valaxy",
     "addon"
-  ],
-  "dependencies": {}
+  ]
 }

packages/valaxy/client/composables/widgets/aplayer.ts

@@ -5,6 +5,7 @@ import { useSiteConfig } from '../..'
 
 /**
  * use MetingJS and Aplayer
+ * @deprecated will migrate to valaxy-addon-meting
  * @see https://github.com/MoePlayer/APlayer
  * @see https://github.com/metowolf/MetingJS
  */

packages/valaxy/node/plugins/extendConfig.ts

@@ -52,6 +52,10 @@ const EXCLUDE = [
   'vue',
   'vue-demi',
 
+  // addon, todo add externals for addon
+  // main field error
+  'meting',
+
   // internal
   'valaxy',
   '/@valaxyjs/config',
@@ -178,11 +182,19 @@ export function getAlias(options: ResolvedValaxyOptions): AliasOptions {
       find: `${addon.name}/client/`,
       replacement: `${toAtFS(`${resolve(addon.root)}`)}/client/`,
     })
+    alias.push({
+      find: `${addon.name}/App.vue`,
+      replacement: `${toAtFS(resolve(addon.root))}/App.vue`,
+    })
     alias.push({
       find: addon.name,
       replacement: `${toAtFS(resolve(addon.root))}/client/index.ts`,
     })
   })
+  // do not need it
+  // alias.push(...[
+  //   { find: /^valaxy-addon-(.*)$/, replacement: toAtFS(resolve(options.themeRoot, '../valaxy-addon-$1/client/index.ts')) },
+  // ])
 
   // adapt for not exist addon
   alias.push({
@@ -190,8 +202,5 @@ export function getAlias(options: ResolvedValaxyOptions): AliasOptions {
     replacement: toAtFS(resolve(options.clientRoot, './addons/index.ts')),
   })
 
-  // alias.push(...[
-  //   { find: /^valaxy-addon-(.*)$/, replacement: toAtFS(resolve(options.themeRoot, '../valaxy-addon-$1/client/index.ts')) },
-  // ])
   return alias
 }

packages/valaxy/node/plugins/preset.ts

@@ -63,6 +63,7 @@ export async function ViteValaxyPlugins(
     'semantics',
 
     // meting
+    // will migrate to valaxy-addon-meting
     'meting-js',
   ])
 

pnpm-lock.yaml

@@ -143,6 +143,9 @@ importers:
       valaxy-addon-lightgallery:
         specifier: workspace:*
         version: link:../../packages/valaxy-addon-lightgallery
+      valaxy-addon-meting:
+        specifier: workspace:*
+        version: link:../../packages/valaxy-addon-meting
       valaxy-addon-twikoo:
         specifier: workspace:*
         version: link:../../packages/valaxy-addon-twikoo
@@ -485,6 +488,15 @@ importers:
         specifier: ^2.7.2
         version: 2.7.2
 
+  packages/valaxy-addon-meting:
+    dependencies:
+      aplayer:
+        specifier: '1.2'
+        version: 1.2.14
+      meting:
+        specifier: ^2.0.1
+        version: 2.0.1
+
   packages/valaxy-addon-test: {}
 
   packages/valaxy-addon-twikoo:
@@ -4122,6 +4134,10 @@ packages:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  /aplayer@1.2.14:
+    resolution: {integrity: sha512-65fc8vUHcpZ/TfmQbuD7UHNpp4zgkE0KAsUypqvqouRrDaKE8bOE7DanMxS6xpqpm2fXKuWgkbVZbF1Ssx4QTQ==}
+    dev: false
+
   /appdata-path@1.0.0:
     resolution: {integrity: sha512-ZbH3ezXfnT/YE3NdqduIt4lBV+H0ybvA2Qx3K76gIjQvh8gROpDFdDLpx6B1QJtW7zxisCbpTlCLhKqoR8cDBw==}
     dev: true
@@ -5505,7 +5521,7 @@ packages:
   /eslint-import-resolver-node@0.3.9:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
     dependencies:
-      debug: 3.2.7(supports-color@5.5.0)
+      debug: 3.2.7(supports-color@8.1.1)
       is-core-module: 2.13.1
       resolve: 1.22.8
     transitivePeerDependencies:
@@ -5534,7 +5550,7 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/parser': 6.9.0(eslint@8.52.0)(typescript@5.2.2)
-      debug: 3.2.7(supports-color@5.5.0)
+      debug: 3.2.7(supports-color@8.1.1)
       eslint: 8.52.0
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
@@ -5586,7 +5602,7 @@ packages:
     peerDependencies:
       eslint: ^7.2.0 || ^8
     dependencies:
-      debug: 3.2.7(supports-color@5.5.0)
+      debug: 3.2.7(supports-color@8.1.1)
       doctrine: 2.1.0
       eslint: 8.52.0
       eslint-import-resolver-node: 0.3.9
@@ -7734,6 +7750,10 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /meting@2.0.1:
+    resolution: {integrity: sha512-qcn85I7btbtfDLZvcZdMa+HrpCXm2E3sRB3BRBVYWJvZG49uQFhIGK6I53c/EEcyumMdU0ekRfTlD4/FG1/48A==}
+    dev: false
+
   /micromark@2.11.4:
     resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
     dependencies: