@zohodesk/client_build_tool 0.0.13 → 0.0.14-exp.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog and Release Notes
 
+# v0.0.14 (06-10-2025)
+
+**Feature:-**
+- Added integrity and crossorigin attributes for all the js and css files in index.html 
+
+```enableSubResourceIntegrity: true
+```
+**Adjustments:-** 
+- add ts-loader to parse tsx and ts files
+
 # v0.0.13 (02-09-2025)
 
 **Adjustments:-**

package/README.md

@@ -306,6 +306,16 @@ First Release
 - 'templates' command to create es for react library
 # Changelog and Release Notes
 
+# v0.0.14 (06-10-2025)
+
+**Feature:-**
+- Added integrity and crossorigin attributes for all the js and css files in index.html 
+
+```enableSubResourceIntegrity: true
+```
+**Adjustments:-** 
+- add ts-loader to parse tsx and ts files
+
 # v0.0.13 (02-09-2025)
 
 **Adjustments:-**

package/lib/schemas/defaultConfigValues.js

@@ -300,7 +300,8 @@ var _default = {
   },
   customLoaders: [],
   resourceHints: {
-    allowPrefetchingMultipleChunks: false
+    enable: false,
+    PreloadChunkNames: []
   },
   devModeContentHashAllowedTypes: null,
   nameTemplateCustomization: null,
@@ -355,6 +356,10 @@ var _default = {
     enable: false,
     chunkName: '',
     filePath: ''
+  },
+  enableSubResourceIntegrity: {
+    value: false,
+    cli: 'enable_sub_resource_integrity'
   }
 };
 exports.default = _default;

package/lib/shared/bundler/webpack/custom_plugins/InitialHtmlPlugin.js

@@ -16,13 +16,28 @@ class InitialHtmlPlugin {
     this.options = options;
   }
 
+  getBaseName(str) {
+    const fileName = str.split("/").pop();
+    const parts = fileName.split("."); // Find index of the hash-like segment
+
+    const hashIndex = parts.findIndex(p => /^[0-9a-f_]{20,}$/i.test(p)); // If a hash is found, return everything before it
+
+    if (hashIndex < 0) {
+      console.error('this initial file dont have a hash');
+      return parts.slice(0, -1).join(".");
+    }
+
+    return parts.slice(0, hashIndex).join("."); // Otherwise fallback: remove only ".js"
+  }
+
   apply(compiler) {
     const {
       filename,
       template,
       minify,
       inject,
-      mainChunkName
+      mainChunkName,
+      enableSubResourceIntegrity
     } = this.options;
     new _htmlWebpackPlugin.default({
       filename,
@@ -37,13 +52,36 @@ class InitialHtmlPlugin {
         const headTags = [];
         const bodyTags = [];
         data.headTags.forEach(tag => {
+          const url = tag.attributes?.src || tag.attributes?.href;
+          let chunkName;
+
+          const addIntegrity = (tag, suffix) => {
+            if (enableSubResourceIntegrity && chunkName) {
+              Object.assign(tag.attributes, {
+                integrity: `{{--${chunkName}-${suffix}-integrity}}`
+              });
+            }
+          };
+
+          if (enableSubResourceIntegrity) {
+            chunkName = this.getBaseName(url);
+          }
+
           Object.assign(tag.attributes, {
-            nonce: '{{--CSP-nonce}}'
+            nonce: '{{--CSP-nonce}}',
+            crossorigin: "anonymous"
           });
 
           if (tag.tagName === 'link') {
+            addIntegrity(tag, 'css');
             headTags.push(tag);
           } else {
+            if (url.endsWith('.i18n.js')) {
+              addIntegrity(tag, 'i18n');
+            } else {
+              addIntegrity(tag, 'js');
+            }
+
             bodyTags.push(tag);
           }
         });

package/lib/shared/bundler/webpack/custom_plugins/InjectChunkGraphPlugin.js

@@ -0,0 +1,48 @@
+"use strict";
+
+const {
+  RawSource
+} = require('webpack-sources');
+
+class InjectChunkGraphPlugin {
+  constructor(resourceHints) {
+    this.chunkNames = resourceHints.PreloadChunkNames || [];
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap('InjectChunkGraphPlugin', compilation => {
+      compilation.hooks.processAssets.tap({
+        name: 'InjectChunkGraphPlugin',
+        stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+      }, () => {
+        const stats = compilation.getStats().toJson({
+          all: true
+        });
+        const chunkGraph = {};
+        this.chunkNames.forEach(chunkName => {
+          const chunkGroup = stats.namedChunkGroups?.[chunkName];
+
+          if (!chunkGroup) {
+            compilation.warnings.push(new Error(`[InjectChunkGraphPlugin] Chunk group "${chunkName}" not found.`));
+            return;
+          }
+
+          chunkGraph[chunkName] = chunkGroup.chunks;
+        });
+        const code = `
+        preloadChunkGraph=${JSON.stringify(chunkGraph)};
+        `; // Find runtime chunk file
+
+        const runtimeChunk = stats.chunks.find(chunk => chunk.names?.some(n => n.includes('runtime~main')));
+        const runtimeChunkName = runtimeChunk.files[0];
+        const originalSource = compilation.assets[runtimeChunkName].source();
+        const newSource = originalSource + '\n' + code; // Update the runtime asset with injected code
+
+        compilation.updateAsset(runtimeChunkName, new RawSource(newSource.replace('{{--preload-chunk-graph-object}}', `${JSON.stringify(chunkGraph)}`)));
+      });
+    });
+  }
+
+}
+
+module.exports = InjectChunkGraphPlugin;

package/lib/shared/bundler/webpack/custom_plugins/ResourceHintsPlugin.js

@@ -22,11 +22,8 @@ const pluginName = 'prefetch-preload-chunk-plugin';
 
 class ResourceHintsPlugin {
   constructor({
-    publicPath,
-    resourceHints
+    publicPath
   }) {
-    this.resourceHints = resourceHints;
-    this.allowPrefetchingMultipleChunks = resourceHints.allowPrefetchingMultipleChunks;
     this.publicPathsTemplateObj = {
       js: publicPath,
       css: publicPath,
@@ -53,7 +50,6 @@ class ResourceHintsPlugin {
         compilation.addRuntimeModule(entryRuntimeChunk, // eslint-disable-next-line no-use-before-define
         new ResourceHintsRuntimePlugin(compiler, {
           chunk: entryRuntimeChunk,
-          allowPrefetchingMultipleChunks: this.allowPrefetchingMultipleChunks,
           publicPathsTemplateObj
         }));
       };
@@ -69,13 +65,11 @@ exports.default = ResourceHintsPlugin;
 class ResourceHintsRuntimePlugin extends _webpack.RuntimeModule {
   constructor(compiler, {
     chunk,
-    publicPathsTemplateObj,
-    allowPrefetchingMultipleChunks
+    publicPathsTemplateObj
   }) {
     super('ResourceHintsRuntimePlugin loading', 10);
     this.compiler = compiler;
     this.publicPathsTemplateObj = publicPathsTemplateObj;
-    this.allowPrefetchingMultipleChunks = allowPrefetchingMultipleChunks;
     this.chunk = chunk;
   }
 
@@ -85,7 +79,7 @@ class ResourceHintsRuntimePlugin extends _webpack.RuntimeModule {
     } = this;
     const idNameMap = chunk.getChunkMaps().name;
     const nameIdMap = {};
-    let needsMap = this.allowPrefetchingMultipleChunks;
+    let needsMap = false;
     Object.keys(idNameMap).forEach(key => {
       const value = idNameMap[key];
       nameIdMap[value] = key;
@@ -111,7 +105,8 @@ class ResourceHintsRuntimePlugin extends _webpack.RuntimeModule {
      */
 
     return _webpack.Template.asString([`const ntc = ${JSON.stringify(needsMap ? nameIdMap : {})};
-       const cns = Object.keys(ntc);
+      //  const cns = Object.keys(ntc);
+       const preloadChunkGraph = {{--preload-chunk-graph-object}}
 
       function clt(href, rel) {
         let link = document.createElement("link");
@@ -129,8 +124,8 @@ class ResourceHintsRuntimePlugin extends _webpack.RuntimeModule {
         //return !url.includes(".undefined.");
         return url.indexOf(".undefined") === -1;
       }
-      function lpp(_chunkId, rel) {
-        let chunkId = ${_webpack.RuntimeGlobals.require}.getChunkId(_chunkId);
+      function lpp(chunkId, rel) {
+        // let chunkId = ${_webpack.RuntimeGlobals.require}.getChunkId(_chunkId);
         // ${_webpack.RuntimeGlobals.require}.e(chunkId);
         if(__webpack_require__.O.j(chunkId)) {
           return;
@@ -145,33 +140,28 @@ class ResourceHintsRuntimePlugin extends _webpack.RuntimeModule {
         }
       }
 
-      ${_webpack.RuntimeGlobals.require}.getChunkId = function getChunkId(chunkId) {
-        ${needsMap ? 'chunkId = ntc[chunkId]||chunkId;' : ''}
-        return chunkId;
+      ${_webpack.RuntimeGlobals.require}.getChunkId = function getChunkId(chunkName) {
+        return ntc[chunkName]||chunkName;
       }
-      ${_webpack.RuntimeGlobals.require}.getChunkIds = function getChunkIds(chunkId) {
-        ${// eslint-disable-next-line no-nested-ternary
-    this.allowPrefetchingMultipleChunks ? `
-            const isRegExAsChunkId = chunkId instanceof RegExp;
-            if(isRegExAsChunkId) {
-              return cns.filter(chunkName => chunkId.test(chunkName)).map(chunkName => ntc[chunkName]);
-            }
-            return [${_webpack.RuntimeGlobals.require}.getChunkId(chunkId)];
-            ` : `return [${_webpack.RuntimeGlobals.require}.getChunkId(chunkId)];`}
-      }
-      // Prefetch a chunk (${pluginName})
-      ${_webpack.RuntimeGlobals.require}.pfc = function prefetchChunk(chunkId) {
+      
+      // Preload a chunk (${pluginName})
+      ${_webpack.RuntimeGlobals.require}.plc = function preloadChunk(chunkId) {
         ${`
-            let chunkIds = ${_webpack.RuntimeGlobals.require}.getChunkIds(chunkId);
-            chunkIds.forEach(idOfAChunk => {
-              ${_webpack.RuntimeGlobals.require}.e(idOfAChunk);
-            })`}
+           if (typeof preloadChunkGraph !== 'object' || !preloadChunkGraph) return;
+        preloadChunkGraph[chunkId].forEach(idOfAChunk => {
+             ${_webpack.RuntimeGlobals.require}.e(idOfAChunk);
+            })
+            // let idOfAChunk = ${_webpack.RuntimeGlobals.require}.getChunkId(chunkId);
+            //  chunkIds.forEach(idOfAChunk => {
+            //   ${_webpack.RuntimeGlobals.require}.e(idOfAChunk);
+            //  })
+              `}
       };
 
-      // Preload a chunk (${pluginName})
-      ${_webpack.RuntimeGlobals.require}.plc = function preloadChunk(chunkId) {
-            let idOfAChunk = ${_webpack.RuntimeGlobals.require}.getChunkIds(chunkId)[0];
-            lpp(idOfAChunk, "preload");
+      // Prefetch a chunk (${pluginName})
+      ${_webpack.RuntimeGlobals.require}.pfc = function prefetchChunk(chunkId) {
+            let idOfAChunk = ${_webpack.RuntimeGlobals.require}.getChunkId(chunkId);
+            lpp(idOfAChunk, "prefetch");
         }
         ` // `// Prefetch a chunk (${pluginName})`,
     // `${RuntimeGlobals.require}.pfc = function prefetchChunk(chunkId) {`,
@@ -190,4 +180,17 @@ class ResourceHintsRuntimePlugin extends _webpack.RuntimeModule {
     ]);
   }
 
-}
+} // ${RuntimeGlobals.require}.getChunkIds = function getChunkIds(chunkId) {
+//         ${
+//           // eslint-disable-next-line no-nested-ternary
+//           this.allowPrefetchingMultipleChunks
+//             ? `
+//             const isRegExAsChunkId = chunkId instanceof RegExp;
+//             if(isRegExAsChunkId) {
+//               return cns.filter(chunkName => chunkId.test(chunkName)).map(chunkName => ntc[chunkName]);
+//             }
+//             return [${RuntimeGlobals.require}.getChunkId(chunkId)];
+//             `
+//             : `return [${RuntimeGlobals.require}.getChunkId(chunkId)];`
+//         }
+//       }

package/lib/shared/bundler/webpack/custom_plugins/a.js

@@ -0,0 +1,54 @@
+"use strict";
+
+const {
+  RawSource
+} = require('webpack-sources');
+
+class InjectChunkGraphPlugin {
+  constructor({
+    chunkName,
+    globalVarName = 'chunkGraph'
+  }) {
+    this.chunkNames = ['ticketDetailview'];
+    this.globalVarName = globalVarName;
+  }
+
+  apply(compiler) {
+    console.log('inject');
+    compiler.hooks.thisCompilation.tap('InjectChunkGraphPlugin', compilation => {
+      compilation.hooks.processAssets.tap({
+        name: 'InjectChunkGraphPlugin',
+        stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+      }, () => {
+        const stats = compilation.getStats().toJson({
+          all: true
+        });
+        const chunkGraph = {};
+        this.chunkNames.forEach(chunkName => {
+          const chunkGroup = stats.namedChunkGroups?.[chunkName];
+
+          if (!chunkGroup) {
+            compilation.warnings.push(new Error(`[InjectChunkGraphPlugin] Chunk group "${chunkName}" not found.`));
+            return;
+          }
+
+          chunkGraph[chunkName] = chunkGroup.chunks;
+        });
+        const code = `
+          window.preloadChunkGraph=${JSON.stringify(chunkGraph)};
+        `; // Find runtime chunk file
+
+        const runtimeChunk = stats.chunks.find(chunk => chunk.names?.some(n => n.includes('runtime~main')));
+        const runtimeChunkName = runtimeChunk.files[0];
+        const originalSource = compilation.assets[runtimeChunkName].source();
+        console.log(originalSource);
+        const newSource = originalSource + '\n' + code; // Update the runtime asset with injected code
+
+        compilation.updateAsset(runtimeChunkName, new RawSource(newSource));
+      });
+    });
+  }
+
+}
+
+module.exports = InjectChunkGraphPlugin;

package/lib/shared/bundler/webpack/pluginConfigs/configHtmlWebpackPlugin.js

@@ -16,7 +16,8 @@ var _InitialHtmlPlugin = require("../custom_plugins/InitialHtmlPlugin");
 function configHtmlWebpackPlugin(options) {
   const {
     htmlTemplate,
-    mode
+    mode,
+    enableSubResourceIntegrity
   } = options;
   const {
     inject,
@@ -31,7 +32,8 @@ function configHtmlWebpackPlugin(options) {
     template: appInitialHTMLTemplatePath,
     minify: minifyHtmlOptions,
     inject,
-    scriptLoading: 'defer'
+    scriptLoading: 'defer',
+    enableSubResourceIntegrity
   });
 }
 

package/lib/shared/bundler/webpack/pluginConfigs/configInjectChunkGraphPlugin.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configInjectChunkGraphPlugin = configInjectChunkGraphPlugin;
+
+var _InjectChunkGraphPlugin = _interopRequireDefault(require("../custom_plugins/InjectChunkGraphPlugin"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function configInjectChunkGraphPlugin(options) {
+  const {
+    resourceHints
+  } = options;
+
+  if (resourceHints.enable) {
+    return new _InjectChunkGraphPlugin.default(resourceHints);
+  }
+
+  return null;
+}

package/lib/shared/bundler/webpack/pluginConfigs/configResourceHintsPlugin.js

@@ -14,8 +14,12 @@ function configResourceHintsPlugin(options) {
     publicPath,
     resourceHints
   } = options;
-  return new _ResourceHintsPlugin.default({
-    resourceHints,
-    publicPath: JSON.stringify(publicPath)
-  });
+
+  if (resourceHints.enable) {
+    return new _ResourceHintsPlugin.default({
+      publicPath: JSON.stringify(publicPath)
+    });
+  }
+
+  return null;
 }

package/lib/shared/bundler/webpack/pluginConfigs/configa.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configInjectChunkGraphPlugin = configInjectChunkGraphPlugin;
+
+var _a = _interopRequireDefault(require("../custom_plugins/a"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function configInjectChunkGraphPlugin(options) {
+  console.log('whats');
+  return new _a.default(options);
+}

package/lib/shared/bundler/webpack/plugins.js

@@ -51,10 +51,12 @@ var _configMurphyInjectorPlugin = require("./pluginConfigs/configMurphyInjectorP
 
 var _configCustomScriptLoadingStrategyPlugin = require("./pluginConfigs/configCustomScriptLoadingStrategyPlugin");
 
+var _configInjectChunkGraphPlugin = require("./pluginConfigs/configInjectChunkGraphPlugin");
+
 // import { IgnorePlugin } from 'webpack';
 function plugins(options) {
   const {
     webpackPlugins
   } = options;
-  return [(0, _configEnvVariables.configEnvVariables)(options), (0, _configCustomAttributesPlugin.configCustomAttributesPlugin)(options), (0, _configTPHashMappingPlugin.configTPHashMappingPlugin)(options), (0, _configCopyPublicFolders.configCopyPublicFolders)(options), (0, _configIgnorePlugin.configIgnorePlugin)(options), (0, _configMiniCSSExtractPlugin.configMiniCSSExtractPlugin)(options), (0, _configSelectorWeightPlugin.configSelectorWeightPlugin)(options), (0, _configVariableConversionPlugin.configVariableConversionPlugin)(options), (0, _configI18nSplitPlugin.configI18nSplitPlugin)(options), (0, _configRtlCssPlugin.configRtlCssPlugin)(options), (0, _configHtmlWebpackPlugin.configHtmlWebpackPlugin)(options), (0, _configCustomScriptLoadingStrategyPlugin.configCustomScriptLoadingStrategyPlugin)(options), (0, _configCdnChangePlugin.configCdnChangePlugin)(options), (0, _configServiceWorkerPlugin.configServiceWorkerPlugin)(options), (0, _configEFCTemplatePlugin.configEFCTemplatePlugin)(options), (0, _configResourceHintsPlugin.configResourceHintsPlugin)(options), (0, _configBundleAnalyzer.configBundleAnalyzer)(options), (0, _configManifestJsonPlugin.configManifestJsonPlugin)(options), (0, _configSourceMapPlugin.configSourceMapPlugin)(options), (0, _configProgressPlugin.configProgressPlugin)(options), (0, _configBundleIntegrityReport.configBundleIntegrityReport)(options), (0, _configRuntimeResourceCleanup.configRuntimeResourceCleanup)(options), (0, _configMurphyInjectorPlugin.configMurphyInjectorPlugin)(options), ...webpackPlugins].filter(Boolean);
+  return [(0, _configEnvVariables.configEnvVariables)(options), (0, _configCustomAttributesPlugin.configCustomAttributesPlugin)(options), (0, _configTPHashMappingPlugin.configTPHashMappingPlugin)(options), (0, _configCopyPublicFolders.configCopyPublicFolders)(options), (0, _configIgnorePlugin.configIgnorePlugin)(options), (0, _configMiniCSSExtractPlugin.configMiniCSSExtractPlugin)(options), (0, _configSelectorWeightPlugin.configSelectorWeightPlugin)(options), (0, _configVariableConversionPlugin.configVariableConversionPlugin)(options), (0, _configI18nSplitPlugin.configI18nSplitPlugin)(options), (0, _configRtlCssPlugin.configRtlCssPlugin)(options), (0, _configHtmlWebpackPlugin.configHtmlWebpackPlugin)(options), (0, _configCustomScriptLoadingStrategyPlugin.configCustomScriptLoadingStrategyPlugin)(options), (0, _configCdnChangePlugin.configCdnChangePlugin)(options), (0, _configServiceWorkerPlugin.configServiceWorkerPlugin)(options), (0, _configEFCTemplatePlugin.configEFCTemplatePlugin)(options), (0, _configResourceHintsPlugin.configResourceHintsPlugin)(options), (0, _configBundleAnalyzer.configBundleAnalyzer)(options), (0, _configManifestJsonPlugin.configManifestJsonPlugin)(options), (0, _configSourceMapPlugin.configSourceMapPlugin)(options), (0, _configProgressPlugin.configProgressPlugin)(options), (0, _configBundleIntegrityReport.configBundleIntegrityReport)(options), (0, _configRuntimeResourceCleanup.configRuntimeResourceCleanup)(options), (0, _configMurphyInjectorPlugin.configMurphyInjectorPlugin)(options), (0, _configInjectChunkGraphPlugin.configInjectChunkGraphPlugin)(options), ...webpackPlugins].filter(Boolean);
 }

package/lib/shared/bundler/webpack/tsLoaders.js

@@ -8,10 +8,11 @@ exports.tsLoaders = tsLoaders;
 var _babelLoaderConfig = require("./loaderConfigs/babelLoaderConfig");
 
 function tsLoaders(options) {
+  console.log('testing');
   return [{
-    test: /\.tsx$/,
+    test: /\.tsx?$/,
     exclude: /node_modules/,
-    use: [(0, _babelLoaderConfig.babelLoaderConfig)(options)] // include: path.join(appPath, folder)
+    use: "ts-loader" // include: path.join(appPath, folder)
 
   }];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/client_build_tool",
-  "version": "0.0.13",
+  "version": "0.0.14-exp.1",
   "description": "A CLI tool to  build  web applications and client libraries",
   "main": "lib/index.js",
   "bin": {