break-stuff / cem-plugin-vs-code-custom-data-generator Goto Github PK
View Code? Open in Web Editor NEWA custom elements manifest analyzer plugin to generate a custom data file for VS Code.
License: MIT License
A custom elements manifest analyzer plugin to generate a custom data file for VS Code.
License: MIT License
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.