feat(plugin-rtl): provide composables

plugins/development/plugin-rtl/package.json

@@ -26,6 +26,7 @@
   "type": "module",
   "exports": {
     ".": "./lib/node/index.js",
+    "./client": "./lib/client/index.js",
     "./package.json": "./package.json"
   },
   "main": "./lib/node/index.js",
@@ -38,6 +39,7 @@
     "clean": "rimraf --glob ./lib ./*.tsbuildinfo"
   },
   "dependencies": {
+    "@vuepress/helper": "workspace:*",
     "vue": "^3.5.10"
   },
   "peerDependencies": {

plugins/development/plugin-rtl/src/client/composables/index.ts

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

plugins/development/plugin-rtl/src/client/composables/useRtl.ts

@@ -0,0 +1,51 @@
+import { entries } from '@vuepress/helper'
+import { onMounted, watch } from 'vue'
+import { useRouteLocale } from 'vuepress/client'
+import { getElement } from '../utils/index.js'
+
+/**
+ *
+ * @param rtlLocalePaths rtl locale paths
+ * @param selectorOptions rtl selector options
+ */
+export const useRtl = (
+  rtlLocalePaths: string[],
+  selectorOptions?: Record<string, Record<string, string>>,
+): void => {
+  const routeLocale = useRouteLocale()
+
+  const toggleRTL = (localePath: string): void => {
+    if (rtlLocalePaths.includes(localePath)) {
+      entries(
+        selectorOptions ?? {
+          html: { dir: 'rtl' },
+        },
+      ).forEach(([selector, attrs = {}]) => {
+        const element = getElement(selector)
+
+        if (element)
+          entries(attrs).forEach(([attr, value]) => {
+            if (attr === 'class') element.classList.add(value)
+            else element.setAttribute(attr, value)
+          })
+      })
+      document.documentElement.style.setProperty('direction', 'rtl')
+    } else {
+      entries(rtlLocalePaths).forEach(([selector, attrs = {}]) => {
+        const element = getElement(selector)
+
+        if (element)
+          entries(attrs).forEach(([attr, value]) => {
+            if (attr === 'class') element.classList.remove(value)
+            else element.removeAttribute(attr)
+          })
+      })
+
+      document.documentElement.style.removeProperty('direction')
+    }
+  }
+
+  onMounted(() => {
+    watch(routeLocale, toggleRTL, { immediate: true })
+  })
+}

plugins/development/plugin-rtl/src/client/config.ts

@@ -1,51 +1,11 @@
-import { onMounted, watch } from 'vue'
-import { defineClientConfig, useRouteLocale } from 'vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
+import { useRtl } from './composables/index.js'
 
 declare const __RTL_LOCALES__: string[]
 declare const __RTL_SELECTOR__: Record<string, Record<string, string>>
 
-const { entries } = Object
-
-const getElement = (selector: string): HTMLElement | null =>
-  selector === 'html'
-    ? document.documentElement
-    : selector === 'body'
-      ? document.body
-      : document.querySelector(selector)
-
 export default defineClientConfig({
   setup() {
-    const routeLocale = useRouteLocale()
-
-    const toggleRTL = (localePath: string): void => {
-      if (__RTL_LOCALES__.includes(localePath)) {
-        entries(__RTL_SELECTOR__).forEach(([selector, attrs = {}]) => {
-          const element = getElement(selector)
-
-          if (element)
-            entries(attrs).forEach(([attr, value]) => {
-              if (attr === 'class') element.classList.add(value)
-              else element.setAttribute(attr, value)
-            })
-        })
-        document.documentElement.style.setProperty('direction', 'rtl')
-      } else {
-        entries(__RTL_LOCALES__).forEach(([selector, attrs = {}]) => {
-          const element = getElement(selector)
-
-          if (element)
-            entries(attrs).forEach(([attr, value]) => {
-              if (attr === 'class') element.classList.remove(value)
-              else element.removeAttribute(attr)
-            })
-        })
-
-        document.documentElement.style.removeProperty('direction')
-      }
-    }
-
-    onMounted(() => {
-      watch(routeLocale, toggleRTL, { immediate: true })
-    })
+    useRtl(__RTL_LOCALES__, __RTL_SELECTOR__)
   },
 })

plugins/development/plugin-rtl/src/client/utils/index.ts

@@ -0,0 +1,6 @@
+export const getElement = (selector: string): HTMLElement | null =>
+  selector === 'html'
+    ? document.documentElement
+    : selector === 'body'
+      ? document.body
+      : document.querySelector(selector)