refactor: use inject options

src/client/components/GlobalSocialShare.ts

@@ -1,20 +1,17 @@
 import { computed, defineComponent, h, onMounted, onUnmounted, ref } from 'vue'
 import { usePageFrontmatter } from 'vuepress/client'
-import { socialShareOptions } from '@vuepress/plugin-social-share/options'
 import { SVG_ICON_CLOSE, SVG_ICON_SHARE } from '../utils.js'
+import { useSocialShareOptions } from '../helpers/index.js'
 import { SocialShare } from './SocialShare.js'
-import type {
-  SocialShareFrontmatter,
-  SocialSharePluginOptionsWithDefaults,
-} from '../../shared/index.js'
+import type { SocialShareFrontmatter } from '../../shared/index.js'
 
 export const GlobalSocialShare = defineComponent({
   name: 'GlobalSocialShare',
 
   inheritAttrs: true,
 
   setup() {
-    const options = socialShareOptions as SocialSharePluginOptionsWithDefaults
+    const options = useSocialShareOptions()
     const isActive = ref(false)
     const globalRef = ref<HTMLElement>()
     const frontmatter = usePageFrontmatter<SocialShareFrontmatter>()
@@ -62,18 +59,7 @@ export const GlobalSocialShare = defineComponent({
         },
         [renderButtonIcon()],
       )
-    const renderSocialShare = () =>
-      isActive.value
-        ? h(SocialShare, {
-            networks: options.networks,
-            isPlain: options.isPlain,
-            twitterUser: options.twitterUser,
-            fallbackImage: options.fallbackImage,
-            autoQuote: options.autoQuote,
-            qrcodeOptions: options.qrcodeOptions,
-            networksData: options.networksData,
-          })
-        : null
+    const renderSocialShare = () => (isActive.value ? h(SocialShare) : null)
 
     return () =>
       visible.value

src/client/components/SocialShare.ts

@@ -1,13 +1,13 @@
 import { computed, defineComponent, h, onMounted, reactive, ref } from 'vue'
 import { usePageFrontmatter, withBase } from 'vuepress/client'
 import { getMetaContentByName, inBrowser, isExternalUrl } from '../utils.js'
+import { useSocialShareOptions } from '../helpers/index.js'
 import { SocialShareNetwork } from './SocialShareNetwork.js'
 import type {
   SocialShareNetwork as Network,
-  QRCodeOptions,
   SocialShareFrontmatter,
-  SocialShareNetworkData,
   SocialShareNetworkItem,
+  SocialShareQRCodeOptions,
 } from '../../shared/index.js'
 import type { PropType } from 'vue'
 
@@ -19,55 +19,28 @@ export const SocialShare = defineComponent({
   props: {
     networks: {
       type: Array as PropType<string[]>,
-      default: () => ['twitter', 'facebook', 'reddit'],
     },
 
     isPlain: {
       type: Boolean,
-      default: false,
     },
 
     tags: {
       type: Array as PropType<string[]>,
       default: () => [],
     },
-
-    twitterUser: {
-      type: String,
-    },
-
-    fallbackImage: {
-      type: String,
-    },
-
-    autoQuote: {
-      type: Boolean,
-      default: true,
-    },
-
-    hideWhenPrint: {
-      type: Boolean,
-      default: false,
-    },
-
-    qrcodeOptions: {
-      type: Object as PropType<QRCodeOptions>,
-      default: () => ({}),
-    },
-
-    networksData: {
-      type: Object as PropType<SocialShareNetworkData>,
-      default: () => ({}),
-    },
   },
 
   // eslint-disable-next-line max-lines-per-function
   setup(props) {
-    const networks = computed(() => [...new Set(props.networks)])
+    const options = useSocialShareOptions()
 
+    const networks = computed(() => [
+      ...new Set(props.networks ?? options.networks ?? ['twitter', 'facebook', 'reddit']),
+    ])
     const networkList = computed(() =>
-      Object.keys(props.networksData)
-        .map(name => ({ name, ...props.networksData[name] }))
+      Object.keys(options.networksData)
+        .map(name => ({ name, ...options.networksData[name] }))
         .filter(network => networks.value.includes(network.name))
         .sort(
           (prev, next) => networks.value.indexOf(prev.name) - networks.value.indexOf(next.name),
@@ -140,7 +113,7 @@ export const SocialShare = defineComponent({
         frontmatter.value.$shareImage ??
         frontmatter.value.shareImage ??
         frontmatter.value.image ??
-        props.fallbackImage
+        options.fallbackImage
 
       if (!mediaURL) return ''
       if (isExternalUrl(mediaURL)) return mediaURL
@@ -151,7 +124,7 @@ export const SocialShare = defineComponent({
       () =>
         frontmatter.value.$shareQuote ??
         frontmatter.value.shareQuote ??
-        (props.autoQuote ? description.value : ''),
+        (options.autoQuote ? description.value : ''),
     )
     const hashtags = computed(() => {
       const tags =
@@ -169,16 +142,16 @@ export const SocialShare = defineComponent({
       }
       return ''
     })
-    const qrcodeRenderOptions = computed<QRCodeOptions>(() => {
-      const defaultOptions: QRCodeOptions = {
+    const qrcodeRenderOptions = computed<SocialShareQRCodeOptions>(() => {
+      const defaultOptions: SocialShareQRCodeOptions = {
         errorCorrectionLevel: 'H',
         width: 250,
         scale: 1,
         margin: 1.5,
       }
       return {
         ...defaultOptions,
-        ...props.qrcodeOptions,
+        ...options.qrcodeOptions,
       }
     })
 
@@ -254,10 +227,10 @@ export const SocialShare = defineComponent({
         .replace(/@description/g, encodeURIComponent(description.value))
         .replace(/@quote/g, encodeURIComponent(quote.value))
         .replace(/@hashtags/g, generateHashTags(hashtags.value, name))
-        .replace(/@twitteruser/g, props.twitterUser ? `&via=${props.twitterUser}` : '')
+        .replace(/@twitteruser/g, options.twitterUser ? `&via=${options.twitterUser}` : '')
     }
     const onShare = (name: string) => {
-      const network = props.networksData[name]
+      const network = options.networksData[name]
       const shareURL = createShareURL(name, network)
       switch (network.type) {
         case 'popup':
@@ -283,7 +256,7 @@ export const SocialShare = defineComponent({
         networks.map(network =>
           h(SocialShareNetwork, {
             network,
-            isPlain: props.isPlain,
+            isPlain: props.isPlain || options.isPlain,
             shareURL: createShareURL(network.name, network),
             onShare: (name: string) => onShare(name),
           }),
@@ -294,7 +267,7 @@ export const SocialShare = defineComponent({
       visible.value
         ? h(
             'div',
-            { class: ['social-share', props.hideWhenPrint && 'social-share-hide-when-print'] },
+            { class: ['social-share', options.hideWhenPrint && 'social-share-hide-when-print'] },
             [renderNetworkList(networkList.value)],
           )
         : null

src/client/components/SocialShareNetwork.ts

@@ -38,6 +38,7 @@ export const SocialShareNetwork = defineComponent({
 
   setup(props, ctx) {
     const isSvgIcon = computed(() => isSVG(props.network.icon))
+
     const renderShareIcon = (network: SocialShareNetworkItem) =>
       isSvgIcon.value
         ? h('span', {

src/client/config.ts

@@ -1,8 +1,7 @@
-import { h } from 'vue'
 import { defineClientConfig } from 'vuepress/client'
 import { socialShareOptions } from '@vuepress/plugin-social-share/options'
+import { injectSocialShareOptions } from './helpers/index.js'
 import { GlobalSocialShare, SocialShare } from './components/index.js'
-import type { PropType } from 'vue'
 import type { ClientConfig } from 'vuepress/client'
 
 declare const __SOCIAL_SHARE_COMPONENT_NAME__: string
@@ -16,31 +15,9 @@ if (!__SOCIAL_SHARE_USE_CUSTOM_STYLE__) {
 
 export default defineClientConfig({
   enhance({ app }) {
-    app.component(__SOCIAL_SHARE_COMPONENT_NAME__, {
-      props: {
-        tags: {
-          type: Array as PropType<string[]>,
-        },
+    injectSocialShareOptions(app, options)
 
-        networks: {
-          type: Array as PropType<string[]>,
-        },
-
-        isPlain: {
-          type: Boolean,
-        },
-      },
-
-      setup(props: any) {
-        return () =>
-          h(SocialShare, {
-            ...options,
-            tags: props.tags,
-            networks: props.networks ?? options.networks,
-            isPlain: props.isPlain ?? options.isPlain,
-          })
-      },
-    })
+    app.component(__SOCIAL_SHARE_COMPONENT_NAME__, SocialShare)
   },
 
   rootComponents: options.noGlobalSocialShare ? [] : [GlobalSocialShare],

src/client/helpers/index.ts

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

src/client/helpers/social-share.ts

@@ -0,0 +1,16 @@
+import { inject } from 'vue'
+import type { App } from 'vue'
+import type { SocialSharePluginOptionsWithDefaults } from '../../shared/index.js'
+
+export const socialShareOptionsSymbol = Symbol('social-share-options')
+
+export const injectSocialShareOptions = (
+  app: App,
+  options: SocialSharePluginOptionsWithDefaults,
+) => {
+  app.provide(socialShareOptionsSymbol, options)
+}
+
+export const useSocialShareOptions = () => {
+  return inject<SocialSharePluginOptionsWithDefaults>(socialShareOptionsSymbol)!
+}

src/client/index.ts

@@ -1,3 +1,4 @@
 export * from './utils.js'
+export * from './helpers/index.js'
 export * from './components/SocialShare.js'
 export * from './components/SocialShareNetwork.js'

src/shared/types.ts

@@ -3,21 +3,22 @@ import type { QRCodeToDataURLOptions } from 'qrcode'
 export type SocialShareType = 'popup' | 'qrcode' | 'direct'
 
 export interface SocialShareNetwork {
-  sharer?: string
-  icon: string
   type: SocialShareType
+  icon: string
+  sharer?: string
   color?: string
 }
 
 export type SocialShareNetworkItem = SocialShareNetwork & { name: string }
 
 export type SocialShareNetworkData = Record<string, SocialShareNetwork>
 
-export type QRCodeOptions = QRCodeToDataURLOptions
+export type SocialShareQRCodeOptions = QRCodeToDataURLOptions
 
 export interface SocialShareFrontmatter {
   noSocialShare?: boolean
   noGlobalSocialShare?: boolean
+
   // share meta
   shareUrl?: string
   $shareUrl?: string
@@ -45,15 +46,16 @@ export interface SocialShareFrontmatter {
 }
 
 export interface SocialSharePluginOptions {
+  componentName?: string
+  useCustomStyle?: boolean
+
   networks?: string[]
   twitterUser?: string
   fallbackImage?: string
   isPlain?: boolean
   autoQuote?: boolean
-  componentName?: string
-  useCustomStyle?: boolean
   noGlobalSocialShare?: boolean
-  qrcodeOptions?: QRCodeToDataURLOptions
+  qrcodeOptions?: SocialShareQRCodeOptions
   extendsNetworks?: Record<string, SocialShareNetwork>
   hideWhenPrint?: boolean
 }