Model-viewer: Include TypeScript type definitions on npm package

[aviggiano]

Description

I'm using this module on a TypeScript React app through npm and I've noticed that it is missing its type definitions.
More specifically, I'm interested in using the Scene Graph API without having to debug or deep dive into the examples and glTF documentation.

I'm currently using the following:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'model-viewer': ModelViewerJSX & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> ;
    }
  }
}

interface ModelViewerJSX {
  src: string
  poster?: string
  // ... others
}

interface ModelViewerElement extends Element {
  model: {
    materials: Array<{
      name: string,
      pbrMetallicRoughness: {
        setBaseColorFactor: ((x: [number, number, number, number]) => void),
        setMetallicFactor: ((x: number) => void),
        setRoughnessFactor: ((x: number) => void),

        baseColorTexture: null | {
          texture: {
            source: {
              setURI: ((x: string) => void),
            }
          }
        }
        metallicRoughnessTexture: null | {
          texture: {
            source: {
              setURI: ((x: string) => void),
            }
          }
        }
        // ... others
      }
    }>
  }
}

I believe these definitions are probably already inside the model-viewer repo, but are not getting exported to npm

Live Demo

N/A

Version

• model-viewer: v1.2.1

Browser Affected

• [ ] Chrome
• [ ] Edge
• [ ] Firefox
• [ ] IE
• [ ] Safari

OS

• [ ] Android
• [ ] iOS
• [ ] Linux
• [ ] MacOS
• [ ] Windows

[elalish]

Good call; we're TS internally, so I'll see if we can get our bundler to generate a proper .d.ts file.

[MariusVB]

Progress on this?

[elalish]

@MariusVB A contribution here would be much appreciated if anyone knows a tool that can create a top-level .d.ts file from a bundled library like ours. The alternative is maintaining the file manually, which seems awfully error-prone.

[MariusVB]

@elalish How about this https://github.com/microsoft/dts-gen?

[elalish]

@MariusVB Well, it looks like that probably won't generate complete typings, but you're welcome to give it a try. As I said, I would really like to have something that automatically produces the proper API typings (since all the type info in already contained in our TS source). If that's impossible, the second best would be some kind of test that checks that a manually-created .d.ts file is consistent with our source.

[Sheldonfrith]

What about the second answer in this thread (the one by magikMaker) https://stackoverflow.com/questions/12687779/how-do-you-produce-a-d-ts-typings-definition-file-from-an-existing-javascript ?

[elalish]

@Sheldonfrith The trouble is we want a .d.ts file for our public API, not for every internal class of the project. What we really want is this: https://github.com/microsoft/TypeScript/issues/4433, but while that's not making much progress I did just notice an interesting comment about this solution: https://github.com/Swatinem/rollup-plugin-dts, which is the most promising thing I've seen yet. May have to give that a try.