js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 02:59:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

add cem-custom-data-generator

Browse Source
This commit is contained in:
Cory LaViska
2022-11-16 12:47:34 -05:00
parent 66012a57c8
commit 48be3f46b8
6 changed files with 37 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
custom-elements-manifest.config.js
View File

@@ -1,10 +1,18 @@
import fs from 'fs';
import { generateCustomData } from 'cem-plugin-vs-code-custom-data-generator';
import commandLineArgs from 'command-line-args';
import { parse } from 'comment-parser';
import { pascalCase } from 'pascal-case';
const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
const { name, description, version, author, homepage, license } = packageData;
const { outdir } = commandLineArgs([
{ name: 'litelement', type: String },
{ name: 'analyze', defaultOption: true },
{ name: 'outdir', type: String }
]);
function noDash(string) {
return string.replace(/^\s?-/, '').trim();
}
@@ -148,6 +156,11 @@ export default {
}
});
}
}
},
// Generate custom VS Code data
generateCustomData({
outdir,
cssFileName: null
})
]
};

5
docs/getting-started/usage.md
View File

@@ -153,7 +153,7 @@ A clever way to use this method is to hide the `<body>` with `opacity: 0` and ad
### VS Code
Shoelace ships with a file called `vscode.html-custom-data.json` that can be used to describe its components to Visual Studio Code. This enables code completion for Shoelace components (also known as "code hinting" or "IntelliSense"). To enable it, you need to tell VS Code where the file is.
Shoelace ships with a file called `vscode.html-custom-data.json` that can be used to describe custom elements and CSS custom properties to Visual Studio Code. This enables code completion for Shoelace components (also known as "code hinting" or "IntelliSense"). To enable it, you need to tell VS Code where the file is.
1. [Install Shoelace locally](/getting-started/installation#local-installation)
2. Create a folder called `.vscode` at the root of your project
@@ -162,7 +162,8 @@ Shoelace ships with a file called `vscode.html-custom-data.json` that can be use
```js
{
"html.customData": ["./node_modules/@shoelace-style/shoelace/dist/vscode.html-custom-data.json"]
"html.customData": ["./node_modules/@shoelace-style/shoelace/dist/vscode.html-custom-data.json"],
"css.customData": ["./node_modules/@shoelace-style/shoelace/dist/vscode.css-custom-data.json"]
}
```

19
package-lock.json generated
View File

@@ -31,6 +31,7 @@
"@web/test-runner-playwright": "^0.9.0",
"bootstrap-icons": "^1.10.2",
"browser-sync": "^2.27.10",
"cem-plugin-vs-code-custom-data-generator": "^1.0.1",
"chalk": "^5.1.2",
"command-line-args": "^5.2.1",
"comment-parser": "^1.3.1",
@@ -3619,6 +3620,15 @@
"upper-case-first": "^2.0.2"
}
},
"node_modules/cem-plugin-vs-code-custom-data-generator": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cem-plugin-vs-code-custom-data-generator/-/cem-plugin-vs-code-custom-data-generator-1.0.1.tgz",
"integrity": "sha512-D01fe+FyZ53n+qVPEokt0GQnZL5YNhxQqPJP1JVQdWYEn7Tr6/jywgldTPB573BAsnuV18fbvuBNEfalAyujdQ==",
"dev": true,
"dependencies": {
"prettier": "^2.7.1"
}
},
"node_modules/chai-a11y-axe": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/chai-a11y-axe/-/chai-a11y-axe-1.4.0.tgz",
@@ -17803,6 +17813,15 @@
"upper-case-first": "^2.0.2"
}
},
"cem-plugin-vs-code-custom-data-generator": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cem-plugin-vs-code-custom-data-generator/-/cem-plugin-vs-code-custom-data-generator-1.0.1.tgz",
"integrity": "sha512-D01fe+FyZ53n+qVPEokt0GQnZL5YNhxQqPJP1JVQdWYEn7Tr6/jywgldTPB573BAsnuV18fbvuBNEfalAyujdQ==",
"dev": true,
"requires": {
"prettier": "^2.7.1"
}
},
"chai-a11y-axe": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/chai-a11y-axe/-/chai-a11y-axe-1.4.0.tgz",

1
package.json
View File

@@ -78,6 +78,7 @@
"@web/test-runner-playwright": "^0.9.0",
"bootstrap-icons": "^1.10.2",
"browser-sync": "^2.27.10",
"cem-plugin-vs-code-custom-data-generator": "^1.1.0",
"chalk": "^5.1.2",
"command-line-args": "^5.2.1",
"comment-parser": "^1.3.1",

1
scripts/build.js
View File

@@ -28,7 +28,6 @@ fs.mkdirSync(outdir, { recursive: true });
execSync(`node scripts/make-metadata.js --outdir "${outdir}"`, { stdio: 'inherit' });
execSync(`node scripts/make-search.js --outdir "${outdir}"`, { stdio: 'inherit' });
execSync(`node scripts/make-react.js --outdir "${outdir}"`, { stdio: 'inherit' });
execSync(`node scripts/make-vscode-data.js --outdir "${outdir}"`, { stdio: 'inherit' });
execSync(`node scripts/make-web-types.js --outdir "${outdir}"`, { stdio: 'inherit' });
execSync(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
execSync(`node scripts/make-icons.js --outdir "${outdir}"`, { stdio: 'inherit' });

58
scripts/make-vscode-data.js
View File

@@ -1,58 +0,0 @@
//
// This script generates vscode.html-custom-data.json (for IntelliSense).
//
// You must generate dist/custom-elements.json before running this script.
//
import commandLineArgs from 'command-line-args';
import fs from 'fs';
import path from 'path';
import { getAllComponents } from './shared.js';
const { outdir } = commandLineArgs({ name: 'outdir', type: String });
const metadata = JSON.parse(fs.readFileSync(path.join(outdir, 'custom-elements.json'), 'utf8'));
console.log('Generating custom data for VS Code');
const components = getAllComponents(metadata);
const vscode = { tags: [] };
components.map(component => {
const name = component.tagName;
const attributes = component.attributes?.map(attr => {
const type = attr.type?.text;
let values = [];
if (type) {
type.split('|').map(val => {
val = val.trim();
// Only accept values that are strings and numbers
const isString = val.startsWith(`'`);
const isNumber = Number(val).toString() === val;
if (isString) {
// Remove quotes
val = val.replace(/^'/, '').replace(/'$/, '');
}
if (isNumber || isString) {
values.push({ name: val });
}
});
}
if (values.length === 0) {
values = undefined;
}
return {
name: attr.name,
description: attr.description,
values
};
});
vscode.tags.push({ name, attributes });
});
fs.writeFileSync(path.join(outdir, 'vscode.html-custom-data.json'), JSON.stringify(vscode, null, 2), 'utf8');