docs(vue): add a Vue example file (#77)

Web types are not only useful for HTML files in IntelliJ IDEs, but Vue
files as well. This commit adds an example Vue file that mirrors the
HTML example file (`example/src/example.vue`).

This new Vue file is _not_ wired up to any development server/project.
Folks wishing to "test it out" are asked to open the file in an IntelliJ
IDE, as that's where the functionality of this project can be seen.

Misc. updates/rewordings are also included in this commit that I came
across while updating the documentation

README.md

@@ -17,29 +17,29 @@
   </a>
 </p>
 
-A Stencil output target for generating [web types](https://plugins.jetbrains.com/docs/intellij/websymbols-web-types.html#file-structure) to provide intellisense for Stencil components in HTML files.
+A Stencil output target for generating [web types](https://plugins.jetbrains.com/docs/intellij/websymbols-web-types.html#file-structure) to provide intellisense for Stencil components in HTML and Vue files.
 
 > [!NOTE]
 > This package follows [semantic versioning](https://semver.org).
 > Small breaking changes to the API may occur prior to hitting v1.0.
 
 ## Overview
 
-One of the core features of web components is the ability to create [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements), which allow developers to reuse custom functionality defined by their components.
+One of the core features of web components is the ability to create [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).
 When Stencil compiles a project, it generates a custom element for each component in the project.
 
 By default, integrated development environments (IDEs) like JetBrains' WebStorm are not aware of a project's custom elements.
-This causes the IDE to often warn developers that it doesn't have any information about their custom elements, and results in a poorer developement experience.
+This causes the IDE to often warn developers that it doesn't have any information about their custom elements, and results in a poorer development experience.
 In order to enable more intelligent features in JetBrains products, such as auto-completion, hover tooltips, etc., developers need to inform it of their project's custom elements.
 
 The `webTypesOutputTarget` output target tells Stencil to generate a JSON file containing this information.
 
 This is an opt-in feature and will write a JSON file containing web types in a directory specified by the output target.
-Once the feature is enabled and your IDE is informed of the JSON file's location, writing code in HTML files will have similar intellisense to that of TSX files.
+Once the feature is enabled and your IDE is informed of the JSON file's location, writing code in HTML and Vue files will have similar intellisense to that of TSX files.
 
 ## Set Up
 
-The output target is not built in to Stencil itself.
+The output target is not built into Stencil itself.
 It's a third party package, that needs to be installed as a dev-dependency:
 ```bash
 $ npm i --save-dev @stencil-community/web-types-output-target

example/readme.md

@@ -2,12 +2,12 @@
 
 # `@stencil-community/web-types-output-target` Example Project
 
-This project demonstrates the usage of the `@stencil-community/web-types-output-target` output target.
+This project demonstrates the usage of the `@stencil-community/web-types-output-target` output target to get Intellisense in HTML and Vue files.
 
 ## Set Up
 
-To set up this project, you may either first build the output target from source, or override this project's dependency on `@stencil-community/web-types-output-target` with a version published to the NPM registry.
-Both allow you to take the output target for a 'test drive' - however, the former will allow you to try out potentially unreleased functionality.
+To set up this project, you must either first build the output target from source, or override this project's dependency on `@stencil-community/web-types-output-target` with a version published to the NPM registry.
+Both allow you to take the output target for a 'test drive' - however, the former will allow you to try out any unreleased functionality.
 
 After setting up the dependencies, continue to the next section.
 
@@ -33,5 +33,5 @@ To build the project, run the following from this directory:
 $ npm run build
 ```
 
-Upon build, open the [example index.html file](./src/index.html) in your JetBrains IDE.
+Upon build, open the [example index.html file](./src/index.html) or [example Vue file](./src/example.vue) in your JetBrains IDE.
 Hover over components to see how JSDoc descriptions, deprecation tags, default and required values, etc. are now populated in the editor.

example/src/example.vue

@@ -0,0 +1,46 @@
+<!-- Note: This Vue file is not wired up to any webserver. It is solely for demonstration purposes in the IDE -->
+
+<!-- For any of the components in this file, right-clicking on the tag name->"Go To"->"Declaration or Usages" will -->
+<!-- take you to the component's class definition file. -->
+
+<template>
+  <!-- After setup, hover over the component name and each of the props -->
+  <!--
+       - my-component will have its description pulled from its JSDoc
+       - first will have its description pulled from its JSDoc. Its required status will be reported (hint: try removing it and see what the IDE does).
+       - middle will have its description pulled from its JSDoc. Its default value will be reported.
+       - last will have its description pulled from its JSDoc.
+       - suffix will have its description pulled from its JSDoc. It will be reported as deprecated.
+  -->
+  <h2>Prop Example (&lt;my-component&gt;)</h2>
+  <my-component first="Stencil" middle=" " last="'Don't call me a framework'" suffix="JS"></my-component>
+
+  <br />
+
+  <!-- After setup, hover over the slot names - each of the slot's descriptions will be shown by intellisense -->
+  <!-- Also try deleting one of the slot attributes, notice how intellisense suggests the slot names for you! -->
+  <h2>Slot Example (&lt;slot-example&gt;)</h2>
+  <slot-example>
+    <div>Main content</div>
+    <div slot="primary">Primary Content</div>
+    <div slot="secondary">Secondary Content</div>
+  </slot-example>
+
+  <br />
+
+  <!-- Demonstrates how shadow parts work. See the style tag below for more information. -->
+  <h2>CSS Shadow Part Example (&lt;shadow-parts&gt;)</h2>
+  <shadow-parts></shadow-parts>
+</template>
+
+<!-- Corresponds to the shadow-parts element above.  -->
+<!-- After setup, hover over the shadow part name to see its description. -->
+<!-- After setup, autocomplete for the shadow part names will also work. Try deleting 'first-msg' below and retyping it -->
+<style scoped>
+shadow-parts::part(first-msg) {
+  background: aqua;
+}
+shadow-parts::part(second-msg) {
+  background: lightgreen;
+}
+</style>

example/src/index.html

@@ -28,8 +28,8 @@
 
     <!-- After setup, hover over the component name and each of the props -->
     <!--
-         - my-component will have its description pulled from it's JSDoc
-         - first will have its description pulled from its JSDoc. Its required status will be reported.
+         - my-component will have its description pulled from its JSDoc
+         - first will have its description pulled from its JSDoc. Its required status will be reported (hint: try removing it and see what the IDE does).
          - middle will have its description pulled from its JSDoc. Its default value will be reported.
          - last will have its description pulled from its JSDoc.
          - suffix will have its description pulled from its JSDoc. It will be reported as deprecated.