Typecheck (#114)

* refactor: Update Header component props to make url required

Make the `url` prop in the Header component required by changing its type to
`string | null`. This change ensures that a URL is always provided for the
Header component to function correctly.

* feat: Refactor type definitions and update injects in List and Project components

- Refactored ModuleOutput and FlowOutput to Module and Flow types respectively
- Updated injects in List.vue and Project.vue to use the new types for improved type safety.

* build: Enable typechecking in CI workflow.

* build: fix all ts error

.github/workflows/ci.yaml

@@ -27,7 +27,7 @@ jobs:
 
       # Run linting and typechecking
       - run: pnpm run lint
-      # - run: pnpm run typecheck
+      - run: pnpm run typecheck
 
       # # Run tests
       # - run: pnpm run test

components/module/List.vue

@@ -5,13 +5,15 @@ import type { AppRouter } from '@/server/trpc/routers'
 type RouterOutput = inferRouterOutputs<AppRouter>
 type ModuleOutput = RouterOutput['module']['get']
 type FlowOutput = RouterOutput['flow']['get']
+type Module = Exclude<ModuleOutput, null>
+type Flow = Exclude<FlowOutput, null>
 
 interface Props {
-	module: ModuleOutput
+	module: Module
 }
 
 const props = defineProps<Props>()
-const flow = inject('flow') as FlowOutput
+const flow = inject('flow') as Flow
 const text = extractTextFromHTML(props.module.content)
 </script>
 
@@ -31,15 +33,15 @@ const text = extractTextFromHTML(props.module.content)
 			/>
 
 			<h3
-				v-if="!flow.configNoTitle"
+				v-if="flow?.configNoTitle"
 				class="text-base font-bold tracking-tight text-black truncate"
 			>
 				{{ props.module.title }}
 			</h3>
 		</div>
 
 		<div
-			v-if="!flow.configNoContent"
+			v-if="flow?.configNoContent"
 			class="truncate"
 		>
 			<div v-html="text" />

components/module/Project.vue

@@ -4,24 +4,23 @@ import type { AppRouter } from '@/server/trpc/routers'
 
 type RouterOutput = inferRouterOutputs<AppRouter>
 type ModuleOutput = RouterOutput['module']['get']
+type Module = Exclude<ModuleOutput, null>
 
 interface Props {
-	module: ModuleOutput
+	module: Module
 }
 
 const props = defineProps<Props>()
 </script>
 
 <template>
-	<div
-		class="module shu-card py-8"
-	>
+	<div class="module shu-card py-8">
 		<div class="px-10">
 			<div class="mt-1 mb-5 h-12 w-12 rounded-lg">
 				<NuxtImg
 					width="48px"
 					height="48px"
-					:src="props.module.image"
+					:src="props.module.image ?? undefined"
 					loading="lazy"
 					:alt="props.module.title"
 				/>

env.d.ts

@@ -5,3 +5,17 @@ declare module '*.svg' {
 	const component: DefineComponent
 	export default component
 }
+
+declare module 'probe-image-size' {
+	interface Props {
+		width: number
+		height: number
+		type: string
+		mime: string
+		wUnits: string
+		hUnits: string
+		url: string
+	}
+
+	export default function probe(url: string): Promise<Props>
+}

nuxt.config.ts

@@ -101,8 +101,6 @@ export default defineNuxtConfig({
 		},
 	},
 
-	extends: ['@sidebase/core'],
-
 	image: {
 		format: ['webp'],
 		quality: 85,

package.json

@@ -19,7 +19,6 @@
 		"@nuxt/image": "^1.5.0",
 		"@pinia/nuxt": "^0.5.1",
 		"@prisma/client": "^5.12.1",
-		"@sidebase/core": "^0.1.4",
 		"@trpc/client": "^10.45.2",
 		"@trpc/server": "^10.45.2",
 		"@vitest/coverage-v8": "^1.4.0",

pages/module/[id].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const id = useRoute().params.id
+const id = useRoute().params.id as string
 const useImg = useImage()
 const { $client } = useNuxtApp()
 

pages/space/_[id].vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 const id = useRoute().params.id
 
 const { data: space, error } = useFetch(`/api/space/${id}`)

server/flowing.ts

@@ -1,5 +1,5 @@
 import { consola } from 'consola'
-import { type API, type Flow, PrismaClient } from '@prisma/client'
+import { type Prisma, type API, PrismaClient } from '@prisma/client'
 import probe from 'probe-image-size'
 import type { NModule } from '~/composables/adapter/types'
 import useAdapter from '~/composables/adapter/useAdapter'
@@ -120,45 +120,34 @@ async function upsert(ele: NModule, flowId: string) {
 	// 如果找到已存在的模块，则打印信息并更新
 	if (res) {
 		consola.info(`Exists: ${ele.title}`)
-		let data = {
-			title: ele.title,
-			content: ele.content,
-			image: ele.image,
-			date: ele.date,
-		}
-		if (result?.width && result?.height) {
-			data = {
-				...data,
-				imageWidth: result.width,
-				imageHeight: result.height,
-			}
-		}
+
 		await prisma.module.update({
 			where: {
 				id: res.id,
 			},
-			data,
+			data: {
+				title: ele.title,
+				content: ele.content,
+				image: ele.image,
+				date: ele.date,
+				imageWidth: result?.width || null,
+				imageHeight: result?.height || null,
+			},
 		})
 		return
 	}
 
 	// 如果未找到已存在的模块，则打印成功消息并尝试插入新模块
 	consola.success(`Add: ${ele.title}`)
 	try {
-		let data = {
-			...ele,
-			date: ele.date || new Date().toISOString(),
-			flowId,
-		}
-		if (result?.width && result?.height) {
-			data = {
-				...data,
-				imageWidth: result.width,
-				imageHeight: result.height,
-			}
-		}
 		await prisma.module.create({
-			data,
+			data: {
+				...ele,
+				date: ele.date || new Date().toISOString(),
+				flowId,
+				imageWidth: result?.width || null,
+				imageHeight: result?.height || null,
+			},
 		})
 	}
 	catch (error) {
@@ -178,7 +167,7 @@ async function upsert(ele: NModule, flowId: string) {
  *
  * 对于所有成功抓取的数据适配器，将它们保存到数据库中的module表。
  */
-async function flowingByFlow(flow: Flow) {
+async function flowingByFlow(flow: Prisma.FlowGetPayload<{ include: { api: true } }>) {
 	const tasks = flow.api.map((api: API) => {
 		return (async () => {
 			let originIndex = 0
@@ -246,6 +235,7 @@ export async function allSize() {
 		},
 	})
 	for (const module of modules) {
+		if (!module.image) continue
 		const result = await probe(module.image)
 		if (result?.width && result?.height) {
 			consola.success(`Image size updated: ${module.title} `)

server/trpc/routers/config.ts

@@ -1,5 +1,5 @@
 import { publicProcedure, router } from '../trpc'
-import type { Props as SocialProps } from '~/components/Social.vue'
+import type { Props as SocialProps } from '~/components/public/Social.vue'
 import defaultData from '~/config/hero.json'
 
 interface PrismaConfigItem {

tests/app.test.ts

@@ -8,16 +8,11 @@ await setup({
 })
 
 describe('app', () => {
-	it('renders welcome page', async () => {
+	it('renders home page', async () => {
 		const html = await $fetch('/')
 
 		// Shows expected text
-		expect(html).toContain('is the productive Nuxt 3 stack')
-
-		// Contains data from healthcheck endpoint
-		expect(html).toContain('Server v0.0.1 initialized')
-		expect(html).toContain('Started at ')
-		expect(html).toContain('Last checked at ')
+		expect(html).toContain('Copyright')
 
 		await expectNoClientErrors('/')
 	})