From 983da6c515ba83d2eb775fbc11939f5a193f4b18 Mon Sep 17 00:00:00 2001 From: Christian Bromann Date: Fri, 1 Mar 2024 12:30:36 -0800 Subject: [PATCH] apply changes to all versions --- .../version-v3/output-targets/dist.md | 33 ++++++++++++++++++- .../version-v4.0/output-targets/dist.md | 33 ++++++++++++++++++- .../version-v4.1/output-targets/dist.md | 33 ++++++++++++++++++- .../version-v4.10/output-targets/dist.md | 33 ++++++++++++++++++- .../version-v4.11/output-targets/dist.md | 33 ++++++++++++++++++- .../version-v4.12/output-targets/dist.md | 33 ++++++++++++++++++- .../version-v4.2/output-targets/dist.md | 33 ++++++++++++++++++- .../version-v4.3/output-targets/dist.md | 33 ++++++++++++++++++- .../version-v4.4/output-targets/dist.md | 33 ++++++++++++++++++- .../version-v4.5/output-targets/dist.md | 33 ++++++++++++++++++- .../version-v4.6/output-targets/dist.md | 33 ++++++++++++++++++- .../version-v4.7/output-targets/dist.md | 33 ++++++++++++++++++- .../version-v4.8/output-targets/dist.md | 33 ++++++++++++++++++- .../version-v4.9/output-targets/dist.md | 33 ++++++++++++++++++- 14 files changed, 448 insertions(+), 14 deletions(-) diff --git a/versioned_docs/version-v3/output-targets/dist.md b/versioned_docs/version-v3/output-targets/dist.md index 5174b006f..192972e26 100644 --- a/versioned_docs/version-v3/output-targets/dist.md +++ b/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. diff --git a/versioned_docs/version-v4.0/output-targets/dist.md b/versioned_docs/version-v4.0/output-targets/dist.md index 6a791e434..4279308d8 100644 --- a/versioned_docs/version-v4.0/output-targets/dist.md +++ b/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. diff --git a/versioned_docs/version-v4.1/output-targets/dist.md b/versioned_docs/version-v4.1/output-targets/dist.md index 6a791e434..4279308d8 100644 --- a/versioned_docs/version-v4.1/output-targets/dist.md +++ b/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. diff --git a/versioned_docs/version-v4.10/output-targets/dist.md b/versioned_docs/version-v4.10/output-targets/dist.md index 6a791e434..4279308d8 100644 --- a/versioned_docs/version-v4.10/output-targets/dist.md +++ b/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. diff --git a/versioned_docs/version-v4.11/output-targets/dist.md b/versioned_docs/version-v4.11/output-targets/dist.md index 6a791e434..4279308d8 100644 --- a/versioned_docs/version-v4.11/output-targets/dist.md +++ b/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. diff --git a/versioned_docs/version-v4.12/output-targets/dist.md b/versioned_docs/version-v4.12/output-targets/dist.md index 6a791e434..4279308d8 100644 --- a/versioned_docs/version-v4.12/output-targets/dist.md +++ b/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. diff --git a/versioned_docs/version-v4.2/output-targets/dist.md b/versioned_docs/version-v4.2/output-targets/dist.md index 6a791e434..4279308d8 100644 --- a/versioned_docs/version-v4.2/output-targets/dist.md +++ b/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. diff --git a/versioned_docs/version-v4.3/output-targets/dist.md b/versioned_docs/version-v4.3/output-targets/dist.md index 6a791e434..4279308d8 100644 --- a/versioned_docs/version-v4.3/output-targets/dist.md +++ b/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. diff --git a/versioned_docs/version-v4.4/output-targets/dist.md b/versioned_docs/version-v4.4/output-targets/dist.md index 6a791e434..4279308d8 100644 --- a/versioned_docs/version-v4.4/output-targets/dist.md +++ b/versioned_docs/version-v4.4/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. diff --git a/versioned_docs/version-v4.5/output-targets/dist.md b/versioned_docs/version-v4.5/output-targets/dist.md index 6a791e434..4279308d8 100644 --- a/versioned_docs/version-v4.5/output-targets/dist.md +++ b/versioned_docs/version-v4.5/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. diff --git a/versioned_docs/version-v4.6/output-targets/dist.md b/versioned_docs/version-v4.6/output-targets/dist.md index 6a791e434..4279308d8 100644 --- a/versioned_docs/version-v4.6/output-targets/dist.md +++ b/versioned_docs/version-v4.6/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. diff --git a/versioned_docs/version-v4.7/output-targets/dist.md b/versioned_docs/version-v4.7/output-targets/dist.md index 6a791e434..4279308d8 100644 --- a/versioned_docs/version-v4.7/output-targets/dist.md +++ b/versioned_docs/version-v4.7/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. diff --git a/versioned_docs/version-v4.8/output-targets/dist.md b/versioned_docs/version-v4.8/output-targets/dist.md index 6a791e434..4279308d8 100644 --- a/versioned_docs/version-v4.8/output-targets/dist.md +++ b/versioned_docs/version-v4.8/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. diff --git a/versioned_docs/version-v4.9/output-targets/dist.md b/versioned_docs/version-v4.9/output-targets/dist.md index 6a791e434..4279308d8 100644 --- a/versioned_docs/version-v4.9/output-targets/dist.md +++ b/versioned_docs/version-v4.9/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.