refactor: migrate default theme to use script-setup (#137)

Co-authored-by: Kia King Ishii <[email protected]>

package.json

@@ -62,8 +62,8 @@
     "url": "https://github.com/vuejs/vitepress/issues"
   },
   "dependencies": {
-    "@vue/compiler-sfc": "^3.0.2",
-    "@vue/server-renderer": "^3.0.2",
+    "@vue/compiler-sfc": "^3.0.3",
+    "@vue/server-renderer": "^3.0.3",
     "chalk": "^4.1.0",
     "debug": "^4.1.1",
     "diacritics": "^1.3.0",
@@ -82,8 +82,8 @@
     "prismjs": "^1.20.0",
     "rollup": "^2.33.3",
     "slash": "^3.0.0",
-    "vite": "^1.0.0-rc.9",
-    "vue": "^3.0.2"
+    "vite": "^1.0.0-rc.13",
+    "vue": "^3.0.3"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.1",

src/client/theme-default/Layout.vue

@@ -45,7 +45,7 @@
   <Debug />
 </template>
 
-<script>
+<script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import NavBar from './components/NavBar.vue'
 import Home from './components/Home.vue'
@@ -54,76 +54,56 @@ import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
 import { useRoute, useSiteData, useSiteDataByRoute } from 'vitepress'
 
-export default {
-  components: {
-    Home,
-    NavBar,
-    ToggleSideBarButton,
-    SideBar,
-    Page
-  },
+const route = useRoute()
+const siteData = useSiteData()
+const siteRouteData = useSiteDataByRoute()
 
-  setup() {
-    const route = useRoute()
-    const siteData = useSiteData()
-    const siteRouteData = useSiteDataByRoute()
+const openSideBar = ref(false)
+const enableHome = computed(() => !!route.data.frontmatter.home)
 
-    const openSideBar = ref(false)
-    const enableHome = computed(() => !!route.data.frontmatter.home)
-
-    const showNavbar = computed(() => {
-      const { themeConfig } = siteRouteData.value
-      const { frontmatter } = route.data
-      if (
-        frontmatter.navbar === false
-        || themeConfig.navbar === false) {
-        return false
-      }
-      return (
-        siteData.value.title
-        || themeConfig.logo
-        || themeConfig.repo
-        || themeConfig.nav
-      )
-    })
-
-    const showSidebar = computed(() => {
-      const { frontmatter } = route.data
-      const { themeConfig } = siteRouteData.value
-      return (
-        !frontmatter.home
-        && frontmatter.sidebar !== false
-        && ((typeof themeConfig.sidebar === 'object') && (Object.keys(themeConfig.sidebar).length != 0)
-        || (Array.isArray(themeConfig.sidebar) && themeConfig.sidebar.length != 0))
-      )
-    })
+const showNavbar = computed(() => {
+  const { themeConfig } = siteRouteData.value
+  const { frontmatter } = route.data
+  if (frontmatter.navbar === false || themeConfig.navbar === false) {
+    return false
+  }
+  return (
+    siteData.value.title ||
+    themeConfig.logo ||
+    themeConfig.repo ||
+    themeConfig.nav
+  )
+})
 
-    const pageClasses = computed(() => {
-      return [{
-        'no-navbar': !showNavbar.value,
-        'sidebar-open': openSideBar.value,
-        'no-sidebar': !showSidebar.value
-      }]
-    })
+const showSidebar = computed(() => {
+  const { frontmatter } = route.data
+  const { themeConfig } = siteRouteData.value
+  return (
+    !frontmatter.home &&
+    frontmatter.sidebar !== false &&
+    ((typeof themeConfig.sidebar === 'object' &&
+      Object.keys(themeConfig.sidebar).length != 0) ||
+      (Array.isArray(themeConfig.sidebar) && themeConfig.sidebar.length != 0))
+  )
+})
 
-    const toggleSidebar = (to) => {
-      openSideBar.value = typeof to === 'boolean' ? to : !openSideBar.value
+const pageClasses = computed(() => {
+  return [
+    {
+      'no-navbar': !showNavbar.value,
+      'sidebar-open': openSideBar.value,
+      'no-sidebar': !showSidebar.value
     }
+  ]
+})
 
-    const hideSidebar = toggleSidebar.bind(null, false)
-    // close the sidebar when navigating to a different location
-    watch(route, hideSidebar)
-    // TODO: route only changes when the pathname changes
-    // listening to hashchange does nothing because it's prevented in router
-
-    return {
-      showNavbar,
-      showSidebar,
-      openSideBar,
-      pageClasses,
-      enableHome,
-      toggleSidebar
-    }
-  }
+const toggleSidebar = (to) => {
+  openSideBar.value = typeof to === 'boolean' ? to : !openSideBar.value
 }
+
+const hideSidebar = toggleSidebar.bind(null, false)
+// close the sidebar when navigating to a different location
+watch(route, hideSidebar)
+// TODO: route only changes when the pathname changes
+// listening to hashchange does nothing because it's prevented in router
 </script>

src/client/theme-default/NotFound.vue

@@ -2,27 +2,19 @@
   <div class="theme">
     <h1>404</h1>
     <blockquote>{{ getMsg() }}</blockquote>
-    <a :href="$site.base" aria-label="go to home">
-      Take me home.
-    </a>
+    <a :href="$site.base" aria-label="go to home">Take me home.</a>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
+<script setup lang="ts">
 const msgs = [
   `There's nothing here.`,
   `How did we get here?`,
   `That's a Four-Oh-Four.`,
   `Looks like we've got some broken links.`
 ]
 
-export default defineComponent({
-  setup: () => ({
-    getMsg() {
-      return msgs[Math.floor(Math.random() * msgs.length)]
-    }
-  })
-})
+function getMsg() {
+  return msgs[Math.floor(Math.random() * msgs.length)]
+}
 </script>

src/client/theme-default/components/EditLink.vue

@@ -6,25 +6,11 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { useEditLink } from '../composables/editLink'
 import OutboundLink from './icons/OutboundLink.vue'
 
-export default defineComponent({
-  components: {
-    OutboundLink
-  },
-
-  setup() {
-    const { url, text } = useEditLink()
-
-    return {
-      url,
-      text
-    }
-  }
-})
+const { url, text } = useEditLink()
 </script>
 
 <style scoped>

src/client/theme-default/components/Home.vue

@@ -4,85 +4,53 @@
       v-if="data.heroImage"
       :src="heroImageSrc"
       :alt="data.heroAlt || 'hero'"
-    >
+    />
 
-    <h1
-      v-if="data.heroText !== null"
-      id="main-title"
-    >
+    <h1 v-if="data.heroText !== null" id="main-title">
       {{ data.heroText || siteTitle || 'Hello' }}
     </h1>
 
-    <p
-      v-if="data.tagline !== null"
-      class="description"
-    >
+    <p v-if="data.tagline !== null" class="description">
       {{ data.tagline || siteDescription || 'Welcome to your VitePress site' }}
     </p>
 
-    <p
-      v-if="data.actionText && data.actionLink"
-      class="action"
-    >
+    <p v-if="data.actionText && data.actionLink" class="action">
       <a class="action-link" :href="actionLink.link">
         {{ actionLink.text }}
       </a>
     </p>
     <slot name="hero" />
   </header>
 
-  <div
-    v-if="data.features && data.features.length"
-    class="features"
-  >
-    <div
-      v-for="(feature, index) in data.features"
-      :key="index"
-      class="feature"
-    >
+  <div v-if="data.features && data.features.length" class="features">
+    <div v-for="(feature, index) in data.features" :key="index" class="feature">
       <h2>{{ feature.title }}</h2>
       <p>{{ feature.details }}</p>
     </div>
     <slot name="features" />
   </div>
 
-  <div
-    v-if="data.footer"
-    class="footer"
-  >
+  <div v-if="data.footer" class="footer">
     {{ data.footer }}
     <slot name="footer" />
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue'
+<script setup lang="ts">
+import { computed } from 'vue'
 import { useRoute, useSiteData } from 'vitepress'
 import { withBase } from '../utils'
 
-export default defineComponent({
-  setup() {
-    const route = useRoute()
-    const siteData = useSiteData()
-
-    const data = computed(() => route.data.frontmatter)
-    const actionLink = computed(() => ({
-      link: data.value.actionLink,
-      text: data.value.actionText
-    }))
-    const heroImageSrc = computed(() => withBase(data.value.heroImage))
-    const siteTitle = computed(() => siteData.value.title)
-    const siteDescription = computed(() => siteData.value.description)
-
-    return {
-      data,
-      actionLink,
-      heroImageSrc,
-      siteTitle,
-      siteDescription
-    }
-  }
-})
+const route = useRoute()
+const siteData = useSiteData()
+const data = computed(() => route.data.frontmatter)
+const actionLink = computed(() => ({
+  link: data.value.actionLink,
+  text: data.value.actionText
+}))
+const heroImageSrc = computed(() => withBase(data.value.heroImage))
+const siteTitle = computed(() => siteData.value.title)
+const siteDescription = computed(() => siteData.value.description)
 </script>
 
 <style scoped>

src/client/theme-default/components/NavBar.vue

@@ -10,17 +10,9 @@
   <slot name="search" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import NavBarTitle from './NavBarTitle.vue'
 import NavBarLinks from './NavBarLinks.vue'
-
-export default defineComponent({
-  components: {
-    NavBarTitle,
-    NavBarLinks
-  }
-})
 </script>
 
 <style scoped>