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>
2023-11-20 11:52:36 +01:00 · 2023-11-20 11:52:36 +01:00 · c242a7955a
commit c242a7955a
parent 87da925085
10 changed files with 82 additions and 25 deletions
--- a/apps/www/.vitepress/theme/utils/codeeditor.ts
+++ b/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',
--- a/apps/www/package.json
+++ b/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",
--- a/apps/www/src/examples/playground/Example.vue
+++ b/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]" />
--- a/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue
+++ b/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>
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/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<{
-    start: Date
-    end: Date
-  }>
+  modelValue?: string | number | Date | DatePickerModel
  modelModifiers?: object
  columns?: number
  type?: 'single' | 'range'
--- a/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue
+++ b/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>
--- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
+++ b/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<{
-    start: Date
-    end: Date
-  }>
+  modelValue?: string | number | Date | DatePickerModel
  modelModifiers?: object
  columns?: number
  type?: 'single' | 'range'
--- a/apps/www/tsconfig.json
+++ b/apps/www/tsconfig.json
@ -1,23 +1,17 @@
 {
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
-    "target": "esnext",
-    "lib": ["esnext", "dom"],
-    "jsx": "preserve",
-    "module": "esnext",
-    "moduleResolution": "node",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "moduleResolution": "Node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["unplugin-icons/types/vue", "node"],
-    "resolveJsonModule": true,
    "declaration": false,
    "sourceMap": true,
-    "outDir": "dist",
-    "esModuleInterop": true,
-    "strict": true,
-    "skipLibCheck": true
+    "outDir": "dist"
  },
-  "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"]
 }
--- a/apps/www/tsconfig.registry.json
+++ b/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/**/*"]
+}
--- a/pnpm-lock.yaml
+++ b/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: