diff --git a/packages/common/test/unit.js b/packages/common/test/unit.js index 533ffa221f6e5c06cacfa8fd0abefd7604bb1b0e..a0a2b501520ccb16e3db7bb2454fdbb9f9d0f8b0 100644 --- a/packages/common/test/unit.js +++ b/packages/common/test/unit.js @@ -32,4 +32,10 @@ describe('utils', () => { it('setting', () => { assert(utils.setting('apiBaseUrl').startsWith("http")); }); + + it('getAssetURL', () => { + utils.initAssetBaseURL(); + assert(utils.getAssetURL("foo/bar") == "foo/bar"); + assert(utils.getAssetURL("foo/bar") == "foo/bar"); + }) }); diff --git a/packages/common/utils.js b/packages/common/utils.js index 911f004c2fe3c8ece24567c1f90a5de4c0fd400a..f5800185485c463f37cb5a6c517dc5d7fea39337 100644 --- a/packages/common/utils.js +++ b/packages/common/utils.js @@ -176,3 +176,53 @@ export const dateToInputTimeString = (date) => { return `${pad10(date.getHours())}:${pad10(date.getMinutes())}`; }; + +let _assetBaseURL = null; + +/** + * Set the base url for future calls to getAssetURL() + * + * @param {string} [id] An optional id of the script tag to figure out the + * base bundle URL. + */ +export const initAssetBaseURL = (id) => { + // We don't want future calls to change things + if (_assetBaseURL) + return; + + if (id) { + // Find the id added to the script tag + const elm = document.getElementById(id); + if (elm && elm.src) { + _assetBaseURL = elm.src; + } + } + + // In the (unlikely) event that we are bundled as a non-module + // we can use the old currentScript API + if (document.currentScript && document.currentScript.src) { + _assetBaseURL = document.currentScript.src; + } +} + +/** + * Get an absolute path for assets given a relative path to the js bundle. + * Call initAssetBaseURL() before this. + * + * @param {string} path The relative path based on the js bundle path + */ +export const getAssetURL = (path) => { + // Maybe initScriptURL() can do something without the id + if (!_assetBaseURL) { + initAssetBaseURL(); + } + + // We already found the path before, just go with it + if (_assetBaseURL) { + return new URL(path, _assetBaseURL).href; + } + + // If all fails we just fall back to relative paths and hope the + // html is on the same path as the bundle + return path; +}; \ No newline at end of file diff --git a/packages/common/vpu-button.js b/packages/common/vpu-button.js index 0c94c5163957448e9667a28dbe37bda47b6230b4..aba98dd15bfac92ea8176b543389baa69b4cacf6 100644 --- a/packages/common/vpu-button.js +++ b/packages/common/vpu-button.js @@ -2,7 +2,6 @@ import {html, LitElement, css} from 'lit-element'; import * as commonUtils from './utils.js'; import bulmaCSSPath from 'bulma/css/bulma.min.css'; import VPULitElement from './vpu-lit-element.js'; -import * as utils from '../../src/utils'; /** * vpu-button implements a button with Bulma styles and automatic spinner and @@ -72,7 +71,7 @@ class Button extends VPULitElement { } render() { - const bulmaCSS = utils.getAssetURL(bulmaCSSPath); + const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath); return html` <link rel="stylesheet" href="${bulmaCSS}">