-
Notifications
You must be signed in to change notification settings - Fork 420
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
undo dist.md 'Distribution Options' docs
Docs regarding 'Distribution Options' in Stencil were (I believe) wrongly removed. 1) they're useful 2) they're mentioned in remaining text - "loading the components directly through a script tag as mentioned below" - < they're not there anymore
- Loading branch information
1 parent
a0e8836
commit eb18d99
Showing
1 changed file
with
26 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -104,3 +104,29 @@ applyPolyfills().then(() => { | |
``` | ||
|
||
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. | ||
|
||
### Script tag | ||
|
||
- Use a script tag linked to a CDN copy of your published NPM module, for example: `<script type="module" src='https://cdn.jsdelivr.net/npm/[email protected]/dist/myname.js'></script>`. | ||
- The initial script itself is extremely tiny and does not represent the entire library. It's only a small registry. | ||
- You can use any or all components within your library anywhere within that webpage. | ||
- It doesn't matter if the actual component was written within the HTML or created with vanilla JavaScript, jQuery, React, etc. | ||
- Only the components used on that page will be requested and lazy-loaded. | ||
|
||
### Importing the `dist` library using a bundler | ||
|
||
- Run `npm install my-name --save` | ||
- Add an `import` within the root component: `import my-component`; | ||
- Stencil will automatically setup the lazy-loading capabilities for the Stencil library. | ||
- Then you can use the element anywhere in your template, JSX, HTML etc. | ||
|
||
### Importing the `dist` library into another Stencil app | ||
|
||
- Run `npm install my-name --save` | ||
- Add an `import` within the root component: `import my-component`; | ||
- Stencil will automatically setup the lazy-loading capabilities for the Stencil library. | ||
- Then you can use the element anywhere in your template, JSX, HTML etc. |