FASTElement support

[janechu]

Can you add support for elements created with FASTElement?

Some relevant documentation.

The FASTElement uses the decorator @attr for attributes, currently if I try to point at a component using FASTElement it will place all TypeScript information into the description property, see:

{
  "version": 1,
  "tags": [
    {
      "name": "fast-anchor",
      "description": "Properties:\n\n  * `appearance` {`AnchorAppearance`} - \n\n  * `download` {`string`} - \n\n  * `href` {`string`} - \n\n  * `hreflang` {`string`} - \n\n  * `ping` {`string`} - \n\n  * `referrerpolicy` {`string`} - \n\n  * `rel` {`string`} - \n\n  * `target` {`\"_self\" | \"_blank\" | \"_parent\" | \"_top\"`} - \n\n  * `type` {`string`} - \n\n  * `$fastController` - \n\n  * `start` {`HTMLSlotElement`} - \n\n  * `startContainer` {`HTMLSpanElement`} - \n\n  * `end` {`HTMLSlotElement`} - \n\n  * `endContainer` {`HTMLSpanElement`} - ",
      "attributes": []
    }
  ],
  "globalAttributes": [],
  "valueSets": []
}

It also runs into the same issue noted in #163 where we actually define the element in the @customElement which results in no files being generated, the above was generated by adding customElements.define("fast-anchor", FASTAnchor); in the same file where the custom element was created.

[runem]

Thanks for opening this issue!

After reading through the documentation, here's a summary of what I will support. Please correct me if I missed anything:

• FASTElement.define(MyElement) for defining elements (this will go and search static definition for a property called name)
• FASTElement.define(MyElement, myDefinition);
• @customElement("my-checkbox") for defining elements
• @customElement({ name: 'name-tag' }) for defining elements
• @attr for defining attributes (attribute: "my-attribute") to further specify the attribute name
• static definition = { attributes: [ ... ] } for defining attributes/properties

I will also build support for analyzing components extending classes from @microsoft/fast-foundation. Because the typings analyzed when extending a declaration from that library are not entirely statically analyzable (they don't contain decorators such as @attr) I will have to emit attributes manually when using those declarations. I can do that by going through https://github.com/microsoft/fast/tree/master/packages/web-components/fast-foundation/src to store which attributes a given declaration contributes with.

[janechu]

A set of exported web components using @customElement can be found in @microsoft/fast-components which extends from @microsoft/fast-foundation source here - https://github.com/microsoft/fast/tree/master/packages/web-components/fast-components/src.

The "foundation" package is more for the templating and other non-styled re-usable pieces so the components are not actually from there.

Edit: I think everything else makes sense, appreciate your work on this lib!

[EisenbergEffect]

Thank you for being willing to work on this @runem !

We think this will be amazing for the community that is growing around FAST and continue to help web components to grow in adoption across the industry. Again, thank you for working on this library and working with us.

One note I'll make is that you can probably de-prioritize the support for analyzing components extends classes, at least for us for now. We're probably going to shift our internal patterns for our foundation components so that this technique isn't used as much (or maybe at all). We still think it's valuable, but it does seem like a lot of extra work and quite a bit more complicated. So, I wanted to let you know that we see this as less important than the other standard patterns.

[tommck]

Aw.. I was sad to see that this wasn't done yet