JetBrains IDE Integration (#1512)

* upgrade vs code integration package

* add references

* add web-types plugin

* update reference

* run prettier

* update documentation

* run prettier

* remove test script

.gitignore

@@ -6,3 +6,4 @@ docs/assets/images/sprite.svg
 node_modules
 src/react
 cdn
+web-types.json

custom-elements-manifest.config.js

@@ -1,4 +1,5 @@
 import * as path from 'path';
+import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 import { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
@@ -200,6 +201,15 @@ export default {
           url: `https://shoelace.style/components/${tag.replace('sl-', '')}`
         }
       ]
+    }),
+    customElementJetBrainsPlugin({
+      excludeCss: true,
+      referencesTemplate: (_, tag) => {
+        return {
+          name: 'Documentation',
+          url: `https://shoelace.style/components/${tag.replace('sl-', '')}`
+        };
+      }
     })
   ]
 };

docs/pages/getting-started/usage.md

@@ -210,6 +210,12 @@ Shoelace ships with a file called `vscode.html-custom-data.json` that can be use
 
 If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take affect.
 
+## JetBrains IDEs
+
+If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Shoelace from NPM, the editor will automatically detect the `web-types.json` file from the package and you should immediately see component information in your editor.
+
+If you are installing from the CDN, you can [download a local copy](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace/cdn/web-types.json) and add it to the root of your project.
+
 ### Other Editors
 
 Most popular editors support custom code completion with a bit of configuration. Please [submit a feature request](https://github.com/shoelace-style/shoelace/issues/new/choose) for your editor of choice. PRs are also welcome!

package.json

@@ -6,7 +6,7 @@
   "author": "Cory LaViska",
   "license": "MIT",
   "customElements": "dist/custom-elements.json",
-  "web-types": "dist/web-types.json",
+  "web-types": "./web-types.json",
   "type": "module",
   "types": "dist/shoelace.d.ts",
   "jsdelivr": "./cdn/shoelace-autoloader.js",
@@ -95,6 +95,7 @@
     "command-line-args": "^5.2.1",
     "comment-parser": "^1.3.1",
     "cspell": "^6.18.1",
+    "custom-element-jet-brains-integration": "^1.1.0",
     "custom-element-vs-code-integration": "^1.1.0",
     "del": "^7.0.0",
     "download": "^8.0.0",

scripts/build.js

@@ -188,10 +188,6 @@ await nextTask('Wrapping components for React', () => {
   return execPromise(`node scripts/make-react.js --outdir "${outdir}"`, { stdio: 'inherit' });
 });
 
-await nextTask('Generating Web Types', () => {
-  return execPromise(`node scripts/make-web-types.js --outdir "${outdir}"`, { stdio: 'inherit' });
-});
-
 await nextTask('Generating themes', () => {
   return execPromise(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
 });
@@ -207,6 +203,7 @@ await nextTask('Running the TypeScript compiler', () => {
 // Copy the above steps to the CDN directory directly so we don't need to twice the work for nothing.
 await nextTask(`Copying Web Types, Themes, Icons, and TS Types to "${cdndir}"`, async () => {
   await deleteAsync(cdndir);
+  await copy('./web-types.json', `${outdir}/web-types.json`);
   await copy(outdir, cdndir);
 });