[ENHANCEMENT REQUEST] types for <tableau-viz> custom element

[jamesarosen]

The @tableau/embedding-api README says,

Warning: If your embedded vizzes are in environments where you do not control the deployed version of Tableau, like Tableau Public or Tableau Cloud, it is recommended to import the Embedding API library from the server itself—not installing it from NPM—since the server will always provide the latest compatible version. See Where to get the Embedding API v3 library for more information.

Following that practice, I have loaded the library from Tableau Cloud and used the <tableau-viz> custom element to embed Tableau. That works.

Problem: there are no types defined for that custom element. I can't set attributes or add handlers in a typesafe way.

I can import TableauViz, which has properties like hideTabs, but that's a JavaScript property, not a custom element attribute. The attribute is hide-tabs, and the only reference to that is in TableauWebComponent.prototype.attributeChangedCallback.

[jamesarosen]

For now, I'm using the following workaround:

declare namespace JSX {
  interface IntrinsicElements {
    /**
     * The interface for the top level Viz object.
     * @see https://embedding.tableauusercontent.com/preview/interfaces/viz.html
     */
    'tableau-viz': Pick<Partial<HTMLIFrameElement>, 'height' | 'width'> & {
      device?: 'default' | 'desktop' | 'phone' | 'tablet';
      height?: number | string;
      'iframe-auth'?: string;
      src: string;
      token: string;
      toolbar?: 'bottom' | 'hidden' | 'top';
      width?: number | string;
    };
  }
}

But I need to maintain that myself and it's missing many valid properties as well as the custom event handlers.