diff --git a/.travis.yml b/.travis.yml index e9ea84b23c18..55fa8f705d9f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -15,7 +15,7 @@ before_install: - gem install jekyll-seo-tag script: -- yarn build +- DEPLOY_PUBLIC_PATH=/resources/ yarn build - yarn test deploy: diff --git a/README.md b/README.md index dff103cb266d..07ea9f70ebe3 100644 --- a/README.md +++ b/README.md @@ -194,19 +194,12 @@ yarn build # to build the project Afterwards, you can find the static **UI5 Web Components** in the `dist` folder of the corresponding package folder. For example, to find the Button component (that belongs to the `main` package), look inside the `packages/main/dist` folder. -## FAQ -### What's the thing with Yarn? -In a couple of guides we refer to the [Yarn](https://yarnpkg.com/) node package manager. This is because it offers functionality that the otherwise preferred [npm](https://www.npmjs.com/) package manager is currently lacking. Namely, the [workspace](https://yarnpkg.com/lang/en/docs/workspaces/) setting which is currently used in the [OpenUI5 (mono-)repository](https://github.com/SAP/openui5). Note that npm [might add](https://github.com/npm/npm/pull/15900#issuecomment-315335381) this feature in the future. - -Keep in mind that linking the same module with npm and Yarn may cause issues. Also, Yarn can't work with links created by npm and vice versa. - -### Where are the npm packages? -- [UI5 Web Components](https://www.npmjs.com/package/@ui5/webcomponents) -- [UI5 Web Components Fiori](https://www.npmjs.com/package/@ui5/webcomponents-fiori) -- [UI5 Web Components Icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) -- [UI5 Web Components Base](https://www.npmjs.com/package/@ui5/webcomponents-base) -- [UI5 Web Components Theme Base](https://www.npmjs.com/package/@ui5/webcomponents-theme-base) -- [UI5 Web Components Localization](https://www.npmjs.com/package/@ui5/webcomponents-localization) +**Note:** Before building the project you can also set the `DEPLOY_PUBLIC_PATH` environment variable to specify the path where non-bundled assets will be fetched from, for example: + +``` +DEPLOY_PUBLIC_PATH=/my/resources/ yarn build +``` +(for Windows: `DEPLOY_PUBLIC_PATH="\/my\/resources\/" yarn build`) ## Limitations None as of 1.0.0-rc.5 diff --git a/docs/Configuration.md b/docs/Configuration.md index 79623d4f781f..c60d24d63406 100644 --- a/docs/Configuration.md +++ b/docs/Configuration.md @@ -14,6 +14,7 @@ language | en, de, es, etc... | en | calendarType | Gregorian, Islamic, Buddhist, Japanese, Persian | Gregorian | Default calendar type for date-related web components [noConflict](#noConflict) | true, false | false | When set to true, all events will be fired with a "ui5-" prefix only [formatSettings](#formatSettings)| See the [Format settings](#formatSettings) section below | Empty object | Allows to override locale-specific configuration +[assetsPath](#assetsPath)| See the [Assets path](#assetsPath) section below | Empty string | Allows to set the assets path at runtime ### Content Density @@ -101,6 +102,26 @@ For example, to force the first day of week to Sunday, no matter the locale: ------------ | ----------------------------------------------- | ------------- | ------------------------------------------------------------- firstDayOfWeek | 0 (Sunday) through 6 (Saturday) | *Depends on locale* | When set, overrides the locale's default value + +### Assets path + +This configuration setting allows to set the path where asset files (most commonly `.json` ) that are to be fetched at runtime, are located. These are: + - Icon collections + - `i18n` message bundles + - `CLDR` files + - Additional themes + +For some scenarios the same bundle will be reused from different directories, or the directory structure is unknown in advance. Therefore it's +necessary to be able to pass the right directory at runtime, most commonly inside the configuration script directly: + +Example: +```html + +``` ## Configuration script diff --git a/packages/base/src/InitialConfiguration.js b/packages/base/src/InitialConfiguration.js index 24a9c7917435..c546f405055a 100644 --- a/packages/base/src/InitialConfiguration.js +++ b/packages/base/src/InitialConfiguration.js @@ -13,6 +13,7 @@ let initialConfig = { noConflict: false, // no URL formatSettings: {}, useDefaultLanguage: false, + assetsPath: "", }; /* General settings */ @@ -61,6 +62,11 @@ const getFormatSettings = () => { return initialConfig.formatSettings; }; +const getAssetsPath = () => { + initConfiguration(); + return initialConfig.assetsPath; +}; + const booleanMapping = new Map(); booleanMapping.set("true", true); booleanMapping.set("false", false); @@ -140,4 +146,5 @@ export { getNoConflict, getCalendarType, getFormatSettings, + getAssetsPath, }; diff --git a/packages/base/src/asset-registries/Icons.js b/packages/base/src/asset-registries/Icons.js index 58e608d80365..f408ec2eef0f 100644 --- a/packages/base/src/asset-registries/Icons.js +++ b/packages/base/src/asset-registries/Icons.js @@ -1,5 +1,6 @@ import { registerIcon, registerCollectionPromise } from "../SVGIconRegistry.js"; import { fetchJsonOnce } from "../util/FetchHelper.js"; +import getEffectiveAssetPath from "../util/getEffectiveAssetPath.js"; const registerIconBundle = async (collectionName, bundleData) => { let resolveFn; @@ -9,7 +10,7 @@ const registerIconBundle = async (collectionName, bundleData) => { registerCollectionPromise(collectionName, collectionFetched); if (typeof bundleData !== "object") { // not inlined from build -> fetch it - bundleData = await fetchJsonOnce(bundleData); + bundleData = await fetchJsonOnce(getEffectiveAssetPath(bundleData)); } fillRegistry(bundleData); resolveFn(); diff --git a/packages/base/src/asset-registries/LocaleData.js b/packages/base/src/asset-registries/LocaleData.js index 79a8c9b0b94a..1d645177495a 100644 --- a/packages/base/src/asset-registries/LocaleData.js +++ b/packages/base/src/asset-registries/LocaleData.js @@ -1,6 +1,7 @@ import { fetchJsonOnce } from "../util/FetchHelper.js"; import { getFeature } from "../FeaturesRegistry.js"; import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from "../generated/AssetParameters.js"; +import getEffectiveAssetPath from "../util/getEffectiveAssetPath.js"; const resources = new Map(); const cldrData = {}; @@ -94,7 +95,7 @@ const fetchCldr = async (language, region, script) => { registerModuleContent(`sap/ui/core/cldr/${localeId}.json`, cldrObj); } else if (url) { // fetch it - const cldrContent = await fetchJsonOnce(url); + const cldrContent = await fetchJsonOnce(getEffectiveAssetPath(url)); registerModuleContent(`sap/ui/core/cldr/${localeId}.json`, cldrContent); } }; diff --git a/packages/base/src/asset-registries/Themes.js b/packages/base/src/asset-registries/Themes.js index 54b93ee036eb..01fac64ec9e3 100644 --- a/packages/base/src/asset-registries/Themes.js +++ b/packages/base/src/asset-registries/Themes.js @@ -1,6 +1,7 @@ import { fetchJsonOnce, fetchTextOnce } from "../util/FetchHelper.js"; import { DEFAULT_THEME } from "../generated/AssetParameters.js"; import getFileExtension from "../util/getFileExtension.js"; +import getEffectiveAssetPath from "../util/getEffectiveAssetPath.js"; const themeURLs = new Map(); const themeStyles = new Map(); @@ -68,7 +69,7 @@ const fetchThemeProperties = async (packageName, themeName) => { throw new Error(`You have to import the ${packageName}/dist/Assets.js module to switch to additional themes`); } - return getFileExtension(url) === ".css" ? fetchTextOnce(url) : fetchJsonOnce(url); + return getFileExtension(url) === ".css" ? fetchTextOnce(url) : fetchJsonOnce(getEffectiveAssetPath(url)); }; const getRegisteredPackages = () => { diff --git a/packages/base/src/asset-registries/i18n.js b/packages/base/src/asset-registries/i18n.js index c47f91605463..8cf8374c946d 100644 --- a/packages/base/src/asset-registries/i18n.js +++ b/packages/base/src/asset-registries/i18n.js @@ -5,6 +5,7 @@ import { fetchTextOnce } from "../util/FetchHelper.js"; import normalizeLocale from "../locale/normalizeLocale.js"; import nextFallbackLocale from "../locale/nextFallbackLocale.js"; import { DEFAULT_LANGUAGE } from "../generated/AssetParameters.js"; +import getEffectiveAssetPath from "../util/getEffectiveAssetPath.js"; import { getUseDefaultLanguage } from "../config/Language.js"; const bundleData = new Map(); @@ -78,7 +79,7 @@ const fetchI18nBundle = async packageName => { return; } - const content = await fetchTextOnce(bundleURL); + const content = await fetchTextOnce(getEffectiveAssetPath(bundleURL)); let parser; if (content.startsWith("{")) { parser = JSON.parse; diff --git a/packages/base/src/config/AssetsPath.js b/packages/base/src/config/AssetsPath.js new file mode 100644 index 000000000000..0df02d026ddf --- /dev/null +++ b/packages/base/src/config/AssetsPath.js @@ -0,0 +1,17 @@ +import { getAssetsPath as getConfiguredAssetsPath } from "../InitialConfiguration.js"; + +let assetsPath; + +const getAssetsPath = () => { + if (assetsPath === undefined) { + assetsPath = getConfiguredAssetsPath(); + } + + return assetsPath; +}; + +const setAssetsPath = newAssetsPath => { + assetsPath = newAssetsPath; +}; + +export { getAssetsPath, setAssetsPath }; // eslint-disable-line diff --git a/packages/base/src/util/getEffectiveAssetPath.js b/packages/base/src/util/getEffectiveAssetPath.js new file mode 100644 index 000000000000..1c39cf65b5fe --- /dev/null +++ b/packages/base/src/util/getEffectiveAssetPath.js @@ -0,0 +1,12 @@ +import { getAssetsPath } from "../config/AssetsPath.js"; + +const getEffectiveAssetPath = asset => { + const assetsPath = getAssetsPath(); + if (assetsPath && typeof asset === "string") { + return `${assetsPath}${asset}`; + } + + return asset; +}; + +export default getEffectiveAssetPath; diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index 6884f2d59b62..fd7ad10b8862 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -1,3 +1,6 @@ +import { getAssetsPath, setAssetsPath } from "@ui5/webcomponents-base/dist/config/AssetsPath.js"; +// setAssetsPath("/my-resources/"); + // OpenUI5 integration import "@ui5/webcomponents-base/dist/features/OpenUI5Support.js"; @@ -109,6 +112,8 @@ const testAssets = { setNoConflict, getRTL, getFirstDayOfWeek, + getAssetsPath, + setAssetsPath }, getLocaleData, applyDirection, diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html index 478f96b7748b..ff7ac7593dd7 100644 --- a/packages/main/test/pages/DatePicker.html +++ b/packages/main/test/pages/DatePicker.html @@ -119,7 +119,7 @@

Test ariaLabel and ariaLabelledBy

info text - +

DatePicker in Compact

diff --git a/packages/main/test/pages/Kitchen.html b/packages/main/test/pages/Kitchen.html index a6478d25cbf4..be8b715dd7ce 100644 --- a/packages/main/test/pages/Kitchen.html +++ b/packages/main/test/pages/Kitchen.html @@ -7,6 +7,12 @@ + +