@zohodesk/client_build_tool 0.0.6-exp.1 → 0.0.6-exp.11

package/CHANGELOG.md

@@ -1,6 +1,8 @@
 # Changelog and Release Notes
 
-**Featue:-**
+
+
+**Feature:-**
 - externals was added to  Prevent bundling of certain imported packages and retrieve these external dependencies at runtime.
 - to use externals, we use the following pattern in `app > externals` :
 

package/README.md

@@ -84,7 +84,9 @@ These commands provide flexibility and control over your client-side build proce
 For more [Details](ConfigurationDocumentation.md)
 # Changelog and Release Notes
 
-**Featue:-**
+
+
+**Feature:-**
 - externals was added to  Prevent bundling of certain imported packages and retrieve these external dependencies at runtime.
 - to use externals, we use the following pattern in `app > externals` :
 

package/lib/shared/bundler/webpack/custom_plugins/{CdnChangePlugin.js → CdnChangePlugin/index.js}

@@ -7,14 +7,20 @@ exports.default = void 0;
 
 var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
 
-var _nameTemplates = require("../common/nameTemplates");
+var _webpack = require("webpack");
 
-var _modeUtils = require("../common/modeUtils");
+var _nameTemplates = require("../../common/nameTemplates");
+
+var _modeUtils = require("../../common/modeUtils");
+
+var _webpackCustomJsUrlLoader = _interopRequireDefault(require("./webpackCustomJsUrlLoader"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { RuntimeGlobals, RuntimeModule } from 'webpack';
+// eslint-disable-next-line import/extensions
 // import { Template } from 'webpack';
+// eslint-disable-next-line import/extensions
 const pluginName = 'CdnChangePlugin'; // const MODULE_TYPE = 'css/mini-extract';
 // class CdnChangeRuntimePlugin extends RuntimeModule {
 //   constructor(compiler, { variableName }) {
@@ -80,6 +86,12 @@ class CdnChangePlugin {
         };
         cb && cb(null, data);
       });
+
+      compilation.hooks.runtimeRequirementInTree.for(_webpack.RuntimeGlobals.getChunkScriptFilename).tap(pluginName, (chunk, set) => {
+        compilation.addRuntimeModule(chunk, // eslint-disable-next-line new-cap
+        new _webpackCustomJsUrlLoader.default('javascript', 'javascript', _webpack.RuntimeGlobals.getChunkScriptFilename, chunk => chunk.filenameTemplate || (chunk.canBeInitial() ? compilation.outputOptions.filename : compilation.outputOptions.chunkFilename), false, this.variableName));
+        return true;
+      });
     });
   }
 

package/lib/shared/bundler/webpack/custom_plugins/CdnChangePlugin/webpackCustomJsUrlLoader.js

@@ -0,0 +1,266 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _webpack = require("webpack");
+
+const first = set => {
+  const entry = set.values().next();
+  return entry.done ? undefined : entry.value;
+};
+
+class CustomizedGetChunkFilenameRuntimeModule extends _webpack.RuntimeModule {
+  /**
+   * @param {string} contentType the   to use the content hash for
+   * @param {string} name kind of filename
+   * @param {string} global function name to be assigned
+   * @param {function(Chunk): string | FilenameFunction} getFilenameForChunk functor to get the filename or function
+   * @param {boolean} allChunks when false, only async chunks are included
+   */
+  constructor(contentType, name, global, getFilenameForChunk, allChunks, variableName) {
+    super(`get ${name} chunk filename`);
+    this.contentType = contentType;
+    this.global = global;
+    this.getFilenameForChunk = getFilenameForChunk;
+    this.allChunks = allChunks;
+    this.dependentHash = true;
+    this.variableName = variableName;
+  }
+
+  generate() {
+    const {
+      global,
+      chunk,
+      chunkGraph,
+      contentType,
+      getFilenameForChunk,
+      allChunks,
+      compilation
+    } = this;
+    const {
+      runtimeTemplate
+    } = compilation;
+    /** @type {Map<string | FilenameFunction, Set<Chunk>>} */
+
+    const chunkFilenames = new Map();
+    let maxChunks = 0;
+    /** @type {string} */
+
+    let dynamicFilename;
+    /**
+     * @param {Chunk} c the chunk
+     * @returns {void}
+     */
+
+    const addChunk = c => {
+      const chunkFilename = getFilenameForChunk(c);
+
+      if (chunkFilename) {
+        let set = chunkFilenames.get(chunkFilename);
+
+        if (set === undefined) {
+          chunkFilenames.set(chunkFilename, set = new Set());
+        }
+
+        set.add(c);
+
+        if (typeof chunkFilename === 'string') {
+          if (set.size < maxChunks) return;
+
+          if (set.size === maxChunks) {
+            if (chunkFilename.length < dynamicFilename.length) return;
+
+            if (chunkFilename.length === dynamicFilename.length) {
+              if (chunkFilename < dynamicFilename) return;
+            }
+          }
+
+          maxChunks = set.size;
+          dynamicFilename = chunkFilename;
+        }
+      }
+    };
+    /** @type {string[]} */
+
+
+    const includedChunksMessages = [];
+
+    if (allChunks) {
+      includedChunksMessages.push('all chunks');
+
+      for (const c of chunk.getAllReferencedChunks()) {
+        addChunk(c);
+      }
+    } else {
+      includedChunksMessages.push('async chunks');
+
+      for (const c of chunk.getAllAsyncChunks()) {
+        addChunk(c);
+      }
+
+      const includeEntries = chunkGraph.getTreeRuntimeRequirements(chunk).has(_webpack.RuntimeGlobals.ensureChunkIncludeEntries);
+
+      if (includeEntries) {
+        includedChunksMessages.push('sibling chunks for the entrypoint');
+
+        for (const c of chunkGraph.getChunkEntryDependentChunksIterable(chunk)) {
+          addChunk(c);
+        }
+      }
+    }
+
+    for (const entrypoint of chunk.getAllReferencedAsyncEntrypoints()) {
+      addChunk(entrypoint.chunks[entrypoint.chunks.length - 1]);
+    }
+    /** @type {Map<string, Set<string | number>>} */
+
+
+    const staticUrls = new Map();
+    /** @type {Set<Chunk>} */
+
+    const dynamicUrlChunks = new Set();
+    /**
+     * @param {Chunk} c the chunk
+     * @param {string | FilenameFunction} chunkFilename the filename template for the chunk
+     * @returns {void}
+     */
+
+    const addStaticUrl = (c, chunkFilename) => {
+      /**
+       * @param {string | number} value a value
+       * @returns {string} string to put in quotes
+       */
+      const unquotedStringify = value => {
+        const str = `${value}`;
+
+        if (str.length >= 5 && str === `${c.id}`) {
+          // This is shorter and generates the same result
+          return '" + chunkId + "';
+        }
+
+        const s = JSON.stringify(str);
+        return s.slice(1, s.length - 1);
+      };
+
+      const unquotedStringifyWithLength = value => length => unquotedStringify(`${value}`.slice(0, length));
+
+      const chunkFilenameValue = typeof chunkFilename === 'function' ? JSON.stringify(chunkFilename({
+        chunk: c,
+        contentHashType: contentType
+      })) : JSON.stringify(chunkFilename);
+      const staticChunkFilename = compilation.getPath(chunkFilenameValue, {
+        hash: `" + ${_webpack.RuntimeGlobals.getFullHash}() + "`,
+        hashWithLength: length => `" + ${_webpack.RuntimeGlobals.getFullHash}().slice(0, ${length}) + "`,
+        chunk: {
+          id: unquotedStringify(c.id),
+          hash: unquotedStringify(c.renderedHash),
+          hashWithLength: unquotedStringifyWithLength(c.renderedHash),
+          name: unquotedStringify(c.name || c.id),
+          contentHash: {
+            [contentType]: unquotedStringify(c.contentHash[contentType])
+          },
+          contentHashWithLength: {
+            [contentType]: unquotedStringifyWithLength(c.contentHash[contentType])
+          }
+        },
+        contentHashType: contentType
+      });
+      let set = staticUrls.get(staticChunkFilename);
+
+      if (set === undefined) {
+        staticUrls.set(staticChunkFilename, set = new Set());
+      }
+
+      set.add(c.id);
+    };
+
+    for (const [filename, chunks] of chunkFilenames) {
+      if (filename !== dynamicFilename) {
+        for (const c of chunks) addStaticUrl(c, filename);
+      } else {
+        for (const c of chunks) dynamicUrlChunks.add(c);
+      }
+    }
+    /**
+     * @param {function(Chunk): string | number} fn function from chunk to value
+     * @returns {string} code with static mapping of results of fn
+     */
+
+
+    const createMap = fn => {
+      const obj = {};
+      let useId = false;
+      let lastKey;
+      let entries = 0; // eslint-disable-next-line no-restricted-syntax
+
+      for (const c of dynamicUrlChunks) {
+        const value = fn(c);
+
+        if (value === c.id) {
+          useId = true;
+        } else {
+          obj[c.id] = value;
+          lastKey = c.id;
+          entries++;
+        }
+      }
+
+      if (entries === 0) return 'chunkId';
+
+      if (entries === 1) {
+        return useId ? `(chunkId === ${JSON.stringify(lastKey)} ? ${JSON.stringify(obj[lastKey])} : chunkId)` : JSON.stringify(obj[lastKey]);
+      }
+
+      return useId ? `(${JSON.stringify(obj)}[chunkId] || chunkId)` : `${JSON.stringify(obj)}[chunkId]`;
+    };
+    /**
+     * @param {function(Chunk): string | number} fn function from chunk to value
+     * @returns {string} code with static mapping of results of fn for including in quoted string
+     */
+
+
+    const mapExpr = fn => {
+      return `" + ${createMap(fn)} + "`;
+    };
+    /**
+     * @param {function(Chunk): string | number} fn function from chunk to value
+     * @returns {function(number): string} function which generates code with static mapping of results of fn for including in quoted string for specific length
+     */
+
+
+    const mapExprWithLength = fn => length => {
+      return `" + ${createMap(c => `${fn(c)}`.slice(0, length))} + "`;
+    };
+
+    const url = dynamicFilename && compilation.getPath(JSON.stringify(dynamicFilename), {
+      hash: `" + ${_webpack.RuntimeGlobals.getFullHash}() + "`,
+      hashWithLength: length => `" + ${_webpack.RuntimeGlobals.getFullHash}().slice(0, ${length}) + "`,
+      chunk: {
+        id: `" + chunkId + "`,
+        hash: mapExpr(c => c.renderedHash),
+        hashWithLength: mapExprWithLength(c => c.renderedHash),
+        name: mapExpr(c => c.name || c.id),
+        contentHash: {
+          [contentType]: mapExpr(c => c.contentHash[contentType])
+        },
+        contentHashWithLength: {
+          [contentType]: mapExprWithLength(c => c.contentHash[contentType])
+        }
+      },
+      contentHashType: contentType
+    });
+    const cdn = `__CSS_CDN__`;
+    return _webpack.Template.asString([`// This function allow to reference ${includedChunksMessages.join(' and ')}`, `${global} = ${runtimeTemplate.basicFunction('chunkId', staticUrls.size > 0 ? ['// return url for filenames not based on template', // it minimizes to `x===1?"...":x===2?"...":"..."`
+    _webpack.Template.asString(Array.from(staticUrls, ([url, ids]) => {
+      const condition = ids.size === 1 ? `chunkId === ${JSON.stringify(first(ids))}` : `{${Array.from(ids, id => `${JSON.stringify(id)}:1`).join(',')}}[chunkId]`;
+      return `if (${condition}) return window.${cdn}+${url};`;
+    })), '// return url for filenames based on template', `return window.${cdn}+${url};`] : ['// return url for filenames based on template', `return window.${cdn}+${url};`])};`]);
+  }
+
+}
+
+var _default = CustomizedGetChunkFilenameRuntimeModule;
+exports.default = _default;

package/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/I18nRuntimeDealerPlugin.js

@@ -95,7 +95,8 @@ class I18nRuntimeDealerPlugin {
     const {
       chunkFilename,
       locales,
-      localeVarName
+      localeVarName,
+      createSeparateSMap
     } = this.options;
     const chunkFilenameHasContentHash = (0, _hashUtils.hasContentHash)(chunkFilename);
 
@@ -161,6 +162,11 @@ class I18nRuntimeDealerPlugin {
           const replaceText = chunkFilenameUrlGenerator(i18nChunks, locale);
           const replacedStr = runtimeFileSourceStr.replace(_constants.I18N_CHUNK_NAME_GENERATION_SEGMENT, replaceText);
           compilation.emitAsset(newRuntimeName, new RawSource(replacedStr));
+
+          if (createSeparateSMap) {
+            const updatedPath = newRuntimeName.replace('smap/', '');
+            compilation.emitAsset(updatedPath, new RawSource(replacedStr));
+          }
         } // eslint-disable-next-line no-restricted-syntax
 
 

package/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/optionsHandler.js

@@ -27,6 +27,7 @@ function optionsHandler(options) {
   });
   return {
     filename: options.filename || _constants.DEFAULT_FILENAME,
+    createSeparateSMap: options.sourceMapOptions,
     chunkFilename: options.chunkFilename || chunkNameDecider(options.filename),
     mainChunkName: options.mainChunkName,
     templateLabel: options.templateLabel,

package/lib/shared/bundler/webpack/custom_plugins/SourceMapPlugin/index.js

@@ -13,7 +13,7 @@ function checkSmapFilePattern(assetName) {
 }
 
 function skipRuntimeFiles(assetName) {
-  return !assetName.includes('runtime') || !assetName.includes('[locale]');
+  return !assetName.includes('[locale]');
 }
 
 const pluginName = 'SplitSourceMapPlugin'; // Purpose:
@@ -34,9 +34,14 @@ class SourceMapPlugin {
         stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
       }, assets => {
         Object.keys(assets).forEach(assetName => {
+          if (assetName.includes('runtime')) {
+            console.log(assetName);
+          }
+
           const assetCode = assets[assetName].source();
 
-          if (checkSmapFilePattern(assetName) && skipRuntimeFiles(assetName)) {
+          if (checkSmapFilePattern(assetName) // skipRuntimeFiles(assetName)
+          ) {
             compilation.renameAsset(assetName, `smap/${assetName}`);
 
             if (!/\.map$/.test(assetName)) {

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

@@ -15,7 +15,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function configI18nSplitPlugin(options) {
   const {
-    i18nChunkSplit
+    i18nChunkSplit,
+    createSeparateSMap
   } = options;
 
   if (!i18nChunkSplit.chunkSplitEnable) {
@@ -36,6 +37,7 @@ function configI18nSplitPlugin(options) {
     publicPath: i18nPublicPath,
     i18nManifestFileName: (0, _nameTemplates.nameTemplates)('i18nmanifest', options),
     // template: (object, locale) => `window.loadI18n(${JSON.stringify(object)}, ${JSON.stringify(locale)})`,
-    propertiesFolder: i18nChunkSplit.propertiesFolder
+    propertiesFolder: i18nChunkSplit.propertiesFolder,
+    sourceMapOptions: createSeparateSMap
   });
 }

package/package.json

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