Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(dev): check component types in playground.vue #16843

Merged
merged 9 commits into from
Mar 21, 2023
Merged

chore(dev): check component types in playground.vue #16843

merged 9 commits into from
Mar 21, 2023

Conversation

yuwu9145
Copy link
Member

@yuwu9145 yuwu9145 commented Mar 6, 2023 •
edited
Loading

Description

A script command that can perform type check against playground.vue, steps:

  • Make sure SFC playground.vue has lang="ts" in script tag
  • Run yarn dev
  • Load localhost in browser (this will trigger "load on-demand" by unplugin-vue-components) and generates playground components type definitions into components.d.ts
  • Cd to packages/vuetify
  • Run yarn dev:typecheck
  • It will perform check based on playground file via vue-tsc

Markup:

The command will produce error from Markup:

$ vue-tsc --noEmit --skipLibCheck --project ./tsconfig.dev.json
dev/Playground.vue:5:9 - error TS2322: Type '{ randomProp: string; }' is not assignable to type 'Partial<{ symbol: any; flat: boolean; block: boolean; stacked: boolean; active: boolean; ripple: boolean; rounded: string | number | boolean; density: Density; disabled: boolean; replace: boolean; exact: boolean; size: string | number; tag: string; variant: NonNullable<...>; }> & Omit<...>'.
  Object literal may only specify known properties, and 'randomProp' does not exist in type 'Partial<{ symbol: any; flat: boolean; block: boolean; stacked: boolean; active: boolean; ripple: boolean; rounded: string | number | boolean; density: Density; disabled: boolean; replace: boolean; exact: boolean; size: string | number; tag: string; variant: NonNullable<...>; }> & Omit<...>'.

5         randomProp="fail"
          ~~~~~~~~~~~~~~~~~



Found 1 error in dev/Playground.vue:5
<template>
  <v-app>
    <v-main>
      <v-btn
        randomProp="fail"
      ></v-btn> 
    </v-main>
  </v-app>
</template>

<script lang="ts"></script>

@yuwu9145 yuwu9145 changed the title Add vue-tsc type check script against playground feat(script): add vue-tsc type check script against playground.vue Mar 6, 2023
@yuwu9145 yuwu9145 mentioned this pull request Mar 6, 2023
Merged
@KaelWD KaelWD changed the title feat(script): add vue-tsc type check script against playground.vue chore(dev): add vue-tsc type check script against playground.vue Mar 7, 2023
@KaelWD
Copy link
Member

KaelWD commented Mar 7, 2023

You can probably enable dts in unplugin-vue-components instead of adding them all to GlobalComponents manually

yuwu9145
yuwu9145 commented Mar 8, 2023
View reviewed changes
packages/vuetify/vite.config.mjs
@@ -20,7 +20,7 @@ const components = files.filter(file => file.startsWith('src/labs') || !block.so
const map = new Map(components.flatMap(file => {
const src = readFileSync(file, { encoding: 'utf8' })
const matches = src.matchAll(/export const (V\w+)|export { (V\w+) }/gm)
return Array.from(matches, m => [m[1] || m[2], file.replace('src/', '@/')])
return Array.from(matches, m => [m[1] || m[2], file.replace('src/', '@/').replace('.ts', '')])
Copy link
Member Author

@yuwu9145 yuwu9145 Mar 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To assist vue-tsc work properly, have to remove .ts suffix for import paths, so unplugin-vue-components can yield

VBtn: typeof import('@/components/VBtn/index')['VBtn'] 👍
as opposed to
VBtn: typeof import('@/components/VBtn/index.ts')['VBtn'] 👎

TS 4.x does not support .ts suffix in import path, and it looks like to be one of tasks in TS 5.x roadmap

Issue: microsoft/TypeScript#37582
PR: microsoft/TypeScript#51669

More importantly, this change does not break yarn dev

KaelWD
KaelWD reviewed Mar 8, 2023
View reviewed changes
packages/vuetify/dev/components.d.ts Outdated
}
}

export {}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just add this to gitignore, otherwise it'll change every time you modify the playground

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also eslintignore

Copy link
Member Author

@yuwu9145 yuwu9145 Mar 9, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also eslintignore

this file will be ignored by git so it doesn't bother lint command in CI. Assuming this is for IDE experience, then a .eslintignore file should be placed in root directory

@yuwu9145 yuwu9145 marked this pull request as ready for review March 9, 2023 01:48
@yuwu9145 yuwu9145 requested a review from KaelWD March 9, 2023 02:00
@KaelWD KaelWD added the Task label Mar 21, 2023
@KaelWD KaelWD added this to the v3.1.x milestone Mar 21, 2023
@KaelWD KaelWD changed the title chore(dev): add vue-tsc type check script against playground.vue chore(dev): check component types in playground.vue Mar 21, 2023
@KaelWD KaelWD merged commit 9ceaf65 into vuetifyjs:master Mar 21, 2023
@yuwu9145 yuwu9145 mentioned this pull request Apr 23, 2023
Closed
@pashoo2 pashoo2 mentioned this pull request Mar 21, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@KaelWD KaelWD KaelWD approved these changes

Assignees

@yuwu9145 yuwu9145

Labels
Task
Projects
None yet
Milestone
v3.1.x
Development

Successfully merging this pull request may close these issues.
2 participants
@yuwu9145 @KaelWD