Support other web components libraries and syntaxes

[Matsuuu]

Provide support for different WC libs and their approaches.

• Different ways to mark a template region (html,, JSX, etc.)
• Different property / attribute / event accessors

Avoid creating a maintenance hell, but have a clear, approachable way to implement these

[EisenbergEffect]

I'd definitely love to see support for FAST 😄 I haven't worked on a language server before so I'm not sure what's involved but I can easily answer any questions about FAST in the meantime as can @chrisdholt. If the language server can be pluggable and provide me some patterns to follow, then maybe I can jump in and help out with the implementation with a bit of guidance from you.

[Matsuuu]

@EisenbergEffect Yes, having general support for the most popular libs should be on the backlog.

What I'd love to have for every framework/platform that wants support is an example project.

So if you have an project that showcases the general structure, components, etc. of FAST, I'd love a link and see how it works with it

[EisenbergEffect]

That sounds totally reasonable. @Chrisdholt Can you meet sometime next week to discuss? If we could put something together for @Matsuuu that would really help him. The advantage to our community of having this tooling would be huge.

[chrisdholt]

That sounds totally reasonable. @chrisdholt Can you meet sometime next week to discuss? If we could put something together for @Matsuuu that would really help him. The advantage to our community of having this tooling would be huge.

Yep, let’s figure out a time!

[Matsuuu]

Heya @EisenbergEffect @chrisdholt !

Have yall had time to check out and cobble together a small FAST project with CEM generation I could take a look at and see how the CE LS works with it?

I'm currently finalizing some large CEM generation ground work in the LSP side and a part of it is providing a better support for different kinds of projects out of the box.

With an example FAST project, I could see if you could get up and running writing FAST components with the language server, and what still needs to be worked on

[EisenbergEffect]

Thanks for pinging this issue @Matsuuu. A lot has changed in my life since I originally posted here, particularly a big change in job. Being in the process of building a new business, I have very limited time to contribute to open-source projects. I've been focusing all that time on contributing directly to W3C efforts lately. So, I don't think I'll be able to help out here unfortunately.

Hopefully @chrisdholt or someone from Microsoft can put this together for you.

[Matsuuu]

Heya! Reviving this a bit as I'm now supporting more file formats.

Can I get syntax examples on the following

• Setting an attribute on a FAST element
• Setting a property on an FAST element
• Setting a event listener for FAST element
• Setting a boolean variable for a FAST element.

e.g. For like the property binding is <my-el .prop=${1+1}>

[EisenbergEffect]

FAST Syntax

Attributes have no special syntax, properties are prepended with :, boolean attributes are prepended with ?, and events are prepended with @. For dynamic, data-bound values, all three of these accept a lambda function where the first parameter is the instance of the web component itself.

Setting Attributes

Static Value

<my-el attr="value"></my-el>

Dynamic Value

<my-el attr="${x => x.value}"></my-el>

Setting Properties

Static Value

<my-el :property="value"></my-el>

Dynamic Value

<my-el :property="${x => x.value}"></my-el>

Setting Boolean Attributes

Static Value

<my-el ?attr="value"></my-el>

Dynamic Value

<my-el ?attr="${x => x.value}"></my-el>

Adding an Event Listener

<my-el @event="${x => x.myCallback()}"></my-el>

[chrisdholt]

Edit: Use Rob's above from a minute ago 😆

I think the below should handle it.

Heya! Reviving this a bit as I'm now supporting more file formats.

Can I get syntax examples on the following

• Setting an attribute on a FAST element Attribute:

  <my-el foo="${x => x.foo}">

• Setting a property on an FAST element Boolean attribute:

  <my-el :foo="${x => x.foo}">

• Setting a event listener for FAST element Boolean attribute:

  <my-el @click="${(x, c) => x.handleClick(c.event)}">

• Setting a boolean variable for a FAST element. Boolean attribute:

  <my-el ?foo="${x => x.foo}">

[Matsuuu]

Cheers lads!

The current implementation already supports the @ annotation and the lit specific . annotation. I'll be sure to add the : property assignment to the set and look into supporting boolean attributes through ?

[Matsuuu]

Version 1.0.2 should support FAST at a somewhat comprehensible level.

Added support for the :prop syntax, added some CEM defaults to analyze FAST etc.