vitejs · thinkasany · May 23, 2025 · May 22, 2025 · May 22, 2025 · May 22, 2025
diff --git a/.vitepress/theme/components/AsideSponsors.vue b/.vitepress/theme/components/AsideSponsors.vue
@@ -8,7 +8,7 @@ const { data } = useSponsor()
 const sponsors = computed(() => {
   return [
     { size: 'small', items: [voidZero] },
-    ...(data?.value.map((sponsor) => {
+    ...(data.value?.map((sponsor) => {
       return {
         size: sponsor.size === 'big' ? 'mini' : 'xmini',
         items: sponsor.items,

diff --git a/.vitepress/theme/components/YouTubeVideo.vue b/.vitepress/theme/components/YouTubeVideo.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 defineProps({
   videoId: String,
 })

diff --git a/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue b/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue
@@ -29,8 +29,8 @@ const inputLines: Ref<SvgNodeProps>[] = inputPaths.map((path) =>
     visible: false,
     labelVisible: false,
     label: '',
-    dotColor: null,
-    glowColor: null,
+    dotColor: undefined,
+    glowColor: undefined,
     path,
   }),
 )
@@ -117,10 +117,10 @@ const animateDiagram = () => {
 
   // Animate the input nodes/lines
   prepareInputs().forEach((lineIndex, fileIndex) => {
-    timeline.add(
+    timeline!.add(
       isMobile
-        ? animateSingleInputMobile(inputLines[lineIndex as number])
-        : animateSingleInputDesktop(inputLines[lineIndex as number]),
+        ? animateSingleInputMobile(inputLines[lineIndex])
+        : animateSingleInputDesktop(inputLines[lineIndex]),
       fileIndex * (isMobile ? 0.4 : 0.2),
     )
   })
@@ -133,7 +133,7 @@ const animateDiagram = () => {
   // Animate the output nodes/lines
   timeline.addLabel('showOutput', '<')
   outputLines.forEach((outputLine, index) => {
-    timeline.add(
+    timeline!.add(
       isMobile
         ? animateSingleOutputMobile(outputLine)
         : animateSingleOutputDesktop(outputLine, index),
@@ -161,7 +161,7 @@ const prepareInputs = () => {
     inputFileSets.value[Math.floor(Math.random() * inputFileSets.value.length)]
 
   // Choose enough unique lines for the input file nodes to slide along
-  const inputLineIndexes = new Set()
+  const inputLineIndexes = new Set<number>()
   while (inputLineIndexes.size < 3) {
     const index: number = Math.floor(Math.random() * inputLines.length)
     inputLineIndexes.add(index)
@@ -170,10 +170,10 @@ const prepareInputs = () => {
   // Assign each line it's appropriate node label
   const inputs = [...inputLineIndexes]
   inputs.forEach((lineIndex, fileIndex) => {
-    inputLines[lineIndex as number].value.label = inputFileSet[fileIndex].label
-    inputLines[lineIndex as number].value.dotColor = inputLines[
-      lineIndex as number
-    ].value.glowColor = inputFileSet[fileIndex].color as string | null
+    inputLines[lineIndex].value.label = inputFileSet[fileIndex].label
+    inputLines[lineIndex].value.dotColor = inputLines[
+      lineIndex
+    ].value.glowColor = inputFileSet[fileIndex].color
   })
   return inputs
 }

diff --git a/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue b/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import HeroDiagram from './HeroDiagram.vue'
 </script>
 

diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue
@@ -44,15 +44,15 @@ const { startAnimation, isCardActive } = useCardAnimation(
       () => {
         glowVisible.value = true
       },
-      null,
+      undefined,
       0.2,
     )
     // Make the glowing lines hidden shortly after
     timeline.call(
       () => {
         glowVisible.value = false
       },
-      null,
+      undefined,
       1.1,
     )
 
@@ -62,7 +62,7 @@ const { startAnimation, isCardActive } = useCardAnimation(
         () => {
           checkmark.value = true
         },
-        null,
+        undefined,
         1.3 + index * 0.2,
       )
     })
@@ -228,91 +228,91 @@ const { startAnimation, isCardActive } = useCardAnimation(
             path="M1.00048 119.402L200.243 68.2732C213.283 65.4129 221.832 58.4923 221.832 50.7968V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M1.00048 136.779L231.212 68.7423C242.847 65.5523 250.195 59.0356 250.195 51.9076V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M1 165.731L263.267 69.1267C272.82 65.6348 278.558 59.7587 278.558 53.4667V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M719.001 154.23L464.019 69.1276C454.474 65.6348 448.743 59.7616 448.743 53.4731V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M719.001 125.219L496.078 68.7439C484.449 65.5528 477.106 59.0377 477.106 51.9119V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M719 107.817L527.05 68.2749C514.015 65.4134 505.469 58.4939 505.469 50.8001V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M719.001 96.2159L557.314 67.8323C543.291 65.2673 533.835 58.0756 533.835 49.976V20.323V9.78386C533.835 4.93267 529.902 1 525.051 1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M1 107.817L169.982 67.8308C184.008 65.2668 193.467 58.0743 193.467 49.9735V20.323V9.78387C193.467 4.93267 197.4 1 202.251 1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M306.924 1V20.323V55.7423C306.924 60.7337 303.306 65.5207 296.865 69.0509L62.8139 197.336C52.968 202.733 46.8471 213.068 46.8471 224.296V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M335.286 1V20.323V59.0919C335.286 62.0155 334.043 64.8989 331.656 67.5136L213.175 197.282C208.003 202.947 205.136 210.34 205.136 218.011V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M363.65 1V20.323L363.428 206.088V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M392.015 1V20.323V59.1056C392.015 62.0204 393.25 64.8954 395.624 67.5041L513.712 197.291C518.862 202.951 521.716 210.328 521.716 217.981V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M420.377 1V20.323V55.7518C420.377 60.7376 423.987 65.5197 430.415 69.0489L664.058 197.332C673.893 202.732 680.005 213.061 680.005 224.28V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
         </svg>

diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue
@@ -12,7 +12,7 @@ useSlideIn('#flexible-plugin-system')
  */
 const { isCardActive, startAnimation } = useCardAnimation(
   '#flexible-plugin-system',
-  null,
+  undefined,
   {
     once: true,
   },

diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
 import { gsap } from 'gsap'
 import { useSlideIn } from '../../../composables/useSlideIn'
@@ -26,6 +26,7 @@ const { startAnimation } = useCardAnimation(
       commandTriggered.value = true
       highlightEnter.value = false
     })
+    return timeline
   },
   {
     once: true,
@@ -35,7 +36,7 @@ const { startAnimation } = useCardAnimation(
 /**
  * Run the command animation on enter press
  */
-function handleEnterPress(event) {
+function handleEnterPress(event: KeyboardEvent) {
   if (event.key === 'Enter') {
     startAnimation()
     window.removeEventListener('keydown', handleEnterPress)

diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue
@@ -43,7 +43,7 @@ const { startAnimation } = useCardAnimation(
         () => {
           node.visible.value = false
         },
-        null,
+        undefined,
         '-=0.6',
       )
       timeline.add(subTimeline, Math.random())
@@ -54,7 +54,7 @@ const { startAnimation } = useCardAnimation(
       () => {
         isBoltActive.value = true
       },
-      null,
+      undefined,
       '-=0.5',
     )
 
@@ -92,7 +92,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 31.5L89.8055 30.377C76.1575 30.377 62.535 29.076 49.0906 26.4886L-21 13"
           :position="nodes[0].position.value"
           :visible="nodes[0].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -105,7 +105,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 50L69.295 47.754L-21 41.016"
           :position="nodes[1].position.value"
           :visible="nodes[1].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -118,7 +118,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 68.5L-21 69.5642"
           :position="nodes[2].position.value"
           :visible="nodes[2].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -131,7 +131,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 87L69.2951 89.2463L-21 96.1614"
           :position="nodes[3].position.value"
           :visible="nodes[3].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -144,7 +144,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 105.5L89.8055 106.623C76.1575 106.623 62.535 107.924 49.0906 110.511L-21 124"
           :position="nodes[4].position.value"
           :visible="nodes[4].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -182,7 +182,7 @@ const { startAnimation } = useCardAnimation(
           path="M0 93.5L105.194 94.623C118.843 94.623 132.465 95.924 145.909 98.5114L216 112"
           :position="nodes[5].position.value"
           :visible="nodes[5].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -195,7 +195,7 @@ const { startAnimation } = useCardAnimation(
           path="M0 75L125.705 77.246L216 83.984"
           :position="nodes[6].position.value"
           :visible="nodes[6].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -208,7 +208,7 @@ const { startAnimation } = useCardAnimation(
           path="M4.65162e-08 56.5L216 55.4358"
           :position="nodes[7].position.value"
           :visible="nodes[7].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -221,7 +221,7 @@ const { startAnimation } = useCardAnimation(
           path="M4.00455e-07 38L125.705 35.7537L216 28.8386"
           :position="nodes[8].position.value"
           :visible="nodes[8].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -234,7 +234,7 @@ const { startAnimation } = useCardAnimation(
           path="M8.0866e-07 19.5L105.194 18.377C118.843 18.377 132.465 17.076 145.909 14.4887L216 1"
           :position="nodes[9].position.value"
           :visible="nodes[9].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 

diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import logoJSON from './images/json.svg'
 import logoCSS from './images/css3.svg'
 import logoJS from './images/js.svg'
@@ -18,7 +18,7 @@ useSlideIn('#rich-features-card')
  */
 const { isCardActive, startAnimation } = useCardAnimation(
   '#rich-features-card',
-  null,
+  undefined,
   {
     once: true,
   },
@@ -39,7 +39,6 @@ const { isCardActive, startAnimation } = useCardAnimation(
           width="658"
           height="275"
           viewBox="0 0 658 275"
-          d
           xmlns="http://www.w3.org/2000/svg"
         >
           <path

diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue
@@ -51,7 +51,7 @@ const startAnimation = () => {
       () => {
         animationVisible.value = true
       },
-      null,
+      undefined,
       0,
     )
     .to(
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,7 +51,7 @@ const startAnimation = () => { @@
           () => {
             animationVisible.value = true
           },
-          null,
+          undefined,
 ,
         )
         .to(
@@ Expand Down @@