Matsuuu / custom-elements-language-server

Custom Elements Language Server provides useful language features for Web Components. Features include code actions, completions, diagnostics and more.
BSD 3-Clause "New" or "Revised" License
84 stars 0 forks source link

Add ability to auto-convert from attribute/property #18

Open jpzwarte opened 1 year ago

jpzwarte commented 1 year ago
  1. Start typing <x-foo prop=${ and detect that you're entering an expression and auto-convert to <x-foo .prop=${
  2. Start typing <x-foo .prop="x and detect that you're entering a static attribute and auto-convert to <x-foo prop="x

Both depend on @property({ reflect: true }) prop;

Matsuuu commented 1 year ago

Minimal representation of a class that has a reflected prop/attribute: https://custom-elements-manifest.netlify.app/?source=CmNsYXNzIE15RWxlbWVudCBleHRlbmRzIEhUTUxFbGVtZW50IHsKICBzdGF0aWMgZ2V0IG9ic2VydmVkQXR0cmlidXRlcygpIHsKICAgIHJldHVybiBbJ3Byb3AnXTsKICB9CgogIHNldCBwcm9wKHZhbCkgewogICAgdGhpcy5fX3Byb3AgPSB2YWw7CiAgfQogIGdldCBwcm9wKCkgewogICAgcmV0dXJuIHRoaXMuX19wcm9wOwogIH0KfQoKY3VzdG9tRWxlbWVudHMuZGVmaW5lKCdteS1lbGVtZW50JywgTXlFbGVtZW50KTsK&library=null

As Custom Elements Language Server feeds through CEM instead of e.g. Lit specific tags, we need to acquire this info by checking if the field exists in both, thje attributes and the members of given class.

Having this kind of "code helper" is something that needs to be toggleable through settings as some developers might find it annoying.

On top of that, I'm not 100% if we can "intersect" the typing of the user, this needs to be looked at a bit before implementing. Another way to approach this would be through a code action, changing the attribute to a property, and vice versa.

jpzwarte commented 1 year ago

On top of that, I'm not 100% if we can "intersect" the typing of the user, this needs to be looked at a bit before implementing. Another way to approach this would be through a code action, changing the attribute to a property, and vice versa.

Yeah, that would work as well. And I have you format-on-save in vscode, it would practically be the same.