[FEATURE] Add transformation of apps index.html in self-contained bui…

…ld (#137)

BREAKING CHANGE:
When running a self-contained build on an application project, the
index.html will be transformed by adopting the UI5 bootstrap script tag
to load the custom bundle file instead.

index.js

@@ -4,6 +4,7 @@ const ui5Builder = {
 		flexChangesBundler: require("./lib/processors/bundlers/flexChangesBundler"),
 		manifestBundler: require("./lib/processors/bundlers/manifestBundler"),
 		moduleBundler: require("./lib/processors/bundlers/moduleBundler"),
+		bootstrapHtmlTransformer: require("./lib/processors/bootstrapHtmlTransformer"),
 		debugFileCreator: require("./lib/processors/debugFileCreator"),
 		resourceCopier: require("./lib/processors/resourceCopier"),
 		stringReplacer: require("./lib/processors/stringReplacer"),
@@ -23,6 +24,7 @@ const ui5Builder = {
 		generateVersionInfo: require("./lib/tasks/generateVersionInfo"),
 		replaceCopyright: require("./lib/tasks/replaceCopyright"),
 		replaceVersion: require("./lib/tasks/replaceVersion"),
+		transformBootstrapHtml: require("./lib/tasks/transformBootstrapHtml"),
 		uglify: require("./lib/tasks/uglify"),
 		taskRepository: require("./lib/tasks/taskRepository")
 	},

lib/builder/builder.js

@@ -167,11 +167,13 @@ function composeTaskList({dev, selfContained, includedTasks, excludedTasks}) {
 	// Exclude tasks: manifestBundler
 	selectedTasks.generateManifestBundle = false;
 	selectedTasks.generateStandaloneAppBundle = false;
+	selectedTasks.transformBootstrapHtml = false;
 
 	if (selfContained) {
 		// No preloads, bundle only
 		selectedTasks.generateComponentPreload = false;
 		selectedTasks.generateStandaloneAppBundle = true;
+		selectedTasks.transformBootstrapHtml = true;
 		selectedTasks.generateLibraryPreload = false;
 	}
 

lib/processors/bootstrapHtmlTransformer.js

@@ -0,0 +1,31 @@
+const log = require("@ui5/logger").getLogger("builder:processors:bootstrapHtmlTransformer");
+const cheerio = require("cheerio");
+
+/**
+ * Transforms the UI5 bootstrap of a HTML resource files.
+ *
+ * @module builder/processors/bootstrapHtmlTransformer
+ * @param {Object} parameters Parameters
+ * @param {module:@ui5/fs.Resource[]} parameters.resources List of resources to be processed
+ * @param {Object} [parameters.options] Options
+ * @param {string} [parameters.options.src] Bootstrap "src" that should be used
+ * @returns {Promise<module:@ui5/fs.Resource[]>} Promise resolving with the cloned resources
+ */
+module.exports = function({resources, options}) {
+	async function processResource(resource) {
+		const content = await resource.getString();
+		const $ = cheerio.load(content);
+		const bootstrapScript = $("script#sap-ui-bootstrap");
+		if (bootstrapScript.length === 1) {
+			bootstrapScript.attr("src", options.src);
+			resource.setString($.html());
+		} else if (bootstrapScript.length > 1) {
+			log.warn("Skipping bootstrap transformation. Found multiple bootstrap script tags with id=sap-ui-bootstrap.");
+		} else {
+			log.warn("Skipping bootstrap transformation. Could not find bootstrap script tag with id=sap-ui-bootstrap.");
+		}
+		return resource;
+	}
+
+	return Promise.all(resources.map(processResource));
+};

lib/tasks/taskRepository.js

@@ -4,6 +4,7 @@ const tasks = {
 	createDebugFiles: require("./createDebugFiles"),
 	uglify: require("./uglify"),
 	buildThemes: require("./buildThemes"),
+	transformBootstrapHtml: require("./transformBootstrapHtml"),
 	generateLibraryManifest: require("./generateLibraryManifest"),
 	generateVersionInfo: require("./generateVersionInfo"),
 	generateManifestBundle: require("./bundlers/generateManifestBundle"),

lib/tasks/transformBootstrapHtml.js

@@ -0,0 +1,32 @@
+const log = require("@ui5/logger").getLogger("builder:tasks:transformBootstrapHtml");
+const bootstrapHtmlTransformer = require("../processors/bootstrapHtmlTransformer");
+
+/**
+ * Task for transforming the application bootstrap HTML file.
+ *
+ * @module builder/tasks/transformBootstrapHtml
+ * @param {Object} parameters Parameters
+ * @param {module:@ui5/fs.DuplexCollection} parameters.workspace DuplexCollection to read and write files
+ * @param {Object} parameters.options Options
+ * @param {string} parameters.options.projectName Project name
+ * @param {string} parameters.options.namespace Project namespace
+ * @returns {Promise<undefined>} Promise resolving with <code>undefined</code> once data has been written
+ */
+module.exports = async function({workspace, options}) {
+	if (!options.namespace) {
+		log.warn(`Skipping bootstrap transformation due to missing namespace of project "${options.projectName}".`);
+		return;
+	}
+	const resource = await workspace.byPath(`/resources/${options.namespace}/index.html`);
+	if (!resource) {
+		log.warn(`Skipping bootstrap transformation due to missing index.html in project "${options.projectName}".`);
+		return;
+	}
+	const processedResources = await bootstrapHtmlTransformer({
+		resources: [resource],
+		options: {
+			src: "resources/sap-ui-custom.js"
+		}
+	});
+	await Promise.all(processedResources.map((resource) => workspace.write(resource)));
+};

lib/types/application/ApplicationBuilder.js

@@ -11,6 +11,7 @@ const tasks = { // can't require index.js due to circular dependency
 	generateVersionInfo: require("../../tasks/generateVersionInfo"),
 	replaceCopyright: require("../../tasks/replaceCopyright"),
 	replaceVersion: require("../../tasks/replaceVersion"),
+	transformBootstrapHtml: require("../../tasks/transformBootstrapHtml"),
 	uglify: require("../../tasks/uglify")
 };
 
@@ -94,6 +95,16 @@ class ApplicationBuilder extends AbstractBuilder {
 			});
 		});
 
+		this.addTask("transformBootstrapHtml", () => {
+			return tasks.transformBootstrapHtml({
+				workspace: resourceCollections.workspace,
+				options: {
+					projectName: project.metadata.name,
+					namespace: project.metadata.namespace
+				}
+			});
+		});
+
 		const bundles = project.builder && project.builder.bundles;
 		if (bundles) {
 			this.addTask("generateBundle", () => {