@vuepress/client 2.0.0-rc.4 → 2.0.0-rc.6

package/dist/app.js

@@ -1,7 +1,7 @@
 import {
   ClientOnly,
   Content,
-  VPLink,
+  RouteLink,
   layoutsSymbol,
   pageDataSymbol,
   pageFrontmatterSymbol,
@@ -20,12 +20,11 @@ import {
   usePageLang,
   usePageLayout,
   withBase
-} from "./chunk-6BD5VZ74.js";
+} from "./chunk-FKY5ACNS.js";
 
 // src/app.ts
 import { clientConfigs } from "@internal/clientConfigs";
-import { createApp, createSSRApp, h as h2 } from "vue";
-import { RouterView } from "vue-router";
+import { createApp, createSSRApp, h } from "vue";
 
 // src/createVueRouter.ts
 import { removeEndingSlash } from "@vuepress/shared";
@@ -35,18 +34,6 @@ import {
   createWebHistory,
   START_LOCATION
 } from "vue-router";
-
-// src/components/Vuepress.ts
-import { defineComponent, h } from "vue";
-var Vuepress = defineComponent({
-  name: "Vuepress",
-  setup() {
-    const layout = usePageLayout();
-    return () => h(layout.value);
-  }
-});
-
-// src/createVueRouter.ts
 var historyCreator = __VUEPRESS_SSR__ ? createMemoryHistory : createWebHistory;
 var createVueRouter = () => {
   const router = createRouter({
@@ -56,7 +43,7 @@ var createVueRouter = () => {
       {
         name: "vuepress-route",
         path: "/:catchAll(.*)",
-        component: Vuepress
+        components: {}
       }
     ],
     scrollBehavior: (to, _from, savedPosition) => {
@@ -89,7 +76,7 @@ var createVueRouter = () => {
 var setupGlobalComponents = (app) => {
   app.component("ClientOnly", ClientOnly);
   app.component("Content", Content);
-  app.component("VPLink", VPLink);
+  app.component("RouteLink", RouteLink);
 };
 
 // src/setupGlobalComputed.ts
@@ -284,18 +271,17 @@ var createHeadElement = ([
 var appCreator = __VUEPRESS_DEV__ ? createApp : createSSRApp;
 var createVueApp = async () => {
   const app = appCreator({
-    name: "VuepressApp",
+    name: "Vuepress",
     setup() {
       setupUpdateHead();
       for (const clientConfig of clientConfigs) {
         clientConfig.setup?.();
       }
-      return () => [
-        h2(RouterView),
-        ...clientConfigs.flatMap(
-          ({ rootComponents = [] }) => rootComponents.map((component) => h2(component))
-        )
-      ];
+      const rootComponents = clientConfigs.flatMap(
+        ({ rootComponents: rootComponents2 = [] }) => rootComponents2.map((component) => h(component))
+      );
+      const layout = usePageLayout();
+      return () => [h(layout.value), rootComponents];
     }
   });
   const router = createVueRouter();

package/dist/{chunk-6BD5VZ74.js → chunk-FKY5ACNS.js}

@@ -145,6 +145,9 @@ var resolveRoute = (path) => {
   };
 };
 
+// src/router/index.ts
+import { useRoute, useRouter } from "vue-router";
+
 // src/composables/routes.ts
 var useRedirects = () => redirects;
 var useRoutes = () => routes;
@@ -232,9 +235,9 @@ var withBase = (url) => {
   return `${__VUEPRESS_BASE__}${removeLeadingSlash(url)}`;
 };
 
-// src/components/VPLink.ts
+// src/components/RouteLink.ts
 import { h as h2 } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter as useRouter2 } from "vue-router";
 var guardEvent = (event) => {
   if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
     return;
@@ -250,13 +253,14 @@ var guardEvent = (event) => {
   event.preventDefault();
   return true;
 };
-var VPLink = ({ to = "" }, { slots }) => {
-  const router = useRouter();
+var RouteLink = ({ active = false, activeClass = "route-link-active", to, ...attrs }, { slots }) => {
+  const router = useRouter2();
   const path = withBase(resolveRoutePath(to));
   return h2(
     "a",
     {
-      class: "vp-link",
+      ...attrs,
+      class: ["route-link", { [activeClass]: active }],
       href: path,
       onClick: (event = {}) => {
         guardEvent(event) ? router.push(to).catch() : Promise.resolve();
@@ -265,7 +269,12 @@ var VPLink = ({ to = "" }, { slots }) => {
     slots.default?.()
   );
 };
-VPLink.displayName = "VPLink";
+RouteLink.displayName = "RouteLink";
+RouteLink.props = {
+  active: Boolean,
+  activeClass: String,
+  to: String
+};
 
 // src/resolvers.ts
 import { dedupeHead, isString, resolveLocalePath } from "@vuepress/shared";
@@ -377,6 +386,8 @@ export {
   routes,
   resolveRoutePath,
   resolveRoute,
+  useRoute,
+  useRouter,
   useRedirects,
   useRoutes,
   siteData,
@@ -389,6 +400,6 @@ export {
   Content,
   defineClientConfig,
   withBase,
-  VPLink,
+  RouteLink,
   resolvers
 };

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import { PageData, PageFrontmatter, HeadConfig, SiteData } from '@vuepress/shared';
 export { PageData, PageFrontmatter, PageHeader, SiteData } from '@vuepress/shared';
 import * as vue from 'vue';
-import { ComputedRef, InjectionKey, Ref, Component, App, ComponentOptions, FunctionalComponent, VNode } from 'vue';
+import { ComputedRef, InjectionKey, Ref, Component, App, ComponentOptions, HTMLAttributes, FunctionalComponent, VNode } from 'vue';
 import { Router } from 'vue-router';
+export { useRoute, useRouter } from 'vue-router';
 export { C as CreateVueAppFunction } from './createVueAppFunction-YNGNKfE3.js';
 
 /**
@@ -241,6 +242,9 @@ interface Route<T extends RouteMeta = RouteMeta> {
 type Redirects = Record<string, string>;
 type Routes = Record<string, Route>;
 
+/**
+ * Wrapper component that only renders its content on the client side and skips server side rendering
+ */
 declare const ClientOnly: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
@@ -266,10 +270,34 @@ declare const Content: vue.DefineComponent<{
     path: string;
 }, {}>;
 
-interface VPLinkProps {
+interface RouteLinkProps extends HTMLAttributes {
+    /**
+     * Whether the link is active to have an active class
+     *
+     * Notice that the active status is not automatically determined according to the current route.
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * The class to add when the link is active
+     *
+     * @default 'route-link-active'
+     */
+    activeClass?: string;
+    /**
+     * The route path to link to
+     */
     to: string;
 }
-declare const VPLink: FunctionalComponent<VPLinkProps, Record<never, never>, {
+/**
+ * Component to render a link to another route.
+ *
+ * It's similar to `RouterLink` in `vue-router`, but more lightweight.
+ *
+ * It's recommended to use `RouteLink` in VuePress.
+ */
+declare const RouteLink: FunctionalComponent<RouteLinkProps, Record<never, never>, {
     default: () => string | VNode | (string | VNode)[];
 }>;
 
@@ -301,4 +329,4 @@ declare const resolvers: {
     resolveSiteLocaleData: (site: SiteData, routeLocale: RouteLocale) => SiteLocaleData;
 };
 
-export { type ClientConfig, ClientOnly, Content, type Layouts, type LayoutsRef, type PageChunk, type PageDataRef, type PageFrontmatterRef, type PageHead, type PageHeadRef, type PageHeadTitle, type PageHeadTitleRef, type PageLang, type PageLangRef, type PageLayoutRef, type Redirects, type Route, type RouteLocale, type RouteLocaleRef, type RouteMeta, type Routes, type SiteDataRef, type SiteLocaleData, type SiteLocaleDataRef, type UpdateHead, VPLink, type VPLinkProps, defineClientConfig, layoutsSymbol, pageDataSymbol, pageFrontmatterSymbol, pageHeadSymbol, pageHeadTitleSymbol, pageLangSymbol, pageLayoutSymbol, redirects, resolveRoute, resolveRoutePath, resolvers, routeLocaleSymbol, routes, siteData, siteLocaleDataSymbol, updateHeadSymbol, useLayouts, usePageData, usePageFrontmatter, usePageHead, usePageHeadTitle, usePageLang, usePageLayout, useRedirects, useRouteLocale, useRoutes, useSiteData, useSiteLocaleData, useUpdateHead, withBase };
+export { type ClientConfig, ClientOnly, Content, type Layouts, type LayoutsRef, type PageChunk, type PageDataRef, type PageFrontmatterRef, type PageHead, type PageHeadRef, type PageHeadTitle, type PageHeadTitleRef, type PageLang, type PageLangRef, type PageLayoutRef, type Redirects, type Route, RouteLink, type RouteLinkProps, type RouteLocale, type RouteLocaleRef, type RouteMeta, type Routes, type SiteDataRef, type SiteLocaleData, type SiteLocaleDataRef, type UpdateHead, defineClientConfig, layoutsSymbol, pageDataSymbol, pageFrontmatterSymbol, pageHeadSymbol, pageHeadTitleSymbol, pageLangSymbol, pageLayoutSymbol, redirects, resolveRoute, resolveRoutePath, resolvers, routeLocaleSymbol, routes, siteData, siteLocaleDataSymbol, updateHeadSymbol, useLayouts, usePageData, usePageFrontmatter, usePageHead, usePageHeadTitle, usePageLang, usePageLayout, useRedirects, useRouteLocale, useRoutes, useSiteData, useSiteLocaleData, useUpdateHead, withBase };

package/dist/index.js

@@ -1,7 +1,7 @@
 import {
   ClientOnly,
   Content,
-  VPLink,
+  RouteLink,
   defineClientConfig,
   layoutsSymbol,
   pageDataSymbol,
@@ -27,17 +27,19 @@ import {
   usePageLang,
   usePageLayout,
   useRedirects,
+  useRoute,
   useRouteLocale,
+  useRouter,
   useRoutes,
   useSiteData,
   useSiteLocaleData,
   useUpdateHead,
   withBase
-} from "./chunk-6BD5VZ74.js";
+} from "./chunk-FKY5ACNS.js";
 export {
   ClientOnly,
   Content,
-  VPLink,
+  RouteLink,
   defineClientConfig,
   layoutsSymbol,
   pageDataSymbol,
@@ -63,7 +65,9 @@ export {
   usePageLang,
   usePageLayout,
   useRedirects,
+  useRoute,
   useRouteLocale,
+  useRouter,
   useRoutes,
   useSiteData,
   useSiteLocaleData,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/client",
-  "version": "2.0.0-rc.4",
+  "version": "2.0.0-rc.6",
   "description": "Client package of VuePress",
   "keywords": [
     "vuepress",
@@ -37,7 +37,7 @@
     "@vueuse/core": "^10.7.2",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
-    "@vuepress/shared": "2.0.0-rc.4"
+    "@vuepress/shared": "2.0.0-rc.6"
   },
   "publishConfig": {
     "access": "public"