feat(framework): make assets path configurable (#2214)

.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:

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 

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
 
+<a name="assetsPath"></a>
+### 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
+<script data-ui5-config type="application/json">
+{
+	"assetsPath": "/my/custom/assets/path"
+}
+</script>
+```
 
 ## Configuration script
 

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,
 };

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();

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);
 	}
 };

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 = () => {

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;

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

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;

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,

packages/main/test/pages/DatePicker.html

@@ -119,7 +119,7 @@ <h3>Test ariaLabel and ariaLabelledBy</h3>
 			<ui5-label id="infoText">info text</ui5-label>
 			<ui5-date-picker id="dpAriaLabelledBy" aria-labelledby="infoText"></ui5-date-picker>
 		</section>
-		
+
 		<section class="ui5-content-density-compact">
 			<h3>DatePicker in Compact</h3>
 			<div>

packages/main/test/pages/Kitchen.html

@@ -7,6 +7,12 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
 
+	<script data-ui5-config type="application/json">
+		{
+			"assetsPath": ""
+		}
+	</script>
+
 	<link rel="stylesheet" type="text/css" href="./kitchen-styles.css">
 
 	<style>

packages/tools/components-package/nps.js

@@ -48,7 +48,7 @@ const getScripts = (options) => {
 			default: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles"',
 			src: 'nps "copy.src --watch --safe --skip-initial-copy"',
 			test: 'nps "copy.test --watch --safe --skip-initial-copy"',
-			bundle: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV",
+			bundle: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,DEPLOY_PUBLIC_PATH:/resources/",
 			styles: {
 				default: 'concurrently "nps watch.styles.themes" "nps watch.styles.components"',
 				themes: 'nps "build.styles.themes -w"',

packages/tools/components-package/rollup.js

@@ -1,7 +1,7 @@
 const babel = require("rollup-plugin-babel");
 const process = require("process");
 const resolve = require("rollup-plugin-node-resolve");
-const url = require("rollup-plugin-url");
+const url = require("@rollup/plugin-url");
 const { terser } = require("rollup-plugin-terser");
 const notify = require('rollup-plugin-notify');
 const filesize = require('rollup-plugin-filesize');
@@ -26,7 +26,7 @@ function ui5DevImportCheckerPlugin() {
 
 const getPlugins = ({ transpile }) => {
 	const plugins = [];
-	let publicPath = DEPLOY_PUBLIC_PATH || "/resources/";
+	let publicPath = DEPLOY_PUBLIC_PATH;
 
 	if (!process.env.DEV) {
 		plugins.push(filesize({

packages/tools/package.json

@@ -26,6 +26,7 @@
     "@babel/core": "^7.1.2",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
     "@babel/preset-env": "^7.1.0",
+    "@rollup/plugin-url": "^5.0.1",
     "@wdio/cli": "^6.1.3",
     "@wdio/dot-reporter": "^6.0.16",
     "@wdio/local-runner": "^6.1.3",
@@ -69,7 +70,6 @@
     "rollup-plugin-notify": "^1.1.0",
     "rollup-plugin-string": "^2.0.2",
     "rollup-plugin-terser": "^5.1.3",
-    "rollup-plugin-url": "^2.2.0",
     "rollup-plugin-visualizer": "^0.9.2",
     "serve": "^10.1.1",
     "wdio-chromedriver-service": "^6.0.2"