@vuepress/client - npm Package Compare versions

Comparing version 2.0.0-beta.9 to 2.0.0-beta.10

CHANGELOG.md

@@ -6,2 +6,19 @@ # Change Log
 
+# [2.0.0-beta.10](https://github.com/vuepress/vuepress-next/compare/v2.0.0-beta.9...v2.0.0-beta.10) (2021-04-27)
+
+
+### Bug Fixes
+
+* **client:** implement ClientOnly correctly ([e27872d](https://github.com/vuepress/vuepress-next/commit/e27872d89f1e6894ebc734e2e26c800bea82e162))
+* **client:** make hydration work properly (close [#123](https://github.com/vuepress/vuepress-next/issues/123)) ([34a5364](https://github.com/vuepress/vuepress-next/commit/34a5364ad6005e64a3e726296b9b8b73318fcbd4))
+
+
+### Features
+
+* **client:** support custom layout ([c32866d](https://github.com/vuepress/vuepress-next/commit/c32866d769cb5a29fb811fd2f00e06d7b94e1508))
+
+
+
+
+
 # [2.0.0-beta.9](https://github.com/vuepress/vuepress-next/compare/v2.0.0-beta.8...v2.0.0-beta.9) (2021-04-21)
@@ -8,0 +25,0 @@

lib/app.d.ts

@@ -1,18 +0,7 @@
-import type { CreateAppFunction, App } from 'vue';
-import type { Router, RouterHistory } from 'vue-router';
-export declare type AppCreator = CreateAppFunction<Element>;
-export declare type HistoryCreator = (base?: string) => RouterHistory;
-export declare type CreateVueAppResult = {
+import type { App } from 'vue';
+import type { Router } from 'vue-router';
+export declare type CreateVueAppFunction = () => Promise<{
     app: App;
     router: Router;
-};
-/**
- * Create a vue app
- *
- * Accepting different app creator and history creator, so it
- * can be reused for both client side and server side
- */
-export declare const createVueApp: ({ appCreator, historyCreator, }: {
-    appCreator: AppCreator;
-    historyCreator: HistoryCreator;
-}) => Promise<CreateVueAppResult>;
+}>;
+export declare const createVueApp: CreateVueAppFunction;

lib/app.js

@@ -1,3 +0,3 @@
-import { computed, h } from 'vue';
-import { createRouter, RouterView, START_LOCATION } from 'vue-router';
+import { createApp, createSSRApp, computed, h } from 'vue';
+import { createRouter, createWebHistory, createMemoryHistory, RouterView, START_LOCATION, } from 'vue-router';
 import { removeEndingSlash } from '@vuepress/shared';
@@ -7,16 +7,21 @@ import { clientAppEnhances } from '@internal/clientAppEnhances';
 import { clientAppSetups } from '@internal/clientAppSetups';
-import { pagesComponent } from '@internal/pagesComponent';
+import { pagesComponents } from '@internal/pagesComponents';
 import { pagesRoutes } from '@internal/pagesRoutes';
 import { siteData, pageData, resolvePageData, pageFrontmatterSymbol, resolvePageFrontmatter, pageHeadSymbol, resolvePageHead, pageHeadTitleSymbol, resolvePageHeadTitle, pageLangSymbol, resolvePageLang, routeLocaleSymbol, resolveRouteLocale, siteLocaleDataSymbol, resolveSiteLocaleData, useUpdateHead, } from './injections';
-import { Content, OutboundLink } from './components';
+import { ClientOnly, Content, OutboundLink } from './components';
 import { withBase } from './utils';
 /**
- * Create a vue app
- *
- * Accepting different app creator and history creator, so it
- * can be reused for both client side and server side
+ * - use `createApp` in dev mode
+ * - use `createSSRApp` in build mode
  */
-export const createVueApp = async ({ appCreator, historyCreator, }) => {
+const appCreator = __DEV__ ? createApp : createSSRApp;
+/**
+ * - use `createWebHistory` in dev mode and build mode client bundle
+ * - use `createMemoryHistory` in build mode server bundle
+ */
+const historyCreator = __SSR__ ? createMemoryHistory : createWebHistory;
+export const createVueApp = async () => {
     // options to create vue app
     const appOptions = {
+        name: 'VuepressApp',
         setup() {
@@ -59,3 +64,3 @@ // auto update head
                 resolvePageData(to.path),
-                (_a = pagesComponent[to.path]) === null || _a === void 0 ? void 0 : _a.__asyncLoader(),
+                (_a = pagesComponents[to.path]) === null || _a === void 0 ? void 0 : _a.__asyncLoader(),
             ]);
@@ -123,3 +128,3 @@ }
     /* eslint-disable vue/match-component-file-name */
-    app.component('ClientOnly', __SSR__ ? () => null : (_, ctx) => { var _a, _b; return (_b = (_a = ctx.slots).default) === null || _b === void 0 ? void 0 : _b.call(_a); });
+    app.component('ClientOnly', ClientOnly);
     app.component('Content', Content);
@@ -143,1 +148,9 @@ app.component('OutboundLink', OutboundLink);
 };
+// mount app in client bundle
+if (!__SSR__) {
+    createVueApp().then(({ app, router }) => {
+        router.isReady().then(() => {
+            app.mount('#app');
+        });
+    });
+}

lib/components/Content.js

 import { h } from 'vue';
-import { pagesComponent } from '@internal/pagesComponent';
+import { pagesComponents } from '@internal/pagesComponents';
 import { usePageData } from '../injections';
@@ -18,3 +18,3 @@ /**
     }
-    const component = pagesComponent[key];
+    const component = pagesComponents[key];
     // use page component
@@ -21,0 +21,0 @@ if (component) {

lib/components/index.d.ts

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

lib/components/index.js

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

lib/components/Vuepress.d.ts

@@ -1,5 +0,6 @@
-import type { FunctionalComponent } from 'vue';
 /**
  * Global Layout
  */
-export declare const Vuepress: FunctionalComponent;
+export declare const Vuepress: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {}>, {}>;

lib/components/Vuepress.js

@@ -1,33 +0,38 @@
-import { h } from 'vue';
+import { computed, defineComponent, h, resolveComponent } from 'vue';
 import { isString } from '@vuepress/shared';
 import { layoutComponents } from '@internal/layoutComponents';
 import { usePageData } from '../injections';
-import { Content } from './Content';
 /**
  * Global Layout
  */
-export const Vuepress = () => {
-    // get layout of current page
-    let layoutName = '404';
-    const page = usePageData();
-    if (page.value.path) {
-        // if current page exists
-        // use layout from frontmatter
-        const frontmatterLayout = page.value.frontmatter.layout;
-        if (isString(frontmatterLayout)) {
-            layoutName = frontmatterLayout;
-        }
-        else {
-            // fallback to Layout component
-            layoutName = 'Layout';
-        }
-    }
-    const layoutComponent = layoutComponents[layoutName];
-    // use layout component
-    if (layoutComponent) {
-        return h(layoutComponent);
-    }
-    // fallback to Content
-    return h(Content);
-};
-Vuepress.displayName = 'Vuepress';
+export const Vuepress = defineComponent({
+    name: 'Vuepress',
+    setup() {
+        const page = usePageData();
+        // resolve layout component
+        const layoutComponent = computed(() => {
+            // resolve layout name of current page
+            let layoutName;
+            if (page.value.path) {
+                // if current page exists
+                // use layout from frontmatter
+                const frontmatterLayout = page.value.frontmatter.layout;
+                if (isString(frontmatterLayout)) {
+                    layoutName = frontmatterLayout;
+                }
+                else {
+                    // fallback to default layout
+                    layoutName = 'Layout';
+                }
+            }
+            else {
+                // if current page does not exist
+                // use 404 layout
+                layoutName = '404';
+            }
+            // use theme layout or fallback to custom layout
+            return layoutComponents[layoutName] || resolveComponent(layoutName, false);
+        });
+        return () => h(layoutComponent.value);
+    },
+});

lib/index.d.ts

@@ -7,2 +7,1 @@ export * from './app';
 export type { PageHeader } from '@vuepress/shared';
-export type { ServerEntry } from './server';

package.json

 {
   "name": "@vuepress/client",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0-beta.10",
   "description": "Client package of VuePress",
@@ -39,3 +39,3 @@ "keywords": [
   },
-  "gitHead": "edccb16372fabcf160d45ae6207a871e66c81974"
+  "gitHead": "3fb99981d3c476f7ec8d38a352a049586b4c2854"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38946

increased by3.32%

Worsened metrics

Number of package files

65

decreased by-2.99%

Lines of code

767

decreased by-1.41%

No dependency changes