feat: refactor socialShareOptions resolve

docs/package.json

@@ -11,7 +11,7 @@
     "@vuepress/bundler-vite": "^2.0.0-rc.19",
     "@vuepress/plugin-shiki": "^2.0.0-rc.68",
     "@vuepress/theme-default": "^2.0.0-rc.68",
-    "sass-embedded": "^1.83.0",
+    "sass-embedded": "^1.83.1",
     "vuepress": "^2.0.0-rc.19",
     "vuepress-plugin-social-share": "workspace:*"
   }

src/client/components/SocialShare.ts

@@ -35,12 +35,13 @@ export const SocialShare = defineComponent({
   setup(props) {
     const options = useSocialShareOptions()
 
-    const networks = computed(() => [
-      ...new Set(props.networks ?? options.networks ?? ['twitter', 'facebook', 'reddit']),
-    ])
+    const defaultEnabledNetworks = options.networksData
+      .filter(item => item.default)
+      .map(item => item.name)
+
+    const networks = computed(() => [...new Set(props.networks ?? defaultEnabledNetworks)])
     const networkList = computed(() =>
-      Object.keys(options.networksData)
-        .map(name => ({ name, ...options.networksData[name] }))
+      options.networksData
         .filter(network => networks.value.includes(network.name))
         .sort(
           (prev, next) => networks.value.indexOf(prev.name) - networks.value.indexOf(next.name),
@@ -230,7 +231,7 @@ export const SocialShare = defineComponent({
         .replace(/@twitteruser/g, options.twitterUser ? `&via=${options.twitterUser}` : '')
     }
     const onShare = (name: string) => {
-      const network = options.networksData[name]
+      const network = options.networksData.find(item => item.name === name)!
       const shareURL = createShareURL(name, network)
       switch (network.type) {
         case 'popup':

src/node/helpers.ts

@@ -1,22 +1,48 @@
 import { Logger } from '@vuepress/helper'
 import deepmerge from 'deepmerge'
+import { isString } from '../shared/index.js'
 import { BUILT_IN_NETWORKS, PLUGIN_NAME } from './constants.js'
-import type { SocialSharePluginOptions } from '../shared/index.js'
+import type { SocialShareNetworkWithName, SocialSharePluginOptions } from '../shared/index.js'
 
 export const logger = new Logger(PLUGIN_NAME)
 
-/**
- * Merge extendsNetworks with built-in networks
- *
- * @param options - plugin options
- * @returns merged networks data
- */
-export const mergeNetworksData = (options: SocialSharePluginOptions) =>
-  deepmerge(BUILT_IN_NETWORKS, options.extendsNetworks || {})
-
 /**
  * Resolve all networks data
  */
-export function resolveNetworksData(options: SocialSharePluginOptions = {}) {
-  console.log({ options })
+export function resolveNetworksData(
+  networks: SocialSharePluginOptions['networks'] = [],
+  extendsNetworks: SocialSharePluginOptions['extendsNetworks'] = {},
+) {
+  const mergedNetworks = deepmerge(BUILT_IN_NETWORKS, extendsNetworks)
+
+  const mergedNetworkNames = new Set<string>(Object.keys(mergedNetworks))
+  const enabledNetworkNames = new Set<string>()
+
+  const networksData: SocialShareNetworkWithName[] = []
+
+  for (const network of networks) {
+    if (isString(network)) {
+      enabledNetworkNames.add(network)
+    } else {
+      if (network.default) {
+        enabledNetworkNames.add(network.name)
+      }
+      // Should override socialShareNetwork
+      if (mergedNetworkNames.has(network.name)) {
+        mergedNetworks[network.name] = deepmerge(mergedNetworks[network.name], network)
+      } else {
+        mergedNetworks[network.name] = network
+      }
+    }
+  }
+
+  Object.entries(mergedNetworks).forEach(([name, network]) => {
+    networksData.push({
+      ...network,
+      name,
+      default: enabledNetworkNames.has(name),
+    })
+  })
+
+  return networksData
 }

src/node/socialSharePlugin.ts

@@ -1,9 +1,12 @@
 import { addViteSsrNoExternal } from '@vuepress/helper'
 import { getDirname, path } from 'vuepress/utils'
 import { PLUGIN_NAME } from './constants.js'
-import { logger, mergeNetworksData } from './helpers.js'
+import { logger, resolveNetworksData } from './helpers.js'
 import type { PluginFunction } from 'vuepress/core'
-import type { SocialSharePluginOptions } from '../shared/index.js'
+import type {
+  SocialSharePluginOptions,
+  SocialSharePluginOptionsWithDefaults,
+} from '../shared/index.js'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -13,6 +16,8 @@ export const socialSharePlugin =
     const {
       componentName = 'SocialShare',
       useCustomStyle = false,
+      networks = ['twitter', 'facebook', 'reddit'],
+      extendsNetworks = {},
       // Options for client
       ...clientOptions
     } = options
@@ -36,8 +41,11 @@ export const socialSharePlugin =
       },
 
       onPrepared(app) {
-        const networksData = mergeNetworksData(clientOptions)
-        const socialShareOptions = { ...clientOptions, networksData }
+        const networksData = resolveNetworksData(networks, extendsNetworks)
+        const socialShareOptions: SocialSharePluginOptionsWithDefaults = {
+          ...clientOptions,
+          networksData,
+        }
         const content = `export const socialShareOptions = ${JSON.stringify(socialShareOptions)}`
         app.writeTemp('social-share/options.js', content)
       },

src/shared/plugin.ts

@@ -124,9 +124,12 @@ export interface SocialSharePluginOptions {
 }
 
 /**
- * Plugin options with networksData
+ * Client options with networksData
  */
 export interface SocialSharePluginOptionsWithDefaults
-  extends Omit<SocialSharePluginOptions, 'componentName' | 'useCustomStyle'> {
-  networksData: Record<string, SocialShareNetwork>
+  extends Omit<
+    SocialSharePluginOptions,
+    'componentName' | 'networks' | 'extendsNetworks' | 'useCustomStyle'
+  > {
+  networksData: SocialShareNetworkWithName[]
 }