From d620dade553425762d0c8560b1fc74935d41423f Mon Sep 17 00:00:00 2001 From: Thijs Louisse Date: Thu, 8 Jun 2023 17:22:58 +0200 Subject: [PATCH 1/2] feat: expose vscode custom-data --- package-lock.json | 21 ++++++++++++++++++- package.json | 1 + packages/ui/.gitignore | 4 +++- .../ui/custom-elements-manifest.config.js | 3 +++ 4 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 packages/ui/custom-elements-manifest.config.js diff --git a/package-lock.json b/package-lock.json index 4720bd539..1b4bea3fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "@yarnpkg/lockfile": "^1.1.0", "babel-polyfill": "^6.26.0", "bundlesize": "^1.0.0-beta.2", + "cem-plugin-vs-code-custom-data-generator": "^1.4.1", "chai": "^4.2.0", "chalk": "^4.1.0", "concurrently": "^5.2.0", @@ -6910,6 +6911,15 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/cem-plugin-vs-code-custom-data-generator": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/cem-plugin-vs-code-custom-data-generator/-/cem-plugin-vs-code-custom-data-generator-1.4.1.tgz", + "integrity": "sha512-mulzg6I2wJVNKCM9ml4ttxTnGK25kHHdkhX979vbrKwSIIplFnPOgGa0Sj14pQWnfDwbGr6pSbLgBmi4nVHFxA==", + "dev": true, + "dependencies": { + "prettier": "^2.7.1" + } + }, "node_modules/center-align": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", @@ -22361,7 +22371,7 @@ }, "packages/ui": { "name": "@lion/ui", - "version": "0.2.2", + "version": "0.3.0", "license": "MIT", "dependencies": { "@bundled-es-modules/message-format": "^6.0.4", @@ -27907,6 +27917,15 @@ "resolved": "https://registry.npmjs.org/ccount/-/ccount-1.1.0.tgz", "integrity": "sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==" }, + "cem-plugin-vs-code-custom-data-generator": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/cem-plugin-vs-code-custom-data-generator/-/cem-plugin-vs-code-custom-data-generator-1.4.1.tgz", + "integrity": "sha512-mulzg6I2wJVNKCM9ml4ttxTnGK25kHHdkhX979vbrKwSIIplFnPOgGa0Sj14pQWnfDwbGr6pSbLgBmi4nVHFxA==", + "dev": true, + "requires": { + "prettier": "^2.7.1" + } + }, "center-align": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", diff --git a/package.json b/package.json index 9830263ef..8a04e6b21 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "@yarnpkg/lockfile": "^1.1.0", "babel-polyfill": "^6.26.0", "bundlesize": "^1.0.0-beta.2", + "cem-plugin-vs-code-custom-data-generator": "^1.4.1", "chai": "^4.2.0", "chalk": "^4.1.0", "concurrently": "^5.2.0", diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore index ffcee8577..9dbb92187 100644 --- a/packages/ui/.gitignore +++ b/packages/ui/.gitignore @@ -1 +1,3 @@ -./docs \ No newline at end of file +./docs +vscode.css-custom-data.json +vscode.html-custom-data.json \ No newline at end of file diff --git a/packages/ui/custom-elements-manifest.config.js b/packages/ui/custom-elements-manifest.config.js new file mode 100644 index 000000000..acb913d53 --- /dev/null +++ b/packages/ui/custom-elements-manifest.config.js @@ -0,0 +1,3 @@ +import { generateCustomData } from 'cem-plugin-vs-code-custom-data-generator'; + +export default { plugins: [generateCustomData()] }; From 33c0ff13dad890e8b35841ca8b74ab5e01d90cc8 Mon Sep 17 00:00:00 2001 From: Konstantinos Norgias Date: Thu, 8 Jun 2023 17:38:47 +0200 Subject: [PATCH 2/2] chore: add changeset & docs on how to enable VS Code autocomplete --- .changeset/small-cows-tease.md | 5 ++++ docs/guides/how-to/get-started.md | 13 ++++++++++ package-lock.json | 41 +++++++++++++++++++++++++++++++ package.json | 3 +++ 4 files changed, 62 insertions(+) create mode 100644 .changeset/small-cows-tease.md diff --git a/.changeset/small-cows-tease.md b/.changeset/small-cows-tease.md new file mode 100644 index 000000000..727d27cca --- /dev/null +++ b/.changeset/small-cows-tease.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +Added vs-code json file to enable auto-completion diff --git a/docs/guides/how-to/get-started.md b/docs/guides/how-to/get-started.md index a46ea7f99..b708a4246 100644 --- a/docs/guides/how-to/get-started.md +++ b/docs/guides/how-to/get-started.md @@ -75,3 +75,16 @@ You can also use the lion elements directly, although this is likely not a commo ``` + +### Code Completion for VS Code + +The @lion/ui package includes a file named vscode.html-custom-data.json that allows you to define custom elements to be recognized by Visual Studio Code. This enables code completion for @lion/ui components. To activate this feature, follow these steps after having installed `@lion/ui`: + +1. Navigate to the root of your project +2. Add the following to root level of object in file `.vscode/settings.json` (create file if it doesn't exist): + +```json + "html.customData": ["./node_modules/@lion/ui/vscode.html-custom-data.json"] +``` + +3. Restart your Visual Studio Code for the changes to take effect. diff --git a/package-lock.json b/package-lock.json index 1b4bea3fa..dec66d122 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,9 @@ "packages/*", "packages-node/*" ], + "dependencies": { + "changeset": "^0.2.6" + }, "devDependencies": { "@babel/core": "^7.10.1", "@bundled-es-modules/fetch-mock": "^6.5.2", @@ -6975,6 +6978,15 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/changeset": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/changeset/-/changeset-0.2.6.tgz", + "integrity": "sha512-d21ym9zLPOKMVhIa8ulJo5IV3QR2NNdK6BWuwg48qJA0XSQaMeDjo1UGThcTn7YDmU08j3UpKyFNvb3zplk8mw==", + "dependencies": { + "udc": "^1.0.0", + "underscore": "^1.8.3" + } + }, "node_modules/character-entities": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz", @@ -20649,6 +20661,11 @@ "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==", "dev": true }, + "node_modules/udc": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/udc/-/udc-1.0.1.tgz", + "integrity": "sha512-jv+D9de1flsum5QkFtBdjyppCQAdz9kTck/0xST5Vx48T9LL2BYnw0Iw77dSKDQ9KZ/PS3qPO1vfXHDpLZlxcQ==" + }, "node_modules/uglify-js": { "version": "3.17.4", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz", @@ -20702,6 +20719,11 @@ "node": ">=0.10.0" } }, + "node_modules/underscore": { + "version": "1.13.6", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz", + "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==" + }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -27969,6 +27991,15 @@ "supports-color": "^7.1.0" } }, + "changeset": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/changeset/-/changeset-0.2.6.tgz", + "integrity": "sha512-d21ym9zLPOKMVhIa8ulJo5IV3QR2NNdK6BWuwg48qJA0XSQaMeDjo1UGThcTn7YDmU08j3UpKyFNvb3zplk8mw==", + "requires": { + "udc": "^1.0.0", + "underscore": "^1.8.3" + } + }, "character-entities": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz", @@ -38640,6 +38671,11 @@ "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==", "dev": true }, + "udc": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/udc/-/udc-1.0.1.tgz", + "integrity": "sha512-jv+D9de1flsum5QkFtBdjyppCQAdz9kTck/0xST5Vx48T9LL2BYnw0Iw77dSKDQ9KZ/PS3qPO1vfXHDpLZlxcQ==" + }, "uglify-js": { "version": "3.17.4", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz", @@ -38681,6 +38717,11 @@ "integrity": "sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==", "dev": true }, + "underscore": { + "version": "1.13.6", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz", + "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==" + }, "unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", diff --git a/package.json b/package.json index 8a04e6b21..ee544568c 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,9 @@ "packages/*", "packages-node/*" ], + "dependencies": { + "changeset": "^0.2.6" + }, "devDependencies": { "@babel/core": "^7.10.1", "@bundled-es-modules/fetch-mock": "^6.5.2",