build: improve types (#3009)

Author: brc-dd

package.json

@@ -103,11 +103,15 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "markdown-it-mathjax3": "^4.3.2"
+    "markdown-it-mathjax3": "^4.3.2",
+    "postcss": "^8.4.30"
   },
   "peerDependenciesMeta": {
     "markdown-it-mathjax3": {
       "optional": true
+    },
+    "postcss": {
+      "optional": true
     }
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -62,13 +62,20 @@ const esmBuild: RollupOptions = {
   }
 }
 
+const typesExternal = [
+  ...external,
+  /\/vitepress\/(?!(dist|node_modules)\/).*\.d\.ts$/,
+  'source-map-js',
+  'fast-glob'
+]
+
 const nodeTypes: RollupOptions = {
   input: r('src/node/index.ts'),
   output: {
     format: 'esm',
     file: 'dist/node/index.d.ts'
   },
-  external: [...external, r('types/shared.d.ts'), 'postcss', 'source-map-js'],
+  external: typesExternal,
   plugins: [dts({ respectExternal: true })]
 }
 
@@ -78,7 +85,7 @@ const clientTypes: RollupOptions = {
     format: 'esm',
     file: 'dist/client/index.d.ts'
   },
-  external,
+  external: typesExternal,
   plugins: [
     dts({ respectExternal: true }),
     {

rollup.config.ts

@@ -1,5 +1,5 @@
 // exports in this file are exposed to themes and md files via 'vitepress'
-// so the user can do `import { useRoute, useSiteData } from 'vitepress'`
+// so the user can do `import { useRoute, useData } from 'vitepress'`
 
 // generic types
 export type { VitePressData } from './app/data'

src/client/index.ts

@@ -29,7 +29,7 @@ declare module '@localSearchIndex' {
 }
 
 declare module 'mark.js/src/vanilla.js' {
-  import type { Mark } from 'mark.js'
-  const mark: Mark
+  import type Mark from 'mark.js'
+  const mark: typeof Mark
   export default mark
 }

src/client/shim.d.ts

@@ -7,7 +7,7 @@ export * from './init/init'
 export * from './contentLoader'
 export * from './postcss'
 export { defineLoader, type LoaderModule } from './plugins/staticDataPlugin'
-export { loadEnv } from 'vite'
+export { loadEnv, type Plugin } from 'vite'
 
 // shared types
 export type {

src/node/index.ts

@@ -1,8 +1,8 @@
 import postcssPrefixSelector from 'postcss-prefix-selector'
 
-type Options = Parameters<typeof postcssPrefixSelector>[0]
-
-export function postcssIsolateStyles(options: Options = {}) {
+export function postcssIsolateStyles(
+  options: Parameters<typeof postcssPrefixSelector>[0] = {}
+): ReturnType<typeof postcssPrefixSelector> {
   return postcssPrefixSelector({
     prefix: ':not(:where(.vp-raw, .vp-raw *))',
     includeFiles: [/base\.css/],

src/node/postcss/index.ts

@@ -1,26 +1,28 @@
 // so that users can do `import DefaultTheme from 'vitepress/theme'`
+
 import type { DefineComponent } from 'vue'
-import { EnhanceAppContext } from './dist/client/index.js'
+import type { EnhanceAppContext } from './dist/client/index.js'
+import type { DefaultTheme } from './types/default-theme.js'
 
-// TODO: add props for these
-export const VPImage: DefineComponent
-export const VPButton: DefineComponent
-export const VPHomeHero: DefineComponent
-export const VPHomeFeatures: DefineComponent
-export const VPHomeSponsors: DefineComponent
-export const VPDocAsideSponsors: DefineComponent
-export const VPSponsors: DefineComponent
-export const VPTeamPage: DefineComponent
-export const VPTeamPageTitle: DefineComponent
-export const VPTeamPageSection: DefineComponent
-export const VPTeamMembers: DefineComponent
+export type { DefaultTheme } from './types/default-theme.js'
 
 declare const theme: {
   Layout: DefineComponent
   enhanceApp: (ctx: EnhanceAppContext) => void
 }
 
 export default theme
-export type { DefaultTheme } from './types/default-theme.js'
+export declare const useSidebar: () => DefaultTheme.DocSidebar
 
-export const useSidebar: () => DefaultTheme.DocSidebar
+// TODO: add props for these
+export declare const VPButton: DefineComponent
+export declare const VPDocAsideSponsors: DefineComponent
+export declare const VPHomeFeatures: DefineComponent
+export declare const VPHomeHero: DefineComponent
+export declare const VPHomeSponsors: DefineComponent
+export declare const VPImage: DefineComponent
+export declare const VPSponsors: DefineComponent
+export declare const VPTeamMembers: DefineComponent
+export declare const VPTeamPage: DefineComponent
+export declare const VPTeamPageSection: DefineComponent
+export declare const VPTeamPageTitle: DefineComponent