@vuepress/client 2.0.0-rc.0 → 2.0.0-rc.1

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-present, Yuxi (Evan) You
+Copyright (c) 2018-present, VuePress Community
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -0,0 +1,12 @@
+# @vuepress/client
+
+[![npm](https://badgen.net/npm/v/@vuepress/client/next)](https://www.npmjs.com/package/@vuepress/client)
+[![license](https://badgen.net/github/license/vuepress/core)](https://github.com/vuepress/core/blob/main/LICENSE)
+
+## Documentation
+
+https://v2.vuepress.vuejs.org
+
+## License
+
+[MIT](https://github.com/vuepress/core/blob/main/LICENSE)

package/dist/app.d.ts

@@ -0,0 +1,7 @@
+import { C as CreateVueAppFunction } from './createVueAppFunction-YNGNKfE3.js';
+import 'vue';
+import 'vue-router';
+
+declare const createVueApp: CreateVueAppFunction;
+
+export { createVueApp };

package/dist/app.js

@@ -18,7 +18,7 @@ import {
   usePageLang,
   usePageLayout,
   withBase
-} from "./chunk-DHNSDB55.js";
+} from "./chunk-PEQEPZ75.js";
 
 // src/app.ts
 import { clientConfigs } from "@internal/clientConfigs";
@@ -121,13 +121,10 @@ var setupGlobalComponents = (app) => {
 };
 
 // src/setupGlobalComputed.ts
-import { computedEager, computedWithControl } from "@vueuse/core";
+import { computedWithControl } from "@vueuse/core";
 import { computed } from "vue";
 var setupGlobalComputed = (app, router, clientConfigs2) => {
-  const routePath = computedEager(() => router.currentRoute.value.path);
-  const routeLocale = computedEager(
-    () => resolvers.resolveRouteLocale(siteData.value.locales, routePath.value)
-  );
+  const routePath = computed(() => router.currentRoute.value.path);
   const pageData = computedWithControl(
     routePath,
     () => router.currentRoute.value.meta._data
@@ -142,6 +139,9 @@ var setupGlobalComputed = (app, router, clientConfigs2) => {
     };
   }
   const layouts = computed(() => resolvers.resolveLayouts(clientConfigs2));
+  const routeLocale = computed(
+    () => resolvers.resolveRouteLocale(siteData.value.locales, routePath.value)
+  );
   const siteLocaleData = computed(
     () => resolvers.resolveSiteLocaleData(siteData.value, routeLocale.value)
   );
@@ -200,7 +200,7 @@ var setupGlobalComputed = (app, router, clientConfigs2) => {
 
 // src/setupUpdateHead.ts
 import { isPlainObject, isString } from "@vuepress/shared";
-import { onMounted, provide, ref, useSSRContext, watch } from "vue";
+import { onMounted, provide, useSSRContext, watch } from "vue";
 var setupUpdateHead = () => {
   const head = usePageHead();
   const lang = usePageLang();
@@ -212,39 +212,55 @@ var setupUpdateHead = () => {
     }
     return;
   }
-  const headTags = ref([]);
-  const loadHead = () => {
+  let managedHeadElements = [];
+  const takeOverHeadElements = () => {
     head.value.forEach((item) => {
-      const tag = queryHeadTag(item);
-      if (tag) {
-        headTags.value.push(tag);
+      const headElement = queryHeadElement(item);
+      if (headElement) {
+        managedHeadElements.push(headElement);
       }
     });
   };
-  const updateHead = () => {
-    document.documentElement.lang = lang.value;
-    headTags.value.forEach((item) => {
-      if (item.parentNode === document.head) {
-        document.head.removeChild(item);
+  const generateHeadElements = () => {
+    const result = [];
+    head.value.forEach((item) => {
+      const headElement = createHeadElement(item);
+      if (headElement) {
+        result.push(headElement);
       }
     });
-    headTags.value.splice(0, headTags.value.length);
-    head.value.forEach((item) => {
-      const tag = createHeadTag(item);
-      if (tag !== null) {
-        document.head.appendChild(tag);
-        headTags.value.push(tag);
+    return result;
+  };
+  const updateHead = () => {
+    document.documentElement.lang = lang.value;
+    const newHeadElements = generateHeadElements();
+    managedHeadElements.forEach((oldEl, oldIndex) => {
+      const matchedIndex = newHeadElements.findIndex(
+        (newEl) => oldEl.isEqualNode(newEl)
+      );
+      if (matchedIndex === -1) {
+        oldEl.remove();
+        delete managedHeadElements[oldIndex];
+      } else {
+        newHeadElements.splice(matchedIndex, 1);
       }
     });
+    newHeadElements.forEach((el) => document.head.appendChild(el));
+    managedHeadElements = [
+      // filter out empty deleted items
+      ...managedHeadElements.filter((item) => !!item),
+      ...newHeadElements
+    ];
   };
   provide(updateHeadSymbol, updateHead);
   onMounted(() => {
-    loadHead();
-    updateHead();
-    watch(() => head.value, updateHead);
+    if (!__VUEPRESS_DEV__) {
+      takeOverHeadElements();
+    }
+    watch(head, updateHead, { immediate: __VUEPRESS_DEV__ });
   });
 };
-var queryHeadTag = ([
+var queryHeadElement = ([
   tagName,
   attrs,
   content = ""
@@ -259,11 +275,15 @@ var queryHeadTag = ([
     return "";
   }).join("");
   const selector = `head > ${tagName}${attrsSelector}`;
-  const tags = Array.from(document.querySelectorAll(selector));
-  const matchedTag = tags.find((item) => item.innerText === content);
-  return matchedTag || null;
+  const headElements = Array.from(
+    document.querySelectorAll(selector)
+  );
+  const matchedHeadElement = headElements.find(
+    (item) => item.innerText === content
+  );
+  return matchedHeadElement || null;
 };
-var createHeadTag = ([
+var createHeadElement = ([
   tagName,
   attrs,
   content
@@ -271,20 +291,20 @@ var createHeadTag = ([
   if (!isString(tagName)) {
     return null;
   }
-  const tag = document.createElement(tagName);
+  const headElement = document.createElement(tagName);
   if (isPlainObject(attrs)) {
     Object.entries(attrs).forEach(([key, value]) => {
       if (isString(value)) {
-        tag.setAttribute(key, value);
+        headElement.setAttribute(key, value);
       } else if (value === true) {
-        tag.setAttribute(key, "");
+        headElement.setAttribute(key, "");
       }
     });
   }
   if (isString(content)) {
-    tag.appendChild(document.createTextNode(content));
+    headElement.appendChild(document.createTextNode(content));
   }
-  return tag;
+  return headElement;
 };
 
 // src/app.ts

package/dist/{chunk-DHNSDB55.js → chunk-PEQEPZ75.js}

@@ -154,12 +154,7 @@ var useUpdateHead = () => {
 };
 
 // src/resolvers.ts
-import {
-  dedupeHead,
-  isArray,
-  isString,
-  resolveLocalePath
-} from "@vuepress/shared";
+import { dedupeHead, isString, resolveLocalePath } from "@vuepress/shared";
 import { reactive } from "vue";
 
 // src/constants.ts
@@ -198,7 +193,7 @@ var resolvers = reactive({
   resolvePageHead: (headTitle, frontmatter, siteLocale) => {
     const description = isString(frontmatter.description) ? frontmatter.description : siteLocale.description;
     const head = [
-      ...isArray(frontmatter.head) ? frontmatter.head : [],
+      ...Array.isArray(frontmatter.head) ? frontmatter.head : [],
       ...siteLocale.head,
       ["title", {}, headTitle],
       ["meta", { name: "description", content: description }]
@@ -245,7 +240,13 @@ var resolvers = reactive({
    */
   resolveSiteLocaleData: (site, routeLocale) => ({
     ...site,
-    ...site.locales[routeLocale]
+    ...site.locales[routeLocale],
+    head: [
+      // when merging head, the locales head should be placed before root head
+      // to get higher priority
+      ...site.locales[routeLocale]?.head ?? [],
+      ...site.head ?? []
+    ]
   })
 });
 

package/dist/createVueAppFunction-YNGNKfE3.d.ts

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+import { Router } from 'vue-router';
+
+type CreateVueAppFunction = () => Promise<{
+    app: App;
+    router: Router;
+}>;
+
+export type { CreateVueAppFunction as C };

package/dist/index.d.ts

@@ -1,74 +1,9 @@
 import { PageData, PageFrontmatter, HeadConfig, SiteData } from '@vuepress/shared';
 export { PageData, PageFrontmatter, PageHeader, SiteData } from '@vuepress/shared';
 import * as vue from 'vue';
-import { Component, App, ComputedRef, InjectionKey, Ref } from 'vue';
+import { ComputedRef, InjectionKey, Ref, Component, App } from 'vue';
 import { Router, RouteMeta } from 'vue-router';
-
-declare const ClientOnly: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
-
-/**
- * Markdown rendered content
- */
-declare const Content: vue.DefineComponent<{
-    pageKey: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
-    pageKey: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-}>>, {
-    pageKey: string;
-}, {}>;
-
-type Layouts = Record<string, Component>;
-
-/**
- * Configure vuepress client
- */
-interface ClientConfig {
-    /**
-     * An enhance function to be called after vue app instance and
-     * vue-router instance has been created
-     */
-    enhance?: (context: {
-        app: App;
-        router: Router;
-        siteData: SiteDataRef;
-    }) => void | Promise<void>;
-    /**
-     * A function to be called inside the setup function of vue app
-     */
-    setup?: () => void;
-    /**
-     * Layout components
-     */
-    layouts?: Layouts;
-    /**
-     * Components to be placed directly into the root node of vue app
-     */
-    rootComponents?: Component[];
-}
-
-type CreateVueAppFunction = () => Promise<{
-    app: App;
-    router: Router;
-}>;
-
-type PageRouteItem = [
-    name: string,
-    path: string,
-    meta: RouteMeta,
-    redirects: string[]
-];
+export { C as CreateVueAppFunction } from './createVueAppFunction-YNGNKfE3.js';
 
 /**
  * Ref wrapper of `Layouts`
@@ -257,6 +192,67 @@ declare const updateHeadSymbol: InjectionKey<UpdateHead>;
  */
 declare const useUpdateHead: () => UpdateHead;
 
+type Layouts = Record<string, Component>;
+
+/**
+ * Configure vuepress client
+ */
+interface ClientConfig {
+    /**
+     * An enhance function to be called after vue app instance and
+     * vue-router instance has been created
+     */
+    enhance?: (context: {
+        app: App;
+        router: Router;
+        siteData: SiteDataRef;
+    }) => void | Promise<void>;
+    /**
+     * A function to be called inside the setup function of vue app
+     */
+    setup?: () => void;
+    /**
+     * Layout components
+     */
+    layouts?: Layouts;
+    /**
+     * Components to be placed directly into the root node of vue app
+     */
+    rootComponents?: Component[];
+}
+
+type PageRouteItem = [
+    name: string,
+    path: string,
+    meta: RouteMeta,
+    redirects: string[]
+];
+
+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<{}>>, {}, {}>;
+
+/**
+ * Markdown rendered content
+ */
+declare const Content: vue.DefineComponent<{
+    pageKey: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    pageKey: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}>>, {
+    pageKey: string;
+}, {}>;
+
 /**
  * A helper function to help you define vuepress client config file
  */
@@ -284,4 +280,4 @@ declare const resolvers: {
     resolveSiteLocaleData: (site: SiteData, routeLocale: RouteLocale) => SiteLocaleData;
 };
 
-export { ClientConfig, ClientOnly, Content, CreateVueAppFunction, Layouts, LayoutsRef, PageDataRef, PageFrontmatterRef, PageHead, PageHeadRef, PageHeadTitle, PageHeadTitleRef, PageLang, PageLangRef, PageLayoutRef, PageRouteItem, PagesData, PagesDataRef, RouteLocale, RouteLocaleRef, SiteDataRef, SiteLocaleData, SiteLocaleDataRef, UpdateHead, defineClientConfig, layoutsSymbol, pageDataEmpty, pageDataSymbol, pageFrontmatterSymbol, pageHeadSymbol, pageHeadTitleSymbol, pageLangSymbol, pageLayoutSymbol, pagesData, resolvers, routeLocaleSymbol, siteData, siteLocaleDataSymbol, updateHeadSymbol, useLayouts, usePageData, usePageFrontmatter, usePageHead, usePageHeadTitle, usePageLang, usePageLayout, usePagesData, useRouteLocale, useSiteData, useSiteLocaleData, useUpdateHead, withBase };
+export { type ClientConfig, ClientOnly, Content, type Layouts, type LayoutsRef, type PageDataRef, type PageFrontmatterRef, type PageHead, type PageHeadRef, type PageHeadTitle, type PageHeadTitleRef, type PageLang, type PageLangRef, type PageLayoutRef, type PageRouteItem, type PagesData, type PagesDataRef, type RouteLocale, type RouteLocaleRef, type SiteDataRef, type SiteLocaleData, type SiteLocaleDataRef, type UpdateHead, defineClientConfig, layoutsSymbol, pageDataEmpty, pageDataSymbol, pageFrontmatterSymbol, pageHeadSymbol, pageHeadTitleSymbol, pageLangSymbol, pageLayoutSymbol, pagesData, resolvers, routeLocaleSymbol, siteData, siteLocaleDataSymbol, updateHeadSymbol, useLayouts, usePageData, usePageFrontmatter, usePageHead, usePageHeadTitle, usePageLang, usePageLayout, usePagesData, useRouteLocale, useSiteData, useSiteLocaleData, useUpdateHead, withBase };

package/dist/index.js

@@ -29,7 +29,7 @@ import {
   useSiteLocaleData,
   useUpdateHead,
   withBase
-} from "./chunk-DHNSDB55.js";
+} from "./chunk-PEQEPZ75.js";
 export {
   ClientOnly,
   Content,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/client",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.1",
   "description": "Client package of VuePress",
   "keywords": [
     "vuepress",
@@ -8,11 +8,11 @@
   ],
   "homepage": "https://github.com/vuepress",
   "bugs": {
-    "url": "https://github.com/vuepress/vuepress-next/issues"
+    "url": "https://github.com/vuepress/core/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vuepress/vuepress-next.git"
+    "url": "git+https://github.com/vuepress/core.git"
   },
   "license": "MIT",
   "author": "meteorlxy",
@@ -34,17 +34,20 @@
   ],
   "dependencies": {
     "@vue/devtools-api": "^6.5.1",
-    "@vueuse/core": "^10.6.1",
-    "vue": "^3.3.8",
+    "@vueuse/core": "^10.7.2",
+    "vue": "^3.4.15",
     "vue-router": "^4.2.5",
-    "@vuepress/shared": "2.0.0-rc.0"
+    "@vuepress/shared": "2.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
   },
   "tsup": {
     "clean": true,
-    "dts": "./src/index.ts",
+    "dts": [
+      "./src/app.ts",
+      "./src/index.ts"
+    ],
     "entry": [
       "./src/app.ts",
       "./src/index.ts"