Make it possible to extend the component analyzer with custom logic

[mantou132]

~/lit-analyzer/packages/vscode-lit-plugin [master|✚ 1] 
00:40 $ npm i

> lit-html@1.11.0 postinstall /Users/mantou/lit-analyzer/packages/vscode-lit-plugin/node_modules/lit-html
> node ./node_modules/vscode/bin/install

internal/modules/cjs/loader.js:626
    throw err;
    ^

Error: Cannot find module '/Users/mantou/lit-analyzer/packages/vscode-lit-plugin/node_modules/lit-html/node_modules/vscode/bin/install'

There is also a type error in file ~/lit-analyzer/packages/vscode-lit-plugin/src/extension.ts:

Thank you for providing such a useful tool. I now want to add a custom command to my own .

[runem]

First of all, I'm really happy that you like the tool! :-)

Which custom command are you interested in adding? Does it add value for others (so it could be added to this repo), or would there instead be value in exposing an API to extend lit-analyzer with custom rules?

The problem with npm install that you are experiencing is due to how vscode want us to ship/build extensions. For example, they don't support symlinks when doing local development. As this is a mono-repo with 3 libs (with symlinks between them) I did some things to achieve good local development, but without symlinks. First of all, I you will have to install vscode-lit-plugin using npm run install:safe because it's important that scripts don't run when installing.

You see the type error because lit-analyzer with securitySystem hasn't yet been shipped. To avoid symlinks I don't symlink specifically to packages/lit-analyzer/node_modules but instead install the latest version from NPM without securitySystem. Therefore you can fix the type-problem by running npm run copylink from the root. This command will copy lib-files from lit-analyzer and ts-lit-plugin into node_modules for vscode-lit-plugin so you will get the benefits of local development.

You can read more about it in the CONTRIBUTING.md

Also, please run npm install and npm run bootstrap from the root of the repository (you don't have to cd into the packages in order to install). This command will setup all dependencies. Also remember to run npm run copylink if you want to see changes from lit-analyzer reflected in vscode-lit-plugin. Finally, you can open vscode from packages/vscode-lit-plugin in order to debug the plugin.

Hope everything makes sense and please ask if you have any problems/questions :+1:

[mantou132]

Sorry, I forgot to see CONTRIBUTING.md 😅

The API I designed looks like this:

import { GemElement, html, property, attribute, emitter, customElement } from '../../';

export type Message = number[];

/**
 * @attr first-name
 * @attr last-name
 * @slot light
 * @fires sayhi
 * @fires load
 */
@customElement('app-children')
export class Children extends GemElement {
  @attribute firstName: string;
  @attribute lastName: string;
  @property message: Message;
  @emitter sayHi: Function;
  @emitter load: Function;

  mounted = () => {
    setTimeout(() => this.load(new Date()), 1000);
  };

  render() {
    return html`
      <p>
        attributes:
        <span>${this.firstName}</span>
        <span>${this.lastName}</span>
      </p>
      <p>properties: ${JSON.stringify(this.message)}</p>
      <slot name="light"></slot>
      <button @click=${this.sayHi}>say hi</button>
    `;
  }
}

At the moment it looks like have to write jsdoc comment, i want to add these automatically with a single command, also, I don't know how to complete this feature.

[runem]

It actually seems like you would like to create a custom component flavor instead of a lit-analyzer rule. I also maintain web-component-analyzer that analyzes web components, and this would have to be extended with a "custom flavor" in order for it to understand your API. If you would like to to that you can clone that repo and create your own flavor, but right now there is however no way to use your custom flavor when running lit-analyzer. Therefore I would also have to extend lit-analyzer with the ability to run a custom web-component-analyzer-flavor when analyzing.

Is it okay if I rename the issue title to reflect the above-mentioned? :-)