add vue-tsc typecheck before build registry (#182)

* chore: add vue-tsc script

* fix: remove non existent props from ModelSelector

* fix: add basic typing for files

* fix: fix Artwork object in demo

* fix: use DatePickerModel from v-calendar on modelValue

Fixes vue-tsc validation errors

* chore: add `@vue/tsconfig`

* refactor: extracted types from v-calendar

---------

Co-authored-by: Sadegh Barati <sadeghbaratiwork@gmail.com>

apps/www/.vitepress/theme/utils/codeeditor.ts

@@ -7,7 +7,7 @@ import cssRaw from '../../../../../packages/cli/test/fixtures/nuxt/assets/css/ta
 import { type Style } from '@/lib/registry/styles'
 
 export function makeCodeSandboxParams(componentName: string, style: Style, sources: Record<string, string>) {
-  let files = {}
+  let files: Record<string, any> = {}
   files = constructFiles(componentName, style, sources)
   files['.codesandbox/Dockerfile'] = {
     content: 'FROM node:18',

apps/www/package.json

@@ -9,7 +9,9 @@
     "dev": "vitepress dev",
     "build": "vitepress build",
     "preview": "vitepress preview",
-    "build:registry": "tsx ./scripts/build-registry.ts"
+    "typecheck": "vue-tsc --noEmit",
+    "typecheck:registry": "vue-tsc --noEmit -p tsconfig.registry.json",
+    "build:registry": "typecheck:registry && tsx ./scripts/build-registry.ts"
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.0",
@@ -45,6 +47,7 @@
     "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/compiler-core": "^3.3.7",
     "@vue/compiler-dom": "^3.3.7",
+    "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.16",
     "lodash.template": "^4.5.0",
     "pathe": "^1.1.1",

apps/www/src/examples/playground/Example.vue

@@ -236,7 +236,7 @@ import CounterClockwiseClockIcon from '~icons/radix-icons/counter-clockwise-cloc
                 </TabsTrigger>
               </TabsList>
             </div>
-            <ModelSelector :types="types" :models="models" />
+            <ModelSelector />
             <TemperatureSelector :default-value="[0.56]" />
             <MaxLengthSelector :default-value="[256]" />
             <TopPSelector :default-value="[0.9]" />

apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue

@@ -2,20 +2,24 @@
 import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
 
 interface Artwork {
+  id: string
   artist: string
   art: string
 }
 
 const works: Artwork[] = [
   {
+    id: '1',
     artist: 'Ornella Binni',
     art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
   },
   {
+    id: '2',
     artist: 'Tom Byrom',
     art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
   },
   {
+    id: '3',
     artist: 'Vladimir Malyavko',
     art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
   },
@@ -30,7 +34,7 @@ const works: Artwork[] = [
           <div class="overflow-hidden rounded-md">
             <img
               :src="artwork.art"
-              :alt="`Photo by ${artwork.name}`"
+              :alt="`Photo by ${artwork.artist}`"
               class="aspect-[3/4] w-36 h-56 object-cover"
             >
           </div>

apps/www/src/lib/registry/default/ui/calendar/Calendar.vue

@@ -7,15 +7,30 @@ import { computed, nextTick, onMounted, ref } from 'vue'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
 
+/* Extracted from v-calendar */
+type DatePickerModel = DatePickerDate | DatePickerRangeObject
+type DateSource = Date | string | number
+type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
+interface DatePickerRangeObject {
+  start: Exclude<DatePickerDate, null>
+  end: Exclude<DatePickerDate, null>
+}
+interface SimpleDateParts {
+  year: number
+  month: number
+  day: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+}
+
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = withDefaults(defineProps<{
-  modelValue?: string | number | Date | Partial<{
+  modelValue?: string | number | Date | DatePickerModel
-    start: Date
-    end: Date
-  }>
   modelModifiers?: object
   columns?: number
   type?: 'single' | 'range'

apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue

@@ -2,20 +2,24 @@
 import { ScrollArea, ScrollBar } from '@/lib/registry/new-york/ui/scroll-area'
 
 interface Artwork {
+  id: string
   artist: string
   art: string
 }
 
 const works: Artwork[] = [
   {
+    id: '1',
     artist: 'Ornella Binni',
     art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
   },
   {
+    id: '2',
     artist: 'Tom Byrom',
     art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
   },
   {
+    id: '3',
     artist: 'Vladimir Malyavko',
     art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
   },
@@ -30,7 +34,7 @@ const works: Artwork[] = [
           <div class="overflow-hidden rounded-md">
             <img
               :src="artwork.art"
-              :alt="`Photo by ${artwork.name}`"
+              :alt="`Photo by ${artwork.artist}`"
               class="aspect-[3/4] w-36 h-56 object-cover"
             >
           </div>

apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue

@@ -7,15 +7,29 @@ import { computed, nextTick, onMounted, ref } from 'vue'
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
 
+/* Extracted from v-calendar */
+type DatePickerModel = DatePickerDate | DatePickerRangeObject
+type DateSource = Date | string | number
+type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
+interface DatePickerRangeObject {
+  start: Exclude<DatePickerDate, null>
+  end: Exclude<DatePickerDate, null>
+}
+interface SimpleDateParts {
+  year: number
+  month: number
+  day: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+}
+
 defineOptions({
   inheritAttrs: false,
 })
-
 const props = withDefaults(defineProps< {
-  modelValue?: string | number | Date | Partial<{
+  modelValue?: string | number | Date | DatePickerModel
-    start: Date
-    end: Date
-  }>
   modelModifiers?: object
   columns?: number
   type?: 'single' | 'range'

apps/www/tsconfig.json

@@ -1,23 +1,17 @@
 {
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
-    "target": "esnext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "lib": ["esnext", "dom"],
+    "moduleResolution": "Node",
-    "jsx": "preserve",
-    "module": "esnext",
-    "moduleResolution": "node",
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     },
     "types": ["unplugin-icons/types/vue", "node"],
-    "resolveJsonModule": true,
     "declaration": false,
     "sourceMap": true,
-    "outDir": "dist",
+    "outDir": "dist"
-    "esModuleInterop": true,
-    "strict": true,
-    "skipLibCheck": true
   },
-  "include": ["/**/*.vue", "src", ".vitepress/**/*.vue", "/**/*.ts", ".vitepress/**/*.mts", ".vitepress/**/*.vue", "src/lib/**/*"],
+  "include": ["src", ".vitepress/**/*.vue", ".vitepress/**/*.mts", ".vitepress/**/*.vue", "src/lib/**/*"],
   "exclude": ["node_modules", "./scripts/build-registry.ts"]
 }

apps/www/tsconfig.registry.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "moduleResolution": "Node",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "declaration": false
+  },
+  "include": ["src/lib/**/*"],
+  "exclude": ["node_modules", "src/lib/registry/**/example/**/*"]
+}

pnpm-lock.yaml

@@ -138,12 +138,18 @@ importers:
       '@vue/compiler-dom':
         specifier: ^3.3.7
         version: 3.3.7
+      '@vue/tsconfig':
+        specifier: ^0.4.0
+        version: 0.4.0
       autoprefixer:
         specifier: ^10.4.16
         version: 10.4.16(postcss@8.4.31)
       lodash.template:
         specifier: ^4.5.0
         version: 4.5.0
+      pathe:
+        specifier: ^1.1.1
+        version: 1.1.1
       rimraf:
         specifier: ^5.0.5
         version: 5.0.5
@@ -2860,6 +2866,10 @@ packages:
   /@vue/shared@3.3.7:
     resolution: {integrity: sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==}
 
+  /@vue/tsconfig@0.4.0:
+    resolution: {integrity: sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==}
+    dev: true
+
   /@vuedx/compiler-sfc@0.7.1:
     resolution: {integrity: sha512-M+j3COLqmTFgtsDOJEeeijUFCk7FF8x7vQsdORPPxipZF1S2vPvlcLg1bKVE6NF4wh7Gaq9Wvwv0zPi87pWRVA==}
     dependencies: