docs: Add types for components (#2273)

Author: PatrykKuniczak

docs/.vitepress/components/BlogHome.vue

@@ -3,8 +3,9 @@ import { computed } from 'vue';
 // @ts-expect-error: Vitepress data-loader magic, this import is correct
 import { data } from '../loaders/blog.data';
 import BlogPostPreview from './BlogPostPreview.vue';
+import { Post } from '../utils/types';
 
-const posts = computed(() =>
+const posts = computed<Post[]>(() =>
   data
     .map((post) => ({
       ...post,

docs/.vitepress/components/BlogLayout.vue

@@ -1,21 +1,22 @@
 <script lang="ts" setup>
 import useBlogDate from '../composables/useBlogDate';
-import { useData } from 'vitepress';
+import { Content, useData } from 'vitepress';
+import { PostFrontmatter } from '../utils/types';
 
-const { frontmatter } = useData();
+const { frontmatter } = useData<PostFrontmatter>();
 const date = useBlogDate(() => frontmatter.value.date);
 </script>
 
 <template>
   <div class="vp-doc">
     <main class="container-content">
-      <h1 v-html="$frontmatter.title" />
+      <h1 v-html="frontmatter.title" />
       <p class="meta-row">
         <a
-          class="author"
-          v-for="author of $frontmatter.authors"
+          v-for="author of frontmatter.authors"
           :key="author.github"
           :href="`https://github.com/${author.github}`"
+          class="author"
         >
           <img :src="`https://github.com/${author.github}.png?size=96`" />
           <span>{{ author.name }}</span>

docs/.vitepress/components/ExampleSearch.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, onMounted, computed, toRaw, Ref } from 'vue';
+import { computed, onMounted, ref, Ref, toRaw } from 'vue';
 import ExampleSearchFilterByItem from './ExampleSearchFilterByItem.vue';
 import ExampleSearchResult from './ExampleSearchResult.vue';
 import { ExamplesMetadata, KeySelectedObject } from '../utils/types';
@@ -48,7 +48,7 @@ function doesExampleMatchSelected(
 
 const filteredExamples = computed(() => {
   const text = searchText.value.toLowerCase();
-  return exampleMetadata.value.examples.filter((example) => {
+  return exampleMetadata.value?.examples.filter((example) => {
     const matchesText = example.searchText.toLowerCase().includes(text);
     const matchesApis = doesExampleMatchSelected(example.apis, requiredApis);
     const matchesPermissions = doesExampleMatchSelected(

docs/.vitepress/config.ts

@@ -1,4 +1,5 @@
 import { Feed } from 'feed';
+// @ts-expect-error; It isn't TypeScript lib
 import footnote from 'markdown-it-footnote';
 import fs, { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
@@ -73,8 +74,11 @@ export default defineConfig({
   description,
   vite: {
     clearScreen: false,
+    //TODO: REMOVE THIS @TS-EXPECT-ERROR AFTER BUMP VITEPRESS TO V2.0
     plugins: [
+      // @ts-expect-error: Vite version mismatch between this project and the plugin
       llmstxt(),
+      // @ts-expect-error: Vite version mismatch between this project and the plugin
       groupIconVitePlugin({
         customIcon: {
           'wxt.config.ts': localIconLoader(

docs/.vitepress/loaders/blog.data.ts

@@ -1,3 +1,9 @@
-import { createContentLoader } from 'vitepress';
+import { type ContentData, createContentLoader } from 'vitepress';
+import { PostFrontmatter } from '../utils/types';
 
-export default createContentLoader('blog/*.md');
+declare const data: Array<ContentData & { frontmatter: PostFrontmatter }>;
+export { data };
+
+export default createContentLoader<
+  Array<ContentData & { frontmatter: PostFrontmatter }>
+>('blog/*.md');

docs/.vitepress/theme/index.ts

@@ -6,10 +6,11 @@ import ExampleSearch from '../components/ExampleSearch.vue';
 import BlogLayout from '../components/BlogLayout.vue';
 import './custom.css';
 import 'virtual:group-icons.css';
+import type { EnhanceAppContext } from 'vitepress/client';
 
 export default {
   extends: DefaultTheme,
-  enhanceApp(ctx) {
+  enhanceApp(ctx: EnhanceAppContext) {
     ctx.app
       .component('Icon', Icon)
       .component('EntrypointPatterns', EntrypointPatterns)

docs/.vitepress/utils/head.ts

@@ -1,4 +1,4 @@
-import { HeadConfig } from 'vitepress/types/shared';
+import type { HeadConfig } from 'vitepress';
 
 export function meta(
   property: string,

docs/.vitepress/utils/types.ts

@@ -1,3 +1,5 @@
+import { ContentData } from 'vitepress';
+
 export interface Example {
   name: string;
   description?: string;
@@ -16,3 +18,15 @@ export type ExamplesMetadata = {
 };
 
 export type KeySelectedObject = Record<string, boolean | undefined>;
+
+export interface PostFrontmatter {
+  title: string;
+  description?: string;
+  date: Date;
+  authors: { name: string; github: string }[];
+}
+
+export interface Post
+  extends Omit<ContentData, 'frontmatter'>, Omit<PostFrontmatter, 'date'> {
+  date: Date;
+}