diff --git a/.vscode/settings.json b/.vscode/settings.json index 4165a4220..d5f76e88d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,7 +2,7 @@ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" }, "debug.enableStatusBarColor": false } diff --git a/cspell.json b/cspell.json index 6332d3e86..8d1293a94 100644 --- a/cspell.json +++ b/cspell.json @@ -176,7 +176,8 @@ "WCAG", "webawesome", "WEBP", - "Webpacker" + "Webpacker", + "xmark" ], "ignorePaths": [ "package.json", diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js index 5a444d3a1..303f036ed 100644 --- a/custom-elements-manifest.config.js +++ b/custom-elements-manifest.config.js @@ -38,6 +38,7 @@ export default { customElementsManifest.package = { name, description, version, author, homepage, license }; } }, + // Infer tag names because we no longer use @customElement decorators. { name: 'wa-infer-tag-names', @@ -66,6 +67,7 @@ export default { } } }, + // Parse custom jsDoc tags { name: 'wa-custom-tags', @@ -137,6 +139,7 @@ export default { } } }, + { name: 'wa-react-event-names', analyzePhase({ ts, node, moduleDoc }) { @@ -155,6 +158,7 @@ export default { } } }, + { name: 'wa-translate-module-paths', packageLinkPhase({ customElementsManifest }) { @@ -191,6 +195,7 @@ export default { }); } }, + // Generate custom VS Code data customElementVsCodePlugin({ outdir, @@ -202,6 +207,7 @@ export default { } ] }), + customElementJetBrainsPlugin({ outdir: './dist', excludeCss: true, diff --git a/docs/_includes/component.njk b/docs/_includes/component.njk index d2153d54a..709082471 100644 --- a/docs/_includes/component.njk +++ b/docs/_includes/component.njk @@ -155,12 +155,12 @@ {% if prop.reflects %} - + {% endif %} {% if prop.type.text %} - {{ prop.type.text | markdownInline | safe }} + {{ prop.type.text | trimPipes | markdownInline | safe }} {% else %} - {% endif %} @@ -211,7 +211,7 @@ {{ event.description | markdownInline | safe }} {% if event.type.text %} - {{ event.type.text }} + {{ event.type.text | trimPipes }} {% else %} - {% endif %} @@ -245,7 +245,7 @@ {% if method.parameters.length %} {% for param in method.parameters %} - {{ param.name }}: {{ param.type.text }}{% if not loop.last %},{% endif %} + {{ param.name }}: {{ param.type.text | trimPipes }}{% if not loop.last %},{% endif %} {% endfor %} {% else %} diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk index cb4b4de39..3076475bc 100644 --- a/docs/_includes/default.njk +++ b/docs/_includes/default.njk @@ -87,13 +87,13 @@
- Code + Code - Star + Star - Follow + Follow
diff --git a/docs/_utilities/code-previews.cjs b/docs/_utilities/code-previews.cjs index 9e9fbfb7c..59daefcce 100644 --- a/docs/_utilities/code-previews.cjs +++ b/docs/_utilities/code-previews.cjs @@ -68,7 +68,7 @@ module.exports = function (doc, options) {
${code.textContent}
- +
diff --git a/docs/_utilities/markdown.cjs b/docs/_utilities/markdown.cjs index 47b471e93..7cd6386be 100644 --- a/docs/_utilities/markdown.cjs +++ b/docs/_utilities/markdown.cjs @@ -24,16 +24,16 @@ markdown.use(markdownItReplaceIt); // Callouts ['tip', 'warning', 'danger'].forEach(type => { const variant = type === 'tip' ? 'brand' : type; - let icon = 'info-circle'; - if (type === 'warning') icon = 'exclamation-circle'; - if (type === 'danger') icon = 'exclamation-triangle'; + let icon = 'circle-info'; + if (type === 'warning') icon = 'triangle-exclamation'; + if (type === 'danger') icon = 'circle-exclamation'; markdown.use(markdownItContainer, type, { render: function (tokens, idx) { if (tokens[idx].nesting === 1) { return ` - + `; } return '\n'; diff --git a/docs/assets/scripts/search.js b/docs/assets/scripts/search.js index 26bbed684..7241e0bc3 100644 --- a/docs/assets/scripts/search.js +++ b/docs/assets/scripts/search.js @@ -30,7 +30,7 @@ aria-activedescendant > @@ -44,8 +44,8 @@
No matching pages
@@ -297,16 +297,16 @@ icon = 'book'; } if (page.url.includes('components/')) { - icon = 'puzzle'; + icon = 'puzzle-piece'; } if (page.url.includes('tokens/')) { - icon = 'palette2'; + icon = 'swatchbook'; } if (page.url.includes('utilities/')) { icon = 'wrench'; } if (page.url.includes('tutorials/')) { - icon = 'joystick'; + icon = 'gamepad'; } li.classList.add('search__result'); diff --git a/docs/assets/styles/code-previews.css b/docs/assets/styles/code-previews.css index d0bb6eb67..86edc77e7 100644 --- a/docs/assets/styles/code-previews.css +++ b/docs/assets/styles/code-previews.css @@ -39,7 +39,7 @@ right: 0; bottom: 0; width: 1.75rem; - font-size: 20px; + font-size: var(--wa-font-size-xs); color: var(--wa-color-text-quiet); background-color: var(--wa-color-surface-default); border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border); diff --git a/docs/eleventy.config.cjs b/docs/eleventy.config.cjs index 138c121da..6f4172e93 100644 --- a/docs/eleventy.config.cjs +++ b/docs/eleventy.config.cjs @@ -96,6 +96,12 @@ module.exports = function (eleventyConfig) { return webAwesomeFlavoredMarkdown.renderInline(content); }); + // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited. + // With Prettier 3, this means a leading pipe will exist if the line wraps. + eleventyConfig.addFilter('trimPipes', content => { + return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content; + }); + eleventyConfig.addFilter('classNameToComponentName', className => { let name = capitalCase(className.replace(/^Wa/, '')); if (name === 'Qr Code') name = 'QR Code'; // manual override diff --git a/docs/pages/components/alert.md b/docs/pages/components/alert.md index 18f30d4c8..bd67a079e 100644 --- a/docs/pages/components/alert.md +++ b/docs/pages/components/alert.md @@ -7,7 +7,7 @@ layout: component ```html:preview - + This is a standard alert. You can customize its content and even the icon. ``` @@ -18,7 +18,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( - + This is a standard alert. You can customize its content and even the icon. ); @@ -36,7 +36,7 @@ Set the `variant` attribute to change the alert's variant. ```html:preview - + This is super informative
You can tell by how pretty the alert is. @@ -44,7 +44,7 @@ Set the `variant` attribute to change the alert's variant.
- + Your changes have been saved
You can safely exit the app now. @@ -52,7 +52,7 @@ Set the `variant` attribute to change the alert's variant.
- + Your settings have been updated
Settings will take effect on next login. @@ -60,7 +60,7 @@ Set the `variant` attribute to change the alert's variant.
- + Your session has ended
Please login again to continue. @@ -68,7 +68,7 @@ Set the `variant` attribute to change the alert's variant.
- + Your account has been deleted
We're very sorry to see you go! @@ -81,7 +81,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( <> - + This is super informative
You can tell by how pretty the alert is. @@ -90,7 +90,7 @@ const App = () => (
- + Your changes have been saved
You can safely exit the app now. @@ -99,7 +99,7 @@ const App = () => (
- + Your settings have been updated
Settings will take effect on next login. @@ -108,7 +108,7 @@ const App = () => (
- + Your session has ended
Please login again to continue. @@ -117,7 +117,7 @@ const App = () => (
- + Your account has been deleted
We're very sorry to see you go! @@ -132,7 +132,7 @@ Add the `closable` attribute to show a close button that will hide the alert. ```html:preview - + You can close this alert any time! @@ -159,7 +159,7 @@ const App = () => { return ( - + You can close this alert any time! ); @@ -193,7 +193,7 @@ Set the `duration` attribute to automatically hide an alert after a period of ti Show Alert - + This alert will automatically hide itself after three seconds, unless you interact with it. @@ -236,7 +236,7 @@ const App = () => { setOpen(false)}> - + This alert will automatically hide itself after three seconds, unless you interact with it. @@ -262,31 +262,31 @@ You should always use the `closable` attribute so users can dismiss the notifica Danger - + This is super informative
You can tell by how pretty the alert is. - + Your changes have been saved
You can safely exit the app now. - + Your settings have been updated
Settings will take effect on next login. - + Your session has ended
Please login again to continue. - + Your account has been deleted
We're very sorry to see you go! @@ -344,35 +344,35 @@ const App = () => { - + This is super informative
You can tell by how pretty the alert is. - + Your changes have been saved
You can safely exit the app now. - + Your settings have been updated
Settings will take effect on next login. - + Your session has ended
Please login again to continue. - + Your account has been deleted
We're very sorry to see you go! @@ -404,13 +404,13 @@ For convenience, you can create a utility that emits toast notifications with a } // Custom function to emit toast notifications - function notify(message, variant = 'brand', icon = 'info-circle', duration = 3000) { + function notify(message, variant = 'brand', icon = 'circle-info', duration = 3000) { const alert = Object.assign(document.createElement('wa-alert'), { variant, closable: true, duration: duration, innerHTML: ` - + ${escapeHtml(message)} ` }); diff --git a/docs/pages/components/avatar.md b/docs/pages/components/avatar.md index c1c2a7dc4..f02fefc7d 100644 --- a/docs/pages/components/avatar.md +++ b/docs/pages/components/avatar.md @@ -57,13 +57,13 @@ const App = () => ( When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon. ```html:preview - + ``` ```jsx:react import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar'; -const App = () => ; +const App = () => ; ``` ### Custom Icons @@ -72,15 +72,15 @@ When no image or initials are set, an icon will be shown. The default avatar sho ```html:preview - + - + - + ``` diff --git a/docs/pages/components/breadcrumb-item.md b/docs/pages/components/breadcrumb-item.md index ea5addc6f..733d129ce 100644 --- a/docs/pages/components/breadcrumb-item.md +++ b/docs/pages/components/breadcrumb-item.md @@ -8,7 +8,7 @@ layout: component ```html:preview - + Home Clothing diff --git a/docs/pages/components/breadcrumb.md b/docs/pages/components/breadcrumb.md index 640a1164e..c897b5524 100644 --- a/docs/pages/components/breadcrumb.md +++ b/docs/pages/components/breadcrumb.md @@ -73,7 +73,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it ```html:preview - + First Second Third @@ -82,7 +82,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
- + First Second Third @@ -106,7 +106,7 @@ import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-ite const App = () => ( <> - + First Second Third @@ -115,7 +115,7 @@ const App = () => (
- + First Second Third @@ -140,7 +140,7 @@ Use the `prefix` slot to add content before any breadcrumb item. ```html:preview - + Home Articles @@ -156,7 +156,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( - + Home Articles @@ -175,7 +175,7 @@ Use the `suffix` slot to add content after any breadcrumb item. Policies Security - + ``` @@ -191,7 +191,7 @@ const App = () => ( Policies Security - + ); @@ -209,8 +209,8 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op Web Design - - + + Web Design @@ -241,8 +241,8 @@ const App = () => ( Web Design - - + + diff --git a/docs/pages/components/button-group.md b/docs/pages/components/button-group.md index de05300e4..15976ca1d 100644 --- a/docs/pages/components/button-group.md +++ b/docs/pages/components/button-group.md @@ -401,34 +401,34 @@ Create interactive toolbars with button groups.
- + - + - + - + - + - + - + - +
@@ -458,12 +458,12 @@ const App = () => ( - + - + @@ -471,17 +471,17 @@ const App = () => ( - + - + - + @@ -489,17 +489,17 @@ const App = () => ( - + - + - + diff --git a/docs/pages/components/button.md b/docs/pages/components/button.md index 7ade3885e..f54fd5b83 100644 --- a/docs/pages/components/button.md +++ b/docs/pages/components/button.md @@ -229,54 +229,54 @@ Use the `prefix` and `suffix` slots to add icons. ```html:preview - + Settings - + Refresh - - + + Open

- + Settings - + Refresh - - + + Open

- + Settings - + Refresh - - + + Open ``` @@ -288,18 +288,18 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( <> - + Settings - + Refresh - - + + Open @@ -307,18 +307,18 @@ const App = () => (
- + Settings - + Refresh - - + + Open @@ -326,18 +326,18 @@ const App = () => (
- + Settings - + Refresh - - + + Open diff --git a/docs/pages/components/card.md b/docs/pages/components/card.md index 061de2fdc..56c67c1e8 100644 --- a/docs/pages/components/card.md +++ b/docs/pages/components/card.md @@ -133,7 +133,7 @@ Headers can be used to display titles and more.
Header Title - +
This card has a header. You can put all sorts of things in it! @@ -189,7 +189,7 @@ const App = () => (
Header Title - +
This card has a header. You can put all sorts of things in it! diff --git a/docs/pages/components/copy-button.md b/docs/pages/components/copy-button.md index 838929400..60f4c9e4f 100644 --- a/docs/pages/components/copy-button.md +++ b/docs/pages/components/copy-button.md @@ -51,9 +51,9 @@ Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the ico ```html:preview - - - + + + ``` @@ -64,9 +64,9 @@ import { WaIcon } from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( <> - - - + + + ); @@ -179,9 +179,9 @@ You can customize the button to your liking with CSS. ```html:preview - - - + + + @@ -108,13 +108,13 @@ const App = () => ( Use the `href` attribute to convert the button to a link. ```html:preview - + ``` ```jsx:react import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; -const App = () => ; +const App = () => ; ``` ### Icon Button with Tooltip @@ -123,7 +123,7 @@ Wrap a tooltip around an icon button to provide contextual information to the us ```html:preview - + ``` @@ -133,7 +133,7 @@ import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; const App = () => ( - + ); ``` @@ -143,11 +143,11 @@ const App = () => ( Use the `disabled` attribute to disable the icon button. ```html:preview - + ``` ```jsx:react import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; -const App = () => ; +const App = () => ; ``` diff --git a/docs/pages/components/icon.md b/docs/pages/components/icon.md index 054418a2f..5428e8c38 100644 --- a/docs/pages/components/icon.md +++ b/docs/pages/components/icon.md @@ -19,23 +19,11 @@ All available icons in the `default` icon library are shown below. Click or tap ``` -
-
- - - - - Outlined - Filled - All icons - -
-
- -
- ## Examples +TODO - show how to use `family` and `variant` attributes. +TODO - show how to use FA pro via `data-webawesome-kit="..."` + ### Colors Icons inherit their color from the current text color. Thus, you can set the `color` property on the `` element or an ancestor to change the color. @@ -44,23 +32,23 @@ Icons inherit their color from the current text color. Thus, you can set the `co
- +
- +
- +
- + @@ -77,23 +65,23 @@ const App = () => (
- +
- +
- +
- + @@ -112,17 +100,17 @@ Icons are sized relative to the current font size. To change their size, set the
- + - + - - + + @@ -138,17 +126,17 @@ const App = () => (
- + - + - - + + @@ -163,13 +151,13 @@ const App = () => ( For non-decorative icons, use the `label` attribute to announce it to assistive devices. ```html:preview - + ``` ```jsx:react import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -const App = () => ; +const App = () => ; ``` ### Custom Icons @@ -680,190 +668,3 @@ If you want to change the icons Web Awesome uses internally, you can register an }); ``` - - - - - diff --git a/docs/pages/components/input.md b/docs/pages/components/input.md index 529913edd..d9ca7afe2 100644 --- a/docs/pages/components/input.md +++ b/docs/pages/components/input.md @@ -205,18 +205,18 @@ Use the `prefix` and `suffix` slots to add icons. ```html:preview - - + +
- - + +
- - + + ``` @@ -227,18 +227,18 @@ import WaInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ( <> - - + +
- - + +
- - + + ); diff --git a/docs/pages/components/menu-item.md b/docs/pages/components/menu-item.md index 5bc1f23cf..6125d8ec7 100644 --- a/docs/pages/components/menu-item.md +++ b/docs/pages/components/menu-item.md @@ -16,11 +16,11 @@ layout: component Prefix Icon - + Suffix Icon - + ``` @@ -46,11 +46,11 @@ const App = () => ( Prefix Icon - + Suffix Icon - + ); @@ -96,12 +96,12 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s ```html:preview - + Home - + Messages 12 @@ -109,7 +109,7 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s - + Settings @@ -127,12 +127,12 @@ import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( - + Home - + Messages 12 @@ -142,7 +142,7 @@ const App = () => ( - + Settings diff --git a/docs/pages/components/option.md b/docs/pages/components/option.md index bdf900bc3..ebf5b510d 100644 --- a/docs/pages/components/option.md +++ b/docs/pages/components/option.md @@ -62,21 +62,21 @@ Add icons to the start and end of menu items using the `prefix` and `suffix` slo ```html:preview - + Email - + - + Phone - + - + Chat - + ``` diff --git a/docs/pages/components/progress-bar.md b/docs/pages/components/progress-bar.md index 1ffe63a60..3352e2386 100644 --- a/docs/pages/components/progress-bar.md +++ b/docs/pages/components/progress-bar.md @@ -58,8 +58,8 @@ Use the default slot to show a value.
- - + + ``` @@ -219,7 +219,7 @@ import WaRating from '@shoelace-style/shoelace/dist/react/rating'; const App = () => ( ''} + getSymbol={() => ''} style={{ '--symbol-color-active': '#ff4136' }} /> ); @@ -238,7 +238,7 @@ You can also use the `getSymbol` property to render different icons based on val const rating = document.querySelector('.rating-emojis'); rating.getSymbol = value => { - const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing']; + const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh']; return ``; }; @@ -248,7 +248,7 @@ You can also use the `getSymbol` property to render different icons based on val import WaRating from '@shoelace-style/shoelace/dist/react/rating'; function getSymbol(value) { - const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing']; + const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh']; return ``; } diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md index 9488fef2e..4f1f70bb9 100644 --- a/docs/pages/components/select.md +++ b/docs/pages/components/select.md @@ -401,21 +401,21 @@ Use the `prefix` slot to prepend an icon to the control. ```html:preview - + Option 1 Option 2 Option 3
- + Option 1 Option 2 Option 3
- + Option 1 Option 2 Option 3 @@ -430,21 +430,21 @@ import WaSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( <> - + Option 1 Option 2 Option 3
- + Option 1 Option 2 Option 3
- + Option 1 Option 2 Option 3 @@ -468,15 +468,15 @@ Remember that custom tags are rendered in a shadow root. To style them, you can class="custom-tag" > - + Email - + Phone - + Chat diff --git a/docs/pages/components/split-panel.md b/docs/pages/components/split-panel.md index 5e421594e..cf3ff3862 100644 --- a/docs/pages/components/split-panel.md +++ b/docs/pages/components/split-panel.md @@ -638,7 +638,7 @@ You can target the `divider` part to apply CSS properties to the divider. To add ```html:preview - +
+
- +
- +
- - + + Deciduous @@ -349,8 +349,8 @@ import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; const App = () => ( - - + + Deciduous @@ -388,39 +388,39 @@ Decorative icons can be used before labels to provide hints for each node. ```html:preview - + Documents - + Photos - + birds.jpg - + kitten.jpg - + puppy.jpg - + Writing - + draft.txt - + final.pdf - + sales.xls diff --git a/docs/pages/components/visually-hidden.md b/docs/pages/components/visually-hidden.md index 634788b07..ffea0e38b 100644 --- a/docs/pages/components/visually-hidden.md +++ b/docs/pages/components/visually-hidden.md @@ -26,7 +26,7 @@ In this example, the link will open a new window. Screen readers will announce " ```html:preview Visit External Page - + opens in a new window ``` diff --git a/docs/pages/experimental/sandbox.md b/docs/pages/experimental/sandbox.md index 4ecb918c0..adced0d9f 100644 --- a/docs/pages/experimental/sandbox.md +++ b/docs/pages/experimental/sandbox.md @@ -47,31 +47,31 @@ meta: ```html:preview - + This is super informative
You can tell by how pretty the alert is.
- + Your changes have been saved
You can safely exit the app now.
- + Your settings have been updated
Settings will take affect on next login.
- + Your session has ended
Please login again to continue.
- + Your account has been deleted
We're very sorry to see you go! diff --git a/docs/pages/experimental/themer.md b/docs/pages/experimental/themer.md index f51ad6884..d81ebc925 100644 --- a/docs/pages/experimental/themer.md +++ b/docs/pages/experimental/themer.md @@ -266,7 +266,7 @@ toc: false
- + This is the way. @@ -279,7 +279,7 @@ toc: false
- + It's a trap! @@ -293,7 +293,7 @@ toc: false
- + That's no moon. @@ -348,7 +348,7 @@ toc: false left: calc(-1 * var(--wa-space-2xl)); width: calc(100% + var(--wa-space-2xl) * 2); height: 300px; - background: var(--wa-color-brand-spot); + background: var(--wa-color-brand-spot-darker); z-index: -1; } diff --git a/docs/pages/getting-started/installation.md b/docs/pages/getting-started/installation.md index 02199b2d7..9d2aceb10 100644 --- a/docs/pages/getting-started/installation.md +++ b/docs/pages/getting-started/installation.md @@ -100,8 +100,8 @@ Some components rely on assets (icons, images, etc.) and Web Awesome needs to kn However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Web Awesome, you'll need to set the base path. You can do this one of two ways. ```html - - + + @@ -144,7 +144,7 @@ Here's an example that loads only the button component. Again, if you're not usi ```html - + * * * Alternatively, you can set the base path manually using the exported setBasePath() function. * @@ -22,15 +22,17 @@ export function setBasePath(path: string) { */ export function getBasePath(subpath = '') { if (!basePath) { - const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElement[]; - const configScript = scripts.find(script => script.hasAttribute('data-web-awesome')); + // If we haven't set the base path yet, let's set it now + const el = document.querySelector('[data-webawesome]'); - if (configScript) { - // Use the data-web-awesome attribute - setBasePath(configScript.getAttribute('data-web-awesome')!); + if (el) { + // Use the data-webawesome attribute + setBasePath(el.getAttribute('data-webawesome') || ''); } else { + // Look for webawesome.js or autoloader.js + const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElement[]; const fallbackScript = scripts.find(s => { - return /webawesome(\.min)?\.js($|\?)/.test(s.src) || /autoloader(\.min)?\.js($|\?)/.test(s.src); + return /webawesome\.js($|\?)/.test(s.src) || /autoloader\.js($|\?)/.test(s.src); }); let path = ''; @@ -45,3 +47,32 @@ export function getBasePath(subpath = '') { // Return the base path without a trailing slash. If one exists, append the subpath separated by a slash. return basePath.replace(/\/$/, '') + (subpath ? `/${subpath.replace(/^\//, '')}` : ``); } + +/** Sets the library's Web Awesome kit code. */ +export function setKitCode(code: string) { + kitCode = code; +} + +/** + * Gets the library's Web Awesome kit code. + * + * The kit code is used to fetch premium assets, so it needs to be set for certain components to work correctly. This + * isn't something we can infer, so the user will need to provide it using the `data-webawesome-kit` attribute. This can + * be on any element, but ideally it should exist on the script that imports Web Awesome. + * + * + * + * Alternatively, you can set the kit code manually using the exported `setKitCode()` function. + * + */ +export function getKitCode() { + if (!kitCode) { + const el = document.querySelector('[data-webawesome-kit]'); + + if (el) { + setKitCode(el.getAttribute('data-webawesome-kit') || ''); + } + } + + return kitCode; +} diff --git a/tsconfig.json b/tsconfig.json index 3aea64b3f..0756e5a7a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,8 @@ "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ "target": "es2017", - "module": "es2020", + "module": "NodeNext", + "moduleResolution": "NodeNext", "lib": [ "dom", "dom.Iterable", @@ -20,7 +21,6 @@ "noUnusedParameters": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, - "moduleResolution": "node", "esModuleInterop": true, "experimentalDecorators": true, "useDefineForClassFields": false, /* See https://lit.dev/docs/components/properties/#avoiding-issues-with-class-fields */