From 4fd647d20e04b7548ddf633e1b32a72cdf48ac0c Mon Sep 17 00:00:00 2001 From: Ryan Waskiewicz Date: Thu, 18 Apr 2024 08:48:41 -0400 Subject: [PATCH] docs(readme): improve usage section be more explicit about how to go about using this and getting intellisense working --- README.md | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d8d16ff..e001ba9 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ The `docs-web-types` output target tells Stencil to generate a JSON file contain This is an opt-in feature and will save a JSON file containing [web-types](https://plugins.jetbrains.com/docs/intellij/websymbols-web-types.html#file-structure) in a directory specified by the output target. Once the feature is enabled and your IDE is informed of the JSON file's location, HTML files can gain code editing features similar to TSX files. -## Enabling +## Set Up The web-types output target is not built in to Stencil itself. Instead, it's a third party package, that needs to be installed as a dev dependency: @@ -38,20 +38,25 @@ export const config: Config = { }; ``` -By default, Stencil assumes that the file will be generated in the project's root directory. +To generate the JSON file, have Stencil build your project. +Stencil will write a `web-types.json` to your project's root directory. + +## Usage + +Web Types for your project can be picked by JetBrains IDEs by setting the `web-types` property in your project's `package.json` file: -Be sure to add the following to your `package.json`'s root level object: ```json { "name": "your-projects-name", "version": "1.0.0", "//": "Other details omitted", - "web-type": "./web-types.json" + "web-types": "./web-types.json" } ``` -To generate the JSON file, have Stencil build your project. +Having this file locally on disk will allow your JetBrains IDE to pick up additional typings automatically. +To provide these IDE-specific typings to users of your library, be sure to include the generated web-types file in your package's distributable by adding it to your `package.json#files` array. ## References -https://plugins.jetbrains.com/docs/intellij/websymbols-web-types.html#file-structure \ No newline at end of file +https://plugins.jetbrains.com/docs/intellij/websymbols-web-types.html#file-structure