create types for using calcite components with preact + typescript

[paulcpederson]

While setting up CC with a preact project that used TypeScript I ran into a lot of problems. First, you get the "Property 'insert-calcite-tag-name' does not exist on type 'JSX.IntrinsicElements':

• JSX.IntrinsicElements error with typescript and react ionic-team/stencil#1090
• Can't use a Stencil library from a React + TS application ionic-team/stencil#1636

So you have to augment the intrinsic elements types with the custom tag names from calcite components. After you do that, then you realize that the event names don't work in preact if you use the events from the provided types. Ie onDropdownClose will never fire, you have to use ondropdownClose:

• Question about Custom Element events (camalcase vs pascalCase) preactjs/preact#2592

This is a temporary fix that uses a custom output target to generate an additional typescript file for preact. If we get the ds framework bindings up and running, we may be able to get rid of this, but for now it allows cc to be used in the TS + preact project by importing these types. note this ts file expects preact as a peer dependency.

/cc @nathan-barrett

[macandcheese]

🚀

[jcfranco]

Pretty cool, @paulcpederson!

How will these types be shipped/consumed? Do we need to add some info to the wiki?

note this ts file expects preact as a peer dependency.

It looks like preact is only needed to build the types, so maybe it needs to be added as a dev dependency to package.json too.

[paulcpederson]

@jcfranco yes, we should probably add a note about this somewhere. Essentially the consuming dev will have to point to these types from their ts config, I think. I don't think dev dependencies are installed for the end developer, and we don't need preact to build the types, so I think we're good not including it. If you're in the situation where you need to use cc with preact in a typescript environment, we can be relatively certain that you have preact installed.

I've just created an example in the examples repo with preact + typescript to verify that this works and it worked like a dream!

Here is the one line you need to add to get TS support in a preact project: https://github.com/ArcGIS/calcite-components-examples/pull/5/files#diff-d80b0fb3496bbde41afa09f1ef6556adR58

Once we release this I'll bump the version in that examples pr and open it for real.

[paulcpederson]

I've added a short note about this additional typings file in the readme.md inside the TypeScript section.