diff --git a/.gitignore b/.gitignore index 24a14172..0a2fc3d4 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ docs/assets/images/sprite.svg node_modules src/react cdn +web-types.json \ No newline at end of file diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js index 2e327791..e5912cd0 100644 --- a/custom-elements-manifest.config.js +++ b/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-', '')}` + }; + } }) ] }; diff --git a/docs/pages/getting-started/usage.md b/docs/pages/getting-started/usage.md index f8195e92..4032588e 100644 --- a/docs/pages/getting-started/usage.md +++ b/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! diff --git a/package-lock.json b/package-lock.json index 53853f7d..7351e3c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,6 +37,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", @@ -5687,6 +5688,15 @@ "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==", "dev": true }, + "node_modules/custom-element-jet-brains-integration": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.1.0.tgz", + "integrity": "sha512-wesa4OEvRQdxNzynk5ugU7ZRy0Ghkoaa6NmRGTqOASIng1hVaE3EKKO3rK11b4Y/pR3HUPIPKs1mRSnRCjHBfg==", + "dev": true, + "dependencies": { + "prettier": "^2.8.0" + } + }, "node_modules/custom-element-vs-code-integration": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/custom-element-vs-code-integration/-/custom-element-vs-code-integration-1.1.0.tgz", @@ -21507,6 +21517,15 @@ "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==", "dev": true }, + "custom-element-jet-brains-integration": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.1.0.tgz", + "integrity": "sha512-wesa4OEvRQdxNzynk5ugU7ZRy0Ghkoaa6NmRGTqOASIng1hVaE3EKKO3rK11b4Y/pR3HUPIPKs1mRSnRCjHBfg==", + "dev": true, + "requires": { + "prettier": "^2.8.0" + } + }, "custom-element-vs-code-integration": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/custom-element-vs-code-integration/-/custom-element-vs-code-integration-1.1.0.tgz", diff --git a/package.json b/package.json index b1781a64..00a17ff1 100644 --- a/package.json +++ b/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", diff --git a/scripts/build.js b/scripts/build.js index 08b686e9..d27793b5 100644 --- a/scripts/build.js +++ b/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); }); diff --git a/scripts/make-web-types.js b/scripts/make-web-types.js deleted file mode 100644 index 156ff2ba..00000000 --- a/scripts/make-web-types.js +++ /dev/null @@ -1,68 +0,0 @@ -// -// This script generates a web-types.json file from custom-elements.json for use with WebStorm/PHPStorm -// -// Docs: https://github.com/JetBrains/web-types -// -import commandLineArgs from 'command-line-args'; -import jsonata from 'jsonata'; -import fs from 'fs'; -import path from 'path'; - -const { outdir } = commandLineArgs({ name: 'outdir', type: String }); -const metadata = JSON.parse(fs.readFileSync(path.join(outdir, 'custom-elements.json'), 'utf8')); - -const jsonataExprString = `{ - "$schema": "http://json.schemastore.org/web-types", - "name": package.name, - "version": package.version, - "description-markup": "markdown", - "framework-config": { - "enable-when": { - "node-packages": [ - package.name - ] - } - }, - "contributions": { - "html": { - "elements": [ - modules.declarations.{ - "name": tagName, - "description": description, - "doc-url": $join(["https://shoelace.style/components/", $substringAfter(tagName, 'sl-')]), - "js": { - "properties": [ - members.{ - "name": name, - "description": description, - "value": { - "type": type.text - } - } - ], - "events": [ - events.{ - "name": name, - "description": description - } - ] - }, - "attributes": [ - attributes.{ - "name": name, - "description": description, - "value": { - "type": type.text - } - } - ] - } - ] - } - } -}`; - -const expression = jsonata(jsonataExprString); -const result = await expression.evaluate(metadata); - -fs.writeFileSync(path.join(outdir, 'web-types.json'), JSON.stringify(result, null, 2), 'utf8');