autoload
Cory LaViska 2023-02-22 14:16:11 -05:00
rodzic 6c62a4f4c0
commit a4131caeda
1 zmienionych plików z 12 dodań i 7 usunięć

Wyświetl plik

@ -9,16 +9,18 @@ export function setBasePath(path: string) {
* Gets the library's base path. * Gets the library's base path.
* *
* The base path is used to load assets such as icons and images, so it needs to be set for components to work properly. * The base path is used to load assets such as icons and images, so it needs to be set for components to work properly.
* By default, this script will look for a script ending in shoelace.js and set the base path to the directory that * By default, this script will look for a script ending in shoelace.js or shoelace-autoloader.js and set the base path
* contains that file. To override this behavior, you can add the data-shoelace attribute to any script on the page * to the directory that contains that file. To override this behavior, you can add the data-shoelace attribute to any
* (it probably makes the most sense to attach it to the Shoelace script, but it could also be on a bundle). The value * script on the page (it probably makes the most sense to attach it to the Shoelace script, but it could also be on a
* can be a local folder or it can point to a CORS-enabled endpoint such as a CDN. * bundle). The value can be a local folder or it can point to a CORS-enabled endpoint such as a CDN.
* *
* <script src="bundle.js" data-shoelace="/custom/base/path"></script> * <script src="bundle.js" data-shoelace="/custom/base/path"></script>
* *
* Alternatively, you can set the base path manually using the exported setBasePath() function. * Alternatively, you can set the base path manually using the exported setBasePath() function.
*
* @param subpath - An optional path to append to the base path.
*/ */
export function getBasePath() { export function getBasePath(subpath = '') {
if (!basePath) { if (!basePath) {
const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElement[]; const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElement[];
const configScript = scripts.find(script => script.hasAttribute('data-shoelace')); const configScript = scripts.find(script => script.hasAttribute('data-shoelace'));
@ -27,7 +29,9 @@ export function getBasePath() {
// Use the data-shoelace attribute // Use the data-shoelace attribute
setBasePath(configScript.getAttribute('data-shoelace')!); setBasePath(configScript.getAttribute('data-shoelace')!);
} else { } else {
const fallbackScript = scripts.find(s => /shoelace(\.min)?\.js($|\?)/.test(s.src)); const fallbackScript = scripts.find(s => {
return /shoelace(\.min)?\.js($|\?)/.test(s.src) || /shoelace-autoloader(\.min)?\.js($|\?)/.test(s.src);
});
let path = ''; let path = '';
if (fallbackScript) { if (fallbackScript) {
@ -38,5 +42,6 @@ export function getBasePath() {
} }
} }
return basePath.replace(/\/$/, ''); // Return the base path without a trailing slash. If one exists, append the subpath separated by a slash.
return basePath.replace(/\/$/, '') + (subpath ? `/${subpath.replace(/^\//, '')}` : ``);
} }