Merge pull request #2007 from ing-bank/feat/vs-code-custom-data

feat: expose vscode custom-data

.changeset/small-cows-tease.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+Added vs-code json file to enable auto-completion

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
 
 <lion-input name="firstName" label="First name"></lion-input>
 ```
+
+### 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.

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",
@@ -41,6 +44,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 +6914,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",
@@ -6965,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",
@@ -20639,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",
@@ -20692,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",
@@ -22361,7 +22393,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 +27939,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",
@@ -27950,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",
@@ -38621,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",
@@ -38662,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",

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",
@@ -68,6 +71,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",

packages/ui/.gitignore

@@ -1 +1,3 @@
-./docs
+./docs
+vscode.css-custom-data.json
+vscode.html-custom-data.json

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()] };