feat: tsconfig

README.md

@@ -0,0 +1,3 @@
+## Node version
+
+  >= 18

components/CustomNavBar.vue

@@ -1,38 +1,38 @@
 <script lang="ts" setup>
-import { useWindowScroll } from '@vueuse/core'
-import { ref, watchPostEffect } from 'vue'
-import { useData } from 'vitepress/dist/client/theme-default/composables/data'
-import { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar'
-import VPNavBarAppearance from 'vitepress/dist/client/theme-default/components/VPNavBarAppearance.vue'
-import VPNavBarExtra from 'vitepress/dist/client/theme-default/components/VPNavBarExtra.vue'
-import VPNavBarHamburger from 'vitepress/dist/client/theme-default/components/VPNavBarHamburger.vue'
-import VPNavBarMenu from 'vitepress/dist/client/theme-default/components/VPNavBarMenu.vue'
-import VPNavBarSearch from 'vitepress/dist/client/theme-default/components/VPNavBarSearch.vue'
-import VPNavBarSocialLinks from 'vitepress/dist/client/theme-default/components/VPNavBarSocialLinks.vue'
-import VPNavBarTitle from 'vitepress/dist/client/theme-default/components/VPNavBarTitle.vue'
-import VPNavBarTranslations from 'vitepress/dist/client/theme-default/components/VPNavBarTranslations.vue'
+import { useWindowScroll } from "@vueuse/core";
+import { ref, watchPostEffect } from "vue";
+import { useData } from "vitepress";
+import { useSidebar } from "vitepress/theme";
+import VPNavBarAppearance from "vitepress/dist/client/theme-default/components/VPNavBarAppearance.vue";
+import VPNavBarExtra from "vitepress/dist/client/theme-default/components/VPNavBarExtra.vue";
+import VPNavBarHamburger from "vitepress/dist/client/theme-default/components/VPNavBarHamburger.vue";
+import VPNavBarMenu from "vitepress/dist/client/theme-default/components/VPNavBarMenu.vue";
+import VPNavBarSearch from "vitepress/dist/client/theme-default/components/VPNavBarSearch.vue";
+import VPNavBarSocialLinks from "vitepress/dist/client/theme-default/components/VPNavBarSocialLinks.vue";
+import VPNavBarTitle from "vitepress/dist/client/theme-default/components/VPNavBarTitle.vue";
+import VPNavBarTranslations from "vitepress/dist/client/theme-default/components/VPNavBarTranslations.vue";
 
 defineProps<{
-  isScreenOpen: boolean
-}>()
+  isScreenOpen: boolean;
+}>();
 
 defineEmits<{
-  (e: 'toggle-screen'): void
-}>()
+  (e: "toggle-screen"): void;
+}>();
 
-const { y } = useWindowScroll()
-const { hasSidebar } = useSidebar()
-const { frontmatter } = useData()
+const { y } = useWindowScroll();
+const { hasSidebar } = useSidebar();
+const { frontmatter } = useData();
 
-const classes = ref<Record<string, boolean>>({})
+const classes = ref<Record<string, boolean>>({});
 
 watchPostEffect(() => {
   classes.value = {
-    'has-sidebar': hasSidebar.value,
-    'home': frontmatter.value.layout === 'home',
-    'top': y.value === 0,
-  }
-})
+    "has-sidebar": hasSidebar.value,
+    home: frontmatter.value.layout === "home",
+    top: y.value === 0,
+  };
+});
 </script>
 
 <template>
@@ -41,7 +41,9 @@ watchPostEffect(() => {
       <div class="container">
         <div class="title">
           <VPNavBarTitle>
-            <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
+            <template #nav-bar-title-before
+              ><slot name="nav-bar-title-before"
+            /></template>
             <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
           </VPNavBarTitle>
         </div>
@@ -56,7 +58,11 @@ watchPostEffect(() => {
             <VPNavBarSocialLinks class="social-links" />
             <VPNavBarExtra class="extra" />
             <slot name="nav-bar-content-after" />
-            <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
+            <VPNavBarHamburger
+              class="hamburger"
+              :active="isScreenOpen"
+              @click="$emit('toggle-screen')"
+            />
           </div>
         </div>
       </div>
@@ -153,7 +159,9 @@ watchPostEffect(() => {
 @media (min-width: 1440px) {
   .VPNavBar.has-sidebar .title {
     padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
-    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+    width: calc(
+      (100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px
+    );
   }
 }
 
@@ -173,7 +181,9 @@ watchPostEffect(() => {
 @media (min-width: 1440px) {
   .VPNavBar.has-sidebar .content {
     padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    padding-left: calc(
+      (100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
+    );
   }
 }
 
@@ -241,7 +251,9 @@ watchPostEffect(() => {
 
 @media (min-width: 1440px) {
   .VPNavBar.has-sidebar .divider {
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    padding-left: calc(
+      (100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
+    );
   }
 }
 
@@ -255,7 +267,7 @@ watchPostEffect(() => {
   background-color: var(--vp-c-gutter);
 }
 
-@media (min-width: 960px) { 
+@media (min-width: 960px) {
   .VPNavBar:not(.home.top) .divider-line {
     background-color: var(--vp-c-gutter);
   }
@@ -264,4 +276,4 @@ watchPostEffect(() => {
     background-color: var(--vp-c-gutter);
   }
 }
-</style>
+</style>

tsconfig.json

@@ -0,0 +1,71 @@
+{
+  "compilerOptions": {
+    // Most non-library projects don't need to emit declarations.
+    // So we add this option by default to make the config more friendly to most users.
+    "noEmit": true,
+    // When type-checking with solution-style tsconfigs, though with `noEmit: true`, there won't
+    // be any `.d.ts` files emitted, but tsc still writes a `.tsbuildinfo` file to the `outDir`
+    // for each project. If we don't explicitly set the `outDir`, it will be in the same folder
+    // as the `tsconfig.json` file, which would look messy.
+    // Setting it to `./dist/` isn't ideal either, because it would pollute the `dist` folder.
+    // So we set it to a hidden folder in `node_modules` to avoid polluting the project root.
+    // FIXME:
+    // This caused a regression: https://github.com/vuejs/tsconfig/issues/27
+    // Need to find a better solution.
+    // "outDir": "./node_modules/.cache/vue-tsbuildinfo",
+
+    // As long as you are using a build tool, we recommend you to author and ship in ES modules.
+    // Even if you are targeting Node.js, because
+    //  - `CommonJS` is too outdated
+    //  - the ecosystem hasn't fully caught up with `Node16`/`NodeNext`
+    // This recommendation includes environments like Vitest, Vite Config File, Vite SSR, etc.
+    "module": "ESNext",
+
+    // We expect users to use bundlers.
+    // So here we enable some resolution features that are only available in bundlers.
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    // `allowImportingTsExtensions` can only be used when `noEmit` or `emitDeclarationOnly` is set.
+    // But `noEmit` may cause problems with solution-style tsconfigs:
+    // <https://github.com/microsoft/TypeScript/issues/49844>
+    // And `emitDeclarationOnly` is not always wanted.
+    // Considering it's not likely to be commonly used in Vue codebases, we don't enable it here.
+
+    // Required in Vue projects
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+
+    // `"noImplicitThis": true` is part of `strict`
+    // Added again here in case some users decide to disable `strict`.
+    // This enables stricter inference for data properties on `this`.
+    "noImplicitThis": true,
+    "strict": true,
+
+    // <https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#verbatimmodulesyntax>
+    // Any imports or exports without a type modifier are left around. This is important for `<script setup>`.
+    // Anything that uses the type modifier is dropped entirely.
+    "verbatimModuleSyntax": true,
+
+    // A few notes:
+    // - Vue 3 supports ES2016+
+    // - For Vite, the actual compilation target is determined by the
+    //   `build.target` option in the Vite config.
+    //   So don't change the `target` field here. It has to be
+    //   at least `ES2020` for dynamic `import()`s and `import.meta` to work correctly.
+    // - If you are not using Vite, feel free to overwrite the `target` field.
+    "target": "ESNext",
+    // For spec compilance.
+    // `true` by default if the `target` is `ES2020` or higher.
+    // Explicitly set it to `true` here in case some users want to overwrite the `target`.
+    "useDefineForClassFields": true,
+
+    // Recommended
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    // See <https://github.com/vuejs/vue-cli/pull/5688>
+    "skipLibCheck": true,
+
+    "paths": { "@/*": ["./*"] },
+    "lib": ["ES2020", "DOM", "DOM.Iterable"]
+  },
+}