js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

auto import dependencies

Browse Source
This commit is contained in:
Cory LaViska
2021-07-12 10:36:06 -04:00
parent a30adac959
commit 4aeb804441
22 changed files with 46 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/getting-started/installation.md
View File

@@ -56,9 +56,9 @@ However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Sh
The previous approach is the _easiest_ way to load Shoelace, but easy isn't always efficient. You'll incur the full size of the library even if you only use a handful of components. This is convenient for prototyping, but may result in longer load times in production. To improve this, you can cherry pick the components you need.
Cherry picking can be done from your local install or [directly from the CDN](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/). This will limit the number of files the browser has to download and reduce the amount of bytes being transferred. The disadvantage is that you need to load and register each component manually, including its dependencies.
Cherry picking can be done from your local install or [directly from the CDN](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/). This will limit the number of files the browser has to download and reduce the amount of bytes being transferred. The disadvantage is that you need to load and register each component manually.
Here's an example that loads only the button component and its dependencies. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Shoelace is in.
Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Shoelace is in.
```html
<!-- The base stylesheet is always required -->
@@ -66,14 +66,11 @@ Here's an example that loads only the button component and its dependencies. Aga
<script type="module" data-shoelace="/scripts/shoelace">
import SlButton from '@shoelace-style/shoelace/dist/components/button/button.js';
import SlSpinner from '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
// <sl-button> and <sl-spinner> are ready to use!
// <sl-button> is ready to use!
</script>
```
If a component has dependencies, they'll be listed in the "Dependencies" section of its documentation. These are always Shoelace components, not third-party libraries. For example, `<sl-button>` requires you to load `<sl-spinner>` because it's used internally for its loading state.
!> Never cherry pick components or utilities from `shoelace.js` as this will cause the browser to load the entire library. Instead, cherry pick from specific modules as shown above.
!> You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.

20
docs/getting-started/usage.md
View File

@@ -164,26 +164,6 @@ const MyComponent = (props) => {
};
```
### Dependencies
Some components depend on other components internally. For example, `<sl-button>` requires you to load `<sl-spinner>` because it's used internally for its loading state. If a component has dependencies, they'll be listed in the "Dependencies" section of its documentation. These are always Shoelace components, not third-party libraries.
Since dependencies are just components, you can load them the same way.
```jsx
import SlButton from '@shoelace-style/react/dist/button';
import SlSpinner from '@shoelace-style/react/dist/spinner';
```
However, this may cause your linter to complain (e.g. "SlButton is defined but never used"). If you're not going to use the dependent components in your JSX, you can import them as side effects instead.
```jsx
import '@shoelace-style/react/dist/button';
import '@shoelace-style/react/dist/spinner';
```
This extra step is required for dependencies to ensure they get registered with the browser as custom elements.
## Vue
Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements. You just have to tell it to ignore Shoelace components. This is pretty easy because they all start with `sl-`.