feat(ui5-tooling-modules): improved handling of chunks

In the previous version the chunks have been sorted into subfolders
which are identified as first module importing the chunks. This
was done as a follow up of #915 which causes 404s when loading
chunks in CDN scenarios. By putting the chunks into the folders
with the name of the module requiring the chunk the module could
be loaded successfully again when using resourceroots for the
module. (implemented in 3.5.x version)

With the enhancement to load the chunks with relative path names
this feature is not necessary anymore and becomes optional so that
it can be re-enabled by providing the config options chunksPath: true.

In addition, the chunks are put by default flat into the resources folder.
By providing the config option chunksPath: "my/chunk/path" you can provide
a subfolder into which the chunks will be clustered into. When using the
config option addToNamespace: true the chunksPath will be appended to
the %namespace%/thirdparty path so that it is relative to the root
where the modules are put into.

packages/ui5-tooling-modules/README.md

@@ -94,6 +94,9 @@ The following configuration options are relevant for the `task` and the `middlew
         - '*'
   ```
 
+- *chunksPath*: `boolean|string`
+  Relative path for the chunks to be stored into (if value is `true`, chunks are put into the closest modules folder which was the default behavior in the `3.5.x` release of the tooling extension)
+
 - *minify*: `boolean` *experimental feature*
   Flag to indicate that the generated code should be minified (in case of excluding thirdparty resources from minification in general, this option can be used to minify just the generated code)
 

packages/ui5-tooling-modules/lib/middleware.js

@@ -20,7 +20,8 @@ const chokidar = require("chokidar");
  * @param {object} parameters.options Options
  * @param {object} [parameters.options.configuration] Custom server middleware configuration if given in ui5.yaml
  * @param {boolean} [parameters.options.configuration.skipCache] Flag whether the module cache for the bundles should be skipped
- * @param {boolean|string[]} [parameters.options.keepDynamicImports] List of NPM packages for which the dynamic imports should be kept or boolean (defaults to true)
+ * @param {boolean|string[]} [parameters.options.configuration.keepDynamicImports] List of NPM packages for which the dynamic imports should be kept or boolean (defaults to true)
+ * @param {boolean|string} [parameters.options.configuration.chunksPath] the relative path for the chunks to be stored (defaults to "chunks", if value is true, chunks are put into the closest modules folder)
  * @returns {Function} Middleware function to use
  */
 module.exports = async function ({ log, resources, options, middlewareUtil }) {

packages/ui5-tooling-modules/lib/task.js

@@ -25,6 +25,7 @@ const parseJS = require("./parseJS");
  * @param {boolean|string[]} [parameters.options.configuration.keepDynamicImports] List of NPM packages for which the dynamic imports should be kept or boolean (defaults to true)
  * @param {boolean|string[]} [parameters.options.configuration.skipTransform] flag or array of globs to verify whether the module transformation should be skipped
  * @param {boolean} [parameters.options.configuration.minify] minify the generated code
+ * @param {boolean|string} [parameters.options.configuration.chunksPath] the relative path for the chunks to be stored (defaults to "chunks", if value is true, chunks are put into the closest modules folder)
  * @returns {Promise<undefined>} Promise resolving with <code>undefined</code> once data has been written
  */
 module.exports = async function ({ log, workspace, taskUtil, options }) {

packages/ui5-tooling-modules/lib/util.js

@@ -24,6 +24,7 @@ const { XMLParser } = require("fast-xml-parser");
 const parseJS = require("./parseJS");
 
 const { createHash } = require("crypto");
+const sanitize = require("sanitize-filename");
 
 /**
  * helper to check the existence of a resource (case-sensitive)
@@ -715,6 +716,7 @@ module.exports = function (log) {
 		 * @param {object} [config] configuration
 		 * @param {boolean} [config.skipCache] skip the module cache
 		 * @param {boolean} [config.debug] debug mode
+		 * @param {boolean|string} [config.chunksPath] the relative path for the chunks to be stored (defaults to "chunks", if value is true, chunks are put into the closest modules folder)
 		 * @param {boolean|string[]} [config.skipTransform] flag or array of globs to verify whether the module transformation should be skipped
 		 * @param {boolean|string[]} [config.keepDynamicImports] List of NPM packages for which the dynamic imports should be kept or boolean (defaults to true)
 		 * @param {string} [config.generatedCode] ES compatibility of the generated code (es5, es2015)
@@ -726,7 +728,11 @@ module.exports = function (log) {
 		 * @param {boolean} [options.isMiddleware] flag if the getResource is called by the middleware
 		 * @returns {object} the output object of the resource (code, chunks?, lastModified)
 		 */
-		getBundleInfo: async function getBundleInfo(moduleNames, { skipCache, debug, skipTransform, keepDynamicImports, generatedCode, minify, inject } = {}, { cwd, depPaths, isMiddleware } = {}) {
+		getBundleInfo: async function getBundleInfo(
+			moduleNames,
+			{ skipCache, debug, chunksPath, skipTransform, keepDynamicImports, generatedCode, minify, inject } = {},
+			{ cwd, depPaths, isMiddleware } = {}
+		) {
 			cwd = cwd || process.cwd();
 
 			let bundling = false;
@@ -829,11 +835,23 @@ module.exports = function (log) {
 								// chunk module
 								if (module.code) {
 									// find the module to which the chunk primarily belongs
-									const referencedModuleIndex = output.findIndex((m) => m.isEntry && m.imports?.indexOf(module.fileName) !== -1);
-									const referencedModule = modules[Math.max(referencedModuleIndex, 0)];
+									let filePath = chunksPath || "";
+									if (chunksPath === true) {
+										const referencedModuleIndex = output.findIndex((m) => m.isEntry && m.imports?.indexOf(module.fileName) !== -1);
+										const referencedModule = modules[Math.max(referencedModuleIndex, 0)];
+										filePath = referencedModule.name;
+									} else if (typeof filePath === "string") {
+										filePath = filePath
+											.split(/[\\/]/)
+											.map(sanitize)
+											.filter((s) => !/^\.*$/.test(s))
+											.join("/");
+									} else {
+										filePath = "";
+									}
 									const fileName = module.fileName.substring(0, module.fileName.length - 3);
 									bundleInfo.addChunk({
-										name: `${referencedModule.name}/${fileName}`,
+										name: path.posix.join(filePath, fileName),
 										originalName: fileName,
 										code: module.code,
 									});

packages/ui5-tooling-modules/package.json

@@ -39,7 +39,8 @@
     "ignore-walk": "^6.0.5",
     "minimatch": "^7.4.6",
     "rollup": "^4.17.2",
-    "rollup-plugin-polyfill-node": "^0.13.0"
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "sanitize-filename": "^1.6.3"
   },
   "devDependencies": {
     "ava": "^6.1.3"

packages/ui5-tooling-modules/test/__snap__/@supabase/supabase-js.js

@@ -2608,7 +2608,7 @@ sap.ui.define(['require', 'exports'], (function (require, exports) { 'use strict
                     this.conn = null;
                 },
             });
-            new Promise(function (resolve, reject) { require(['../@supabase/supabase-js/browser'], resolve, reject); }).then(function (n) { return n.browser; }).then(({ default: WS }) => {
+            new Promise(function (resolve, reject) { require(['../browser'], resolve, reject); }).then(function (n) { return n.browser; }).then(({ default: WS }) => {
                 this.conn = new WS(this._endPointURL(), undefined, {
                     headers: this.headers,
                 });