diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md index 8fcf5dfa6..37599afe4 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 4758c5153..cf53087a2 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 bf82c73ae..cefd0e229 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 3d9709056..9024a4121 100644 --- a/docs/index.html +++ b/docs/index.html @@ -43,7 +43,7 @@ - +
diff --git a/package.json b/package.json index 00dfbd626..16ffccc39 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 7958108b2..a93c14f6a 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 59e189206..000000000 --- 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 f67a701ff..a83239bc0 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 edccc0236..16271a08c 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 e152d7cea..7d7205d8f 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 a1d5e67c5..c1ab2dd7b 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 592aec280..d3de42925 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 ccfaaa82c..a98bb8b94 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 2e251e30b..a21f426d4 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 325a4045d..e258fae40 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 3ce0cda24..ceea88db8 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 2830bf514..36a4121a8 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 00239ed35..41f6cf3cc 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 35d706d9e..4ba091eef 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 a2c1b5148..c5b7f82b1 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 9f9c50a27..4cf3eedef 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 32b418e1a..8f1822137 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 1562da241..29978897f 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 05970d9f1..e6273e8ee 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 e43a6b9f9..71303a487 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 ae16a007a..43c75d262 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 2b8c47d67..908520c0d 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 59c573536..5b0dbd411 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 9ab64324c..a0648b6c2 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 d3d896863..cb261a9d6 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 0410745db..254903e3b 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 9bb1a96c3..225529ee1 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 5cf6069f2..3fc1a0875 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 74c9a577f..4ce520643 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 fbc42d1ec..7b7ad722c 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 738fba60b..676b93626 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 262f18d59..3d9981aa3 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 5bef7139e..8dd16b197 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 5a86fe27f..994e6b4e7 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 223a0f25a..e4195471d 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 4a2beb239..7c012ef25 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 b88d452e2..9b1bb160d 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 302054526..ebd4e11b3 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 41aada8c9..e292e5459 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 a416dab71..2ac902b89 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 fc2e283da..1e2aa1d5c 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 de3325ea1..4e8ce006e 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 8d4cb59ed..154ecd80d 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 fa287b60d..82dabb563 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 d93ee957f..280bece56 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 869a30315..338c81650 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 5defa47b8..784089861 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