diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md index 8fcf5dfa..37599afe 100644 --- a/docs/getting-started/changelog.md +++ b/docs/getting-started/changelog.md @@ -6,14 +6,21 @@ Components with the Experimental badge _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛 -## Next +## 2.0.0-beta.34 +This release changes the way components are registered if you're [cherry picking](/getting-started/installation?id=cherry-picking) or [using a bundler](/getting-started/installation?id=bundling). This recommendation came from the LitElement team and simplifies Shoelace's dependency graph. It also eliminates the need to call a `register()` function before using each component. + +From now on, importing a component will register it automatically. The caveat is that bundlers may not tree shake the library properly if you import from `@shoelace-style/shoelace`, so the recommendation is to import components and utilities from their corresponding files instead. + +- 🚨 BREAKING: removed `all.shoelace.js` (use `shoelace.js` instead) +- 🚨 BREAKING: component modules now have a side effect, so bundlers may not tree shake properly when importing from `@shoelace-style/shoelace` (see the [installation page](/getting-started/installation?id=bundling) for more details and how to update) - Added `sl-clear` event to `sl-select` - Fixed a bug where dynamically changing menu items in `sl-select` would cause the display label to be blank [#374](https://github.com/shoelace-style/shoelace/discussions/374) - Fixed a bug where setting the `value` attribute or property on `sl-input` and `sl-textarea` would trigger validation too soon - Fixed the margin in `sl-menu-label` to align with menu items - Fixed `autofocus` attributes in `sl-input` and `sl-textarea` - Improved types for `autocapitalize` in `sl-input` and `sl-textarea` +- Reverted the custom `@tag` decorator in favor of `@customElement` to enable auto-registration ## 2.0.0-beta.33 diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md index 4758c515..cf53087a 100644 --- a/docs/getting-started/installation.md +++ b/docs/getting-started/installation.md @@ -8,7 +8,7 @@ The easiest way to install Shoelace is with the CDN. Just add the following tags ```html - + ``` Now you can [start using Shoelace!](/getting-started/usage.md) @@ -27,14 +27,14 @@ Once you've done that, add the following tags to your page. Make sure to update ```html - + ``` ## Setting the Base Path Some components rely on assets (icons, images, etc.) and Shoelace needs to know where they're located. For convenience, Shoelace will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `shoelace.js` and will "just work" for most users. -However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Shoelace, you'll need to set the base path. You can do this one of two ways. The following examples assume you're serving Shoelace's `dist` directory from `/scripts/shoelace`. +However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Shoelace, you'll need to set the base path. You can do this one of two ways. The following example assumes you're serving Shoelace's `dist` directory from `/scripts/shoelace`. ```html @@ -56,7 +56,7 @@ The previous approach is the _easiest_ way to load Shoelace, but easy isn't alwa 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. -Here's an example that loads only the button component and its dependencies. +Here's an example that loads only the button component and its dependencies. Again, we're assuming you're serving Shoelace's `dist` directory from `/scripts/shoelace`. ```html @@ -66,16 +66,15 @@ Here's an example that loads only the button component and its dependencies. import SlButton from '/scripts/shoelace/dist/components/button/button.js'; import SlSpinner from '/scripts/shoelace/dist/components/spinner/spinner.js'; - SlButton.register(); - SlSpinner.register(); // spinner is a dependency of button + // and are ready to use! ``` 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 from `all.shoelace.js` or `shoelace.js` as this will cause the browser to load the entire library. Instead, cherry pick from component modules as shown above. +!> 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 may see files named `chunk.[hash].js` in the `dist` directory. Never reference these files directly, as they change from version to version. Instead, import the corresponding component or utility file. +!> 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. ## Bundling @@ -95,18 +94,17 @@ Now it's time to configure your bundler. Configurations vary for each tool, but Once your bundler is configured, you'll be able to import Shoelace components and utilities. ```js -import '@shoelace-style/shoelace/dist/shoelace.css'; -import { setBasePath, SlButton, SlIcon, SlInput, SlRating } from '@shoelace-style/shoelace'; +import '@shoelace-style/shoelace/dist/themes/base.css'; +import SlButton from '@shoelace-style/shoelace/dist/components/button/button.js'; +import SlIcon from '@shoelace-style/shoelace/dist/components/icon/icon.js'; +import SlInput from '@shoelace-style/shoelace/dist/components/input/input.js'; +import SlRating from '@shoelace-style/shoelace/dist/components/rating/rating.js'; +import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js'; // Set the base path to the folder you copied Shoelace's assets to setBasePath('/dist/shoelace'); -SlButton.register(); -SlIcon.register(); -SlInput.register(); -SlRating.register(); - // , , , and are ready to use! ``` -Note that you need to register each component manually to add them to the custom element registry. This isn't done automatically because it would introduce side effects that break tree shaking. +!> Component modules include side effects for registration purposes. Because of this, importing directly from `@shoelace-style/shoelace` may result in a larger bundle size than necessary. For optimal tree shaking, always import components and utilities from their respective files as shown above. \ No newline at end of file diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md index bf82c73a..cefd0e22 100644 --- a/docs/getting-started/overview.md +++ b/docs/getting-started/overview.md @@ -30,7 +30,7 @@ Add the following code to your page. ```html - + ``` Now you have access to all of Shoelace's components! Try adding a button: diff --git a/docs/index.html b/docs/index.html index 3d970905..9024a412 100644 --- a/docs/index.html +++ b/docs/index.html @@ -43,7 +43,7 @@ - +
diff --git a/package.json b/package.json index 00dfbd62..16ffccc3 100644 --- a/package.json +++ b/package.json @@ -69,9 +69,6 @@ "typescript": "4.1.5", "wait-on": "^5.2.1" }, - "sideEffects": [ - "*.css" - ], "husky": { "hooks": { "pre-commit": "npm run prettier" diff --git a/scripts/build.cjs b/scripts/build.cjs index 7958108b..a93c14f6 100644 --- a/scripts/build.cjs +++ b/scripts/build.cjs @@ -25,10 +25,8 @@ execSync('node scripts/make-icons.cjs', { stdio: 'inherit' }); (async () => { const entryPoints = [ - // The main dist + // The whole shebang dist './src/shoelace.ts', - // The whole shebang - './src/all.shoelace.ts', // Components ...(await glob('./src/components/**/*.ts')), // Public utilities diff --git a/src/all.shoelace.ts b/src/all.shoelace.ts deleted file mode 100644 index 59e18920..00000000 --- a/src/all.shoelace.ts +++ /dev/null @@ -1,11 +0,0 @@ -// This is a convenience file that exports everything and registers components automatically -import * as shoelace from './shoelace'; - -export * from './shoelace'; - -Object.keys(shoelace).map(key => { - const item = (shoelace as any)[key]; - if (typeof item.register === 'function') { - item.register(); - } -}); diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index f67a701f..a83239bc 100644 --- a/src/components/alert/alert.ts +++ b/src/components/alert/alert.ts @@ -1,6 +1,6 @@ -import { LitElement, html, internalProperty, property, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./alert.scss'; const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' }); @@ -19,7 +19,7 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'sl * @part message - The alert message. * @part close-button - The close button. */ -@tag('sl-alert') +@customElement('sl-alert') export default class SlAlert extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/animation/animation.ts b/src/components/animation/animation.ts index edccc023..16271a08 100644 --- a/src/components/animation/animation.ts +++ b/src/components/animation/animation.ts @@ -1,5 +1,5 @@ -import { LitElement, html, property, queryAsync, unsafeCSS } from 'lit-element'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { LitElement, customElement, html, property, queryAsync, unsafeCSS } from 'lit-element'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./animation.scss'; import { animations } from './animations'; @@ -9,7 +9,7 @@ import { animations } from './animations'; * * @slot - The element to animate. If multiple elements are to be animated, wrap them in a single container. */ -@tag('sl-animation') +@customElement('sl-animation') export default class SlAnimation extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index e152d7ce..7d7205d8 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -1,6 +1,5 @@ -import { LitElement, html, internalProperty, property, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { tag } from '../../internal/decorators'; import styles from 'sass:./avatar.scss'; /** @@ -16,7 +15,7 @@ import styles from 'sass:./avatar.scss'; * @part initials - The container that wraps the avatar initials. * @part image - The avatar image. */ -@tag('sl-avatar') +@customElement('sl-avatar') export default class SlAvatar extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts index a1d5e67c..c1ab2dd7 100644 --- a/src/components/badge/badge.ts +++ b/src/components/badge/badge.ts @@ -1,6 +1,5 @@ -import { LitElement, html, property, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { tag } from '../../internal/decorators'; import styles from 'sass:./badge.scss'; /** @@ -11,7 +10,7 @@ import styles from 'sass:./badge.scss'; * * @part base - The base wrapper */ -@tag('sl-badge') +@customElement('sl-badge') export default class SlBadge extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts index 592aec28..d3de4292 100644 --- a/src/components/button-group/button-group.ts +++ b/src/components/button-group/button-group.ts @@ -1,5 +1,4 @@ -import { LitElement, html, property, unsafeCSS } from 'lit-element'; -import { tag } from '../../internal/decorators'; +import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element'; import styles from 'sass:./button-group.scss'; /** @@ -10,7 +9,7 @@ import styles from 'sass:./button-group.scss'; * * @part base - The component's base wrapper. */ -@tag('sl-button-group') +@customElement('sl-button-group') export default class SlButtonGroup extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/button/button.ts b/src/components/button/button.ts index ccfaaa82..a98bb8b9 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -1,7 +1,7 @@ -import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; import { ifDefined } from 'lit-html/directives/if-defined'; -import { event, EventEmitter, tag } from '../../internal/decorators'; +import { event, EventEmitter } from '../../internal/decorators'; import styles from 'sass:./button.scss'; import { hasSlot } from '../../internal/slot'; @@ -21,7 +21,7 @@ import { hasSlot } from '../../internal/slot'; * @part suffix - The suffix container. * @part caret - The button's caret. */ -@tag('sl-button') +@customElement('sl-button') export default class SlButton extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/card/card.ts b/src/components/card/card.ts index 2e251e30..a21f426d 100644 --- a/src/components/card/card.ts +++ b/src/components/card/card.ts @@ -1,6 +1,5 @@ -import { LitElement, html, internalProperty, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { tag } from '../../internal/decorators'; import styles from 'sass:./card.scss'; import { hasSlot } from '../../internal/slot'; @@ -19,7 +18,7 @@ import { hasSlot } from '../../internal/slot'; * @part body - The card's body. * @part footer - The card's footer, if present. */ -@tag('sl-card') +@customElement('sl-card') export default class SlCard extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 325a4045..e258fae4 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -1,6 +1,6 @@ -import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./checkbox.scss'; let id = 0; @@ -17,7 +17,7 @@ let id = 0; * @part indeterminate-icon - The container that wraps the indeterminate icon. * @part label - The checkbox label. */ -@tag('sl-checkbox') +@customElement('sl-checkbox') export default class SlCheckbox extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index 3ce0cda2..ceea88db 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -1,7 +1,7 @@ -import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; import { styleMap } from 'lit-html/directives/style-map'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./color-picker.scss'; import { SlDropdown, SlInput } from '../../shoelace'; import color from 'color'; @@ -30,7 +30,7 @@ import { clamp } from '../../internal/math'; * @part input - The text input. * @part format-button - The toggle format button's base. */ -@tag('sl-color-picker') +@customElement('sl-color-picker') export default class SlColorPicker extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/details/details.ts b/src/components/details/details.ts index 2830bf51..36a4121a 100644 --- a/src/components/details/details.ts +++ b/src/components/details/details.ts @@ -1,6 +1,6 @@ -import { LitElement, html, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./details.scss'; import { focusVisible } from '../../internal/focus-visible'; @@ -21,7 +21,7 @@ let id = 0; * @part summary-icon - The expand/collapse summary icon. * @part content - The details content. */ -@tag('sl-details') +@customElement('sl-details') export default class SlDetails extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 00239ed3..41f6cf3c 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -1,7 +1,7 @@ -import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; import { ifDefined } from 'lit-html/directives/if-defined'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./dialog.scss'; import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll'; import { hasSlot } from '../../internal/slot'; @@ -31,7 +31,7 @@ let id = 0; * @part body - The dialog body. * @part footer - The dialog footer. */ -@tag('sl-dialog') +@customElement('sl-dialog') export default class SlDialog extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts index 35d706d9..4ba091ee 100644 --- a/src/components/drawer/drawer.ts +++ b/src/components/drawer/drawer.ts @@ -1,7 +1,7 @@ -import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; import { ifDefined } from 'lit-html/directives/if-defined'; -import { event, EventEmitter, tag } from '../../internal/decorators'; +import { event, EventEmitter } from '../../internal/decorators'; import styles from 'sass:./drawer.scss'; import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll'; import { hasSlot } from '../../internal/slot'; @@ -31,7 +31,7 @@ let id = 0; * @part body - The drawer body. * @part footer - The drawer footer. */ -@tag('sl-drawer') +@customElement('sl-drawer') export default class SlDrawer extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index a2c1b514..c5b7f82b 100644 --- a/src/components/dropdown/dropdown.ts +++ b/src/components/dropdown/dropdown.ts @@ -1,6 +1,6 @@ -import { LitElement, html, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./dropdown.scss'; import { SlMenu, SlMenuItem } from '../../shoelace'; import { scrollIntoView } from '../../internal/scroll'; @@ -20,7 +20,7 @@ let id = 0; * @part trigger - The container that wraps the trigger. * @part panel - The panel that gets shown when the dropdown is open. */ -@tag('sl-dropdown') +@customElement('sl-dropdown') export default class SlDropdown extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/form/form.ts b/src/components/form/form.ts index 9f9c50a2..4cf3eede 100644 --- a/src/components/form/form.ts +++ b/src/components/form/form.ts @@ -1,5 +1,5 @@ -import { LitElement, html, property, query, unsafeCSS } from 'lit-element'; -import { event, EventEmitter, tag } from '../../internal/decorators'; +import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element'; +import { event, EventEmitter } from '../../internal/decorators'; import styles from 'sass:./form.scss'; import { SlButton, @@ -28,7 +28,7 @@ interface FormControl { * * @part base - The component's base wrapper. */ -@tag('sl-form') +@customElement('sl-form') export default class SlForm extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/format-bytes/format-bytes.ts b/src/components/format-bytes/format-bytes.ts index 32b418e1..8f182213 100644 --- a/src/components/format-bytes/format-bytes.ts +++ b/src/components/format-bytes/format-bytes.ts @@ -1,12 +1,11 @@ -import { LitElement, property } from 'lit-element'; -import { tag } from '../../internal/decorators'; +import { LitElement, customElement, property } from 'lit-element'; import { formatBytes } from '../../internal/number'; /** * @since 2.0 * @status stable */ -@tag('sl-format-bytes') +@customElement('sl-format-bytes') export default class SlFormatBytes extends LitElement { /** The number to format in bytes. */ @property({ type: Number }) value = 0; diff --git a/src/components/format-date/format-date.ts b/src/components/format-date/format-date.ts index 1562da24..29978897 100644 --- a/src/components/format-date/format-date.ts +++ b/src/components/format-date/format-date.ts @@ -1,11 +1,10 @@ -import { LitElement, property } from 'lit-element'; -import { tag } from '../../internal/decorators'; +import { LitElement, customElement, property } from 'lit-element'; /** * @since 2.0 * @status stable */ -@tag('sl-format-date') +@customElement('sl-format-date') export default class SlFormatDate extends LitElement { /** The date/time to format. If not set, the current date and time will be used. */ @property() date: Date | string = new Date(); diff --git a/src/components/format-number/format-number.ts b/src/components/format-number/format-number.ts index 05970d9f..e6273e8e 100644 --- a/src/components/format-number/format-number.ts +++ b/src/components/format-number/format-number.ts @@ -1,11 +1,10 @@ -import { LitElement, property } from 'lit-element'; -import { tag } from '../../internal/decorators'; +import { LitElement, customElement, property } from 'lit-element'; /** * @since 2.0 * @status stable */ -@tag('sl-format-number') +@customElement('sl-format-number') export default class SlFormatNumber extends LitElement { /** The number to format. */ @property({ type: Number }) value = 0; diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts index e43a6b9f..71303a48 100644 --- a/src/components/icon-button/icon-button.ts +++ b/src/components/icon-button/icon-button.ts @@ -1,6 +1,5 @@ -import { LitElement, html, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { tag } from '../../internal/decorators'; import { ifDefined } from 'lit-html/directives/if-defined'; import styles from 'sass:./icon-button.scss'; import { focusVisible } from '../../internal/focus-visible'; @@ -13,7 +12,7 @@ import { focusVisible } from '../../internal/focus-visible'; * * @part base - The component's base wrapper. */ -@tag('sl-icon-button') +@customElement('sl-icon-button') export default class SlIconButton extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts index ae16a007..43c75d26 100644 --- a/src/components/icon/icon.ts +++ b/src/components/icon/icon.ts @@ -1,6 +1,6 @@ -import { LitElement, html, internalProperty, property, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element'; import { unsafeSVG } from 'lit-html/directives/unsafe-svg'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./icon.scss'; import { getIconLibrary, watchIcon, unwatchIcon } from './library'; import { requestIcon } from './request'; @@ -13,7 +13,7 @@ const parser = new DOMParser(); * * @part base - The component's base wrapper. */ -@tag('sl-icon') +@customElement('sl-icon') export default class SlIcon extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts index 2b8c47d6..908520c0 100644 --- a/src/components/image-comparer/image-comparer.ts +++ b/src/components/image-comparer/image-comparer.ts @@ -1,6 +1,6 @@ -import { LitElement, html, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element'; import { styleMap } from 'lit-html/directives/style-map'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./image-comparer.scss'; import { clamp } from '../../internal/math'; @@ -20,7 +20,7 @@ import { clamp } from '../../internal/math'; * @part divider - The divider that separates the images. * @part handle - The handle that the user drags to expose the after image. */ -@tag('sl-image-comparer') +@customElement('sl-image-comparer') export default class SlImageComparer extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/include/include.ts b/src/components/include/include.ts index 59c57353..5b0dbd41 100644 --- a/src/components/include/include.ts +++ b/src/components/include/include.ts @@ -1,5 +1,5 @@ -import { LitElement, html, property, unsafeCSS } from 'lit-element'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./include.scss'; import { requestInclude } from './request'; @@ -7,7 +7,7 @@ import { requestInclude } from './request'; * @since 2.0 * @status stable */ -@tag('sl-include') +@customElement('sl-include') export default class SlInclude extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 9ab64324..a0648b6c 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -1,7 +1,7 @@ -import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; import { ifDefined } from 'lit-html/directives/if-defined'; import { classMap } from 'lit-html/directives/class-map'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./input.scss'; import { renderFormControl } from '../../internal/form-control'; import { hasSlot } from '../../internal/slot'; @@ -32,7 +32,7 @@ let id = 0; * @part suffix - The input suffix container. * @part help-text - The input help text. */ -@tag('sl-input') +@customElement('sl-input') export default class SlInput extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/menu-divider/menu-divider.ts b/src/components/menu-divider/menu-divider.ts index d3d89686..cb261a9d 100644 --- a/src/components/menu-divider/menu-divider.ts +++ b/src/components/menu-divider/menu-divider.ts @@ -1,5 +1,4 @@ -import { LitElement, html, unsafeCSS } from 'lit-element'; -import { tag } from '../../internal/decorators'; +import { LitElement, customElement, html, unsafeCSS } from 'lit-element'; import styles from 'sass:./menu-divider.scss'; /** @@ -10,7 +9,7 @@ import styles from 'sass:./menu-divider.scss'; * * @part base - The component's base wrapper. */ -@tag('sl-menu-divider') +@customElement('sl-menu-divider') export default class SlMenuDivider extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts index 0410745d..254903e3 100644 --- a/src/components/menu-item/menu-item.ts +++ b/src/components/menu-item/menu-item.ts @@ -1,5 +1,4 @@ -import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; -import { tag } from '../../internal/decorators'; +import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; import { ifDefined } from 'lit-html/directives/if-defined'; import styles from 'sass:./menu-item.scss'; @@ -20,7 +19,7 @@ import styles from 'sass:./menu-item.scss'; * @part label - The menu item label. * @part suffix - The suffix container. */ -@tag('sl-menu-item') +@customElement('sl-menu-item') export default class SlMenuItem extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/menu-label/menu-label.ts b/src/components/menu-label/menu-label.ts index 9bb1a96c..225529ee 100644 --- a/src/components/menu-label/menu-label.ts +++ b/src/components/menu-label/menu-label.ts @@ -1,5 +1,4 @@ -import { LitElement, html, unsafeCSS } from 'lit-element'; -import { tag } from '../../internal/decorators'; +import { LitElement, customElement, html, unsafeCSS } from 'lit-element'; import styles from 'sass:./menu-label.scss'; /** @@ -12,7 +11,7 @@ import styles from 'sass:./menu-label.scss'; * * @part base - The component's base wrapper. */ -@tag('sl-menu-label') +@customElement('sl-menu-label') export default class SlMenuLabel extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index 5cf6069f..3fc1a087 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -1,5 +1,5 @@ -import { LitElement, html, query, unsafeCSS } from 'lit-element'; -import { event, EventEmitter, tag } from '../../internal/decorators'; +import { LitElement, customElement, html, query, unsafeCSS } from 'lit-element'; +import { event, EventEmitter } from '../../internal/decorators'; import styles from 'sass:./menu.scss'; import { SlMenuItem } from '../../shoelace'; import { getTextContent } from '../../internal/slot'; @@ -12,7 +12,7 @@ import { getTextContent } from '../../internal/slot'; * * @part base - The component's base wrapper. */ -@tag('sl-menu') +@customElement('sl-menu') export default class SlMenu extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts index 74c9a577..4ce52064 100644 --- a/src/components/progress-bar/progress-bar.ts +++ b/src/components/progress-bar/progress-bar.ts @@ -1,7 +1,6 @@ -import { LitElement, html, property, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; import { styleMap } from 'lit-html/directives/style-map'; -import { tag } from '../../internal/decorators'; import styles from 'sass:./progress-bar.scss'; /** @@ -14,7 +13,7 @@ import styles from 'sass:./progress-bar.scss'; * @part indicator - The progress bar indicator. * @part label - The progress bar label. */ -@tag('sl-progress-bar') +@customElement('sl-progress-bar') export default class SlProgressBar extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts index fbc42d1e..7b7ad722 100644 --- a/src/components/progress-ring/progress-ring.ts +++ b/src/components/progress-ring/progress-ring.ts @@ -1,5 +1,5 @@ -import { LitElement, html, property, query, unsafeCSS } from 'lit-element'; -import { tag, watch } from '../../internal/decorators'; +import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element'; +import { watch } from '../../internal/decorators'; import styles from 'sass:./progress-ring.scss'; /** @@ -11,7 +11,7 @@ import styles from 'sass:./progress-ring.scss'; * @part base - The component's base wrapper. * @part label - The progress ring label. */ -@tag('sl-progress-ring') +@customElement('sl-progress-ring') export default class SlProgressRing extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index 738fba60..676b9362 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -1,6 +1,6 @@ -import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./radio.scss'; let id = 0; @@ -16,7 +16,7 @@ let id = 0; * @part checked-icon - The container the wraps the checked icon. * @part label - The radio label. */ -@tag('sl-radio') +@customElement('sl-radio') export default class SlRadio extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/range/range.ts b/src/components/range/range.ts index 262f18d5..3d9981aa 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -1,7 +1,7 @@ -import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; import { ifDefined } from 'lit-html/directives/if-defined'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./range.scss'; import { renderFormControl } from '../../internal/form-control'; import { hasSlot } from '../../internal/slot'; @@ -19,7 +19,7 @@ let id = 0; * @part input - The native range input. * @part tooltip - The range tooltip. */ -@tag('sl-range') +@customElement('sl-range') export default class SlRange extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts index 5bef7139..8dd16b19 100644 --- a/src/components/rating/rating.ts +++ b/src/components/rating/rating.ts @@ -1,8 +1,8 @@ -import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; import { styleMap } from 'lit-html/directives/style-map'; import { unsafeHTML } from 'lit-html/directives/unsafe-html'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./rating.scss'; import { focusVisible } from '../../internal/focus-visible'; import { clamp } from '../../internal/math'; @@ -15,7 +15,7 @@ import { clamp } from '../../internal/math'; * * @part base - The component's base wrapper. */ -@tag('sl-rating') +@customElement('sl-rating') export default class SlRating extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/relative-time/relative-time.ts b/src/components/relative-time/relative-time.ts index 5a86fe27..994e6b4e 100644 --- a/src/components/relative-time/relative-time.ts +++ b/src/components/relative-time/relative-time.ts @@ -1,11 +1,11 @@ -import { LitElement, html, internalProperty, property } from 'lit-element'; -import { tag, watch } from '../../internal/decorators'; +import { LitElement, customElement, html, internalProperty, property } from 'lit-element'; +import { watch } from '../../internal/decorators'; /** * @since 2.0 * @status stable */ -@tag('sl-relative-time') +@customElement('sl-relative-time') export default class SlRelativeTime extends LitElement { private updateTimeout: any; diff --git a/src/components/resize-observer/resize-observer.ts b/src/components/resize-observer/resize-observer.ts index 223a0f25..e4195471 100644 --- a/src/components/resize-observer/resize-observer.ts +++ b/src/components/resize-observer/resize-observer.ts @@ -1,12 +1,12 @@ -import { LitElement, html, unsafeCSS } from 'lit-element'; -import { event, EventEmitter, tag } from '../../internal/decorators'; +import { LitElement, customElement, html, unsafeCSS } from 'lit-element'; +import { event, EventEmitter } from '../../internal/decorators'; import styles from 'sass:./resize-observer.scss'; /** * @since 2.0 * @status experimental */ -@tag('sl-resize-observer') +@customElement('sl-resize-observer') export default class SlResizeObserver extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/responsive-embed/responsive-embed.ts b/src/components/responsive-embed/responsive-embed.ts index 4a2beb23..7c012ef2 100644 --- a/src/components/responsive-embed/responsive-embed.ts +++ b/src/components/responsive-embed/responsive-embed.ts @@ -1,6 +1,6 @@ -import { LitElement, html, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element'; import styles from 'sass:./responsive-embed.scss'; -import { tag, watch } from '../../internal/decorators'; +import { watch } from '../../internal/decorators'; /** * @since 2.0 @@ -8,7 +8,7 @@ import { tag, watch } from '../../internal/decorators'; * * @part base - The component's base wrapper. */ -@tag('sl-responsive-embed') +@customElement('sl-responsive-embed') export default class SlResponsiveEmbed extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/select/select.ts b/src/components/select/select.ts index b88d452e..9b1bb160 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -1,6 +1,15 @@ -import { LitElement, TemplateResult, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; +import { + LitElement, + customElement, + TemplateResult, + html, + internalProperty, + property, + query, + unsafeCSS +} from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./select.scss'; import { SlDropdown, SlIconButton, SlMenu, SlMenuItem } from '../../shoelace'; import { renderFormControl } from '../../internal/form-control'; @@ -33,7 +42,7 @@ let id = 0; * @part tag - The multiselect option, a element. * @part tags - The container in which multiselect options are rendered. */ -@tag('sl-select') +@customElement('sl-select') export default class SlSelect extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/skeleton/skeleton.ts b/src/components/skeleton/skeleton.ts index 30205452..ebd4e11b 100644 --- a/src/components/skeleton/skeleton.ts +++ b/src/components/skeleton/skeleton.ts @@ -1,6 +1,5 @@ -import { LitElement, html, property, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { tag } from '../../internal/decorators'; import styles from 'sass:./skeleton.scss'; /** @@ -10,7 +9,7 @@ import styles from 'sass:./skeleton.scss'; * @part base - The component's base wrapper. * @part indicator - The skeleton's indicator which is responsible for its color and animation. */ -@tag('sl-skeleton') +@customElement('sl-skeleton') export default class SlSkeleton extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts index 41aada8c..e292e545 100644 --- a/src/components/spinner/spinner.ts +++ b/src/components/spinner/spinner.ts @@ -1,5 +1,4 @@ -import { LitElement, html, unsafeCSS } from 'lit-element'; -import { tag } from '../../internal/decorators'; +import { LitElement, customElement, html, unsafeCSS } from 'lit-element'; import styles from 'sass:./spinner.scss'; /** @@ -8,7 +7,7 @@ import styles from 'sass:./spinner.scss'; * * @part base - The component's base wrapper. */ -@tag('sl-spinner') +@customElement('sl-spinner') export default class SlSpinner extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index a416dab7..2ac902b8 100644 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -1,6 +1,6 @@ -import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./switch.scss'; let id = 0; @@ -16,7 +16,7 @@ let id = 0; * @part thumb - The switch position indicator. * @part label - The switch label. */ -@tag('sl-switch') +@customElement('sl-switch') export default class SlSwitch extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts index fc2e283d..1e2aa1d5 100644 --- a/src/components/tab-group/tab-group.ts +++ b/src/components/tab-group/tab-group.ts @@ -1,6 +1,6 @@ -import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./tab-group.scss'; import { SlTab, SlTabPanel } from '../../shoelace'; import { focusVisible } from '../../internal/focus-visible'; @@ -23,7 +23,7 @@ import { scrollIntoView } from '../../internal/scroll'; * @part body - The tab group body where tab panels are slotted in. * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable. */ -@tag('sl-tab-group') +@customElement('sl-tab-group') export default class SlTabGroup extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts index de3325ea..4e8ce006 100644 --- a/src/components/tab-panel/tab-panel.ts +++ b/src/components/tab-panel/tab-panel.ts @@ -1,5 +1,4 @@ -import { LitElement, html, property, unsafeCSS } from 'lit-element'; -import { tag } from '../../internal/decorators'; +import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element'; import styles from 'sass:./tab-panel.scss'; let id = 0; @@ -12,7 +11,7 @@ let id = 0; * * @part base - The component's base wrapper. */ -@tag('sl-tab-panel') +@customElement('sl-tab-panel') export default class SlTabPanel extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts index 8d4cb59e..154ecd80 100644 --- a/src/components/tab/tab.ts +++ b/src/components/tab/tab.ts @@ -1,6 +1,6 @@ -import { LitElement, html, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { event, EventEmitter, tag } from '../../internal/decorators'; +import { event, EventEmitter } from '../../internal/decorators'; import styles from 'sass:./tab.scss'; let id = 0; @@ -16,7 +16,7 @@ let id = 0; * @part base - The component's base wrapper. * @part close-button - The close button, which is the icon button's base wrapper. */ -@tag('sl-tab') +@customElement('sl-tab') export default class SlTab extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts index fa287b60..82dabb56 100644 --- a/src/components/tag/tag.ts +++ b/src/components/tag/tag.ts @@ -1,6 +1,6 @@ -import { LitElement, html, property, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { event, EventEmitter, tag } from '../../internal/decorators'; +import { event, EventEmitter } from '../../internal/decorators'; import styles from 'sass:./tag.scss'; /** @@ -15,7 +15,7 @@ import styles from 'sass:./tag.scss'; * @part content - The tag content. * @part clear-button - The clear button. */ -@tag('sl-tag') +@customElement('sl-tag') export default class SlTag extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index d93ee957..280bece5 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -1,7 +1,7 @@ -import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; import { ifDefined } from 'lit-html/directives/if-defined'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./textarea.scss'; import { renderFormControl } from '../../internal/form-control'; import { hasSlot } from '../../internal/slot'; @@ -21,7 +21,7 @@ let id = 0; * @part textarea - The textarea control. * @part help-text - The textarea help text. */ -@tag('sl-textarea') +@customElement('sl-textarea') export default class SlTextarea extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index 869a3031..338c8165 100644 --- a/src/components/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip.ts @@ -1,6 +1,6 @@ -import { LitElement, html, property, query, unsafeCSS } from 'lit-element'; +import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element'; import { classMap } from 'lit-html/directives/class-map'; -import { event, EventEmitter, tag, watch } from '../../internal/decorators'; +import { event, EventEmitter, watch } from '../../internal/decorators'; import styles from 'sass:./tooltip.scss'; import Popover from '../../internal/popover'; @@ -15,7 +15,7 @@ let id = 0; * * @part base - The component's base wrapper. */ -@tag('sl-tooltip') +@customElement('sl-tooltip') export default class SlTooltip extends LitElement { static styles = unsafeCSS(styles); diff --git a/src/internal/decorators.ts b/src/internal/decorators.ts index 5defa47b..78408986 100644 --- a/src/internal/decorators.ts +++ b/src/internal/decorators.ts @@ -61,29 +61,6 @@ export class EventEmitter { } } -// @tag decorator -// -// LitElement suggests using their @customElement decorator, but this introduces a side effect that defines the element -// and breaks tree shaking. We use this alternative to add a defineElement() function to the element instead. -// -// Usage: -// -// @tag('sl-button') -// class SlButton extends LitElement { ... } -// -// To register the element: -// -// import { SlButton } from '@shoelace-style/shoelace'; -// SlButton.defineElement(); -// -export function tag(tagName: string) { - return (protoOrDescriptor: any): any => { - protoOrDescriptor.register = function () { - customElements.define(tagName, protoOrDescriptor); - }; - }; -} - // @watch decorator // // Runs when an observed property changes, e.g. @property or @internalProperty. This will only run after the first