From 4aeb804441c6cee831cc900adaba0d6146d8c181 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 12 Jul 2021 10:36:06 -0400 Subject: [PATCH] auto import dependencies --- docs/assets/plugins/metadata/metadata.js | 3 +-- docs/getting-started/installation.md | 9 +++------ docs/getting-started/usage.md | 20 ------------------- docs/resources/changelog.md | 3 +++ src/components/alert/alert.ts | 2 ++ src/components/avatar/avatar.ts | 2 ++ src/components/button/button.ts | 2 ++ src/components/color-picker/color-picker.ts | 5 +++++ src/components/details/details.ts | 2 ++ src/components/dialog/dialog.ts | 2 ++ src/components/drawer/drawer.ts | 2 ++ src/components/icon-button/icon-button.ts | 2 ++ .../image-comparer/image-comparer.ts | 2 ++ src/components/input/input.ts | 2 ++ src/components/menu-divider/menu-divider.ts | 2 -- src/components/menu-item/menu-item.ts | 2 ++ src/components/menu-label/menu-label.ts | 2 -- src/components/rating/rating.ts | 2 ++ src/components/select/select.ts | 6 ++++++ src/components/tab-group/tab-group.ts | 2 ++ src/components/tab/tab.ts | 2 ++ src/components/tag/tag.ts | 2 ++ 22 files changed, 46 insertions(+), 32 deletions(-) diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js index ab127ad6d..b03cc44d0 100644 --- a/docs/assets/plugins/metadata/metadata.js +++ b/docs/assets/plugins/metadata/metadata.js @@ -420,8 +420,7 @@ result += ` ## Dependencies - This component has the following dependencies so, if you're [cherry picking](/getting-started/installation#cherry-picking), - be sure to import these components in addition to <${tag}>. + This component imports the following dependencies. ${createDependenciesList(component.tagName, getAllComponents(metadata))} `; diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md index 0bbd352c9..dd3c0b02b 100644 --- a/docs/getting-started/installation.md +++ b/docs/getting-started/installation.md @@ -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 @@ -66,14 +66,11 @@ Here's an example that loads only the button component and its dependencies. Aga ``` -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, `` requires you to load `` 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. diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md index b98fbf12c..0954ffdc2 100644 --- a/docs/getting-started/usage.md +++ b/docs/getting-started/usage.md @@ -164,26 +164,6 @@ const MyComponent = (props) => { }; ``` -### Dependencies - -Some components depend on other components internally. For example, `` requires you to load `` 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-`. diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index eb34992bd..b5d768580 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -8,7 +8,10 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next +This release improves how component dependencies are imported. If you've been cherry picking, you no longer need to import component dependencies manually. This significantly improves developer experience, making Shoelace even easier to use. For transparency, component dependencies will continue to be listed in the docs. + - Added "Reflects" column to the properties table +- Dependencies are now automatically imported for all components ## 2.0.0-beta.46 diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index e00e5dd96..d96604415 100644 --- a/src/components/alert/alert.ts +++ b/src/components/alert/alert.ts @@ -8,6 +8,8 @@ import { waitForEvent } from '../../internal/event'; import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry'; import styles from './alert.styles'; +import '../icon-button/icon-button'; + const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' }); /** diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index 4855181e1..78ea79724 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -3,6 +3,8 @@ import { customElement, property, state } from 'lit/decorators.js'; import { classMap } from 'lit-html/directives/class-map'; import styles from './avatar.styles'; +import '../icon/icon'; + /** * @since 2.0 * @status stable diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 55be3b1ce..576aeb3cf 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -6,6 +6,8 @@ import { emit } from '../../internal/event'; import { hasSlot } from '../../internal/slot'; import styles from './button.styles'; +import '../spinner/spinner'; + /** * @since 2.0 * @status stable diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index c4a533890..b5b780b82 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -11,6 +11,11 @@ import type SlInput from '../input/input'; import color from 'color'; import styles from './color-picker.styles'; +import '../button/button'; +import '../dropdown/dropdown'; +import '../icon/icon'; +import '../input/input'; + /** * @since 2.0 * @status stable diff --git a/src/components/details/details.ts b/src/components/details/details.ts index ba21715c9..8490d6a62 100644 --- a/src/components/details/details.ts +++ b/src/components/details/details.ts @@ -9,6 +9,8 @@ import { focusVisible } from '../../internal/focus-visible'; import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry'; import styles from './details.styles'; +import '../icon/icon'; + let id = 0; /** diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 24ddd4171..68f428930 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -13,6 +13,8 @@ import Modal from '../../internal/modal'; import { setDefaultAnimation, getAnimation } from '../../utilities/animation-registry'; import styles from './dialog.styles'; +import '../icon-button/icon-button'; + const hasPreventScroll = isPreventScrollSupported(); let id = 0; diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts index c9104189f..4d3dfdc1e 100644 --- a/src/components/drawer/drawer.ts +++ b/src/components/drawer/drawer.ts @@ -14,6 +14,8 @@ import Modal from '../../internal/modal'; import { setDefaultAnimation, getAnimation } from '../../utilities/animation-registry'; import styles from './drawer.styles'; +import '../icon-button/icon-button'; + const hasPreventScroll = isPreventScrollSupported(); let id = 0; diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts index a21722979..6a6ac1515 100644 --- a/src/components/icon-button/icon-button.ts +++ b/src/components/icon-button/icon-button.ts @@ -5,6 +5,8 @@ import { ifDefined } from 'lit-html/directives/if-defined'; import { focusVisible } from '../../internal/focus-visible'; import styles from './icon-button.styles'; +import '../icon/icon'; + /** * @since 2.0 * @status stable diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts index 3c7f45337..60c7e65e2 100644 --- a/src/components/image-comparer/image-comparer.ts +++ b/src/components/image-comparer/image-comparer.ts @@ -6,6 +6,8 @@ import { emit } from '../../internal/event'; import { watch } from '../../internal/watch'; import styles from './image-comparer.styles'; +import '../icon/icon'; + /** * @since 2.0 * @status stable diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 64f12d1f2..671b36c27 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -8,6 +8,8 @@ import { getLabelledBy, renderFormControl } from '../../internal/form-control'; import { hasSlot } from '../../internal/slot'; import styles from './input.styles'; +import '../icon/icon'; + let id = 0; /** diff --git a/src/components/menu-divider/menu-divider.ts b/src/components/menu-divider/menu-divider.ts index 60ddd01d0..15d6a6d41 100644 --- a/src/components/menu-divider/menu-divider.ts +++ b/src/components/menu-divider/menu-divider.ts @@ -6,8 +6,6 @@ import styles from './menu-divider.styles'; * @since 2.0 * @status stable * - * @dependency sl-menu - * * @csspart base - The component's base wrapper. */ @customElement('sl-menu-divider') diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts index 88e7f90ad..ae30fffc9 100644 --- a/src/components/menu-item/menu-item.ts +++ b/src/components/menu-item/menu-item.ts @@ -4,6 +4,8 @@ import { classMap } from 'lit-html/directives/class-map'; import { watch } from '../../internal/watch'; import styles from './menu-item.styles'; +import '../icon/icon'; + /** * @since 2.0 * @status stable diff --git a/src/components/menu-label/menu-label.ts b/src/components/menu-label/menu-label.ts index 50e5e067b..b5a0c423b 100644 --- a/src/components/menu-label/menu-label.ts +++ b/src/components/menu-label/menu-label.ts @@ -6,8 +6,6 @@ import styles from './menu-label.styles'; * @since 2.0 * @status stable * - * @dependency sl-menu - * * @slot - The menu label's content. * * @csspart base - The component's base wrapper. diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts index 6d56958ef..7f6acfc94 100644 --- a/src/components/rating/rating.ts +++ b/src/components/rating/rating.ts @@ -9,6 +9,8 @@ import { focusVisible } from '../../internal/focus-visible'; import { clamp } from '../../internal/math'; import styles from './rating.styles'; +import '../icon/icon'; + /** * @since 2.0 * @status stable diff --git a/src/components/select/select.ts b/src/components/select/select.ts index ef700fb3d..0c64bca02 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -13,6 +13,12 @@ import type SlMenu from '../menu/menu'; import type SlMenuItem from '../menu-item/menu-item'; import styles from './select.styles'; +import '../dropdown/dropdown'; +import '../icon/icon'; +import '../icon-button/icon-button'; +import '../menu/menu'; +import '../tag/tag'; + let id = 0; /** diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts index fad988205..daa1639e3 100644 --- a/src/components/tab-group/tab-group.ts +++ b/src/components/tab-group/tab-group.ts @@ -10,6 +10,8 @@ import type SlTab from '../tab/tab'; import type SlTabPanel from '../tab-panel/tab-panel'; import styles from './tab-group.styles'; +import '../icon-button/icon-button'; + /** * @since 2.0 * @status stable diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts index f4ad410b7..e2a26a5f8 100644 --- a/src/components/tab/tab.ts +++ b/src/components/tab/tab.ts @@ -4,6 +4,8 @@ import { classMap } from 'lit-html/directives/class-map'; import { emit } from '../../internal/event'; import styles from './tab.styles'; +import '../icon-button/icon-button'; + let id = 0; /** diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts index efb85e612..5ddf1e17c 100644 --- a/src/components/tag/tag.ts +++ b/src/components/tag/tag.ts @@ -4,6 +4,8 @@ import { classMap } from 'lit-html/directives/class-map'; import { emit } from '../../internal/event'; import styles from './tag.styles'; +import '../icon-button/icon-button'; + /** * @since 2.0 * @status stable