@zohodesk/client_build_tool 0.0.13 → 0.0.14-exp.2

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

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _os = require("os");
 
+var _webpack = require("webpack");
+
 // NOTE: Don't use 'config_file' as cli option it was reserved
 var _default = {
   context: {
@@ -355,6 +357,17 @@ var _default = {
     enable: false,
     chunkName: '',
     filePath: ''
+  },
+  enableSubResourceIntegrity: {
+    value: false,
+    cli: 'enable_sub_resource_integrity'
+  },
+  chunkGraph: {
+    enable: {
+      value: false,
+      cli: 'chunk_graph_enable'
+    },
+    fileName: ''
   }
 };
 exports.default = _default;

package/lib/shared/bundler/webpack/custom_plugins/BundleIntegrityReport/ChunkHierarchyPlugin.js

@@ -0,0 +1,52 @@
+"use strict";
+
+// plugins/ChunkHierarchyPlugin.js
+const fs = require("fs");
+
+const path = require("path");
+
+class ChunkHierarchyPlugin {
+  apply(compiler) {
+    compiler.hooks.afterEmit.tap("ChunkHierarchyPlugin", compilation => {
+      try {
+        const {
+          chunkGraph,
+          moduleGraph
+        } = compilation;
+        const hierarchy = {};
+
+        for (const chunk of compilation.chunks) {
+          // skip unnamed or runtime chunks
+          if (!chunk.name) continue;
+          if (chunk.name.includes("runtime")) continue;
+          const modules = chunkGraph.getChunkModulesIterable(chunk);
+          const deps = new Set();
+
+          for (const module of modules) {
+            for (const conn of moduleGraph.getOutgoingConnections(module)) {
+              if (conn.module && conn.module.resource) {
+                deps.add(conn.module.resource);
+              }
+            }
+          }
+
+          hierarchy[chunk.name] = Array.from(deps);
+        }
+
+        const outputPath = compiler.options.output.path;
+        const outputFile = path.join(outputPath, "chunk-hierarchy-report.json"); // Ensure folder exists before writing
+
+        fs.mkdirSync(outputPath, {
+          recursive: true
+        });
+        fs.writeFileSync(outputFile, JSON.stringify(hierarchy, null, 2), "utf-8");
+        console.log(`🧩 Chunk hierarchy report written to: ${outputFile}`);
+      } catch (err) {
+        console.error("❌ ChunkHierarchyPlugin failed:", err);
+      }
+    });
+  }
+
+}
+
+module.exports = ChunkHierarchyPlugin;

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

@@ -0,0 +1,64 @@
+"use strict";
+
+// plugins/ChunkHierarchyPlugin.js
+const fs = require("fs");
+
+const path = require("path");
+
+class ChunkHierarchyPlugin {
+  constructor(outputFileName) {
+    this.outputFileName = outputFileName || "chunk-hierarchy-report.json";
+  }
+
+  apply(compiler) {
+    compiler.hooks.afterEmit.tap("ChunkHierarchyPlugin", compilation => {
+      try {
+        const {
+          chunkGraph,
+          moduleGraph
+        } = compilation;
+        const hierarchy = {};
+
+        for (const chunk of compilation.chunks) {
+          // skip unnamed or runtime chunks
+          if (!chunk.name) {
+            continue;
+          }
+
+          ;
+
+          if (chunk.name.includes("runtime")) {
+            continue;
+          }
+
+          ;
+          const modules = chunkGraph.getChunkModulesIterable(chunk);
+          const deps = new Set();
+
+          for (const module of modules) {
+            for (const conn of moduleGraph.getOutgoingConnections(module)) {
+              if (conn.module && conn.module.resource) {
+                deps.add(conn.module.resource);
+              }
+            }
+          }
+
+          hierarchy[chunk.name] = Array.from(deps);
+        }
+
+        const outputPath = compiler.options.output.path;
+        const outputFile = path.join(outputPath, this.outputFileName); // Ensure folder exists before writing
+
+        fs.mkdirSync(outputPath, {
+          recursive: true
+        });
+        fs.writeFileSync(outputFile, JSON.stringify(hierarchy, null, 2), "utf-8");
+      } catch (err) {
+        console.error("❌ ChunkHierarchyPlugin failed:", err);
+      }
+    });
+  }
+
+}
+
+module.exports = ChunkHierarchyPlugin;

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/pluginConfigs/ChunkHierarchyPlugin.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChunkHierarchyPlugin = ChunkHierarchyPlugin;
+
+var _webpackBundleAnalyzer = require("webpack-bundle-analyzer");
+
+var _modeUtils = require("../common/modeUtils");
+
+/* eslint-disable no-use-before-define */
+function ChunkHierarchyPlugin(options) {
+  return new _webpackBundleAnalyzer.BundleAnalyzerPlugin(bundleAnalyzerOptions);
+}

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configChunkHierarchyPlugin = configChunkHierarchyPlugin;
+
+var _ChunkHierarchyPlugin = _interopRequireDefault(require("../custom_plugins/ChunkHierarchyPlugin"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-use-before-define */
+function configChunkHierarchyPlugin(options) {
+  if (options.chunkGraph.enable) {
+    return new _ChunkHierarchyPlugin.default(options.chunkGraph.fileName);
+  }
+
+  return null;
+}

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/plugins.js

@@ -51,10 +51,12 @@ var _configMurphyInjectorPlugin = require("./pluginConfigs/configMurphyInjectorP
 
 var _configCustomScriptLoadingStrategyPlugin = require("./pluginConfigs/configCustomScriptLoadingStrategyPlugin");
 
+var _configChunkHierarchyPlugin = require("./pluginConfigs/configChunkHierarchyPlugin");
+
 // 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, _configChunkHierarchyPlugin.configChunkHierarchyPlugin)(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.2",
   "description": "A CLI tool to  build  web applications and client libraries",
   "main": "lib/index.js",
   "bin": {
@@ -18,7 +18,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://zgit.csez.zohocorpin.com/zohodesk/react-cli.git"
+    "url": "https://zgit.csecz.zohocorpin.com/zohodesk/react-cli.git"
   },
   "keywords": [
     "buildtool",