make api preference dynamic

Author: yyx990803

src/.vitepress/inlined-scripts/restorePreference.js

@@ -5,6 +5,6 @@
       document.documentElement.classList.add(cls)
     }
   }
-  restore('vue-docs-api-preference', 'prefer-composition')
-  restore('vue-docs-format-preference', 'prefer-sfc')
+  restore('vue-docs-prefer-composition', 'prefer-composition')
+  restore('vue-docs-prefer-sfc', 'prefer-sfc')
 })()

src/.vitepress/theme/components/PreferenceSwitch.vue

@@ -1,32 +1,42 @@
 <script setup lang="ts">
 import { VTSwitch, VTIconChevronDown, VTIconChevronUp } from '@vue/theme'
 import { useRoute } from 'vitepress'
-import { ref, computed } from 'vue'
+import { ref, computed, Ref } from 'vue'
+import {
+  preferCompositionKey,
+  preferComposition,
+  preferSFCKey,
+  preferSFC
+} from './preferences'
 
 const route = useRoute()
 const show = computed(() => /^\/(guide|tutorial|examples)\//.test(route.path))
 const isOpen = ref(false)
 
 const toggleOpen = () => (isOpen.value = !isOpen.value)
 const toggleCompositionAPI = useToggleFn(
-  'vue-docs-api-preference',
+  preferCompositionKey,
+  preferComposition,
   'prefer-composition'
 )
-const toggleSFC = useToggleFn('vue-docs-format-preference', 'prefer-sfc')
+const toggleSFC = useToggleFn(preferSFCKey, preferSFC, 'prefer-sfc')
 
-function useToggleFn(storageKey: string, className: string) {
+function useToggleFn(
+  storageKey: string,
+  state: Ref<boolean>,
+  className: string
+) {
   if (typeof localStorage === 'undefined') {
     return () => {}
   }
-  let enabled = JSON.parse(localStorage.getItem(storageKey) || 'false')
   const classList = document.documentElement.classList
-  return (value = !enabled) => {
-    if ((enabled = value)) {
+  return (value = !state.value) => {
+    if ((state.value = value)) {
       classList.add(className)
     } else {
       classList.remove(className)
     }
-    localStorage.setItem(storageKey, enabled)
+    localStorage.setItem(storageKey, String(state.value))
   }
 }
 </script>

src/.vitepress/theme/components/preferences.js

@@ -0,0 +1,11 @@
+import { ref } from 'vue'
+
+const hasStorage = typeof localStorage !== 'undefined'
+const get = (key) =>
+  hasStorage ? JSON.parse(localStorage.getItem(key) || 'false') : false
+
+export const preferCompositionKey = 'vue-docs-prefer-composition'
+export const preferComposition = ref(get(preferCompositionKey))
+
+export const preferSFCKey = 'vue-docs-prefer-sfc'
+export const preferSFC = ref(get(preferSFCKey))

src/.vitepress/theme/index.js

@@ -1,6 +1,7 @@
 import { h } from 'vue'
 import { VPTheme, VTBadge } from '@vue/theme'
 import PreferenceSwitch from './components/PreferenceSwitch.vue'
+import { preferComposition, preferSFC } from './components/preferences'
 import './styles/inline-demo.css'
 import './styles/options-boxes.css'
 
@@ -13,5 +14,7 @@ export default {
   },
   enhanceApp({ app }) {
     app.component('Badge', VTBadge)
+    app.provide('prefer-composition', preferComposition)
+    app.provide('prefer-sfc', preferSFC)
   }
 }

src/examples/ExampleRepl.vue

@@ -1,27 +1,27 @@
-<script setup>
+<script setup lang="ts">
 import { Repl, ReplStore } from '@vue/repl'
 import '@vue/repl/style.css'
 import data from './data.json'
+import { inject, watch } from 'vue'
 
 const store = new ReplStore()
 
-// TODO make dynamic
-const preference = document.documentElement.classList.contains(
-  'prefer-composition'
-)
-  ? 'composition'
-  : 'options'
+const preferComposition = inject('prefer-composition')
+const preferSFC = inject('prefer-sfc')
 
 function updateExample() {
   const hash = ___location.hash.slice(1)
   if (data.hasOwnProperty(hash)) {
-    store.setFiles(data[hash][preference])
+    store.setFiles(
+      data[hash][preferComposition.value ? 'composition' : 'options']
+    )
   } else if (!hash) {
     ___location.hash = '#markdown'
   }
 }
 
 window.addEventListener('hashchange', updateExample)
+watch(preferComposition, updateExample)
 updateExample()
 </script>