apply changes to all versions

versioned_docs/version-v3/output-targets/dist.md

@@ -77,12 +77,43 @@ If using the `dist-collection` output target directly, the same result can be ac
 
 *default: `/dist/loader`*
 
-Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading.
+Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading. Read more about the loader directory in the [section below](#loader).
+
+If you don't use a custom [exports](https://nodejs.org/api/packages.html#exports) map, users would have to import the loader script via:
+
+```js
+import { defineCustomElements } from 'stencil-library/dist/loader'
+```
+
+By setting `esmLoaderPath` to e.g. `../loader` you can shorten or rename the import path to:
+
+```js
+import { defineCustomElements } from 'stencil-library/loader'
+```
 
 ## Publishing
 
 Next you can publish your library to [Node Package Manager (NPM)](https://www.npmjs.com/). For more information about setting up the `package.json` file, and publishing, see: [Publishing A Component Library](../guides/publishing.md).
 
+## Loader
+
+The `dist` output target generates a loader directory that exports `setNonce`, `applyPolyfills` and `defineCustomElements` helper functions when imported within an ESM context. This allows you to register all components of your library to be used in your project in an application setup script, e.g.:
+
+```ts
+import { applyPolyfills, defineCustomElements, setNonce } from 'stencil-library/loader';
+
+// Will set the `nonce` attribute for all scripts/style tags
+// i.e. will run styleTag.setAttribute('nonce', 'r4nd0m')
+// Obviously, you should use the nonce generated by your server
+setNonce('r4nd0m');
+
+applyPolyfills().then(() => {
+  defineCustomElements();
+});
+```
+
+This is an alternative approach to e.g. loading the components directly through a script tag as mentioned below. Read more about `setNonce` and when to set it in our guide on [Content Security Policy Nonces](../guides/csp-nonce.md).
+
 ## Distribution Options
 
 Each output target's form of bundling and distribution has its own pros and cons. Luckily you can just worry about writing good source code for your component. Stencil will handle generating the various bundles and consumers of your library can decide how to apply your components to their external projects. Below are a few of the options.

versioned_docs/version-v4.0/output-targets/dist.md

@@ -77,12 +77,43 @@ If using the `dist-collection` output target directly, the same result can be ac
 
 *default: `/dist/loader`*
 
-Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading.
+Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading. Read more about the loader directory in the [section below](#loader).
+
+If you don't use a custom [exports](https://nodejs.org/api/packages.html#exports) map, users would have to import the loader script via:
+
+```js
+import { defineCustomElements } from 'stencil-library/dist/loader'
+```
+
+By setting `esmLoaderPath` to e.g. `../loader` you can shorten or rename the import path to:
+
+```js
+import { defineCustomElements } from 'stencil-library/loader'
+```
 
 ## Publishing
 
 Next you can publish your library to [Node Package Manager (NPM)](https://www.npmjs.com/). For more information about setting up the `package.json` file, and publishing, see: [Publishing A Component Library](../guides/publishing.md).
 
+## Loader
+
+The `dist` output target generates a loader directory that exports `setNonce`, `applyPolyfills` and `defineCustomElements` helper functions when imported within an ESM context. This allows you to register all components of your library to be used in your project in an application setup script, e.g.:
+
+```ts
+import { applyPolyfills, defineCustomElements, setNonce } from 'stencil-library/loader';
+
+// Will set the `nonce` attribute for all scripts/style tags
+// i.e. will run styleTag.setAttribute('nonce', 'r4nd0m')
+// Obviously, you should use the nonce generated by your server
+setNonce('r4nd0m');
+
+applyPolyfills().then(() => {
+  defineCustomElements();
+});
+```
+
+This is an alternative approach to e.g. loading the components directly through a script tag as mentioned below. Read more about `setNonce` and when to set it in our guide on [Content Security Policy Nonces](../guides/csp-nonce.md).
+
 ## Distribution Options
 
 Each output target's form of bundling and distribution has its own pros and cons. Luckily you can just worry about writing good source code for your component. Stencil will handle generating the various bundles and consumers of your library can decide how to apply your components to their external projects. Below are a few of the options.

versioned_docs/version-v4.1/output-targets/dist.md

@@ -77,12 +77,43 @@ If using the `dist-collection` output target directly, the same result can be ac
 
 *default: `/dist/loader`*
 
-Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading.
+Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading. Read more about the loader directory in the [section below](#loader).
+
+If you don't use a custom [exports](https://nodejs.org/api/packages.html#exports) map, users would have to import the loader script via:
+
+```js
+import { defineCustomElements } from 'stencil-library/dist/loader'
+```
+
+By setting `esmLoaderPath` to e.g. `../loader` you can shorten or rename the import path to:
+
+```js
+import { defineCustomElements } from 'stencil-library/loader'
+```
 
 ## Publishing
 
 Next you can publish your library to [Node Package Manager (NPM)](https://www.npmjs.com/). For more information about setting up the `package.json` file, and publishing, see: [Publishing A Component Library](../guides/publishing.md).
 
+## Loader
+
+The `dist` output target generates a loader directory that exports `setNonce`, `applyPolyfills` and `defineCustomElements` helper functions when imported within an ESM context. This allows you to register all components of your library to be used in your project in an application setup script, e.g.:
+
+```ts
+import { applyPolyfills, defineCustomElements, setNonce } from 'stencil-library/loader';
+
+// Will set the `nonce` attribute for all scripts/style tags
+// i.e. will run styleTag.setAttribute('nonce', 'r4nd0m')
+// Obviously, you should use the nonce generated by your server
+setNonce('r4nd0m');
+
+applyPolyfills().then(() => {
+  defineCustomElements();
+});
+```
+
+This is an alternative approach to e.g. loading the components directly through a script tag as mentioned below. Read more about `setNonce` and when to set it in our guide on [Content Security Policy Nonces](../guides/csp-nonce.md).
+
 ## Distribution Options
 
 Each output target's form of bundling and distribution has its own pros and cons. Luckily you can just worry about writing good source code for your component. Stencil will handle generating the various bundles and consumers of your library can decide how to apply your components to their external projects. Below are a few of the options.

versioned_docs/version-v4.10/output-targets/dist.md

@@ -77,12 +77,43 @@ If using the `dist-collection` output target directly, the same result can be ac
 
 *default: `/dist/loader`*
 
-Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading.
+Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading. Read more about the loader directory in the [section below](#loader).
+
+If you don't use a custom [exports](https://nodejs.org/api/packages.html#exports) map, users would have to import the loader script via:
+
+```js
+import { defineCustomElements } from 'stencil-library/dist/loader'
+```
+
+By setting `esmLoaderPath` to e.g. `../loader` you can shorten or rename the import path to:
+
+```js
+import { defineCustomElements } from 'stencil-library/loader'
+```
 
 ## Publishing
 
 Next you can publish your library to [Node Package Manager (NPM)](https://www.npmjs.com/). For more information about setting up the `package.json` file, and publishing, see: [Publishing A Component Library](../guides/publishing.md).
 
+## Loader
+
+The `dist` output target generates a loader directory that exports `setNonce`, `applyPolyfills` and `defineCustomElements` helper functions when imported within an ESM context. This allows you to register all components of your library to be used in your project in an application setup script, e.g.:
+
+```ts
+import { applyPolyfills, defineCustomElements, setNonce } from 'stencil-library/loader';
+
+// Will set the `nonce` attribute for all scripts/style tags
+// i.e. will run styleTag.setAttribute('nonce', 'r4nd0m')
+// Obviously, you should use the nonce generated by your server
+setNonce('r4nd0m');
+
+applyPolyfills().then(() => {
+  defineCustomElements();
+});
+```
+
+This is an alternative approach to e.g. loading the components directly through a script tag as mentioned below. Read more about `setNonce` and when to set it in our guide on [Content Security Policy Nonces](../guides/csp-nonce.md).
+
 ## Distribution Options
 
 Each output target's form of bundling and distribution has its own pros and cons. Luckily you can just worry about writing good source code for your component. Stencil will handle generating the various bundles and consumers of your library can decide how to apply your components to their external projects. Below are a few of the options.

versioned_docs/version-v4.11/output-targets/dist.md

@@ -77,12 +77,43 @@ If using the `dist-collection` output target directly, the same result can be ac
 
 *default: `/dist/loader`*
 
-Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading.
+Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading. Read more about the loader directory in the [section below](#loader).
+
+If you don't use a custom [exports](https://nodejs.org/api/packages.html#exports) map, users would have to import the loader script via:
+
+```js
+import { defineCustomElements } from 'stencil-library/dist/loader'
+```
+
+By setting `esmLoaderPath` to e.g. `../loader` you can shorten or rename the import path to:
+
+```js
+import { defineCustomElements } from 'stencil-library/loader'
+```
 
 ## Publishing
 
 Next you can publish your library to [Node Package Manager (NPM)](https://www.npmjs.com/). For more information about setting up the `package.json` file, and publishing, see: [Publishing A Component Library](../guides/publishing.md).
 
+## Loader
+
+The `dist` output target generates a loader directory that exports `setNonce`, `applyPolyfills` and `defineCustomElements` helper functions when imported within an ESM context. This allows you to register all components of your library to be used in your project in an application setup script, e.g.:
+
+```ts
+import { applyPolyfills, defineCustomElements, setNonce } from 'stencil-library/loader';
+
+// Will set the `nonce` attribute for all scripts/style tags
+// i.e. will run styleTag.setAttribute('nonce', 'r4nd0m')
+// Obviously, you should use the nonce generated by your server
+setNonce('r4nd0m');
+
+applyPolyfills().then(() => {
+  defineCustomElements();
+});
+```
+
+This is an alternative approach to e.g. loading the components directly through a script tag as mentioned below. Read more about `setNonce` and when to set it in our guide on [Content Security Policy Nonces](../guides/csp-nonce.md).
+
 ## Distribution Options
 
 Each output target's form of bundling and distribution has its own pros and cons. Luckily you can just worry about writing good source code for your component. Stencil will handle generating the various bundles and consumers of your library can decide how to apply your components to their external projects. Below are a few of the options.

versioned_docs/version-v4.12/output-targets/dist.md

@@ -77,12 +77,43 @@ If using the `dist-collection` output target directly, the same result can be ac
 
 *default: `/dist/loader`*
 
-Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading.
+Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading. Read more about the loader directory in the [section below](#loader).
+
+If you don't use a custom [exports](https://nodejs.org/api/packages.html#exports) map, users would have to import the loader script via:
+
+```js
+import { defineCustomElements } from 'stencil-library/dist/loader'
+```
+
+By setting `esmLoaderPath` to e.g. `../loader` you can shorten or rename the import path to:
+
+```js
+import { defineCustomElements } from 'stencil-library/loader'
+```
 
 ## Publishing
 
 Next you can publish your library to [Node Package Manager (NPM)](https://www.npmjs.com/). For more information about setting up the `package.json` file, and publishing, see: [Publishing A Component Library](../guides/publishing.md).
 
+## Loader
+
+The `dist` output target generates a loader directory that exports `setNonce`, `applyPolyfills` and `defineCustomElements` helper functions when imported within an ESM context. This allows you to register all components of your library to be used in your project in an application setup script, e.g.:
+
+```ts
+import { applyPolyfills, defineCustomElements, setNonce } from 'stencil-library/loader';
+
+// Will set the `nonce` attribute for all scripts/style tags
+// i.e. will run styleTag.setAttribute('nonce', 'r4nd0m')
+// Obviously, you should use the nonce generated by your server
+setNonce('r4nd0m');
+
+applyPolyfills().then(() => {
+  defineCustomElements();
+});
+```
+
+This is an alternative approach to e.g. loading the components directly through a script tag as mentioned below. Read more about `setNonce` and when to set it in our guide on [Content Security Policy Nonces](../guides/csp-nonce.md).
+
 ## Distribution Options
 
 Each output target's form of bundling and distribution has its own pros and cons. Luckily you can just worry about writing good source code for your component. Stencil will handle generating the various bundles and consumers of your library can decide how to apply your components to their external projects. Below are a few of the options.

versioned_docs/version-v4.2/output-targets/dist.md

@@ -77,12 +77,43 @@ If using the `dist-collection` output target directly, the same result can be ac
 
 *default: `/dist/loader`*
 
-Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading.
+Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading. Read more about the loader directory in the [section below](#loader).
+
+If you don't use a custom [exports](https://nodejs.org/api/packages.html#exports) map, users would have to import the loader script via:
+
+```js
+import { defineCustomElements } from 'stencil-library/dist/loader'
+```
+
+By setting `esmLoaderPath` to e.g. `../loader` you can shorten or rename the import path to:
+
+```js
+import { defineCustomElements } from 'stencil-library/loader'
+```
 
 ## Publishing
 
 Next you can publish your library to [Node Package Manager (NPM)](https://www.npmjs.com/). For more information about setting up the `package.json` file, and publishing, see: [Publishing A Component Library](../guides/publishing.md).
 
+## Loader
+
+The `dist` output target generates a loader directory that exports `setNonce`, `applyPolyfills` and `defineCustomElements` helper functions when imported within an ESM context. This allows you to register all components of your library to be used in your project in an application setup script, e.g.:
+
+```ts
+import { applyPolyfills, defineCustomElements, setNonce } from 'stencil-library/loader';
+
+// Will set the `nonce` attribute for all scripts/style tags
+// i.e. will run styleTag.setAttribute('nonce', 'r4nd0m')
+// Obviously, you should use the nonce generated by your server
+setNonce('r4nd0m');
+
+applyPolyfills().then(() => {
+  defineCustomElements();
+});
+```
+
+This is an alternative approach to e.g. loading the components directly through a script tag as mentioned below. Read more about `setNonce` and when to set it in our guide on [Content Security Policy Nonces](../guides/csp-nonce.md).
+
 ## Distribution Options
 
 Each output target's form of bundling and distribution has its own pros and cons. Luckily you can just worry about writing good source code for your component. Stencil will handle generating the various bundles and consumers of your library can decide how to apply your components to their external projects. Below are a few of the options.

versioned_docs/version-v4.3/output-targets/dist.md

@@ -77,12 +77,43 @@ If using the `dist-collection` output target directly, the same result can be ac
 
 *default: `/dist/loader`*
 
-Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading.
+Provide a custom path for the ESM loader directory, containing files you can import in an initiation script within your application to register all your components for lazy loading. Read more about the loader directory in the [section below](#loader).
+
+If you don't use a custom [exports](https://nodejs.org/api/packages.html#exports) map, users would have to import the loader script via:
+
+```js
+import { defineCustomElements } from 'stencil-library/dist/loader'
+```
+
+By setting `esmLoaderPath` to e.g. `../loader` you can shorten or rename the import path to:
+
+```js
+import { defineCustomElements } from 'stencil-library/loader'
+```
 
 ## Publishing
 
 Next you can publish your library to [Node Package Manager (NPM)](https://www.npmjs.com/). For more information about setting up the `package.json` file, and publishing, see: [Publishing A Component Library](../guides/publishing.md).
 
+## Loader
+
+The `dist` output target generates a loader directory that exports `setNonce`, `applyPolyfills` and `defineCustomElements` helper functions when imported within an ESM context. This allows you to register all components of your library to be used in your project in an application setup script, e.g.:
+
+```ts
+import { applyPolyfills, defineCustomElements, setNonce } from 'stencil-library/loader';
+
+// Will set the `nonce` attribute for all scripts/style tags
+// i.e. will run styleTag.setAttribute('nonce', 'r4nd0m')
+// Obviously, you should use the nonce generated by your server
+setNonce('r4nd0m');
+
+applyPolyfills().then(() => {
+  defineCustomElements();
+});
+```
+
+This is an alternative approach to e.g. loading the components directly through a script tag as mentioned below. Read more about `setNonce` and when to set it in our guide on [Content Security Policy Nonces](../guides/csp-nonce.md).
+
 ## Distribution Options
 
 Each output target's form of bundling and distribution has its own pros and cons. Luckily you can just worry about writing good source code for your component. Stencil will handle generating the various bundles and consumers of your library can decide how to apply your components to their external projects. Below are a few of the options.