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('/')
  })