break-stuff / cem-plugin-vs-code-custom-data-generator Goto Github PK

I'm reporting this issue to track it but, unfortunately, I don't have time today to jump in and fix it myself. Consider the following property defined in Lit:

/** The button's variant. */
@property({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'default';

The resulting CEM data looks like this:

"attributes": [
  {
    "name": "variant",
    "type": {
      "text": "'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
    },
    "default": "'default'",
    "description": "The button's variant.",
    "fieldName": "variant"
  }
]

Note the extra single quotes shown in the default property. These end up in the autocomplete data:

Thanks for such a cool plugin!

I'm working on a JS-based LitElement custom element with JSCode comments, and I have a property called fixedWidth which I want to use as fixed-width for the HTML attribute. However, the plugin is generating the vscode.html-custom-data.json file with fixedWidth as the attribute name instead of fixed-width. I think it's due to this particular line:

If I reverse that to attr.name || attr.fieldName, then the json output seems correct to me (but perhaps that would inadvertently cause some other issue I'm not aware of).

Thoughts?

First, thank you for this plugin. We're using it to great success in our Lit component library.

I didn't see anything related to this yet, but I was wondering if there's any value in displaying a component's attributes in the contextual information tooltip? It's great to see all of an element's slots, events, etc. and - at least personally - would find it useful to see what attributes/props are available in the area.

With the way it works now, the autocomplete of attributes and their details works so long as you know what attribute you're looking for. If you could see the list of custom attributes alongside the slots and events , it can save time in looking them up.

Thoughts?

Hello, i'm not sure to have understood how to use this useful plugin.

• Install via repo manager as a dev dependency in a project (OK)
• create custom-elements-manifest.config.js file and export generateCustomData (correct?)
• edit settings.json introducing html-custom-data.json (where is this file from? is it something inside vsc?)
• tag mapping has to be done manually (correct?)

Thank you for clarifications

This plugin uses String.replaceAll() which wasn't introduced until Node 15. This causes a problem for Shoelace users running Node 14. See shoelace-style/shoelace#1172 for details.

I didn't see any mention of which Node versions are specifically supported in your repo. Are you OK with switching out replaceAll() with a regex instead to support Node 14+, or are you intentionally targeting a higher version?

Hi There,

Hoping this is the right place. Was looking at how shoelace makes the intelisense work and tried to do the same thing.
The results is in this repo but when doing so the vscode.css-custom-data.json file just came up empty.

• node 18
• clone https://github.com/infor-design/enterprise-wc

git checkout 1010-add-schemas
npm i
npx cem analyze

Diff -> https://github.com/infor-design/enterprise-wc/pull/new/1010-add-schemas
You can see that custom-elements.json looks right but vscode.html-custom-data.json is empty.

Any suggestions you can offer? Is this the only tool that puts custom-elements.json in vs code format?
Or any way to debug?

Also should https://github.com/break-stuff/cem-plugin-vs-code-custom-data-generator/blob/main/package.json#L34 be a devDependency ?

Thanks!

I noticed this doesn't have a license. I believe by default no license means usage is as restrictive as possible, but I don't know how all that works with it being published on npm.