Guidance on TypeScript completions in Vue

[zzzachzzz]

Hello, I was messing around with both webawesome and shoelace, and had some difficulty getting the types setup, for two criteria to be fulfilled:

• Autocompletion of component names, such as <wa-button>
• Type checking of component props/attributes

I was able to get autocompletion of global component names working by including this web-awesome-globals.d.ts file in my project's src/ directory:

import type { CustomElements } from '@awesome.me/webawesome/dist/custom-elements-jsx.d.ts'

declare module 'vue' {
  interface GlobalComponents extends CustomElements {}
}

However, I don't get type checking of props/attributes.

Is this a known limitation, or just something undocumented? I only see react type defs in the webawesome dist, whereas in shoelace it also included vue types.

[KonnorRogers]

👀 looks like we're not currently generating the Vue types

webawesome/packages/webawesome/custom-elements-manifest.js

Line 4 in c0ced13

// import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';

[claviska]

I commented this out because it randomly broke during the event rework, but I enabled it and it seems to be building fine now.

    //
    // TODO - figure out why this broke when events were updated
    //
    // customElementVuejsPlugin({
    //   outdir: './dist/types/vue',
    //   fileName: 'index.d.ts',
    //   componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js`
    // })

@KonnorRogers does this seem like a safe thing to re-enable now?

[eiswind]

It looks like this is still disabled, at least I cannot find anything in the 3.1 release. I hope this will be available soon :)

[KonnorRogers]

@eiswind still disabled, docs + enabling in PR started here:

#1895

[roydukkey]

Here is Vue's own documentation for adding TypeScript support for Non-Vue Web Components.

I have done something line this:

import type { ConditionalKeys, SetFieldType } from 'type-fest';
import type { EmitFn, HTMLAttributes, PublicProps } from 'vue';

/**
 * @see {@link https://vuejs.org/guide/extras/web-components.html#non-vue-web-components-and-typescript}
 */
export type DefineCustomElement<
  ElementType extends HTMLElement,
  Events extends EventMap = {},
  SelectedAttributes extends keyof ElementType = keyof ElementType
> = new () => ElementType & {
  /**
   * @deprecated Do not use the $props property on a Custom Element ref, this is for template prop types only.
   */
  $props: HTMLAttributes
    & Partial<
      // This allows attributes defined by WA as `number` to be defined as `string` in Vue templates.
      // That is `<progress-bar value="10" />` instead of `<progress-bar :value="10" />`
      SetFieldType<
        Pick<ElementType, SelectedAttributes>,
        ConditionalKeys<Pick<ElementType, SelectedAttributes>, number>,
        number | string
      >
    >
    & PublicProps;

  /**
   * @deprecated Do not use the $emit property on a Custom Element ref, this is for template prop types only.
   */
  $emit: VueEmit<Events>;
};

type EventMap = {
  [event: string]: Event;
}

type VueEmit<T extends EventMap> = EmitFn<{
  [K in keyof T]: (event: T[K]) => void
}>;

import type { DefineCustomElement } from './DefineCustomElement.js';
import type WaProgressBar from '@awesome.me/webawesome/dist/components/progress-bar/progress-bar.js';

declare module 'vue' {
  interface GlobalComponents {
    'wa-progress-bar': DefineCustomElement<
      WaProgressBar,
      {},
      // You can add here all of the properties that the component lists on their doc page.
      'value' | 'indeterminate' | 'label'
    >;
  }
}