@vuepress/client 2.0.0-beta.28 → 2.0.0-beta.34

package/lib/app.js

@@ -9,6 +9,7 @@ import { createMemoryHistory, createRouter, createWebHistory, RouterView, START_
 import { pageData, resolvePageData, setupUpdateHead, siteData, } from './composables';
 import { provideGlobalComputed } from './provideGlobalComputed';
 import { registerGlobalComponents } from './registerGlobalComponents';
+import { setupDevtools } from './setupDevtools';
 /**
  * - use `createApp` in dev mode
  * - use `createSSRApp` in build mode
@@ -60,9 +61,13 @@ export const createVueApp = async () => {
             ]);
         }
     });
-    // global computed and global components
-    provideGlobalComputed(app, router);
+    // global components and computed
     registerGlobalComponents(app);
+    const globalComputed = provideGlobalComputed(app, router);
+    // setup devtools in dev mode
+    if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {
+        setupDevtools(app, globalComputed);
+    }
     // invoke all clientAppEnhances
     for (const clientAppEnhance of clientAppEnhances) {
         await clientAppEnhance({ app, router, siteData });

package/lib/components/index.d.ts

@@ -1,4 +1,3 @@
 export * from './ClientOnly';
 export * from './Content';
-export * from './OutboundLink';
 export * from './Vuepress';

package/lib/components/index.js

@@ -1,4 +1,3 @@
 export * from './ClientOnly';
 export * from './Content';
-export * from './OutboundLink';
 export * from './Vuepress';

package/lib/provideGlobalComputed.d.ts

@@ -1,14 +1,28 @@
 import type { App } from 'vue';
 import type { Router } from 'vue-router';
-import type { PageData, PageFrontmatter, PageHeadTitle, PageLang, RouteLocale, SiteData, SiteLocaleData } from './composables';
+import type { PageData, PageDataRef, PageFrontmatter, PageFrontmatterRef, PageHead, PageHeadRef, PageHeadTitle, PageHeadTitleRef, PageLang, PageLangRef, RouteLocale, RouteLocaleRef, SiteData, SiteDataRef, SiteLocaleData, SiteLocaleDataRef } from './composables';
 import { withBase } from './utils';
+/**
+ * Vuepress client global computed
+ */
+export interface GlobalComputed {
+    pageData: PageDataRef;
+    pageFrontmatter: PageFrontmatterRef;
+    pageHead: PageHeadRef;
+    pageHeadTitle: PageHeadTitleRef;
+    pageLang: PageLangRef;
+    routeLocale: RouteLocaleRef;
+    siteData: SiteDataRef;
+    siteLocaleData: SiteLocaleDataRef;
+}
 /**
  * Create and provide global computed
  */
-export declare const provideGlobalComputed: (app: App, router: Router) => void;
+export declare const provideGlobalComputed: (app: App, router: Router) => GlobalComputed;
 declare module '@vue/runtime-core' {
     interface ComponentCustomProperties {
         $frontmatter: PageFrontmatter;
+        $head: PageHead;
         $headTitle: PageHeadTitle;
         $lang: PageLang;
         $page: PageData;

package/lib/provideGlobalComputed.js

@@ -22,6 +22,7 @@ export const provideGlobalComputed = (app, router) => {
     // provide global helpers
     Object.defineProperties(app.config.globalProperties, {
         $frontmatter: { get: () => pageFrontmatter.value },
+        $head: { get: () => pageHead.value },
         $headTitle: { get: () => pageHeadTitle.value },
         $lang: { get: () => pageLang.value },
         $page: { get: () => pageData.value },
@@ -30,4 +31,14 @@ export const provideGlobalComputed = (app, router) => {
         $siteLocale: { get: () => siteLocaleData.value },
         $withBase: { get: () => withBase },
     });
+    return {
+        pageData,
+        pageFrontmatter,
+        pageHead,
+        pageHeadTitle,
+        pageLang,
+        routeLocale,
+        siteData,
+        siteLocaleData,
+    };
 };

package/lib/registerGlobalComponents.js

@@ -1,4 +1,4 @@
-import { ClientOnly, Content, OutboundLink } from './components';
+import { ClientOnly, Content } from './components';
 /**
  * Register global built-in components
  */
@@ -6,6 +6,5 @@ export const registerGlobalComponents = (app) => {
     /* eslint-disable vue/match-component-file-name */
     app.component('ClientOnly', ClientOnly);
     app.component('Content', Content);
-    app.component('OutboundLink', OutboundLink);
     /* eslint-enable vue/match-component-file-name */
 };

package/lib/setupDevtools.d.ts

@@ -0,0 +1,3 @@
+import type { App } from 'vue';
+import type { GlobalComputed } from './provideGlobalComputed';
+export declare const setupDevtools: (app: App, globalComputed: GlobalComputed) => void;

package/lib/setupDevtools.js

@@ -0,0 +1,21 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api';
+export const setupDevtools = (app, globalComputed) => {
+    setupDevtoolsPlugin({
+        app,
+        id: 'org.vuejs.vuepress',
+        label: 'VuePress',
+        packageName: '@vuepress/client',
+        homepage: 'https://v2.vuepress.vuejs.org',
+        logo: 'https://v2.vuepress.vuejs.org/images/hero.png',
+        componentStateTypes: ['VuePress'],
+    }, (api) => {
+        api.on.inspectComponent((payload) => {
+            payload.instanceData.state.push(...Object.entries(globalComputed).map(([name, item]) => ({
+                type: 'VuePress',
+                key: name,
+                editable: false,
+                value: item.value,
+            })));
+        });
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/client",
-  "version": "2.0.0-beta.28",
+  "version": "2.0.0-beta.34",
   "description": "Client package of VuePress",
   "keywords": [
     "vuepress",
@@ -29,16 +29,17 @@
     "copy": "cpx \"src/**/*.{d.ts,css}\" lib"
   },
   "dependencies": {
-    "@vuepress/shared": "2.0.0-beta.28",
-    "vue": "^3.2.24",
+    "@vue/devtools-api": "^6.0.0-beta.21.1",
+    "@vuepress/shared": "2.0.0-beta.33",
+    "vue": "^3.2.26",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@types/webpack-env": "^1.16.3",
-    "vite": "^2.7.1"
+    "vite": "^2.7.10"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "71c34816a79263c7dcba3ff0c103e264abdbf0d2"
+  "gitHead": "aba907994697f4d0a691f2e3668dad4bea388f20"
 }

package/types.d.ts

@@ -2,3 +2,5 @@ declare const __VUEPRESS_VERSION__: string
 declare const __VUEPRESS_DEV__: boolean
 declare const __VUEPRESS_SSR__: boolean
 declare const __VUE_HMR_RUNTIME__: Record<string, any>
+declare const __VUE_OPTIONS_API__: boolean
+declare const __VUE_PROD_DEVTOOLS__: boolean

package/lib/components/OutboundLink.css

@@ -1,7 +0,0 @@
-.icon.outbound {
-  position: relative;
-  display: inline-block;
-  color: #aaa;
-  vertical-align: middle;
-  top: -1px;
-}

package/lib/components/OutboundLink.d.ts

@@ -1,3 +0,0 @@
-import type { FunctionalComponent } from 'vue';
-import './OutboundLink.css';
-export declare const OutboundLink: FunctionalComponent;

package/lib/components/OutboundLink.js

@@ -1,24 +0,0 @@
-import { h } from 'vue';
-import './OutboundLink.css';
-const svg = h('svg', {
-    'class': 'icon outbound',
-    'xmlns': 'http://www.w3.org/2000/svg',
-    'aria-hidden': 'true',
-    'focusable': 'false',
-    'x': '0px',
-    'y': '0px',
-    'viewBox': '0 0 100 100',
-    'width': '15',
-    'height': '15',
-}, [
-    h('path', {
-        fill: 'currentColor',
-        d: 'M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z',
-    }),
-    h('polygon', {
-        fill: 'currentColor',
-        points: '45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9',
-    }),
-]);
-export const OutboundLink = (_, { slots }) => { var _a; return h('span', [svg, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)]); };
-OutboundLink.displayName = 'OutboundLink';