Make quasar components compatible with volar #10619

soulsam480 · 2021-09-09T11:56:31Z

soulsam480
Sep 9, 2021

For anyone coming here to make quasar components compatible with volar paste this in component.d.ts

type OmitDefaults<T extends any> = Pick<T, Filter<keyof T, '$'>>;

/* eslint-disable @typescript-eslint/no-unused-vars */
type Filter<Set, Needle extends string> = Set extends `${Needle}${infer _X}` ? never : Set;

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    QAjaxBar: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QAjaxBar']>>>;

    QAvatar: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QAvatar']>>>;

    QBadge: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QBadge']>>>;

    QBanner: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QBanner']>>>;

    QBar: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QBar']>>>;

    QBreadcrumbs: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QBreadcrumbs']>>
    >;

    QBreadcrumbsEl: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QBreadcrumbsEl']>>
    >;

    QBtnDropdown: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QBtnDropdown']>>
    >;

    QBtnGroup: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QBtnGroup']>>>;

    QBtnToggle: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QBtnToggle']>>>;

    QBtn: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QBtn']>>>;

    QCard: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QCard']>>>;

    QCardActions: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QCardActions']>>
    >;

    QCardSection: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QCardSection']>>
    >;

    QCarousel: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QCarousel']>>>;

    QCarouselControl: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QCarouselControl']>>
    >;

    QCarouselSlide: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QCarouselSlide']>>
    >;

    QChatMessage: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QChatMessage']>>
    >;

    QCheckbox: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QCheckbox']>>>;

    QChip: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QChip']>>>;

    QCircularProgress: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QCircularProgress']>>
    >;

    QColor: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QColor']>>>;

    QDate: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QDate']>>>;

    QDialog: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QDialog']>>>;

    QDrawer: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QDrawer']>>>;

    QEditor: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QEditor']>>>;

    QExpansionItem: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QExpansionItem']>>
    >;

    QFab: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QFab']>>>;

    QFabAction: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QFabAction']>>>;

    QField: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QField']>>>;

    QFile: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QFile']>>>;

    QFooter: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QFooter']>>>;

    QForm: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QForm']>>>;

    QFormChildMixin: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QFormChildMixin']>>
    >;

    QHeader: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QHeader']>>>;

    QIcon: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QIcon']>>>;

    QImg: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QImg']>>>;

    QInfiniteScroll: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QInfiniteScroll']>>
    >;

    QInnerLoading: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QInnerLoading']>>
    >;

    QInput: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QInput']>>>;

    QIntersection: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QIntersection']>>
    >;

    QItem: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QItem']>>>;

    QItemLabel: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QItemLabel']>>>;

    QItemSection: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QItemSection']>>
    >;

    QList: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QList']>>>;

    QKnob: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QKnob']>>>;

    QLayout: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QLayout']>>>;

    QLinearProgress: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QLinearProgress']>>
    >;

    QMarkupTable: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QMarkupTable']>>
    >;

    QMenu: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QMenu']>>>;

    QNoSsr: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QNoSsr']>>>;

    QOptionGroup: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QOptionGroup']>>
    >;

    QPageScroller: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QPageScroller']>>
    >;

    QPageSticky: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QPageSticky']>>
    >;

    QPage: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QPage']>>>;

    QPageContainer: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QPageContainer']>>
    >;

    QPagination: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QPagination']>>
    >;

    QParallax: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QParallax']>>>;

    QPopupEdit: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QPopupEdit']>>>;

    QPopupProxy: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QPopupProxy']>>
    >;

    QPullToRefresh: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QPullToRefresh']>>
    >;

    QRadio: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QRadio']>>>;

    QRange: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QRange']>>>;

    QRating: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QRating']>>>;

    QResizeObserver: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QResizeObserver']>>
    >;

    QResponsive: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QResponsive']>>
    >;

    QScrollArea: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QScrollArea']>>
    >;

    QScrollObserver: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QScrollObserver']>>
    >;

    QSelect: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSelect']>>>;

    QSeparator: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSeparator']>>>;

    QSkeleton: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSkeleton']>>>;

    QSlideItem: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSlideItem']>>>;

    QSlideTransition: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSlideTransition']>>
    >;

    QSlider: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSlider']>>>;

    QSpace: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSpace']>>>;

    QSpinner: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSpinner']>>>;

    QSpinnerAudio: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerAudio']>>
    >;

    QSpinnerBall: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerBall']>>
    >;

    QSpinnerBars: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerBars']>>
    >;

    QSpinnerBox: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerBox']>>
    >;

    QSpinnerClock: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerClock']>>
    >;

    QSpinnerComment: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerComment']>>
    >;

    QSpinnerCube: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerCube']>>
    >;

    QSpinnerDots: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerDots']>>
    >;

    QSpinnerFacebook: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerFacebook']>>
    >;

    QSpinnerGears: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerGears']>>
    >;

    QSpinnerGrid: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerGrid']>>
    >;

    QSpinnerHearts: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerHearts']>>
    >;

    QSpinnerHourglass: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerHourglass']>>
    >;

    QSpinnerInfinity: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerInfinity']>>
    >;

    QSpinnerIos: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerIos']>>
    >;

    QSpinnerOrbit: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerOrbit']>>
    >;

    QSpinnerOval: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerOval']>>
    >;

    QSpinnerPie: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerPie']>>
    >;

    QSpinnerPuff: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerPuff']>>
    >;

    QSpinnerRadio: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerRadio']>>
    >;

    QSpinnerRings: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerRings']>>
    >;

    QSpinnerTail: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QSpinnerTail']>>
    >;

    QSplitter: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QSplitter']>>>;

    QStep: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QStep']>>>;

    QStepper: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QStepper']>>>;

    QStepperNavigation: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QStepperNavigation']>>
    >;

    QTabPanel: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTabPanel']>>>;

    QTabPanels: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTabPanels']>>>;

    QTable: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTable']>>>;

    QTd: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTd']>>>;

    QTh: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTh']>>>;

    QTr: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTr']>>>;

    QRouteTab: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QRouteTab']>>>;

    QTab: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTab']>>>;

    QTabs: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTabs']>>>;

    QTime: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTime']>>>;

    QTimeline: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTimeline']>>>;

    QTimelineEntry: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QTimelineEntry']>>
    >;

    QToggle: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QToggle']>>>;

    QToolbar: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QToolbar']>>>;

    QToolbarTitle: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QToolbarTitle']>>
    >;

    QTooltip: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTooltip']>>>;

    QTree: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QTree']>>>;

    QUploader: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QUploader']>>>;

    QUploaderAddTrigger: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QUploaderAddTrigger']>>
    >;

    QVideo: DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['QVideo']>>>;

    QVirtualScroll: DefineComponent<
      OmitDefaults<InstanceType<typeof import('quasar')['QVirtualScroll']>>
    >;
  }
}

export {};

a small script for this is

try {
// s is a string of all quasar components separated by newline
  const components = s
    .split('\n')
    .reduce((arr, component) => {
      if (!component) return arr;
      console.log('extracting', component);

      arr.push(`
     ${component} : DefineComponent<OmitDefaults<InstanceType<typeof import('quasar')['${component}']>>>;
    `);
      return arr;
    }, [])
    .join('\n');

  const built = `

  type OmitDefaults<T extends any> = Pick<T, Filter<keyof T, '$'>>;

  type Filter<Set, Needle extends string> = Set extends \`$\{Needle\}\$\{infer _X\}\` ? never : Set;

  declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    ${components}
  }
}

export {};
`;

  writeFileSync('./src/components.d.ts', built);
} catch (error) {
  console.log(error);
}

ontwikkelfabriek · 2021-09-09T12:01:22Z

ontwikkelfabriek
Sep 9, 2021

@soulsam480

This will help a lot of people.

Do you know why this is still necessary for Quasar components ? Is it because Quasar (v2) has not been rewritten in Typescript unlike Vue3 itself?

3 replies

soulsam480 Sep 9, 2021
Author

Reason is Volar doesn't support web types that vetur and quasar use for auto-completion. To get ts like auto-completion for global quasar components we need to do this. This is possible because the Quasar team provides ts definitions for props of all the components. see here for more info

hawkeye64 Sep 9, 2021
Maintainer

@IlCallo This looks useful

IlCallo Sep 9, 2021
Maintainer

Yep, already in the works, thanks @soulsam480 for providing a workaround until we support it natively!

yusufkandemir · 2021-09-09T14:13:08Z

yusufkandemir
Sep 9, 2021
Maintainer

I was playing around with it earlier, and here is my solution:

import { DefineComponent, ComponentPublicInstance } from 'vue';
import { QBtn, /* ... */ } from 'quasar';

declare module 'vue' {
  export interface GlobalComponents {
    QBtn: DefineComponent<Omit<QBtn, keyof ComponentPublicInstance>>;
    // ...
  }
}

export {};

This solution is simpler and maybe even safer because there are also some properties/methods that are not prefixed with $ like emits, render, etc.
@soulsam480 thanks for the solution and please let me know what you think about this solution 👏

1 reply

soulsam480 Sep 9, 2021
Author

oh yes this looks cleaner, good

johnsoncodehk · 2021-09-25T17:27:08Z

johnsoncodehk
Sep 25, 2021

Maybe some inspiration vuejs/language-tools#418 (comment)

0 replies

yusufkandemir · 2021-09-29T11:26:57Z

yusufkandemir
Sep 29, 2021
Maintainer

#10839 is merged. The next release will provide Volar support out of the box, with a bonus: event auto-completion support 🚀

3 replies

soulsam480 Sep 30, 2021
Author

cool, this will be inside a patch or minor release ?

hawkeye64 Sep 30, 2021
Maintainer

patch

soulsam480 Oct 10, 2021
Author

@yusufkandemir Upgraded to latest release, works great, Amazing work, thanks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make quasar components compatible with volar #10619

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Make quasar components compatible with volar #10619

soulsam480 Sep 9, 2021

Replies: 4 comments · 7 replies

ontwikkelfabriek Sep 9, 2021

soulsam480 Sep 9, 2021 Author

hawkeye64 Sep 9, 2021 Maintainer

IlCallo Sep 9, 2021 Maintainer

yusufkandemir Sep 9, 2021 Maintainer

soulsam480 Sep 9, 2021 Author

johnsoncodehk Sep 25, 2021

yusufkandemir Sep 29, 2021 Maintainer

soulsam480 Sep 30, 2021 Author

hawkeye64 Sep 30, 2021 Maintainer

soulsam480 Oct 10, 2021 Author

soulsam480
Sep 9, 2021

Replies: 4 comments 7 replies

ontwikkelfabriek
Sep 9, 2021

soulsam480 Sep 9, 2021
Author

hawkeye64 Sep 9, 2021
Maintainer

IlCallo Sep 9, 2021
Maintainer

yusufkandemir
Sep 9, 2021
Maintainer

soulsam480 Sep 9, 2021
Author

johnsoncodehk
Sep 25, 2021

yusufkandemir
Sep 29, 2021
Maintainer

soulsam480 Sep 30, 2021
Author

hawkeye64 Sep 30, 2021
Maintainer

soulsam480 Oct 10, 2021
Author