chore(): set the onBrokenAnchors option for Docusaurus, fix errors

This sets the `onBrokenAnchors` option for our Docusaurus config and
then fixes all of the build errors that it surfaced. These mostly had to
do with casing issues, like `#formAssociated` should be
`#formassociated`.

STENCIL-1096

docs/components/api.md

@@ -15,12 +15,12 @@ The whole API provided by stencil can be condensed in a set of decorators, lifec
 Decorators are a pure compiler-time construction used by stencil to collect all the metadata about a component, the properties, attributes and methods it might expose, the events it might emit or even the associated stylesheets.
 Once all the metadata has been collected, all the decorators are removed from the output, so they don't incur any runtime overhead.
 
-- [@Component()](./component.md#component-decorator) declares a new web component
+- [@Component()](./component.md) declares a new web component
 - [@Prop()](./properties.md#the-prop-decorator-prop) declares an exposed property/attribute
 - [@State()](./state.md#the-state-decorator-state) declares an internal state of the component
 - [@Watch()](./reactive-data.md#the-watch-decorator-watch) declares a hook that runs when a property or state changes
 - [@Element()](./host-element.md#element-decorator) declares a reference to the host element
-- [@Method()](./methods.md#method-decorator) declares an exposed public method
+- [@Method()](./methods.md) declares an exposed public method
 - [@Event()](./events.md#event-decorator) declares a DOM event the component might emit
 - [@Listen()](./events.md#listen-decorator) listens for DOM events
 

docs/components/form-associated.md

@@ -22,7 +22,7 @@ support have shipped the necessary APIs.
 
 ## Creating a Form-Associated Component
 
-A form-associated Stencil component is one which sets the new [`formAssociated`](./component.md#formAssociated)
+A form-associated Stencil component is one which sets the new [`formAssociated`](./component.md#formassociated)
 option in the argument to the `@Component`
 decorator to `true`, like so:
 

docs/testing/01-overview.md

@@ -76,7 +76,7 @@ your tests should be run.
 
 ### Testing Configuration
 
-Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md#testing-config) for more info.
+Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md) for more info.
 
 ```tsx
 import { Config } from '@stencil/core';

docusaurus.config.js

@@ -14,6 +14,7 @@ const config = {
   baseUrl: '/docs/',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
+  onBrokenAnchors: 'throw',
   favicon: `https://${HOSTNAME}/favicon-32x32.png`,
 
   organizationName: 'ionic-team',

src/components/LifecycleMethodsChart.tsx

@@ -60,7 +60,7 @@ export default function LifecycleMethodsChart() {
                 </Link>
               </g>
               <g>
-                <Link to="reactive-data#watch-decorator" className={styles.pathUpdate}>
+                <Link to="reactive-data#the-watch-decorator-watch" className={styles.pathUpdate}>
                   <rect x="303" y="161" width="252" height="49" rx="24.5" ry="24.5" fill="#7b83a6" />
                   <text x="2.5288086" y="-8" fill="#fff">
                     <tspan x="348.52881" y="190">

versioned_docs/version-v2/components/api.md

@@ -15,12 +15,12 @@ The whole API provided by stencil can be condensed in a set of decorators, lifec
 Decorators are a pure compiler-time construction used by stencil to collect all the metadata about a component, the properties, attributes and methods it might expose, the events it might emit or even the associated stylesheets.
 Once all the metadata has been collected, all the decorators are removed from the output, so they don't incur any runtime overhead.
 
-- [@Component()](./component.md#component-decorator) declares a new web component
+- [@Component()](./component.md) declares a new web component
 - [@Prop()](./properties.md#the-prop-decorator-prop) declares an exposed property/attribute
 - [@State()](./state.md#the-state-decorator-state) declares an internal state of the component
 - [@Watch()](./reactive-data.md#the-watch-decorator-watch) declares a hook that runs when a property or state changes
 - [@Element()](./host-element.md#element-decorator) declares a reference to the host element
-- [@Method()](./methods.md#method-decorator) declares an exposed public method
+- [@Method()](./methods.md) declares an exposed public method
 - [@Event()](./events.md#event-decorator) declares a DOM event the component might emit
 - [@Listen()](./events.md#listen-decorator) listens for DOM events
 

versioned_docs/version-v2/testing/01-overview.md

@@ -76,7 +76,7 @@ your tests should be run.
 
 ### Testing Configuration
 
-Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md#testing-config) for more info.
+Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md) for more info.
 
 ```tsx
 import { Config } from '@stencil/core';

versioned_docs/version-v3/components/api.md

@@ -15,12 +15,12 @@ The whole API provided by stencil can be condensed in a set of decorators, lifec
 Decorators are a pure compiler-time construction used by stencil to collect all the metadata about a component, the properties, attributes and methods it might expose, the events it might emit or even the associated stylesheets.
 Once all the metadata has been collected, all the decorators are removed from the output, so they don't incur any runtime overhead.
 
-- [@Component()](./component.md#component-decorator) declares a new web component
+- [@Component()](./component.md) declares a new web component
 - [@Prop()](./properties.md#the-prop-decorator-prop) declares an exposed property/attribute
 - [@State()](./state.md#the-state-decorator-state) declares an internal state of the component
 - [@Watch()](./reactive-data.md#the-watch-decorator-watch) declares a hook that runs when a property or state changes
 - [@Element()](./host-element.md#element-decorator) declares a reference to the host element
-- [@Method()](./methods.md#method-decorator) declares an exposed public method
+- [@Method()](./methods.md) declares an exposed public method
 - [@Event()](./events.md#event-decorator) declares a DOM event the component might emit
 - [@Listen()](./events.md#listen-decorator) listens for DOM events
 

versioned_docs/version-v3/introduction/upgrading-to-stencil-three.md

@@ -272,7 +272,7 @@ export const config: Config = {
 | `default`                     | No additional re-export or auto-definition behavior will be performed.<br /><br />This value will be used if no explicit value is set in the config, or if a given value is not a valid option.                                                                                                                                                                                                               |
 | `auto-define-custom-elements` | A component and its children will be automatically defined with the `CustomElementRegistry` when the component's module is imported.                                                                                                                                                                                                                                                                      |
 | `bundle`                      | A utility `defineCustomElements()` function is exported from the `index.js` file of the output directory. This function can be used to quickly define all Stencil components in a project on the custom elements registry.                                                                                                                                                                                 |
-| `single-export-module`        | All component and custom element definition helper functions will be exported from the `index.js` file in the output directory (see [here](../output-targets/custom-elements.md#customElementsExportBehavior) for more information on this file's purpose). This file can be used as the root module when distributing your component library, see [here](../output-targets/custom-elements.md#distributing-custom-elements) for more details. |
+| `single-export-module`        | All component and custom element definition helper functions will be exported from the `index.js` file in the output directory (see [here](../output-targets/custom-elements.md#customelementsexportbehavior) for more information on this file's purpose). This file can be used as the root module when distributing your component library, see [here](../output-targets/custom-elements.md#distributing-custom-elements) for more details. |
 
 :::note
 This option also has an impact when using the [Stencil framework integration output targets](../framework-integration/01-overview.md). Please see the [framework integration migration](#framework-integration-output-targets) section below for more information.

versioned_docs/version-v3/testing/01-overview.md

@@ -76,7 +76,7 @@ your tests should be run.
 
 ### Testing Configuration
 
-Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md#testing-config) for more info.
+Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md) for more info.
 
 ```tsx
 import { Config } from '@stencil/core';

versioned_docs/version-v4.0/components/api.md

@@ -15,12 +15,12 @@ The whole API provided by stencil can be condensed in a set of decorators, lifec
 Decorators are a pure compiler-time construction used by stencil to collect all the metadata about a component, the properties, attributes and methods it might expose, the events it might emit or even the associated stylesheets.
 Once all the metadata has been collected, all the decorators are removed from the output, so they don't incur any runtime overhead.
 
-- [@Component()](./component.md#component-decorator) declares a new web component
+- [@Component()](./component.md) declares a new web component
 - [@Prop()](./properties.md#the-prop-decorator-prop) declares an exposed property/attribute
 - [@State()](./state.md#the-state-decorator-state) declares an internal state of the component
 - [@Watch()](./reactive-data.md#the-watch-decorator-watch) declares a hook that runs when a property or state changes
 - [@Element()](./host-element.md#element-decorator) declares a reference to the host element
-- [@Method()](./methods.md#method-decorator) declares an exposed public method
+- [@Method()](./methods.md) declares an exposed public method
 - [@Event()](./events.md#event-decorator) declares a DOM event the component might emit
 - [@Listen()](./events.md#listen-decorator) listens for DOM events
 

versioned_docs/version-v4.0/testing/01-overview.md

@@ -76,7 +76,7 @@ your tests should be run.
 
 ### Testing Configuration
 
-Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md#testing-config) for more info.
+Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md) for more info.
 
 ```tsx
 import { Config } from '@stencil/core';

versioned_docs/version-v4.1/components/api.md

@@ -15,12 +15,12 @@ The whole API provided by stencil can be condensed in a set of decorators, lifec
 Decorators are a pure compiler-time construction used by stencil to collect all the metadata about a component, the properties, attributes and methods it might expose, the events it might emit or even the associated stylesheets.
 Once all the metadata has been collected, all the decorators are removed from the output, so they don't incur any runtime overhead.
 
-- [@Component()](./component.md#component-decorator) declares a new web component
+- [@Component()](./component.md) declares a new web component
 - [@Prop()](./properties.md#the-prop-decorator-prop) declares an exposed property/attribute
 - [@State()](./state.md#the-state-decorator-state) declares an internal state of the component
 - [@Watch()](./reactive-data.md#the-watch-decorator-watch) declares a hook that runs when a property or state changes
 - [@Element()](./host-element.md#element-decorator) declares a reference to the host element
-- [@Method()](./methods.md#method-decorator) declares an exposed public method
+- [@Method()](./methods.md) declares an exposed public method
 - [@Event()](./events.md#event-decorator) declares a DOM event the component might emit
 - [@Listen()](./events.md#listen-decorator) listens for DOM events
 

versioned_docs/version-v4.1/testing/01-overview.md

@@ -76,7 +76,7 @@ your tests should be run.
 
 ### Testing Configuration
 
-Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md#testing-config) for more info.
+Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md) for more info.
 
 ```tsx
 import { Config } from '@stencil/core';

versioned_docs/version-v4.10/components/api.md

@@ -15,12 +15,12 @@ The whole API provided by stencil can be condensed in a set of decorators, lifec
 Decorators are a pure compiler-time construction used by stencil to collect all the metadata about a component, the properties, attributes and methods it might expose, the events it might emit or even the associated stylesheets.
 Once all the metadata has been collected, all the decorators are removed from the output, so they don't incur any runtime overhead.
 
-- [@Component()](./component.md#component-decorator) declares a new web component
+- [@Component()](./component.md) declares a new web component
 - [@Prop()](./properties.md#the-prop-decorator-prop) declares an exposed property/attribute
 - [@State()](./state.md#the-state-decorator-state) declares an internal state of the component
 - [@Watch()](./reactive-data.md#the-watch-decorator-watch) declares a hook that runs when a property or state changes
 - [@Element()](./host-element.md#element-decorator) declares a reference to the host element
-- [@Method()](./methods.md#method-decorator) declares an exposed public method
+- [@Method()](./methods.md) declares an exposed public method
 - [@Event()](./events.md#event-decorator) declares a DOM event the component might emit
 - [@Listen()](./events.md#listen-decorator) listens for DOM events
 

versioned_docs/version-v4.10/components/form-associated.md

@@ -22,7 +22,7 @@ support have shipped the necessary APIs.
 
 ## Creating a Form-Associated Component
 
-A form-associated Stencil component is one which sets the new [`formAssociated`](./component.md#formAssociated)
+A form-associated Stencil component is one which sets the new [`formAssociated`](./component.md#formassociated)
 option in the argument to the `@Component`
 decorator to `true`, like so:
 

versioned_docs/version-v4.10/testing/01-overview.md

@@ -76,7 +76,7 @@ your tests should be run.
 
 ### Testing Configuration
 
-Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md#testing-config) for more info.
+Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md) for more info.
 
 ```tsx
 import { Config } from '@stencil/core';

versioned_docs/version-v4.11/components/api.md

@@ -15,12 +15,12 @@ The whole API provided by stencil can be condensed in a set of decorators, lifec
 Decorators are a pure compiler-time construction used by stencil to collect all the metadata about a component, the properties, attributes and methods it might expose, the events it might emit or even the associated stylesheets.
 Once all the metadata has been collected, all the decorators are removed from the output, so they don't incur any runtime overhead.
 
-- [@Component()](./component.md#component-decorator) declares a new web component
+- [@Component()](./component.md) declares a new web component
 - [@Prop()](./properties.md#the-prop-decorator-prop) declares an exposed property/attribute
 - [@State()](./state.md#the-state-decorator-state) declares an internal state of the component
 - [@Watch()](./reactive-data.md#the-watch-decorator-watch) declares a hook that runs when a property or state changes
 - [@Element()](./host-element.md#element-decorator) declares a reference to the host element
-- [@Method()](./methods.md#method-decorator) declares an exposed public method
+- [@Method()](./methods.md) declares an exposed public method
 - [@Event()](./events.md#event-decorator) declares a DOM event the component might emit
 - [@Listen()](./events.md#listen-decorator) listens for DOM events
 

versioned_docs/version-v4.11/components/form-associated.md

@@ -22,7 +22,7 @@ support have shipped the necessary APIs.
 
 ## Creating a Form-Associated Component
 
-A form-associated Stencil component is one which sets the new [`formAssociated`](./component.md#formAssociated)
+A form-associated Stencil component is one which sets the new [`formAssociated`](./component.md#formassociated)
 option in the argument to the `@Component`
 decorator to `true`, like so:
 

versioned_docs/version-v4.11/testing/01-overview.md

@@ -76,7 +76,7 @@ your tests should be run.
 
 ### Testing Configuration
 
-Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md#testing-config) for more info.
+Stencil will apply defaults from data it has already gathered. For example, Stencil already knows what directories to look through, and what files are spec and e2e files. Jest can still be configured using the same config names, but now using the stencil config `testing` property. Please see the [Testing Config docs](./config.md) for more info.
 
 ```tsx
 import { Config } from '@stencil/core';