feat(client): shorten data keys

[Mister-Hope]

This PR renames the useClientData with useData and shorten data keys.

Theme developers are encouraged to use a wrappered useData if multiple data are needed in a composable/component:

// composables/useData.ts
import { DefaultThemePageData, DefaultThemePageData, DefaultThemeData, MyThemeLocale } from './types.js'
import { Data as _Data, useData as _useData } from 'vuepress/client';
import type {
  ThemeDataRef,
  ThemeLocaleDataRef,
} from '@vuepress/plugin-theme-data/client'
import {
  useThemeData,
  useThemeLocaleData,
} from '@vuepress/plugin-theme-data/client'

export interface Data extends _Data<DefaultThemePageData, DefaultThemePageData> {
  themeData: ThemeDataRef<DefaultThemeData>
  themeLocaleData: ThemeLocaleDataRef<DefaultThemeData>
}

export const useData = (): Data => ({
  ...(useClientData() as ClientData<PageFrontmatter, PageData>),
  themeData: useThemeData<DefaultThemeData>(),
  themeLocaleData: useThemeLocaleData<DefaultThemeData>(),
})

It's can avoid imports burden in components:

Before:

import { usePageData, usePageFrontmatter } from 'vuepress/client'
import { useThemeLocaleData } from '@theme/useThemeData'
import type {
  DefaultThemeNormalPageFrontmatter,
  DefaultThemePageData,
} from '../../shared/index.js'


export const useXXX = () => {
  const themeLocale = useThemeLocaleData()
  const page = usePageData<DefaultThemePageData>()
  const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()

  // ...
}

After:

import { useData } from '@theme/useData'

export const useXXX = () => {
  const { themeLocale, page, frontmatter } = useData()

  // ...
}

To avoid increasing output, we need to shorten data keys as they can not be minified:

// original
const themeData = useThemeData()
const pageFrontmatter = usePageFrontmatter()
// minified:
const a=b();const c=d();


// new way:
const { themeData, pageFrontmatter} = useData()
// minified: oops longer!
const {themeData:a,pageFrontmatter:b}=e()
// shortened: not bad
const {theme:a,frontmatter:b}=e()

As:

• V1 already have $site $siteLocale $theme $page $frontmatter and etc.
• V2 still allows similar things in template directly

It's natural to have data property shortened without $. This is what the PR does.

Besides, the composable names are also shortened to align the changes with data property, users are likely not being confused as we have a long type definition:

const { lang } = useData()
const lang = useLang() 
// both return types are PageLangRef so it's clear that the lang is describing current page

Also some composables are fully internal for vuepress/client, since useData was introduced, they are no longer needed:

• useLayouts
• usePageHead
• usePageLayout

These APIS are now marked deprecated in favor of useData() (AKA useClientData)

[coveralls]

Pull Request Test Coverage Report for Build 13453319067

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 71.722%

---

Totals
Change from base Build 13450802257:	0.0%
Covered Lines:	648
Relevant Lines:	906

---

💛 - Coveralls

[meteorlxy]

I'm not with this kind of breaking changes. A lot of naming in this PR is just based on personal habits and doesn't follow a certain pattern, and will make things confusing.

A typical example is usePageComponent -> useComponent. The updated name is too general to indicate its actual usage.

[Mister-Hope]

I'm not with this kind of breaking changes.
Again:

• V1 already have $site $siteLocale $page $frontmatter and etc.
• V2 still allows similar things in template directly

It's natural to have data property shortened without $. This is what the PR does.

Ref:

• https://v1.vuepress.vuejs.org/guide/global-computed.html#localepath

• core/packages/client/src/setupGlobalComputed.ts

  Lines 111 to 119 in cd192c2

  	$frontmatter: { get: () => pageFrontmatter.value },
  	$head: { get: () => pageHead.value },
  	$headTitle: { get: () => pageHeadTitle.value },
  	$lang: { get: () => pageLang.value },
  	$page: { get: () => pageData.value },
  	$routeLocale: { get: () => routeLocale.value },
  	$site: { get: () => siteData.value },
  	$siteLocale: { get: () => siteLocaleData.value },
  	$withBase: { get: () => withBase },

• https://github.com/vuepress/ecosystem/blob/7cb42a2e1028c1a4407711c8408d052f45691bbf/plugins/development/plugin-theme-data/src/client/config.ts#L31-L42

So at least any of these listed SHALL NOT BE CONSIDERED as confusing.

just based on personal habits

You are writing default theme like this yourself so I don't think keys like this needs any bargain.

For the rest:

• routes redirects layouts routeLocale are unchanged

A typical example is usePageComponent -> useComponent. The updated name is too general to indicate its actual usage.

Yes, this is kind of reasonable.

The only things new are the following:

• pageComponent
• pageHead
• pageHeadTitle
• pageLayout

And any of theme shall be considered as advanced APIs, and I am not expecting any plugin authors and theme developers to call them unless in very rare edge cases, and users shall never call them.

Also as I clearly described in my original PR body:

users are likely not being confused as we have a long type definition:

const { component } = uesComponent() 
         // ?| PageComponentRef
const component = uesComponent() // PageComponentRef
// the return type make it clear that the this is a page component

If you still think thses are not fine, the above four (and only the 4) can be reverted, as they are not be expected to be used commonly anyway.

Both @pengzhanbo and I are satisfied with the change, which means even if core refused to merge it, we will make the conversion downstream in ecosystem with @vuepress/helper and use it in official themes, hope/plume theme, which would be more confusing for any users who comes ahead to ecosytem for old/new default theme

[Mister-Hope]

Updated:

• Since useCLientData is provided after some internal composables like usePageHead and usePageLayout, we no longer need some composables since they should never be called outside vuepress/client.

  These APIS are now marked deprecated in favor of useData() (AKA useClientData)

• since there are never a short, available template variable, pageComponent pageLayout names are reverted

This should now fit everything in your original comment, none is done with personal taste, everything now has clear motivation and reference.