[w3c/webcomponents] Editor support for WebComponents (#776)

Hi, this is Pine from VS Code team. I'm working on expanding our HTML Language Server to [better support WebComponents](https://github.com/Microsoft/vscode/issues/62976). I'd like to get some feedback from the WebComponents commitee / community on implementing WC editor support.

I also work on [Vue Language Server](https://github.com/vuejs/vetur/tree/master/server) where I'm already shipping [such support for Vue-based frameworks](https://vuejs.github.io/vetur/framework.html).

## Current Status

https://github.com/octref/web-components-examples

![demo](https://user-images.githubusercontent.com/4033249/49249638-977bfd80-f3d1-11e8-9a57-f905fd7248e2.gif)

- User includes `web-components.json` and `web-component-attributes.json` in a project
- User points to these JSON files with `html.experimental.custom.tags` and `html.experimental.custom.attributes` configurations
- VS Code gets HTML completion and hover for the custom tags / attributes. 

## Some Background

- The TypeScript community has adopted [Type Definition Files](https://github.com/DefinitelyTyped/DefinitelyTyped), which drives the completions, hover messages and many other language features in [VS Code](https://code.visualstudio.com/docs/languages/typescript) and other editors through [javascript-typescript-langserver](https://github.com/sourcegraph/javascript-typescript-langserver).
- Through [Language Server Protocol](https://microsoft.github.io/language-server-protocol/), HTML Language Server in VS Code can be used in [other editors](https://atom.io/packages/ide-html) too.

## Use Cases

The main two use cases are:

- Someone ships `my-wc-libs` library. He includes `web-components.json` in his NPM distribution (similar to packages include `d.ts` files for TypeScript) and puts `webComponents: "./web-components.json` in his `package.json`. VS Code finds the JSON files to enhance its HTML support.
- Someone just wrote `my-component.js` locally in a project. It would be awesome if an Analyzer (non-existent yet) would figure out the `customElements.define` calls, generate such JSON files and feed them to the HTML Language Server to enhance its functionalities. When the user navigates to a HTML file, he should get HTML completions for the WebComponent he just defined.

## Discussions

I'd like to get some input for questions below. But if you have other questions / concerns, feel welcome to chime in.

- What are some additional editor features that could be implemented for Web Components? For example, jump to definition on `<my-component>` in HTML goes to the JS source where the component is defined?
- Would the WebComponents committee be interested in specifying a format for such JSON files?
- Would WebComponents implement an Analyzer, similar to [Polymer Analyzer](https://github.com/Polymer/tools/tree/master/packages/analyzer) for generating such JSON files on-the-fly?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/776

Received on Thursday, 29 November 2018 20:41:45 UTC